@lifi/widget 1.15.1 → 1.17.0

package/cjs/components/TokenList/TokenNotFound.js

@@ -4,9 +4,17 @@ exports.TokenNotFound = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
-const TokenNotFound = () => {
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const TokenNotFound = ({ formType }) => {
+    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
+    const [selectedChainId] = (0, react_hook_form_1.useWatch)({
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const { getChainById } = (0, hooks_1.useChains)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
             display: 'flex',
             justifyContent: 'center',
@@ -14,6 +22,8 @@ const TokenNotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.couldntFindTokens') }))] })));
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.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,
+                }) }))] })));
 };
 exports.TokenNotFound = TokenNotFound;

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

@@ -88,7 +88,29 @@ 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: (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
+                                ? colors_1.common.white
+                                : colors_1.common.black,
+                        },
+                    }, sizeMedium: {
+                        padding: '10px 16px',
+                        [`.${DialogActions_1.dialogActionsClasses.root} &`]: {
+                            padding: '6px 12px',
+                        },
+                    } }, (mode === 'dark'
                     ? {
                         outlined: {
                             color: primaryLightColor,
@@ -106,28 +128,7 @@ 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',
-                        [`.${DialogActions_1.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: (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
-                                ? colors_1.common.white
-                                : colors_1.common.black,
-                        },
-                    } }),
+                    : {})),
             },
             MuiIconButton: {
                 styleOverrides: {

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

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.15.1';
+exports.version = '1.17.0';

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

@@ -22,6 +22,7 @@ __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
 __exportStar(require("./useInitializer"), exports);
 __exportStar(require("./useNavigateBack"), exports);
+__exportStar(require("./useProcessMessage"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
 __exportStar(require("./useSwapRoutes"), exports);
@@ -32,3 +33,4 @@ __exportStar(require("./useTokenBalances"), exports);
 __exportStar(require("./useTokens"), exports);
 __exportStar(require("./useTokenSearch"), exports);
 __exportStar(require("./useTools"), exports);
+__exportStar(require("./useWidgetEvents"), exports);

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

@@ -8,36 +8,42 @@ 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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChains = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const lifi_1 = require("../config/lifi");
-const WidgetProvider_1 = require("../providers/WidgetProvider");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../providers");
+const chains_1 = require("../stores/chains");
 const useChains = () => {
-    const { disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
-    const _a = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield lifi_1.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 } = (0, providers_1.useWidgetConfig)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
+    const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
+        const availableChains = yield lifi.getChains();
+        const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
+        const chainOrder = chains_1.useChainOrderStore
+            .getState()
+            .initializeChains(filteredChains.map((chain) => chain.id));
+        const [fromChainValue, toChainValue] = getValues([
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+            setValue(providers_1.SwapFormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+            setValue(providers_1.SwapFormKey.ToChain, chainOrder[0]);
+        }
+        return { availableChains, filteredChains };
+    }));
     const getChainById = (0, react_1.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 };
 };
 exports.useChains = useChains;

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

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFeaturedTokens = void 0;
 const react_1 = require("react");
-const WidgetProvider_1 = require("../providers/WidgetProvider");
+const providers_1 = require("../providers");
 const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens } = (0, WidgetProvider_1.useWidgetConfig)();
-    return (0, react_1.useMemo)(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+    const { featuredTokens, tokens } = (0, providers_1.useWidgetConfig)();
+    return (0, react_1.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]);
 };
 exports.useFeaturedTokens = useFeaturedTokens;

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

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,35 +17,27 @@ const big_js_1 = __importDefault(require("big.js"));
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const _1 = require(".");
-const SwapFormProvider_1 = require("../providers/SwapFormProvider");
-const WalletProvider_1 = require("../providers/WalletProvider");
+const providers_1 = require("../providers");
 const useTokenBalances_1 = require("./useTokenBalances");
 const useGasSufficiency = (route) => {
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { account } = (0, providers_1.useWallet)();
     const [fromChainId, toChainId, fromToken] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey('from'),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey('to'),
-            SwapFormProvider_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKeyHelper.getChainKey('from'),
+            providers_1.SwapFormKeyHelper.getChainKey('to'),
+            providers_1.SwapFormKey.FromToken,
         ],
     });
-    const fromAmount = (0, _1.useDebouncedWatch)(SwapFormProvider_1.SwapFormKey.FromAmount, 250);
+    const fromAmount = (0, _1.useDebouncedWatch)(providers_1.SwapFormKey.FromAmount, 250);
     const { getChainById } = (0, _1.useChains)();
     const { tokensWithBalance: fromChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(fromChainId);
-    const { tokensWithBalance: toChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(toChainId);
-    const insufficientGas = (0, react_1.useMemo)(() => {
+    const [insufficientGas, setInsufficientGas] = (0, react_1.useState)();
+    const checkInsufficientGas = (0, react_1.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];
@@ -61,30 +62,34 @@ 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((0, big_js_1.default)(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 = (0, big_js_1.default)((_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 = (0, big_js_1.default)((_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 : (0, big_js_1.default)(0)) ||
-                    gasTokenBalance.lt((_e = gasCosts[chainId].tokenAmount) !== null && _e !== void 0 ? _e : (0, big_js_1.default)(0));
+                    gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : (0, big_js_1.default)(0)) ||
+                    gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : (0, big_js_1.default)(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 = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -97,6 +102,9 @@ const useGasSufficiency = (route) => {
         const balance = (0, big_js_1.default)((_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 (0, big_js_1.default)(fromAmount).gt(balance);
     }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+    (0, react_1.useEffect)(() => {
+        checkInsufficientGas();
+    }, [checkInsufficientGas]);
     return {
         insufficientGas,
         insufficientFunds,

package/cjs/hooks/useInitializer.js

@@ -2,8 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInitializer = void 0;
 /* eslint-disable no-underscore-dangle */
+const sdk_1 = require("@lifi/sdk");
+const react_1 = require("react");
+const version_1 = require("../config/version");
 const useTools_1 = require("./useTools");
 const useInitializer = () => {
     (0, useTools_1.useTools)();
+    (0, react_1.useEffect)(() => {
+        (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+    }, []);
 };
 exports.useInitializer = useInitializer;

package/cjs/{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/cjs/{components/Step/utils.js → hooks/useProcessMessage.js}

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getProcessMessage = void 0;
+exports.getProcessMessage = exports.useProcessMessage = void 0;
 const sdk_1 = require("@lifi/sdk");
-const utils_1 = require("../../utils");
-const formatProcessMessage = (initialMessage, args = {}) => {
-    return Object.keys(args).reduce((message, key) => {
-        return message.replace(`{${key}}`, args[key]);
-    }, initialMessage);
+const react_i18next_1 = require("react-i18next");
+const utils_1 = require("../utils");
+const useChains_1 = require("./useChains");
+const useProcessMessage = (step, process) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, useChains_1.useChains)();
+    if (!step || !process) {
+        return {};
+    }
+    return getProcessMessage(t, getChainById, step, process);
 };
+exports.useProcessMessage = useProcessMessage;
 const processMessages = {
     TOKEN_ALLOWANCE: {
         STARTED: (t) => t(`swap.process.tokenAllowance.started`),
@@ -15,7 +21,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: {
@@ -70,9 +76,9 @@ function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.slippageTooLarge`);
                 message = t(`swap.error.message.slippageTooLarge`);
                 break;
-            case sdk_1.MetaMaskProviderErrorCode.userRejectedRequest:
-                title = t(`swap.error.title.userRejectedSignatureRequest`);
-                message = t(`swap.error.message.signatureRequired`, {
+            case sdk_1.LifiErrorCode.TransactionRejected:
+                title = t(`swap.error.title.transactionRejected`);
+                message = t(`swap.error.message.transactionRejected`, {
                     amount: (0, utils_1.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/cjs/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;