@lifi/widget 1.18.2 → 1.18.3

package/components/Header/WalletHeader.js

@@ -13,14 +13,12 @@ import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { navigationRoutes } from '../../utils';
+import { navigationRoutes, shortenWalletAddress } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 export const WalletHeader = () => {
     const { t } = useTranslation();
     const { account, disconnect } = useWallet();
-    const walletAddress = account.address
-        ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
-        : null;
+    const walletAddress = shortenWalletAddress(account.address);
     return (_jsx(HeaderAppBar, Object.assign({ elevation: 0 }, { children: walletAddress ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ sx: {
                         display: 'flex',
                         flex: 1,

package/components/SendToWallet/SendToWallet.js

@@ -42,5 +42,5 @@ export const SendToWallet = forwardRef((props, ref) => {
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
+    return (_jsx(Collapse, Object.assign({ timeout: 225, unmountOnExit: true, mountOnEnter: true, in: showSendToWallet }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(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 }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
 });

package/components/SendToWallet/SendToWalletButton.js

@@ -1,19 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
 import { Button, Tooltip } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useWallet } from '../../providers';
+import { SwapFormKey, useWallet } from '../../providers';
 import { useSettings } from '../../stores';
 import { useSendToWalletStore } from './store';
 export const SendToWalletButton = () => {
     const { t } = useTranslation();
     const { account } = useWallet();
+    const { setValue } = useFormContext();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
     if (!showDestinationWallet || !account.isActive) {
         return null;
     }
-    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: toggleSendToWallet, sx: {
+    const handleClick = () => {
+        if (showSendToWallet) {
+            setValue(SwapFormKey.ToAddress, '');
+        }
+        toggleSendToWallet();
+    };
+    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: _jsx(WalletOutlinedIcon, {}) })) })));

package/components/SwapInput/FormPriceHelperText.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useTokenBalance } from '../../hooks';
+import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 import { formatTokenPrice } from '../../utils';
 export const FormPriceHelperText = ({ formType, selected }) => {
@@ -14,7 +14,7 @@ export const FormPriceHelperText = ({ formType, selected }) => {
             SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
-    const { token, isLoading } = useTokenBalance(chainId, tokenAddress);
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const fromAmountTokenPrice = formatTokenPrice(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
     return (_jsxs(FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [_jsx(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/components/SwapInput/SwapInputAdornment.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { InputAdornment, Skeleton } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useTokenBalance } from '../../hooks';
+import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 import { Button } from './SwapInputAdornment.style';
 export const SwapInputAdornment = ({ formType }) => {
@@ -14,7 +14,7 @@ export const SwapInputAdornment = ({ formType }) => {
             SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
-    const { token, isLoading } = useTokenBalance(chainId, tokenAddress);
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
         var _a;
         setValue(SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');

package/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/config/version.js

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

package/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/hooks/index.js

@@ -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/hooks/useGasSufficiency.js

@@ -10,17 +10,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import Big from 'big.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useChains } from '.';
-import { useLiFi, useWallet } from '../providers';
-import { useTokenBalances } from './useTokenBalances';
+import { useWallet } from '../providers';
+import { useTokenBalance } from './useTokenBalance';
 export const useGasSufficiency = (route) => {
-    const lifi = useLiFi();
     const { account } = useWallet();
     const { getChainById } = useChains();
-    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(route === null || route === void 0 ? void 0 : route.fromChainId);
+    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* () {
         var _a, _b;
-        if (!account.isActive || !route) {
+        if (!account.address || !route) {
             setInsufficientGas(undefined);
             return;
         }
@@ -47,7 +46,7 @@ export 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(Big(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;
@@ -63,22 +62,22 @@ export 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.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 = useMemo(() => {
-        var _a, _b;
-        if (!account.isActive || !fromChainTokenBalances || !route) {
+        var _a;
+        if (!account.isActive || !fromToken || !route) {
             return false;
         }
-        const balance = Big((_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 = 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, fromChainTokenBalances, route]);
+    }, [account.isActive, fromToken, route]);
     useEffect(() => {
         checkInsufficientGas();
     }, [checkInsufficientGas]);

package/hooks/useScrollableContainer.d.ts

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

package/hooks/useScrollableContainer.js

@@ -9,16 +9,3 @@ export const useScrollableContainer = () => {
     }, [containerElement]);
     return containerElement;
 };
-export const useScrollableOverflowHidden = () => {
-    useLayoutEffect(() => {
-        const element = document.getElementById(ElementId.ScrollableContainer);
-        if (element) {
-            element.style.overflowY = 'hidden';
-        }
-        return () => {
-            if (element) {
-                element.style.overflowY = 'auto';
-            }
-        };
-    }, []);
-};

package/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/hooks/useTokenAddressBalance.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { useTokenBalances } from './useTokenBalances';
+export const useTokenAddressBalance = (chainId, tokenAddress) => {
+    const { tokens, tokensWithBalance, isBalanceLoading, refetch } = useTokenBalances(chainId);
+    const token = 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,
+    };
+};

package/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/hooks/useTokenBalance.js

@@ -1,15 +1,93 @@
-import { useMemo } from 'react';
-import { useTokenBalances } from './useTokenBalances';
-export const useTokenBalance = (chainId, tokenAddress) => {
-    const { tokens, tokensWithBalance, isBalanceLoading, refetch } = useTokenBalances(chainId);
-    const token = useMemo(() => {
+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());
+    });
+};
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+import { useLiFi, useWallet } from '../providers';
+import { formatTokenAmount } from '../utils';
+const defaultRefetchInterval = 60000;
+export const useTokenBalance = (token, accountAddress) => {
+    const lifi = useLiFi();
+    const { account } = useWallet();
+    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;
+            }
+            yield new Promise((resolve) => {
+                setTimeout(resolve, depth * 100);
+            });
+            return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+        }
+        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* () {
         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 = 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 = useCallback(() => {
+        queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+            refetchInterval: 500,
+            staleTime: 500,
+        });
+    }, [queryClient, tokenBalanceQueryKey]);
     return {
-        token,
-        isLoading: isBalanceLoading,
+        token: data,
+        isLoading,
         refetch,
+        refetchNewBalance,
+        refetchAllBalances,
+        getTokenBalancesWithRetry,
     };
 };

package/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/hooks/useTokenBalances.js

@@ -26,9 +26,6 @@ export const useTokenBalances = (selectedChainId) => {
         Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length) &&
         Boolean(selectedChainId);
     const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = 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
@@ -36,7 +33,7 @@ export 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.2",
+  "version": "1.18.3",
   "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,12 +45,12 @@
     "@lifi/sdk": "^1.6.0",
     "@lifi/wallet-management": "^1.1.10",
     "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.100",
-    "@mui/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.3.9",
+    "@tanstack/react-query": "^4.6.1",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
     "i18next": "^21.9.2",
@@ -59,7 +59,7 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.36.0",
+    "react-hook-form": "^7.36.1",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.4.1",
     "react-timer-hook": "^3.0.5",

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container } from '@mui/material';
-import { useLayoutEffect, useRef, useState } from 'react';
 import { ChainSelect } from '../../components/ChainSelect';
 import { TokenList } from '../../components/TokenList';
-import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, } from '../../hooks';
+import { useNavigateBack } from '../../hooks';
 import { SearchTokenInput } from './SearchTokenInput';
-const minTokenListHeight = 330;
 export const SelectTokenPage = ({ formType }) => {
-    useScrollableOverflowHidden();
     const { navigateBack } = useNavigateBack();
-    const headerRef = useRef(null);
-    const contentHeight = useContentHeight();
-    const [tokenListHeight, setTokenListHeight] = useState(0);
-    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 (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3 }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: 360, onClick: navigateBack, formType: formType })] })));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable consistent-return */
 import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
@@ -8,17 +9,18 @@ import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
+import { navigationRoutes, shortenWalletAddress } from '../../utils';
 import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { t } = useTranslation();
-    const { navigateBack } = useNavigateBack();
+    const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
     const { getChainById } = useChains();
-    const { token, refetch: refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toToken, route.toAddress);
     const { setValue } = useFormContext();
     const clearFromAmount = () => {
-        refetchBalance();
+        refetchAllBalances();
         setValue(SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {
@@ -30,6 +32,13 @@ export const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
     };
+    const handleSeeDetails = () => {
+        handleClose();
+        navigate(navigationRoutes.swapDetails, {
+            state: { routeId: route.id },
+            replace: true,
+        });
+    };
     let title;
     let message;
     switch (status) {
@@ -39,6 +48,7 @@ export 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: shortenWalletAddress(route.toAddress),
             });
             break;
         case 'error': {
@@ -59,9 +69,12 @@ export 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 (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(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] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    }, [refetch, refetchNewBalance, status]);
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(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] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };