@lifi/widget 1.13.2 → 1.13.3

package/cjs/hooks/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useChain"), exports);
+__exportStar(require("./useChains"), exports);
+__exportStar(require("./useContentHeight"), exports);
+__exportStar(require("./useDebouncedWatch"), exports);
+__exportStar(require("./useFeaturedTokens"), exports);
+__exportStar(require("./useGasSufficiency"), exports);
+__exportStar(require("./useInitializer"), exports);
+__exportStar(require("./useRouteExecution"), exports);
+__exportStar(require("./useScrollableContainer"), exports);
+__exportStar(require("./useSwapRoutes"), exports);
+__exportStar(require("./useTelemetry"), exports);
+__exportStar(require("./useToken"), exports);
+__exportStar(require("./useTokenBalance"), exports);
+__exportStar(require("./useTokenBalances"), exports);
+__exportStar(require("./useTokens"), exports);
+__exportStar(require("./useTokenSearch"), exports);
+__exportStar(require("./useTools"), exports);

package/cjs/hooks/useChain.d.ts

@@ -0,0 +1,4 @@
+export declare const useChain: (chainId: number) => {
+    chain: import("@lifi/types").EVMChain | undefined;
+    isLoading: boolean;
+};

package/cjs/hooks/useChain.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChain = void 0;
+const react_1 = require("react");
+const useChains_1 = require("./useChains");
+const useChain = (chainId) => {
+    const { chains, isLoading } = (0, useChains_1.useChains)();
+    const chain = (0, react_1.useMemo)(() => {
+        const chain = chains === null || chains === void 0 ? void 0 : chains.find((chain) => chain.id === chainId);
+        return chain;
+    }, [chainId, chains]);
+    return {
+        chain,
+        isLoading,
+    };
+};
+exports.useChain = useChain;

package/cjs/hooks/useChains.d.ts

@@ -0,0 +1,101 @@
+export declare const useChains: () => {
+    error: unknown;
+    isError: true;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+} | {
+    error: null;
+    isError: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+} | {
+    error: unknown;
+    isError: true;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+} | {
+    error: null;
+    isError: false;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    status: "loading";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+};

package/cjs/hooks/useChains.js

@@ -0,0 +1,43 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChains = void 0;
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const lifi_1 = require("../config/lifi");
+const WidgetProvider_1 = require("../providers/WidgetProvider");
+const useChains = () => {
+    const { disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
+    const _a = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
+        const chains = yield lifi_1.LiFi.getChains();
+        return chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
+    })), { data } = _a, other = __rest(_a, ["data"]);
+    const getChainById = (0, react_1.useCallback)((chainId) => {
+        const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
+        // if (!chain) {
+        //   throw new Error('Chain not found or chainId is invalid.');
+        // }
+        return chain;
+    }, [data]);
+    return Object.assign({ chains: data, getChainById }, other);
+};
+exports.useChains = useChains;

package/cjs/hooks/useContentHeight.d.ts

@@ -0,0 +1 @@
+export declare const useContentHeight: () => number;

package/cjs/hooks/useContentHeight.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContentHeight = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const getContentHeight = () => {
+    const headerElement = document.getElementById(utils_1.ElementId.Header);
+    const containerElement = document.getElementById(utils_1.ElementId.ScrollableContainer);
+    if (!containerElement || !headerElement) {
+        console.warn(`Can't find ${utils_1.ElementId.ScrollableContainer} or ${utils_1.ElementId.Header} id.`);
+        return 0;
+    }
+    const { height: containerHeight } = containerElement.getBoundingClientRect();
+    const { height: headerHeight } = headerElement.getBoundingClientRect();
+    return containerHeight - headerHeight;
+};
+const useContentHeight = () => {
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(getContentHeight);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!contentHeight) {
+            setContentHeight(getContentHeight());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return contentHeight;
+};
+exports.useContentHeight = useContentHeight;

package/cjs/hooks/useDebouncedWatch.d.ts

@@ -0,0 +1 @@
+export declare const useDebouncedWatch: (name: any, delay: number) => any;

package/cjs/hooks/useDebouncedWatch.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedWatch = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const useDebouncedWatch = (name, delay) => {
+    const watchedValue = (0, react_hook_form_1.useWatch)({
+        name,
+    });
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(watchedValue);
+    const debouncedValueRef = (0, react_1.useRef)();
+    const isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isMounted.current) {
+            const hasWatchedValue = Array.isArray(watchedValue)
+                ? watchedValue.some((value) => value)
+                : Boolean(watchedValue);
+            const hasDebouncedValue = Array.isArray(debouncedValueRef.current)
+                ? debouncedValueRef.current.some((value) => value)
+                : Boolean(debouncedValueRef.current);
+            if (hasWatchedValue && hasDebouncedValue) {
+                const handler = setTimeout(() => {
+                    setDebouncedValue(watchedValue);
+                }, delay);
+                return () => clearTimeout(handler);
+            }
+            debouncedValueRef.current = watchedValue;
+            setDebouncedValue(watchedValue);
+            return undefined;
+        }
+        isMounted.current = true;
+        return undefined;
+    }, [delay, watchedValue]);
+    return debouncedValue;
+};
+exports.useDebouncedWatch = useDebouncedWatch;

package/cjs/hooks/useFeaturedTokens.d.ts

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

package/cjs/hooks/useFeaturedTokens.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeaturedTokens = void 0;
+const react_1 = require("react");
+const WidgetProvider_1 = require("../providers/WidgetProvider");
+const useFeaturedTokens = (selectedChainId) => {
+    const { featuredTokens } = (0, WidgetProvider_1.useWidgetConfig)();
+    return (0, react_1.useMemo)(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+};
+exports.useFeaturedTokens = useFeaturedTokens;

package/cjs/hooks/useGasSufficiency.d.ts

@@ -0,0 +1,15 @@
+import { EVMChain, Route, Token } from '@lifi/sdk';
+import Big from 'big.js';
+interface GasSufficiency {
+    gasAmount: Big;
+    tokenAmount?: Big;
+    insufficientAmount?: Big;
+    insufficient?: boolean;
+    token: Token;
+    chain?: EVMChain;
+}
+export declare const useGasSufficiency: (route?: Route) => {
+    insufficientGas: GasSufficiency[];
+    insufficientFunds: boolean;
+};
+export {};

package/cjs/hooks/useGasSufficiency.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGasSufficiency = void 0;
+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 useTokenBalances_1 = require("./useTokenBalances");
+const useGasSufficiency = (route) => {
+    const { account } = (0, WalletProvider_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,
+        ],
+    });
+    const fromAmount = (0, _1.useDebouncedWatch)(SwapFormProvider_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)(() => {
+        var _a;
+        if (!account.isActive ||
+            !route ||
+            !fromAmount ||
+            !fromChainTokenBalances ||
+            !toChainTokenBalances) {
+            return [];
+        }
+        const tokenBalancesByChain = {
+            [fromChainId]: fromChainTokenBalances,
+            [toChainId]: toChainTokenBalances,
+        };
+        const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
+            if (step.estimate.gasCosts) {
+                const { token } = step.estimate.gasCosts[0];
+                const gasCostAmount = step.estimate.gasCosts
+                    .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
+                    .div(Math.pow(10, token.decimals));
+                const groupedGasCost = groupedGasCosts[token.chainId];
+                const gasAmount = groupedGasCost
+                    ? groupedGasCost.gasAmount.plus(gasCostAmount)
+                    : gasCostAmount;
+                groupedGasCosts[token.chainId] = {
+                    gasAmount,
+                    tokenAmount: gasAmount,
+                    token,
+                    chain: getChainById(token.chainId),
+                };
+                return groupedGasCosts;
+            }
+            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((0, big_js_1.default)(fromAmount));
+        }
+        [fromChainId, toChainId].forEach((chainId) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            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 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));
+                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)
+                    : undefined;
+                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount });
+            }
+        });
+        const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
+        return gasCostResult;
+    }, [
+        account.isActive,
+        fromAmount,
+        fromChainId,
+        fromChainTokenBalances,
+        getChainById,
+        route,
+        toChainId,
+        toChainTokenBalances,
+    ]);
+    const insufficientFunds = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!account.isActive ||
+            !fromToken ||
+            !fromAmount ||
+            !fromChainTokenBalances) {
+            return false;
+        }
+        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]);
+    return {
+        insufficientGas,
+        insufficientFunds,
+    };
+};
+exports.useGasSufficiency = useGasSufficiency;

package/cjs/hooks/useInitializer.d.ts

@@ -0,0 +1 @@
+export declare const useInitializer: () => void;

package/cjs/hooks/useInitializer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInitializer = void 0;
+/* eslint-disable no-underscore-dangle */
+const useTools_1 = require("./useTools");
+const useInitializer = () => {
+    (0, useTools_1.useTools)();
+};
+exports.useInitializer = useInitializer;

package/cjs/hooks/useRouteExecution.d.ts

@@ -0,0 +1,8 @@
+import { Route } from '@lifi/sdk';
+export declare const useRouteExecution: (routeId: string) => {
+    executeRoute: () => void;
+    restartRoute: () => void;
+    deleteRoute: () => void;
+    route: Route | undefined;
+    status: import("../stores").RouteExecutionStatus | undefined;
+};

package/cjs/hooks/useRouteExecution.js

@@ -0,0 +1,163 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 stores_1 = require("../stores");
+const utils_1 = require("../utils");
+const useRouteExecution = (routeId) => {
+    const { account, switchChain } = (0, WalletProvider_1.useWallet)();
+    const resumedAfterMount = (0, react_1.useRef)(false);
+    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 clonedUpdatedRoute = (0, utils_1.deepClone)(updatedRoute);
+        console.log('Route updated.', clonedUpdatedRoute);
+        updateRoute(clonedUpdatedRoute);
+    };
+    const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!account.isActive || !account.signer) {
+            return account.signer;
+        }
+        const currentChainId = yield account.signer.getChainId();
+        if (currentChainId !== requiredChainId) {
+            const switched = yield switchChain(requiredChainId);
+            if (!switched) {
+                throw new Error('Chain was not switched.');
+            }
+        }
+        return account.signer;
+    });
+    const executeRouteMutation = (0, react_query_1.useMutation)(() => {
+        if (!account.signer) {
+            throw Error('Account signer not found.');
+        }
+        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, {
+            updateCallback,
+            switchChainHook,
+            infiniteApproval: false,
+        });
+    }, {
+        onMutate: () => {
+            console.log('Execution started.', routeId);
+        },
+        onError: () => {
+            console.warn('Execution failed.', routeId);
+        },
+        onSuccess: (route) => {
+            console.log('Executed successfully.', routeId);
+        },
+    });
+    const resumeRouteMutation = (0, react_query_1.useMutation)((resumedRoute) => {
+        if (!account.signer) {
+            throw Error('Account signer not found.');
+        }
+        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, {
+            updateCallback,
+            switchChainHook,
+            infiniteApproval: false,
+        });
+    }, {
+        onMutate: () => {
+            console.log('Resumed to execution.', routeId);
+        },
+        onError: () => {
+            console.warn('Resumed execution failed.', routeId);
+        },
+        onSuccess: (route) => {
+            console.log('Resumed execution successful.', route);
+        },
+    });
+    const executeRoute = (0, react_1.useCallback)(() => {
+        executeRouteMutation.mutateAsync(undefined, {
+            onError: () => {
+                console.warn('Real execution failed!', routeId);
+                // Notification.showNotification(NotificationType.SwapExecution_ERROR);
+            },
+            onSuccess: (route) => {
+                console.log('Real execution successfully!', route);
+                // Notification.showNotification(NotificationType.TRANSACTION_SUCCESSFULL);
+            },
+        });
+    }, [executeRouteMutation, routeId]);
+    const resumeRoute = (0, react_1.useCallback)((route) => {
+        resumeRouteMutation.mutateAsync(route, {
+            onError: () => {
+                console.warn('Real resumed execution failed.', routeId);
+            },
+            onSuccess: (route) => {
+                console.log('Real resumed execution successful.', route);
+            },
+        });
+    }, [resumeRouteMutation, routeId]);
+    const restartRouteMutation = (0, react_1.useCallback)(() => {
+        restartRoute(routeId);
+        resumeRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resumeRoute, routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route, routeId]);
+    const deleteRouteMutation = (0, react_1.useCallback)(() => {
+        deleteRoute(routeId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [routeId]);
+    // Resume route execution after page reload
+    (0, react_1.useEffect)(() => {
+        // Check if route is eligible for automatic resuming
+        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+            account.isActive &&
+            !resumedAfterMount.current) {
+            resumedAfterMount.current = true;
+            resumeRoute();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [account.isActive]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            const route = (_a = stores_1.useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
+            if (!route || !isActiveRoute(route)) {
+                return;
+            }
+            lifi_1.LiFi.moveExecutionToBackground(route);
+            console.log('Move route execution to background.', routeId);
+            resumedAfterMount.current = false;
+        };
+    }, [routeId]);
+    return {
+        executeRoute,
+        restartRoute: restartRouteMutation,
+        deleteRoute: deleteRouteMutation,
+        route: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route,
+        status: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.status,
+    };
+};
+exports.useRouteExecution = useRouteExecution;
+const isActiveRoute = (route) => {
+    if (!route) {
+        return false;
+    }
+    const allDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+    const alreadyStarted = route.steps.some((step) => step.execution);
+    return !allDone && !isFailed && alreadyStarted;
+};

package/cjs/hooks/useScrollableContainer.d.ts

@@ -0,0 +1,2 @@
+export declare const useScrollableContainer: () => HTMLElement | null;
+export declare const useScrollableOverflowHidden: () => void;

package/cjs/hooks/useScrollableContainer.js

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

package/cjs/hooks/useSwapRoutes.d.ts

@@ -0,0 +1,9 @@
+export declare const useSwapRoutes: () => {
+    routes: import("@lifi/types").Route[] | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    isFetched: boolean;
+    dataUpdatedAt: number;
+    refetchTime: number;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").RoutesResponse, unknown>>;
+};