@lifi/widget 1.16.0 → 1.17.1

package/cjs/hooks/useGasSufficiency.js

@@ -1,4 +1,13 @@
 "use strict";
+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());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,35 +17,28 @@ const big_js_1 = __importDefault(require("big.js"));
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const _1 = require(".");
-const SwapFormProvider_1 = require("../providers/SwapFormProvider");
-const WalletProvider_1 = require("../providers/WalletProvider");
+const providers_1 = require("../providers");
 const useTokenBalances_1 = require("./useTokenBalances");
 const useGasSufficiency = (route) => {
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { account } = (0, providers_1.useWallet)();
     const [fromChainId, toChainId, fromToken] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey('from'),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey('to'),
-            SwapFormProvider_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKeyHelper.getChainKey('from'),
+            providers_1.SwapFormKeyHelper.getChainKey('to'),
+            providers_1.SwapFormKey.FromToken,
         ],
     });
-    const fromAmount = (0, _1.useDebouncedWatch)(SwapFormProvider_1.SwapFormKey.FromAmount, 250);
+    const fromAmount = (0, _1.useDebouncedWatch)(providers_1.SwapFormKey.FromAmount, 250);
     const { getChainById } = (0, _1.useChains)();
     const { tokensWithBalance: fromChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(fromChainId);
-    const { tokensWithBalance: toChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(toChainId);
-    const insufficientGas = (0, react_1.useMemo)(() => {
+    const [insufficientGas, setInsufficientGas] = (0, react_1.useState)();
+    const checkInsufficientGas = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (!account.isActive ||
-            !route ||
-            !fromAmount ||
-            !fromChainTokenBalances ||
-            !toChainTokenBalances) {
-            return [];
+        if (!account.isActive || !route || !fromAmount) {
+            setInsufficientGas(undefined);
+            return;
         }
-        const tokenBalancesByChain = {
-            [fromChainId]: fromChainTokenBalances,
-            [toChainId]: toChainTokenBalances,
-        };
         const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
@@ -61,30 +63,36 @@ 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((0, big_js_1.default)(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)) {
+            setInsufficientGas(undefined);
+            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 = (0, big_js_1.default)((_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 = (0, big_js_1.default)((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
+                    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 : (0, big_js_1.default)(0)) ||
-                    gasTokenBalance.lt((_e = gasCosts[chainId].tokenAmount) !== null && _e !== void 0 ? _e : (0, big_js_1.default)(0));
+                    gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : (0, big_js_1.default)(0)) ||
+                    gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : (0, big_js_1.default)(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 = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -97,6 +105,9 @@ const useGasSufficiency = (route) => {
         const balance = (0, big_js_1.default)((_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 (0, big_js_1.default)(fromAmount).gt(balance);
     }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+    (0, react_1.useEffect)(() => {
+        checkInsufficientGas();
+    }, [checkInsufficientGas]);
     return {
         insufficientGas,
         insufficientFunds,

package/cjs/hooks/useInitializer.js

@@ -2,8 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInitializer = void 0;
 /* eslint-disable no-underscore-dangle */
+const sdk_1 = require("@lifi/sdk");
+const react_1 = require("react");
+const version_1 = require("../config/version");
 const useTools_1 = require("./useTools");
 const useInitializer = () => {
     (0, useTools_1.useTools)();
+    (0, react_1.useEffect)(() => {
+        (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+    }, []);
 };
 exports.useInitializer = useInitializer;

package/cjs/hooks/useRouteExecution.js

@@ -16,28 +16,42 @@ exports.useRouteExecution = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const shallow_1 = __importDefault(require("zustand/shallow"));
-const lifi_1 = require("../config/lifi");
-const WalletProvider_1 = require("../providers/WalletProvider");
+const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const events_1 = require("../types/events");
 const utils_1 = require("../utils");
 const useWidgetEvents_1 = require("./useWidgetEvents");
 const useRouteExecution = (routeId, executeInBackground) => {
-    const { account, switchChain } = (0, WalletProvider_1.useWallet)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { account, switchChain } = (0, providers_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
     const emitter = (0, useWidgetEvents_1.useWidgetEvents)();
     const routeExecution = (0, stores_1.useRouteStore)((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.default);
     const updateCallback = (updatedRoute) => {
+        const routeExecution = stores_1.useRouteStore.getState().routes[updatedRoute.id];
+        if (!routeExecution) {
+            return;
+        }
         const clonedUpdatedRoute = (0, utils_1.deepClone)(updatedRoute);
-        console.log('Route updated.', clonedUpdatedRoute);
         updateRoute(clonedUpdatedRoute);
+        const process = (0, stores_1.getUpdatedProcess)(routeExecution.route, clonedUpdatedRoute);
+        if (process) {
+            emitter.emit(events_1.WidgetEvent.RouteExecutionUpdated, {
+                route: clonedUpdatedRoute,
+                process,
+            });
+        }
         if ((0, stores_1.isRouteCompleted)(clonedUpdatedRoute)) {
-            emitter.emit(events_1.WidgetEvent.SwapCompleted);
+            emitter.emit(events_1.WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
         }
-        if ((0, stores_1.isRouteFailed)(clonedUpdatedRoute)) {
-            emitter.emit(events_1.WidgetEvent.SwapFailed);
+        if ((0, stores_1.isRouteFailed)(clonedUpdatedRoute) && process) {
+            emitter.emit(events_1.WidgetEvent.RouteExecutionFailed, {
+                route: clonedUpdatedRoute,
+                process,
+            });
         }
+        console.log('Route updated.', clonedUpdatedRoute);
     };
     const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
@@ -59,7 +73,7 @@ const useRouteExecution = (routeId, executeInBackground) => {
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return lifi_1.LiFi.executeRoute(account.signer, routeExecution.route, {
+        return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
@@ -68,7 +82,9 @@ const useRouteExecution = (routeId, executeInBackground) => {
     }, {
         onMutate: () => {
             console.log('Execution started.', routeId);
-            emitter.emit(events_1.WidgetEvent.SwapStarted);
+            if (routeExecution) {
+                emitter.emit(events_1.WidgetEvent.RouteExecutionStarted, routeExecution.route);
+            }
         },
     });
     const resumeRouteMutation = (0, react_query_1.useMutation)((resumedRoute) => {
@@ -78,7 +94,7 @@ const useRouteExecution = (routeId, executeInBackground) => {
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return lifi_1.LiFi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
+        return lifi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
@@ -138,11 +154,11 @@ const useRouteExecution = (routeId, executeInBackground) => {
             if (!route || !(0, stores_1.isRouteActive)(route)) {
                 return;
             }
-            lifi_1.LiFi.updateRouteExecution(route, { executeInBackground: true });
+            lifi.updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
-    }, [routeId]);
+    }, [lifi, routeId]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,

package/cjs/hooks/useSwapRoutes.js

@@ -18,14 +18,13 @@ const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = __importDefault(require("big.js"));
 const react_hook_form_1 = require("react-hook-form");
 const _1 = require(".");
-const lifi_1 = require("../config/lifi");
-const SwapFormProvider_1 = require("../providers/SwapFormProvider");
-const WalletProvider_1 = require("../providers/WalletProvider");
+const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const refetchTime = 60000;
 const useSwapRoutes = () => {
     var _a;
-    const { account, provider } = (0, WalletProvider_1.useWallet)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { account, provider } = (0, providers_1.useWallet)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = (0, stores_1.useSettings)([
         'slippage',
@@ -35,14 +34,14 @@ const useSwapRoutes = () => {
     ]);
     const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKey.FromChain,
-            SwapFormProvider_1.SwapFormKey.FromToken,
-            SwapFormProvider_1.SwapFormKey.ToChain,
-            SwapFormProvider_1.SwapFormKey.ToToken,
-            SwapFormProvider_1.SwapFormKey.ToAddress,
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.ToToken,
+            providers_1.SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([SwapFormProvider_1.SwapFormKey.FromAmount], 250);
+    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 250);
     const { token } = (0, _1.useToken)(fromChainId, fromTokenAddress);
     const isEnabled = 
     // Boolean(account.address) &&
@@ -81,7 +80,7 @@ const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
         }
-        return lifi_1.LiFi.getRoutes({
+        return lifi.getRoutes({
             fromChainId,
             fromAmount: (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
             fromTokenAddress,

package/cjs/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/cjs/hooks/useToken.js

@@ -4,7 +4,7 @@ exports.useToken = void 0;
 const react_1 = require("react");
 const useTokens_1 = require("./useTokens");
 const useToken = (chainId, tokenAddress) => {
-    const { tokens, isLoading, isFetching } = (0, useTokens_1.useTokens)(chainId);
+    const { tokens, isLoading } = (0, useTokens_1.useTokens)(chainId);
     const token = (0, react_1.useMemo)(() => {
         const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
@@ -12,7 +12,6 @@ const useToken = (chainId, tokenAddress) => {
     return {
         token,
         isLoading,
-        isFetching,
     };
 };
 exports.useToken = useToken;

package/cjs/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/cjs/hooks/useTokenBalances.js

@@ -13,24 +13,24 @@ exports.useTokenBalances = void 0;
 /* eslint-disable consistent-return */
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const lifi_1 = require("../config/lifi");
-const WalletProvider_1 = require("../providers/WalletProvider");
+const providers_1 = require("../providers");
 const utils_1 = require("../utils");
 const useFeaturedTokens_1 = require("./useFeaturedTokens");
 const useTokens_1 = require("./useTokens");
 const defaultRefetchInterval = 60000;
 const minRefetchInterval = 1000;
 const useTokenBalances = (selectedChainId) => {
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { account } = (0, providers_1.useWallet)();
     const featuredTokens = (0, useFeaturedTokens_1.useFeaturedTokens)(selectedChainId);
     const { tokens, isLoading } = (0, useTokens_1.useTokens)(selectedChainId);
     const [refetchInterval, setRefetchInterval] = (0, react_1.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, } = (0, react_query_1.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, } = (0, react_query_1.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;
         }
-        const tokenBalances = yield lifi_1.LiFi.getTokenBalances(accountAddress, tokens);
+        const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
             // TODO: fix and remove backplane
@@ -73,7 +73,6 @@ const useTokenBalances = (selectedChainId) => {
         featuredTokens,
         isLoading,
         isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
-        isBalanceFetched,
         refetch,
     };
 };

package/cjs/hooks/useTokenSearch.js

@@ -11,11 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokenSearch = void 0;
 const react_query_1 = require("@tanstack/react-query");
-const lifi_1 = require("../config/lifi");
+const providers_1 = require("../providers");
 const useTokenSearch = (token, chainId, enabled) => {
+    const lifi = (0, providers_1.useLiFi)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { data, isLoading, isFetching, isFetched } = (0, react_query_1.useQuery)(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
-        const data = yield lifi_1.LiFi.getToken(chainId, token, {
+        const data = yield lifi.getToken(chainId, token, {
             signal,
         });
         if (data) {

package/cjs/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/cjs/hooks/useTokens.js

@@ -11,26 +11,49 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokens = void 0;
 const react_query_1 = require("@tanstack/react-query");
-const lifi_1 = require("../config/lifi");
+const providers_1 = require("../providers");
 const useFeaturedTokens_1 = require("./useFeaturedTokens");
 const useTokens = (selectedChainId) => {
+    var _a, _b, _c, _d;
+    const lifi = (0, providers_1.useLiFi)();
     const featuredTokens = (0, useFeaturedTokens_1.useFeaturedTokens)(selectedChainId);
-    const { data: tokens, isLoading, isFetching, } = (0, react_query_1.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_1.LiFi.getTokens({ chains: [selectedChainId] });
+    const { tokens, chains, disabledChains } = (0, providers_1.useWidgetConfig)();
+    const { data, isLoading } = (0, react_query_1.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 &&
+            (0, providers_1.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,
     };
 };
 exports.useTokens = useTokens;

package/cjs/hooks/useTools.js

@@ -3,14 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTools = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const lifi_1 = require("../config/lifi");
+const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const useTools = () => {
-    const initializeTools = (0, stores_1.useSettingsStore)((state) => state.initializeTools);
-    const { data } = (0, react_query_1.useQuery)(['tools'], ({ signal }) => lifi_1.LiFi.getTools(undefined, { signal }), {
+    const lifi = (0, providers_1.useLiFi)();
+    const { bridges, exchanges } = (0, providers_1.useWidgetConfig)();
+    const { data } = (0, react_query_1.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 } = stores_1.useSettingsStore.getState();
+            initializeTools('Bridges', data.bridges
+                .filter((bridge) => (0, providers_1.isItemAllowed)(bridge.key, bridges))
+                .map((bridge) => bridge.key));
+            initializeTools('Exchanges', data.exchanges
+                .filter((exchange) => (0, providers_1.isItemAllowed)(exchange.key, exchanges))
+                .map((exchange) => exchange.key));
         },
     });
     const formattedTools = (0, react_1.useMemo)(() => ({

package/cjs/hooks/useWidgetEvents.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="node" />
-import { EventEmitter } from 'events';
-export declare const useWidgetEvents: () => EventEmitter;
+import type { Emitter } from 'mitt';
+import type { WidgetEvents } from '../types';
+export declare const useWidgetEvents: () => Emitter<WidgetEvents>;

package/cjs/hooks/useWidgetEvents.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWidgetEvents = void 0;
-const events_1 = require("events");
+const mitt_1 = __importDefault(require("mitt"));
 const zustand_1 = __importDefault(require("zustand"));
-const emitterStore = (0, zustand_1.default)()(() => new events_1.EventEmitter());
+const emitterStore = (0, zustand_1.default)()(() => (0, mitt_1.default)());
 const useWidgetEvents = () => {
     return emitterStore();
 };

package/cjs/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/cjs/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/cjs/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import './fonts/inter.css';
+export type { WidgetDrawer, WidgetDrawerProps } from './AppDrawer';
 export { useWidgetEvents } from './hooks';
 export * from './types';
 export declare const LiFiWidget: import("react").FC<import("./AppProvider").AppProps>;
-export declare const LiFiWidgetDrawer: import("react").ForwardRefExoticComponent<Pick<import("./AppDrawer").AppDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<import("./AppDrawer").AppDrawerBase>>;
+export declare const LiFiWidgetDrawer: import("react").ForwardRefExoticComponent<Pick<import("./AppDrawer").WidgetDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<import("./AppDrawer").WidgetDrawer>>;

package/cjs/pages/MainPage/MainSwapButton.js

@@ -31,6 +31,6 @@ const MainSwapButton = () => {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || !currentRoute || isValidating || !isValid }));
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid }));
 };
 exports.MainSwapButton = MainSwapButton;

package/cjs/pages/SettingsPage/AdvancedPreferences.js

@@ -10,7 +10,7 @@ const EnabledBridgesSelect_1 = require("./EnabledBridgesSelect");
 const EnabledExchangesSelect_1 = require("./EnabledExchangesSelect");
 const AdvancedPreferences = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { advancedPreferences } = (0, stores_1.useSettings)(['advancedPreferences']);
     const handleAdvancedPreferences = (_, checked) => {
         setValue('advancedPreferences', checked);

package/cjs/pages/SettingsPage/GasPriceSelect.js

@@ -10,7 +10,7 @@ const Select_1 = require("../../components/Select");
 const stores_1 = require("../../stores");
 const GasPriceSelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { gasPrice } = (0, stores_1.useSettings)(['gasPrice']);
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1 }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.gasPrice.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
 };

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -11,7 +11,7 @@ const Select_1 = require("../../components/Select");
 const stores_1 = require("../../stores");
 const RoutePrioritySelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);