@lifi/widget 1.18.8 → 1.19.0

package/components/Token/Token.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
@@ -17,7 +17,7 @@ import { formatTokenAmount } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
-import { TextSecondary } from './Token.style';
+import { TextSecondary, TextSecondaryContainer } from './Token.style';
 export const Token = (_a) => {
     var _b;
     var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
@@ -25,11 +25,11 @@ export const Token = (_a) => {
     const { getChainById } = useChains();
     return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
                             tokenSymbol: token.symbol,
                             chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
-                        }) })), step ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1 }, { children: "\u2022" })), _jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
-                                        border: 0,
-                                        marginBottom: -0.25,
-                                    } }, { children: step.toolDetails.name[0] })) })), _jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))) : null] }))] })));
+                        }) })), step ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1, mt: 0.5 }, { children: "\u2022" })), _jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                                                border: 0,
+                                                marginBottom: -0.25,
+                                            } }, { children: step.toolDetails.name[0] })) })), _jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))] })) : null] }))] })));
 };

package/components/Token/Token.style.d.ts

@@ -1,4 +1,14 @@
 /// <reference types="react" />
+export declare const TextSecondaryContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    connected?: boolean | undefined;
+}, {}, {}>;
 export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;

package/components/Token/Token.style.js

@@ -1,12 +1,8 @@
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export const TextSecondary = styled(Typography, {
+export const TextSecondaryContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'connected',
 })(({ theme, connected }) => ({
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: 500,
-    color: theme.palette.text.secondary,
     borderLeftWidth: connected ? 2 : 0,
     borderLeftStyle: 'solid',
     borderColor: theme.palette.mode === 'light'
@@ -14,12 +10,22 @@ export const TextSecondary = styled(Typography, {
         : theme.palette.grey[800],
     margin: connected
         ? theme.spacing(0.5, 0, 0, 1.875)
-        : theme.spacing(0.5, 0, 0, 6),
+        : theme.spacing(0, 0, 0, 6),
     padding: connected
         ? theme.spacing(0, 0, 0, 3.875)
         : theme.spacing(0, 0, 0, 0),
     display: 'flex',
     alignItems: 'flex-start',
+    flexWrap: 'wrap',
+}));
+export const TextSecondary = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'connected',
+})(({ theme, connected }) => ({
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    marginTop: connected ? 0 : theme.spacing(0.5),
 }));
 export const TokenDivider = styled(Box)(({ theme }) => ({
     height: 12,

package/components/TokenList/TokenList.js

@@ -27,7 +27,7 @@ export const TokenList = ({ formType, height, onClick, }) => {
         !filteredTokens.length &&
         !!tokenSearchFilter &&
         !!selectedChainId;
-    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
     const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length
         ? filteredTokens
@@ -36,22 +36,25 @@ export const TokenList = ({ formType, height, onClick, }) => {
             : filteredTokens;
     const handleTokenClick = useCallback((tokenAddress) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldDirty: true,
+            shouldTouch: true,
+        });
+        // Set chain again to trigger URL builder update
+        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldTouch: true,
         });
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
             SwapFormKeyHelper.getTokenKey(oppositeFormType),
             SwapFormKeyHelper.getChainKey(oppositeFormType),
-            SwapFormKeyHelper.getChainKey(formType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChain === selectedChain) {
+            selectedOppositeChainId === selectedChainId) {
             setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
-                shouldDirty: false,
+                shouldTouch: true,
             });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, setValue]);
+    }, [formType, getValues, onClick, selectedChainId, setValue]);
     return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };

package/config/theme.js

@@ -1,3 +1,4 @@
+import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
@@ -45,6 +46,9 @@ export const createTheme = (mode, theme = {}) => {
     const primaryMainColor = (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main;
     const primaryLightColor = lighten((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5);
     const primaryDarkColor = darken((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2);
+    const contrastButtonColor = getContrastRatio(common.white, primaryMainColor) >= 3
+        ? common.white
+        : common.black;
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
@@ -80,13 +84,25 @@ export const createTheme = (mode, theme = {}) => {
                         borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
                         textTransform: 'none',
                         fontSize: '1rem',
-                        '&.Mui-disabled, &.Mui-disabled:hover': {
+                        [`&.Mui-disabled, &.Mui-disabled:hover`]: {
                             color: mode === 'light'
-                                ? 'rgb(0 0 0 / 70%)'
-                                : 'rgb(255 255 255 / 70%)',
+                                ? 'rgb(0 0 0 / 56%)'
+                                : 'rgb(255 255 255 / 56%)',
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
+                        [`&.${loadingButtonClasses.loading}.Mui-disabled`]: {
+                            backgroundColor: primaryMainColor,
+                            color: contrastButtonColor,
+                            cursor: 'auto',
+                            pointerEvents: 'auto',
+                        },
+                        [`.${loadingButtonClasses.loadingIndicator}`]: {
+                            color: contrastButtonColor,
+                        },
+                        [`&.${loadingButtonClasses.root}.${loadingButtonClasses.loading}`]: {
+                            color: 'transparent',
+                        },
                     }, text: {
                         backgroundColor: alpha(primaryMainColor, 0.08),
                         '&:hover': {
@@ -94,9 +110,7 @@ export const createTheme = (mode, theme = {}) => {
                         },
                     }, contained: {
                         '&:hover': {
-                            color: getContrastRatio(common.white, primaryMainColor) >= 3
-                                ? common.white
-                                : common.black,
+                            color: contrastButtonColor,
                         },
                     }, sizeMedium: {
                         padding: '10px 16px',
@@ -114,10 +128,10 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                         text: {
-                            backgroundColor: paletteDark.background.paper,
+                            backgroundColor: lighten(paletteDark.background.paper, 0.08),
                             color: common.white,
                             '&:hover': {
-                                backgroundColor: lighten(paletteDark.background.paper, 0.02),
+                                backgroundColor: lighten(paletteDark.background.paper, 0.12),
                             },
                         },
                     }

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.18.8";
+export declare const version = "1.19.0";

package/config/version.js

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

package/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';

package/hooks/index.js

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';

package/hooks/useExpandableVariant.d.ts

@@ -0,0 +1 @@
+export declare const useExpandableVariant: () => boolean;

package/hooks/useExpandableVariant.js

@@ -0,0 +1,10 @@
+import { useMediaQuery } from '@mui/material';
+import { useWidgetConfig } from '../providers';
+const defaultExpandableWidth = 852;
+export const useExpandableVariant = () => {
+    const { variant } = useWidgetConfig();
+    const expandableAllowed = useMediaQuery((theme) => {
+        return theme.breakpoints.up(defaultExpandableWidth);
+    });
+    return variant === 'expandable' && expandableAllowed;
+};

package/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,8 @@ interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[] | undefined;
-    insufficientFunds: boolean;
+    insufficientGas: GasSufficiency[] | null | undefined;
+    insufficientFunds: boolean | null | undefined;
+    isLoading: boolean;
 };
 export {};

package/hooks/useGasSufficiency.js

@@ -7,23 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useChains } from '.';
 import { useWallet } from '../providers';
+import { isRouteCompleted } from '../stores';
 import { useTokenBalance } from './useTokenBalance';
+const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
     const { account } = useWallet();
     const { getChainById } = useChains();
     const { token: fromToken, getTokenBalancesWithRetry } = useTokenBalance(route === null || route === void 0 ? void 0 : route.fromToken);
-    const [insufficientGas, setInsufficientGas] = useState();
-    const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: insufficientGas, isInitialLoading: insufficientGasLoading } = useQuery(['gas-sufficiency-check', account.address, route === null || route === void 0 ? void 0 : route.id], () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!account.address || !route) {
-            setInsufficientGas(undefined);
-            return;
+            return null;
         }
-        const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
+        const gasCosts = route.steps
+            .filter((step) => !step.execution || step.execution.status !== 'DONE')
+            .reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
                 const gasCostAmount = step.estimate.gasCosts
@@ -37,7 +39,6 @@ export const useGasSufficiency = (route) => {
                     gasAmount,
                     tokenAmount: gasAmount,
                     token,
-                    chain: getChainById(token.chainId),
                 };
                 return groupedGasCosts;
             }
@@ -48,41 +49,64 @@ export const useGasSufficiency = (route) => {
         }
         const tokenBalances = yield getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
-            setInsufficientGas(undefined);
-            return;
+            return null;
         }
         [route.fromChainId, route.toChainId].forEach((chainId) => {
             var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
                 const gasTokenBalance = Big((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
                     t.address === gasCosts[chainId].token.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-                const insufficientFromChainGas = gasTokenBalance.lte(0) ||
+                const insufficient = gasTokenBalance.lte(0) ||
                     gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : Big(0)) ||
                     gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : Big(0));
-                const insufficientFromChainGasAmount = insufficientFromChainGas
+                const insufficientAmount = insufficient
                     ? (_f = (_e = gasCosts[chainId].tokenAmount) === null || _e === void 0 ? void 0 : _e.minus(gasTokenBalance)) !== null && _f !== void 0 ? _f : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
                     : undefined;
-                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount === null || insufficientFromChainGasAmount === void 0 ? void 0 : insufficientFromChainGasAmount.round(5, Big.roundUp) });
+                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient, insufficientAmount: insufficientAmount === null || insufficientAmount === void 0 ? void 0 : insufficientAmount.round(5, Big.roundUp), chain: insufficient ? getChainById(chainId) : undefined });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        setInsufficientGas(gasCostResult);
-    }), [account.address, getChainById, getTokenBalancesWithRetry, route]);
-    const insufficientFunds = useMemo(() => {
-        var _a;
-        if (!account.isActive || !fromToken || !route) {
-            return false;
+        return gasCostResult;
+    }), {
+        enabled: Boolean(account.address && route),
+        refetchIntervalInBackground: true,
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
+    const { data: insufficientFunds, isInitialLoading: insufficientFundsLoading, } = useQuery(['funds-sufficiency-check', account.address, route === null || route === void 0 ? void 0 : route.id], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e, _f;
+        if (!account.address || !fromToken || !route || isRouteCompleted(route)) {
+            return null;
+        }
+        let currentTokenBalance = Big((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _c !== void 0 ? _c : 0);
+        const currentAction = (_d = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]) === null || _d === void 0 ? void 0 : _d.action;
+        if (fromToken.chainId === currentAction.fromToken.chainId &&
+            fromToken.address === currentAction.fromToken.address &&
+            currentTokenBalance.gt(0)) {
+            const insufficientFunds = Big(route.fromAmount)
+                .div(Math.pow(10, route.fromToken.decimals))
+                .gt(currentTokenBalance);
+            return insufficientFunds;
         }
-        const balance = Big((_a = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _a !== void 0 ? _a : 0);
-        return Big(route.fromAmount)
-            .div(Math.pow(10, route.fromToken.decimals))
-            .gt(balance);
-    }, [account.isActive, fromToken, route]);
-    useEffect(() => {
-        checkInsufficientGas();
-    }, [checkInsufficientGas]);
+        const tokenBalances = yield getTokenBalancesWithRetry(account.address, [
+            currentAction.fromToken,
+        ]);
+        currentTokenBalance = Big((_f = (_e = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances[0]) === null || _e === void 0 ? void 0 : _e.amount) !== null && _f !== void 0 ? _f : 0);
+        const insufficientFunds = Big(currentAction.fromAmount)
+            .div(Math.pow(10, currentAction.fromToken.decimals))
+            .gt(currentTokenBalance);
+        return insufficientFunds;
+    }), {
+        enabled: Boolean(account.address && route && fromToken),
+        refetchIntervalInBackground: true,
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
     return {
         insufficientGas,
         insufficientFunds,
+        isLoading: insufficientGasLoading || insufficientFundsLoading,
     };
 };

package/hooks/useSwapRoutes.js

@@ -74,16 +74,18 @@ export const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
+        const fromAmount = Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
+        const formattedSlippage = parseFloat(slippage) / 100;
         return lifi.getRoutes({
             fromChainId,
-            fromAmount: Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
+            fromAmount,
             fromTokenAddress,
             toChainId,
             toTokenAddress,
             fromAddress,
             toAddress: toWalletAddress,
             options: {
-                slippage: slippage / 100,
+                slippage: formattedSlippage,
                 bridges: {
                     allow: enabledBridges,
                 },

package/hooks/useToken.js

@@ -1,13 +1,16 @@
 import { useMemo } from 'react';
 import { useTokens } from './useTokens';
+import { useTokenSearch } from './useTokenSearch';
 export const useToken = (chainId, tokenAddress) => {
     const { tokens, isLoading } = useTokens(chainId);
     const token = useMemo(() => {
         const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
     }, [chainId, tokenAddress, tokens]);
+    const tokenSearchEnabled = !isLoading && !token;
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(chainId, tokenAddress, tokenSearchEnabled);
     return {
-        token,
-        isLoading,
+        token: token !== null && token !== void 0 ? token : searchedToken,
+        isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
     };
 };

package/hooks/useTokenBalance.js

@@ -18,18 +18,23 @@ export const useTokenBalance = (token, accountAddress) => {
     const queryClient = useQueryClient();
     const walletAddress = accountAddress !== null && accountAddress !== void 0 ? accountAddress : account.address;
     const getTokenBalancesWithRetry = useCallback((accountAddress, tokens, depth = 0) => __awaiter(void 0, void 0, void 0, function* () {
-        const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
-        if (!tokenBalances.every((token) => token.blockNumber)) {
-            if (depth > 5) {
-                console.warn('Token balance backoff depth exceeded.');
-                return undefined;
+        try {
+            const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
+            if (!tokenBalances.every((token) => token.blockNumber)) {
+                if (depth > 10) {
+                    console.warn('Token balance backoff depth exceeded.');
+                    return undefined;
+                }
+                yield new Promise((resolve) => {
+                    setTimeout(resolve, Math.pow(1.5, depth) * 100);
+                });
+                return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
             }
-            yield new Promise((resolve) => {
-                setTimeout(resolve, depth * 100);
-            });
-            return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+            return tokenBalances;
+        }
+        catch (error) {
+            //
         }
-        return tokenBalances;
     }), [lifi]);
     const tokenBalanceQueryKey = useMemo(() => ['token-balance', walletAddress, token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address], [token === null || token === void 0 ? void 0 : token.address, token === null || token === void 0 ? void 0 : token.chainId, walletAddress]);
     const { data, isLoading, refetch } = useQuery(tokenBalanceQueryKey, ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {

package/hooks/useTokenSearch.d.ts

@@ -1,7 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenSearch: (token: string, chainId: number, enabled?: boolean) => {
+export declare const useTokenSearch: (chainId: number, token: string, enabled?: boolean) => {
     token: Token | undefined;
     isLoading: boolean;
-    isFetching: boolean;
-    isFetched: boolean;
 };

package/hooks/useTokenSearch.js

@@ -9,10 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useLiFi } from '../providers';
-export const useTokenSearch = (token, chainId, enabled) => {
+export const useTokenSearch = (chainId, token, enabled) => {
     const lifi = useLiFi();
     const queryClient = useQueryClient();
-    const { data, isLoading, isFetching, isFetched } = useQuery(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data, isLoading } = useQuery(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
         const data = yield lifi.getToken(chainId, token, {
             signal,
         });
@@ -26,13 +26,11 @@ export const useTokenSearch = (token, chainId, enabled) => {
         }
         return data;
     }), {
-        enabled,
+        enabled: Boolean(chainId && token && enabled),
         retry: false,
     });
     return {
         token: data,
         isLoading,
-        isFetching,
-        isFetched,
     };
 };

package/i18n/en/translation.json

@@ -44,10 +44,6 @@
     "routes": "You get",
     "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
     "currency": "{{value, currency(currency: USD)}}",
-    "sendToRecipient": "Send to recipient",
-    "addressConfirmation": "I confirm that the address above is correct",
-    "gas": "gas fee",
-    "minutes": "minutes",
     "tokenSearch": "Search your token",
     "selectChain": "Chain",
     "selectToken": "Token",
@@ -58,7 +54,7 @@
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
-    "estimatedTime": "~{{value}} min.",
+    "estimatedTime": "{{value}}m",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
@@ -98,12 +94,14 @@
       "title": {
         "insufficientGas": "Insufficient gas",
         "deleteSwap": "Delete this swap?",
-        "deleteSwapHistory": "Delete swap history?"
+        "deleteSwapHistory": "Delete swap history?",
+        "deleteActiveSwaps": "Delete all active swaps?"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
         "insufficientGas": "You need to add at least:",
-        "deleteSwap": "Swap history is only stored locally and can't be recovered if you delete it."
+        "deleteSwapHistory": "Swap history is only stored locally and can't be recovered if you delete it.",
+        "deleteActiveSwaps": "Active swaps are only stored locally and can't be recovered if you delete them."
       }
     },
     "error": {
@@ -179,6 +177,9 @@
       "title": "404",
       "text": "We couldn't find this page."
     },
-    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
+    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
+    "numberOfSteps": "A number of swap steps. Each step can contain 1-3 transactions that require a signature.",
+    "estimatedTime": "Estimated time in minutes.",
+    "estimatedNetworkFee": "Estimated network fee."
   }
 }

package/i18n/index.d.ts

@@ -47,10 +47,6 @@ export declare const resources: {
                 routes: string;
                 approximateCurrency: string;
                 currency: string;
-                sendToRecipient: string;
-                addressConfirmation: string;
-                gas: string;
-                minutes: string;
                 tokenSearch: string;
                 selectChain: string;
                 selectToken: string;
@@ -102,11 +98,13 @@ export declare const resources: {
                         insufficientGas: string;
                         deleteSwap: string;
                         deleteSwapHistory: string;
+                        deleteActiveSwaps: string;
                     };
                     message: {
                         insufficientFunds: string;
                         insufficientGas: string;
-                        deleteSwap: string;
+                        deleteSwapHistory: string;
+                        deleteActiveSwaps: string;
                     };
                 };
                 error: {
@@ -183,6 +181,9 @@ export declare const resources: {
                     text: string;
                 };
                 progressToNextUpdate: string;
+                numberOfSteps: string;
+                estimatedTime: string;
+                estimatedNetworkFee: string;
             };
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.8",
+  "version": "1.19.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -45,25 +45,25 @@
     "@lifi/sdk": "^1.6.0",
     "@lifi/wallet-management": "^1.1.10",
     "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.101",
-    "@mui/material": "^5.10.7",
-    "@sentry/integrations": "^7.13.0",
-    "@sentry/react": "^7.13.0",
-    "@sentry/tracing": "^7.13.0",
-    "@tanstack/react-query": "^4.7.1",
+    "@mui/lab": "^5.0.0-alpha.102",
+    "@mui/material": "^5.10.8",
+    "@sentry/integrations": "^7.14.2",
+    "@sentry/react": "^7.14.2",
+    "@sentry/tracing": "^7.14.2",
+    "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
-    "i18next": "^21.9.2",
+    "i18next": "^21.10.0",
     "immer": "^9.0.15",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.36.1",
+    "react-hook-form": "^7.37.0",
     "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.4.1",
+    "react-router-dom": "^6.4.2",
     "react-timer-hook": "^3.0.5",
-    "zustand": "^4.1.1"
+    "zustand": "^4.1.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",