@lifi/widget 1.18.1 → 1.18.3

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',

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/components/SwapRouteCard/SwapRouteCard.js

@@ -20,18 +20,18 @@ import { Token } from '../Token';
 import { IconButton, Label } from './SwapRouteCard.style';
 export 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 } = useTranslation();
-    const [expanded, setExpanded] = useState(variant === 'default');
+    const [cardExpanded, setCardExpanded] = 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 (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'extended' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'extended' ? route.steps[0] : undefined }), variant === 'extended' ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: expanded }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'extended' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: cardExpanded }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

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

package/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/components/SwapRoutes/SwapRoutesExpanded.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse, Grow, Stack, Typography } from '@mui/material';
+import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useSwapRoutes } from '../../hooks';
@@ -14,6 +15,7 @@ export const SwapRoutesExpanded = () => {
     const { containerStyle } = useWidgetConfig();
     const navigate = useNavigate();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const { isValid, isValidating } = useFormState();
     const setExecutableRoute = useSetExecutableRoute();
     const { pathname } = useLocation();
     const cleanedPathname = pathname.endsWith('/')
@@ -22,13 +24,15 @@ export const SwapRoutesExpanded = () => {
     const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = navigationRoutesValues.includes(path);
     const handleRouteClick = (route) => {
-        setExecutableRoute(route);
-        navigate(navigationRoutes.swapExecution, {
-            state: { routeId: route.id },
-        });
+        if (isValid && !isValidating) {
+            setExecutableRoute(route);
+            navigate(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 (_jsx(CollapseContainer, { children: _jsx(Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: _jsx(Container, Object.assign({ sx: containerStyle }, { children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "extended" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "extended" }, route.id)))) }))] }) })) })) })) }));
+    return (_jsx(CollapseContainer, { children: _jsx(Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: _jsx(Container, Object.assign({ sx: containerStyle }, { children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })) }));
 };

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

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