refactor: getWidgetImage helper

jumperexchange · Dec 10, 2024 · 85bfd2c · 85bfd2c
1 parent 3155947
commit 85bfd2c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 27 deletions.
diff --git a/src/app/ui/bridge/StepDetail.tsx b/src/app/ui/bridge/StepDetail.tsx
@@ -4,8 +4,6 @@ import Image from 'next/image';
 import type { ReactElement } from 'react';
 import { StepDetailContainer } from './StepDetail.style';
 
-const WIDGET_AMOUNT = 3;
-
 interface StepDetailImageProps {
   imgUrl: string;
   width: number;

diff --git a/src/app/ui/bridge/StepsExplainer.tsx b/src/app/ui/bridge/StepsExplainer.tsx
@@ -27,19 +27,19 @@ const StepsExplainerSection = ({
     {
       title: 'Step 1: Prepare Your Assets',
       description: `Before you can bridge your assets, you need to ensure you have the necessary funds and assets on the ${sourceChain?.name} network. Make sure you have the correct ${sourceChain?.name} wallet address and that your ${sourceToken?.name} account is funded.`,
-      img: getWidgetImageProps(
+      img: getWidgetImageProps({
         sourceToken,
         sourceChain,
         destinationToken,
         destinationChain,
         theme,
-        {
+        widgetImageProps: {
           endpoint: 'widget-selection',
           width: 416,
           height: 496,
           alt: 'Widget Selection Image',
         },
-      ),
+      }),
     },
     {
       title: 'Step 2: Check Available Bridge Options',
@@ -55,19 +55,19 @@ const StepsExplainerSection = ({
           <li>Celer</li>
         </ul>
       ),
-      img: getWidgetImageProps(
+      img: getWidgetImageProps({
         sourceToken,
         sourceChain,
         destinationToken,
         destinationChain,
         theme,
-        {
+        widgetImageProps: {
           endpoint: 'widget-quotes',
           width: 856,
           height: 490,
           alt: 'Widget Quotes Image',
         },
-      ),
+      }),
     },
     {
       title: 'Step 3: Select a Bridge',
@@ -81,19 +81,19 @@ const StepsExplainerSection = ({
           </li>
         </ul>
       ),
-      img: getWidgetImageProps(
+      img: getWidgetImageProps({
         sourceToken,
         sourceChain,
         destinationToken,
         destinationChain,
         theme,
-        {
+        widgetImageProps: {
           endpoint: 'widget-review',
           width: 416,
           height: 440,
           alt: 'Widget Review Image',
         },
-      ),
+      }),
     },
     {
       title: 'Step 4: Bridge Your Assets',
@@ -107,19 +107,19 @@ const StepsExplainerSection = ({
           </li>
         </ul>
       ),
-      img: getWidgetImageProps(
+      img: getWidgetImageProps({
         sourceToken,
         sourceChain,
         destinationToken,
         destinationChain,
         theme,
-        {
+        widgetImageProps: {
           endpoint: 'widget-execution',
           width: 416,
           height: 432,
           alt: 'Widget Execution Image',
         },
-      ),
+      }),
     },
     {
       title: 'Step 5: Verify Your Bridge',
@@ -140,19 +140,19 @@ const StepsExplainerSection = ({
           </li>
         </ul>
       ),
-      img: getWidgetImageProps(
+      img: getWidgetImageProps({
         sourceToken,
         sourceChain,
         destinationToken,
         destinationChain,
         theme,
-        {
+        widgetImageProps: {
           endpoint: 'widget-success',
           width: 416,
           height: 432,
           alt: 'Widget Success Image',
         },
-      ),
+      }),
     },
   ];
 

diff --git a/src/utils/image-generation/getWidgetImage.ts b/src/utils/image-generation/getWidgetImage.ts
@@ -7,18 +7,51 @@ interface WidgetImageProps {
   alt: string;
 }
 
-const WIDGET_AMOUNT = 3;
+const DEFAUL_WIDGET_AMOUNT = 1;
+
+interface GetWidgetImageProps {
+  sourceToken?: Token;
+  sourceChain?: ExtendedChain;
+  destinationToken?: Token;
+  destinationChain?: ExtendedChain;
+  theme?: any;
+  amount?: number;
+  widgetImageProps: WidgetImageProps;
+  isSwap?: boolean;
+}
+
+export const getWidgetImageProps = ({
+  sourceToken,
+  sourceChain,
+  destinationToken,
+  destinationChain,
+  theme,
+  amount = DEFAUL_WIDGET_AMOUNT, // Default to DEFAUL_WIDGET_AMOUNT if not provided
+  widgetImageProps,
+  isSwap = false, // Default to false if not provided
+}: GetWidgetImageProps) => {
+  const params = new URLSearchParams();
+
+  if (sourceToken) {
+    params.set('fromToken', sourceToken.address);
+  }
+  if (sourceChain) {
+    params.set('fromChainId', sourceChain.id.toString());
+  }
+  if (destinationToken) {
+    params.set('toToken', destinationToken.address);
+  }
+  if (destinationChain) {
+    params.set('toChainId', destinationChain.id.toString());
+  }
+  if (theme) {
+    params.set('theme', theme.palette.mode);
+  }
+  params.set('amount', (amount ? amount : DEFAUL_WIDGET_AMOUNT).toString());
+  params.set('isSwap', (isSwap ? true : false).toString());
 
-export const getWidgetImageProps = (
-  sourceToken: Token,
-  sourceChain: ExtendedChain,
-  destinationToken: Token,
-  destinationChain: ExtendedChain,
-  theme: any,
-  widgetImageProps: WidgetImageProps,
-) => {
   return {
-    imgUrl: `/api/${widgetImageProps.endpoint}?fromToken=${sourceToken.address}&fromChainId=${sourceChain.id}&toToken=${destinationToken.address}&toChainId=${destinationChain.id}&amount=${WIDGET_AMOUNT}&theme=${theme.palette.mode}&isSwap=false`,
+    imgUrl: `/api/${widgetImageProps.endpoint}?${params.toString()}`,
     width: widgetImageProps.width,
     height: widgetImageProps.height,
     alt: widgetImageProps.alt,