@lifi/widget 3.2.2 → 3.3.0

package/components/Step/StepProcess.tsx

@@ -1,9 +1,9 @@
 import type { LiFiStep, Process } from '@lifi/sdk';
-import { LinkRounded } from '@mui/icons-material';
+import { OpenInNewRounded } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks/useProcessMessage.js';
+import { CardIconButton } from '../Card/CardIconButton.js';
 import { CircularProgress } from './CircularProgress.js';
-import { LinkButton } from './StepProcess.style.js';
 
 export const StepProcess: React.FC<{
   step: LiFiStep;
@@ -28,15 +28,15 @@ export const StepProcess: React.FC<{
           {title}
         </Typography>
         {process.txLink ? (
-          <LinkButton
-            size="medium"
+          <CardIconButton
+            size="small"
             LinkComponent={Link}
             href={process.txLink}
             target="_blank"
             rel="nofollow noreferrer"
           >
-            <LinkRounded />
-          </LinkButton>
+            <OpenInNewRounded fontSize="inherit" />
+          </CardIconButton>
         ) : null}
       </Box>
       {message ? (

package/components/Step/StepTimer.tsx

@@ -1,11 +1,22 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
+import { AccessTimeFilled } from '@mui/icons-material';
+import { Box, Tooltip } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTimer } from '../../hooks/timer/useTimer.js';
+import { IconTypography } from '../IconTypography.js';
+
+const getExecutionProcess = (step: LiFiStepExtended) =>
+  step.execution?.process.findLast(
+    (process) =>
+      process.type === 'SWAP' ||
+      process.type === 'CROSS_CHAIN' ||
+      process.type === 'RECEIVING_CHAIN',
+  );
 
 const getExpiryTimestamp = (step: LiFiStepExtended) =>
   new Date(
-    (step.execution?.process[0]?.startedAt ?? Date.now()) +
+    (getExecutionProcess(step)?.startedAt ?? Date.now()) +
       step.estimate.executionDuration * 1000,
   );
 
@@ -15,8 +26,12 @@ export const StepTimer: React.FC<{
 }> = ({ step, hideInProgress }) => {
   const { t, i18n } = useTranslation();
   const [isExpired, setExpired] = useState(false);
-  const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
-  const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
+  const [isExecutionStarted, setExecutionStarted] = useState(
+    () => !!getExecutionProcess(step),
+  );
+  const [expiryTimestamp, setExpiryTimestamp] = useState(() =>
+    getExpiryTimestamp(step),
+  );
   const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
     autoStart: false,
     expiryTimestamp,
@@ -24,41 +39,59 @@ export const StepTimer: React.FC<{
   });
 
   useEffect(() => {
-    if (isExpired || !step.execution) {
+    const executionProcess = getExecutionProcess(step);
+    if (!executionProcess) {
+      return;
+    }
+    const shouldRestart = executionProcess.status === 'FAILED';
+    const shouldPause = executionProcess.status === 'ACTION_REQUIRED';
+    const shouldStart =
+      executionProcess.status === 'STARTED' ||
+      executionProcess.status === 'PENDING';
+    const shouldResume = executionProcess.status === 'PENDING';
+    if (isExecutionStarted && shouldRestart) {
+      setExecutionStarted(false);
+      setExpired(false);
       return;
     }
-    if (!isExecutionStarted) {
+    if (isExecutionStarted && isExpired) {
+      return;
+    }
+    if (!isExecutionStarted && shouldStart) {
+      const expiryTimestamp = getExpiryTimestamp(step);
       setExecutionStarted(true);
-      restart(getExpiryTimestamp(step));
+      setExpired(false);
+      setExpiryTimestamp(expiryTimestamp);
+      restart(expiryTimestamp);
+      return;
     }
-    const shouldBePaused = step.execution.process.some(
-      (process) =>
-        process.status === 'ACTION_REQUIRED' || process.status === 'FAILED',
-    );
-    if (isRunning && shouldBePaused) {
+    if (isRunning && shouldPause) {
       pause();
-    } else if (!isRunning && !shouldBePaused) {
+    } else if (!isRunning && shouldResume) {
       resume();
     }
-  }, [
-    expiryTimestamp,
-    isExecutionStarted,
-    isExpired,
-    isRunning,
-    pause,
-    restart,
-    resume,
-    step,
-  ]);
+  }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step]);
 
   if (!isExecutionStarted) {
-    return Math.ceil(step.estimate.executionDuration / 60).toLocaleString(
-      i18n.language,
-      {
-        style: 'unit',
-        unit: 'minute',
-        unitDisplay: 'narrow',
-      },
+    const showSeconds = step.estimate.executionDuration < 60;
+    const duration = showSeconds
+      ? Math.floor(step.estimate.executionDuration)
+      : Math.floor(step.estimate.executionDuration / 60);
+    return (
+      <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
+        <Box component="span" display="flex" alignItems="center">
+          <IconTypography component="span" mr={0.5} fontSize={16}>
+            <AccessTimeFilled fontSize="inherit" />
+          </IconTypography>
+          <Box component="span">
+            {duration.toLocaleString(i18n.language, {
+              style: 'unit',
+              unit: showSeconds ? 'second' : 'minute',
+              unitDisplay: 'narrow',
+            })}
+          </Box>
+        </Box>
+      </Tooltip>
     );
   }
 
@@ -72,7 +105,19 @@ export const StepTimer: React.FC<{
     return null;
   }
 
-  return isTimerExpired
-    ? t('main.inProgress')
-    : `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
+  return isTimerExpired ? (
+    t('main.inProgress')
+  ) : (
+    <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
+      <Box component="span" display="flex" alignItems="center">
+        <IconTypography component="span" mr={0.5} fontSize={16}>
+          <AccessTimeFilled fontSize="inherit" />
+        </IconTypography>
+        <Box
+          component="span"
+          sx={{ fontVariantNumeric: 'tabular-nums', cursor: 'help' }}
+        >{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</Box>
+      </Box>
+    </Tooltip>
+  );
 };

package/components/StepActions/StepActions.style.tsx

@@ -71,11 +71,3 @@ export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }));
-
-export const IconTypography = styled(Typography)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.32)
-      : alpha(theme.palette.common.white, 0.4),
-  lineHeight: 0,
-}));

package/components/TransactionDetails.tsx

@@ -9,7 +9,7 @@ import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isRouteDone } from '../stores/routes/utils.js';
-import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../utils/fees.js';
+import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
 import {
   convertToSubscriptFormat,
   formatTokenAmount,
@@ -35,18 +35,8 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   const toggleCard = () => {
     setCardExpanded((cardExpanded) => !cardExpanded);
   };
-
-  const gasCosts = getGasCostsBreakdown(route);
-  const feeCosts = getFeeCostsBreakdown(route, false);
-  const gasCostUSD = gasCosts.reduce(
-    (sum, gasCost) => sum + gasCost.amountUSD,
-    0,
-  );
-  const feeCostUSD = feeCosts.reduce(
-    (sum, feeCost) => sum + feeCost.amountUSD,
-    0,
-  );
-  const fees = gasCostUSD + feeCostUSD;
+  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =
+    getAccumulatedFeeCostsBreakdown(route);
 
   const fromTokenAmount = formatTokenAmount(
     BigInt(route.fromAmount),
@@ -80,11 +70,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         <Box display="flex" flex={1} alignItems="center" justifyContent="left">
           <TokenRate route={route} />
         </Box>
-        <FeeBreakdownTooltip
-          route={route}
-          gasCosts={gasCosts}
-          feeCosts={feeCosts}
-        >
+        <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
           <Box
             display="flex"
             alignItems="center"
@@ -101,8 +87,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               color="text.primary"
               fontWeight="600"
               lineHeight={1.429}
+              data-value={combinedFeesUSD}
             >
-              {t(`format.currency`, { value: fees })}
+              {t(`format.currency`, { value: combinedFeesUSD })}
             </Typography>
           </Box>
         </FeeBreakdownTooltip>
@@ -118,7 +105,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         <Box px={2} pb={2}>
           <Box display="flex" justifyContent="space-between" mb={0.5}>
             <Typography variant="body2">{t('main.fees.network')}</Typography>
-            <FeeBreakdownTooltip route={route} feeCosts={[]}>
+            <FeeBreakdownTooltip gasCosts={gasCosts}>
               <Typography variant="body2">
                 {t(`format.currency`, {
                   value: gasCostUSD,
@@ -129,11 +116,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           {feeCosts.length ? (
             <Box display="flex" justifyContent="space-between" mb={0.5}>
               <Typography variant="body2">{t('main.fees.provider')}</Typography>
-              <FeeBreakdownTooltip
-                route={route}
-                gasCosts={[]}
-                feeCosts={feeCosts}
-              >
+              <FeeBreakdownTooltip feeCosts={feeCosts}>
                 <Typography variant="body2">
                   {t(`format.currency`, {
                     value: feeCostUSD,

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.2.2';
+export const version = '3.3.0';

package/hooks/timer/useTimer.ts

@@ -23,10 +23,12 @@ export function useTimer({
   autoStart = true,
 }: UseTimerProps) {
   const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
-  const [seconds, setSeconds] = useState(getSecondsFromExpiry(expiryTimestamp));
+  const [seconds, setSeconds] = useState(() =>
+    getSecondsFromExpiry(expiryTimestamp),
+  );
   const [isRunning, setIsRunning] = useState(autoStart);
   const [didStart, setDidStart] = useState(autoStart);
-  const [delay, setDelay] = useState(
+  const [delay, setDelay] = useState(() =>
     getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY),
   );
 

package/i18n/en.json

@@ -169,7 +169,7 @@
   },
   "tooltip": {
     "deselectAll": "Deselect all",
-    "estimatedTime": "Estimated execution time in minutes.",
+    "estimatedTime": "Estimated time to complete the swap or bridge transaction, excluding chain switching and token approval.",
     "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.",
@@ -196,7 +196,6 @@
       "provider": "Provider fee"
     },
     "from": "From",
-    "gasCost": "Gas cost",
     "inProgress": "in progress",
     "maxSlippage": "Max. slippage",
     "minReceived": "Min. received",

package/i18n/index.ts

@@ -1,17 +1,17 @@
-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' };
+import bn from './bn.json' with { type: 'json' };
+import de from './de.json' with { type: 'json' };
+import en from './en.json' with { type: 'json' };
+import es from './es.json' with { type: 'json' };
+import fr from './fr.json' with { type: 'json' };
+import id from './id.json' with { type: 'json' };
+import it from './it.json' with { type: 'json' };
+import ja from './ja.json' with { type: 'json' };
+import ko from './ko.json' with { type: 'json' };
+import pt from './pt.json' with { type: 'json' };
+import th from './th.json' with { type: 'json' };
+import tr from './tr.json' with { type: 'json' };
+import uk from './uk.json' with { type: 'json' };
+import vi from './vi.json' with { type: 'json' };
+import zh from './zh.json' with { type: 'json' };
 
 export { bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.2.2",
+  "version": "3.3.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",
@@ -35,15 +35,15 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.5",
-    "@mui/icons-material": "^5.16.4",
-    "@mui/lab": "^5.0.0-alpha.172",
-    "@mui/material": "^5.16.4",
+    "@lifi/wallet-management": "^3.0.6",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.5",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.95.1",
-    "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-virtual": "^3.8.3",
+    "@solana/web3.js": "^1.95.2",
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-virtual": "^3.8.4",
     "i18next": "^23.12.2",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
@@ -53,8 +53,8 @@
     "react-intersection-observer": "^9.13.0",
     "react-router-dom": "^6.25.1",
     "uuid": "^10.0.0",
-    "viem": "^2.17.11",
-    "wagmi": "^2.12.0",
+    "viem": "^2.18.5",
+    "wagmi": "^2.12.1",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,10 +1,11 @@
 import type { FullStatusData } from '@lifi/sdk';
 import { ContentCopyRounded } from '@mui/icons-material';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Card } from '../../components/Card/Card.js';
+import { CardIconButton } from '../../components/Card/CardIconButton.js';
 import { CardTitle } from '../../components/Card/CardTitle.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
 import { PageContainer } from '../../components/PageContainer.js';
@@ -124,10 +125,10 @@ export const TransactionDetailsPage: React.FC = () => {
           }}
         >
           <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
-          <Box mr={1} mt={1}>
-            <IconButton size="medium" onClick={copySupportId}>
-              <ContentCopyRounded fontSize="small" />
-            </IconButton>
+          <Box mr={2} mt={1}>
+            <CardIconButton size="small" onClick={copySupportId}>
+              <ContentCopyRounded fontSize="inherit" />
+            </CardIconButton>
           </Box>
         </Box>
         <Typography

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -6,9 +6,11 @@ import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
 import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
-import { calcValueLoss } from './utils.js';
+import { calculateValueLossPercentage } from './utils.js';
 
 interface TokenValueBottomSheetProps {
   route: Route;
@@ -44,6 +46,10 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   const { t } = useTranslation();
   const ref = useRef<HTMLElement>();
   useSetContentHeight(ref);
+  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =
+    getAccumulatedFeeCostsBreakdown(route);
+  const fromAmountUSD = parseFloat(route.fromAmountUSD);
+  const toAmountUSD = parseFloat(route.toAmountUSD);
   return (
     <Box p={3} ref={ref}>
       <CenterContainer>
@@ -62,11 +68,23 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
         </Typography>
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.gasCost')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.currency', { value: route.gasCostUSD })}
-        </Typography>
+        <Typography>{t('main.fees.network')}</Typography>
+        <FeeBreakdownTooltip gasCosts={gasCosts}>
+          <Typography fontWeight={600}>
+            {t('format.currency', { value: gasCostUSD })}
+          </Typography>
+        </FeeBreakdownTooltip>
       </Box>
+      {feeCostUSD ? (
+        <Box display="flex" justifyContent="space-between" mt={0.25}>
+          <Typography>{t('main.fees.provider')}</Typography>
+          <FeeBreakdownTooltip feeCosts={feeCosts}>
+            <Typography fontWeight={600}>
+              {t('format.currency', { value: feeCostUSD })}
+            </Typography>
+          </FeeBreakdownTooltip>
+        </Box>
+      ) : null}
       <Box display="flex" justifyContent="space-between" mt={0.25}>
         <Typography>{t('main.receiving')}</Typography>
         <Typography fontWeight={600}>
@@ -75,7 +93,15 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>
         <Typography>{t('main.valueLoss')}</Typography>
-        <Typography fontWeight={600}>{calcValueLoss(route)}</Typography>
+        <Typography fontWeight={600}>
+          {calculateValueLossPercentage(
+            fromAmountUSD,
+            toAmountUSD,
+            gasCostUSD,
+            feeCostUSD,
+          )}
+          %
+        </Typography>
       </Box>
       <Box display="flex" mt={3}>
         <Button variant="text" onClick={onCancel} fullWidth>
@@ -89,16 +115,3 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     </Box>
   );
 };
-
-export const getTokenValueLossThreshold = (route?: Route) => {
-  if (!route) {
-    return false;
-  }
-  const fromAmountUSD = Number(route.fromAmountUSD || 0);
-  const toAmountUSD = Number(route.toAmountUSD || 0);
-  const gasCostUSD = Number(route.gasCostUSD || 0);
-  if (!fromAmountUSD && !toAmountUSD) {
-    return false;
-  }
-  return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
-};

package/pages/TransactionPage/TransactionPage.tsx

@@ -18,16 +18,17 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 import { WidgetEvent } from '../../types/events.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
 import { RouteTracker } from './RouteTracker.js';
 import { StartTransactionButton } from './StartTransactionButton.js';
 import { StatusBottomSheet } from './StatusBottomSheet.js';
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js';
 import {
-  TokenValueBottomSheet,
+  calculateValueLossPercentage,
   getTokenValueLossThreshold,
-} from './TokenValueBottomSheet.js';
-import { calcValueLoss } from './utils.js';
+} from './utils.js';
 
 export const TransactionPage: React.FC = () => {
   const { t } = useTranslation();
@@ -99,15 +100,22 @@ export const TransactionPage: React.FC = () => {
     return null;
   }
 
-  const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(route);
-
   const handleExecuteRoute = () => {
     if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+      const fromAmountUSD = parseFloat(route.fromAmountUSD);
+      const toAmountUSD = parseFloat(route.toAmountUSD);
       emitter.emit(WidgetEvent.RouteHighValueLoss, {
-        fromAmountUsd: route.fromAmountUSD,
-        gasCostUSD: route.gasCostUSD,
-        toAmountUSD: route.toAmountUSD,
-        valueLoss: calcValueLoss(route),
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD,
+        ),
       });
     }
     tokenValueBottomSheetRef.current?.close();
@@ -121,6 +129,15 @@ export const TransactionPage: React.FC = () => {
 
   const handleStartClick = async () => {
     if (status === RouteExecutionStatus.Idle) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+      const fromAmountUSD = parseFloat(route.fromAmountUSD);
+      const toAmountUSD = parseFloat(route.toAmountUSD);
+      const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+      );
       if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
         tokenValueBottomSheetRef.current?.open();
       } else {
@@ -197,7 +214,7 @@ export const TransactionPage: React.FC = () => {
         </>
       ) : null}
       {status ? <StatusBottomSheet status={status} route={route} /> : null}
-      {tokenValueLossThresholdExceeded && subvariant !== 'custom' ? (
+      {subvariant !== 'custom' ? (
         <TokenValueBottomSheet
           route={route}
           ref={tokenValueBottomSheetRef}

package/pages/TransactionPage/utils.ts

@@ -1,10 +1,25 @@
-import type { Route } from '@lifi/sdk';
+export const calculateValueLossPercentage = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number,
+) => {
+  return parseFloat(
+    (
+      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
+      100
+    ).toFixed(2),
+  );
+};
 
-export const calcValueLoss = (route: Route) => {
-  return `${(
-    (Number(route.toAmountUSD || 0) /
-      (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
-      1) *
-    100
-  ).toFixed(2)}%`;
+export const getTokenValueLossThreshold = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number,
+) => {
+  if (!fromAmountUSD || !toAmountUSD) {
+    return false;
+  }
+  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9;
 };

package/stores/routes/types.ts

@@ -15,10 +15,10 @@ export interface RouteExecutionState {
 }
 
 export enum RouteExecutionStatus {
-  Idle = 0,
-  Pending = 1 << 0,
-  Done = 1 << 1,
-  Failed = 1 << 2,
-  Partial = 1 << 3,
-  Refunded = 1 << 4,
+  Idle = 1 << 0,
+  Pending = 1 << 1,
+  Done = 1 << 2,
+  Failed = 1 << 3,
+  Partial = 1 << 4,
+  Refunded = 1 << 5,
 }

package/types/events.ts

@@ -37,10 +37,11 @@ export interface ContactSupport {
 }
 
 export interface RouteHighValueLossUpdate {
-  fromAmountUsd: string;
-  gasCostUSD?: string;
-  toAmountUSD: string;
-  valueLoss: string;
+  fromAmountUSD: number;
+  toAmountUSD: number;
+  gasCostUSD?: number;
+  feeCostUSD?: number;
+  valueLoss: number;
 }
 
 export interface RouteExecutionUpdate {

package/utils/converters.ts

@@ -167,7 +167,7 @@ export const buildRouteFromTxHistory = (
             toAmountMin: receiving.amount ?? '',
             toAmount: receiving.amount ?? '',
             toAmountUSD: receiving.amountUSD ?? '',
-            executionDuration: 30,
+            executionDuration: 0,
           },
           includedSteps: [
             {