@lifi/widget 1.10.4 → 1.11.0

package/hooks/useChains.d.ts

@@ -18,9 +18,9 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    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("react-query").FetchStatus;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 } | {
@@ -43,9 +43,9 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    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("react-query").FetchStatus;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 } | {
@@ -68,9 +68,9 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    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("react-query").FetchStatus;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 } | {
@@ -93,9 +93,9 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
+    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("react-query").FetchStatus;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 };

package/hooks/useChains.js

@@ -18,8 +18,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useQuery } from 'react-query';
 import { LiFi } from '../config/lifi';
 import { useWidgetConfig } from '../providers/WidgetProvider';
 export const useChains = () => {

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

@@ -0,0 +1,91 @@
+import Big from 'big.js';
+import { useMemo } from 'react';
+import { useWatch } from 'react-hook-form';
+import { useChains, useDebouncedWatch } from '.';
+import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
+import { useWallet } from '../providers/WalletProvider';
+import { useTokenBalances } from './useTokenBalances';
+export const useGasSufficiency = (route) => {
+    const { account } = useWallet();
+    const [fromChainId, toChainId, fromToken] = useWatch({
+        name: [
+            SwapFormKeyHelper.getChainKey('from'),
+            SwapFormKeyHelper.getChainKey('to'),
+            SwapFormKey.FromToken,
+        ],
+    });
+    const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
+    const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
+    const { tokens: toChainTokenBalances } = useTokenBalances(toChainId);
+    const { getChainById } = useChains();
+    const insufficientGas = useMemo(() => {
+        var _a;
+        if (!account.isActive || !route || !fromAmount) {
+            return [];
+        }
+        const tokenBalancesByChain = {
+            [fromChainId]: fromChainTokenBalances,
+            [toChainId]: toChainTokenBalances,
+        };
+        const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
+            if (step.estimate.gasCosts) {
+                const { token } = step.estimate.gasCosts[0];
+                const gasCostAmount = step.estimate.gasCosts
+                    .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(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(Big(fromAmount));
+        }
+        [fromChainId, toChainId].forEach((chainId) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (gasCosts[chainId]) {
+                const gasTokenBalance = Big((_c = (_b = (_a = tokenBalancesByChain[chainId]) === null || _a === void 0 ? void 0 : _a.find((t) => t.address === gasCosts[chainId].token.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
+                const insufficientFromChainGas = gasTokenBalance.lte(0) ||
+                    gasTokenBalance.lt((_d = gasCosts[chainId].gasAmount) !== null && _d !== void 0 ? _d : Big(0)) ||
+                    gasTokenBalance.lt((_e = gasCosts[chainId].tokenAmount) !== null && _e !== void 0 ? _e : Big(0));
+                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 = useMemo(() => {
+        var _a, _b;
+        if (!account.isActive || !fromToken || !fromAmount) {
+            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).gte(balance);
+    }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+    return {
+        insufficientGas,
+        insufficientFunds,
+    };
+};

package/hooks/useRouteExecution.d.ts

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

package/hooks/useRouteExecution.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
-import { useMutation } from 'react-query';
 import shallow from 'zustand/shallow';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
@@ -17,8 +17,8 @@ import { deepClone } from '../utils';
 export const useRouteExecution = (routeId) => {
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
-    const { route, status } = useRouteStore((state) => state.routes[routeId]);
-    const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
+    const routeExecution = useRouteStore((state) => state.routes[routeId]);
+    const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
         console.log('Route updated.', updatedRoute);
         updateRoute(deepClone(updatedRoute));
@@ -39,10 +39,10 @@ export const useRouteExecution = (routeId) => {
         if (!account.signer) {
             throw Error('Account signer not found.');
         }
-        if (!route) {
+        if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return LiFi.executeRoute(account.signer, route, {
+        return LiFi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
@@ -62,10 +62,10 @@ export const useRouteExecution = (routeId) => {
         if (!account.signer) {
             throw Error('Account signer not found.');
         }
-        if (!route) {
+        if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return LiFi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : route, {
+        return LiFi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
@@ -105,18 +105,18 @@ export const useRouteExecution = (routeId) => {
     }, [resumeRouteMutation, routeId]);
     const restartRouteMutation = useCallback(() => {
         restartRoute(routeId);
-        resumeRoute(route);
+        resumeRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resumeRoute, route, routeId]);
-    const removeRouteMutation = useCallback(() => {
-        removeRoute(routeId);
+    }, [resumeRoute, routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route, routeId]);
+    const deleteRouteMutation = useCallback(() => {
+        deleteRoute(routeId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [routeId]);
     useEffect(() => {
         // check if route is eligible for automatic resuming
-        const isDone = 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);
+        const isDone = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+        const isFailed = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+        const alreadyStarted = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.some((step) => step.execution);
         if (!isDone &&
             !isFailed &&
             alreadyStarted &&
@@ -125,14 +125,18 @@ export const useRouteExecution = (routeId) => {
             resumedAfterMount.current = true;
             resumeRoute();
         }
-        return () => LiFi.moveExecutionToBackground(route);
+        return () => {
+            if (routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) {
+                LiFi.moveExecutionToBackground(routeExecution.route);
+            }
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [account.signer]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,
-        removeRoute: removeRouteMutation,
-        route,
-        status,
+        deleteRoute: deleteRouteMutation,
+        route: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route,
+        status: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.status,
     };
 };

package/hooks/useSwapRoutes.d.ts

@@ -5,5 +5,5 @@ export declare const useSwapRoutes: () => {
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").RoutesResponse, unknown>>;
+    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>>;
 };

package/hooks/useSwapRoutes.js

@@ -7,21 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
-import { useQuery, useQueryClient } from 'react-query';
 import { useDebouncedWatch, useToken } from '.';
 import { LiFi } from '../config/lifi';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { useWallet } from '../providers/WalletProvider';
-import { useCurrentRoute, useSettings } from '../stores';
+import { useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
     const { account } = useWallet();
     const queryClient = useQueryClient();
-    const [currentRoute, setCurrentRoute] = useCurrentRoute();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
         'slippage',
         'routePriority',
@@ -92,16 +90,6 @@ export const useSwapRoutes = () => {
         staleTime: refetchTime,
         cacheTime: refetchTime,
     });
-    useEffect(() => {
-        // check that the current route is selected from existing routes
-        const isCurrentRouteInSet = data === null || data === void 0 ? void 0 : data.routes.some((route) => route.id === (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id));
-        const recommendedRoute = data === null || data === void 0 ? void 0 : data.routes[0];
-        // we don't want to set the current route again on mount if it's already selected from existing routes
-        if (!isCurrentRouteInSet) {
-            setCurrentRoute(recommendedRoute);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
     return {
         routes: data === null || data === void 0 ? void 0 : data.routes,
         isLoading: isEnabled && isLoading,

package/hooks/useTokenBalance.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { formatTokenAmount } from '../utils';

package/hooks/useTokenBalances.d.ts

@@ -2,6 +2,6 @@ import { TokenAmount } from '@lifi/sdk';
 export declare const useTokenBalances: (selectedChainId: number) => {
     tokens: TokenAmount[] | undefined;
     isLoading: boolean;
-    isFetching: boolean;
-    updateBalances: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<TokenAmount[], unknown>>;
+    isBalanceLoading: boolean;
+    updateBalances: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount[], unknown>>;
 };

package/hooks/useTokenBalances.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { formatTokenAmount } from '../utils';
@@ -16,9 +16,9 @@ import { useTokens } from './useTokens';
 export const useTokenBalances = (selectedChainId) => {
     const { account } = useWallet();
     const { chains, isLoading: isChainsLoading } = useChains();
-    const { tokens, isLoading, isFetching } = useTokens(selectedChainId);
-    const isBalancesLoadingEnabled = Boolean(account.address) && Boolean(tokens) && Boolean(chains);
-    const { data: tokensWithBalance, isLoading: isBalancesLoading, isFetching: isBalancesFetching, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [_, chainId, account] }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { tokens, isLoading } = useTokens(selectedChainId);
+    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens) && Boolean(chains);
+    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [_, chainId, account] }) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account || !tokens) {
             return [];
         }
@@ -38,17 +38,15 @@ export const useTokenBalances = (selectedChainId) => {
             ...formatedTokens.filter((token) => token.amount === '0'),
         ];
     }), {
-        enabled: isBalancesLoadingEnabled,
+        enabled: isBalanceLoadingEnabled,
         refetchIntervalInBackground: true,
         refetchInterval: 60000,
         staleTime: 60000,
     });
     return {
         tokens: tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens,
-        isLoading: (isBalancesLoading && isBalancesLoadingEnabled) ||
-            (isLoading && isFetching) ||
-            isChainsLoading,
-        isFetching: isBalancesFetching,
+        isLoading: isLoading || isChainsLoading,
+        isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
         updateBalances: refetch,
     };
 };

package/hooks/useTokens.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { LiFi } from '../config/lifi';
 export const useTokens = (selectedChainId) => {
     const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId], () => __awaiter(void 0, void 0, void 0, function* () {

package/hooks/useTools.d.ts

@@ -1 +1,10 @@
-export declare const useTools: () => import("@lifi/types").ToolsResponse | undefined;
+import { Bridge, Exchange } from '@lifi/sdk';
+declare type FormattedTool<T, K extends keyof T> = Record<string, Pick<T, K>>;
+export declare const useTools: () => {
+    tools: import("@lifi/sdk").ToolsResponse | undefined;
+    formattedTools: {
+        bridges: FormattedTool<Bridge, "key" | "name" | "logoURI"> | undefined;
+        exchanges: FormattedTool<Exchange, "key" | "name" | "logoURI"> | undefined;
+    };
+};
+export {};

package/hooks/useTools.js

@@ -1,5 +1,5 @@
-/* eslint-disable no-underscore-dangle */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { LiFi } from '../config/lifi';
 import { useSettingsStore } from '../stores';
 export const useTools = () => {
@@ -10,5 +10,15 @@ export const useTools = () => {
             initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
         },
     });
-    return data;
+    const formattedTools = useMemo(() => ({
+        bridges: data === null || data === void 0 ? void 0 : data.bridges.reduce((bridges, bridge) => {
+            bridges[bridge.key] = bridge;
+            return bridges;
+        }, {}),
+        exchanges: data === null || data === void 0 ? void 0 : data.exchanges.reduce((exchanges, exchange) => {
+            exchanges[exchange.key] = exchange;
+            return exchanges;
+        }, {}),
+    }), [data === null || data === void 0 ? void 0 : data.bridges, data === null || data === void 0 ? void 0 : data.exchanges]);
+    return { tools: data, formattedTools };
 };

package/i18n/en/translation.json

@@ -7,13 +7,15 @@
     "from": "Swap from",
     "to": "Swap to",
     "settings": "Settings",
-    "routes": "You get"
+    "routes": "You get",
+    "swapHistory": "Swap history",
+    "swapDetails": "Swap details"
   },
   "button": {
-    "swap": "Swap",
     "connectWallet": "Connect wallet",
     "switchChain": "Switch chain",
-    "startSwap": "Start the swap",
+    "reviewSwap": "Review swap",
+    "startSwap": "Start swap",
     "restartSwap": "Restart swap",
     "removeSwap": "Remove swap",
     "done": "Done",
@@ -24,8 +26,11 @@
     "dark": "Dark",
     "auto": "Auto",
     "ok": "Ok",
+    "cancel": "Cancel",
+    "delete": "Delete",
     "hide": "Hide",
     "max": "max",
+    "contactSupport": "Contact support",
     "lifiSwap": "LI.FI Swap"
   },
   "swap": {
@@ -51,8 +56,11 @@
     "stepSwapAndBridge": "Swap and bridge",
     "estimatedTime": "~{{value}} min.",
     "networkIsBusy": "Network is busy...",
-    "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
+    "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
+    "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
+    "tokenOnChainAmount": "{{amount}} {{tokenSymbol}} on {{chainName}}",
+    "routeId": "Route ID",
     "tags": {
       "recommended": "Recommended",
       "fastest": "Fast",
@@ -73,17 +81,18 @@
         "routeNotFound": "No routes available"
       },
       "message": {
-        "routeNotFound": "Try another \"from\" and \"to\" token combination."
+        "routeNotFound": "Try another token combination."
       }
     },
     "warning": {
       "title": {
-        "insufficientGas": "Insufficient gas"
+        "insufficientGas": "Insufficient gas",
+        "deleteSwap": "Delete this swap?"
       },
       "message": {
-        "insufficientFunds": "You don't have enough funds for this transaction on the start \"from\" chain.",
-        "insufficientGasOnStartChain": "You need to have enough gas to pay for this transaction on the start \"from\" chain.",
-        "insufficientGasOnDestinationChain": "You need to have enough gas to pay for this transaction on the destination \"to\" chain."
+        "insufficientFunds": "You don't have enough funds to execute the swap.",
+        "insufficientGas": "You need to add at least:",
+        "deleteSwap": "Swap history is only stored locally and can't be recovered if you delete it."
       }
     },
     "error": {

package/i18n/index.d.ts

@@ -11,11 +11,13 @@ export declare const resources: {
                 to: string;
                 settings: string;
                 routes: string;
+                swapHistory: string;
+                swapDetails: string;
             };
             button: {
-                swap: string;
                 connectWallet: string;
                 switchChain: string;
+                reviewSwap: string;
                 startSwap: string;
                 restartSwap: string;
                 removeSwap: string;
@@ -27,8 +29,11 @@ export declare const resources: {
                 dark: string;
                 auto: string;
                 ok: string;
+                cancel: string;
+                delete: string;
                 hide: string;
                 max: string;
+                contactSupport: string;
                 lifiSwap: string;
             };
             swap: {
@@ -56,6 +61,9 @@ export declare const resources: {
                 networkIsBusy: string;
                 crossStepDetails: string;
                 swapStepDetails: string;
+                tokenOnChain: string;
+                tokenOnChainAmount: string;
+                routeId: string;
                 tags: {
                     recommended: string;
                     fastest: string;
@@ -82,11 +90,12 @@ export declare const resources: {
                 warning: {
                     title: {
                         insufficientGas: string;
+                        deleteSwap: string;
                     };
                     message: {
                         insufficientFunds: string;
-                        insufficientGasOnStartChain: string;
-                        insufficientGasOnDestinationChain: string;
+                        insufficientGas: string;
+                        deleteSwap: string;
                     };
                 };
                 error: {

package/icons/LiFiToolLogo.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="16" fill="#F5B5FF"/>
+  <path d="M15.5031 19.2031L10.1691 20.4379C9.97453 20.4867 9.82861 20.6816 9.82861 20.8766V24.5486C9.82861 24.8573 10.0718 25.0523 10.3798 24.9873L17.8215 23.265C18.1296 23.2 18.2593 22.9076 18.1296 22.6314L16.7839 19.853C16.5731 19.4143 16.7839 18.9594 17.2541 18.8619L22.1179 17.692C22.4584 17.6108 22.7502 17.2534 22.7502 16.8959V13.5001C22.7502 13.1914 22.507 12.9802 22.199 13.0614L15.1788 14.735C14.7411 14.8324 14.5465 15.2549 14.7411 15.6611L15.9733 18.212C16.184 18.6507 15.9733 19.0893 15.5031 19.2031Z" fill="black"/>
+  <path d="M11.985 10.0233L13.3793 12.8829C13.5577 13.2566 13.3793 13.6466 12.974 13.7278L10.3962 14.329C10.0719 14.4102 9.8125 14.7352 9.8125 15.0601V18.1309C9.8125 18.6509 10.234 18.9758 10.7366 18.8621L13.1361 18.3097C13.4604 18.2447 13.7198 17.9035 13.7198 17.5785L13.736 14.4265C13.736 13.9878 14.0927 13.5491 14.5142 13.4516L22.3774 11.5669C22.572 11.5181 22.7179 11.3231 22.7179 11.1282V7.45618C22.7179 7.14747 22.4747 6.93625 22.1666 7.01749L12.2931 9.38966C11.985 9.45465 11.8553 9.74711 11.985 10.0233Z" fill="black"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.10.4",
+  "version": "1.11.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -44,11 +44,12 @@
     "@lifi/sdk": "^1.0.2",
     "@lifi/wallet-management": "^1.1.2",
     "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.90",
-    "@mui/material": "^5.9.0",
-    "@sentry/integrations": "^7.6.0",
-    "@sentry/react": "^7.6.0",
-    "@sentry/tracing": "^7.6.0",
+    "@mui/lab": "^5.0.0-alpha.92",
+    "@mui/material": "^5.9.2",
+    "@sentry/integrations": "^7.7.0",
+    "@sentry/react": "^7.7.0",
+    "@sentry/tracing": "^7.7.0",
+    "@tanstack/react-query": "^4.0.10",
     "big.js": "^6.2.1",
     "i18next": "^21.8.14",
     "immer": "^9.0.15",
@@ -56,12 +57,11 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
     "react-i18next": "^11.18.1",
-    "react-query": "^4.0.0-beta.23",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
     "react-virtual": "^2.10.4",
-    "zustand": "^4.0.0-rc.1"
+    "zustand": "^4.0.0"
   },
   "eslintConfig": {
     "extends": "../../.eslintrc"

package/pages/MainPage/MainPage.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { InsufficientGasOrFundsMessage } from '../../components/InsufficientGasOrFundsMessage';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import { SwapInProgress } from '../../components/SwapInProgress';
 import { SwapInput } from '../../components/SwapInput';
-import { SwapRoutes } from '../../components/SwapRoutes';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
+import { SwapRoutes } from './SwapRoutes';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 2, mb: 1 }), _jsx(SelectChainAndToken, { mt: 2, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(InsufficientGasOrFundsMessage, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
 };