@lifi/widget 2.0.0-beta.1 → 2.0.0-beta.10

package/components/TokenList/types.d.ts

@@ -1,19 +1,20 @@
-import type { TokenAmount } from '@lifi/sdk';
+import type { ExtendedChain } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
 import type { SwapFormType } from '../../providers';
-import type { Token } from '../../types';
+import type { TokenAmount } from '../../types';
 export interface TokenListProps {
     formType: SwapFormType;
     height: number;
     onClick?(): void;
 }
 export interface VirtualizedTokenListProps {
-    tokens: Token[];
+    tokens: TokenAmount[];
     featuredTokensLength?: number;
     scrollElementRef: MutableRefObject<HTMLElement | null>;
     isLoading: boolean;
     isBalanceLoading: boolean;
     chainId: number;
+    chain?: ExtendedChain;
     showBalance?: boolean;
     showFeatured?: boolean;
     onClick(tokenAddress: string): void;
@@ -26,6 +27,7 @@ export interface TokenListItemBaseProps {
 export interface TokenListItemProps extends TokenListItemBaseProps {
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
@@ -34,5 +36,6 @@ export interface TokenListItemButtonProps {
     onClick?(): void;
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
 }

package/config/theme.js

@@ -1,9 +1,8 @@
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { touchRippleClasses } from '@mui/material/ButtonBase';
-import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
-import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
-import { keyframes } from '@mui/system';
+import { common } from '@mui/material/colors';
+import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, keyframes, lighten, } from '@mui/material/styles';
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -223,6 +222,19 @@ export const createTheme = (mode, theme = {}) => {
                     }),
                 },
             },
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: ({ theme }) => ({
+                        backgroundColor: 'rgb(0 0 0 / 64%)',
+                        backdropFilter: 'blur(3px)',
+                        fontSize: '0.75rem',
+                        padding: theme.spacing(1, 1.5),
+                    }),
+                    arrow: {
+                        color: 'rgb(0 0 0 / 64%)',
+                    },
+                },
+            },
         },
     });
 };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.1";
+export declare const version = "2.0.0-beta.10";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-beta.1';
+export const version = '2.0.0-beta.10';

package/hooks/index.d.ts

@@ -15,12 +15,13 @@ export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
+export * from './useSwapOnly';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
-export * from './useTokens';
 export * from './useTokenSearch';
+export * from './useTokens';
 export * from './useTools';
 export * from './useWidgetEvents';

package/hooks/index.js

@@ -15,12 +15,13 @@ export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
+export * from './useSwapOnly';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
-export * from './useTokens';
 export * from './useTokenSearch';
+export * from './useTokens';
 export * from './useTools';
 export * from './useWidgetEvents';

package/hooks/useContentHeight.js

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useState } from 'react';
-import { createElementId, ElementId } from '../utils';
+import { ElementId, createElementId } from '../utils';
 import { useDefaultElementId } from './useDefaultElementId';
 import { getScrollableContainer } from './useScrollableContainer';
 const getContentHeight = (elementId) => {
-    const headerElement = document.getElementById(createElementId(ElementId.Header, elementId));
     const containerElement = document.getElementById(createElementId(ElementId.ScrollableContainer, elementId));
+    const headerElement = document.getElementById(createElementId(ElementId.Header, elementId));
     if (!containerElement || !headerElement) {
         console.warn(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
         return 0;
@@ -15,11 +15,9 @@ const getContentHeight = (elementId) => {
 };
 export const useContentHeight = () => {
     const elementId = useDefaultElementId();
-    const [contentHeight, setContentHeight] = useState(() => getContentHeight(elementId));
+    const [contentHeight, setContentHeight] = useState(0);
     useLayoutEffect(() => {
-        if (!contentHeight) {
-            setContentHeight(getContentHeight(elementId));
-        }
+        setContentHeight(getContentHeight(elementId));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return contentHeight;

package/hooks/useFeaturedTokens.d.ts

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

package/hooks/useFundsSufficiency.js

@@ -7,8 +7,8 @@ import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 import { useTokenAddressBalance } from './useTokenAddressBalance';
 const refetchInterval = 30000;
 export const useFundsSufficiency = (route) => {
-    const { account, provider } = useWallet();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const { account } = useWallet();
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
         name: [
             SwapFormKey.FromChain,

package/hooks/useGasRefuel.d.ts

@@ -3,5 +3,5 @@ export declare const useGasRefuel: () => {
     availble: boolean | undefined;
     isLoading: boolean;
     chain: import("@lifi/types").ExtendedChain | undefined;
-    gasRecommendation: import("@lifi/types").GasRecommendationResponse | undefined;
+    fromAmount: string | undefined;
 };

package/hooks/useGasRefuel.js

@@ -7,12 +7,11 @@ import { useGasRecommendation } from './useGasRecommendation';
 import { useTokenBalance } from './useTokenBalance';
 export const useGasRefuel = () => {
     const { getChainById } = useChains();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = useWatch({
+    const [fromChainId, fromTokenAddress, toChainId, toAddress] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
             SwapFormKey.ToChain,
-            SwapFormKey.ToToken,
             SwapFormKey.ToAddress,
         ],
     });
@@ -24,10 +23,7 @@ export const useGasRefuel = () => {
         // We don't allow same chain refuel.
         // If a user runs out of gas, he can't send a source chain transaction.
         fromChainId === toChainId ||
-            // We don't want to apply auto refuel when swapping to native tokens
-            toChain?.nativeToken.address === toTokenAddress ||
             !gasRecommendation?.available ||
-            !gasRecommendation.recommended ||
             !nativeToken) {
             return false;
         }
@@ -38,20 +34,14 @@ export const useGasRefuel = () => {
             .div(2);
         const insufficientGas = tokenBalance.lt(recommendedAmount);
         return insufficientGas;
-    }, [
-        fromChainId,
-        gasRecommendation?.available,
-        gasRecommendation?.recommended,
-        nativeToken,
-        toChain?.nativeToken.address,
-        toChainId,
-        toTokenAddress,
-    ]);
+    }, [fromChainId, gasRecommendation, nativeToken, toChainId]);
     return {
         enabled: enabled,
         availble: gasRecommendation?.available,
         isLoading: isLoading,
         chain: toChain,
-        gasRecommendation,
+        fromAmount: gasRecommendation?.available
+            ? gasRecommendation.fromAmount
+            : undefined,
     };
 };

package/hooks/useGasSufficiency.js

@@ -1,16 +1,24 @@
 import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useChains, useGetTokenBalancesWithRetry } from '.';
+import { useChains, useGasRefuel, useGetTokenBalancesWithRetry } from '.';
 import { useWallet } from '../providers';
+import { useSettings } from '../stores';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const { getChainById } = useChains();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
+    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
+    const enabledRefuel = enabled && enabledAutoRefuel;
     const { data: insufficientGas, isInitialLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;
         }
+        // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+        // const refuelSteps = route.steps
+        //   .flatMap((step) => step.includedSteps)
+        //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
             .reduce((groupedGasCosts, step) => {
@@ -66,8 +74,9 @@ export const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
+    const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
-        insufficientGas,
+        insufficientGas: isInsufficientGas ? insufficientGas : undefined,
         isInitialLoading,
     };
 };

package/hooks/useInitializer.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { checkPackageUpdates } from '@lifi/sdk';
 import { useEffect } from 'react';
 import { name, version } from '../config/version';

package/hooks/useProcessMessage.d.ts

@@ -1,10 +1,11 @@
 import type { EVMChain, LifiStep, Process } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
+import type { WidgetVariant } from '../types';
 export declare const useProcessMessage: (step?: LifiStep, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process, variant?: WidgetVariant): {
     title?: string;
     message?: string;
 };

package/hooks/useProcessMessage.js

@@ -1,18 +1,21 @@
 import { LifiErrorCode } from '@lifi/sdk';
 import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../providers';
 import { formatTokenAmount } from '../utils';
 import { useChains } from './useChains';
 export const useProcessMessage = (step, process) => {
+    const { variant } = useWidgetConfig();
     const { t } = useTranslation();
     const { getChainById } = useChains();
     if (!step || !process) {
         return {};
     }
-    return getProcessMessage(t, getChainById, step, process);
+    return getProcessMessage(t, getChainById, step, process, variant);
 };
 const processStatusMessages = {
     TOKEN_ALLOWANCE: {
         STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.tokenAllowance.pending`),
         PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
         DONE: (t) => t(`swap.process.tokenAllowance.done`),
     },
@@ -24,7 +27,9 @@ const processStatusMessages = {
         STARTED: (t) => t(`swap.process.swap.started`),
         ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
         PENDING: (t) => t(`swap.process.swap.pending`),
-        DONE: (t) => t(`swap.process.swap.done`),
+        DONE: (t, variant) => variant === 'nft'
+            ? t(`swap.process.nft.done`)
+            : t(`swap.process.swap.done`),
     },
     CROSS_CHAIN: {
         STARTED: (t) => t(`swap.process.crossChain.started`),
@@ -34,7 +39,9 @@ const processStatusMessages = {
     },
     RECEIVING_CHAIN: {
         PENDING: (t) => t(`swap.process.receivingChain.pending`),
-        DONE: (t) => t(`swap.process.receivingChain.done`),
+        DONE: (t, variant) => variant === 'nft'
+            ? t(`swap.process.nft.done`)
+            : t(`swap.process.receivingChain.done`),
     },
     TRANSACTION: {},
 };
@@ -64,7 +71,7 @@ const processSubstatusMessages = {
     INVALID: {},
     NOT_FOUND: {},
 };
-export function getProcessMessage(t, getChainById, step, process) {
+export function getProcessMessage(t, getChainById, step, process, variant) {
     if (process.error && process.status === 'FAILED') {
         const getTransactionNotSentMessage = () => t(`swap.error.message.transactionNotSent`, {
             amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
@@ -74,6 +81,12 @@ export function getProcessMessage(t, getChainById, step, process) {
         let title = '';
         let message = '';
         switch (process.error.code) {
+            case LifiErrorCode.AllowanceRequired:
+                title = t(`swap.error.title.allowanceRequired`);
+                message = t(`swap.error.message.allowanceRequired`, {
+                    tokenSymbol: step.action.fromToken.symbol,
+                });
+                break;
             case LifiErrorCode.BalanceError:
                 title = t(`swap.error.title.balanceIsTooLow`);
                 message = getTransactionNotSentMessage();
@@ -86,6 +99,14 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.InsufficientFunds:
+                title = t(`swap.error.title.insufficientFunds`);
+                message = `${t(`swap.error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
+                break;
+            case LifiErrorCode.SlippageError:
+                title = t(`swap.error.title.slippageNotMet`);
+                message = t(`swap.error.message.slippageThreshold`);
+                break;
             case LifiErrorCode.TransactionFailed:
                 title = t(`swap.error.title.transactionFailed`);
                 message = t(`swap.error.message.transactionFailed`);
@@ -102,10 +123,6 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.transactionCanceled`);
                 message = getTransactionNotSentMessage();
                 break;
-            case LifiErrorCode.SlippageError:
-                title = t(`swap.error.title.slippageNotMet`);
-                message = t(`swap.error.message.slippageThreshold`);
-                break;
             case LifiErrorCode.TransactionRejected:
                 title = t(`swap.error.title.transactionRejected`);
                 message = t(`swap.error.message.transactionRejected`, {
@@ -127,6 +144,7 @@ export function getProcessMessage(t, getChainById, step, process) {
         }
         return { title, message };
     }
-    const title = processSubstatusMessages[process.status]?.[process.substatus]?.(t) ?? processStatusMessages[process.type]?.[process.status]?.(t);
+    const title = processSubstatusMessages[process.status]?.[process.substatus]?.(t) ??
+        processStatusMessages[process.type]?.[process.status]?.(t, variant);
     return { title };
 }

package/hooks/useRouteExecution.js

@@ -14,7 +14,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
     const routeExecutionStoreContext = useRouteExecutionStoreContext();
     const routeExecution = useRouteExecutionStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
-    const updateCallback = (updatedRoute) => {
+    const updateRouteHook = (updatedRoute) => {
         const routeExecution = routeExecutionStoreContext.getState().routes[updatedRoute.id];
         if (!routeExecution) {
             return;
@@ -45,10 +45,11 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         }
         const currentChainId = await account.signer.getChainId();
         if (currentChainId !== requiredChainId) {
-            const switched = await switchChain(requiredChainId);
-            if (!switched) {
+            const signer = await switchChain(requiredChainId);
+            if (!signer) {
                 throw new Error('Chain was not switched.');
             }
+            return signer;
         }
         return account.signer;
     };
@@ -68,7 +69,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         }
         queryClient.removeQueries(['routes'], { exact: false });
         return lifi.executeRoute(account.signer, routeExecution.route, {
-            updateCallback,
+            updateRouteHook,
             switchChainHook,
             acceptExchangeRateUpdateHook,
             infiniteApproval: false,
@@ -90,7 +91,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
             throw Error('Execution route not found.');
         }
         return lifi.resumeRoute(account.signer, resumedRoute ?? routeExecution.route, {
-            updateCallback,
+            updateRouteHook,
             switchChainHook,
             acceptExchangeRateUpdateHook,
             infiniteApproval: false,

package/hooks/useSwapOnly.d.ts

@@ -0,0 +1 @@
+export declare const useSwapOnly: () => boolean;

package/hooks/useSwapOnly.js

@@ -0,0 +1,5 @@
+import { useSplitSubvariantStore } from '../stores';
+export const useSwapOnly = () => {
+    const state = useSplitSubvariantStore((state) => state.state);
+    return state === 'swap';
+};

package/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,8 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
 interface SwapRoutesProps {
-    onSettled?: (data?: RoutesResponse) => void;
     insurableRoute?: Route;
 }
-export declare const useSwapRoutes: ({ onSettled, insurableRoute, }?: SwapRoutesProps) => {
+export declare const useSwapRoutes: ({ insurableRoute }?: SwapRoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;

package/hooks/useSwapRoutes.js

@@ -7,12 +7,14 @@ import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedWatch, useGasRefuel, useToken } from '.';
 import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
+import { useSwapOnly } from './useSwapOnly';
 const refetchTime = 60000;
-export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
+export const useSwapRoutes = ({ insurableRoute } = {}) => {
     const lifi = useLiFi();
-    const { variant, sdkConfig, insurance } = useWidgetConfig();
-    const { account, provider } = useWallet();
+    const { variant, sdkConfig, insurance, contractTool } = useWidgetConfig();
+    const { account } = useWallet();
     const queryClient = useQueryClient();
+    const swapOnly = useSwapOnly();
     const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = useSettings([
         'slippage',
         'routePriority',
@@ -36,7 +38,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     });
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
     const { token: toToken } = useToken(toChainId, toTokenAddress);
-    const { enabled: enabledRefuel, gasRecommendation } = useGasRefuel();
+    const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } = useGasRefuel();
     const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
         (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
     const contractCallQuoteEnabled = variant === 'nft'
@@ -63,13 +65,13 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         toContractCallData,
         toContractGasLimit,
         slippage,
-        enabledBridges,
+        swapOnly ? [] : enabledBridges,
         enabledExchanges,
         routePriority,
         variant,
         sdkConfig?.defaultRouteOptions?.allowSwitchChain,
         enabledRefuel && enabledAutoRefuel,
-        gasRecommendation?.fromAmount,
+        gasRecommendationFromAmount,
         insurance,
         insurableRoute?.id,
     ];
@@ -77,7 +79,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         let toWalletAddress;
         try {
             toWalletAddress =
-                (await provider?.resolveName(toAddress)) ??
+                (await account.signer?.provider?.resolveName(toAddress)) ??
                     (isAddress(toAddress) ? toAddress : fromAddress);
         }
         catch {
@@ -87,6 +89,16 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
             .mul(10 ** (fromToken?.decimals ?? 0))
             .toFixed(0);
         const formattedSlippage = parseFloat(slippage) / 100;
+        const allowedBridges = insurableRoute
+            ? insurableRoute.steps.flatMap((step) => step.includedSteps
+                .filter((includedStep) => includedStep.type === 'cross')
+                .map((includedStep) => includedStep.toolDetails.key))
+            : enabledBridges;
+        const allowedExchanges = insurableRoute
+            ? insurableRoute.steps.flatMap((step) => step.includedSteps
+                .filter((includedStep) => includedStep.type === 'swap')
+                .map((includedStep) => includedStep.toolDetails.key))
+            : enabledExchanges;
         if (variant === 'nft') {
             const contractCallQuote = await lifi.getContractCallQuote({
                 fromAddress,
@@ -98,12 +110,25 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
                 toContractAddress,
                 toContractCallData,
                 toContractGasLimit,
+                allowBridges: allowedBridges,
                 // toFallbackAddress: toAddress,
                 slippage: formattedSlippage,
             }, { signal });
             contractCallQuote.estimate.toAmount = toTokenAmount;
             contractCallQuote.estimate.toAmountMin = toTokenAmount;
             contractCallQuote.action.toToken = toToken;
+            const customStep = variant === 'nft'
+                ? contractCallQuote.includedSteps?.find((step) => step.type === 'custom')
+                : undefined;
+            if (customStep && contractTool) {
+                const toolDetails = {
+                    key: contractTool.name,
+                    name: contractTool.name,
+                    logoURI: contractTool.logoURI,
+                };
+                customStep.toolDetails = toolDetails;
+                contractCallQuote.toolDetails = toolDetails;
+            }
             const route = {
                 id: uuidv4(),
                 fromChainId: contractCallQuote.action.fromChainId,
@@ -123,16 +148,6 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
             };
             return { routes: [route] };
         }
-        const allowedBridges = insurableRoute
-            ? insurableRoute.steps.flatMap((step) => step.includedSteps
-                .filter((includedStep) => includedStep.type === 'cross')
-                .map((includedStep) => includedStep.toolDetails.key))
-            : enabledBridges;
-        const allowedExchanges = insurableRoute
-            ? insurableRoute.steps.flatMap((step) => step.includedSteps
-                .filter((includedStep) => includedStep.type === 'swap')
-                .map((includedStep) => includedStep.toolDetails.key))
-            : enabledExchanges;
         return lifi.getRoutes({
             fromChainId,
             fromAmount,
@@ -189,7 +204,6 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
                 });
             }
         },
-        onSettled,
     });
     return {
         routes: data?.routes,

package/hooks/useToken.d.ts

@@ -1,4 +1,4 @@
 export declare const useToken: (chainId?: number, tokenAddress?: string) => {
-    token: import("..").Token | undefined;
+    token: import("..").TokenAmount | undefined;
     isLoading: boolean;
 };

package/hooks/useTokenAddressBalance.d.ts

@@ -1,5 +1,5 @@
 export declare const useTokenAddressBalance: (chainId?: number, tokenAddress?: string) => {
-    token: import("..").Token | undefined;
+    token: import("..").TokenAmount | undefined;
     isLoading: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("..").Token[], unknown>>;
+    refetch: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("..").TokenAmount[], unknown>>;
 };

package/hooks/useTokenBalance.js

@@ -1,14 +1,13 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useWallet } from '../providers';
-import { formatTokenAmount } from '../utils';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 const defaultRefetchInterval = 30000;
 export const useTokenBalance = (token, accountAddress) => {
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const queryClient = useQueryClient();
     const walletAddress = accountAddress || account.address;
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const tokenBalanceQueryKey = useMemo(() => ['token-balance', walletAddress, token?.chainId, token?.address], [token?.address, token?.chainId, walletAddress]);
     const { data, isLoading, refetch } = useQuery(tokenBalanceQueryKey, async ({ queryKey: [, accountAddress] }) => {
         const cachedToken = queryClient
@@ -26,8 +25,8 @@ export const useTokenBalance = (token, accountAddress) => {
             throw Error('Could not get tokens balance.');
         }
         const cachedTokenAmount = queryClient.getQueryData(tokenBalanceQueryKey);
-        const formattedAmount = formatTokenAmount(tokenBalances[0].amount);
-        if (cachedTokenAmount?.amount !== formattedAmount) {
+        const tokenAmount = tokenBalances[0].amount;
+        if (cachedTokenAmount?.amount !== tokenAmount) {
             queryClient.setQueryDefaults(tokenBalanceQueryKey, {
                 refetchInterval: defaultRefetchInterval,
                 staleTime: defaultRefetchInterval,
@@ -39,14 +38,14 @@ export const useTokenBalance = (token, accountAddress) => {
                 const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
                 clonedData[index] = {
                     ...clonedData[index],
-                    amount: formattedAmount,
+                    amount: tokenAmount,
                 };
                 return clonedData;
             }
         });
         return {
             ...tokenBalances[0],
-            amount: formattedAmount,
+            amount: tokenAmount,
         };
     }, {
         enabled: Boolean(walletAddress && token),

package/hooks/useTokenBalances.d.ts

@@ -1,9 +1,9 @@
-import type { Token } from '../types';
+import type { TokenAmount } from '../types';
 export declare const useTokenBalances: (selectedChainId?: number) => {
-    tokens: Token[];
-    tokensWithBalance: Token[] | undefined;
-    featuredTokens: import("@lifi/types").Token[] | undefined;
+    tokens: TokenAmount[];
+    tokensWithBalance: TokenAmount[] | undefined;
+    featuredTokens: import("@lifi/types").StaticToken[] | undefined;
     isLoading: boolean;
     isBalanceLoading: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<Token[], unknown>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount[], unknown>>;
 };