fix: use execution token if present

lifinance · Nov 8, 2022 · 4e71609 · 4e71609
1 parent b96ec48
commit 4e71609
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 47 deletions.
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -121,7 +121,7 @@ export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
       {t('format.number', {
         value: formatTokenAmount(
           step.execution?.toAmount ?? step.estimate.toAmount,
-          step.action.toToken.decimals,
+          step.execution?.toToken?.decimals ?? step.action.toToken.decimals,
         ),
       })}{' '}
       {step.action.toToken.symbol}

diff --git a/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx b/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx
@@ -83,29 +83,27 @@ export const SwapDetailsPage: React.FC = () => {
           }).format(startedAt)}
         </Typography>
       </Box>
-      {routeExecution?.route.steps.map((step, index, steps) => (
-        <Fragment key={step.id}>
-          <Step
-            step={step}
-            fromToken={
-              index === 0
-                ? { ...step.action.fromToken, amount: step.action.fromAmount }
-                : undefined
-            }
-            toToken={
-              index === steps.length - 1
-                ? {
-                    ...step.action.toToken,
-                    amount: step.execution?.toAmount ?? step.estimate.toAmount,
-                  }
-                : undefined
-            }
-          />
-          {steps.length > 1 && index !== steps.length - 1 ? (
-            <StepDivider />
-          ) : null}
-        </Fragment>
-      ))}
+      {routeExecution?.route.steps.map((step, index, steps) => {
+        const fromToken =
+          index === 0
+            ? { ...step.action.fromToken, amount: step.action.fromAmount }
+            : undefined;
+        const toToken =
+          index === steps.length - 1
+            ? {
+                ...(step.execution?.toToken ?? step.action?.toToken),
+                amount: step.execution?.toAmount ?? step.estimate.toAmount,
+              }
+            : undefined;
+        return (
+          <Fragment key={step.id}>
+            <Step step={step} fromToken={fromToken} toToken={toToken} />
+            {steps.length > 1 && index !== steps.length - 1 ? (
+              <StepDivider />
+            ) : null}
+          </Fragment>
+        );
+      })}
       <Card mt={2}>
         <Box
           sx={{

diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -67,29 +67,27 @@ export const SwapPage: React.FC = () => {
 
   return (
     <Container>
-      {route?.steps.map((step, index, steps) => (
-        <Fragment key={step.id}>
-          <Step
-            step={step}
-            fromToken={
-              index === 0
-                ? { ...step.action.fromToken, amount: step.action.fromAmount }
-                : undefined
-            }
-            toToken={
-              index === steps.length - 1
-                ? {
-                    ...step.action.toToken,
-                    amount: step.execution?.toAmount ?? step.estimate.toAmount,
-                  }
-                : undefined
-            }
-          />
-          {steps.length > 1 && index !== steps.length - 1 ? (
-            <StepDivider />
-          ) : null}
-        </Fragment>
-      ))}
+      {route?.steps.map((step, index, steps) => {
+        const fromToken =
+          index === 0
+            ? { ...step.action.fromToken, amount: step.action.fromAmount }
+            : undefined;
+        const toToken =
+          index === steps.length - 1
+            ? {
+                ...(step.execution?.toToken ?? step.action?.toToken),
+                amount: step.execution?.toAmount ?? step.estimate.toAmount,
+              }
+            : undefined;
+        return (
+          <Fragment key={step.id}>
+            <Step step={step} fromToken={fromToken} toToken={toToken} />
+            {steps.length > 1 && index !== steps.length - 1 ? (
+              <StepDivider />
+            ) : null}
+          </Fragment>
+        );
+      })}
       {status === 'idle' || status === 'error' ? (
         <>
           <GasSufficiencyMessage route={route} mt={2} />