@lifi/widget 1.17.0 → 1.17.2

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRoutesPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
 const Header_1 = require("../../components/Header");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../../components/SwapRouteCard");
@@ -12,8 +11,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const SwapRoutesPage_style_1 = require("./SwapRoutesPage.style");
 const SwapRoutesPage = () => {
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
@@ -24,7 +22,7 @@ const SwapRoutesPage = () => {
     };
     (0, react_1.useEffect)(() => {
         if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-            navigate(pathname.substring(0, pathname.lastIndexOf('/')));
+            navigateBack();
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDKProvider = exports.useLiFi = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = __importDefault(require("@lifi/sdk"));
+const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const WidgetProvider_1 = require("../WidgetProvider");
 let lifi;

package/cjs/stores/chains/useChainOrder.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrder = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useChainOrderStore_1 = require("./useChainOrderStore");
 const useChainOrder = () => {
     return (0, useChainOrderStore_1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.default);

package/cjs/stores/chains/useChainOrderStore.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrderStore = exports.maxChainToOrder = void 0;
 /* eslint-disable no-underscore-dangle */
-const zustand_1 = __importDefault(require("zustand"));
+const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 exports.maxChainToOrder = 9;

package/cjs/stores/route/useExecutingRoutesIds.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExecutingRoutesIds = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useRouteStore_1 = require("./useRouteStore");
 const useExecutingRoutesIds = (address) => {
     return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)

package/cjs/stores/route/useRouteStore.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRouteStore = void 0;
-const zustand_1 = __importDefault(require("zustand"));
+const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const utils_1 = require("./utils");

package/cjs/stores/route/useSwapHistory.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapHistory = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useRouteStore_1 = require("./useRouteStore");
 const useSwapHistory = (address) => {
     return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)

package/cjs/stores/route/utils.d.ts

@@ -1,4 +1,5 @@
-import type { Route } from '@lifi/sdk';
+import type { Process, Route } from '@lifi/sdk';
 export declare const isRouteCompleted: (route: Route) => boolean;
 export declare const isRouteFailed: (route: Route) => boolean;
 export declare const isRouteActive: (route?: Route) => boolean;
+export declare const getUpdatedProcess: (currentRoute: Route, updatedRoute: Route) => Process | undefined;

package/cjs/stores/route/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRouteActive = exports.isRouteFailed = exports.isRouteCompleted = void 0;
+exports.getUpdatedProcess = exports.isRouteActive = exports.isRouteFailed = exports.isRouteCompleted = void 0;
+const microdiff_1 = require("microdiff");
 const isRouteCompleted = (route) => {
     return route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
 };
@@ -19,3 +20,15 @@ const isRouteActive = (route) => {
     return !isDone && !isFailed && alreadyStarted;
 };
 exports.isRouteActive = isRouteActive;
+const getUpdatedProcess = (currentRoute, updatedRoute) => {
+    const processDiff = (0, microdiff_1.default)(currentRoute, updatedRoute).find((diff) => diff.path.includes('process'));
+    if (!processDiff) {
+        return undefined;
+    }
+    // e.g. ['steps', 0, 'execution', 'process', 0]
+    const process = processDiff.path
+        .slice(0, processDiff.path.findIndex((path) => path === 'process') + 2)
+        .reduce((obj, path) => obj[path], updatedRoute);
+    return process;
+};
+exports.getUpdatedProcess = getUpdatedProcess;

package/cjs/stores/settings/useAppearance.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAppearance = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useSettingsStore_1 = require("./useSettingsStore");
 const useAppearance = () => {
     const [appearance, setValue] = (0, useSettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.default);

package/cjs/stores/settings/useSettings.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettings = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useSettingsStore_1 = require("./useSettingsStore");
 const useSettings = (keys) => {
     return (0, useSettingsStore_1.useSettingsStore)((state) => keys.reduce((values, key) => {

package/cjs/stores/settings/useSettingsStore.js

@@ -10,13 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettingsStore = void 0;
 /* eslint-disable no-underscore-dangle */
-const zustand_1 = __importDefault(require("zustand"));
+const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");

package/cjs/types/events.d.ts

@@ -1,5 +1,17 @@
+import type { Process, Route } from '@lifi/sdk';
 export declare enum WidgetEvent {
-    SwapStarted = "swapStarted",
-    SwapCompleted = "swapCompleted",
-    SwapFailed = "swapFailed"
+    RouteExecutionStarted = "routeExecutionStarted",
+    RouteExecutionUpdated = "routeExecutionUpdated",
+    RouteExecutionCompleted = "routeExecutionCompleted",
+    RouteExecutionFailed = "routeExecutionFailed"
+}
+export declare type WidgetEvents = {
+    routeExecutionStarted: Route;
+    routeExecutionUpdated: RouteExecutionUpdate;
+    routeExecutionCompleted: Route;
+    routeExecutionFailed: RouteExecutionUpdate;
+};
+export interface RouteExecutionUpdate {
+    route: Route;
+    process: Process;
 }

package/cjs/types/events.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetEvent = void 0;
 var WidgetEvent;
 (function (WidgetEvent) {
-    WidgetEvent["SwapStarted"] = "swapStarted";
-    WidgetEvent["SwapCompleted"] = "swapCompleted";
-    WidgetEvent["SwapFailed"] = "swapFailed";
+    WidgetEvent["RouteExecutionStarted"] = "routeExecutionStarted";
+    WidgetEvent["RouteExecutionUpdated"] = "routeExecutionUpdated";
+    WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
+    WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
 })(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));

package/cjs/utils/format.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatTokenPrice = exports.formatAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
-const big_js_1 = __importDefault(require("big.js"));
+const big_js_1 = require("big.js");
 // JavaScript numbers use exponential notation for positive exponents of 21 and above. We need more.
 big_js_1.default.PE = 42;
 // JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/Step/CircularProgress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Status } from '@lifi/sdk';
 export declare function CircularProgress({ status }: {
     status: Status;

package/components/SwapButton/ButtonTooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ButtonTooltip: ({ title, children, }: {
     title?: string | undefined;
     children: JSX.Element;

package/components/SwapInput/SwapInputAdornment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInputAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/TokenList/TokenList.js

@@ -23,7 +23,10 @@ export const TokenList = ({ formType, height, onClick, }) => {
             token.symbol.toUpperCase().includes(searchFilter) ||
             token.address.toUpperCase().includes(searchFilter))
         : filteredTokens;
-    const tokenSearchEnabled = !filteredTokens.length && !isTokensLoading;
+    const tokenSearchEnabled = !isTokensLoading &&
+        !!filteredTokens.length &&
+        !!tokenSearchFilter &&
+        !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
     const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useGasSufficiency.js

@@ -9,27 +9,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import Big from 'big.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper, useLiFi, useWallet, } from '../providers';
+import { useChains } from '.';
+import { useLiFi, useWallet } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
     const lifi = useLiFi();
     const { account } = useWallet();
-    const [fromChainId, toChainId, fromToken] = useWatch({
-        name: [
-            SwapFormKeyHelper.getChainKey('from'),
-            SwapFormKeyHelper.getChainKey('to'),
-            SwapFormKey.FromToken,
-        ],
-    });
-    const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
     const { getChainById } = useChains();
-    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
+    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(route === null || route === void 0 ? void 0 : route.fromChainId);
     const [insufficientGas, setInsufficientGas] = useState();
     const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!account.isActive || !route || !fromAmount) {
+        var _a, _b;
+        if (!account.isActive || !route) {
+            setInsufficientGas(undefined);
             return;
         }
         const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
@@ -52,18 +44,19 @@ export const useGasSufficiency = (route) => {
             }
             return groupedGasCosts;
         }, {});
-        if (gasCosts[fromChainId] &&
-            route.fromToken.address === gasCosts[fromChainId].token.address) {
-            gasCosts[fromChainId].tokenAmount = (_a = gasCosts[fromChainId]) === null || _a === void 0 ? void 0 : _a.gasAmount.plus(Big(fromAmount));
+        if (route.fromToken.address === ((_a = gasCosts[route.fromChainId]) === null || _a === void 0 ? void 0 : _a.token.address)) {
+            gasCosts[route.fromChainId].tokenAmount = (_b = gasCosts[route.fromChainId]) === null || _b === void 0 ? void 0 : _b.gasAmount.plus(Big(route.fromAmount).div(Math.pow(10, route.fromToken.decimals)));
         }
         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) => {
+        [route.fromChainId, route.toChainId].forEach((chainId) => {
             var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
-                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 gasTokenBalance = Big((_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((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : Big(0)) ||
                     gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : Big(0));
@@ -75,27 +68,17 @@ export const useGasSufficiency = (route) => {
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
         setInsufficientGas(gasCostResult);
-    }), [
-        account.address,
-        account.isActive,
-        fromAmount,
-        fromChainId,
-        getChainById,
-        lifi,
-        route,
-        toChainId,
-    ]);
+    }), [account.address, account.isActive, getChainById, lifi, route]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
-        if (!account.isActive ||
-            !fromToken ||
-            !fromAmount ||
-            !fromChainTokenBalances) {
+        if (!account.isActive || !fromChainTokenBalances || !route) {
             return false;
         }
-        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]);
+        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === (route === null || route === void 0 ? void 0 : route.fromToken.address))) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
+        return Big(route.fromAmount)
+            .div(Math.pow(10, route.fromToken.decimals))
+            .gt(balance);
+    }, [account.isActive, fromChainTokenBalances, route]);
     useEffect(() => {
         checkInsufficientGas();
     }, [checkInsufficientGas]);

package/hooks/useRouteExecution.js

@@ -11,7 +11,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { useLiFi, useWallet } from '../providers';
-import { isRouteActive, isRouteCompleted, isRouteFailed, useRouteStore, } from '../stores';
+import { getUpdatedProcess, isRouteActive, isRouteCompleted, isRouteFailed, useRouteStore, } from '../stores';
 import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
@@ -23,15 +23,29 @@ export const useRouteExecution = (routeId, executeInBackground) => {
     const routeExecution = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
+        const routeExecution = useRouteStore.getState().routes[updatedRoute.id];
+        if (!routeExecution) {
+            return;
+        }
         const clonedUpdatedRoute = deepClone(updatedRoute);
-        console.log('Route updated.', clonedUpdatedRoute);
         updateRoute(clonedUpdatedRoute);
+        const process = getUpdatedProcess(routeExecution.route, clonedUpdatedRoute);
+        if (process) {
+            emitter.emit(WidgetEvent.RouteExecutionUpdated, {
+                route: clonedUpdatedRoute,
+                process,
+            });
+        }
         if (isRouteCompleted(clonedUpdatedRoute)) {
-            emitter.emit(WidgetEvent.SwapCompleted);
+            emitter.emit(WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
         }
-        if (isRouteFailed(clonedUpdatedRoute)) {
-            emitter.emit(WidgetEvent.SwapFailed);
+        if (isRouteFailed(clonedUpdatedRoute) && process) {
+            emitter.emit(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) {
@@ -62,7 +76,9 @@ export const useRouteExecution = (routeId, executeInBackground) => {
     }, {
         onMutate: () => {
             console.log('Execution started.', routeId);
-            emitter.emit(WidgetEvent.SwapStarted);
+            if (routeExecution) {
+                emitter.emit(WidgetEvent.RouteExecutionStarted, routeExecution.route);
+            }
         },
     });
     const resumeRouteMutation = useMutation((resumedRoute) => {

package/hooks/useTelemetry.js

@@ -1,11 +1,12 @@
 /* eslint-disable consistent-return */
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
+import { name } from '../config/version';
 export const useTelemetry = (disabled) => {
     useEffect(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'production') {
-                console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
+            if (process.env.NODE_ENV === 'development') {
+                console.warn(`[${name}] Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.`);
             }
         }
         else {

package/hooks/useTokenBalances.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenBalances: (selectedChainId: number) => {
+export declare const useTokenBalances: (selectedChainId?: number) => {
     tokens: Token[] | undefined;
     tokensWithBalance: Token[] | undefined;
     featuredTokens: import("@lifi/types").Token[];

package/hooks/useTokenBalances.js

@@ -22,7 +22,9 @@ export const useTokenBalances = (selectedChainId) => {
     const featuredTokens = useFeaturedTokens(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 isBalanceLoadingEnabled = Boolean(account.address) &&
+        Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length) &&
+        Boolean(selectedChainId);
     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;

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from 'events';
+import mitt from 'mitt';
 import create from 'zustand';
-const emitterStore = create()(() => new EventEmitter());
+const emitterStore = create()(() => mitt());
 export const useWidgetEvents = () => {
     return emitterStore();
 };

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.17.0",
+  "version": "1.17.2",
   "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",
@@ -41,26 +41,27 @@
     "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
-    "@ethersproject/providers": "^5.7.0",
-    "@lifi/sdk": "^1.5.0",
-    "@lifi/wallet-management": "^1.1.9",
+    "@ethersproject/providers": "^5.7.1",
+    "@lifi/sdk": "^1.6.0",
+    "@lifi/wallet-management": "^1.1.10",
     "@mui/icons-material": "^5.10.3",
-    "@mui/lab": "^5.0.0-alpha.98",
-    "@mui/material": "^5.10.4",
+    "@mui/lab": "^5.0.0-alpha.99",
+    "@mui/material": "^5.10.5",
     "@sentry/integrations": "^7.12.1",
     "@sentry/react": "^7.12.1",
     "@sentry/tracing": "^7.12.1",
     "@tanstack/react-query": "^4.3.4",
-    "@tanstack/react-virtual": "^3.0.0-beta.17",
+    "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
-    "events": "^3.3.0",
     "i18next": "^21.9.1",
     "immer": "^9.0.15",
+    "microdiff": "^1.3.1",
+    "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.35.0",
     "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.0",
     "react-timer-hook": "^3.0.5",
     "zustand": "^4.1.1"
   },

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;