diff --git a/src/app/api/widget-review/route.tsx b/src/app/api/widget-review/route.tsx index f4b599f7a..cee40c2c5 100644 --- 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} /> ), diff --git a/src/app/api/widget-selection/route.tsx b/src/app/api/widget-selection/route.tsx index c9c5f7b89..7a2893fb7 100644 --- 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 index 80f00b866..714d5258f 100644 --- 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 index 653fd19d2..e4b765324 100644 --- 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 }} /> - diff --git a/src/components/ImageGeneration/WidgetReviewImage.tsx b/src/components/ImageGeneration/WidgetReviewImage.tsx index 811538c5a..68bb731a5 100644 --- 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)) /