@lifi/widget 3.0.1 → 3.1.0

package/hooks/useAccount.ts

@@ -92,13 +92,16 @@ export const useAccount = (args?: UseAccountArgs): AccountResult => {
     const evm: Account = { ...account, chainType: ChainType.EVM };
     const accounts = [evm, svm];
     const connectedAccounts = [evm, svm].filter(
-      (account) => account.isConnected,
+      (account) => account.isConnected && account.address,
     );
     return {
-      account: hasChainTypeArgs
-        ? accounts.find((account) => account.chainType === args?.chainType) ??
-          defaultAccount
-        : accounts.find((account) => account.isConnected) ?? defaultAccount,
+      account:
+        accounts.find(
+          (account) =>
+            (!hasChainTypeArgs || account.chainType === args?.chainType) &&
+            account.isConnected &&
+            account.address,
+        ) ?? defaultAccount,
       // We need to return only connected account list
       accounts: connectedAccounts,
     };

package/hooks/useAvailableChains.ts

@@ -32,7 +32,8 @@ export const useAvailableChains = () => {
       config.setChains(availableChains);
       return availableChains;
     },
-    refetchInterval: 300000,
+    refetchInterval: 300_000,
+    staleTime: 300_000,
   });
 
   const getChainById = useCallback(

package/hooks/useGasRecommendation.ts

@@ -41,5 +41,6 @@ export const useGasRecommendation = (
     },
     enabled: checkRecommendationLiFuel || checkRecommendationMaxButton,
     refetchInterval,
+    staleTime: refetchInterval,
   });
 };

package/hooks/useRoutes.ts

@@ -5,6 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { parseUnits } from 'viem';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { useSetExecutableRoute } from '../stores/routes/useSetExecutableRoute.js';
 import { useSettings } from '../stores/settings/useSettings.js';
 import { defaultSlippage } from '../stores/settings/useSettingsStore.js';
 import { WidgetEvent } from '../types/events.js';
@@ -20,12 +21,13 @@ import { useWidgetEvents } from './useWidgetEvents.js';
 const refetchTime = 60_000;
 
 interface RoutesProps {
-  insurableRoute?: Route;
+  observableRoute?: Route;
 }
 
-export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
-  const { subvariant, sdkConfig, insurance, contractTool, bridges, exchanges } =
+export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
+  const { subvariant, sdkConfig, contractTool, bridges, exchanges } =
     useWidgetConfig();
+  const setExecutableRoute = useSetExecutableRoute();
   const queryClient = useQueryClient();
   const emitter = useWidgetEvents();
   const swapOnly = useSwapOnly();
@@ -135,8 +137,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     sdkConfig?.routeOptions?.allowSwitchChain,
     enabledRefuel && enabledAutoRefuel,
     gasRecommendationFromAmount,
-    insurance,
-    insurableRoute?.id,
+    observableRoute?.id,
   ] as const;
 
   const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } =
@@ -165,8 +166,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           allowSwitchChain,
           enabledRefuel,
           gasRecommendationFromAmount,
-          insurance,
-          insurableRouteId,
+          observableRouteId,
         ],
         signal,
       }) => {
@@ -178,8 +178,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
 
         const allowBridges = swapOnly
           ? []
-          : insurableRoute
-            ? insurableRoute.steps.flatMap((step) =>
+          : observableRoute
+            ? observableRoute.steps.flatMap((step) =>
                 step.includedSteps.reduce((toolKeys, includedStep) => {
                   if (includedStep.type === 'cross') {
                     toolKeys.push(includedStep.toolDetails.key);
@@ -188,9 +188,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
                 }, [] as string[]),
               )
             : allowedBridges;
-
-        const allowExchanges = insurableRoute
-          ? insurableRoute.steps.flatMap((step) =>
+        const allowExchanges = observableRoute
+          ? observableRoute.steps.flatMap((step) =>
               step.includedSteps.reduce((toolKeys, includedStep) => {
                 if (includedStep.type === 'swap') {
                   toolKeys.push(includedStep.toolDetails.key);
@@ -299,7 +298,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
                         : undefined,
                     }
                   : undefined,
-              insurance: insurance ? Boolean(insurableRoute) : undefined,
               order: routePriority,
               slippage: formattedSlippage,
             },
@@ -350,6 +348,16 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
       },
     });
 
+  const setReviewableRoute = (route: Route) => {
+    const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id);
+    queryClient.setQueryData(
+      queryDataKey,
+      { routes: [route] },
+      { updatedAt: dataUpdatedAt },
+    );
+    setExecutableRoute(route);
+  };
+
   return {
     routes: data?.routes,
     isLoading: isEnabled && isLoading,
@@ -360,5 +368,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     refetch,
     fromChain,
     toChain,
+    queryKey,
+    setReviewableRoute,
   };
 };

package/hooks/useTokens.ts

@@ -11,6 +11,7 @@ export const useTokens = (selectedChainId?: number) => {
     queryKey: ['tokens'],
     queryFn: () => getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM] }),
     refetchInterval: 3_600_000,
+    staleTime: 3_600_000,
   });
   const {
     chains,

package/hooks/useTools.ts

@@ -35,7 +35,8 @@ export const useTools = () => {
       );
       return result;
     },
-    refetchInterval: 180000,
+    refetchInterval: 180_000,
+    staleTime: 180_000,
   });
 
   return { tools: data };

package/hooks/useTransactionDetails.ts

@@ -7,7 +7,7 @@ import {
 } from '@tanstack/react-query';
 import { useAccount } from './useAccount.js';
 
-export const useTransactionDetails = (transactionHash: string) => {
+export const useTransactionDetails = (transactionHash?: string) => {
   const { account, accounts } = useAccount();
   const queryClient = useQueryClient();
 
@@ -51,8 +51,8 @@ export const useTransactionDetails = (transactionHash: string) => {
         return transaction;
       }
     },
-    refetchInterval: 300000,
-    enabled: Boolean(account.isConnected),
+    refetchInterval: 300_000,
+    enabled: account.isConnected && Boolean(transactionHash),
     initialData: () => {
       for (const account of accounts) {
         const transaction = queryClient

package/hooks/useTransactionHistory.ts

@@ -28,7 +28,7 @@ export const useTransactionHistory = () => {
 
         return response.transfers;
       }) as QueryFunction<StatusResponse[], (string | undefined)[], never>,
-      refetchInterval: 300000,
+      refetchInterval: 300_000,
       enabled: Boolean(account.address),
     })),
     combine: (results) => {

package/i18n/en.json

@@ -4,7 +4,7 @@
     "title": "Language"
   },
   "format": {
-    "currency": "{{value, currency(currency: USD)}}",
+    "currency": "{{value, currencyExt(currency: USD)}}",
     "number": "{{value, number(maximumFractionDigits: 9)}}"
   },
   "button": {
@@ -90,7 +90,7 @@
   },
   "success": {
     "message": {
-      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} ran out of liquidity for {{tokenSymbol}} token.",
+      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} couldn't proceed due to either slippage settings or lack of liquidity for the {{tokenSymbol}} token.",
       "exchangeSuccessful": "There are now {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain.",
       "purchaseSuccessful": "You now own {{assetName}} in {{walletAddress}} wallet on {{chainName}} chain."
     },
@@ -162,14 +162,16 @@
   },
   "tooltip": {
     "estimatedTime": "Estimated execution time in minutes.",
+    "minReceived": "The estimated minimum amount may change until the swapping/bridging transaction is signed. For 2-step transfers, this applies until the second step transaction is signed.",
     "notFound": {
       "text": "We couldn't find this page.",
       "title": "404"
     },
-    "numberOfSteps": "A number of exchange steps. Each step can contain 1-2 transactions that require a signature.",
+    "numberOfSteps": "Each exchange step can contain 1-2 transactions that require a signature.",
+    "priceImpact": "The estimated value difference between the source and destination tokens.",
     "progressToNextUpdate": "Quotes will update in {{value}} seconds. <0/> Click here to update now.",
-    "settingsModified": "Settings (modified)",
     "selectAll": "Select all",
+    "settingsModified": "Settings (modified)",
     "deselectAll": "Deselect all"
   },
   "main": {
@@ -180,21 +182,22 @@
     "depositStepDetails": "Deposit via {{tool}}",
     "featuredTokens": "Featured tokens",
     "fees": {
-      "estimated": "estimated fees",
-      "networkEstimated": "Estimated network fees:",
-      "networkPaid": "Paid network fees:",
-      "paid": "paid fees",
-      "providerEstimated": "Estimated provider fees:",
-      "providerPaid": "Paid provider fees:"
+      "estimated": "estimated costs",
+      "network": "Network cost",
+      "paid": "paid costs",
+      "provider": "Provider fee"
     },
     "from": "From",
     "fromAmount": "You pay",
     "gasCost": "Gas cost",
     "inProgress": "in progress",
+    "maxSlippage": "Max. slippage",
+    "minReceived": "Min. received",
     "myTokens": "My tokens",
     "onChain": "on {{chainName}}",
     "ownedBy": "Owned by",
     "popularTokens": "Popular tokens",
+    "priceImpact": "Price impact",
     "process": {
       "bridge": {
         "actionRequired": "Please sign the transaction",
@@ -251,10 +254,7 @@
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
       "cheapest": "Best Return",
-      "fastest": "Fastest",
-      "insurable": "Insurable",
-      "insurance": "Insurance",
-      "insured": "Insured"
+      "fastest": "Fastest"
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
@@ -262,12 +262,6 @@
     "tokenSearch": "Search by token name or address",
     "valueLoss": "Value loss"
   },
-  "insurance": {
-    "bridgeExploits": "Bridge malfunctions, hacks or exploits",
-    "insure": "Insure <0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> in transit.",
-    "insured": "You've insured <0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> in transit:",
-    "slippageError": "Error in slippage for tokens received"
-  },
   "settings": {
     "theme": "Theme",
     "enabledBridges": "Bridges",

package/i18n/index.ts

@@ -1,17 +1,17 @@
-import bn from './bn.json';
-import de from './de.json';
-import en from './en.json';
-import es from './es.json';
-import fr from './fr.json';
-import id from './id.json';
-import it from './it.json';
-import ja from './ja.json';
-import ko from './ko.json';
-import pt from './pt.json';
-import th from './th.json';
-import tr from './tr.json';
-import uk from './uk.json';
-import vi from './vi.json';
-import zh from './zh.json';
+import bn from './bn.json' assert { type: 'json' };
+import de from './de.json' assert { type: 'json' };
+import en from './en.json' assert { type: 'json' };
+import es from './es.json' assert { type: 'json' };
+import fr from './fr.json' assert { type: 'json' };
+import id from './id.json' assert { type: 'json' };
+import it from './it.json' assert { type: 'json' };
+import ja from './ja.json' assert { type: 'json' };
+import ko from './ko.json' assert { type: 'json' };
+import pt from './pt.json' assert { type: 'json' };
+import th from './th.json' assert { type: 'json' };
+import tr from './tr.json' assert { type: 'json' };
+import uk from './uk.json' assert { type: 'json' };
+import vi from './vi.json' assert { type: 'json' };
+import zh from './zh.json' assert { type: 'json' };
 
 export { bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh };

package/index.ts

@@ -1,3 +1,4 @@
+export * from '@lifi/types';
 export { App as LiFiWidget } from './App.js';
 export type { WidgetDrawer } from './AppDrawer.js';
 export * from './components/ContractComponent/ItemPrice.js';
@@ -18,9 +19,5 @@ export * from './themes/palettes.js';
 export { watermelonLightTheme } from './themes/watermelonLight.js';
 export { windows95Theme } from './themes/windows95.js';
 export * from './types/events.js';
-export * from './types/token.js';
+export type { TokenAmount } from './types/token.js';
 export * from './types/widget.js';
-
-// ClassNameGenerator.configure((componentName) =>
-//   componentName.replace('Mui', 'LiFi'),
-// );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -34,29 +34,28 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@lifi/sdk": "^3.0.0",
-    "@lifi/wallet-management": "^3.0.0",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.20",
+    "@lifi/sdk": "^3.0.1",
+    "@lifi/wallet-management": "^3.0.1",
+    "@mui/icons-material": "^5.16.1",
+    "@mui/lab": "^5.0.0-alpha.172",
+    "@mui/material": "^5.16.1",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.93.2",
-    "@tanstack/react-query": "^5.48.0",
-    "@tanstack/react-virtual": "^3.7.0",
-    "i18next": "^23.11.5",
+    "@solana/web3.js": "^1.95.0",
+    "@tanstack/react-query": "^5.51.1",
+    "@tanstack/react-virtual": "^3.8.3",
+    "i18next": "^23.12.1",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.2",
-    "react-intersection-observer": "^9.10.3",
-    "react-router-dom": "^6.24.0",
-    "react-timer-hook": "^3.0.7",
+    "react-intersection-observer": "^9.13.0",
+    "react-router-dom": "^6.24.1",
     "uuid": "^10.0.0",
-    "viem": "^2.16.2",
-    "wagmi": "^2.10.7",
-    "zustand": "^4.5.3"
+    "viem": "^2.17.4",
+    "wagmi": "^2.10.10",
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.0",

package/pages/MainPage/ReviewButton.tsx

@@ -5,25 +5,23 @@ import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const ReviewButton: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const setExecutableRoute = useSetExecutableRoute();
   const { subvariant } = useWidgetConfig();
   const splitState = useSplitSubvariantStore((state) => state.state);
   const [toAddress] = useFieldValues('toAddress');
   const { requiredToAddress } = useToAddressRequirements();
-  const { routes } = useRoutes();
+  const { routes, setReviewableRoute } = useRoutes();
 
   const currentRoute = routes?.[0];
 
   const handleClick = async () => {
     if (currentRoute) {
-      setExecutableRoute(currentRoute);
+      setReviewableRoute(currentRoute);
       navigate(navigationRoutes.transactionExecution, {
         state: { routeId: currentRoute.id },
       });

package/pages/RoutesPage/RoutesPage.tsx

@@ -13,21 +13,20 @@ import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { Stack } from './RoutesPage.style.js';
 
 export const RoutesPage: React.FC<BoxProps> = () => {
   const { navigate } = useNavigateBack();
-  const setExecutableRoute = useSetExecutableRoute();
   const {
     routes,
     isLoading,
     isFetching,
     dataUpdatedAt,
     refetchTime,
-    refetch,
     fromChain,
+    refetch,
+    setReviewableRoute,
   } = useRoutes();
   const { account } = useAccount({ chainType: fromChain?.chainType });
   const [toAddress] = useFieldValues('toAddress');
@@ -52,7 +51,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   useHeader(t(`header.youGet`), headerAction);
 
   const handleRouteClick = (route: Route) => {
-    setExecutableRoute(route);
+    setReviewableRoute(route);
     navigate(navigationRoutes.transactionExecution, {
       state: { routeId: route.id },
     });

package/pages/SelectEnabledToolsPage.tsx

@@ -41,7 +41,7 @@ const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
     : t('tooltip.selectAll');
 
   return (
-    <Tooltip title={tooltipTitle} arrow>
+    <Tooltip title={tooltipTitle}>
       <IconButton
         size="medium"
         edge={theme?.navigation?.edge ? 'end' : false}

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -217,7 +217,7 @@ export const SendToWalletPage = () => {
           >
             {t('button.done')}
           </ButtonTertiary>
-          <Tooltip title={t('button.bookmark')} arrow>
+          <Tooltip title={t('button.bookmark')}>
             <SendToWalletIconButton
               onClick={handleBookmarkAddress}
               loading={isBookmarkButtonLoading}

package/pages/SettingsPage/ThemeSettings.tsx

@@ -29,7 +29,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
   Icon,
   ...props
 }) => (
-  <Tooltip title={title} arrow>
+  <Tooltip title={title}>
     <Tab icon={Icon} value={value} {...props} disableRipple />
   </Tooltip>
 );

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -7,9 +7,9 @@ import { useLocation } from 'react-router-dom';
 import { Card } from '../../components/Card/Card.js';
 import { CardTitle } from '../../components/Card/CardTitle.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
-import { Insurance } from '../../components/Insurance/Insurance.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { getStepList } from '../../components/Step/StepList.js';
+import { TransactionDetails } from '../../components/TransactionDetails.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useTools } from '../../hooks/useTools.js';
@@ -18,7 +18,6 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
 import { getSourceTxHash } from '../../stores/routes/utils.js';
 import { buildRouteFromTxHistory } from '../../utils/converters.js';
-import { formatTokenAmount } from '../../utils/format.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { ContactSupportButton } from './ContactSupportButton.js';
 import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
@@ -34,7 +33,7 @@ export const TransactionDetailsPage: React.FC = () => {
   );
 
   const { transaction, isLoading } = useTransactionDetails(
-    state?.transactionHash,
+    !storedRouteExecution && state?.transactionHash,
   );
 
   const title =
@@ -71,8 +70,6 @@ export const TransactionDetailsPage: React.FC = () => {
 
   const sourceTxHash = getSourceTxHash(routeExecution?.route);
 
-  const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
-
   let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
 
   if (process.env.NODE_ENV === 'development') {
@@ -97,14 +94,14 @@ export const TransactionDetailsPage: React.FC = () => {
         pb={1}
       >
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
+          {startedAt.toLocaleString(i18n.language, {
             dateStyle: 'long',
-          }).format(startedAt)}
+          })}
         </Typography>
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
+          {startedAt.toLocaleString(i18n.language, {
             timeStyle: 'short',
-          }).format(startedAt)}
+          })}
         </Typography>
       </Box>
       {getStepList(routeExecution?.route, subvariant)}
@@ -113,17 +110,9 @@ export const TransactionDetailsPage: React.FC = () => {
           {contractSecondaryComponent}
         </ContractComponent>
       ) : null}
-      {routeExecution?.route?.insurance?.state === 'INSURED' ? (
-        <Insurance
-          status={routeExecution.status}
-          feeAmountUsd={routeExecution.route.insurance.feeAmountUsd}
-          insuredAmount={formatTokenAmount(
-            BigInt(routeExecution.route.toAmountMin),
-            routeExecution.route.toToken.decimals,
-          )}
-          insuredTokenSymbol={routeExecution.route.toToken.symbol}
-          insurableRouteId={routeExecution.route.id}
-          insuranceCoverageId={insuranceCoverageId}
+      {routeExecution?.route ? (
+        <TransactionDetails
+          route={routeExecution?.route}
           sx={{ marginTop: 2 }}
         />
       ) : null}

package/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -80,14 +80,12 @@ export const TransactionHistoryItem: React.FC<{
         px={2}
       >
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(
-            startedAt,
-          )}
+          {startedAt.toLocaleString(i18n.language, { dateStyle: 'long' })}
         </Typography>
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
+          {startedAt.toLocaleString(i18n.language, {
             timeStyle: 'short',
-          }).format(startedAt)}
+          })}
         </Typography>
       </Box>
       <Box px={2} py={2}>

package/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -126,7 +126,6 @@ const ExchangeRateBottomSheetContent: React.FC<
             value: formatTokenAmount(
               BigInt(data.oldToAmount),
               data.toToken.decimals,
-              5,
             ),
           })}{' '}
           {data?.toToken.symbol}
@@ -139,7 +138,6 @@ const ExchangeRateBottomSheetContent: React.FC<
             value: formatTokenAmount(
               BigInt(data?.newToAmount),
               data?.toToken.decimals,
-              5,
             ),
           })}{' '}
           {data?.toToken.symbol}

package/pages/TransactionPage/RouteTracker.tsx

@@ -0,0 +1,68 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js';
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
+
+export interface RouteTrackerProps {
+  observableRouteId: string;
+  onChange: Dispatch<SetStateAction<string>>;
+  onFetching: Dispatch<SetStateAction<boolean>>;
+}
+
+export const RouteTracker = ({
+  observableRouteId,
+  onChange,
+  onFetching,
+}: RouteTrackerProps) => {
+  const routeExecutionStore = useRouteExecutionStoreContext();
+  const setExecutableRoute = useSetExecutableRoute();
+  const [observableRoute] = useState(
+    () => routeExecutionStore.getState().routes[observableRouteId]?.route,
+  );
+  const observableRouteIdRef = useRef(observableRoute?.id);
+  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes(
+    { observableRoute },
+  );
+  const currentRoute = routes?.[0];
+
+  /**
+   * The reviewable route is the route that the user currently sees on the review page.
+   * The observable route is the route for which we track bridges and exchanges.
+   * This allows us to query the route using the same tool each time we refresh.
+   * The observable and reviewable routes can be the same when we first enter the review page.
+   */
+  useEffect(() => {
+    if (
+      observableRouteIdRef.current &&
+      currentRoute &&
+      observableRouteIdRef.current !== currentRoute.id
+    ) {
+      const reviewableRouteId = observableRouteIdRef.current;
+      observableRouteIdRef.current = currentRoute.id;
+      setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId]);
+      onChange(currentRoute.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentRoute?.id, observableRouteId]);
+
+  useEffect(() => {
+    onFetching(isFetching);
+  }, [isFetching, onFetching]);
+
+  const handleRefetch = () => {
+    refetch();
+  };
+
+  return (
+    <ProgressToNextUpdate
+      updatedAt={dataUpdatedAt || new Date().getTime()}
+      timeToUpdate={refetchTime}
+      isLoading={isFetching}
+      onClick={handleRefetch}
+      sx={{ marginRight: -1 }}
+      size="medium"
+    />
+  );
+};