@lifi/widget 2.0.0-beta.9 → 2.0.0

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.0";

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.0';

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,13 @@ 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) {
@@ -138,10 +138,10 @@ export const useSwapRoutes = ({ insurableRoute } = {}) => {
                 fromAddress: contractCallQuote.action.fromAddress,
                 toChainId: contractCallQuote.action.toChainId,
                 toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
-                toAmount: toTokenAmount,
-                toAmountMin: toTokenAmount,
+                toAmount: contractCallQuote.estimate.toAmount || toTokenAmount,
+                toAmountMin: contractCallQuote.estimate.toAmountMin || toTokenAmount,
                 toToken: toToken,
-                toAddress: toAddress,
+                toAddress: toWalletAddress,
                 gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
                 steps: [contractCallQuote],
                 insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
@@ -168,7 +168,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),

package/hooks/useTokenBalances.js

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
 import { useLiFi, useWallet } from '../providers';
-import { formatTokenAmount } from '../utils';
 import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 const defaultRefetchInterval = 32000;
@@ -17,10 +16,7 @@ export const useTokenBalances = (selectedChainId) => {
         const featuredTokenAddresses = new Set(featuredTokens?.map((token) => token.address));
         const sortFn = (a, b) => parseFloat(b.amount ?? '0') * parseFloat(b.priceUSD ?? '0') -
             parseFloat(a.amount ?? '0') * parseFloat(a.priceUSD ?? '0');
-        const formattedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances).map((token) => {
-            token.amount = formatTokenAmount(token.amount);
-            return token;
-        });
+        const formattedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances);
         const result = [
             ...formattedTokens
                 .filter((token) => token.amount !== '0' && featuredTokenAddresses.has(token.address))

package/hooks/useTokens.js

@@ -5,7 +5,9 @@ import { useChains } from './useChains';
 import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
     const lifi = useLiFi();
-    const { data, isLoading, dataUpdatedAt } = useQuery(['tokens'], () => lifi.getTokens());
+    const { data, isLoading } = useQuery(['tokens'], () => lifi.getTokens(), {
+        refetchInterval: 3600000,
+    });
     const { getChainById, isLoading: isSupportedChainsLoading } = useChains();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens: configTokens, chains: configChains } = useWidgetConfig();
@@ -19,9 +21,18 @@ export const useTokens = (selectedChainId) => {
         if (!chainAllowed) {
             return [];
         }
-        let filteredTokens = configTokens?.allow?.filter((token) => token.chainId === selectedChainId);
-        if (!filteredTokens?.length) {
-            filteredTokens = data?.tokens[selectedChainId];
+        let filteredTokens = data?.tokens[selectedChainId];
+        const includedTokens = configTokens?.include?.filter((token) => token.chainId === selectedChainId);
+        if (includedTokens?.length) {
+            filteredTokens = filteredTokens
+                ? [...includedTokens, ...filteredTokens]
+                : includedTokens;
+        }
+        const allowedTokens = configTokens?.allow
+            ?.filter((token) => token.chainId === selectedChainId)
+            .map((token) => token.address);
+        if (allowedTokens?.length) {
+            filteredTokens = filteredTokens?.filter((token) => allowedTokens.includes(token.address));
         }
         const deniedTokenAddresses = configTokens?.deny
             ?.filter((token) => token.chainId === selectedChainId)
@@ -40,15 +51,16 @@ export const useTokens = (selectedChainId) => {
         return tokens;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        isSupportedChainsLoading,
-        selectedChainId,
-        getChainById,
         configChains,
         configTokens?.allow,
         configTokens?.deny,
-        featuredTokens,
+        configTokens?.include,
+        data?.tokens,
         data,
-        dataUpdatedAt,
+        featuredTokens,
+        getChainById,
+        isSupportedChainsLoading,
+        selectedChainId,
     ]);
     return {
         tokens,