@lifi/widget 3.0.0-alpha.8 → 3.0.0-beta.0

package/hooks/useDebouncedWatch.ts

@@ -1,19 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
-import { useWatch } from 'react-hook-form';
+import type { FormFieldNames } from '../stores/form/types.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
 
-export const useDebouncedWatch = (name: any, delay: number) => {
-  const watchedValue = useWatch({
-    name,
-  });
+export const useDebouncedWatch = <T extends FormFieldNames[]>(
+  delay: number,
+  ...name: T
+) => {
+  const watchedValue = useFieldValues(...name);
   const [debouncedValue, setDebouncedValue] = useState(watchedValue);
-  const debouncedValueRef = useRef<any>();
+  const debouncedValueRef = useRef<typeof watchedValue>();
   const isMounted = useRef(false);
 
   useEffect(() => {
     if (isMounted.current) {
-      const hasWatchedValue = Array.isArray(watchedValue)
-        ? watchedValue.some((value) => value)
-        : Boolean(watchedValue);
+      const hasWatchedValue = watchedValue.some((value) => value);
       if (hasWatchedValue) {
         const handler = setTimeout(() => {
           setDebouncedValue(watchedValue);

package/hooks/useDefaultElementId.ts

@@ -1,4 +1,4 @@
-import { useWidgetConfig } from '../providers';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 
 export const useDefaultElementId = () => {
   const { elementId } = useWidgetConfig();

package/hooks/useFromTokenSufficiency.ts

@@ -1,20 +1,20 @@
 import type { RouteExtended } from '@lifi/sdk';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { useWatch } from 'react-hook-form';
 import { parseUnits } from 'viem';
-import { FormKey } from '../providers';
-import { isRouteDone } from '../stores';
-import { useAccount } from './useAccount';
-import { useTokenAddressBalance } from './useTokenAddressBalance';
-import { getTokenBalancesWithRetry } from './useTokenBalance';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { isRouteDone } from '../stores/routes/utils.js';
+import { useAccount } from './useAccount.js';
+import { useTokenAddressBalance } from './useTokenAddressBalance.js';
+import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 
 const refetchInterval = 30_000;
 
 export const useFromTokenSufficiency = (route?: RouteExtended) => {
-  const { account } = useAccount();
-  const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
-    name: [FormKey.FromChain, FormKey.FromToken, FormKey.FromAmount],
-  });
+  const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'fromAmount',
+  );
 
   let chainId = fromChainId;
   let tokenAddress = fromTokenAddress;
@@ -23,8 +23,13 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
     tokenAddress = route.fromToken.address;
   }
 
-  const { token, isLoading: isTokenAddressBalanceLoading } =
-    useTokenAddressBalance(chainId, tokenAddress);
+  const {
+    token,
+    chain,
+    isLoading: isTokenAddressBalanceLoading,
+  } = useTokenAddressBalance(chainId, tokenAddress);
+
+  const { account } = useAccount({ chainType: chain?.chainType });
 
   const { data: insufficientFromToken, isLoading } = useQuery({
     queryKey: [
@@ -33,9 +38,9 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
       chainId,
       tokenAddress,
       route?.id ?? fromAmount,
-    ],
-    queryFn: async () => {
-      if (!account.address || !token) {
+    ] as const,
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      if (!accountAddress || !token) {
         return;
       }
       const parsedFromAmount = parseUnits(fromAmount, token.decimals);
@@ -60,7 +65,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
         return insufficientFunds;
       }
 
-      const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+      const tokenBalances = await getTokenBalancesWithRetry(accountAddress, [
         currentAction.fromToken,
       ]);
 

package/hooks/useGasRecommendation.ts

@@ -1,11 +1,11 @@
 import { getGasRecommendation, type ChainId } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { useAvailableChains } from './useAvailableChains';
+import { useAvailableChains } from './useAvailableChains.js';
 
 const refetchInterval = 60_000;
 
 export const useGasRecommendation = (
-  toChainId: ChainId,
+  toChainId?: ChainId,
   fromChain?: ChainId,
   fromToken?: string,
 ) => {
@@ -41,6 +41,5 @@ export const useGasRecommendation = (
     },
     enabled: checkRecommendationLiFuel || checkRecommendationMaxButton,
     refetchInterval,
-    staleTime: refetchInterval,
   });
 };

package/hooks/useGasRefuel.ts

@@ -1,28 +1,25 @@
 import { useMemo } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useAvailableChains } from '.';
-import { FormKey } from '../providers';
-import { useGasRecommendation } from './useGasRecommendation';
-import { useTokenBalance } from './useTokenBalance';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { useAvailableChains } from './useAvailableChains.js';
+import { useGasRecommendation } from './useGasRecommendation.js';
+import { useTokenBalance } from './useTokenBalance.js';
 
 export const useGasRefuel = () => {
   const { getChainById } = useAvailableChains();
 
-  const [fromChainId, fromTokenAddress, toChainId, toAddress] = useWatch({
-    name: [
-      FormKey.FromChain,
-      FormKey.FromToken,
-      FormKey.ToChain,
-      FormKey.ToAddress,
-    ],
-  });
+  const [fromChainId, fromTokenAddress, toChainId, toAddress] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'toChain',
+    'toAddress',
+  );
 
   const toChain = getChainById(toChainId);
   const fromChain = getChainById(fromChainId);
 
   const { token: nativeToken } = useTokenBalance(
     toAddress,
-    toChainId && toChain?.nativeToken,
+    toChainId ? toChain?.nativeToken : undefined,
     toChain,
   );
 
@@ -42,6 +39,7 @@ export const useGasRefuel = () => {
       // If a user runs out of gas, he can't send a source chain transaction.
       fromChainId === toChainId ||
       !gasRecommendation?.available ||
+      !gasRecommendation?.recommended ||
       !nativeToken ||
       !isChainTypeSatisfied
     ) {

package/hooks/useGasSufficiency.ts

@@ -1,9 +1,9 @@
 import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import type { Connector } from 'wagmi';
-import { getTokenBalancesWithRetry, useAvailableChains, useGasRefuel } from '.';
-import { useSettings } from '../stores';
-import { useAccount } from './useAccount';
+import { useAccount } from './useAccount.js';
+import { useAvailableChains } from './useAvailableChains.js';
+import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 
 export interface GasSufficiency {
   gasAmount: bigint;
@@ -17,28 +17,30 @@ export interface GasSufficiency {
 const refetchInterval = 30_000;
 
 export const useGasSufficiency = (route?: RouteExtended) => {
-  const { account } = useAccount();
   const { getChainById } = useAvailableChains();
-
-  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
-  const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
-  const enabledRefuel = enabled && enabledAutoRefuel;
+  const { account } = useAccount({
+    chainType: getChainById(route?.fromChainId)?.chainType,
+  });
 
   const { data: insufficientGas, isLoading } = useQuery({
     queryKey: ['gas-sufficiency-check', account.address, route?.id],
-    queryFn: async () => {
-      // 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');
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      // We assume that LI.Fuel protocol always refuels the destination chain
+      const hasRefuelStep = route!.steps
+        .flatMap((step) => step.includedSteps)
+        .some((includedStep) => includedStep.tool === 'lifuelProtocol');
 
       const gasCosts = route!.steps
         .filter((step) => !step.execution || step.execution.status !== 'DONE')
         .reduce(
           (groupedGasCosts, step) => {
+            // We need to avoid destination chain step sufficiency check if we have LI.Fuel protocol sub-step
+            const skipDueToRefuel =
+              step.action.fromChainId === route?.toChainId && hasRefuelStep;
             if (
               step.estimate.gasCosts &&
-              (account.connector as Connector)?.id !== 'safe'
+              (account.connector as Connector)?.id !== 'safe' &&
+              !skipDueToRefuel
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
@@ -74,6 +76,8 @@ export const useGasSufficiency = (route?: RouteExtended) => {
           {} as Record<number, GasSufficiency>,
         );
 
+      // Check whether we are sending a native token
+      // For native tokens we want to check for the total amount, including the network fee
       if (
         route!.fromToken.address === gasCosts[route!.fromChainId]?.token.address
       ) {
@@ -82,7 +86,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       }
 
       const tokenBalances = await getTokenBalancesWithRetry(
-        account.address!,
+        accountAddress!,
         Object.values(gasCosts).map((item) => item.token),
       );
 
@@ -130,11 +134,8 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     staleTime: refetchInterval,
   });
 
-  const isInsufficientGas =
-    Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
-
   return {
-    insufficientGas: isInsufficientGas ? insufficientGas : undefined,
+    insufficientGas,
     isLoading,
   };
 };

package/hooks/useHeader.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { useHeaderStore } from '../stores/header/useHeaderStore.js';
+
+export function useHeader(title: string, action?: ReactNode) {
+  const { setTitle, setAction } = useHeaderStore((state) => state);
+
+  useEffect(() => {
+    const removeTitle = setTitle(title);
+    const removeAction = action ? setAction(action) : undefined;
+    return () => {
+      removeTitle();
+      if (removeAction) {
+        removeAction();
+      }
+    };
+  }, [setTitle, setAction, action, title]);
+}

package/hooks/useInitializer.ts

@@ -1,14 +1,14 @@
 import { checkPackageUpdates } from '@lifi/sdk';
 import { useEffect } from 'react';
-import { name, version } from '../config/version';
-import { useTools } from './useTools';
+import { name, version } from '../config/version.js';
+import { useTools } from './useTools.js';
 
 let checkedPackageUpdates = false;
 
 export const useInitializer = () => {
   useTools();
   useEffect(() => {
-    if (!checkedPackageUpdates) {
+    if (!checkedPackageUpdates && process.env.NODE_ENV === 'development') {
       checkedPackageUpdates = true;
       checkPackageUpdates(name, version);
     }

package/hooks/useLanguages.ts

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../providers';
-import { useSettings, useSettingsStore } from '../stores';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useSettings } from '../stores/settings/useSettings.js';
+import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
 
 export const useLanguages = () => {
   const { t, i18n } = useTranslation();

package/hooks/useProcessMessage.ts

@@ -10,25 +10,39 @@ import type {
 import { LiFiErrorCode } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../providers';
-import type { WidgetSubvariant } from '../types';
-import { formatTokenAmount } from '../utils';
-import { useAvailableChains } from './useAvailableChains';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { SubvariantOptions, WidgetSubvariant } from '../types/widget.js';
+import { formatTokenAmount } from '../utils/format.js';
+import { useAvailableChains } from './useAvailableChains.js';
 
 export const useProcessMessage = (step?: LiFiStep, process?: Process) => {
-  const { subvariant } = useWidgetConfig();
+  const { subvariant, subvariantOptions } = useWidgetConfig();
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   if (!step || !process) {
     return {};
   }
-  return getProcessMessage(t, getChainById, step, process, subvariant);
+  return getProcessMessage(
+    t,
+    getChainById,
+    step,
+    process,
+    subvariant,
+    subvariantOptions,
+  );
 };
 
 const processStatusMessages: Record<
   ProcessType,
   Partial<
-    Record<Status, (t: TFunction, subvariant?: WidgetSubvariant) => string>
+    Record<
+      Status,
+      (
+        t: TFunction,
+        subvariant?: WidgetSubvariant,
+        subvariantOptions?: SubvariantOptions,
+      ) => string
+    >
   >
 > = {
   TOKEN_ALLOWANCE: {
@@ -45,22 +59,26 @@ const processStatusMessages: Record<
     STARTED: (t) => t(`main.process.swap.started`),
     ACTION_REQUIRED: (t) => t(`main.process.swap.actionRequired`),
     PENDING: (t) => t(`main.process.swap.pending`),
-    DONE: (t, subvariant) =>
-      subvariant === 'nft'
-        ? t(`main.process.nft.done`)
+    DONE: (t, subvariant, subvariantOptions) =>
+      subvariant === 'custom'
+        ? subvariantOptions?.custom
+          ? t(`main.process.${subvariantOptions?.custom}.done`)
+          : t(`main.process.checkout.done`)
         : t(`main.process.swap.done`),
   },
   CROSS_CHAIN: {
-    STARTED: (t) => t(`main.process.crossChain.started`),
-    ACTION_REQUIRED: (t) => t(`main.process.crossChain.actionRequired`),
-    PENDING: (t) => t(`main.process.crossChain.pending`),
-    DONE: (t) => t(`main.process.crossChain.done`),
+    STARTED: (t) => t(`main.process.bridge.started`),
+    ACTION_REQUIRED: (t) => t(`main.process.bridge.actionRequired`),
+    PENDING: (t) => t(`main.process.bridge.pending`),
+    DONE: (t) => t(`main.process.bridge.done`),
   },
   RECEIVING_CHAIN: {
     PENDING: (t) => t(`main.process.receivingChain.pending`),
-    DONE: (t, subvariant) =>
-      subvariant === 'nft'
-        ? t(`main.process.nft.done`)
+    DONE: (t, subvariant, subvariantOptions) =>
+      subvariant === 'custom'
+        ? subvariantOptions?.custom
+          ? t(`main.process.${subvariantOptions?.custom}.done`)
+          : t(`main.process.checkout.done`)
         : t(`main.process.receivingChain.done`),
   },
   TRANSACTION: {},
@@ -102,6 +120,7 @@ export function getProcessMessage(
   step: LiFiStep,
   process: Process,
   subvariant?: WidgetSubvariant,
+  subvariantOptions?: SubvariantOptions,
 ): {
   title?: string;
   message?: string;
@@ -154,6 +173,10 @@ export function getProcessMessage(
         title = t(`error.title.transactionFailed`);
         message = t(`error.message.transactionFailed`);
         break;
+      case LiFiErrorCode.WalletChangedDuringExecution:
+        title = t(`error.title.walletMismatch`);
+        message = t(`error.message.walletChangedDuringExecution`);
+        break;
       case LiFiErrorCode.TransactionUnderpriced:
         title = t(`error.title.transactionUnderpriced`);
         message = getDefaultErrorMessage();
@@ -197,6 +220,10 @@ export function getProcessMessage(
     processSubstatusMessages[process.status as StatusMessage]?.[
       process.substatus!
     ]?.(t) ??
-    processStatusMessages[process.type]?.[process.status]?.(t, subvariant);
+    processStatusMessages[process.type]?.[process.status]?.(
+      t,
+      subvariant,
+      subvariantOptions,
+    );
   return { title };
 }

package/hooks/useRouteExecution.ts

@@ -4,17 +4,19 @@ import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
+import {
+  useRouteExecutionStore,
+  useRouteExecutionStoreContext,
+} from '../stores/routes/RouteExecutionStore.js';
 import {
   getUpdatedProcess,
   isRouteActive,
   isRouteDone,
   isRouteFailed,
-  useRouteExecutionStore,
-  useRouteExecutionStoreContext,
-} from '../stores';
-import { WidgetEvent } from '../types/events';
-import { useAccount } from './useAccount';
-import { useWidgetEvents } from './useWidgetEvents';
+} from '../stores/routes/utils.js';
+import { WidgetEvent } from '../types/events.js';
+import { useAccount } from './useAccount.js';
+import { useWidgetEvents } from './useWidgetEvents.js';
 
 interface RouteExecutionProps {
   routeId: string;
@@ -168,18 +170,17 @@ export const useRouteExecution = ({
   // Resume route execution after page reload
   useEffect(() => {
     // Check if route is eligible for automatic resuming
+    const route = routeExecutionStoreContext.getState().routes[routeId]?.route;
     if (
-      isRouteActive(routeExecution?.route) &&
+      isRouteActive(route) &&
       account.isConnected &&
       !resumedAfterMount.current
     ) {
       resumedAfterMount.current = true;
       _resumeRoute();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [account.isConnected]);
 
-  useEffect(() => {
+    // Move execution to background on unmount
     return () => {
       const route =
         routeExecutionStoreContext.getState().routes[routeId]?.route;
@@ -190,7 +191,8 @@ export const useRouteExecution = ({
       console.log('Move route execution to background.', routeId);
       resumedAfterMount.current = false;
     };
-  }, [routeExecutionStoreContext, routeId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account.isConnected, routeExecutionStoreContext, routeId]);
 
   return {
     executeRoute: _executeRoute,