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)) /