@lifi/widget 1.16.0 → 1.17.1

package/cjs/types/events.d.ts

@@ -1,5 +1,17 @@
+import type { Process, Route } from '@lifi/sdk';
 export declare enum WidgetEvent {
-    SwapStarted = "swapStarted",
-    SwapCompleted = "swapCompleted",
-    SwapFailed = "swapFailed"
+    RouteExecutionStarted = "routeExecutionStarted",
+    RouteExecutionUpdated = "routeExecutionUpdated",
+    RouteExecutionCompleted = "routeExecutionCompleted",
+    RouteExecutionFailed = "routeExecutionFailed"
+}
+export declare type WidgetEvents = {
+    routeExecutionStarted: Route;
+    routeExecutionUpdated: RouteExecutionUpdate;
+    routeExecutionCompleted: Route;
+    routeExecutionFailed: RouteExecutionUpdate;
+};
+export interface RouteExecutionUpdate {
+    route: Route;
+    process: Process;
 }

package/cjs/types/events.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetEvent = void 0;
 var WidgetEvent;
 (function (WidgetEvent) {
-    WidgetEvent["SwapStarted"] = "swapStarted";
-    WidgetEvent["SwapCompleted"] = "swapCompleted";
-    WidgetEvent["SwapFailed"] = "swapFailed";
+    WidgetEvent["RouteExecutionStarted"] = "routeExecutionStarted";
+    WidgetEvent["RouteExecutionUpdated"] = "routeExecutionUpdated";
+    WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
+    WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
 })(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));

package/cjs/types/widget.d.ts

@@ -17,33 +17,40 @@ export interface WidgetWalletManagement {
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
-interface WidgetConfigBase {
-    fromAmount?: number | string;
+export interface WidgetConfig {
+    fromChain?: `${ChainKey}` | number;
+    toChain?: `${ChainKey}` | number;
+    fromToken?: string;
+    toToken?: string;
     toAddress?: string;
-    containerStyle?: CSSProperties;
-    theme?: ThemeConfig;
+    fromAmount?: number | string;
     appearance?: Appearance;
+    theme?: ThemeConfig;
+    containerStyle?: CSSProperties;
     disableAppearance?: boolean;
     disableTelemetry?: boolean;
-    walletManagement?: WidgetWalletManagement;
-    integrator?: string;
+    /** @deprecated Use chains.deny instead */
     disabledChains?: number[];
+    /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
+    integrator?: string;
+    walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
+    bridges?: {
+        allow?: string[];
+        deny?: string[];
+    };
+    exchanges?: {
+        allow?: string[];
+        deny?: string[];
+    };
+    chains?: {
+        allow?: number[];
+        deny?: number[];
+    };
+    tokens?: {
+        featured?: Token[];
+        allow?: Token[];
+        deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
+    };
 }
-declare type WidgetFromTokenConfig = {
-    fromChain: `${ChainKey}` | number;
-    fromToken?: string;
-} | {
-    fromChain?: never;
-    fromToken?: never;
-};
-declare type WidgetToTokenConfig = {
-    toChain: `${ChainKey}` | number;
-    toToken?: string;
-} | {
-    toChain?: never;
-    toToken?: never;
-};
-export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig;
-export {};

package/cjs/utils/colors.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
-export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";
+export declare const getContrastTextColor: (theme: Theme, background?: string) => "#000" | "#fff";

package/components/AppContainer.js

@@ -3,7 +3,7 @@ import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useWidgetConfig } from '../providers';
 import { ElementId } from '../utils';
 const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
     // height: '100%',

package/components/ChainSelect/ChainSelect.style.js

@@ -1,15 +1,15 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Card } from '../../components/Card';
-export const ChainCard = styled(Card)(({ theme }) => ({
+export const ChainCard = styled(Card)({
     display: 'grid',
     placeItems: 'center',
-    width: 56,
+    minWidth: 56,
     height: 56,
-}));
+});
 export const ChainContainer = styled(Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, 56px)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/components/ChainSelect/useChainSelect.d.ts

@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk';
-import type { SwapFormDirection } from '../../providers';
-export declare const useChainSelect: (formType: SwapFormDirection) => {
+import type { SwapFormType } from '../../providers';
+export declare const useChainSelect: (formType: SwapFormType) => {
     chains: EVMChain[] | undefined;
     getChains: () => EVMChain[];
     setCurrentChain: (chainId: number) => void;

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -20,15 +20,15 @@ export const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = useTranslation();
     const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
-    if (!insufficientFunds && !insufficientGas.length) {
+    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
     return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
                     marginTop: 2,
                     marginLeft: 2,
-                } }), _jsxs(Box, { children: [insufficientGas.length ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                } }), _jsxs(Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
                             ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, insufficientGas.length ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
+                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
                             return (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {

package/components/Header/useHeaderActionStore.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import type { HeaderActionStore } from './types';
 export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
     setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetHeaderAction: () => (element?: import("react").ReactNode) => () => void;

package/components/Header/useHeaderActionStore.js

@@ -14,6 +14,3 @@ export const useHeaderActionStore = create()(immer((set, get) => ({
         });
     },
 })));
-export const useSetHeaderAction = () => {
-    return useHeaderActionStore((state) => state.setAction);
-};

package/components/SelectChainAndToken.js

@@ -3,7 +3,7 @@ import { Box, useMediaQuery } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { ReverseTokensButton } from '../components/ReverseTokensButton';
 import { SelectTokenButton } from '../components/SelectTokenButton';
-import { SwapFormKey } from '../providers/SwapFormProvider';
+import { SwapFormKey } from '../providers';
 export const SelectChainAndToken = (props) => {
     const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
     const [fromChain, toChain, fromToken, toToken] = useWatch({

package/components/SwapButton/SwapButton.js

@@ -8,51 +8,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId } from '@lifi/sdk';
 import { Button } from '@mui/material';
-import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useGasSufficiency } from '../../hooks';
-import { SwapFormKeyHelper, useWallet, useWidgetConfig } from '../../providers';
+import { useGasSufficiency } from '../../hooks';
+import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
-    var _a;
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { getChainById } = useChains();
     const config = useWidgetConfig();
-    const { account, switchChain, connect: walletConnect } = useWallet();
+    const { account, connect } = useWallet();
     const { insufficientFunds, insufficientGas } = useGasSufficiency(currentRoute);
-    const [chainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey('from')],
-    });
-    // Allow switching chain only if execution is not started
-    const switchChainAllowed = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
-        currentRoute &&
-        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
-                yield walletConnect();
+                yield connect();
             }
             else {
                 navigate(navigationRoutes.selectWallet);
             }
         }
-        else if (switchChainAllowed) {
-            yield switchChain(chainId);
-            // check that the current route exists in the up to date route list
-        }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (switchChainAllowed) {
-                return t(`button.switchChain`);
-            }
             if (!currentRoute) {
                 return t(`button.swap`);
             }
@@ -60,7 +42,5 @@ export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: currentRoute &&
-            !switchChainAllowed &&
-            (insufficientFunds || !!insufficientGas.length || disable), fullWidth: true }, { children: getButtonText() })));
+    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true }, { children: getButtonText() })));
 };

package/components/TokenList/TokenList.js

@@ -50,5 +50,5 @@ export const TokenList = ({ formType, height, onClick, }) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);
-    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? _jsx(TokenNotFound, {}) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };

package/components/TokenList/TokenList.style.js

@@ -4,7 +4,8 @@ import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
     '&:hover': {
@@ -18,8 +19,8 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     height: 64,
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1.5),
     [`.${listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(5),
+        right: theme.spacing(3),
     },
 }));

package/components/TokenList/TokenListItem.js

@@ -16,7 +16,7 @@ export const TokenListItem = memo(({ onClick, size, start, token, showBalance, i
                                 }) }))) : null] })))) : null] })), endAdornment] })));
 });
 export const TokenListItemSkeleton = () => {
-    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };
 export const TokenAmountSkeleton = () => {
     return (_jsxs(Box, Object.assign({ sx: {

package/components/TokenList/TokenNotFound.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const TokenNotFound: React.FC;
+import type { SwapFormTypeProps } from '../../providers';
+export declare const TokenNotFound: React.FC<SwapFormTypeProps>;

package/components/TokenList/TokenNotFound.js

@@ -1,9 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SearchOff as SearchOffIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
+import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-export const TokenNotFound = () => {
+import { useChains } from '../../hooks';
+import { SwapFormKeyHelper } from '../../providers';
+export const TokenNotFound = ({ formType }) => {
+    var _a;
     const { t } = useTranslation();
+    const [selectedChainId] = useWatch({
+        name: [SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const { getChainById } = useChains();
     return (_jsxs(Box, Object.assign({ sx: {
             display: 'flex',
             justifyContent: 'center',
@@ -11,5 +19,7 @@ export const TokenNotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: _jsx(SearchOffIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.couldntFindTokens') }))] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: _jsx(SearchOffIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.info.message.emptyTokenList', {
+                    chainName: (_a = getChainById(selectedChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                }) }))] })));
 };

package/components/TokenList/types.d.ts

@@ -1,9 +1,9 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers';
+import type { SwapFormType } from '../../providers';
 import type { Token } from '../../types';
 export interface TokenListProps {
-    formType: SwapFormDirection;
+    formType: SwapFormType;
     height: number;
     onClick?(): void;
 }

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useChains.js

@@ -9,24 +9,37 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWidgetConfig } from '../providers/WidgetProvider';
-import { useSetChainOrder } from '../stores/chains';
+import { useFormContext } from 'react-hook-form';
+import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
+import { useChainOrderStore } from '../stores/chains';
 export const useChains = () => {
-    const { disabledChains } = useWidgetConfig();
-    const [, initializeChains] = useSetChainOrder();
+    const { disabledChains, chains } = useWidgetConfig();
+    const lifi = useLiFi();
+    const { getValues, setValue } = useFormContext();
     const { data, isLoading } = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield LiFi.getChains();
-        const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-        initializeChains(filteredChains.map((chain) => chain.id));
-        return filteredChains;
+        const availableChains = yield lifi.getChains();
+        const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains, disabledChains));
+        const chainOrder = useChainOrderStore
+            .getState()
+            .initializeChains(filteredChains.map((chain) => chain.id));
+        const [fromChainValue, toChainValue] = getValues([
+            SwapFormKey.FromChain,
+            SwapFormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+            setValue(SwapFormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+            setValue(SwapFormKey.ToChain, chainOrder[0]);
+        }
+        return { availableChains, filteredChains };
     }));
     const getChainById = useCallback((chainId) => {
-        const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
+        const chain = data === null || data === void 0 ? void 0 : data.availableChains.find((chain) => chain.id === chainId);
         // if (!chain) {
         //   throw new Error('Chain not found or chainId is invalid.');
         // }
         return chain;
     }, [data]);
-    return { chains: data, getChainById, isLoading };
+    return { chains: data === null || data === void 0 ? void 0 : data.filteredChains, getChainById, isLoading };
 };

package/hooks/useFeaturedTokens.d.ts

@@ -1 +1 @@
-export declare const useFeaturedTokens: (selectedChainId: number) => import("@lifi/types").Token[] | undefined;
+export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[];

package/hooks/useFeaturedTokens.js

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useWidgetConfig } from '../providers';
 export const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens } = useWidgetConfig();
-    return useMemo(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+    const { featuredTokens, tokens } = useWidgetConfig();
+    return useMemo(() => {
+        var _a;
+        return [...((_a = tokens === null || tokens === void 0 ? void 0 : tokens.featured) !== null && _a !== void 0 ? _a : []), ...(featuredTokens !== null && featuredTokens !== void 0 ? featuredTokens : [])].filter((token) => token.chainId === selectedChainId);
+    }, [featuredTokens, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.featured]);
 };

package/hooks/useGasSufficiency.d.ts

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

package/hooks/useGasSufficiency.js

@@ -1,11 +1,20 @@
+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 Big from 'big.js';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
-import { useWallet } from '../providers/WalletProvider';
+import { SwapFormKey, SwapFormKeyHelper, useLiFi, useWallet, } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
+    const lifi = useLiFi();
     const { account } = useWallet();
     const [fromChainId, toChainId, fromToken] = useWatch({
         name: [
@@ -17,20 +26,13 @@ export const useGasSufficiency = (route) => {
     const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
     const { getChainById } = useChains();
     const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
-    const { tokensWithBalance: toChainTokenBalances } = useTokenBalances(toChainId);
-    const insufficientGas = useMemo(() => {
+    const [insufficientGas, setInsufficientGas] = useState();
+    const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (!account.isActive ||
-            !route ||
-            !fromAmount ||
-            !fromChainTokenBalances ||
-            !toChainTokenBalances) {
-            return [];
+        if (!account.isActive || !route || !fromAmount) {
+            setInsufficientGas(undefined);
+            return;
         }
-        const tokenBalancesByChain = {
-            [fromChainId]: fromChainTokenBalances,
-            [toChainId]: toChainTokenBalances,
-        };
         const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
@@ -55,30 +57,36 @@ export const useGasSufficiency = (route) => {
             route.fromToken.address === gasCosts[fromChainId].token.address) {
             gasCosts[fromChainId].tokenAmount = (_a = gasCosts[fromChainId]) === null || _a === void 0 ? void 0 : _a.gasAmount.plus(Big(fromAmount));
         }
+        const tokenBalances = yield lifi.getTokenBalances(account.address, Object.values(gasCosts).map((item) => item.token));
+        if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
+            setInsufficientGas(undefined);
+            return;
+        }
         [fromChainId, toChainId].forEach((chainId) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
-                const gasTokenBalance = Big((_c = (_b = (_a = tokenBalancesByChain[chainId]) === null || _a === void 0 ? void 0 : _a.find((t) => t.address === gasCosts[chainId].token.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
+                const gasTokenBalance = Big((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
+                    t.address === gasCosts[chainId].token.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
                 const insufficientFromChainGas = gasTokenBalance.lte(0) ||
-                    gasTokenBalance.lt((_d = gasCosts[chainId].gasAmount) !== null && _d !== void 0 ? _d : Big(0)) ||
-                    gasTokenBalance.lt((_e = gasCosts[chainId].tokenAmount) !== null && _e !== void 0 ? _e : Big(0));
+                    gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : Big(0)) ||
+                    gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : Big(0));
                 const insufficientFromChainGasAmount = insufficientFromChainGas
-                    ? (_g = (_f = gasCosts[chainId].tokenAmount) === null || _f === void 0 ? void 0 : _f.minus(gasTokenBalance)) !== null && _g !== void 0 ? _g : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
+                    ? (_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 });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        return gasCostResult;
-    }, [
+        setInsufficientGas(gasCostResult);
+    }), [
+        account.address,
         account.isActive,
         fromAmount,
         fromChainId,
-        fromChainTokenBalances,
         getChainById,
+        lifi,
         route,
         toChainId,
-        toChainTokenBalances,
     ]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
@@ -91,6 +99,9 @@ export const useGasSufficiency = (route) => {
         const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
         return Big(fromAmount).gt(balance);
     }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+    useEffect(() => {
+        checkInsufficientGas();
+    }, [checkInsufficientGas]);
     return {
         insufficientGas,
         insufficientFunds,

package/hooks/useInitializer.js

@@ -1,5 +1,11 @@
 /* eslint-disable no-underscore-dangle */
+import { checkPackageUpdates } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { name, version } from '../config/version';
 import { useTools } from './useTools';
 export const useInitializer = () => {
     useTools();
+    useEffect(() => {
+        checkPackageUpdates(name, version);
+    }, []);
 };