@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/hooks/useRoutes.js

@@ -1,19 +1,23 @@
-import { isAddress } from '@ethersproject/address';
-import { LifiErrorCode } from '@lifi/sdk';
+import { LiFiErrorCode, getContractCallQuote, getRoutes } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import Big from 'big.js';
+import { getEnsAddress } from '@wagmi/core';
 import { useWatch } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
-import { useDebouncedWatch, useGasRefuel, useToken } from '.';
-import { FormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
+import { isAddress as isEVMAddress, parseUnits } from 'viem';
+import { normalize } from 'viem/ens';
+import { useConfig } from 'wagmi';
+import { useChain, useDebouncedWatch, useGasRefuel, useToken } from '.';
+import { FormKey, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
+import { isSVMAddress } from '../utils';
+import { useAccount } from './useAccount';
 import { useSwapOnly } from './useSwapOnly';
 const refetchTime = 60000;
 export const useRoutes = ({ insurableRoute } = {}) => {
-    const lifi = useLiFi();
     const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
-    const { account } = useWallet();
+    const { account } = useAccount();
     const queryClient = useQueryClient();
+    const config = useConfig();
     const swapOnly = useSwapOnly();
     const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = useSettings([
         'slippage',
@@ -38,22 +42,28 @@ export const useRoutes = ({ insurableRoute } = {}) => {
     });
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
     const { token: toToken } = useToken(toChainId, toTokenAddress);
+    const { chain: fromChain } = useChain(fromChainId);
+    const { chain: toChain } = useChain(toChainId);
     const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } = useGasRefuel();
     const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
         (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
     const contractCallQuoteEnabled = subvariant === 'nft'
         ? Boolean(toContractAddress && toContractCallData && toContractGasLimit)
         : true;
+    // When we bridge between ecosystems we need to be sure toAddress is set
+    const isChainTypeSatisfied = fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true;
     const isEnabled = !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
         Boolean(fromToken?.address) &&
         Boolean(toToken?.address) &&
         !Number.isNaN(slippage) &&
         hasAmount &&
+        isChainTypeSatisfied &&
         contractCallQuoteEnabled;
+    const accountAddress = fromChain?.chainType === account.chainType ? account.address : undefined;
     const queryKey = [
         'routes',
-        account.address,
+        accountAddress,
         fromChainId,
         fromToken?.address,
         fromTokenAmount,
@@ -69,126 +79,119 @@ export const useRoutes = ({ insurableRoute } = {}) => {
         enabledExchanges,
         routePriority,
         subvariant,
-        sdkConfig?.defaultRouteOptions?.allowSwitchChain,
+        sdkConfig?.routeOptions?.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, subvariant, allowSwitchChain, enabledRefuel, gasRecommendationFromAmount, insurance, insurableRouteId,], signal, }) => {
-        let toWalletAddress;
-        try {
-            toWalletAddress =
-                (await account.signer?.provider?.resolveName(toAddress)) ??
-                    (isAddress(toAddress) ? toAddress : fromAddress);
-        }
-        catch {
-            toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
-        }
-        const fromAmount = Big(fromTokenAmount || 0)
-            .mul(10 ** (fromToken?.decimals ?? 0))
-            .toFixed(0);
-        const formattedSlippage = parseFloat(slippage) / 100;
-        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;
-        if (subvariant === 'nft') {
-            const contractCallQuote = await lifi.getContractCallQuote({
-                fromAddress,
-                fromChain: fromChainId,
-                fromToken: fromTokenAddress,
-                toAmount: toTokenAmount,
-                toChain: toChainId,
-                toToken: toTokenAddress,
-                toContractAddress,
-                toContractCallData,
-                toContractGasLimit,
-                allowBridges: allowedBridges,
-                toFallbackAddress: toWalletAddress,
-                slippage: formattedSlippage,
-            }, { signal });
-            contractCallQuote.action.toToken = toToken;
-            const customStep = subvariant === 'nft'
-                ? contractCallQuote.includedSteps?.find((step) => step.type === 'custom')
-                : undefined;
-            if (customStep && contractTool) {
-                const toolDetails = {
-                    key: contractTool.name,
-                    name: contractTool.name,
-                    logoURI: contractTool.logoURI,
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery({
+        queryKey,
+        queryFn: 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 = toAddress || fromAddress;
+            const isAddress = isEVMAddress(toAddress) || isSVMAddress(toAddress);
+            try {
+                // FIXME: resolve address in one place
+                toWalletAddress = !isAddress
+                    ? await getEnsAddress(config, {
+                        chainId: toChainId,
+                        name: normalize(toAddress),
+                    })
+                    : isAddress
+                        ? toAddress
+                        : fromAddress;
+            }
+            catch {
+                toWalletAddress = isAddress ? toAddress : fromAddress;
+            }
+            const fromAmount = parseUnits(fromTokenAmount, fromToken.decimals).toString();
+            const formattedSlippage = parseFloat(slippage) / 100;
+            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;
+            if (subvariant === 'nft') {
+                const contractCallQuote = await getContractCallQuote({
+                    fromAddress,
+                    fromChain: fromChainId,
+                    fromToken: fromTokenAddress,
+                    toAmount: toTokenAmount,
+                    toChain: toChainId,
+                    toToken: toTokenAddress,
+                    toContractAddress,
+                    toContractCallData,
+                    toContractGasLimit,
+                    allowBridges: allowedBridges,
+                    toFallbackAddress: toWalletAddress,
+                    slippage: formattedSlippage,
+                }, { signal });
+                contractCallQuote.action.toToken = toToken;
+                const customStep = subvariant === 'nft'
+                    ? contractCallQuote.includedSteps?.find((step) => step.type === 'custom')
+                    : undefined;
+                if (customStep && contractTool) {
+                    const toolDetails = {
+                        key: contractTool.name,
+                        name: contractTool.name,
+                        logoURI: contractTool.logoURI,
+                    };
+                    customStep.toolDetails = toolDetails;
+                    contractCallQuote.toolDetails = toolDetails;
+                }
+                const route = {
+                    id: uuidv4(),
+                    fromChainId: contractCallQuote.action.fromChainId,
+                    fromAmountUSD: contractCallQuote.estimate.fromAmountUSD || '',
+                    fromAmount: contractCallQuote.action.fromAmount,
+                    fromToken: contractCallQuote.action.fromToken,
+                    fromAddress: contractCallQuote.action.fromAddress,
+                    toChainId: contractCallQuote.action.toChainId,
+                    toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
+                    toAmount: toTokenAmount,
+                    toAmountMin: toTokenAmount,
+                    toToken: toToken,
+                    toAddress: toWalletAddress,
+                    gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
+                    steps: [contractCallQuote],
+                    insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
                 };
-                customStep.toolDetails = toolDetails;
-                contractCallQuote.toolDetails = toolDetails;
+                return { routes: [route] };
             }
-            const route = {
-                id: uuidv4(),
-                fromChainId: contractCallQuote.action.fromChainId,
-                fromAmountUSD: contractCallQuote.estimate.fromAmountUSD || '',
-                fromAmount: contractCallQuote.action.fromAmount,
-                fromToken: contractCallQuote.action.fromToken,
-                fromAddress: contractCallQuote.action.fromAddress,
-                toChainId: contractCallQuote.action.toChainId,
-                toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
-                toAmount: toTokenAmount,
-                toAmountMin: toTokenAmount,
-                toToken: toToken,
+            const data = await getRoutes({
+                fromChainId,
+                fromAmount,
+                fromTokenAddress,
+                toChainId,
+                toTokenAddress,
+                fromAddress,
                 toAddress: toWalletAddress,
-                gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
-                steps: [contractCallQuote],
-                insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
-            };
-            return { routes: [route] };
-        }
-        return lifi.getRoutes({
-            fromChainId,
-            fromAmount,
-            fromTokenAddress,
-            toChainId,
-            toTokenAddress,
-            fromAddress,
-            toAddress: toWalletAddress,
-            fromAmountForGas: enabledRefuel && gasRecommendationFromAmount
-                ? gasRecommendationFromAmount
-                : undefined,
-            options: {
-                slippage: formattedSlippage,
-                bridges: {
-                    allow: allowedBridges,
-                },
-                exchanges: {
-                    allow: allowedExchanges,
+                fromAmountForGas: enabledRefuel && gasRecommendationFromAmount
+                    ? gasRecommendationFromAmount
+                    : undefined,
+                options: {
+                    slippage: formattedSlippage,
+                    bridges: {
+                        allow: allowedBridges,
+                    },
+                    exchanges: {
+                        allow: allowedExchanges,
+                    },
+                    order: routePriority,
+                    allowSwitchChain: subvariant === 'refuel' ? false : allowSwitchChain,
+                    insurance: insurance ? Boolean(insurableRoute) : undefined,
                 },
-                order: routePriority,
-                allowSwitchChain: subvariant === 'refuel' ? false : allowSwitchChain,
-                insurance: insurance ? Boolean(insurableRoute) : undefined,
-            },
-        }, { signal });
-    }, {
-        enabled: isEnabled,
-        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;
-            }
-            return true;
-        },
-        onSuccess(data) {
-            if (data.routes[0]) {
+            }, { signal });
+            if (data.routes[0] && fromAddress) {
                 // Update local tokens cache to keep priceUSD in sync
                 const { fromToken, toToken } = data.routes[0];
                 [fromToken, toToken].forEach((token) => {
-                    queryClient.setQueriesData(['token-balances', account.address, token.chainId], (data) => {
+                    queryClient.setQueriesData({ queryKey: ['token-balances', fromAddress, token.chainId] }, (data) => {
                         if (data) {
                             const clonedData = [...data];
                             const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
@@ -201,6 +204,18 @@ export const useRoutes = ({ insurableRoute } = {}) => {
                     });
                 });
             }
+            return data;
+        },
+        enabled: isEnabled,
+        staleTime: refetchTime,
+        refetchInterval(query) {
+            return Math.min(Math.abs(refetchTime - (Date.now() - query.state.dataUpdatedAt)), refetchTime);
+        },
+        retry(_, error) {
+            if (error?.code === LiFiErrorCode.NotFound) {
+                return false;
+            }
+            return true;
         },
     });
     return {

package/hooks/useSettingMonitor.d.ts

@@ -0,0 +1,11 @@
+export declare const useSettingMonitor: () => {
+    isBridgesChanged: boolean;
+    isExchangesChanged: boolean;
+    isSlippageChanged: boolean;
+    isSlippageOutsideRecommendedLimits: boolean;
+    isRoutePriorityChanged: boolean;
+    isGasPriceChanged: boolean;
+    isCustomRouteSettings: boolean;
+    isRouteSettingsWithWarnings: boolean;
+    reset: () => void;
+};

package/hooks/useSettingMonitor.js

@@ -0,0 +1,53 @@
+import { defaultConfigurableSettings, setDefaultSettings, useSettingsStore, } from '../stores';
+import { shallow } from 'zustand/shallow';
+import { useTools } from './useTools';
+import { useWidgetConfig } from '../providers';
+export const useSettingMonitor = () => {
+    const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = useSettingsStore((state) => [
+        state.enabledBridges,
+        state.enabledExchanges,
+        state.routePriority,
+        state.slippage,
+        state.gasPrice,
+    ], shallow);
+    const { tools } = useTools();
+    const resetSettings = useSettingsStore((state) => state.reset);
+    const config = useWidgetConfig();
+    const isSlippageChanged = config.slippage
+        ? Number(slippage) !== config.slippage * 100
+        : slippage !== defaultConfigurableSettings.slippage;
+    const isSlippageOutsideRecommendedLimits = isSlippageChanged && Number(slippage) > 1;
+    const isRoutePriorityChanged = config.routePriority
+        ? routePriority !== config.routePriority
+        : routePriority !== defaultConfigurableSettings.routePriority;
+    const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice;
+    const isBridgesChanged = tools?.bridges
+        ? tools?.bridges?.length !== enabledBridges?.length
+        : false;
+    const isExchangesChanged = tools?.exchanges
+        ? tools?.exchanges?.length !== enabledExchanges?.length
+        : false;
+    const isCustomRouteSettings = isBridgesChanged ||
+        isExchangesChanged ||
+        isSlippageChanged ||
+        isRoutePriorityChanged ||
+        isGasPriceChanged;
+    const isRouteSettingsWithWarnings = isSlippageOutsideRecommendedLimits;
+    const reset = () => {
+        if (tools) {
+            resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+            setDefaultSettings(config);
+        }
+    };
+    return {
+        isBridgesChanged,
+        isExchangesChanged,
+        isSlippageChanged,
+        isSlippageOutsideRecommendedLimits,
+        isRoutePriorityChanged,
+        isGasPriceChanged,
+        isCustomRouteSettings,
+        isRouteSettingsWithWarnings,
+        reset,
+    };
+};

package/hooks/useTokenAddressBalance.d.ts

@@ -1,5 +1,5 @@
 export declare const useTokenAddressBalance: (chainId?: number, tokenAddress?: string) => {
     token: import("..").TokenAmount | undefined;
     isLoading: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("..").TokenAmount[], unknown>>;
+    refetch: (options?: import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").Z | undefined) => Promise<import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").ac<import("..").TokenAmount[], Error>>;
 };

package/hooks/useTokenBalance.d.ts

@@ -1,9 +1,11 @@
-import type { Token, TokenAmount } from '@lifi/sdk';
-export declare const useTokenBalance: (token?: Token, accountAddress?: string) => {
+import type { ExtendedChain } from '@lifi/sdk';
+import { type Token, type TokenAmount } from '@lifi/sdk';
+export declare const useTokenBalance: (accountAddress?: string, token?: Token, chain?: ExtendedChain) => {
     token: TokenAmount | undefined;
     isLoading: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount, unknown>>;
+    refetch: (options?: import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").Z | undefined) => Promise<import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").ac<TokenAmount, Error>>;
     refetchNewBalance: () => void;
     refetchAllBalances: () => void;
     getTokenBalancesWithRetry: (accountAddress: string, tokens: Token[], depth?: number) => Promise<TokenAmount[] | undefined>;
 };
+export declare const getTokenBalancesWithRetry: (accountAddress: string, tokens: Token[], depth?: number) => Promise<TokenAmount[] | undefined>;

package/hooks/useTokenBalance.js

@@ -1,59 +1,69 @@
+import { getTokenBalances } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useWallet } from '../providers';
-import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
+import { useAccount } from './useAccount';
 const defaultRefetchInterval = 30000;
-export const useTokenBalance = (token, accountAddress) => {
-    const { account } = useWallet();
+export const useTokenBalance = (accountAddress, token, chain) => {
+    const { account } = useAccount();
     const queryClient = useQueryClient();
-    const walletAddress = accountAddress || account.address;
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
+    const walletAddress = accountAddress ||
+        // When we provide chain we want to be sure that account address used is from the same ecosystem as token
+        !chain
+        ? account.address
+        : chain.chainType === account.chainType
+            ? account.address
+            : undefined;
     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
-            .getQueryData([
-            'token-balances',
-            accountAddress,
-            token.chainId,
-        ])
-            ?.find((t) => t.address === token.address);
-        if (cachedToken) {
-            return cachedToken;
-        }
-        const tokenBalances = await getTokenBalancesWithRetry(accountAddress, [token]);
-        if (!tokenBalances?.length) {
-            throw Error('Could not get tokens balance.');
-        }
-        const cachedTokenAmount = queryClient.getQueryData(tokenBalanceQueryKey);
-        const tokenAmount = tokenBalances[0].amount;
-        if (cachedTokenAmount?.amount !== tokenAmount) {
-            queryClient.setQueryDefaults(tokenBalanceQueryKey, {
-                refetchInterval: defaultRefetchInterval,
-                staleTime: defaultRefetchInterval,
-            });
-        }
-        queryClient.setQueriesData(['token-balances', accountAddress, token.chainId], (data) => {
-            if (data) {
-                const clonedData = [...data];
-                const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
-                clonedData[index] = {
-                    ...clonedData[index],
-                    amount: tokenAmount,
-                };
-                return clonedData;
+    const { data, isLoading, refetch } = useQuery({
+        queryKey: tokenBalanceQueryKey,
+        queryFn: async ({ queryKey: [, accountAddress] }) => {
+            const cachedToken = queryClient
+                .getQueryData([
+                'token-balances',
+                accountAddress,
+                token.chainId,
+            ])
+                ?.find((t) => t.address === token.address);
+            if (cachedToken) {
+                return cachedToken;
             }
-        });
-        return {
-            ...tokenBalances[0],
-            amount: tokenAmount,
-        };
-    }, {
+            const tokenBalances = await getTokenBalancesWithRetry(accountAddress, [token]);
+            if (!tokenBalances?.length) {
+                throw Error('Could not get tokens balance.');
+            }
+            const cachedTokenAmount = queryClient.getQueryData(tokenBalanceQueryKey);
+            const tokenAmount = tokenBalances[0].amount;
+            if (cachedTokenAmount?.amount !== tokenAmount) {
+                queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+                    refetchInterval: defaultRefetchInterval,
+                    staleTime: defaultRefetchInterval,
+                });
+            }
+            queryClient.setQueriesData({ queryKey: ['token-balances', accountAddress, token.chainId] }, (data) => {
+                if (data) {
+                    const clonedData = [...data];
+                    const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
+                    clonedData[index] = {
+                        ...clonedData[index],
+                        amount: tokenAmount,
+                    };
+                    return clonedData;
+                }
+            });
+            return {
+                ...tokenBalances[0],
+                amount: tokenAmount,
+            };
+        },
         enabled: Boolean(walletAddress && token),
         refetchInterval: defaultRefetchInterval,
         staleTime: defaultRefetchInterval,
     });
     const refetchAllBalances = () => {
-        queryClient.refetchQueries(['token-balances', accountAddress, token?.chainId], { exact: false });
+        queryClient.refetchQueries({
+            queryKey: ['token-balances', accountAddress, token?.chainId],
+            exact: false,
+        });
     };
     const refetchNewBalance = useCallback(() => {
         queryClient.setQueryDefaults(tokenBalanceQueryKey, {
@@ -70,3 +80,22 @@ export const useTokenBalance = (token, accountAddress) => {
         getTokenBalancesWithRetry,
     };
 };
+export const getTokenBalancesWithRetry = async (accountAddress, tokens, depth = 0) => {
+    try {
+        const tokenBalances = await 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) {
+        //
+    }
+};

package/hooks/useTokenBalances.d.ts

@@ -1,9 +1,9 @@
 import type { TokenAmount } from '../types';
 export declare const useTokenBalances: (selectedChainId?: number) => {
-    tokens: TokenAmount[];
+    tokens: TokenAmount[] | undefined;
     tokensWithBalance: TokenAmount[] | undefined;
-    featuredTokens: import("@lifi/types").StaticToken[] | undefined;
+    featuredTokens: import("@lifi/sdk").StaticToken[] | 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<TokenAmount[], unknown>>;
+    refetch: (options?: import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").Z | undefined) => Promise<import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").ac<TokenAmount[], Error>>;
 };

package/hooks/useTokenBalances.js

@@ -1,35 +1,45 @@
+import { getTokenBalances } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { useLiFi, useWallet } from '../providers';
+import { formatUnits } from 'viem';
+import { useAccount } from './useAccount';
 import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 const defaultRefetchInterval = 32000;
 export const useTokenBalances = (selectedChainId) => {
-    const lifi = useLiFi();
-    const { account } = useWallet();
+    const { accounts } = useAccount();
     const featuredTokens = useFeaturedTokens(selectedChainId);
-    const { tokens, isLoading } = useTokens(selectedChainId);
-    const isBalanceLoadingEnabled = Boolean(account.address) &&
+    const { tokens, chain, isLoading } = useTokens(selectedChainId);
+    const account = accounts.find((account) => account.chainType === chain?.chainType);
+    const isBalanceLoadingEnabled = Boolean(account?.address) &&
         Boolean(tokens?.length) &&
         Boolean(selectedChainId);
-    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', account.address, selectedChainId, tokens?.length], async ({ queryKey: [, accountAddress] }) => {
-        const tokenBalances = await lifi.getTokenBalances(accountAddress, tokens);
-        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);
-        const result = [
-            ...formattedTokens
-                .filter((token) => token.amount !== '0' && featuredTokenAddresses.has(token.address))
-                .sort(sortFn),
-            ...formattedTokens.filter((token) => token.amount === '0' && featuredTokenAddresses.has(token.address)),
-            ...formattedTokens
-                .filter((token) => token.amount !== '0' &&
-                !featuredTokenAddresses.has(token.address))
-                .sort(sortFn),
-            ...formattedTokens.filter((token) => token.amount === '0' && !featuredTokenAddresses.has(token.address)),
-        ];
-        return result;
-    }, {
+    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery({
+        queryKey: [
+            'token-balances',
+            account?.address,
+            selectedChainId,
+            tokens?.length,
+        ],
+        queryFn: async ({ queryKey: [, accountAddress] }) => {
+            const tokenBalances = await getTokenBalances(accountAddress, tokens);
+            const featuredTokenAddresses = new Set(featuredTokens?.map((token) => token.address));
+            const sortFn = (a, b) => parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *
+                parseFloat(b.priceUSD ?? '0') -
+                parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *
+                    parseFloat(a.priceUSD ?? '0');
+            const formattedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances);
+            const result = [
+                ...formattedTokens
+                    .filter((token) => token.amount && featuredTokenAddresses.has(token.address))
+                    .sort(sortFn),
+                ...formattedTokens.filter((token) => !token.amount && featuredTokenAddresses.has(token.address)),
+                ...formattedTokens
+                    .filter((token) => token.amount && !featuredTokenAddresses.has(token.address))
+                    .sort(sortFn),
+                ...formattedTokens.filter((token) => !token.amount && !featuredTokenAddresses.has(token.address)),
+            ];
+            return result;
+        },
         enabled: isBalanceLoadingEnabled,
         refetchInterval: defaultRefetchInterval,
         staleTime: defaultRefetchInterval,