@lifi/widget 1.18.1 → 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/components/SwapRouteCard/SwapRouteCard.js

@@ -23,18 +23,18 @@ const Token_1 = require("../Token");
 const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
 const SwapRouteCard = (_a) => {
     var _b;
-    var { route, active, variant = 'default' } = _a, other = __rest(_a, ["route", "active", "variant"]);
+    var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [expanded, setExpanded] = (0, react_1.useState)(variant === 'default');
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
         ? t(`swap.tags.${route.tags[0]}`)
         : alternativeTag;
     const handleExpand = (e) => {
         e.stopPropagation();
-        setExpanded((expanded) => !expanded);
+        setCardExpanded((expanded) => !expanded);
     };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'extended' ? route.steps[0] : undefined }), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: expanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: expanded }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'extended' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: cardExpanded }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -17,6 +17,6 @@ const material_1 = require("@mui/material");
 const Card_1 = require("../Card");
 const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'extended' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'extended' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/SwapRouteCard/types.d.ts

@@ -1,13 +1,14 @@
 import type { Route } from '@lifi/sdk';
 export interface SwapRouteCardProps {
     route: Route;
-    variant?: 'default' | 'extended' | 'dense';
+    variant?: 'default' | 'stretched' | 'dense';
     active?: boolean;
+    expanded?: boolean;
 }
 export interface SwapRouteCardEssentialsProps {
     route: Route;
     dense?: boolean;
 }
 export interface SwapRouteCardSkeletonProps {
-    variant?: 'default' | 'extended' | 'dense';
+    variant?: 'default' | 'stretched' | 'dense';
 }

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRoutesExpanded = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
@@ -17,6 +18,7 @@ const SwapRoutesExpanded = () => {
     const { containerStyle } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const cleanedPathname = pathname.endsWith('/')
@@ -25,14 +27,16 @@ const SwapRoutesExpanded = () => {
     const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = utils_1.navigationRoutesValues.includes(path);
     const handleRouteClick = (route) => {
-        setExecutableRoute(route);
-        navigate(utils_1.navigationRoutes.swapExecution, {
-            state: { routeId: route.id },
-        });
+        if (isValid && !isValidating) {
+            setExecutableRoute(route);
+            navigate(utils_1.navigationRoutes.swapExecution, {
+                state: { routeId: route.id },
+            });
+        }
     };
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ sx: containerStyle }, { children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "extended" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "extended" }, route.id)))) }))] }) })) })) })) }));
+    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ sx: containerStyle }, { children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })) }));
 };
 exports.SwapRoutesExpanded = SwapRoutesExpanded;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.18.1";
+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.1';
+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;