@lifi/widget 3.0.0-alpha.9 → 3.0.0-beta.1

package/hooks/useRoutes.ts

@@ -1,18 +1,21 @@
 import type { Route, RoutesResponse, Token } from '@lifi/sdk';
-import { LiFiErrorCode, getContractCallQuote, getRoutes } from '@lifi/sdk';
+import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { getEnsAddress } from '@wagmi/core';
-import { useWatch } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
-import { isAddress as isEVMAddress, parseUnits } from 'viem';
-import { normalize } from 'viem/ens';
-import { useConfig } from 'wagmi';
-import { useChain, useDebouncedWatch, useGasRefuel, useToken } from '.';
-import { FormKey, useWidgetConfig } from '../providers';
-import { useSettings } from '../stores';
-import { isSVMAddress } from '../utils';
-import { useAccount } from './useAccount';
-import { useSwapOnly } from './useSwapOnly';
+import { parseUnits } from 'viem';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { useSettings } from '../stores/settings/useSettings.js';
+import { defaultSlippage } from '../stores/settings/useSettingsStore.js';
+import { WidgetEvent } from '../types/events.js';
+import { getChainTypeFromAddress } from '../utils/chainType.js';
+import { useAccount } from './useAccount.js';
+import { useChain } from './useChain.js';
+import { useDebouncedWatch } from './useDebouncedWatch.js';
+import { useGasRefuel } from './useGasRefuel.js';
+import { useSwapOnly } from './useSwapOnly.js';
+import { useToken } from './useToken.js';
+import { useWidgetEvents } from './useWidgetEvents.js';
 
 const refetchTime = 60_000;
 
@@ -22,47 +25,40 @@ interface RoutesProps {
 
 export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
-  const { account } = useAccount();
   const queryClient = useQueryClient();
-  const config = useConfig();
+  const emitter = useWidgetEvents();
   const swapOnly = useSwapOnly();
   const {
-    slippage,
-    enabledBridges,
+    disabledBridges,
+    disabledExchanges,
     enabledAutoRefuel,
-    enabledExchanges,
     routePriority,
+    slippage,
   } = useSettings([
-    'slippage',
-    'routePriority',
+    'disabledBridges',
+    'disabledExchanges',
     'enabledAutoRefuel',
-    'enabledBridges',
-    'enabledExchanges',
+    'routePriority',
+    'slippage',
   ]);
-  const [fromTokenAmount] = useDebouncedWatch([FormKey.FromAmount], 320);
+  const [fromTokenAmount] = useDebouncedWatch(500, 'fromAmount');
   const [
     fromChainId,
     fromTokenAddress,
     toAddress,
     toTokenAmount,
     toChainId,
-    toContractAddress,
-    toContractCallData,
-    toContractGasLimit,
     toTokenAddress,
-  ] = useWatch({
-    name: [
-      FormKey.FromChain,
-      FormKey.FromToken,
-      FormKey.ToAddress,
-      FormKey.ToAmount,
-      FormKey.ToChain,
-      FormKey.ToContractAddress,
-      FormKey.ToContractCallData,
-      FormKey.ToContractGasLimit,
-      FormKey.ToToken,
-    ],
-  });
+    contractCalls,
+  ] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'toAddress',
+    'toAmount',
+    'toChain',
+    'toToken',
+    'contractCalls',
+  );
   const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
   const { token: toToken } = useToken(toChainId, toTokenAddress);
   const { chain: fromChain } = useChain(fromChainId);
@@ -70,48 +66,53 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel();
 
-  const hasAmount =
-    (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
-    (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
+  const { account } = useAccount({ chainType: fromChain?.chainType });
+
+  const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0;
 
   const contractCallQuoteEnabled: boolean =
-    subvariant === 'nft'
-      ? Boolean(toContractAddress && toContractCallData && toContractGasLimit)
-      : true;
+    subvariant === 'custom' ? Boolean(contractCalls && account.address) : true;
+
+  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
+  // If toAddress is set, it must have the same chainType as toChain
+  const hasToAddressAndChainTypeSatisfied: boolean =
+    !!toChain &&
+    !!toAddress &&
+    getChainTypeFromAddress(toAddress) === toChain.chainType;
+  // We need to check for toAddress only if it is set
+  const isToAddressSatisfied = toAddress
+    ? hasToAddressAndChainTypeSatisfied
+    : true;
 
-  // When we bridge between ecosystems we need to be sure toAddress is set
-  const isChainTypeSatisfied =
-    fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true;
+  // toAddress might be an empty string, but we need to pass undefined if there is no value
+  const toWalletAddress = toAddress || undefined;
 
   const isEnabled =
-    !isNaN(fromChainId) &&
-    !isNaN(toChainId) &&
+    Boolean(Number(fromChainId)) &&
+    Boolean(Number(toChainId)) &&
     Boolean(fromToken?.address) &&
     Boolean(toToken?.address) &&
     !Number.isNaN(slippage) &&
     hasAmount &&
-    isChainTypeSatisfied &&
+    isToAddressSatisfied &&
     contractCallQuoteEnabled;
 
-  const accountAddress =
-    fromChain?.chainType === account.chainType ? account.address : undefined;
-
+  // Some values should be strictly typed and isEnabled ensures that
   const queryKey = [
     'routes',
-    accountAddress,
-    fromChainId,
-    fromToken?.address,
+    account.address,
+    fromChainId as number,
+    fromToken?.address as string,
     fromTokenAmount,
-    toAddress,
-    toChainId,
-    toToken?.address,
+    toWalletAddress,
+    toChainId as number,
+    toToken?.address as string,
     toTokenAmount,
-    toContractAddress,
-    toContractCallData,
-    toContractGasLimit,
+    contractCalls,
     slippage,
-    swapOnly ? [] : enabledBridges,
-    enabledExchanges,
+    swapOnly,
+    disabledBridges,
+    disabledExchanges,
     routePriority,
     subvariant,
     sdkConfig?.routeOptions?.allowSwitchChain,
@@ -119,7 +120,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     gasRecommendationFromAmount,
     insurance,
     insurableRoute?.id,
-  ];
+  ] as const;
 
   const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } =
     useQuery({
@@ -135,12 +136,11 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           toChainId,
           toTokenAddress,
           toTokenAmount,
-          toContractAddress,
-          toContractCallData,
-          toContractGasLimit,
-          slippage,
-          enabledBridges,
-          enabledExchanges,
+          contractCalls,
+          slippage = defaultSlippage,
+          swapOnly,
+          disabledBridges,
+          disabledExchanges,
           routePriority,
           subvariant,
           allowSwitchChain,
@@ -151,57 +151,54 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         ],
         signal,
       }) => {
-        let toWalletAddress = toAddress || fromAddress;
-        const isAddress = isEVMAddress(toAddress) || isSVMAddress(toAddress);
-        try {
-          // FIXME: resolve address in one place
-          toWalletAddress = !isAddress
-            ? await getEnsAddress(config, {
-                chainId: toChainId,
-                name: normalize(toAddress),
-              })
-            : isAddress
-              ? toAddress
-              : fromAddress;
-        } catch {
-          toWalletAddress = isAddress ? toAddress : fromAddress;
-        }
         const fromAmount = parseUnits(
           fromTokenAmount,
           fromToken!.decimals,
         ).toString();
         const formattedSlippage = parseFloat(slippage) / 100;
 
-        const allowedBridges: string[] = insurableRoute
-          ? insurableRoute.steps.flatMap((step) =>
-              step.includedSteps
-                .filter((includedStep) => includedStep.type === 'cross')
-                .map((includedStep) => includedStep.toolDetails.key),
-            )
-          : enabledBridges;
+        const allowedBridges = swapOnly
+          ? []
+          : insurableRoute
+            ? insurableRoute.steps.flatMap((step) =>
+                step.includedSteps.reduce((toolKeys, includedStep) => {
+                  if (includedStep.type === 'cross') {
+                    toolKeys.push(includedStep.toolDetails.key);
+                  }
+                  return toolKeys;
+                }, [] as string[]),
+              )
+            : undefined;
 
-        const allowedExchanges: string[] = insurableRoute
+        const allowedExchanges = insurableRoute
           ? insurableRoute.steps.flatMap((step) =>
-              step.includedSteps
-                .filter((includedStep) => includedStep.type === 'swap')
-                .map((includedStep) => includedStep.toolDetails.key),
+              step.includedSteps.reduce((toolKeys, includedStep) => {
+                if (includedStep.type === 'swap') {
+                  toolKeys.push(includedStep.toolDetails.key);
+                }
+                return toolKeys;
+              }, [] as string[]),
             )
-          : enabledExchanges;
+          : undefined;
 
-        if (subvariant === 'nft') {
-          const contractCallQuote = await getContractCallQuote(
+        if (subvariant === 'custom' && contractCalls && toTokenAmount) {
+          const contractCallQuote = await getContractCallsQuote(
             {
-              fromAddress,
+              // Contract calls are enabled only when fromAddress is set
+              fromAddress: fromAddress as string,
               fromChain: fromChainId,
               fromToken: fromTokenAddress,
               toAmount: toTokenAmount,
               toChain: toChainId,
               toToken: toTokenAddress,
-              toContractAddress,
-              toContractCallData,
-              toContractGasLimit,
+              contractCalls,
+              denyBridges: disabledBridges.length ? disabledBridges : undefined,
+              denyExchanges: disabledExchanges.length
+                ? disabledExchanges
+                : undefined,
               allowBridges: allowedBridges,
-              toFallbackAddress: toWalletAddress,
+              allowExchanges: allowedExchanges,
+              toFallbackAddress: toAddress,
               slippage: formattedSlippage,
             },
             { signal },
@@ -210,7 +207,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           contractCallQuote.action.toToken = toToken!;
 
           const customStep =
-            subvariant === 'nft'
+            subvariant === 'custom'
               ? contractCallQuote.includedSteps?.find(
                   (step) => step.type === 'custom',
                 )
@@ -238,7 +235,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             toAmount: toTokenAmount,
             toAmountMin: toTokenAmount,
             toToken: toToken!,
-            toAddress: toWalletAddress,
+            toAddress:
+              contractCallQuote.action.toAddress ||
+              contractCallQuote.action.fromAddress,
             gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
             steps: [contractCallQuote],
             insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
@@ -249,29 +248,41 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
 
         const data = await getRoutes(
           {
-            fromChainId,
+            fromAddress,
             fromAmount,
+            fromChainId,
             fromTokenAddress,
+            toAddress,
             toChainId,
             toTokenAddress,
-            fromAddress,
-            toAddress: toWalletAddress,
             fromAmountForGas:
               enabledRefuel && gasRecommendationFromAmount
                 ? gasRecommendationFromAmount
                 : undefined,
             options: {
-              slippage: formattedSlippage,
-              bridges: {
-                allow: allowedBridges,
-              },
-              exchanges: {
-                allow: allowedExchanges,
-              },
-              order: routePriority,
               allowSwitchChain:
                 subvariant === 'refuel' ? false : allowSwitchChain,
+              bridges:
+                allowedBridges?.length || disabledBridges.length
+                  ? {
+                      allow: allowedBridges,
+                      deny: disabledBridges.length
+                        ? disabledBridges
+                        : undefined,
+                    }
+                  : undefined,
+              exchanges:
+                allowedExchanges?.length || disabledExchanges.length
+                  ? {
+                      allow: allowedExchanges,
+                      deny: disabledExchanges.length
+                        ? disabledExchanges
+                        : undefined,
+                    }
+                  : undefined,
               insurance: insurance ? Boolean(insurableRoute) : undefined,
+              order: routePriority,
+              slippage: formattedSlippage,
             },
           },
           { signal },
@@ -298,6 +309,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             );
           });
         }
+        emitter.emit(WidgetEvent.AvailableRoutes, data.routes);
         return data;
       },
       enabled: isEnabled,
@@ -308,7 +320,10 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           refetchTime,
         );
       },
-      retry(_, error: any) {
+      retry(failureCount, error: any) {
+        if (failureCount >= 5) {
+          return false;
+        }
         if (error?.code === LiFiErrorCode.NotFound) {
           return false;
         }
@@ -324,5 +339,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     dataUpdatedAt,
     refetchTime,
     refetch,
+    fromChain,
+    toChain,
   };
 };

package/hooks/useScrollableContainer.ts

@@ -1,6 +1,6 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
-import { createElementId, ElementId } from '../utils';
-import { useDefaultElementId } from './useDefaultElementId';
+import { ElementId, createElementId } from '../utils/elements.js';
+import { useDefaultElementId } from './useDefaultElementId.js';
 
 export const getScrollableContainer = (elementId: string) =>
   document.getElementById(

package/hooks/useSettingMonitor.ts

@@ -1,24 +1,29 @@
+import { shallow } from 'zustand/shallow';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import {
   defaultConfigurableSettings,
   setDefaultSettings,
   useSettingsStore,
-} from '../stores';
-import { shallow } from 'zustand/shallow';
-import { useTools } from './useTools';
-import { useWidgetConfig } from '../providers';
+} from '../stores/settings/useSettingsStore.js';
+import { useTools } from './useTools.js';
 
 export const useSettingMonitor = () => {
-  const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] =
-    useSettingsStore(
-      (state) => [
-        state.enabledBridges,
-        state.enabledExchanges,
-        state.routePriority,
-        state.slippage,
-        state.gasPrice,
-      ],
-      shallow,
-    );
+  const [
+    disabledBridges,
+    disabledExchanges,
+    routePriority,
+    slippage,
+    gasPrice,
+  ] = useSettingsStore(
+    (state) => [
+      state.disabledBridges,
+      state.disabledExchanges,
+      state.routePriority,
+      state.slippage,
+      state.gasPrice,
+    ],
+    shallow,
+  );
   const { tools } = useTools();
   const resetSettings = useSettingsStore((state) => state.reset);
   const config = useWidgetConfig();
@@ -36,13 +41,8 @@ export const useSettingMonitor = () => {
 
   const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice;
 
-  const isBridgesChanged = tools?.bridges
-    ? tools?.bridges?.length !== enabledBridges?.length
-    : false;
-
-  const isExchangesChanged = tools?.exchanges
-    ? tools?.exchanges?.length !== enabledExchanges?.length
-    : false;
+  const isBridgesChanged = Boolean(disabledBridges.length);
+  const isExchangesChanged = Boolean(disabledExchanges.length);
 
   const isCustomRouteSettings =
     isBridgesChanged ||
@@ -56,7 +56,6 @@ export const useSettingMonitor = () => {
   const reset = () => {
     if (tools) {
       resetSettings(
-        config,
         tools.bridges.map((tool) => tool.key),
         tools.exchanges.map((tool) => tool.key),
       );

package/hooks/useSwapOnly.ts

@@ -1,4 +1,4 @@
-import { useSplitSubvariantStore } from '../stores';
+import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js';
 
 export const useSwapOnly = () => {
   const state = useSplitSubvariantStore((state) => state.state);

package/hooks/useToAddressRequirements.ts

@@ -0,0 +1,23 @@
+import { useChain } from '../hooks/useChain.js';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { RequiredUI } from '../types/widget.js';
+
+export const useToAddressRequirements = () => {
+  const { requiredUI } = useWidgetConfig();
+  const [fromChainId, toChainId] = useFieldValues('fromChain', 'toChain');
+
+  const { chain: fromChain } = useChain(fromChainId);
+  const { chain: toChain } = useChain(toChainId);
+
+  const isDifferentChainType =
+    fromChain && toChain && fromChain.chainType !== toChain.chainType;
+
+  const requiredToAddress =
+    requiredUI?.includes(RequiredUI.ToAddress) || isDifferentChainType;
+
+  return {
+    requiredToAddress,
+    requiredToChainType: toChain?.chainType,
+  };
+};

package/hooks/useToAddressReset.ts

@@ -0,0 +1,38 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js';
+import { useBookmarks } from '../stores/bookmarks/useBookmarks.js';
+import { useFieldActions } from '../stores/form/useFieldActions.js';
+import { RequiredUI } from '../types/widget.js';
+
+export const useToAddressReset = () => {
+  const { requiredUI } = useWidgetConfig();
+  const { setFieldValue } = useFieldActions();
+  const { selectedBookmark } = useBookmarks();
+  const { setSelectedBookmark } = useBookmarkActions();
+
+  const tryResetToAddress = (toChain: ExtendedChain) => {
+    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress);
+
+    const bookmarkSatisfiesToChainType =
+      selectedBookmark?.chainType === toChain?.chainType;
+
+    const shouldResetToAddress =
+      !requiredToAddress && !bookmarkSatisfiesToChainType;
+
+    // toAddress field is required (always visible) when bridging between
+    // two ecosystems (fromChain and toChain have different chain types).
+    // We clean up toAddress on every chain change if toAddress is not required.
+    // This is used when we switch between different chain ecosystems (chain types) and
+    // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
+    // but it keeps toAddress value set for the previous chain pair.
+    if (shouldResetToAddress) {
+      setFieldValue('toAddress', '');
+      setSelectedBookmark();
+    }
+  };
+
+  return {
+    tryResetToAddress,
+  };
+};

package/hooks/useToken.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useTokens } from './useTokens';
-import { useTokenSearch } from './useTokenSearch';
+import { useTokenSearch } from './useTokenSearch.js';
+import { useTokens } from './useTokens.js';
 
 export const useToken = (chainId?: number, tokenAddress?: string) => {
   const { tokens, isLoading } = useTokens(chainId);

package/hooks/useTokenAddressBalance.ts

@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
-import { useTokenBalances } from './useTokenBalances';
+import type { TokenAmount } from '../types/token.js';
+import { useTokenBalances } from './useTokenBalances.js';
 
 export const useTokenAddressBalance = (
   chainId?: number,
   tokenAddress?: string,
 ) => {
-  const { tokens, tokensWithBalance, isBalanceLoading, refetch } =
+  const { tokens, tokensWithBalance, chain, isBalanceLoading, refetch } =
     useTokenBalances(chainId);
 
   const token = useMemo(() => {
@@ -13,12 +14,13 @@ export const useTokenAddressBalance = (
       const token = (tokensWithBalance ?? tokens)?.find(
         (token) => token.address === tokenAddress && token.chainId === chainId,
       );
-      return token;
+      return token as TokenAmount;
     }
   }, [chainId, tokenAddress, tokens, tokensWithBalance]);
 
   return {
     token,
+    chain,
     isLoading: isBalanceLoading,
     refetch,
   };

package/hooks/useTokenBalance.ts

@@ -2,7 +2,7 @@ import type { ExtendedChain } from '@lifi/sdk';
 import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useAccount } from './useAccount';
+import { useAccount } from './useAccount.js';
 
 const defaultRefetchInterval = 30_000;
 
@@ -11,37 +11,24 @@ export const useTokenBalance = (
   token?: Token,
   chain?: ExtendedChain,
 ) => {
-  const { account } = useAccount();
-  const queryClient = useQueryClient();
-  const walletAddress =
-    accountAddress ||
+  const { account } = useAccount(
     // When we provide chain we want to be sure that account address used is from the same ecosystem as token
-    !chain
-      ? account.address
-      : chain.chainType === account.chainType
-        ? account.address
-        : undefined;
+    chain ? { chainType: chain.chainType } : undefined,
+  );
+  const queryClient = useQueryClient();
+  const walletAddress = accountAddress || account.address;
 
   const tokenBalanceQueryKey = useMemo(
-    () => ['token-balance', walletAddress, token?.chainId, token?.address],
+    () =>
+      ['token-balance', walletAddress, token?.chainId, token?.address] as const,
     [token?.address, token?.chainId, walletAddress],
   );
 
   const { data, isLoading, refetch } = useQuery({
     queryKey: tokenBalanceQueryKey,
-    queryFn: async ({ queryKey: [, accountAddress] }) => {
-      const cachedToken = queryClient
-        .getQueryData<Token[]>([
-          'token-balances',
-          accountAddress,
-          token!.chainId,
-        ])
-        ?.find((t) => t.address === token!.address);
-
-      if (cachedToken) {
-        return cachedToken as TokenAmount;
-      }
-
+    queryFn: async ({
+      queryKey: [, accountAddress, tokenChainId, tokenAddress],
+    }) => {
       const tokenBalances = await getTokenBalancesWithRetry(
         accountAddress as string,
         [token!],
@@ -64,12 +51,12 @@ export const useTokenBalance = (
       }
 
       queryClient.setQueriesData<TokenAmount[]>(
-        { queryKey: ['token-balances', accountAddress, token!.chainId] },
+        { queryKey: ['token-balances', accountAddress, tokenChainId] },
         (data) => {
           if (data) {
             const clonedData = [...data];
             const index = clonedData.findIndex(
-              (dataToken) => dataToken.address === token!.address,
+              (dataToken) => dataToken.address === tokenAddress,
             );
             clonedData[index] = {
               ...clonedData[index],