@lifi/widget 2.0.0-beta.9 → 2.0.1

package/components/TokenList/TokenNotFound.js

@@ -4,11 +4,11 @@ import { Box, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 export const TokenNotFound = ({ formType }) => {
     const { t } = useTranslation();
     const [selectedChainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType)],
+        name: [FormKeyHelper.getChainKey(formType)],
     });
     const { getChainById } = useChains();
     return (_jsxs(Box, { sx: {
@@ -18,7 +18,7 @@ export const TokenNotFound = ({ formType }) => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        }, children: [_jsx(Typography, { fontSize: 48, lineHeight: 1, children: _jsx(SearchOffIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
+        }, children: [_jsx(Typography, { fontSize: 48, lineHeight: 1, children: _jsx(SearchOffIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('info.message.emptyTokenList', {
                     chainName: getChainById(selectedChainId)?.name,
                 }) })] }));
 };

package/components/TokenList/VirtualizedTokenList.js

@@ -46,9 +46,9 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
     }
     return (_jsx(List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
+            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(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 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));
+                    item.index !== tokensLastIndex ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('main.otherTokens') })) : null }, item.key));
         }) }));
 };

package/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/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/components/TokenList/useTokenSelect.js

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

package/config/theme.js

@@ -2,8 +2,7 @@ import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { touchRippleClasses } from '@mui/material/ButtonBase';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import { common } from '@mui/material/colors';
-import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
-import { keyframes } from '@mui/system';
+import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, keyframes, lighten, } from '@mui/material/styles';
 const palette = {
     primary: {
         main: '#3F49E1',

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

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

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

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

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
+import { FormKey, isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
 import { useChainOrderStore } from '../stores';
 export const useChains = () => {
     const { chains } = useWidgetConfig();
@@ -13,14 +13,14 @@ export const useChains = () => {
         const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains));
         const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([
-            SwapFormKey.FromChain,
-            SwapFormKey.ToChain,
+            FormKey.FromChain,
+            FormKey.ToChain,
         ]);
         if (!fromChainValue) {
-            setValue(SwapFormKey.FromChain, chainOrder[0]);
+            setValue(FormKey.FromChain, chainOrder[0]);
         }
         if (!toChainValue) {
-            setValue(SwapFormKey.ToChain, chainOrder[0]);
+            setValue(FormKey.ToChain, chainOrder[0]);
         }
         return { availableChains, filteredChains };
     }, {

package/hooks/useFundsSufficiency.js

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
-import { SwapFormKey, useWallet } from '../providers';
+import { FormKey, useWallet } from '../providers';
 import { isRouteDone } from '../stores';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 import { useTokenAddressBalance } from './useTokenAddressBalance';
@@ -10,11 +10,7 @@ export const useFundsSufficiency = (route) => {
     const { account } = useWallet();
     const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
-        name: [
-            SwapFormKey.FromChain,
-            SwapFormKey.FromToken,
-            SwapFormKey.FromAmount,
-        ],
+        name: [FormKey.FromChain, FormKey.FromToken, FormKey.FromAmount],
     });
     let chainId = fromChainId;
     let tokenAddress = fromTokenAddress;

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

@@ -1,9 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { useLiFi } from '../providers';
+import { useChains } from './useChains';
 const refetchInterval = 60000;
 export const useGasRecommendation = (chainId, fromChain, fromToken) => {
     const lifi = useLiFi();
+    const { chains } = useChains();
     return 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/hooks/useGasRefuel.js

@@ -2,17 +2,17 @@ import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useChains } from '.';
-import { SwapFormKey } from '../providers';
+import { FormKey } from '../providers';
 import { useGasRecommendation } from './useGasRecommendation';
 import { useTokenBalance } from './useTokenBalance';
 export const useGasRefuel = () => {
     const { getChainById } = useChains();
     const [fromChainId, fromTokenAddress, toChainId, toAddress] = useWatch({
         name: [
-            SwapFormKey.FromChain,
-            SwapFormKey.FromToken,
-            SwapFormKey.ToChain,
-            SwapFormKey.ToAddress,
+            FormKey.FromChain,
+            FormKey.FromToken,
+            FormKey.ToChain,
+            FormKey.ToAddress,
         ],
     });
     const toChain = getChainById(toChainId);

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

@@ -4,44 +4,44 @@ import { useWidgetConfig } from '../providers';
 import { formatTokenAmount } from '../utils';
 import { useChains } from './useChains';
 export const useProcessMessage = (step, process) => {
-    const { variant } = useWidgetConfig();
+    const { subvariant } = useWidgetConfig();
     const { t } = useTranslation();
     const { getChainById } = useChains();
     if (!step || !process) {
         return {};
     }
-    return getProcessMessage(t, getChainById, step, process, variant);
+    return getProcessMessage(t, getChainById, step, process, subvariant);
 };
 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: {},
 };
@@ -58,8 +58,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
@@ -71,9 +71,9 @@ const processSubstatusMessages = {
     INVALID: {},
     NOT_FOUND: {},
 };
-export function getProcessMessage(t, getChainById, step, process, variant) {
+export 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: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
             tokenSymbol: step.action.fromToken.symbol,
             chainName: getChainById(step.action.fromChainId)?.name ?? '',
@@ -82,50 +82,50 @@ export function getProcessMessage(t, getChainById, step, process, variant) {
         let message = '';
         switch (process.error.code) {
             case 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 LifiErrorCode.BalanceError:
-                title = t(`swap.error.title.balanceIsTooLow`);
+                title = t(`error.title.balanceIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
             case LifiErrorCode.ChainSwitchError:
-                title = t(`swap.error.title.chainSwitch`);
+                title = t(`error.title.chainSwitch`);
                 message = getTransactionNotSentMessage();
                 break;
             case LifiErrorCode.GasLimitError:
-                title = t(`swap.error.title.gasLimitIsTooLow`);
+                title = t(`error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
             case 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 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 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 LifiErrorCode.TransactionUnderpriced:
-                title = t(`swap.error.title.transactionUnderpriced`);
+                title = t(`error.title.transactionUnderpriced`);
                 message = getTransactionNotSentMessage();
                 break;
             case LifiErrorCode.TransactionUnprepared:
-                title = t(`swap.error.title.transactionUnprepared`);
+                title = t(`error.title.transactionUnprepared`);
                 message = getTransactionNotSentMessage();
                 break;
             case LifiErrorCode.TransactionCanceled:
-                title = t(`swap.error.title.transactionCanceled`);
+                title = t(`error.title.transactionCanceled`);
                 message = getTransactionNotSentMessage();
                 break;
             case 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: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
                     tokenSymbol: step.action.fromToken.symbol,
                     chainName: getChainById(step.action.fromChainId)?.name ?? '',
@@ -133,18 +133,18 @@ export function getProcessMessage(t, getChainById, step, process, variant) {
                 break;
             case 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 };
 }

package/hooks/useRouteExecution.js

@@ -45,10 +45,11 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         }
         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;
     };
@@ -105,11 +106,9 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         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/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;

package/hooks/{useSwapRoutes.js → useRoutes.js}

@@ -5,13 +5,13 @@ import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedWatch, useGasRefuel, useToken } from '.';
-import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
+import { FormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
 import { useSwapOnly } from './useSwapOnly';
 const refetchTime = 60000;
-export const useSwapRoutes = ({ insurableRoute } = {}) => {
+export const useRoutes = ({ insurableRoute } = {}) => {
     const lifi = useLiFi();
-    const { variant, sdkConfig, insurance, contractTool } = useWidgetConfig();
+    const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
     const { account } = useWallet();
     const queryClient = useQueryClient();
     const swapOnly = useSwapOnly();
@@ -22,18 +22,18 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
         'enabledBridges',
         'enabledExchanges',
     ]);
-    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 320);
+    const [fromTokenAmount] = useDebouncedWatch([FormKey.FromAmount], 320);
     const [fromChainId, fromTokenAddress, toAddress, toTokenAmount, toChainId, toContractAddress, toContractCallData, toContractGasLimit, toTokenAddress,] = useWatch({
         name: [
-            SwapFormKey.FromChain,
-            SwapFormKey.FromToken,
-            SwapFormKey.ToAddress,
-            SwapFormKey.ToAmount,
-            SwapFormKey.ToChain,
-            SwapFormKey.ToContractAddress,
-            SwapFormKey.ToContractCallData,
-            SwapFormKey.ToContractGasLimit,
-            SwapFormKey.ToToken,
+            FormKey.FromChain,
+            FormKey.FromToken,
+            FormKey.ToAddress,
+            FormKey.ToAmount,
+            FormKey.ToChain,
+            FormKey.ToContractAddress,
+            FormKey.ToContractCallData,
+            FormKey.ToContractGasLimit,
+            FormKey.ToToken,
         ],
     });
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
@@ -41,7 +41,7 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
     const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } = useGasRefuel();
     const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
         (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
-    const contractCallQuoteEnabled = variant === 'nft'
+    const contractCallQuoteEnabled = subvariant === 'nft'
         ? Boolean(toContractAddress && toContractCallData && toContractGasLimit)
         : true;
     const isEnabled = !isNaN(fromChainId) &&
@@ -68,14 +68,14 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
         swapOnly ? [] : enabledBridges,
         enabledExchanges,
         routePriority,
-        variant,
+        subvariant,
         sdkConfig?.defaultRouteOptions?.allowSwitchChain,
         enabledRefuel && enabledAutoRefuel,
         gasRecommendationFromAmount,
         insurance,
         insurableRoute?.id,
     ];
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, async ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toAddress, toChainId, toTokenAddress, toTokenAmount, toContractAddress, toContractCallData, toContractGasLimit, slippage, enabledBridges, enabledExchanges, routePriority, variant, allowSwitchChain, enabledRefuel, gasRecommendationFromAmount, insurance, insurableRouteId,], signal, }) => {
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, async ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toAddress, toChainId, toTokenAddress, toTokenAmount, toContractAddress, toContractCallData, toContractGasLimit, slippage, enabledBridges, enabledExchanges, routePriority, subvariant, allowSwitchChain, enabledRefuel, gasRecommendationFromAmount, insurance, insurableRouteId,], signal, }) => {
         let toWalletAddress;
         try {
             toWalletAddress =
@@ -99,7 +99,7 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
                 .filter((includedStep) => includedStep.type === 'swap')
                 .map((includedStep) => includedStep.toolDetails.key))
             : enabledExchanges;
-        if (variant === 'nft') {
+        if (subvariant === 'nft') {
             const contractCallQuote = await lifi.getContractCallQuote({
                 fromAddress,
                 fromChain: fromChainId,
@@ -111,13 +111,11 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
                 toContractCallData,
                 toContractGasLimit,
                 allowBridges: allowedBridges,
-                // toFallbackAddress: toAddress,
+                toFallbackAddress: toWalletAddress,
                 slippage: formattedSlippage,
             }, { signal });
-            contractCallQuote.estimate.toAmount = toTokenAmount;
-            contractCallQuote.estimate.toAmountMin = toTokenAmount;
             contractCallQuote.action.toToken = toToken;
-            const customStep = variant === 'nft'
+            const customStep = subvariant === 'nft'
                 ? contractCallQuote.includedSteps?.find((step) => step.type === 'custom')
                 : undefined;
             if (customStep && contractTool) {
@@ -141,7 +139,7 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
                 toAmount: toTokenAmount,
                 toAmountMin: toTokenAmount,
                 toToken: toToken,
-                toAddress: toAddress,
+                toAddress: toWalletAddress,
                 gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
                 steps: [contractCallQuote],
                 insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
@@ -168,7 +166,7 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
                     allow: allowedExchanges,
                 },
                 order: routePriority,
-                allowSwitchChain: variant === 'refuel' ? false : allowSwitchChain,
+                allowSwitchChain: subvariant === 'refuel' ? false : allowSwitchChain,
                 insurance: insurance ? Boolean(insurableRoute) : undefined,
             },
         }, { signal });

package/hooks/useTokenBalance.js

@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useWallet } from '../providers';
-import { formatTokenAmount } from '../utils';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 const defaultRefetchInterval = 30000;
 export const useTokenBalance = (token, accountAddress) => {
@@ -26,8 +25,8 @@ export const useTokenBalance = (token, accountAddress) => {
             throw Error('Could not get tokens balance.');
         }
         const cachedTokenAmount = queryClient.getQueryData(tokenBalanceQueryKey);
-        const formattedAmount = formatTokenAmount(tokenBalances[0].amount);
-        if (cachedTokenAmount?.amount !== formattedAmount) {
+        const tokenAmount = tokenBalances[0].amount;
+        if (cachedTokenAmount?.amount !== tokenAmount) {
             queryClient.setQueryDefaults(tokenBalanceQueryKey, {
                 refetchInterval: defaultRefetchInterval,
                 staleTime: defaultRefetchInterval,
@@ -39,14 +38,14 @@ export const useTokenBalance = (token, accountAddress) => {
                 const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
                 clonedData[index] = {
                     ...clonedData[index],
-                    amount: formattedAmount,
+                    amount: tokenAmount,
                 };
                 return clonedData;
             }
         });
         return {
             ...tokenBalances[0],
-            amount: formattedAmount,
+            amount: tokenAmount,
         };
     }, {
         enabled: Boolean(walletAddress && token),