fix: widget image-generation feat placements (#1558)

jumperexchange · Dec 2, 2024 · 3bc551f · 3bc551f
1 parent 008af4e
commit 3bc551f
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 30 deletions.
diff --git a/src/app/api/widget-review/route.tsx b/src/app/api/widget-review/route.tsx
@@ -6,7 +6,7 @@
  *
  * Example:
  * ```
- * http://localhost:3000/api/widget-review?fromToken=0x0000000000000000000000000000000000000000&fromChainId=137&toToken=0x0000000000000000000000000000000000000000&toChainId=42161&amount=10&highlighted=amount&theme=dark
+ * http://localhost:3000/api/widget-review?fromToken=0x0000000000000000000000000000000000000000&fromChainId=137&toToken=0x0000000000000000000000000000000000000000&toChainId=42161&amount=10&theme=dark
  * ```
  *
  * @typedef {Object} SearchParams
@@ -17,14 +17,12 @@
  * @property {number} amount - The amount of tokens.
  * @property {boolean} [isSwap] - True if transaction is a swap, default and false if transaction is a bridge (optional).
  * @property {'light'|'dark'} [theme] - The theme for the widget (optional).
- * @property {'from'|'to'|'amount'} [highlighted] - The highlighted element (optional).
  *
  */
 
 import type { ChainId } from '@lifi/sdk';
 import { ImageResponse } from 'next/og';
 import type { CSSProperties } from 'react';
-import type { HighlightedAreas } from 'src/components/ImageGeneration/ImageGeneration.types';
 import { imageResponseOptions } from 'src/components/ImageGeneration/imageResponseOptions';
 import { imageFrameStyles } from 'src/components/ImageGeneration/style';
 import WidgetReviewImage from 'src/components/ImageGeneration/WidgetReviewImage';
@@ -37,16 +35,8 @@ const WIDGET_IMAGE_HEIGHT = 440;
 const WIDGET_IMAGE_SCALING_FACTOR = 2;
 
 export async function GET(request: Request) {
-  const {
-    fromChainId,
-    toChainId,
-    fromToken,
-    toToken,
-    isSwap,
-    theme,
-    amount,
-    highlighted,
-  } = parseSearchParams(request.url);
+  const { fromChainId, toChainId, fromToken, toToken, isSwap, theme, amount } =
+    parseSearchParams(request.url);
 
   // Fetch data asynchronously before rendering
   const fromTokenData = await fetchTokenData(fromChainId, fromToken);
@@ -92,7 +82,6 @@ export async function GET(request: Request) {
           theme={theme as 'light' | 'dark'}
           toChain={toChain}
           amount={amount}
-          highlighted={highlighted as HighlightedAreas}
         />
       </div>
     ),

diff --git a/src/app/api/widget-selection/route.tsx b/src/app/api/widget-selection/route.tsx
@@ -15,7 +15,6 @@
  * @property {string} toToken - The token address to send to.
  * @property {number} toChainId - The chain ID to send to.
  * @property {number} amount - The amount of tokens.
- * @property {number} [amountUSD] - The USD equivalent amount (optional).
  * @property {'light'|'dark'} [theme] - The theme for the widget (optional).
  * @property {'from'|'to'|'amount'} [highlighted] - The highlighted element (optional).
  *
@@ -45,7 +44,6 @@ export async function GET(request: Request) {
     theme,
     amount,
     highlighted,
-    amountUSD,
   } = parseSearchParams(request.url);
 
   // Fetch data asynchronously before rendering
@@ -90,7 +88,6 @@ export async function GET(request: Request) {
           fromChain={fromChain}
           toChain={toChain}
           amount={amount}
-          amountUSD={amountUSD}
           theme={theme as 'light' | 'dark'}
           highlighted={highlighted as HighlightedAreas}
         />

diff --git a/src/components/ImageGeneration/Fields/QuoteField.tsx b/src/components/ImageGeneration/Fields/QuoteField.tsx
@@ -57,6 +57,7 @@ const QuoteField = ({
         style={{
           ...fieldContainerStyle,
           padding: `${extendedHeight ? 56 : 16}px 16px 16px`,
+          width: '100%',
           ...(highlighted && {
             boxShadow: `inset 0 0 0 2px ${theme === 'dark' ? '#653BA3' : '#31007A'}`,
           }),

diff --git a/src/components/ImageGeneration/WidgetExecutionImage.tsx b/src/components/ImageGeneration/WidgetExecutionImage.tsx
@@ -3,7 +3,6 @@ import type { CSSProperties } from 'react';
 import ReviewField from './Fields/ReviewField';
 import { FieldSkeleton } from './FieldSkeleton';
 import type { HighlightedAreas, ImageTheme } from './ImageGeneration.types';
-import ButtonLabel from './Labels/ButtonLabel';
 import CardContent from './Labels/CardContent';
 import CardTitle from './Labels/CardTitle';
 import Title from './Labels/Title';
@@ -78,7 +77,7 @@ const WidgetExecutionImage = ({
             fullWidth={false}
             highlighted={highlighted === 'from'}
             showSkeletons={true}
-            sx={{ padding: '0px 16px', marginTop: 14 }}
+            sx={{ padding: '0px 16px', marginTop: 0 }}
           />
           <CardContent
             cardContent={
@@ -102,18 +101,13 @@ const WidgetExecutionImage = ({
                 : null
             }
             showSkeletons={true}
-            sx={{ padding: '0px 16px', marginTop: 18 }}
+            sx={{ padding: '0px 16px', marginTop: 4 }}
           />
           <FieldSkeleton
             width={164}
             height={12}
             sx={{ marginTop: -12, marginLeft: 14 }}
           />
-          <ButtonLabel
-            buttonLabel={isSwap ? 'Start swapping' : 'Start bridging'}
-            theme={theme}
-            sx={{ marginTop: 53 }}
-          />
         </div>
       </div>
     </div>

diff --git a/src/components/ImageGeneration/WidgetReviewImage.tsx b/src/components/ImageGeneration/WidgetReviewImage.tsx
@@ -2,7 +2,7 @@ import type { ExtendedChain, Token } from '@lifi/sdk';
 import type { CSSProperties } from 'react';
 import ReviewField from './Fields/ReviewField';
 import { FieldSkeleton } from './FieldSkeleton';
-import type { HighlightedAreas, ImageTheme } from './ImageGeneration.types';
+import type { ImageTheme } from './ImageGeneration.types';
 import ButtonLabel from './Labels/ButtonLabel';
 import CardTitle from './Labels/CardTitle';
 import Title from './Labels/Title';
@@ -24,7 +24,6 @@ interface WidgetReviewImageProps {
   amount?: string | null;
   width: number;
   height: number;
-  highlighted?: HighlightedAreas;
   sx?: CSSProperties;
 }
 
@@ -38,7 +37,6 @@ const WidgetReviewImage = ({
   amount,
   width,
   height,
-  highlighted,
   sx,
 }: WidgetReviewImageProps) => {
   const contentContainerStyle = contentContainerStyles({
@@ -77,7 +75,6 @@ const WidgetReviewImage = ({
             token={fromToken}
             amount={amount ? parseFloat(amount) : null}
             fullWidth={false}
-            highlighted={highlighted === 'from'}
             showSkeletons={true}
             sx={{ marginTop: 0 }}
           />
@@ -86,7 +83,6 @@ const WidgetReviewImage = ({
             token={toToken}
             theme={theme}
             fullWidth={false}
-            highlighted={highlighted === 'to'}
             amount={
               amount && fromToken && toToken
                 ? (parseFloat(amount) * parseFloat(fromToken?.priceUSD)) /