@lifi/widget 3.0.2 → 3.1.1

package/components/TransactionDetails.tsx

@@ -0,0 +1,182 @@
+import type { RouteExtended } from '@lifi/sdk';
+import {
+  ExpandLess,
+  ExpandMore,
+  LocalGasStationRounded,
+} from '@mui/icons-material';
+import type { CardProps } from '@mui/material';
+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 {
+  convertToSubscriptFormat,
+  formatTokenAmount,
+  formatTokenPrice,
+} from '../utils/format.js';
+import { Card } from './Card/Card.js';
+import { CardIconButton } from './Card/CardIconButton.js';
+import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js';
+import { IconTypography } from './IconTypography.js';
+import { TokenRate } from './TokenRate.js';
+
+interface TransactionDetailsProps extends CardProps {
+  route: RouteExtended;
+}
+
+export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
+  route,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [cardExpanded, setCardExpanded] = useState(false);
+
+  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 fromTokenAmount = formatTokenAmount(
+    BigInt(route.fromAmount),
+    route.fromToken.decimals,
+  );
+  const fromTokenPrice = formatTokenPrice(
+    fromTokenAmount,
+    route.fromToken.priceUSD,
+  );
+  const toTokenAmount = formatTokenAmount(
+    BigInt(route.toAmount),
+    route.toToken.decimals,
+  );
+  const toTokenPrice =
+    formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01;
+
+  const impact = (toTokenPrice / fromTokenPrice - 1) * 100;
+
+  const priceImpact = convertToSubscriptFormat(impact, {
+    notation: 'standard',
+    roundingPriority: 'morePrecision',
+    maximumSignificantDigits: 2,
+    maximumFractionDigits: 2,
+    useGrouping: false,
+    roundingMode: 'trunc',
+  });
+
+  return (
+    <Card selectionColor="secondary" {...props}>
+      <Box display="flex" alignItems="center" px={2} py={1.75}>
+        <Box display="flex" flex={1} alignItems="center" justifyContent="left">
+          <TokenRate route={route} />
+        </Box>
+        <FeeBreakdownTooltip
+          route={route}
+          gasCosts={gasCosts}
+          feeCosts={feeCosts}
+        >
+          <Box
+            display="flex"
+            alignItems="center"
+            onClick={toggleCard}
+            role="button"
+            sx={{ cursor: 'pointer' }}
+            px={1}
+          >
+            <IconTypography mr={0.5} fontSize={16}>
+              <LocalGasStationRounded fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              fontSize={14}
+              color="text.primary"
+              fontWeight="600"
+              lineHeight={1.429}
+            >
+              {t(`format.currency`, { value: fees })}
+            </Typography>
+          </Box>
+        </FeeBreakdownTooltip>
+        <CardIconButton onClick={toggleCard} size="small">
+          {cardExpanded ? (
+            <ExpandLess fontSize="inherit" />
+          ) : (
+            <ExpandMore fontSize="inherit" />
+          )}
+        </CardIconButton>
+      </Box>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter>
+        <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={[]}>
+              <Typography variant="body2">
+                {t(`format.currency`, {
+                  value: gasCostUSD,
+                })}
+              </Typography>
+            </FeeBreakdownTooltip>
+          </Box>
+          {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}
+              >
+                <Typography variant="body2">
+                  {t(`format.currency`, {
+                    value: feeCostUSD,
+                  })}
+                </Typography>
+              </FeeBreakdownTooltip>
+            </Box>
+          ) : null}
+          <Box display="flex" justifyContent="space-between" mb={0.5}>
+            <Typography variant="body2">{t('main.priceImpact')}</Typography>
+            <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
+              <Typography variant="body2">{priceImpact}%</Typography>
+            </Tooltip>
+          </Box>
+          {!isRouteDone(route) ? (
+            <>
+              <Box display="flex" justifyContent="space-between" mb={0.5}>
+                <Typography variant="body2">{t('main.maxSlippage')}</Typography>
+                <Typography variant="body2">
+                  {route.steps[0].action.slippage * 100}%
+                </Typography>
+              </Box>
+              <Box display="flex" justifyContent="space-between">
+                <Typography variant="body2">{t('main.minReceived')}</Typography>
+                <Tooltip
+                  title={t('tooltip.minReceived')}
+                  sx={{ cursor: 'help' }}
+                >
+                  <Typography variant="body2">
+                    {t('format.number', {
+                      value: formatTokenAmount(
+                        BigInt(route.toAmountMin),
+                        route.toToken.decimals,
+                      ),
+                    })}{' '}
+                    {route.toToken.symbol}
+                  </Typography>
+                </Tooltip>
+              </Box>
+            </>
+          ) : null}
+        </Box>
+      </Collapse>
+    </Card>
+  );
+};

package/config/version.ts

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

package/hooks/timer/useInterval.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+export function useInterval(callback: Function, delay: number) {
+  const callbacRef = useRef<Function>();
+
+  // update callback function with current render callback that has access to latest props and state
+  useEffect(() => {
+    callbacRef.current = callback;
+  });
+
+  useEffect(() => {
+    if (!delay) {
+      return () => {};
+    }
+
+    const interval = setInterval(() => {
+      callbacRef.current && callbacRef.current();
+    }, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}

package/hooks/timer/useTimer.ts

@@ -0,0 +1,91 @@
+import { useCallback, useState } from 'react';
+import { useInterval } from './useInterval.js';
+import {
+  getDelayFromExpiryTimestamp,
+  getSecondsFromExpiry,
+  getTimeFromSeconds,
+  validateOnExpire,
+} from './utils.js';
+
+const DEFAULT_DELAY = 1000;
+
+interface UseTimerProps {
+  expiryTimestamp: Date;
+  onExpire: Function;
+  autoStart?: boolean;
+}
+
+// This implementation was taken from the common js project - https://www.npmjs.com/package/react-timer-hook
+// modified to work in the Widget codebase with Typescript
+export function useTimer({
+  expiryTimestamp: expiry,
+  onExpire,
+  autoStart = true,
+}: UseTimerProps) {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
+  const [seconds, setSeconds] = useState(getSecondsFromExpiry(expiryTimestamp));
+  const [isRunning, setIsRunning] = useState(autoStart);
+  const [didStart, setDidStart] = useState(autoStart);
+  const [delay, setDelay] = useState(
+    getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY),
+  );
+
+  const handleExpire = useCallback(() => {
+    validateOnExpire(onExpire) && onExpire();
+    setIsRunning(false);
+    setDelay(0);
+  }, [onExpire]);
+
+  const pause = useCallback(() => {
+    setIsRunning(false);
+  }, []);
+
+  const restart = useCallback(
+    (newExpiryTimestamp: Date, newAutoStart = true) => {
+      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp, DEFAULT_DELAY));
+      setDidStart(newAutoStart);
+      setIsRunning(newAutoStart);
+      setExpiryTimestamp(newExpiryTimestamp);
+      setSeconds(getSecondsFromExpiry(newExpiryTimestamp));
+    },
+    [],
+  );
+
+  const resume = useCallback(() => {
+    const time = new Date();
+    time.setMilliseconds(time.getMilliseconds() + seconds * 1000);
+    restart(time);
+  }, [seconds, restart]);
+
+  const start = useCallback(() => {
+    if (didStart) {
+      setSeconds(getSecondsFromExpiry(expiryTimestamp));
+      setIsRunning(true);
+    } else {
+      resume();
+    }
+  }, [expiryTimestamp, didStart, resume]);
+
+  useInterval(
+    () => {
+      if (delay !== DEFAULT_DELAY) {
+        setDelay(DEFAULT_DELAY);
+      }
+      const secondsValue = getSecondsFromExpiry(expiryTimestamp);
+      setSeconds(secondsValue);
+      if (secondsValue <= 0) {
+        handleExpire();
+      }
+    },
+    isRunning ? delay : 0,
+  );
+
+  return {
+    ...getTimeFromSeconds(seconds),
+    start,
+    pause,
+    resume,
+    restart,
+    isRunning,
+  };
+}

package/hooks/timer/utils.ts

@@ -0,0 +1,54 @@
+export function getTimeFromSeconds(secs: number) {
+  const totalSeconds = Math.ceil(secs);
+  const days = Math.floor(totalSeconds / (60 * 60 * 24));
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+  const seconds = Math.floor(totalSeconds % 60);
+
+  return {
+    totalSeconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+  };
+}
+
+export function getSecondsFromExpiry(expiry: Date, shouldRound?: boolean) {
+  const now = new Date().getTime();
+  const milliSecondsDistance = expiry.getTime() - now;
+  if (milliSecondsDistance > 0) {
+    const val = milliSecondsDistance / 1000;
+    return shouldRound ? Math.round(val) : val;
+  }
+  return 0;
+}
+
+export function validateExpiryTimestamp(expiryTimestamp: Date) {
+  const isValid = new Date(expiryTimestamp).getTime() > 0;
+  if (!isValid) {
+    console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp); // eslint-disable-line
+  }
+  return isValid;
+}
+
+export function validateOnExpire(onExpire: Function) {
+  const isValid = onExpire && typeof onExpire === 'function';
+  if (onExpire && !isValid) {
+    console.warn('useTimer Invalid onExpire settings function', onExpire);
+  }
+  return isValid;
+}
+
+export function getDelayFromExpiryTimestamp(
+  expiryTimestamp: Date,
+  defaultDelay: number,
+) {
+  if (!validateExpiryTimestamp(expiryTimestamp)) {
+    return 0;
+  }
+
+  const seconds = getSecondsFromExpiry(expiryTimestamp);
+  const extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1000);
+  return extraMilliSeconds > 0 ? extraMilliSeconds : defaultDelay;
+}

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/useProcessMessage.ts

@@ -173,6 +173,14 @@ export function getProcessMessage(
         title = t(`error.title.transactionFailed`);
         message = t(`error.message.transactionFailed`);
         break;
+      case LiFiErrorCode.TransactionExpired:
+        title = t(`error.title.transactionExpired`);
+        message = t(`error.message.transactionExpired`);
+        break;
+      case LiFiErrorCode.TransactionSimulationFailed:
+        title = t(`error.title.transactionSimulationFailed`);
+        message = t(`error.message.transactionSimulationFailed`);
+        break;
       case LiFiErrorCode.WalletChangedDuringExecution:
         title = t(`error.title.walletMismatch`);
         message = t(`error.message.walletChangedDuringExecution`);

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) => {