@lifi/widget 1.32.8 → 2.0.0-alpha.1

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.8";
+export declare const version = "2.0.0-alpha.1";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.8';
+export const version = '2.0.0-alpha.1';

package/hooks/index.d.ts

@@ -5,7 +5,11 @@ export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
+export * from './useFundsSufficiency';
+export * from './useGasRecommendation';
+export * from './useGasRefuel';
 export * from './useGasSufficiency';
+export * from './useGetTokenBalancesWithRetry';
 export * from './useInitializer';
 export * from './useNavigateBack';
 export * from './useProcessMessage';

package/hooks/index.js

@@ -5,7 +5,11 @@ export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
+export * from './useFundsSufficiency';
+export * from './useGasRecommendation';
+export * from './useGasRefuel';
 export * from './useGasSufficiency';
+export * from './useGetTokenBalancesWithRetry';
 export * from './useInitializer';
 export * from './useNavigateBack';
 export * from './useProcessMessage';

package/hooks/useChains.js

@@ -4,13 +4,13 @@ import { useFormContext } from 'react-hook-form';
 import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
 import { useChainOrderStore } from '../stores';
 export const useChains = () => {
-    const { disabledChains, chains } = useWidgetConfig();
+    const { chains } = useWidgetConfig();
     const lifi = useLiFi();
     const { getValues, setValue } = useFormContext();
     const initializeChains = useChainOrderStore((state) => state.initializeChains);
     const { data, isLoading } = useQuery(['chains'], async () => {
         const availableChains = await lifi.getChains();
-        const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains, disabledChains));
+        const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains));
         const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([
             SwapFormKey.FromChain,

package/hooks/useFeaturedTokens.d.ts

@@ -1 +1 @@
-export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[];
+export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[] | undefined;

package/hooks/useFeaturedTokens.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useWidgetConfig } from '../providers';
 export const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens, tokens } = useWidgetConfig();
-    return useMemo(() => [...(tokens?.featured ?? []), ...(featuredTokens ?? [])].filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId, tokens?.featured]);
+    const { tokens } = useWidgetConfig();
+    return useMemo(() => tokens?.featured?.filter((token) => token.chainId === selectedChainId), [selectedChainId, tokens?.featured]);
 };

package/hooks/useFundsSufficiency.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from '@lifi/sdk';
+export declare const useFundsSufficiency: (route?: Route) => {
+    insufficientFunds: boolean | undefined;
+    isInitialLoading: boolean;
+};

package/hooks/useFundsSufficiency.js

@@ -0,0 +1,69 @@
+import { useQuery } from '@tanstack/react-query';
+import Big from 'big.js';
+import { useWatch } from 'react-hook-form';
+import { SwapFormKey, useWallet } from '../providers';
+import { isRouteDone } from '../stores';
+import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
+import { useTokenAddressBalance } from './useTokenAddressBalance';
+const refetchInterval = 30000;
+export const useFundsSufficiency = (route) => {
+    const { account, provider } = useWallet();
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
+        name: [
+            SwapFormKey.FromChain,
+            SwapFormKey.FromToken,
+            SwapFormKey.FromAmount,
+        ],
+    });
+    let chainId = fromChainId;
+    let tokenAddress = fromTokenAddress;
+    if (route) {
+        chainId = route.fromToken.chainId;
+        tokenAddress = route.fromToken.address;
+    }
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    const { data: insufficientFunds, isInitialLoading } = useQuery([
+        'funds-sufficiency-check',
+        account.address,
+        chainId,
+        tokenAddress,
+        route?.id ?? fromAmount,
+    ], async () => {
+        if (!account.address || !token) {
+            return;
+        }
+        let currentTokenBalance = Big(token?.amount || 0);
+        if (!route || isRouteDone(route)) {
+            const insufficientFunds = currentTokenBalance.lt(Big(fromAmount || 0));
+            return insufficientFunds;
+        }
+        const currentAction = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]?.action;
+        if (token.chainId === currentAction.fromToken.chainId &&
+            token.address === currentAction.fromToken.address &&
+            currentTokenBalance.gt(0)) {
+            const insufficientFunds = Big(route.fromAmount)
+                .div(10 ** route.fromToken.decimals)
+                .gt(currentTokenBalance);
+            return insufficientFunds;
+        }
+        const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+            currentAction.fromToken,
+        ]);
+        currentTokenBalance = Big(tokenBalances?.[0]?.amount || 0);
+        const insufficientFunds = Big(currentAction.fromAmount)
+            .div(10 ** currentAction.fromToken.decimals)
+            .gt(currentTokenBalance);
+        return insufficientFunds;
+    }, {
+        enabled: Boolean(account.address && token && !isLoading),
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+        keepPreviousData: true,
+    });
+    return {
+        insufficientFunds,
+        isInitialLoading,
+    };
+};

package/hooks/useGasRecommendation.d.ts

@@ -0,0 +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>;

package/hooks/useGasRecommendation.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { useLiFi } from '../providers';
+const refetchInterval = 60000;
+export const useGasRecommendation = (chainId, fromChain, fromToken) => {
+    const lifi = useLiFi();
+    return useQuery(['gas-recommendation', chainId, fromChain, fromToken], async ({ queryKey: [_, chainId, fromChain, fromToken] }) => {
+        const gasRecommendation = await lifi.getGasRecommendation({
+            chainId: chainId,
+            fromChain: fromChain,
+            fromToken: fromToken,
+        });
+        return gasRecommendation;
+    }, {
+        enabled: Boolean(chainId),
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
+};

package/hooks/useGasRefuel.d.ts

@@ -0,0 +1,7 @@
+export declare const useGasRefuel: () => {
+    enabled: boolean;
+    availble: boolean | undefined;
+    isLoading: boolean;
+    chain: import("@lifi/types").ExtendedChain | undefined;
+    gasRecommendation: import("@lifi/types").GasRecommendationResponse | undefined;
+};

package/hooks/useGasRefuel.js

@@ -0,0 +1,57 @@
+import Big from 'big.js';
+import { useMemo } from 'react';
+import { useWatch } from 'react-hook-form';
+import { useChains } from '.';
+import { SwapFormKey } from '../providers';
+import { useGasRecommendation } from './useGasRecommendation';
+import { useTokenBalance } from './useTokenBalance';
+export const useGasRefuel = () => {
+    const { getChainById } = useChains();
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = useWatch({
+        name: [
+            SwapFormKey.FromChain,
+            SwapFormKey.FromToken,
+            SwapFormKey.ToChain,
+            SwapFormKey.ToToken,
+            SwapFormKey.ToAddress,
+        ],
+    });
+    const toChain = getChainById(toChainId);
+    const { token: nativeToken } = useTokenBalance(toChainId && toChain?.nativeToken, toAddress);
+    const { data: gasRecommendation, isLoading } = useGasRecommendation(toChainId, fromChainId, fromTokenAddress);
+    const enabled = useMemo(() => {
+        if (
+        // We don't allow same chain refuel.
+        // If a user runs out of gas, he can't send a source chain transaction.
+        fromChainId === toChainId ||
+            // We don't want to apply auto refuel when swapping to native tokens
+            toChain?.nativeToken.address === toTokenAddress ||
+            !gasRecommendation?.available ||
+            !gasRecommendation.recommended ||
+            !nativeToken) {
+            return false;
+        }
+        const tokenBalance = Big(nativeToken.amount ?? 0);
+        // check if the user balance < 50% of the recommended amount
+        const recommendedAmount = Big(gasRecommendation.recommended.amount)
+            .div(10 ** gasRecommendation.recommended.token.decimals)
+            .div(2);
+        const insufficientGas = tokenBalance.lt(recommendedAmount);
+        return insufficientGas;
+    }, [
+        fromChainId,
+        gasRecommendation?.available,
+        gasRecommendation?.recommended,
+        nativeToken,
+        toChain?.nativeToken.address,
+        toChainId,
+        toTokenAddress,
+    ]);
+    return {
+        enabled: enabled,
+        availble: gasRecommendation?.available,
+        isLoading: isLoading,
+        chain: toChain,
+        gasRecommendation,
+    };
+};

package/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,6 @@ export interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[] | null | undefined;
-    insufficientFunds: boolean | null | undefined;
-    isLoading: boolean;
+    insufficientGas: GasSufficiency[] | undefined;
+    isInitialLoading: boolean;
 };

package/hooks/useGasSufficiency.js

@@ -1,17 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useChains } from '.';
+import { useChains, useGetTokenBalancesWithRetry } from '.';
 import { useWallet } from '../providers';
-import { isRouteDone } from '../stores';
-import { useTokenBalance } from './useTokenBalance';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
-    const { account } = useWallet();
+    const { account, provider } = useWallet();
     const { getChainById } = useChains();
-    const { token: fromToken, getTokenBalancesWithRetry } = useTokenBalance(route?.fromToken);
-    const { data: insufficientGas, isInitialLoading: insufficientGasLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const { data: insufficientGas, isInitialLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
-            return null;
+            return;
         }
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
@@ -39,7 +37,7 @@ export const useGasSufficiency = (route) => {
         }
         const tokenBalances = await getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!tokenBalances?.length) {
-            return null;
+            return;
         }
         [route.fromChainId, route.toChainId].forEach((chainId) => {
             if (gasCosts[chainId]) {
@@ -68,37 +66,8 @@ export const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
-    const { data: insufficientFunds, isInitialLoading: insufficientFundsLoading, } = useQuery(['funds-sufficiency-check', account.address, route?.id], async () => {
-        if (!account.address || !fromToken || !route || isRouteDone(route)) {
-            return null;
-        }
-        let currentTokenBalance = Big(fromToken?.amount ?? 0);
-        const currentAction = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]?.action;
-        if (fromToken.chainId === currentAction.fromToken.chainId &&
-            fromToken.address === currentAction.fromToken.address &&
-            currentTokenBalance.gt(0)) {
-            const insufficientFunds = Big(route.fromAmount)
-                .div(10 ** route.fromToken.decimals)
-                .gt(currentTokenBalance);
-            return insufficientFunds;
-        }
-        const tokenBalances = await getTokenBalancesWithRetry(account.address, [
-            currentAction.fromToken,
-        ]);
-        currentTokenBalance = Big(tokenBalances?.[0]?.amount ?? 0);
-        const insufficientFunds = Big(currentAction.fromAmount)
-            .div(10 ** currentAction.fromToken.decimals)
-            .gt(currentTokenBalance);
-        return insufficientFunds;
-    }, {
-        enabled: Boolean(account.address && route && fromToken),
-        refetchInterval,
-        staleTime: refetchInterval,
-        cacheTime: refetchInterval,
-    });
     return {
         insufficientGas,
-        insufficientFunds,
-        isLoading: insufficientGasLoading || insufficientFundsLoading,
+        isInitialLoading,
     };
 };

package/hooks/useGetTokenBalancesWithRetry.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@ethersproject/providers';
+import type { Token, TokenAmount } from '@lifi/sdk';
+export declare const useGetTokenBalancesWithRetry: (provider?: Provider) => (accountAddress: string, tokens: Token[], depth?: number) => Promise<TokenAmount[] | undefined>;

package/hooks/useGetTokenBalancesWithRetry.js

@@ -0,0 +1,29 @@
+import { isAddress } from '@ethersproject/address';
+import { useCallback } from 'react';
+import { useLiFi } from '../providers';
+export const useGetTokenBalancesWithRetry = (provider) => {
+    const lifi = useLiFi();
+    const getTokenBalancesWithRetry = useCallback(async (accountAddress, tokens, depth = 0) => {
+        try {
+            const walletAddress = isAddress(accountAddress)
+                ? accountAddress
+                : await provider?.resolveName(accountAddress);
+            const tokenBalances = await lifi.getTokenBalances(walletAddress, tokens);
+            if (!tokenBalances.every((token) => token.blockNumber)) {
+                if (depth > 10) {
+                    console.warn('Token balance backoff depth exceeded.');
+                    return undefined;
+                }
+                await new Promise((resolve) => {
+                    setTimeout(resolve, 1.5 ** depth * 100);
+                });
+                return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+            }
+            return tokenBalances;
+        }
+        catch (error) {
+            //
+        }
+    }, [lifi, provider]);
+    return getTokenBalancesWithRetry;
+};

package/hooks/useProcessMessage.d.ts

@@ -1,10 +1,10 @@
-import type { EVMChain, Process, Step } from '@lifi/sdk';
+import type { EVMChain, LifiStep, Process } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
-export declare const useProcessMessage: (step?: Step, process?: Process) => {
+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: Step, process: Process): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process): {
     title?: string;
     message?: string;
 };

package/hooks/useSwapRoutes.d.ts

@@ -1,10 +1,15 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
-export declare const useSwapRoutes: () => {
+interface SwapRoutesProps {
+    onSettled?: (data?: RoutesResponse) => void;
+    insurableRoute?: Route;
+}
+export declare const useSwapRoutes: ({ onSettled, insurableRoute, }?: SwapRoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, any>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, unknown>>;
 };
+export {};

package/hooks/useSwapRoutes.js

@@ -4,18 +4,19 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
-import { useDebouncedWatch, useToken } from '.';
+import { useDebouncedWatch, useGasRefuel, useToken } from '.';
 import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
 const refetchTime = 60000;
-export const useSwapRoutes = () => {
+export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     const lifi = useLiFi();
-    const { variant, sdkConfig } = useWidgetConfig();
+    const { variant, sdkConfig, insurance } = useWidgetConfig();
     const { account, provider } = useWallet();
     const queryClient = useQueryClient();
-    const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
+    const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = useSettings([
         'slippage',
         'routePriority',
+        'enabledAutoRefuel',
         'enabledBridges',
         'enabledExchanges',
     ]);
@@ -35,6 +36,7 @@ export const useSwapRoutes = () => {
     });
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
     const { token: toToken } = useToken(toChainId, toTokenAddress);
+    const { enabled: enabledRefuel, gasRecommendation } = useGasRefuel();
     const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
         (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
     const contractCallQuoteEnabled = variant === 'nft'
@@ -66,12 +68,12 @@ export const useSwapRoutes = () => {
         routePriority,
         variant,
         sdkConfig?.defaultRouteOptions?.allowSwitchChain,
+        enabledRefuel && enabledAutoRefuel,
+        gasRecommendation?.fromAmount,
+        insurance,
+        insurableRoute?.id,
     ];
-    const previousDataUpdatedAt = queryClient.getQueryState(queryKey)?.dataUpdatedAt;
-    const refetchInterval = previousDataUpdatedAt
-        ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
-        : refetchTime;
-    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,], 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, variant, allowSwitchChain, enabledRefuel, gasRecommendationFromAmount, insurance, insurableRouteId,], signal, }) => {
         let toWalletAddress;
         try {
             toWalletAddress =
@@ -117,9 +119,20 @@ export const useSwapRoutes = () => {
                 toAddress: toAddress,
                 gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
                 steps: [contractCallQuote],
+                insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
             };
             return { routes: [route] };
         }
+        const allowedBridges = insurableRoute
+            ? insurableRoute.steps.flatMap((step) => step.includedSteps
+                .filter((includedStep) => includedStep.type === 'cross')
+                .map((includedStep) => includedStep.toolDetails.key))
+            : enabledBridges;
+        const allowedExchanges = insurableRoute
+            ? insurableRoute.steps.flatMap((step) => step.includedSteps
+                .filter((includedStep) => includedStep.type === 'swap')
+                .map((includedStep) => includedStep.toolDetails.key))
+            : enabledExchanges;
         return lifi.getRoutes({
             fromChainId,
             fromAmount,
@@ -128,23 +141,29 @@ export const useSwapRoutes = () => {
             toTokenAddress,
             fromAddress,
             toAddress: toWalletAddress,
+            fromAmountForGas: enabledRefuel && gasRecommendationFromAmount
+                ? gasRecommendationFromAmount
+                : undefined,
             options: {
                 slippage: formattedSlippage,
                 bridges: {
-                    allow: enabledBridges,
+                    allow: allowedBridges,
                 },
                 exchanges: {
-                    allow: enabledExchanges,
+                    allow: allowedExchanges,
                 },
                 order: routePriority,
                 allowSwitchChain: variant === 'refuel' ? false : allowSwitchChain,
+                insurance: insurance ? Boolean(insurableRoute) : undefined,
             },
         }, { signal });
     }, {
         enabled: isEnabled,
-        refetchInterval,
         staleTime: refetchTime,
         cacheTime: refetchTime,
+        refetchInterval(data, query) {
+            return Math.min(Math.abs(refetchTime - (Date.now() - query.state.dataUpdatedAt)), refetchTime);
+        },
         retry(failureCount, error) {
             if (error?.code === LifiErrorCode.NotFound) {
                 return false;
@@ -170,6 +189,7 @@ export const useSwapRoutes = () => {
                 });
             }
         },
+        onSettled,
     });
     return {
         routes: data?.routes,

package/hooks/useTokenAddressBalance.js

@@ -3,8 +3,10 @@ import { useTokenBalances } from './useTokenBalances';
 export const useTokenAddressBalance = (chainId, tokenAddress) => {
     const { tokens, tokensWithBalance, isBalanceLoading, refetch } = useTokenBalances(chainId);
     const token = useMemo(() => {
-        const token = (tokensWithBalance ?? tokens)?.find((token) => token.address === tokenAddress && token.chainId === chainId);
-        return token;
+        if (tokenAddress && chainId) {
+            const token = (tokensWithBalance ?? tokens)?.find((token) => token.address === tokenAddress && token.chainId === chainId);
+            return token;
+        }
     }, [chainId, tokenAddress, tokens, tokensWithBalance]);
     return {
         token,

package/hooks/useTokenBalance.js

@@ -1,32 +1,14 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useLiFi, useWallet } from '../providers';
+import { useWallet } from '../providers';
 import { formatTokenAmount } from '../utils';
+import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 const defaultRefetchInterval = 30000;
 export const useTokenBalance = (token, accountAddress) => {
-    const lifi = useLiFi();
-    const { account } = useWallet();
+    const { account, provider } = useWallet();
     const queryClient = useQueryClient();
-    const walletAddress = accountAddress ?? account.address;
-    const getTokenBalancesWithRetry = useCallback(async (accountAddress, tokens, depth = 0) => {
-        try {
-            const tokenBalances = await lifi.getTokenBalances(accountAddress, tokens);
-            if (!tokenBalances.every((token) => token.blockNumber)) {
-                if (depth > 10) {
-                    console.warn('Token balance backoff depth exceeded.');
-                    return undefined;
-                }
-                await new Promise((resolve) => {
-                    setTimeout(resolve, 1.5 ** depth * 100);
-                });
-                return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
-            }
-            return tokenBalances;
-        }
-        catch (error) {
-            //
-        }
-    }, [lifi]);
+    const walletAddress = accountAddress || account.address;
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
     const tokenBalanceQueryKey = useMemo(() => ['token-balance', walletAddress, token?.chainId, token?.address], [token?.address, token?.chainId, walletAddress]);
     const { data, isLoading, refetch } = useQuery(tokenBalanceQueryKey, async ({ queryKey: [, accountAddress] }) => {
         const cachedToken = queryClient

package/hooks/useTokenBalances.d.ts

@@ -2,7 +2,7 @@ import type { Token } from '../types';
 export declare const useTokenBalances: (selectedChainId?: number) => {
     tokens: Token[];
     tokensWithBalance: Token[] | undefined;
-    featuredTokens: import("@lifi/types").Token[];
+    featuredTokens: import("@lifi/types").Token[] | undefined;
     isLoading: boolean;
     isBalanceLoading: boolean;
     refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<Token[], unknown>>;

package/hooks/useTokenSearch.js

@@ -10,9 +10,9 @@ export const useTokenSearch = (chainId, tokenQuery, enabled) => {
         if (token) {
             queryClient.setQueriesData(['tokens'], (data) => {
                 if (data &&
-                    !data.tokens[chainId].some((t) => t.address === token.address)) {
+                    !data.tokens[chainId]?.some((t) => t.address === token.address)) {
                     const clonedData = { ...data };
-                    clonedData.tokens[chainId].push(token);
+                    clonedData.tokens[chainId]?.push(token);
                     return clonedData;
                 }
             });

package/hooks/useTokens.js

@@ -8,14 +8,14 @@ export const useTokens = (selectedChainId) => {
     const { data, isLoading, dataUpdatedAt } = useQuery(['tokens'], () => lifi.getTokens());
     const { getChainById, isLoading: isSupportedChainsLoading } = useChains();
     const featuredTokens = useFeaturedTokens(selectedChainId);
-    const { tokens: configTokens, chains: configChains, disabledChains, } = useWidgetConfig();
+    const { tokens: configTokens, chains: configChains } = useWidgetConfig();
     const tokens = useMemo(() => {
         if (isSupportedChainsLoading) {
             return [];
         }
         const chainAllowed = selectedChainId &&
             getChainById(selectedChainId) &&
-            isItemAllowed(selectedChainId, configChains, disabledChains);
+            isItemAllowed(selectedChainId, configChains);
         if (!chainAllowed) {
             return [];
         }
@@ -44,7 +44,6 @@ export const useTokens = (selectedChainId) => {
         selectedChainId,
         getChainById,
         configChains,
-        disabledChains,
         configTokens?.allow,
         configTokens?.deny,
         featuredTokens,