@lifi/widget 1.14.1 → 1.16.0

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -23,20 +23,21 @@ const SwapRouteCard = (_a) => {
     var _b, _c;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
     const { t } = (0, react_i18next_1.useTranslation)();
+    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].toLowerCase()}`).toUpperCase()
-        : t(`swap.tags.general`).toUpperCase();
+        ? t(`swap.tags.${route.tags[0]}`)
+        : alternativeTag;
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: dense, indented: true }, other, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                }, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active }, { children: label })) })), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                }, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })) })), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
                 ? route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mb: 2 }, step.id)))
                 : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                 } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
                                         .map((step) => step.estimate.executionDuration)
-                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
+                                        .reduce((duration, x) => duration + x) / 60).toFixed(0)] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
 };
 exports.SwapRouteCard = SwapRouteCard;

package/cjs/components/SwapRouteCard/SwapRouteCard.style.js

@@ -7,16 +7,16 @@ const utils_1 = require("../../utils");
 exports.Label = (0, styles_1.styled)(material_1.Typography, {
     shouldForwardProp: (prop) => prop !== 'active',
 })(({ theme, active }) => ({
-    backgroundColor: active ? theme.palette.primary.main : 'transparent',
+    backgroundColor: active ? theme.palette.secondary.main : 'transparent',
     border: '1px solid',
     borderColor: active
-        ? theme.palette.primary.main
+        ? theme.palette.secondary.main
         : theme.palette.mode === 'light'
             ? theme.palette.grey[500]
             : theme.palette.grey[600],
     borderRadius: theme.shape.borderRadiusSecondary,
     color: active
-        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.primary.main)
+        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.secondary.main)
         : theme.palette.text.secondary,
     padding: theme.spacing(0.75),
     fontSize: 12,

package/cjs/components/TokenAvatar/TokenAvatar.style.js

@@ -6,9 +6,6 @@ const Avatar_1 = require("@mui/material/Avatar");
 const Badge_1 = require("@mui/material/Badge");
 const styles_1 = require("@mui/material/styles");
 exports.TokenAvatarGroup = (0, styles_1.styled)(material_1.AvatarGroup)(({ theme }) => ({
-    [`& .${Avatar_1.avatarClasses.root}`]: {
-        background: theme.palette.background.paper,
-    },
     [`& .${Badge_1.badgeClasses.badge}:last-child .${Avatar_1.avatarClasses.root}`]: {
         marginLeft: theme.spacing(-1),
         boxSizing: 'border-box',

package/cjs/components/TokenList/TokenList.js

@@ -6,19 +6,18 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+const providers_1 = require("../../providers");
 const TokenNotFound_1 = require("./TokenNotFound");
 const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
 const TokenList = ({ formType, height, onClick, }) => {
     var _a, _b;
     const parentRef = (0, react_1.useRef)(null);
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
-        name: [SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType)],
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([SwapFormProvider_1.SwapFormKey.TokenSearchFilter], 250);
+    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 250);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
     let filteredTokens = ((_a = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : chainTokens) !== null && _a !== void 0 ? _a : []);
     const searchFilter = (_b = tokenSearchFilter === null || tokenSearchFilter === void 0 ? void 0 : tokenSearchFilter.toUpperCase()) !== null && _b !== void 0 ? _b : '';
@@ -36,17 +35,21 @@ const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, react_1.useCallback)((tokenAddress) => {
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldDirty: true,
+        });
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
-            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            providers_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChain === selectedChain) {
-            setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: false,
+            });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);

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

@@ -1,6 +1,6 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers/SwapFormProvider';
+import type { SwapFormDirection } from '../../providers';
 import type { Token } from '../../types';
 export interface TokenListProps {
     formType: SwapFormDirection;

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.14.1";
+export declare const version = "1.16.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.14.1';
+exports.version = '1.16.0';

package/cjs/hooks/index.d.ts

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

package/cjs/hooks/index.js

@@ -21,6 +21,8 @@ __exportStar(require("./useDebouncedWatch"), exports);
 __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);
@@ -31,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,29 +8,22 @@ 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 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 [, initializeChains] = (0, chains_1.useSetChainOrder)();
+    const { data, isLoading } = (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 filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
+        initializeChains(filteredChains.map((chain) => chain.id));
+        return filteredChains;
+    }));
     const getChainById = (0, react_1.useCallback)((chainId) => {
         const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
         // if (!chain) {
@@ -38,6 +31,6 @@ const useChains = () => {
         // }
         return chain;
     }, [data]);
-    return Object.assign({ chains: data, getChainById }, other);
+    return { chains: data, getChainById, isLoading };
 };
 exports.useChains = useChains;

package/cjs/hooks/useNavigateBack.d.ts

@@ -0,0 +1,4 @@
+export declare const useNavigateBack: () => {
+    navigateBack: () => void;
+    navigate: import("react-router-dom").NavigateFunction;
+};

package/cjs/hooks/useNavigateBack.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigateBack = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const useNavigateBack = () => {
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const navigateBack = (0, react_1.useCallback)(() => {
+        if (window.history.state && window.history.state.idx > 0) {
+            navigate(-1);
+        }
+        else {
+            navigate(window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) || '/', { replace: true });
+        }
+    }, [navigate]);
+    return { navigateBack, navigate };
+};
+exports.useNavigateBack = useNavigateBack;

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;

package/cjs/hooks/useRouteExecution.js

@@ -19,16 +19,25 @@ const shallow_1 = __importDefault(require("zustand/shallow"));
 const lifi_1 = require("../config/lifi");
 const WalletProvider_1 = require("../providers/WalletProvider");
 const stores_1 = require("../stores");
+const events_1 = require("../types/events");
 const utils_1 = require("../utils");
-const useRouteExecution = (routeId) => {
+const useWidgetEvents_1 = require("./useWidgetEvents");
+const useRouteExecution = (routeId, executeInBackground) => {
     const { account, switchChain } = (0, WalletProvider_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
+    const emitter = (0, useWidgetEvents_1.useWidgetEvents)();
     const routeExecution = (0, stores_1.useRouteStore)((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.default);
     const updateCallback = (updatedRoute) => {
         const clonedUpdatedRoute = (0, utils_1.deepClone)(updatedRoute);
         console.log('Route updated.', clonedUpdatedRoute);
         updateRoute(clonedUpdatedRoute);
+        if ((0, stores_1.isRouteCompleted)(clonedUpdatedRoute)) {
+            emitter.emit(events_1.WidgetEvent.SwapCompleted);
+        }
+        if ((0, stores_1.isRouteFailed)(clonedUpdatedRoute)) {
+            emitter.emit(events_1.WidgetEvent.SwapFailed);
+        }
     };
     const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
@@ -54,16 +63,12 @@ const useRouteExecution = (routeId) => {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
+            executeInBackground,
         });
     }, {
         onMutate: () => {
             console.log('Execution started.', routeId);
-        },
-        onError: () => {
-            console.warn('Execution failed.', routeId);
-        },
-        onSuccess: (route) => {
-            console.log('Executed successfully.', routeId);
+            emitter.emit(events_1.WidgetEvent.SwapStarted);
         },
     });
     const resumeRouteMutation = (0, react_query_1.useMutation)((resumedRoute) => {
@@ -77,26 +82,21 @@ const useRouteExecution = (routeId) => {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
+            executeInBackground,
         });
     }, {
         onMutate: () => {
             console.log('Resumed to execution.', routeId);
         },
-        onError: () => {
-            console.warn('Resumed execution failed.', routeId);
-        },
-        onSuccess: (route) => {
-            console.log('Resumed execution successful.', route);
-        },
     });
     const executeRoute = (0, react_1.useCallback)(() => {
         executeRouteMutation.mutateAsync(undefined, {
             onError: () => {
-                console.warn('Real execution failed!', routeId);
+                console.warn('Execution failed!', routeId);
                 // Notification.showNotification(NotificationType.SwapExecution_ERROR);
             },
             onSuccess: (route) => {
-                console.log('Real execution successfully!', route);
+                console.log('Executed successfully!', route);
                 // Notification.showNotification(NotificationType.TRANSACTION_SUCCESSFULL);
             },
         });
@@ -104,10 +104,10 @@ const useRouteExecution = (routeId) => {
     const resumeRoute = (0, react_1.useCallback)((route) => {
         resumeRouteMutation.mutateAsync(route, {
             onError: () => {
-                console.warn('Real resumed execution failed.', routeId);
+                console.warn('Resumed execution failed.', routeId);
             },
             onSuccess: (route) => {
-                console.log('Real resumed execution successful.', route);
+                console.log('Resumed execution successful.', route);
             },
         });
     }, [resumeRouteMutation, routeId]);
@@ -123,7 +123,7 @@ const useRouteExecution = (routeId) => {
     // Resume route execution after page reload
     (0, react_1.useEffect)(() => {
         // Check if route is eligible for automatic resuming
-        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+        if ((0, stores_1.isRouteActive)(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
             account.isActive &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
@@ -135,10 +135,10 @@ const useRouteExecution = (routeId) => {
         return () => {
             var _a;
             const route = (_a = stores_1.useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
-            if (!route || !isActiveRoute(route)) {
+            if (!route || !(0, stores_1.isRouteActive)(route)) {
                 return;
             }
-            lifi_1.LiFi.moveExecutionToBackground(route);
+            lifi_1.LiFi.updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
@@ -152,12 +152,3 @@ const useRouteExecution = (routeId) => {
     };
 };
 exports.useRouteExecution = useRouteExecution;
-const isActiveRoute = (route) => {
-    if (!route) {
-        return false;
-    }
-    const allDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
-    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-    const alreadyStarted = route.steps.some((step) => step.execution);
-    return !allDone && !isFailed && alreadyStarted;
-};