@lifi/widget 1.18.2 → 1.18.3

package/AppRoutes.js

@@ -56,10 +56,14 @@ export const AppRoutes = () => {
             path: navigationRoutes.swapHistory,
             element: _jsx(SwapHistoryPage, {}),
         },
-        {
-            path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+        ...[
+            `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+            `${navigationRoutes.swapExecution}/${navigationRoutes.swapDetails}`,
+            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.swapDetails}`,
+        ].map((path) => ({
+            path,
             element: _jsx(SwapDetailsPage, {}),
-        },
+        })),
         ...[
             navigationRoutes.selectWallet,
             `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,

package/cjs/AppRoutes.js

@@ -59,10 +59,14 @@ const AppRoutes = () => {
             path: utils_1.navigationRoutes.swapHistory,
             element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
         },
-        {
-            path: `${utils_1.navigationRoutes.swapHistory}/${utils_1.navigationRoutes.swapDetails}`,
+        ...[
+            `${utils_1.navigationRoutes.swapHistory}/${utils_1.navigationRoutes.swapDetails}`,
+            `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.swapDetails}`,
+            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.swapDetails}`,
+        ].map((path) => ({
+            path,
             element: (0, jsx_runtime_1.jsx)(SwapDetailsPage_1.SwapDetailsPage, {}),
-        },
+        })),
         ...[
             utils_1.navigationRoutes.selectWallet,
             `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,

package/cjs/components/BottomSheet/BottomSheet.js

@@ -11,9 +11,11 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open }, r
     const containerElement = (0, hooks_1.useScrollableContainer)();
     const openDrawer = (0, react_1.useCallback)(() => {
         setDrawerOpen(true);
+        openRef.current = true;
     }, []);
     const closeDrawer = (0, react_1.useCallback)(() => {
         setDrawerOpen(false);
+        openRef.current = false;
     }, []);
     (0, react_1.useImperativeHandle)(ref, () => ({
         isOpen: () => openRef.current,

package/cjs/components/ChainSelect/ChainSelect.js

@@ -25,7 +25,7 @@ const ChainSelect = ({ formType }) => {
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
                 ? Array.from({ length: stores_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',

package/cjs/components/Header/WalletHeader.js

@@ -21,9 +21,7 @@ const Header_style_1 = require("./Header.style");
 const WalletHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account, disconnect } = (0, providers_1.useWallet)();
-    const walletAddress = account.address
-        ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
-        : null;
+    const walletAddress = (0, utils_1.shortenWalletAddress)(account.address);
     return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: walletAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                         display: 'flex',
                         flex: 1,

package/cjs/components/SendToWallet/SendToWallet.js

@@ -45,5 +45,5 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
         }),
         onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: showSendToWallet }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, unmountOnExit: true, mountOnEnter: true, in: showSendToWallet }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), autoFocus: true }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
 });

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -4,6 +4,7 @@ exports.SendToWalletButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
@@ -11,12 +12,19 @@ const store_1 = require("./store");
 const SendToWalletButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     const { showSendToWallet, toggleSendToWallet } = (0, store_1.useSendToWalletStore)();
     if (!showDestinationWallet || !account.isActive) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: toggleSendToWallet, sx: {
+    const handleClick = () => {
+        if (showSendToWallet) {
+            setValue(providers_1.SwapFormKey.ToAddress, '');
+        }
+        toggleSendToWallet();
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })) })));

package/cjs/components/SwapInput/FormPriceHelperText.js

@@ -17,7 +17,7 @@ const FormPriceHelperText = ({ formType, selected }) => {
             providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
-    const { token, isLoading } = (0, hooks_1.useTokenBalance)(chainId, tokenAddress);
+    const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const fromAmountTokenPrice = (0, utils_1.formatTokenPrice)(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
     return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: selected ? 8 : 2, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',

package/cjs/components/SwapInput/SwapInputAdornment.js

@@ -17,7 +17,7 @@ const SwapInputAdornment = ({ formType }) => {
             providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
-    const { token, isLoading } = (0, hooks_1.useTokenBalance)(chainId, tokenAddress);
+    const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const handleMax = () => {
         var _a;
         setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.18.2';
+exports.version = '1.18.3';

package/cjs/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export * from './useChain';
 export * from './useChains';
-export * from './useContentHeight';
 export * from './useDebouncedWatch';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
@@ -12,6 +11,7 @@ export * from './useScrollableContainer';
 export * from './useSwapRoutes';
 export * from './useTelemetry';
 export * from './useToken';
+export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';

package/cjs/hooks/index.js

@@ -16,7 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useChain"), exports);
 __exportStar(require("./useChains"), exports);
-__exportStar(require("./useContentHeight"), exports);
 __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
@@ -28,6 +27,7 @@ __exportStar(require("./useScrollableContainer"), exports);
 __exportStar(require("./useSwapRoutes"), exports);
 __exportStar(require("./useTelemetry"), exports);
 __exportStar(require("./useToken"), exports);
+__exportStar(require("./useTokenAddressBalance"), exports);
 __exportStar(require("./useTokenBalance"), exports);
 __exportStar(require("./useTokenBalances"), exports);
 __exportStar(require("./useTokens"), exports);

package/cjs/hooks/useGasSufficiency.js

@@ -14,16 +14,15 @@ const big_js_1 = require("big.js");
 const react_1 = require("react");
 const _1 = require(".");
 const providers_1 = require("../providers");
-const useTokenBalances_1 = require("./useTokenBalances");
+const useTokenBalance_1 = require("./useTokenBalance");
 const useGasSufficiency = (route) => {
-    const lifi = (0, providers_1.useLiFi)();
     const { account } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
-    const { tokensWithBalance: fromChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(route === null || route === void 0 ? void 0 : route.fromChainId);
+    const { token: fromToken, getTokenBalancesWithRetry } = (0, useTokenBalance_1.useTokenBalance)(route === null || route === void 0 ? void 0 : route.fromToken);
     const [insufficientGas, setInsufficientGas] = (0, react_1.useState)();
     const checkInsufficientGas = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
-        if (!account.isActive || !route) {
+        if (!account.address || !route) {
             setInsufficientGas(undefined);
             return;
         }
@@ -50,7 +49,7 @@ const useGasSufficiency = (route) => {
         if (route.fromToken.address === ((_a = gasCosts[route.fromChainId]) === null || _a === void 0 ? void 0 : _a.token.address)) {
             gasCosts[route.fromChainId].tokenAmount = (_b = gasCosts[route.fromChainId]) === null || _b === void 0 ? void 0 : _b.gasAmount.plus((0, big_js_1.default)(route.fromAmount).div(Math.pow(10, route.fromToken.decimals)));
         }
-        const tokenBalances = yield lifi.getTokenBalances(account.address, Object.values(gasCosts).map((item) => item.token));
+        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;
@@ -66,22 +65,22 @@ const useGasSufficiency = (route) => {
                 const insufficientFromChainGasAmount = insufficientFromChainGas
                     ? (_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 });
+                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount === null || insufficientFromChainGasAmount === void 0 ? void 0 : insufficientFromChainGasAmount.round(5, big_js_1.default.roundUp) });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
         setInsufficientGas(gasCostResult);
-    }), [account.address, account.isActive, getChainById, lifi, route]);
+    }), [account.address, getChainById, getTokenBalancesWithRetry, route]);
     const insufficientFunds = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        if (!account.isActive || !fromChainTokenBalances || !route) {
+        var _a;
+        if (!account.isActive || !fromToken || !route) {
             return false;
         }
-        const balance = (0, big_js_1.default)((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === (route === null || route === void 0 ? void 0 : route.fromToken.address))) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
+        const balance = (0, big_js_1.default)((_a = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _a !== void 0 ? _a : 0);
         return (0, big_js_1.default)(route.fromAmount)
             .div(Math.pow(10, route.fromToken.decimals))
             .gt(balance);
-    }, [account.isActive, fromChainTokenBalances, route]);
+    }, [account.isActive, fromToken, route]);
     (0, react_1.useEffect)(() => {
         checkInsufficientGas();
     }, [checkInsufficientGas]);

package/cjs/hooks/useScrollableContainer.d.ts

@@ -1,2 +1 @@
 export declare const useScrollableContainer: () => HTMLElement | null;
-export declare const useScrollableOverflowHidden: () => void;

package/cjs/hooks/useScrollableContainer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollableOverflowHidden = exports.useScrollableContainer = void 0;
+exports.useScrollableContainer = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
 const useScrollableContainer = () => {
@@ -13,17 +13,3 @@ const useScrollableContainer = () => {
     return containerElement;
 };
 exports.useScrollableContainer = useScrollableContainer;
-const useScrollableOverflowHidden = () => {
-    (0, react_1.useLayoutEffect)(() => {
-        const element = document.getElementById(utils_1.ElementId.ScrollableContainer);
-        if (element) {
-            element.style.overflowY = 'hidden';
-        }
-        return () => {
-            if (element) {
-                element.style.overflowY = 'auto';
-            }
-        };
-    }, []);
-};
-exports.useScrollableOverflowHidden = useScrollableOverflowHidden;

package/cjs/hooks/useTokenAddressBalance.d.ts

@@ -0,0 +1,5 @@
+export declare const useTokenAddressBalance: (chainId?: number, tokenAddress?: string) => {
+    token: import("..").Token | undefined;
+    isLoading: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("..").Token[], unknown>>;
+};

package/cjs/hooks/useTokenAddressBalance.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenAddressBalance = void 0;
+const react_1 = require("react");
+const useTokenBalances_1 = require("./useTokenBalances");
+const useTokenAddressBalance = (chainId, tokenAddress) => {
+    const { tokens, tokensWithBalance, isBalanceLoading, refetch } = (0, useTokenBalances_1.useTokenBalances)(chainId);
+    const token = (0, react_1.useMemo)(() => {
+        var _a;
+        const token = (_a = (tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens)) === null || _a === void 0 ? void 0 : _a.find((token) => token.address === tokenAddress && token.chainId === chainId);
+        return token;
+    }, [chainId, tokenAddress, tokens, tokensWithBalance]);
+    return {
+        token,
+        isLoading: isBalanceLoading,
+        refetch,
+    };
+};
+exports.useTokenAddressBalance = useTokenAddressBalance;

package/cjs/hooks/useTokenBalance.d.ts

@@ -1,5 +1,9 @@
-export declare const useTokenBalance: (chainId: number, tokenAddress: string) => {
-    token: import("..").Token | undefined;
+import type { Token, TokenAmount } from '@lifi/sdk';
+export declare const useTokenBalance: (token?: Token, accountAddress?: string) => {
+    token: TokenAmount | undefined;
     isLoading: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("..").Token[] | undefined, unknown>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount, unknown>>;
+    refetchNewBalance: () => void;
+    refetchAllBalances: () => void;
+    getTokenBalancesWithRetry: (accountAddress: string, tokens: Token[], depth?: number) => Promise<TokenAmount[] | undefined>;
 };

package/cjs/hooks/useTokenBalance.js

@@ -1,19 +1,97 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokenBalance = void 0;
+const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const useTokenBalances_1 = require("./useTokenBalances");
-const useTokenBalance = (chainId, tokenAddress) => {
-    const { tokens, tokensWithBalance, isBalanceLoading, refetch } = (0, useTokenBalances_1.useTokenBalances)(chainId);
-    const token = (0, react_1.useMemo)(() => {
+const providers_1 = require("../providers");
+const utils_1 = require("../utils");
+const defaultRefetchInterval = 60000;
+const useTokenBalance = (token, accountAddress) => {
+    const lifi = (0, providers_1.useLiFi)();
+    const { account } = (0, providers_1.useWallet)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const walletAddress = accountAddress !== null && accountAddress !== void 0 ? accountAddress : account.address;
+    const getTokenBalancesWithRetry = (0, react_1.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;
+            }
+            yield new Promise((resolve) => {
+                setTimeout(resolve, depth * 100);
+            });
+            return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+        }
+        return tokenBalances;
+    }), [lifi]);
+    const tokenBalanceQueryKey = (0, react_1.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 } = (0, react_query_1.useQuery)(tokenBalanceQueryKey, ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        const token = (_a = (tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens)) === null || _a === void 0 ? void 0 : _a.find((token) => token.address === tokenAddress && token.chainId === chainId);
-        return token;
-    }, [chainId, tokenAddress, tokens, tokensWithBalance]);
+        const cachedToken = (_a = queryClient
+            .getQueryData([
+            'token-balances',
+            accountAddress,
+            token.chainId,
+        ])) === null || _a === void 0 ? void 0 : _a.find((t) => t.address === token.address);
+        if (cachedToken) {
+            return cachedToken;
+        }
+        const tokenBalances = yield getTokenBalancesWithRetry(accountAddress, [token]);
+        if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
+            throw Error('Could not get tokens balance.');
+        }
+        const cachedTokenAmount = queryClient.getQueryData(tokenBalanceQueryKey);
+        const formattedAmount = (0, utils_1.formatTokenAmount)(tokenBalances[0].amount);
+        if ((cachedTokenAmount === null || cachedTokenAmount === void 0 ? void 0 : cachedTokenAmount.amount) !== formattedAmount) {
+            queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+                refetchInterval: defaultRefetchInterval,
+                staleTime: defaultRefetchInterval,
+            });
+        }
+        queryClient.setQueryData(['token-balances', accountAddress, token.chainId], (data) => {
+            if (data) {
+                const index = data.findIndex((dataToken) => dataToken.address === token.address);
+                data[index] = Object.assign(Object.assign({}, data[index]), { amount: formattedAmount });
+            }
+            return data;
+        });
+        return Object.assign(Object.assign({}, tokenBalances[0]), { amount: formattedAmount });
+    }), {
+        enabled: Boolean(walletAddress && token),
+        refetchIntervalInBackground: true,
+        refetchInterval: defaultRefetchInterval,
+        staleTime: defaultRefetchInterval,
+    });
+    const refetchAllBalances = () => {
+        queryClient.refetchQueries([
+            'token-balances',
+            token === null || token === void 0 ? void 0 : token.chainId,
+            accountAddress,
+        ]);
+    };
+    const refetchNewBalance = (0, react_1.useCallback)(() => {
+        queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+            refetchInterval: 500,
+            staleTime: 500,
+        });
+    }, [queryClient, tokenBalanceQueryKey]);
     return {
-        token,
-        isLoading: isBalanceLoading,
+        token: data,
+        isLoading,
         refetch,
+        refetchNewBalance,
+        refetchAllBalances,
+        getTokenBalancesWithRetry,
     };
 };
 exports.useTokenBalance = useTokenBalance;

package/cjs/hooks/useTokenBalances.d.ts

@@ -5,5 +5,5 @@ export declare const useTokenBalances: (selectedChainId?: number) => {
     featuredTokens: import("@lifi/types").Token[];
     isLoading: boolean;
     isBalanceLoading: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<Token[] | undefined, unknown>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<Token[], unknown>>;
 };

package/cjs/hooks/useTokenBalances.js

@@ -29,9 +29,6 @@ const useTokenBalances = (selectedChainId) => {
         Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length) &&
         Boolean(selectedChainId);
     const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = (0, react_query_1.useQuery)(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!accountAddress || !tokens) {
-            return;
-        }
         const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
@@ -39,7 +36,7 @@ const useTokenBalances = (selectedChainId) => {
             setRefetchInterval((interval) => interval === defaultRefetchInterval
                 ? minRefetchInterval
                 : interval * 2);
-            return;
+            throw Error('Could not get tokens balance.');
         }
         const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
         const sortFn = (a, b) => {

package/cjs/i18n/en/translation.json

@@ -78,7 +78,7 @@
         "fundsReceived": "Funds received"
       },
       "message": {
-        "fundsReceived": "You now have {{amount}} {{tokenSymbol}} in your wallet on {{chainName}} chain."
+        "fundsReceived": "There are now {{amount}} {{tokenSymbol}} in wallet {{walletAddress}} on {{chainName}} chain."
       }
     },
     "info": {

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -3,22 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTokenPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
 const ChainSelect_1 = require("../../components/ChainSelect");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
 const SearchTokenInput_1 = require("./SearchTokenInput");
-const minTokenListHeight = 330;
 const SelectTokenPage = ({ formType }) => {
-    (0, hooks_1.useScrollableOverflowHidden)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const headerRef = (0, react_1.useRef)(null);
-    const contentHeight = (0, hooks_1.useContentHeight)();
-    const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
-    (0, react_1.useLayoutEffect)(() => {
-        var _a, _b;
-        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
-    }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3 }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: 360, onClick: navigateBack, formType: formType })] })));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable consistent-return */
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -11,17 +12,18 @@ const BottomSheet_1 = require("../../components/BottomSheet");
 const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
 const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
-    const { token, refetch: refetchBalance } = (0, hooks_1.useTokenBalance)(route.toChainId, route.toToken.address);
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(route.toToken, route.toAddress);
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const clearFromAmount = () => {
-        refetchBalance();
+        refetchAllBalances();
         setValue(providers_1.SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {
@@ -33,6 +35,13 @@ const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
     };
+    const handleSeeDetails = () => {
+        handleClose();
+        navigate(utils_1.navigationRoutes.swapDetails, {
+            state: { routeId: route.id },
+            replace: true,
+        });
+    };
     let title;
     let message;
     switch (status) {
@@ -42,6 +51,7 @@ const StatusBottomSheet = ({ status, route, }) => {
                 amount: token === null || token === void 0 ? void 0 : token.amount,
                 tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
                 chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
             });
             break;
         case 'error': {
@@ -62,10 +72,13 @@ const StatusBottomSheet = ({ status, route, }) => {
         var _a, _b;
         if ((status === 'success' || status === 'error') &&
             !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
-            refetchBalance();
+            if (status === 'success') {
+                refetchNewBalance();
+                refetch();
+            }
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
-    }, [refetchBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    }, [refetch, refetchNewBalance, status]);
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './elements';
 export * from './format';
 export * from './input';
 export * from './navigationRoutes';
+export * from './wallet';

package/cjs/utils/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./elements"), exports);
 __exportStar(require("./format"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./navigationRoutes"), exports);
+__exportStar(require("./wallet"), exports);

package/cjs/utils/wallet.d.ts

@@ -0,0 +1 @@
+export declare const shortenWalletAddress: (address?: string) => string | null;

package/cjs/utils/wallet.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shortenWalletAddress = void 0;
+const shortenWalletAddress = (address) => address
+    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    : null;
+exports.shortenWalletAddress = shortenWalletAddress;

package/components/BottomSheet/BottomSheet.js

@@ -8,9 +8,11 @@ export const BottomSheet = forwardRef(({ elementRef, children, open }, ref) => {
     const containerElement = useScrollableContainer();
     const openDrawer = useCallback(() => {
         setDrawerOpen(true);
+        openRef.current = true;
     }, []);
     const closeDrawer = useCallback(() => {
         setDrawerOpen(false);
+        openRef.current = false;
     }, []);
     useImperativeHandle(ref, () => ({
         isOpen: () => openRef.current,

package/components/ChainSelect/ChainSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Skeleton, Typography } from '@mui/material';
+import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapFormKeyHelper } from '../../providers';
@@ -22,7 +22,7 @@ export const ChainSelect = ({ formType }) => {
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - maxChainToOrder;
     return (_jsxs(ChainContainer, { children: [isLoading
                 ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => (_jsx(ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) }), chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, Object.assign({ onClick: showAllChains }, { children: _jsx(Box, Object.assign({ sx: {
+                : getChains().map((chain) => (_jsx(Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, Object.assign({ onClick: showAllChains }, { children: _jsx(Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',