@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/hooks/index.js

@@ -1,3 +1,5 @@
+export * from './useAccount';
+export * from './useAvailableChains';
 export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
@@ -9,13 +11,15 @@ export * from './useFromTokenSufficiency';
 export * from './useGasRecommendation';
 export * from './useGasRefuel';
 export * from './useGasSufficiency';
-export * from './useGetTokenBalancesWithRetry';
 export * from './useInitializer';
+export * from './useLanguages';
 export * from './useNavigateBack';
 export * from './useProcessMessage';
+export * from './useRequiredToAddress';
 export * from './useRouteExecution';
 export * from './useRoutes';
 export * from './useScrollableContainer';
+export * from './useSettingMonitor';
 export * from './useSwapOnly';
 export * from './useToken';
 export * from './useTokenAddressBalance';
@@ -24,4 +28,6 @@ export * from './useTokenBalances';
 export * from './useTokenSearch';
 export * from './useTokens';
 export * from './useTools';
+export * from './useTransactionDetails';
+export * from './useTransactionHistory';
 export * from './useWidgetEvents';

package/hooks/useAccount.d.ts

@@ -0,0 +1,31 @@
+import { ChainType } from '@lifi/sdk';
+import type { WalletAdapter } from '@solana/wallet-adapter-base';
+import type { Chain } from 'viem';
+import type { Connector } from 'wagmi';
+export interface AccountBase {
+    address?: string;
+    addresses?: readonly string[];
+    chain?: Chain;
+    chainId?: number;
+    chainType?: ChainType;
+    isConnected: boolean;
+    isConnecting: boolean;
+    isDisconnected: boolean;
+    isReconnecting: boolean;
+    status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected';
+}
+export interface EVMAccount extends AccountBase {
+    chainType: ChainType.EVM;
+    connector?: Connector;
+}
+export interface SVMAccount extends AccountBase {
+    chainType: ChainType.SVM;
+    connector?: WalletAdapter;
+}
+export type Account = EVMAccount | SVMAccount;
+export interface AccountResult {
+    account: Account;
+    accounts: Account[];
+}
+export declare const useAccount: () => AccountResult;
+export declare const useAccountDisconnect: () => () => void;

package/hooks/useAccount.js

@@ -0,0 +1,48 @@
+import { ChainId, ChainType } from '@lifi/sdk';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import { useDisconnect, useAccount as useWagmiAccount } from 'wagmi';
+export const useAccount = () => {
+    const account = useWagmiAccount();
+    const { wallet } = useWallet();
+    return useMemo(() => {
+        const svm = wallet?.adapter.publicKey
+            ? {
+                address: wallet?.adapter.publicKey.toString(),
+                chainId: ChainId.SOL,
+                chainType: ChainType.SVM,
+                connector: wallet?.adapter,
+                isConnected: Boolean(wallet?.adapter.publicKey),
+                isConnecting: false,
+                isReconnecting: false,
+                isDisconnected: !wallet,
+                status: 'connected',
+            }
+            : {
+                chainType: ChainType.SVM,
+                isConnected: false,
+                isConnecting: false,
+                isReconnecting: false,
+                isDisconnected: true,
+                status: 'disconnected',
+            };
+        const evm = { ...account, chainType: ChainType.EVM };
+        return {
+            account: account.isConnected ? evm : svm,
+            accounts: [evm, svm],
+        };
+    }, [account, wallet]);
+};
+export const useAccountDisconnect = () => {
+    const account = useWagmiAccount();
+    const { disconnect: wagmiDisconnect } = useDisconnect();
+    const { wallet, disconnect } = useWallet();
+    return () => {
+        if (account.isConnected) {
+            wagmiDisconnect();
+        }
+        if (wallet) {
+            disconnect();
+        }
+    };
+};

package/hooks/useAvailableChains.d.ts

@@ -0,0 +1,6 @@
+import type { ExtendedChain } from '@lifi/sdk';
+export declare const useAvailableChains: () => {
+    chains: ExtendedChain[] | undefined;
+    getChainById: (chainId?: number, chains?: ExtendedChain[] | undefined) => ExtendedChain | undefined;
+    isLoading: boolean;
+};

package/hooks/useAvailableChains.js

@@ -0,0 +1,32 @@
+import { ChainType, config, getChains } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
+export const useAvailableChains = () => {
+    const { data, isLoading } = useQuery({
+        queryKey: ['chains'],
+        queryFn: async () => {
+            const chains = await getChains({
+                chainTypes: [ChainType.EVM, ChainType.SVM],
+            });
+            config.setChains(chains);
+            return chains;
+        },
+        refetchInterval: 300000,
+        staleTime: 300000,
+    });
+    const getChainById = useCallback((chainId, chains = data) => {
+        if (!chainId) {
+            return;
+        }
+        const chain = chains?.find((chain) => chain.id === chainId);
+        // if (!chain) {
+        //   throw new Error('Chain not found or chainId is invalid.');
+        // }
+        return chain;
+    }, [data]);
+    return {
+        chains: data,
+        getChainById,
+        isLoading,
+    };
+};

package/hooks/useChain.js

@@ -1,11 +1,8 @@
 import { useMemo } from 'react';
-import { useChains } from './useChains';
+import { useAvailableChains } from './useAvailableChains';
 export const useChain = (chainId) => {
-    const { chains, isLoading } = useChains();
-    const chain = useMemo(() => {
-        const chain = chains?.find((chain) => chain.id === chainId);
-        return chain;
-    }, [chainId, chains]);
+    const { isLoading, getChainById } = useAvailableChains();
+    const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
     return {
         chain,
         isLoading,

package/hooks/useChains.d.ts

@@ -1,5 +1,5 @@
 export declare const useChains: () => {
     chains: import("@lifi/types").ExtendedChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").ExtendedChain | undefined;
+    getChainById: (chainId?: number | undefined, chains?: import("@lifi/types").ExtendedChain[] | undefined) => import("@lifi/types").ExtendedChain | undefined;
     isLoading: boolean;
 };

package/hooks/useChains.js

@@ -1,47 +1,16 @@
-import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { FormKey, isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
-import { useChainOrderStore } from '../stores';
+import { useMemo } from 'react';
+import { isItemAllowed, useWidgetConfig } from '../providers';
+import { useAvailableChains } from './useAvailableChains';
 export const useChains = () => {
-    const { chains, keyPrefix } = useWidgetConfig();
-    const lifi = useLiFi();
-    const { getValues, setValue } = useFormContext();
-    const initializeChains = useChainOrderStore((state) => state.initializeChains);
-    const { data: availableChains, isLoading: isLoadingAvailableChains } = useQuery(['chains'], async () => lifi.getChains(), {
-        refetchInterval: 300000,
-        staleTime: 300000,
-    });
-    const { data: filteredChains, isLoading: isLoadingFilteredChains } = useQuery(['filtered-chains', availableChains?.length, keyPrefix], async () => {
-        if (!availableChains) {
-            return;
-        }
-        const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains));
-        const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
-        const [fromChainValue, toChainValue] = getValues([
-            FormKey.FromChain,
-            FormKey.ToChain,
-        ]);
-        if (!fromChainValue) {
-            setValue(FormKey.FromChain, chainOrder[0]);
-        }
-        if (!toChainValue) {
-            setValue(FormKey.ToChain, chainOrder[0]);
-        }
+    const { chains } = useWidgetConfig();
+    const { chains: availableChains, isLoading: isLoadingAvailableChains, getChainById, } = useAvailableChains();
+    const filteredChains = useMemo(() => {
+        const filteredChains = availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
         return filteredChains;
-    }, {
-        enabled: Boolean(availableChains),
-    });
-    const getChainById = useCallback((chainId) => {
-        const chain = availableChains?.find((chain) => chain.id === chainId);
-        // if (!chain) {
-        //   throw new Error('Chain not found or chainId is invalid.');
-        // }
-        return chain;
-    }, [availableChains]);
+    }, [availableChains, chains]);
     return {
         chains: filteredChains,
         getChainById,
-        isLoading: isLoadingAvailableChains || isLoadingFilteredChains,
+        isLoading: isLoadingAvailableChains,
     };
 };

package/hooks/useFromTokenSufficiency.d.ts

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

package/hooks/useFromTokenSufficiency.js

@@ -1,14 +1,14 @@
-import { useQuery } from '@tanstack/react-query';
-import Big from 'big.js';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { useWatch } from 'react-hook-form';
-import { FormKey, useWallet } from '../providers';
+import { parseUnits } from 'viem';
+import { FormKey } from '../providers';
 import { isRouteDone } from '../stores';
-import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
+import { useAccount } from './useAccount';
 import { useTokenAddressBalance } from './useTokenAddressBalance';
+import { getTokenBalancesWithRetry } from './useTokenBalance';
 const refetchInterval = 30000;
 export const useFromTokenSufficiency = (route) => {
-    const { account } = useWallet();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
+    const { account } = useAccount();
     const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
         name: [FormKey.FromChain, FormKey.FromToken, FormKey.FromAmount],
     });
@@ -18,48 +18,46 @@ export const useFromTokenSufficiency = (route) => {
         chainId = route.fromToken.chainId;
         tokenAddress = route.fromToken.address;
     }
-    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-    const { data: insufficientFromToken, isInitialLoading } = useQuery([
-        'from-token-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));
+    const { token, isLoading: isTokenAddressBalanceLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    const { data: insufficientFromToken, isLoading } = useQuery({
+        queryKey: [
+            'from-token-sufficiency-check',
+            account.address,
+            chainId,
+            tokenAddress,
+            route?.id ?? fromAmount,
+        ],
+        queryFn: async () => {
+            if (!account.address || !token) {
+                return;
+            }
+            const parsedFromAmount = parseUnits(fromAmount, token.decimals);
+            let currentTokenBalance = token.amount ?? 0n;
+            if (!route || isRouteDone(route)) {
+                const insufficientFunds = currentTokenBalance < parsedFromAmount;
+                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 > 0) {
+                const insufficientFunds = BigInt(route.fromAmount) > currentTokenBalance;
+                return insufficientFunds;
+            }
+            const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+                currentAction.fromToken,
+            ]);
+            currentTokenBalance = tokenBalances?.[0]?.amount ?? 0n;
+            const insufficientFunds = BigInt(currentAction.fromAmount) > currentTokenBalance;
             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),
+        },
+        enabled: Boolean(account.address && token && !isTokenAddressBalanceLoading),
         refetchInterval,
         staleTime: refetchInterval,
-        cacheTime: refetchInterval,
-        keepPreviousData: true,
+        placeholderData: keepPreviousData,
     });
     return {
         insufficientFromToken,
-        isInitialLoading,
+        isLoading,
     };
 };

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 | null, unknown>;
+import { type ChainId } from '@lifi/sdk';
+export declare const useGasRecommendation: (toChainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse | null, Error>;

package/hooks/useGasRecommendation.js

@@ -1,24 +1,29 @@
+import { getGasRecommendation } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { useLiFi } from '../providers';
-import { useChains } from './useChains';
+import { useAvailableChains } from './useAvailableChains';
 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,
-            fromToken: fromToken,
-        });
-        return gasRecommendation;
-    }, {
-        enabled: Boolean(chainId),
+export const useGasRecommendation = (toChainId, fromChain, fromToken) => {
+    const { chains } = useAvailableChains();
+    const checkRecommendationLiFuel = Boolean(toChainId) &&
+        Boolean(fromChain) &&
+        Boolean(fromToken) &&
+        Boolean(chains?.length);
+    const checkRecommendationMaxButton = Boolean(toChainId) && !fromChain && !fromToken && Boolean(chains?.length);
+    return useQuery({
+        queryKey: ['gas-recommendation', toChainId, fromChain, fromToken],
+        queryFn: async ({ queryKey: [_, toChainId, fromChain, fromToken], signal, }) => {
+            if (!chains?.some((chain) => chain.id === toChainId)) {
+                return null;
+            }
+            const gasRecommendation = await getGasRecommendation({
+                chainId: toChainId,
+                fromChain: fromChain,
+                fromToken: fromToken,
+            }, { signal });
+            return gasRecommendation;
+        },
+        enabled: checkRecommendationLiFuel || checkRecommendationMaxButton,
         refetchInterval,
         staleTime: refetchInterval,
-        cacheTime: refetchInterval,
     });
 };

package/hooks/useGasRefuel.js

@@ -1,12 +1,11 @@
-import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
-import { useChains } from '.';
+import { useAvailableChains } from '.';
 import { FormKey } from '../providers';
 import { useGasRecommendation } from './useGasRecommendation';
 import { useTokenBalance } from './useTokenBalance';
 export const useGasRefuel = () => {
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     const [fromChainId, fromTokenAddress, toChainId, toAddress] = useWatch({
         name: [
             FormKey.FromChain,
@@ -16,25 +15,33 @@ export const useGasRefuel = () => {
         ],
     });
     const toChain = getChainById(toChainId);
-    const { token: nativeToken } = useTokenBalance(toChainId && toChain?.nativeToken, toAddress);
+    const fromChain = getChainById(fromChainId);
+    const { token: nativeToken } = useTokenBalance(toAddress, toChainId && toChain?.nativeToken, toChain);
     const { data: gasRecommendation, isLoading } = useGasRecommendation(toChainId, fromChainId, fromTokenAddress);
+    // When we bridge between ecosystems we need to be sure toAddress is set
+    const isChainTypeSatisfied = fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true;
     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 ||
             !gasRecommendation?.available ||
-            !nativeToken) {
+            !nativeToken ||
+            !isChainTypeSatisfied) {
             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);
+        const tokenBalance = nativeToken.amount ?? 0n;
+        // Check if the user balance < 50% of the recommended amount
+        const recommendedAmount = BigInt(gasRecommendation.recommended.amount) / 2n;
+        const insufficientGas = tokenBalance < recommendedAmount;
         return insufficientGas;
-    }, [fromChainId, gasRecommendation, nativeToken, toChainId]);
+    }, [
+        fromChainId,
+        gasRecommendation,
+        isChainTypeSatisfied,
+        nativeToken,
+        toChainId,
+    ]);
     return {
         enabled: enabled,
         availble: gasRecommendation?.available,

package/hooks/useGasSufficiency.d.ts

@@ -1,14 +1,13 @@
-import type { EVMChain, Route, Token } from '@lifi/sdk';
-import Big from 'big.js';
+import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
 export interface GasSufficiency {
-    gasAmount: Big;
-    tokenAmount?: Big;
-    insufficientAmount?: Big;
+    gasAmount: bigint;
+    tokenAmount?: bigint;
+    insufficientAmount?: bigint;
     insufficient?: boolean;
     token: Token;
     chain?: EVMChain;
 }
-export declare const useGasSufficiency: (route?: Route) => {
+export declare const useGasSufficiency: (route?: RouteExtended) => {
     insufficientGas: GasSufficiency[] | undefined;
-    isInitialLoading: boolean;
+    isLoading: boolean;
 };

package/hooks/useGasSufficiency.js

@@ -1,90 +1,87 @@
 import { useQuery } from '@tanstack/react-query';
-import Big from 'big.js';
-import { useChains, useGasRefuel, useGetTokenBalancesWithRetry } from '.';
-import { useWallet, useWidgetConfig } from '../providers';
+import { getTokenBalancesWithRetry, useAvailableChains, useGasRefuel } from '.';
 import { useSettings } from '../stores';
+import { useAccount } from './useAccount';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
-    const { account } = useWallet();
-    const { getChainById } = useChains();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
-    const { sdkConfig } = useWidgetConfig();
-    const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
+    const { account } = useAccount();
+    const { getChainById } = useAvailableChains();
     const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
     const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
     const enabledRefuel = enabled && enabledAutoRefuel;
-    const { data: insufficientGas, isInitialLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
-        if (!account.address || !route) {
-            return;
-        }
-        // TODO: include LI.Fuel into calculation once steps and tools are properly typed
-        // const refuelSteps = route.steps
-        //   .flatMap((step) => step.includedSteps)
-        //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
-        const gasCosts = route.steps
-            .filter((step) => !step.execution || step.execution.status !== 'DONE')
-            .reduce((groupedGasCosts, step) => {
-            if (step.estimate.gasCosts && !isMultisigSigner) {
-                const { token } = step.estimate.gasCosts[0];
-                const gasCostAmount = step.estimate.gasCosts
-                    .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(0))
-                    .div(10 ** token.decimals);
-                groupedGasCosts[token.chainId] = {
-                    gasAmount: groupedGasCosts[token.chainId]?.gasAmount.plus(gasCostAmount) ?? gasCostAmount,
-                    token,
-                };
+    const { data: insufficientGas, isLoading } = useQuery({
+        queryKey: ['gas-sufficiency-check', account.address, route?.id],
+        queryFn: async () => {
+            // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+            // const refuelSteps = route.steps
+            //   .flatMap((step) => step.includedSteps)
+            //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
+            const gasCosts = route.steps
+                .filter((step) => !step.execution || step.execution.status !== 'DONE')
+                .reduce((groupedGasCosts, step) => {
+                if (step.estimate.gasCosts &&
+                    account.connector?.id !== 'safe') {
+                    const { token } = step.estimate.gasCosts[0];
+                    const gasCostAmount = step.estimate.gasCosts.reduce((amount, gasCost) => amount + BigInt(gasCost.amount), 0n);
+                    groupedGasCosts[token.chainId] = {
+                        gasAmount: groupedGasCosts[token.chainId]
+                            ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
+                            : gasCostAmount,
+                        token,
+                    };
+                }
+                // Add fees paid in native tokens to gas sufficiency check (included: false)
+                const nonIncludedFeeCosts = step.estimate.feeCosts?.filter((feeCost) => !feeCost.included);
+                if (nonIncludedFeeCosts?.length) {
+                    const { token } = nonIncludedFeeCosts[0];
+                    const feeCostAmount = nonIncludedFeeCosts.reduce((amount, feeCost) => amount + BigInt(feeCost.amount), 0n);
+                    groupedGasCosts[token.chainId] = {
+                        gasAmount: groupedGasCosts[token.chainId]
+                            ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
+                            : feeCostAmount,
+                        token,
+                    };
+                }
+                return groupedGasCosts;
+            }, {});
+            if (route.fromToken.address === gasCosts[route.fromChainId]?.token.address) {
+                gasCosts[route.fromChainId].tokenAmount =
+                    gasCosts[route.fromChainId]?.gasAmount + BigInt(route.fromAmount);
             }
-            // Add fees paid in native tokens to gas sufficiency check (included: false)
-            const nonIncludedFeeCosts = step.estimate.feeCosts?.filter((feeCost) => !feeCost.included);
-            if (nonIncludedFeeCosts?.length) {
-                const { token } = nonIncludedFeeCosts[0];
-                const feeCostAmount = nonIncludedFeeCosts
-                    .reduce((amount, feeCost) => amount.plus(Big(feeCost.amount || 0)), Big(0))
-                    .div(10 ** token.decimals);
-                groupedGasCosts[token.chainId] = {
-                    gasAmount: groupedGasCosts[token.chainId]?.gasAmount.plus(feeCostAmount) ?? feeCostAmount,
-                    token,
-                };
+            const tokenBalances = await getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
+            if (!tokenBalances?.length) {
+                return [];
             }
-            return groupedGasCosts;
-        }, {});
-        if (route.fromToken.address === gasCosts[route.fromChainId]?.token.address) {
-            gasCosts[route.fromChainId].tokenAmount = gasCosts[route.fromChainId].gasAmount.plus(Big(route.fromAmount).div(10 ** route.fromToken.decimals));
-        }
-        const tokenBalances = await getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
-        if (!tokenBalances?.length) {
-            return;
-        }
-        [route.fromChainId, route.toChainId].forEach((chainId) => {
-            if (gasCosts[chainId]) {
-                const gasTokenBalance = Big(tokenBalances?.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
-                    t.address === gasCosts[chainId].token.address)?.amount ?? 0);
-                const insufficient = gasTokenBalance.lte(0) ||
-                    gasTokenBalance.lt(gasCosts[chainId].gasAmount ?? Big(0)) ||
-                    gasTokenBalance.lt(gasCosts[chainId].tokenAmount ?? Big(0));
-                const insufficientAmount = insufficient
-                    ? gasCosts[chainId].tokenAmount?.minus(gasTokenBalance) ??
-                        gasCosts[chainId].gasAmount.minus(gasTokenBalance)
-                    : undefined;
-                gasCosts[chainId] = {
-                    ...gasCosts[chainId],
-                    insufficient,
-                    insufficientAmount: insufficientAmount?.round(5, Big.roundUp),
-                    chain: insufficient ? getChainById(chainId) : undefined,
-                };
-            }
-        });
-        const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        return gasCostResult;
-    }, {
+            [route.fromChainId, route.toChainId].forEach((chainId) => {
+                if (gasCosts[chainId]) {
+                    const gasTokenBalance = tokenBalances?.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
+                        t.address === gasCosts[chainId].token.address)?.amount ?? 0n;
+                    const insufficient = gasTokenBalance <= 0n ||
+                        gasTokenBalance < gasCosts[chainId].gasAmount ||
+                        gasTokenBalance < (gasCosts[chainId].tokenAmount ?? 0n);
+                    const insufficientAmount = insufficient
+                        ? gasCosts[chainId].tokenAmount
+                            ? gasCosts[chainId].tokenAmount - gasTokenBalance
+                            : gasCosts[chainId].gasAmount - gasTokenBalance
+                        : undefined;
+                    gasCosts[chainId] = {
+                        ...gasCosts[chainId],
+                        insufficient,
+                        insufficientAmount,
+                        chain: insufficient ? getChainById(chainId) : undefined,
+                    };
+                }
+            });
+            const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
+            return gasCostResult;
+        },
         enabled: Boolean(account.address && route),
         refetchInterval,
         staleTime: refetchInterval,
-        cacheTime: refetchInterval,
     });
     const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
         insufficientGas: isInsufficientGas ? insufficientGas : undefined,
-        isInitialLoading,
+        isLoading,
     };
 };