fix: show correct final toAmount

lifinance · Jul 18, 2022 · 4a64558 · 4a64558
1 parent d901074
commit 4a64558
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -3,7 +3,7 @@ import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
 import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
-import { formatTokenAmount } from '../../utils/format';
+import { formatTokenAmount } from '../../utils';
 import { LiFiLogo } from '../LiFiLogo';
 import {
   StepAvatar,
@@ -95,7 +95,7 @@ export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
       {step.action.fromToken.symbol}
       <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5 }} />
       {formatTokenAmount(
-        step.estimate.toAmount,
+        step.execution?.toAmount ?? step.estimate.toAmount,
         step.action.toToken.decimals,
       )}{' '}
       {step.action.toToken.symbol}

diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount } from '../utils';
 import { useToken } from './useToken';
 
 export const useTokenBalance = (chainId: number, tokenAddress: string) => {
@@ -32,9 +32,9 @@ export const useTokenBalance = (chainId: number, tokenAddress: string) => {
     {
       enabled: Boolean(account.address) && Boolean(token),
       refetchIntervalInBackground: true,
-      refetchInterval: 60_000,
-      staleTime: 60_000,
-      cacheTime: 60_000,
+      refetchInterval: 30_000,
+      staleTime: 30_000,
+      cacheTime: 30_000,
     },
   );
 

diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -117,7 +117,13 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
           </Typography>
           {status === 'success' ? (
             <StepToken
-              token={{ ...route.toToken, amount: route.toAmount }}
+              token={{
+                ...route.toToken,
+                amount:
+                  route.steps.at(-1)?.execution?.toAmount ??
+                  route.steps.at(-1)?.estimate.toAmount ??
+                  route.toAmount,
+              }}
               py={1}
             />
           ) : null}

diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -15,7 +15,7 @@ export const SwapPage: React.FC = () => {
   const { state }: any = useLocation();
   const navigate = useNavigate();
   const { route, status, executeRoute, restartRoute, removeRoute } =
-    useRouteExecution(state.routeId as string);
+    useRouteExecution(state?.routeId);
 
   const handleRemoveRoute = () => {
     removeRoute();
@@ -49,12 +49,15 @@ export const SwapPage: React.FC = () => {
             step={step}
             fromToken={
               index === 0
-                ? { ...route.fromToken, amount: route.fromAmount }
+                ? { ...step.action.fromToken, amount: step.action.fromAmount }
                 : undefined
             }
             toToken={
               index === steps.length - 1
-                ? { ...route.toToken, amount: route.toAmount }
+                ? {
+                    ...step.action.toToken,
+                    amount: step.execution?.toAmount ?? step.estimate.toAmount,
+                  }
                 : undefined
             }
           />