@lifi/widget 1.10.2 → 1.11.0

package/components/TokenList/TokenListItem.js

@@ -2,23 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Typography, } from '@mui/material';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatTokenPrice } from '../../utils/format';
+import { formatTokenPrice } from '../../utils';
 import { ListItem, ListItemButton } from './TokenList.style';
-export const TokenListItem = memo(({ onClick, size, start, token, showBalance }) => {
-    var _a;
+export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading }) => {
     const { t } = useTranslation();
     const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(token.address);
     const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
     return (_jsx(ListItem, Object.assign({ disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { children: _jsxs(ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: (_a = token.amount) !== null && _a !== void 0 ? _a : '0' })), tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`swap.currency`, {
+        } }, { children: _jsxs(ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? (_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: token.amount }))) : null, tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`swap.currency`, {
                                 value: tokenPrice,
-                            }) }))) : null] }))) : null] })) })));
+                            }) }))) : null] })))) : null] })) })));
 });
 export const TokenListItemSkeleton = ({ size, start, }) => {
-    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(Skeleton, { variant: "text", width: 60, height: 24 }), disablePadding: true, style: {
+    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 128, height: 20 }) })] })));
+        } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+};
+export const TokenAmountSkeleton = () => {
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+        } }, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 18 })] })));
 };

package/components/TokenList/types.d.ts

@@ -13,4 +13,5 @@ export interface TokenListItemBaseProps {
 export interface TokenListItemProps extends TokenListItemBaseProps {
     showBalance?: boolean;
     token: TokenAmount;
+    isBalanceLoading?: boolean;
 }

package/config/queryClient.d.ts

@@ -1,2 +1,2 @@
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
 export declare const queryClient: QueryClient;

package/config/queryClient.js

@@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
 export const queryClient = new QueryClient({
     defaultOptions: {
         queries: {

package/config/sentry.js

@@ -13,7 +13,7 @@ export const initSentry = (enabled) => {
         ],
         sampleRate: 1,
         tracesSampleRate: 0.2,
-        enabled: enabled && process.env.NODE_ENV === 'production',
+        enabled,
         environment: process.env.NODE_ENV,
         release: version,
     });

package/config/theme.js

@@ -1,3 +1,4 @@
+import { dialogActionsClasses } from '@mui/material/DialogActions';
 import { alpha, createTheme as createMuiTheme, darken, lighten, } from '@mui/material/styles';
 const palette = {
     primary: {
@@ -24,7 +25,7 @@ const palette = {
     },
 };
 export const createTheme = (mode, theme = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
@@ -73,6 +74,9 @@ export const createTheme = (mode, theme = {}) => {
                 },
             },
             MuiButton: {
+                defaultProps: {
+                    disableElevation: true,
+                },
                 styleOverrides: Object.assign(Object.assign({}, (mode === 'dark'
                     ? {
                         outlined: {
@@ -92,10 +96,19 @@ export const createTheme = (mode, theme = {}) => {
                         },
                     }
                     : {})), { root: {
+                        borderRadius: (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary,
+                        textTransform: 'none',
+                        fontSize: '1rem',
+                        padding: '10px 16px',
+                        [`.${dialogActionsClasses.root} &`]: {
+                            padding: '6px 12px',
+                        },
                         '&.Mui-disabled': {
                             color: mode === 'light'
                                 ? 'rgb(0 0 0 / 70%)'
                                 : 'rgb(255 255 255 / 70%)',
+                            cursor: 'not-allowed',
+                            pointerEvents: 'auto',
                         },
                     } }),
             },

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/index.d.ts

@@ -2,7 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
-export * from './useHasSufficientBalance';
+export * from './useGasSufficiency';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';

package/hooks/index.js

@@ -2,7 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
-export * from './useHasSufficientBalance';
+export * from './useGasSufficiency';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';

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/useContentHeight.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils/elements';
+import { ElementId } from '../utils';
 const getContentHeight = () => {
     const headerElement = document.getElementById(ElementId.Header);
     const containerElement = document.getElementById(ElementId.ScrollableContainer);

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,18 +7,18 @@ 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';
 import { useRouteStore } from '../stores';
-import { deepClone } from '../utils/deepClone';
+import { deepClone } from '../utils';
 export const useRouteExecution = (routeId) => {
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
-    const { route, status } = useRouteStore((state) => { var _a; return (_a = state.routes[routeId]) !== null && _a !== void 0 ? _a : {}; });
-    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/useScrollableContainer.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils/elements';
+import { ElementId } from '../utils';
 export const useScrollableContainer = () => {
     const [containerElement, setContainerElement] = useState(() => document.getElementById(ElementId.ScrollableContainer));
     useLayoutEffect(() => {

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/useTelemetry.js

@@ -1,10 +1,18 @@
+/* eslint-disable consistent-return */
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
 export const useTelemetry = (disabled) => {
     useEffect(() => {
-        if (process.env.NODE_ENV === 'production' && disabled) {
-            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.');
-            initSentry(false);
+        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.');
+            }
+        }
+        else {
+            initSentry(true);
+            return () => {
+                initSentry(false);
+            };
         }
     }, [disabled]);
 };

package/hooks/useTokenBalance.js

@@ -7,11 +7,11 @@ 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/format';
+import { formatTokenAmount } from '../utils';
 import { useToken } from './useToken';
 export const useTokenBalance = (chainId, tokenAddress) => {
     const { account } = useWallet();
@@ -26,9 +26,9 @@ export const useTokenBalance = (chainId, tokenAddress) => {
     }), {
         enabled: Boolean(account.address) && Boolean(token),
         refetchIntervalInBackground: true,
-        refetchInterval: 60000,
-        staleTime: 60000,
-        cacheTime: 60000,
+        refetchInterval: 30000,
+        staleTime: 30000,
+        cacheTime: 30000,
     });
     const refetchBalance = useCallback((chainId, tokenAddress) => __awaiter(void 0, void 0, void 0, function* () {
         if (!chainId && !tokenAddress) {

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,18 +7,18 @@ 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/format';
+import { formatTokenAmount } from '../utils';
 import { useChains } from './useChains';
 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 {};