@lifi/widget 1.15.1 → 1.17.0

package/components/TokenAvatar/TokenAvatar.style.js

@@ -3,9 +3,6 @@ import { avatarClasses } from '@mui/material/Avatar';
 import { badgeClasses } from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
-    [`& .${avatarClasses.root}`]: {
-        background: theme.palette.background.paper,
-    },
     [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
         marginLeft: theme.spacing(-1),
         boxSizing: 'border-box',

package/components/TokenList/TokenList.js

@@ -32,7 +32,9 @@ export const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = useCallback((tokenAddress) => {
-        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldDirty: true,
+        });
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
@@ -42,9 +44,11 @@ export const TokenList = ({ formType, height, onClick, }) => {
         ]);
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChain === selectedChain) {
-            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: false,
+            });
         }
         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/theme.js

@@ -85,7 +85,29 @@ export const createTheme = (mode, theme = {}) => {
                 defaultProps: {
                     disableElevation: true,
                 },
-                styleOverrides: Object.assign(Object.assign({}, (mode === 'dark'
+                styleOverrides: Object.assign({ root: {
+                        borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
+                        textTransform: 'none',
+                        fontSize: '1rem',
+                        '&.Mui-disabled, &.Mui-disabled:hover': {
+                            color: mode === 'light'
+                                ? 'rgb(0 0 0 / 70%)'
+                                : 'rgb(255 255 255 / 70%)',
+                            cursor: 'not-allowed',
+                            pointerEvents: 'auto',
+                        },
+                    }, contained: {
+                        '&:hover': {
+                            color: getContrastRatio(common.white, primaryMainColor) >= 3
+                                ? common.white
+                                : common.black,
+                        },
+                    }, sizeMedium: {
+                        padding: '10px 16px',
+                        [`.${dialogActionsClasses.root} &`]: {
+                            padding: '6px 12px',
+                        },
+                    } }, (mode === 'dark'
                     ? {
                         outlined: {
                             color: primaryLightColor,
@@ -103,28 +125,7 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                     }
-                    : {})), { root: {
-                        borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
-                        textTransform: 'none',
-                        fontSize: '1rem',
-                        padding: '10px 16px',
-                        [`.${dialogActionsClasses.root} &`]: {
-                            padding: '6px 12px',
-                        },
-                        '&.Mui-disabled, &.Mui-disabled:hover': {
-                            color: mode === 'light'
-                                ? 'rgb(0 0 0 / 70%)'
-                                : 'rgb(255 255 255 / 70%)',
-                            cursor: 'not-allowed',
-                            pointerEvents: 'auto',
-                        },
-                    }, contained: {
-                        '&:hover': {
-                            color: getContrastRatio(common.white, primaryMainColor) >= 3
-                                ? common.white
-                                : common.black,
-                        },
-                    } }),
+                    : {})),
             },
             MuiIconButton: {
                 styleOverrides: {

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/index.d.ts

@@ -6,6 +6,7 @@ export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
 export * from './useNavigateBack';
+export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
@@ -16,3 +17,4 @@ export * from './useTokenBalances';
 export * from './useTokens';
 export * from './useTokenSearch';
 export * from './useTools';
+export * from './useWidgetEvents';

package/hooks/index.js

@@ -6,6 +6,7 @@ export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
 export * from './useNavigateBack';
+export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
@@ -16,3 +17,4 @@ export * from './useTokenBalances';
 export * from './useTokens';
 export * from './useTokenSearch';
 export * from './useTools';
+export * from './useWidgetEvents';

package/hooks/useChains.d.ts

@@ -1,101 +1,5 @@
 export declare const useChains: () => {
-    error: unknown;
-    isError: true;
-    isLoading: false;
-    isLoadingError: false;
-    isRefetchError: true;
-    isSuccess: false;
-    status: "error";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: null;
-    isError: false;
-    isLoading: false;
-    isLoadingError: false;
-    isRefetchError: false;
-    isSuccess: true;
-    status: "success";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: unknown;
-    isError: true;
-    isLoading: false;
-    isLoadingError: true;
-    isRefetchError: false;
-    isSuccess: false;
-    status: "error";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: null;
-    isError: false;
-    isLoading: true;
-    isLoadingError: false;
-    isRefetchError: false;
-    isSuccess: false;
-    status: "loading";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+    isLoading: boolean;
 };

package/hooks/useChains.js

@@ -7,33 +7,39 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+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 _a = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield LiFi.getChains();
-        return chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-    })), { data } = _a, other = __rest(_a, ["data"]);
+    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 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 Object.assign({ chains: data, getChainById }, other);
+    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,12 @@ 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) {
+            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 +56,34 @@ 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)) {
+            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.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 +96,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);
+    }, []);
 };

package/{components/Step/utils.d.ts → hooks/useProcessMessage.d.ts}

@@ -1,5 +1,9 @@
 import type { EVMChain, Process, Step } from '@lifi/sdk';
 import type { TFunction } from 'react-i18next';
+export declare const useProcessMessage: (step?: Step, process?: Process) => {
+    title?: string | undefined;
+    message?: string | undefined;
+};
 export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
     title?: string;
     message?: string;

package/{pages/SwapPage/utils.js → hooks/useProcessMessage.js}

@@ -1,9 +1,14 @@
-import { LifiErrorCode, MetaMaskProviderErrorCode } from '@lifi/sdk';
-import { formatTokenAmount } from '../../utils';
-const formatProcessMessage = (initialMessage, args = {}) => {
-    return Object.keys(args).reduce((message, key) => {
-        return message.replace(`{${key}}`, args[key]);
-    }, initialMessage);
+import { LifiErrorCode } from '@lifi/sdk';
+import { useTranslation } from 'react-i18next';
+import { formatTokenAmount } from '../utils';
+import { useChains } from './useChains';
+export const useProcessMessage = (step, process) => {
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    if (!step || !process) {
+        return {};
+    }
+    return getProcessMessage(t, getChainById, step, process);
 };
 const processMessages = {
     TOKEN_ALLOWANCE: {
@@ -12,7 +17,7 @@ const processMessages = {
         DONE: (t) => t(`swap.process.tokenAllowance.done`),
     },
     SWITCH_CHAIN: {
-        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        ACTION_REQUIRED: (t) => t(`swap.process.switchChain.actionRequired`),
         DONE: (t) => t(`swap.process.switchChain.done`),
     },
     SWAP: {
@@ -67,9 +72,9 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.slippageTooLarge`);
                 message = t(`swap.error.message.slippageTooLarge`);
                 break;
-            case MetaMaskProviderErrorCode.userRejectedRequest:
-                title = t(`swap.error.title.userRejectedSignatureRequest`);
-                message = t(`swap.error.message.signatureRequired`, {
+            case LifiErrorCode.TransactionRejected:
+                title = t(`swap.error.title.transactionRejected`);
+                message = t(`swap.error.message.transactionRejected`, {
                     amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
                     tokenSymbol: step.action.fromToken.symbol,
                     chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',

package/hooks/useRouteExecution.d.ts

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk';
-export declare const useRouteExecution: (routeId: string) => {
+export declare const useRouteExecution: (routeId: string, executeInBackground?: boolean) => {
     executeRoute: () => void;
     restartRoute: () => void;
     deleteRoute: () => void;