@lifi/widget 2.0.0-beta.9 → 2.0.1

package/cjs/components/TokenList/TokenList.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = exports.ListItem = exports.ListItemButton = void 0;
+exports.IconButton = exports.ListItem = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const ListItemText_1 = require("@mui/material/ListItemText");
@@ -23,28 +23,31 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${ListItemText_1.listItemTextClasses.primary}`]: {
+        height: 22,
+    },
     [`& .${ListItemText_1.listItemTextClasses.primary}, & .${ListItemText_1.listItemTextClasses.secondary}`]: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
     },
 }));
-exports.LinkButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
     lineHeight: 1,
     fontSize: '0.75rem',
     fontWeight: 400,
-    padding: theme.spacing(0.375, 0.75),
+    padding: theme.spacing(0.375, 0.375),
+    marginLeft: theme.spacing(0.25),
     color: 'inherit',
     backgroundColor: 'unset',
+    minWidth: 'unset',
+    borderRadius: '50%',
     '&:hover': {
         backgroundColor: theme.palette.mode === 'light'
             ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
             : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
     },
-    [`.${material_1.buttonClasses.endIcon}`]: {
-        marginLeft: theme.spacing(0.25),
-    },
-    [`.${material_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
-        fontSize: '0.75rem',
+    svg: {
+        fontSize: '0.875rem',
     },
 }));

package/cjs/components/TokenList/TokenListItem.js

@@ -30,18 +30,14 @@ const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoad
             setShowAddress(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondaryTypographyProps: {
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol?.[0] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondaryTypographyProps: {
                     component: 'div',
-                    sx: {
-                        overflow: 'auto',
-                        marginLeft: -0.75,
-                    },
-                }, secondary: (0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", height: 18, ref: container, children: [(0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "down", in: !showAddress, container: container.current, style: {
+                }, secondary: (0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", height: 20, ref: container, children: [(0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "down", in: !showAddress, container: container.current, style: {
                                 position: 'absolute',
-                            }, appear: false, children: (0, jsx_runtime_1.jsx)(material_1.Box, { pl: 0.75, children: token.name }) }), (0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "up", in: showAddress, container: container.current, style: {
+                            }, appear: false, children: (0, jsx_runtime_1.jsx)(material_1.Box, { pt: 0.25, children: token.name }) }), (0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "up", in: showAddress, container: container.current, style: {
                                 position: 'absolute',
-                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(TokenList_style_1.LinkButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), endIcon: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}), children: (0, utils_1.shortenAddress)(token.address) }) })] }) }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
-                            value: token.amount,
+                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", pt: 0.125, children: (0, utils_1.shortenAddress)(token.address) }), (0, jsx_runtime_1.jsx)(TokenList_style_1.IconButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}) })] }) })] }) }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+                            value: (0, utils_1.formatTokenAmount)(token.amount),
                         }) })) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,
                         }) })) : null] }))) : null] }));

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

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

package/cjs/components/TokenList/TokenNotFound.js

@@ -11,7 +11,7 @@ const providers_1 = require("../../providers");
 const TokenNotFound = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+        name: [providers_1.FormKeyHelper.getChainKey(formType)],
     });
     const { getChainById } = (0, hooks_1.useChains)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
@@ -21,7 +21,7 @@ const TokenNotFound = ({ formType }) => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, lineHeight: 1, children: (0, jsx_runtime_1.jsx)(SearchOff_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, lineHeight: 1, children: (0, jsx_runtime_1.jsx)(SearchOff_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('info.message.emptyTokenList', {
                     chainName: getChainById(selectedChainId)?.name,
                 }) })] }));
 };

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -49,10 +49,10 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
     }
     return ((0, jsx_runtime_1.jsx)(material_1.List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
+            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('main.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
                     token.featured &&
                     item.index === featuredTokensLastIndex &&
-                    item.index !== tokensLastIndex ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));
+                    item.index !== tokensLastIndex ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('main.otherTokens') })) : null }, item.key));
         }) }));
 };
 exports.VirtualizedTokenList = VirtualizedTokenList;

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

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

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

@@ -1,2 +1,2 @@
-import type { SwapFormType } from '../../providers';
-export declare const useTokenSelect: (formType: SwapFormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;
+import type { FormType } from '../../providers';
+export declare const useTokenSelect: (formType: FormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;

package/cjs/components/TokenList/useTokenSelect.js

@@ -5,32 +5,34 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../../providers");
 const useTokenSelect = (formType, onClick) => {
-    const tokenKey = providers_1.SwapFormKeyHelper.getTokenKey(formType);
+    const tokenKey = providers_1.FormKeyHelper.getTokenKey(formType);
     const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: tokenKey });
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
     return (0, react_1.useCallback)((tokenAddress, chainId) => {
         onChange(tokenAddress);
         onBlur();
-        const selectedChainId = chainId ?? getValues(providers_1.SwapFormKeyHelper.getChainKey(formType));
+        const selectedChainId = chainId ?? getValues(providers_1.FormKeyHelper.getChainKey(formType));
         // Set chain again to trigger URL builder update
-        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+        setValue(providers_1.FormKeyHelper.getChainKey(formType), selectedChainId, {
             shouldDirty: true,
             shouldTouch: true,
         });
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChainId] = getValues([
-            providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            providers_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
+            providers_1.FormKeyHelper.getTokenKey(oppositeFormType),
+            providers_1.FormKeyHelper.getChainKey(oppositeFormType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChainId === selectedChainId) {
-            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+            selectedOppositeChainId === selectedChainId &&
+            subvariant !== 'nft') {
+            setValue(providers_1.FormKeyHelper.getTokenKey(oppositeFormType), '', {
                 shouldDirty: true,
                 shouldTouch: true,
             });
         }
         onClick?.();
-    }, [formType, getValues, onBlur, onChange, onClick, setValue]);
+    }, [formType, getValues, onBlur, onChange, onClick, setValue, subvariant]);
 };
 exports.useTokenSelect = useTokenSelect;

package/cjs/config/theme.js

@@ -6,7 +6,6 @@ const ButtonBase_1 = require("@mui/material/ButtonBase");
 const DialogActions_1 = require("@mui/material/DialogActions");
 const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
-const system_1 = require("@mui/system");
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -46,7 +45,7 @@ const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 8,
 };
-const enterKeyframe = (0, system_1.keyframes) `
+const enterKeyframe = (0, styles_1.keyframes) `
   0% {
     transform: scale(0);
     opacity: 0.05;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.9";
+export declare const version = "2.0.1";

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 = '2.0.0-beta.9';
+exports.version = '2.0.1';

package/cjs/hooks/index.d.ts

@@ -14,9 +14,9 @@ export * from './useInitializer';
 export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
+export * from './useRoutes';
 export * from './useScrollableContainer';
 export * from './useSwapOnly';
-export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';

package/cjs/hooks/index.js

@@ -30,9 +30,9 @@ __exportStar(require("./useInitializer"), exports);
 __exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useProcessMessage"), exports);
 __exportStar(require("./useRouteExecution"), exports);
+__exportStar(require("./useRoutes"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
 __exportStar(require("./useSwapOnly"), exports);
-__exportStar(require("./useSwapRoutes"), exports);
 __exportStar(require("./useToken"), exports);
 __exportStar(require("./useTokenAddressBalance"), exports);
 __exportStar(require("./useTokenBalance"), exports);

package/cjs/hooks/useChains.js

@@ -16,14 +16,14 @@ const useChains = () => {
         const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains));
         const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([
-            providers_1.SwapFormKey.FromChain,
-            providers_1.SwapFormKey.ToChain,
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.ToChain,
         ]);
         if (!fromChainValue) {
-            setValue(providers_1.SwapFormKey.FromChain, chainOrder[0]);
+            setValue(providers_1.FormKey.FromChain, chainOrder[0]);
         }
         if (!toChainValue) {
-            setValue(providers_1.SwapFormKey.ToChain, chainOrder[0]);
+            setValue(providers_1.FormKey.ToChain, chainOrder[0]);
         }
         return { availableChains, filteredChains };
     }, {

package/cjs/hooks/useFundsSufficiency.js

@@ -13,11 +13,7 @@ const useFundsSufficiency = (route) => {
     const { account } = (0, providers_1.useWallet)();
     const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = (0, react_hook_form_1.useWatch)({
-        name: [
-            providers_1.SwapFormKey.FromChain,
-            providers_1.SwapFormKey.FromToken,
-            providers_1.SwapFormKey.FromAmount,
-        ],
+        name: [providers_1.FormKey.FromChain, providers_1.FormKey.FromToken, providers_1.FormKey.FromAmount],
     });
     let chainId = fromChainId;
     let tokenAddress = fromTokenAddress;

package/cjs/hooks/useGasRecommendation.d.ts

@@ -1,2 +1,2 @@
 import type { ChainId } from '@lifi/sdk';
-export declare const useGasRecommendation: (chainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse, unknown>;
+export declare const useGasRecommendation: (chainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse | null, unknown>;

package/cjs/hooks/useGasRecommendation.js

@@ -3,10 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGasRecommendation = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const providers_1 = require("../providers");
+const useChains_1 = require("./useChains");
 const refetchInterval = 60000;
 const useGasRecommendation = (chainId, fromChain, fromToken) => {
     const lifi = (0, providers_1.useLiFi)();
+    const { chains } = (0, useChains_1.useChains)();
     return (0, react_query_1.useQuery)(['gas-recommendation', chainId, fromChain, fromToken], async ({ queryKey: [_, chainId, fromChain, fromToken] }) => {
+        if (!chains?.some((chain) => chain.id === chainId)) {
+            return null;
+        }
         const gasRecommendation = await lifi.getGasRecommendation({
             chainId: chainId,
             fromChain: fromChain,

package/cjs/hooks/useGasRefuel.js

@@ -12,10 +12,10 @@ const useGasRefuel = () => {
     const { getChainById } = (0, _1.useChains)();
     const [fromChainId, fromTokenAddress, toChainId, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKey.FromChain,
-            providers_1.SwapFormKey.FromToken,
-            providers_1.SwapFormKey.ToChain,
-            providers_1.SwapFormKey.ToAddress,
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.FromToken,
+            providers_1.FormKey.ToChain,
+            providers_1.FormKey.ToAddress,
         ],
     });
     const toChain = getChainById(toChainId);

package/cjs/hooks/useProcessMessage.d.ts

@@ -1,11 +1,11 @@
 import type { EVMChain, LifiStep, Process } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
-import type { WidgetVariant } from '../types';
+import type { WidgetSubvariant } from '../types';
 export declare const useProcessMessage: (step?: LifiStep, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process, variant?: WidgetVariant): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process, subvariant?: WidgetSubvariant): {
     title?: string;
     message?: string;
 };

package/cjs/hooks/useProcessMessage.js

@@ -7,45 +7,45 @@ const providers_1 = require("../providers");
 const utils_1 = require("../utils");
 const useChains_1 = require("./useChains");
 const useProcessMessage = (step, process) => {
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, useChains_1.useChains)();
     if (!step || !process) {
         return {};
     }
-    return getProcessMessage(t, getChainById, step, process, variant);
+    return getProcessMessage(t, getChainById, step, process, subvariant);
 };
 exports.useProcessMessage = useProcessMessage;
 const processStatusMessages = {
     TOKEN_ALLOWANCE: {
-        STARTED: (t) => t(`swap.process.tokenAllowance.started`),
-        ACTION_REQUIRED: (t) => t(`swap.process.tokenAllowance.pending`),
-        PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
-        DONE: (t) => t(`swap.process.tokenAllowance.done`),
+        STARTED: (t) => t(`main.process.tokenAllowance.started`),
+        ACTION_REQUIRED: (t) => t(`main.process.tokenAllowance.pending`),
+        PENDING: (t) => t(`main.process.tokenAllowance.pending`),
+        DONE: (t) => t(`main.process.tokenAllowance.done`),
     },
     SWITCH_CHAIN: {
-        ACTION_REQUIRED: (t) => t(`swap.process.switchChain.actionRequired`),
-        DONE: (t) => t(`swap.process.switchChain.done`),
+        ACTION_REQUIRED: (t) => t(`main.process.switchChain.actionRequired`),
+        DONE: (t) => t(`main.process.switchChain.done`),
     },
     SWAP: {
-        STARTED: (t) => t(`swap.process.swap.started`),
-        ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
-        PENDING: (t) => t(`swap.process.swap.pending`),
-        DONE: (t, variant) => variant === 'nft'
-            ? t(`swap.process.nft.done`)
-            : t(`swap.process.swap.done`),
+        STARTED: (t) => t(`main.process.swap.started`),
+        ACTION_REQUIRED: (t) => t(`main.process.swap.actionRequired`),
+        PENDING: (t) => t(`main.process.swap.pending`),
+        DONE: (t, subvariant) => subvariant === 'nft'
+            ? t(`main.process.nft.done`)
+            : t(`main.process.swap.done`),
     },
     CROSS_CHAIN: {
-        STARTED: (t) => t(`swap.process.crossChain.started`),
-        ACTION_REQUIRED: (t) => t(`swap.process.crossChain.actionRequired`),
-        PENDING: (t) => t(`swap.process.crossChain.pending`),
-        DONE: (t) => t(`swap.process.crossChain.done`),
+        STARTED: (t) => t(`main.process.crossChain.started`),
+        ACTION_REQUIRED: (t) => t(`main.process.crossChain.actionRequired`),
+        PENDING: (t) => t(`main.process.crossChain.pending`),
+        DONE: (t) => t(`main.process.crossChain.done`),
     },
     RECEIVING_CHAIN: {
-        PENDING: (t) => t(`swap.process.receivingChain.pending`),
-        DONE: (t, variant) => variant === 'nft'
-            ? t(`swap.process.nft.done`)
-            : t(`swap.process.receivingChain.done`),
+        PENDING: (t) => t(`main.process.receivingChain.pending`),
+        DONE: (t, subvariant) => subvariant === 'nft'
+            ? t(`main.process.nft.done`)
+            : t(`main.process.receivingChain.done`),
     },
     TRANSACTION: {},
 };
@@ -62,8 +62,8 @@ const processSubstatusMessages = {
     },
     DONE: {
         // COMPLETED: 'The transfer is complete.',
-        PARTIAL: (t) => t(`swap.process.receivingChain.partial`),
-        REFUNDED: (t) => t(`swap.process.receivingChain.partial`),
+        PARTIAL: (t) => t(`main.process.receivingChain.partial`),
+        REFUNDED: (t) => t(`main.process.receivingChain.partial`),
     },
     FAILED: {
     // TODO: should be moved to failed status
@@ -75,9 +75,9 @@ const processSubstatusMessages = {
     INVALID: {},
     NOT_FOUND: {},
 };
-function getProcessMessage(t, getChainById, step, process, variant) {
+function getProcessMessage(t, getChainById, step, process, subvariant) {
     if (process.error && process.status === 'FAILED') {
-        const getTransactionNotSentMessage = () => t(`swap.error.message.transactionNotSent`, {
+        const getTransactionNotSentMessage = () => t(`error.message.transactionNotSent`, {
             amount: (0, utils_1.formatTokenAmount)(step.action.fromAmount, step.action.fromToken.decimals),
             tokenSymbol: step.action.fromToken.symbol,
             chainName: getChainById(step.action.fromChainId)?.name ?? '',
@@ -86,50 +86,50 @@ function getProcessMessage(t, getChainById, step, process, variant) {
         let message = '';
         switch (process.error.code) {
             case sdk_1.LifiErrorCode.AllowanceRequired:
-                title = t(`swap.error.title.allowanceRequired`);
-                message = t(`swap.error.message.allowanceRequired`, {
+                title = t(`error.title.allowanceRequired`);
+                message = t(`error.message.allowanceRequired`, {
                     tokenSymbol: step.action.fromToken.symbol,
                 });
                 break;
             case sdk_1.LifiErrorCode.BalanceError:
-                title = t(`swap.error.title.balanceIsTooLow`);
+                title = t(`error.title.balanceIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
             case sdk_1.LifiErrorCode.ChainSwitchError:
-                title = t(`swap.error.title.chainSwitch`);
+                title = t(`error.title.chainSwitch`);
                 message = getTransactionNotSentMessage();
                 break;
             case sdk_1.LifiErrorCode.GasLimitError:
-                title = t(`swap.error.title.gasLimitIsTooLow`);
+                title = t(`error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
             case sdk_1.LifiErrorCode.InsufficientFunds:
-                title = t(`swap.error.title.insufficientFunds`);
-                message = `${t(`swap.error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
+                title = t(`error.title.insufficientFunds`);
+                message = `${t(`error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
                 break;
             case sdk_1.LifiErrorCode.SlippageError:
-                title = t(`swap.error.title.slippageNotMet`);
-                message = t(`swap.error.message.slippageThreshold`);
+                title = t(`error.title.slippageNotMet`);
+                message = t(`error.message.slippageThreshold`);
                 break;
             case sdk_1.LifiErrorCode.TransactionFailed:
-                title = t(`swap.error.title.transactionFailed`);
-                message = t(`swap.error.message.transactionFailed`);
+                title = t(`error.title.transactionFailed`);
+                message = t(`error.message.transactionFailed`);
                 break;
             case sdk_1.LifiErrorCode.TransactionUnderpriced:
-                title = t(`swap.error.title.transactionUnderpriced`);
+                title = t(`error.title.transactionUnderpriced`);
                 message = getTransactionNotSentMessage();
                 break;
             case sdk_1.LifiErrorCode.TransactionUnprepared:
-                title = t(`swap.error.title.transactionUnprepared`);
+                title = t(`error.title.transactionUnprepared`);
                 message = getTransactionNotSentMessage();
                 break;
             case sdk_1.LifiErrorCode.TransactionCanceled:
-                title = t(`swap.error.title.transactionCanceled`);
+                title = t(`error.title.transactionCanceled`);
                 message = getTransactionNotSentMessage();
                 break;
             case sdk_1.LifiErrorCode.TransactionRejected:
-                title = t(`swap.error.title.transactionRejected`);
-                message = t(`swap.error.message.transactionRejected`, {
+                title = t(`error.title.transactionRejected`);
+                message = t(`error.message.transactionRejected`, {
                     amount: (0, utils_1.formatTokenAmount)(step.action.fromAmount, step.action.fromToken.decimals),
                     tokenSymbol: step.action.fromToken.symbol,
                     chainName: getChainById(step.action.fromChainId)?.name ?? '',
@@ -137,19 +137,19 @@ function getProcessMessage(t, getChainById, step, process, variant) {
                 break;
             case sdk_1.LifiErrorCode.ProviderUnavailable:
             default:
-                title = t(`swap.error.title.unknown`);
+                title = t(`error.title.unknown`);
                 if (process.txLink) {
-                    message = t(`swap.error.message.transactionFailed`);
+                    message = t(`error.message.transactionFailed`);
                 }
                 else {
-                    message = t(`swap.error.message.unknown`);
+                    message = t(`error.message.unknown`);
                 }
                 break;
         }
         return { title, message };
     }
     const title = processSubstatusMessages[process.status]?.[process.substatus]?.(t) ??
-        processStatusMessages[process.type]?.[process.status]?.(t, variant);
+        processStatusMessages[process.type]?.[process.status]?.(t, subvariant);
     return { title };
 }
 exports.getProcessMessage = getProcessMessage;

package/cjs/hooks/useRouteExecution.js

@@ -48,10 +48,11 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
         }
         const currentChainId = await account.signer.getChainId();
         if (currentChainId !== requiredChainId) {
-            const switched = await switchChain(requiredChainId);
-            if (!switched) {
+            const signer = await switchChain(requiredChainId);
+            if (!signer) {
                 throw new Error('Chain was not switched.');
             }
+            return signer;
         }
         return account.signer;
     };
@@ -108,11 +109,9 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
         executeRouteMutation.mutateAsync(undefined, {
             onError: (error) => {
                 console.warn('Execution failed!', routeId, error);
-                // Notification.showNotification(NotificationType.SwapExecution_ERROR);
             },
             onSuccess: (route) => {
                 console.log('Executed successfully!', route);
-                // Notification.showNotification(NotificationType.TRANSACTION_SUCCESSFULL);
             },
         });
     }, [executeRouteMutation, routeId]);

package/cjs/hooks/{useSwapRoutes.d.ts → useRoutes.d.ts}

@@ -1,8 +1,8 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
-interface SwapRoutesProps {
+interface RoutesProps {
     insurableRoute?: Route;
 }
-export declare const useSwapRoutes: ({ insurableRoute }?: SwapRoutesProps) => {
+export declare const useRoutes: ({ insurableRoute }?: RoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;