@lifi/widget 1.16.1 → 1.17.0

package/components/Header/useHeaderActionStore.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import type { HeaderActionStore } from './types';
 export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
     setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetHeaderAction: () => (element?: import("react").ReactNode) => () => void;

package/components/Header/useHeaderActionStore.js

@@ -14,6 +14,3 @@ export const useHeaderActionStore = create()(immer((set, get) => ({
         });
     },
 })));
-export const useSetHeaderAction = () => {
-    return useHeaderActionStore((state) => state.setAction);
-};

package/components/SwapButton/SwapButton.js

@@ -8,51 +8,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId } from '@lifi/sdk';
 import { Button } from '@mui/material';
-import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useGasSufficiency } from '../../hooks';
-import { SwapFormKeyHelper, useWallet, useWidgetConfig } from '../../providers';
+import { useGasSufficiency } from '../../hooks';
+import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
-    var _a;
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { getChainById } = useChains();
     const config = useWidgetConfig();
-    const { account, switchChain, connect: walletConnect } = useWallet();
+    const { account, connect } = useWallet();
     const { insufficientFunds, insufficientGas } = useGasSufficiency(currentRoute);
-    const [chainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey('from')],
-    });
-    // Allow switching chain only if execution is not started
-    const switchChainAllowed = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
-        currentRoute &&
-        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
-                yield walletConnect();
+                yield connect();
             }
             else {
                 navigate(navigationRoutes.selectWallet);
             }
         }
-        else if (switchChainAllowed) {
-            yield switchChain(chainId);
-            // check that the current route exists in the up to date route list
-        }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (switchChainAllowed) {
-                return t(`button.switchChain`);
-            }
             if (!currentRoute) {
                 return t(`button.swap`);
             }
@@ -60,7 +42,5 @@ export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: currentRoute &&
-            !switchChainAllowed &&
-            (insufficientFunds || !!insufficientGas.length || disable), fullWidth: true }, { children: getButtonText() })));
+    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true }, { children: getButtonText() })));
 };

package/components/TokenList/TokenList.js

@@ -50,5 +50,5 @@ export const TokenList = ({ formType, height, onClick, }) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);
-    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? _jsx(TokenNotFound, {}) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };

package/components/TokenList/TokenList.style.js

@@ -4,7 +4,8 @@ import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
     '&:hover': {
@@ -18,8 +19,8 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     height: 64,
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1.5),
     [`.${listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(5),
+        right: theme.spacing(3),
     },
 }));

package/components/TokenList/TokenListItem.js

@@ -16,7 +16,7 @@ export const TokenListItem = memo(({ onClick, size, start, token, showBalance, i
                                 }) }))) : null] })))) : null] })), endAdornment] })));
 });
 export const TokenListItemSkeleton = () => {
-    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };
 export const TokenAmountSkeleton = () => {
     return (_jsxs(Box, Object.assign({ sx: {

package/components/TokenList/TokenNotFound.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const TokenNotFound: React.FC;
+import type { SwapFormTypeProps } from '../../providers';
+export declare const TokenNotFound: React.FC<SwapFormTypeProps>;

package/components/TokenList/TokenNotFound.js

@@ -1,9 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SearchOff as SearchOffIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
+import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-export const TokenNotFound = () => {
+import { useChains } from '../../hooks';
+import { SwapFormKeyHelper } from '../../providers';
+export const TokenNotFound = ({ formType }) => {
+    var _a;
     const { t } = useTranslation();
+    const [selectedChainId] = useWatch({
+        name: [SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const { getChainById } = useChains();
     return (_jsxs(Box, Object.assign({ sx: {
             display: 'flex',
             justifyContent: 'center',
@@ -11,5 +19,7 @@ export const TokenNotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: _jsx(SearchOffIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.couldntFindTokens') }))] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: _jsx(SearchOffIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.info.message.emptyTokenList', {
+                    chainName: (_a = getChainById(selectedChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                }) }))] })));
 };

package/components/TokenList/types.d.ts

@@ -1,9 +1,9 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers';
+import type { SwapFormType } from '../../providers';
 import type { Token } from '../../types';
 export interface TokenListProps {
-    formType: SwapFormDirection;
+    formType: SwapFormType;
     height: number;
     onClick?(): void;
 }

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.16.1";
+export declare const version = "1.17.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.16.1';
+export const version = '1.17.0';

package/hooks/useChains.js

@@ -9,24 +9,37 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useLiFi, useWidgetConfig } from '../providers';
-import { useSetChainOrder } from '../stores/chains';
+import { useFormContext } from 'react-hook-form';
+import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
+import { useChainOrderStore } from '../stores/chains';
 export const useChains = () => {
-    const { disabledChains } = useWidgetConfig();
+    const { disabledChains, chains } = useWidgetConfig();
     const lifi = useLiFi();
-    const [, initializeChains] = useSetChainOrder();
+    const { getValues, setValue } = useFormContext();
     const { data, isLoading } = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield lifi.getChains();
-        const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-        initializeChains(filteredChains.map((chain) => chain.id));
-        return filteredChains;
+        const availableChains = yield lifi.getChains();
+        const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains, disabledChains));
+        const chainOrder = useChainOrderStore
+            .getState()
+            .initializeChains(filteredChains.map((chain) => chain.id));
+        const [fromChainValue, toChainValue] = getValues([
+            SwapFormKey.FromChain,
+            SwapFormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+            setValue(SwapFormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+            setValue(SwapFormKey.ToChain, chainOrder[0]);
+        }
+        return { availableChains, filteredChains };
     }));
     const getChainById = useCallback((chainId) => {
-        const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
+        const chain = data === null || data === void 0 ? void 0 : data.availableChains.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 };
+    return { chains: data === null || data === void 0 ? void 0 : data.filteredChains, getChainById, isLoading };
 };

package/hooks/useFeaturedTokens.d.ts

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

package/hooks/useFeaturedTokens.js

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 import { useWidgetConfig } from '../providers';
 export const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens } = useWidgetConfig();
-    return useMemo(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+    const { featuredTokens, tokens } = useWidgetConfig();
+    return useMemo(() => {
+        var _a;
+        return [...((_a = tokens === null || tokens === void 0 ? void 0 : tokens.featured) !== null && _a !== void 0 ? _a : []), ...(featuredTokens !== null && featuredTokens !== void 0 ? featuredTokens : [])].filter((token) => token.chainId === selectedChainId);
+    }, [featuredTokens, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.featured]);
 };

package/hooks/useGasSufficiency.d.ts

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

package/hooks/useGasSufficiency.js

@@ -1,10 +1,20 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import Big from 'big.js';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../providers';
+import { SwapFormKey, SwapFormKeyHelper, useLiFi, useWallet, } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
+    const lifi = useLiFi();
     const { account } = useWallet();
     const [fromChainId, toChainId, fromToken] = useWatch({
         name: [
@@ -16,20 +26,12 @@ export const useGasSufficiency = (route) => {
     const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
     const { getChainById } = useChains();
     const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
-    const { tokensWithBalance: toChainTokenBalances } = useTokenBalances(toChainId);
-    const insufficientGas = useMemo(() => {
+    const [insufficientGas, setInsufficientGas] = useState();
+    const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (!account.isActive ||
-            !route ||
-            !fromAmount ||
-            !fromChainTokenBalances ||
-            !toChainTokenBalances) {
-            return [];
+        if (!account.isActive || !route || !fromAmount) {
+            return;
         }
-        const tokenBalancesByChain = {
-            [fromChainId]: fromChainTokenBalances,
-            [toChainId]: toChainTokenBalances,
-        };
         const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
@@ -54,30 +56,34 @@ export const useGasSufficiency = (route) => {
             route.fromToken.address === gasCosts[fromChainId].token.address) {
             gasCosts[fromChainId].tokenAmount = (_a = gasCosts[fromChainId]) === null || _a === void 0 ? void 0 : _a.gasAmount.plus(Big(fromAmount));
         }
+        const tokenBalances = yield lifi.getTokenBalances(account.address, Object.values(gasCosts).map((item) => item.token));
+        if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
+            return;
+        }
         [fromChainId, toChainId].forEach((chainId) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
-                const gasTokenBalance = Big((_c = (_b = (_a = tokenBalancesByChain[chainId]) === null || _a === void 0 ? void 0 : _a.find((t) => t.address === gasCosts[chainId].token.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
+                const gasTokenBalance = Big((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.address === gasCosts[chainId].token.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
                 const insufficientFromChainGas = gasTokenBalance.lte(0) ||
-                    gasTokenBalance.lt((_d = gasCosts[chainId].gasAmount) !== null && _d !== void 0 ? _d : Big(0)) ||
-                    gasTokenBalance.lt((_e = gasCosts[chainId].tokenAmount) !== null && _e !== void 0 ? _e : Big(0));
+                    gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : Big(0)) ||
+                    gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : Big(0));
                 const insufficientFromChainGasAmount = insufficientFromChainGas
-                    ? (_g = (_f = gasCosts[chainId].tokenAmount) === null || _f === void 0 ? void 0 : _f.minus(gasTokenBalance)) !== null && _g !== void 0 ? _g : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
+                    ? (_f = (_e = gasCosts[chainId].tokenAmount) === null || _e === void 0 ? void 0 : _e.minus(gasTokenBalance)) !== null && _f !== void 0 ? _f : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
                     : undefined;
                 gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        return gasCostResult;
-    }, [
+        setInsufficientGas(gasCostResult);
+    }), [
+        account.address,
         account.isActive,
         fromAmount,
         fromChainId,
-        fromChainTokenBalances,
         getChainById,
+        lifi,
         route,
         toChainId,
-        toChainTokenBalances,
     ]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
@@ -90,6 +96,9 @@ export const useGasSufficiency = (route) => {
         const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
         return Big(fromAmount).gt(balance);
     }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+    useEffect(() => {
+        checkInsufficientGas();
+    }, [checkInsufficientGas]);
     return {
         insufficientGas,
         insufficientFunds,

package/hooks/useToken.d.ts

@@ -1,5 +1,4 @@
 export declare const useToken: (chainId: number, tokenAddress: string) => {
     token: import("..").Token | undefined;
     isLoading: boolean;
-    isFetching: boolean;
 };

package/hooks/useToken.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useTokens } from './useTokens';
 export const useToken = (chainId, tokenAddress) => {
-    const { tokens, isLoading, isFetching } = useTokens(chainId);
+    const { tokens, isLoading } = useTokens(chainId);
     const token = useMemo(() => {
         const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
@@ -9,6 +9,5 @@ export const useToken = (chainId, tokenAddress) => {
     return {
         token,
         isLoading,
-        isFetching,
     };
 };

package/hooks/useTokenBalances.d.ts

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

package/hooks/useTokenBalances.js

@@ -23,7 +23,7 @@ export const useTokenBalances = (selectedChainId) => {
     const { tokens, isLoading } = useTokens(selectedChainId);
     const [refetchInterval, setRefetchInterval] = useState(defaultRefetchInterval);
     const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length);
-    const { data: tokensWithBalance, isLoading: isBalanceLoading, isFetched: isBalanceFetched, refetch, } = useQuery(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
         if (!accountAddress || !tokens) {
             return;
         }
@@ -70,7 +70,6 @@ export const useTokenBalances = (selectedChainId) => {
         featuredTokens,
         isLoading,
         isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
-        isBalanceFetched,
         refetch,
     };
 };

package/hooks/useTokens.d.ts

@@ -1,6 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokens: (selectedChainId: number) => {
+export declare const useTokens: (selectedChainId?: number) => {
     tokens: Token[] | undefined;
     isLoading: boolean;
-    isFetching: boolean;
 };

package/hooks/useTokens.js

@@ -8,26 +8,48 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery } from '@tanstack/react-query';
-import { useLiFi } from '../providers';
+import { isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
 import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
+    var _a, _b, _c, _d;
     const lifi = useLiFi();
     const featuredTokens = useFeaturedTokens(selectedChainId);
-    const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId, featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length], () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
-        const data = yield lifi.getTokens({ chains: [selectedChainId] });
+    const { tokens, chains, disabledChains } = useWidgetConfig();
+    const { data, isLoading } = useQuery([
+        'tokens',
+        selectedChainId,
+        featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length,
+        (_a = tokens === null || tokens === void 0 ? void 0 : tokens.allow) === null || _a === void 0 ? void 0 : _a.length,
+        (_b = tokens === null || tokens === void 0 ? void 0 : tokens.deny) === null || _b === void 0 ? void 0 : _b.length,
+        (_c = chains === null || chains === void 0 ? void 0 : chains.allow) === null || _c === void 0 ? void 0 : _c.length,
+        (_d = chains === null || chains === void 0 ? void 0 : chains.deny) === null || _d === void 0 ? void 0 : _d.length,
+    ], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f, _g, _h, _j;
+        const chainAllowed = selectedChainId &&
+            isItemAllowed(selectedChainId, chains, disabledChains);
+        if (!chainAllowed) {
+            return [];
+        }
+        let filteredTokens = (_e = tokens === null || tokens === void 0 ? void 0 : tokens.allow) === null || _e === void 0 ? void 0 : _e.filter((token) => token.chainId === selectedChainId);
+        if (!(filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.length)) {
+            const data = yield lifi.getTokens({ chains: [selectedChainId] });
+            filteredTokens = (_f = data.tokens) === null || _f === void 0 ? void 0 : _f[selectedChainId];
+        }
+        const deniedTokenAddresses = (_g = tokens === null || tokens === void 0 ? void 0 : tokens.deny) === null || _g === void 0 ? void 0 : _g.filter((token) => token.chainId === selectedChainId).map((token) => token.address);
+        if (deniedTokenAddresses === null || deniedTokenAddresses === void 0 ? void 0 : deniedTokenAddresses.length) {
+            filteredTokens = filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.filter((token) => !deniedTokenAddresses.includes(token.address));
+        }
         const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
         return [
-            ...((_a = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {
+            ...((_h = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {
                 token.featured = true;
                 return token;
-            })) !== null && _a !== void 0 ? _a : []),
-            ...((_c = (_b = data.tokens) === null || _b === void 0 ? void 0 : _b[selectedChainId].filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _c !== void 0 ? _c : []),
+            })) !== null && _h !== void 0 ? _h : []),
+            ...((_j = filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _j !== void 0 ? _j : []),
         ];
     }));
     return {
-        tokens,
+        tokens: data,
         isLoading,
-        isFetching,
     };
 };

package/hooks/useTools.js

@@ -1,14 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { useLiFi } from '../providers';
+import { isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
 import { useSettingsStore } from '../stores';
 export const useTools = () => {
     const lifi = useLiFi();
-    const initializeTools = useSettingsStore((state) => state.initializeTools);
+    const { bridges, exchanges } = useWidgetConfig();
     const { data } = useQuery(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
         onSuccess(data) {
-            initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
-            initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
+            const { initializeTools } = useSettingsStore.getState();
+            initializeTools('Bridges', data.bridges
+                .filter((bridge) => isItemAllowed(bridge.key, bridges))
+                .map((bridge) => bridge.key));
+            initializeTools('Exchanges', data.exchanges
+                .filter((exchange) => isItemAllowed(exchange.key, exchanges))
+                .map((exchange) => exchange.key));
         },
     });
     const formattedTools = useMemo(() => ({

package/i18n/en/translation.json

@@ -15,7 +15,6 @@
   },
   "button": {
     "connectWallet": "Connect wallet",
-    "switchChain": "Switch chain",
     "swap": "Swap",
     "reviewSwap": "Review swap",
     "startSwap": "Start swap",
@@ -56,7 +55,6 @@
     "featuredTokens": "Featured tokens",
     "otherTokens": "Other tokens",
     "inProgress": "in progress",
-    "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
@@ -92,7 +90,8 @@
       "message": {
         "routeNotFound": "Try another token combination.",
         "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data.",
-        "emptyActiveSwaps": "Swaps in progress will appear here. Once completed, find them in swap history."
+        "emptyActiveSwaps": "Swaps in progress will appear here. Once completed, find them in swap history.",
+        "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please try search again or choose another chain."
       }
     },
     "warning": {

package/i18n/index.d.ts

@@ -18,7 +18,6 @@ export declare const resources: {
             };
             button: {
                 connectWallet: string;
-                switchChain: string;
                 swap: string;
                 reviewSwap: string;
                 startSwap: string;
@@ -59,7 +58,6 @@ export declare const resources: {
                 featuredTokens: string;
                 otherTokens: string;
                 inProgress: string;
-                couldntFindTokens: string;
                 stepSwap: string;
                 stepBridge: string;
                 stepSwapAndBridge: string;
@@ -96,6 +94,7 @@ export declare const resources: {
                         routeNotFound: string;
                         emptySwapHistory: string;
                         emptyActiveSwaps: string;
+                        emptyTokenList: string;
                     };
                 };
                 warning: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -50,7 +50,7 @@
     "@sentry/integrations": "^7.12.1",
     "@sentry/react": "^7.12.1",
     "@sentry/tracing": "^7.12.1",
-    "@tanstack/react-query": "^4.2.3",
+    "@tanstack/react-query": "^4.3.4",
     "@tanstack/react-virtual": "^3.0.0-beta.17",
     "big.js": "^6.2.1",
     "events": "^3.3.0",
@@ -58,8 +58,8 @@
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.34.2",
-    "react-i18next": "^11.18.5",
+    "react-hook-form": "^7.35.0",
+    "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
     "zustand": "^4.1.1"

package/pages/MainPage/MainSwapButton.js

@@ -28,5 +28,5 @@ export const MainSwapButton = () => {
             });
         }
     });
-    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || !currentRoute || isValidating || !isValid }));
+    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid }));
 };

package/pages/SettingsPage/AdvancedPreferences.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
-import { useSetSettings, useSettings } from '../../stores';
+import { useSettings, useSettingsStore } from '../../stores';
 import { EnabledBridgesSelect } from './EnabledBridgesSelect';
 import { EnabledExchangesSelect } from './EnabledExchangesSelect';
 export const AdvancedPreferences = () => {
     const { t } = useTranslation();
-    const [setValue] = useSetSettings();
+    const setValue = useSettingsStore((state) => state.setValue);
     const { advancedPreferences } = useSettings(['advancedPreferences']);
     const handleAdvancedPreferences = (_, checked) => {
         setValue('advancedPreferences', checked);

package/pages/SettingsPage/GasPriceSelect.js

@@ -4,10 +4,10 @@ import { FormControl, MenuItem } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useSetSettings, useSettings } from '../../stores';
+import { useSettings, useSettingsStore } from '../../stores';
 export const GasPriceSelect = () => {
     const { t } = useTranslation();
-    const [setValue] = useSetSettings();
+    const setValue = useSettingsStore((state) => state.setValue);
     const { gasPrice } = useSettings(['gasPrice']);
     return (_jsxs(Card, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
 };