@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_cjs/hooks/useRoutes.js

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRoutes = void 0;
+const sdk_1 = require("@lifi/sdk");
+const react_query_1 = require("@tanstack/react-query");
+const core_1 = require("@wagmi/core");
+const react_hook_form_1 = require("react-hook-form");
+const uuid_1 = require("uuid");
+const viem_1 = require("viem");
+const ens_1 = require("viem/ens");
+const wagmi_1 = require("wagmi");
+const _1 = require(".");
+const providers_1 = require("../providers");
+const stores_1 = require("../stores");
+const utils_1 = require("../utils");
+const useAccount_1 = require("./useAccount");
+const useSwapOnly_1 = require("./useSwapOnly");
+const refetchTime = 60000;
+const useRoutes = ({ insurableRoute } = {}) => {
+    const { subvariant, sdkConfig, insurance, contractTool } = (0, providers_1.useWidgetConfig)();
+    const { account } = (0, useAccount_1.useAccount)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const config = (0, wagmi_1.useConfig)();
+    const swapOnly = (0, useSwapOnly_1.useSwapOnly)();
+    const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = (0, stores_1.useSettings)([
+        'slippage',
+        'routePriority',
+        'enabledAutoRefuel',
+        'enabledBridges',
+        'enabledExchanges',
+    ]);
+    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.FormKey.FromAmount], 320);
+    const [fromChainId, fromTokenAddress, toAddress, toTokenAmount, toChainId, toContractAddress, toContractCallData, toContractGasLimit, toTokenAddress,] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.FromToken,
+            providers_1.FormKey.ToAddress,
+            providers_1.FormKey.ToAmount,
+            providers_1.FormKey.ToChain,
+            providers_1.FormKey.ToContractAddress,
+            providers_1.FormKey.ToContractCallData,
+            providers_1.FormKey.ToContractGasLimit,
+            providers_1.FormKey.ToToken,
+        ],
+    });
+    const { token: fromToken } = (0, _1.useToken)(fromChainId, fromTokenAddress);
+    const { token: toToken } = (0, _1.useToken)(toChainId, toTokenAddress);
+    const { chain: fromChain } = (0, _1.useChain)(fromChainId);
+    const { chain: toChain } = (0, _1.useChain)(toChainId);
+    const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } = (0, _1.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',
+        accountAddress,
+        fromChainId,
+        fromToken?.address,
+        fromTokenAmount,
+        toAddress,
+        toChainId,
+        toToken?.address,
+        toTokenAmount,
+        toContractAddress,
+        toContractCallData,
+        toContractGasLimit,
+        slippage,
+        swapOnly ? [] : enabledBridges,
+        enabledExchanges,
+        routePriority,
+        subvariant,
+        sdkConfig?.routeOptions?.allowSwitchChain,
+        enabledRefuel && enabledAutoRefuel,
+        gasRecommendationFromAmount,
+        insurance,
+        insurableRoute?.id,
+    ];
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.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 = (0, viem_1.isAddress)(toAddress) || (0, utils_1.isSVMAddress)(toAddress);
+            try {
+                // FIXME: resolve address in one place
+                toWalletAddress = !isAddress
+                    ? await (0, core_1.getEnsAddress)(config, {
+                        chainId: toChainId,
+                        name: (0, ens_1.normalize)(toAddress),
+                    })
+                    : isAddress
+                        ? toAddress
+                        : fromAddress;
+            }
+            catch {
+                toWalletAddress = isAddress ? toAddress : fromAddress;
+            }
+            const fromAmount = (0, viem_1.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 (0, sdk_1.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: (0, uuid_1.v4)(),
+                    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' },
+                };
+                return { routes: [route] };
+            }
+            const data = await (0, sdk_1.getRoutes)({
+                fromChainId,
+                fromAmount,
+                fromTokenAddress,
+                toChainId,
+                toTokenAddress,
+                fromAddress,
+                toAddress: toWalletAddress,
+                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,
+                },
+            }, { 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({ queryKey: ['token-balances', fromAddress, token.chainId] }, (data) => {
+                        if (data) {
+                            const clonedData = [...data];
+                            const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
+                            clonedData[index] = {
+                                ...clonedData[index],
+                                ...token,
+                            };
+                            return clonedData;
+                        }
+                    });
+                });
+            }
+            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 === sdk_1.LiFiErrorCode.NotFound) {
+                return false;
+            }
+            return true;
+        },
+    });
+    return {
+        routes: data?.routes,
+        isLoading: isEnabled && isLoading,
+        isFetching,
+        isFetched,
+        dataUpdatedAt,
+        refetchTime,
+        refetch,
+    };
+};
+exports.useRoutes = useRoutes;

package/_cjs/hooks/useScrollableContainer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollableOverflowHidden = exports.useScrollableContainer = exports.useGetScrollableContainer = exports.getScrollableContainer = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useDefaultElementId_1 = require("./useDefaultElementId");
+const getScrollableContainer = (elementId) => document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId));
+exports.getScrollableContainer = getScrollableContainer;
+const useGetScrollableContainer = () => {
+    const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
+    const getContainer = (0, react_1.useCallback)(() => (0, exports.getScrollableContainer)(elementId), [elementId]);
+    return getContainer;
+};
+exports.useGetScrollableContainer = useGetScrollableContainer;
+const useScrollableContainer = (elementId) => {
+    const [containerElement, setContainerElement] = (0, react_1.useState)(() => (0, exports.getScrollableContainer)(elementId));
+    (0, react_1.useLayoutEffect)(() => {
+        if (!containerElement) {
+            setContainerElement((0, exports.getScrollableContainer)(elementId));
+        }
+    }, [containerElement, elementId]);
+    return containerElement;
+};
+exports.useScrollableContainer = useScrollableContainer;
+const useScrollableOverflowHidden = () => {
+    const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
+    (0, react_1.useLayoutEffect)(() => {
+        const element = (0, exports.getScrollableContainer)(elementId);
+        if (element) {
+            element.style.overflowY = 'hidden';
+        }
+        return () => {
+            if (element) {
+                element.style.overflowY = 'auto';
+            }
+        };
+    }, [elementId]);
+};
+exports.useScrollableOverflowHidden = useScrollableOverflowHidden;

package/_cjs/hooks/useSettingMonitor.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSettingMonitor = void 0;
+const stores_1 = require("../stores");
+const shallow_1 = require("zustand/shallow");
+const useTools_1 = require("./useTools");
+const providers_1 = require("../providers");
+const useSettingMonitor = () => {
+    const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = (0, stores_1.useSettingsStore)((state) => [
+        state.enabledBridges,
+        state.enabledExchanges,
+        state.routePriority,
+        state.slippage,
+        state.gasPrice,
+    ], shallow_1.shallow);
+    const { tools } = (0, useTools_1.useTools)();
+    const resetSettings = (0, stores_1.useSettingsStore)((state) => state.reset);
+    const config = (0, providers_1.useWidgetConfig)();
+    const isSlippageChanged = config.slippage
+        ? Number(slippage) !== config.slippage * 100
+        : slippage !== stores_1.defaultConfigurableSettings.slippage;
+    const isSlippageOutsideRecommendedLimits = isSlippageChanged && Number(slippage) > 1;
+    const isRoutePriorityChanged = config.routePriority
+        ? routePriority !== config.routePriority
+        : routePriority !== stores_1.defaultConfigurableSettings.routePriority;
+    const isGasPriceChanged = gasPrice !== stores_1.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));
+            (0, stores_1.setDefaultSettings)(config);
+        }
+    };
+    return {
+        isBridgesChanged,
+        isExchangesChanged,
+        isSlippageChanged,
+        isSlippageOutsideRecommendedLimits,
+        isRoutePriorityChanged,
+        isGasPriceChanged,
+        isCustomRouteSettings,
+        isRouteSettingsWithWarnings,
+        reset,
+    };
+};
+exports.useSettingMonitor = useSettingMonitor;

package/_cjs/hooks/useSwapOnly.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwapOnly = void 0;
+const stores_1 = require("../stores");
+const useSwapOnly = () => {
+    const state = (0, stores_1.useSplitSubvariantStore)((state) => state.state);
+    return state === 'swap';
+};
+exports.useSwapOnly = useSwapOnly;

package/_cjs/hooks/useToken.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToken = void 0;
+const react_1 = require("react");
+const useTokens_1 = require("./useTokens");
+const useTokenSearch_1 = require("./useTokenSearch");
+const useToken = (chainId, tokenAddress) => {
+    const { tokens, isLoading } = (0, useTokens_1.useTokens)(chainId);
+    const token = (0, react_1.useMemo)(() => {
+        const token = tokens?.find((token) => token.address === tokenAddress && token.chainId === chainId);
+        return token;
+    }, [chainId, tokenAddress, tokens]);
+    const tokenSearchEnabled = !isLoading && !token;
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, useTokenSearch_1.useTokenSearch)(chainId, tokenAddress, tokenSearchEnabled);
+    return {
+        token: token ?? searchedToken,
+        isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
+    };
+};
+exports.useToken = useToken;

package/_cjs/hooks/useTokenAddressBalance.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenAddressBalance = void 0;
+const react_1 = require("react");
+const useTokenBalances_1 = require("./useTokenBalances");
+const useTokenAddressBalance = (chainId, tokenAddress) => {
+    const { tokens, tokensWithBalance, isBalanceLoading, refetch } = (0, useTokenBalances_1.useTokenBalances)(chainId);
+    const token = (0, react_1.useMemo)(() => {
+        if (tokenAddress && chainId) {
+            const token = (tokensWithBalance ?? tokens)?.find((token) => token.address === tokenAddress && token.chainId === chainId);
+            return token;
+        }
+    }, [chainId, tokenAddress, tokens, tokensWithBalance]);
+    return {
+        token,
+        isLoading: isBalanceLoading,
+        refetch,
+    };
+};
+exports.useTokenAddressBalance = useTokenAddressBalance;

package/_cjs/hooks/useTokenBalance.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTokenBalancesWithRetry = exports.useTokenBalance = void 0;
+const sdk_1 = require("@lifi/sdk");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const useAccount_1 = require("./useAccount");
+const defaultRefetchInterval = 30000;
+const useTokenBalance = (accountAddress, token, chain) => {
+    const { account } = (0, useAccount_1.useAccount)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    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 = (0, react_1.useMemo)(() => ['token-balance', walletAddress, token?.chainId, token?.address], [token?.address, token?.chainId, walletAddress]);
+    const { data, isLoading, refetch } = (0, react_query_1.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;
+            }
+            const tokenBalances = await (0, exports.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({
+            queryKey: ['token-balances', accountAddress, token?.chainId],
+            exact: false,
+        });
+    };
+    const refetchNewBalance = (0, react_1.useCallback)(() => {
+        queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+            refetchInterval: 250,
+            staleTime: 250,
+        });
+    }, [queryClient, tokenBalanceQueryKey]);
+    return {
+        token: data,
+        isLoading,
+        refetch,
+        refetchNewBalance,
+        refetchAllBalances,
+        getTokenBalancesWithRetry: exports.getTokenBalancesWithRetry,
+    };
+};
+exports.useTokenBalance = useTokenBalance;
+const getTokenBalancesWithRetry = async (accountAddress, tokens, depth = 0) => {
+    try {
+        const tokenBalances = await (0, sdk_1.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 (0, exports.getTokenBalancesWithRetry)(accountAddress, tokens, depth + 1);
+        }
+        return tokenBalances;
+    }
+    catch (error) {
+        //
+    }
+};
+exports.getTokenBalancesWithRetry = getTokenBalancesWithRetry;

package/_cjs/hooks/useTokenBalances.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenBalances = void 0;
+const sdk_1 = require("@lifi/sdk");
+const react_query_1 = require("@tanstack/react-query");
+const viem_1 = require("viem");
+const useAccount_1 = require("./useAccount");
+const useFeaturedTokens_1 = require("./useFeaturedTokens");
+const useTokens_1 = require("./useTokens");
+const defaultRefetchInterval = 32000;
+const useTokenBalances = (selectedChainId) => {
+    const { accounts } = (0, useAccount_1.useAccount)();
+    const featuredTokens = (0, useFeaturedTokens_1.useFeaturedTokens)(selectedChainId);
+    const { tokens, chain, isLoading } = (0, useTokens_1.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, } = (0, react_query_1.useQuery)({
+        queryKey: [
+            'token-balances',
+            account?.address,
+            selectedChainId,
+            tokens?.length,
+        ],
+        queryFn: async ({ queryKey: [, accountAddress] }) => {
+            const tokenBalances = await (0, sdk_1.getTokenBalances)(accountAddress, tokens);
+            const featuredTokenAddresses = new Set(featuredTokens?.map((token) => token.address));
+            const sortFn = (a, b) => parseFloat((0, viem_1.formatUnits)(b.amount ?? 0n, b.decimals)) *
+                parseFloat(b.priceUSD ?? '0') -
+                parseFloat((0, viem_1.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,
+    });
+    return {
+        tokens,
+        tokensWithBalance,
+        featuredTokens,
+        isLoading,
+        isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
+        refetch,
+    };
+};
+exports.useTokenBalances = useTokenBalances;

package/_cjs/hooks/useTokenSearch.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenSearch = void 0;
+const sdk_1 = require("@lifi/sdk");
+const react_query_1 = require("@tanstack/react-query");
+const useTokenSearch = (chainId, tokenQuery, enabled) => {
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const { data, isLoading } = (0, react_query_1.useQuery)({
+        queryKey: ['token-search', chainId, tokenQuery],
+        queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
+            const token = await (0, sdk_1.getToken)(chainId, tokenQuery, {
+                signal,
+            });
+            if (token) {
+                queryClient.setQueriesData({ queryKey: ['tokens'] }, (data) => {
+                    if (data &&
+                        !data.tokens[chainId]?.some((t) => t.address === token.address)) {
+                        const clonedData = { ...data };
+                        clonedData.tokens[chainId]?.push(token);
+                        return clonedData;
+                    }
+                });
+            }
+            return token;
+        },
+        enabled: Boolean(chainId && tokenQuery && enabled),
+        retry: false,
+    });
+    return {
+        token: data,
+        isLoading,
+    };
+};
+exports.useTokenSearch = useTokenSearch;

package/_cjs/hooks/useTokens.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokens = void 0;
+const sdk_1 = require("@lifi/sdk");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const providers_1 = require("../providers");
+const useChains_1 = require("./useChains");
+const useFeaturedTokens_1 = require("./useFeaturedTokens");
+const useTokens = (selectedChainId) => {
+    const { tokens: configTokens } = (0, providers_1.useWidgetConfig)();
+    const { data, isLoading } = (0, react_query_1.useQuery)({
+        queryKey: ['tokens'],
+        queryFn: () => (0, sdk_1.getTokens)({ chainTypes: [sdk_1.ChainType.EVM, sdk_1.ChainType.SVM] }),
+        refetchInterval: 3600000,
+    });
+    const { chains, isLoading: isSupportedChainsLoading, getChainById, } = (0, useChains_1.useChains)();
+    const featuredTokens = (0, useFeaturedTokens_1.useFeaturedTokens)(selectedChainId);
+    const filteredData = (0, react_1.useMemo)(() => {
+        if (isSupportedChainsLoading) {
+            return;
+        }
+        const chain = getChainById(selectedChainId, chains);
+        const chainAllowed = selectedChainId && chain;
+        if (!chainAllowed) {
+            return;
+        }
+        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)
+            .map((token) => token.address);
+        if (deniedTokenAddresses?.length) {
+            filteredTokens = filteredTokens?.filter((token) => !deniedTokenAddresses.includes(token.address));
+        }
+        const featuredTokenAddresses = new Set(featuredTokens?.map((token) => token.address));
+        const tokens = [
+            ...(featuredTokens?.map((token) => {
+                token.featured = true;
+                return token;
+            }) ?? []),
+            ...(filteredTokens?.filter((token) => !featuredTokenAddresses.has(token.address)) ?? []),
+        ];
+        return {
+            tokens,
+            chain,
+        };
+    }, [
+        chains,
+        configTokens?.allow,
+        configTokens?.deny,
+        configTokens?.include,
+        data?.tokens,
+        featuredTokens,
+        getChainById,
+        isSupportedChainsLoading,
+        selectedChainId,
+    ]);
+    return {
+        tokens: filteredData?.tokens,
+        chain: filteredData?.chain,
+        isLoading,
+    };
+};
+exports.useTokens = useTokens;