@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.40

package/hooks/useGasSufficiency.ts

@@ -0,0 +1,141 @@
+import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import type { Connector } from 'wagmi';
+import { useAccount } from './useAccount.js';
+import { useAvailableChains } from './useAvailableChains.js';
+import { getTokenBalancesWithRetry } from './useTokenBalance.js';
+
+export interface GasSufficiency {
+  gasAmount: bigint;
+  tokenAmount?: bigint;
+  insufficientAmount?: bigint;
+  insufficient?: boolean;
+  token: Token;
+  chain?: EVMChain;
+}
+
+const refetchInterval = 30_000;
+
+export const useGasSufficiency = (route?: RouteExtended) => {
+  const { getChainById } = useAvailableChains();
+  const { account } = useAccount({
+    chainType: getChainById(route?.fromChainId)?.chainType,
+  });
+
+  const { data: insufficientGas, isLoading } = useQuery({
+    queryKey: ['gas-sufficiency-check', account.address, route?.id],
+    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' &&
+              !skipDueToRefuel
+            ) {
+              const { token } = step.estimate.gasCosts[0];
+              const gasCostAmount = step.estimate.gasCosts.reduce(
+                (amount, gasCost) => amount + BigInt(gasCost.amount),
+                0n,
+              );
+              groupedGasCosts[token.chainId] = {
+                gasAmount: groupedGasCosts[token.chainId]
+                  ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
+                  : gasCostAmount,
+                token,
+              };
+            }
+            // Add fees paid in native tokens to gas sufficiency check (included: false)
+            const nonIncludedFeeCosts = step.estimate.feeCosts?.filter(
+              (feeCost) => !feeCost.included,
+            );
+            if (nonIncludedFeeCosts?.length) {
+              const { token } = nonIncludedFeeCosts[0];
+              const feeCostAmount = nonIncludedFeeCosts.reduce(
+                (amount, feeCost) => amount + BigInt(feeCost.amount),
+                0n,
+              );
+              groupedGasCosts[token.chainId] = {
+                gasAmount: groupedGasCosts[token.chainId]
+                  ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
+                  : feeCostAmount,
+                token,
+              } as any;
+            }
+            return groupedGasCosts;
+          },
+          {} 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
+      ) {
+        gasCosts[route!.fromChainId].tokenAmount =
+          gasCosts[route!.fromChainId]?.gasAmount + BigInt(route!.fromAmount);
+      }
+
+      const tokenBalances = await getTokenBalancesWithRetry(
+        accountAddress!,
+        Object.values(gasCosts).map((item) => item.token),
+      );
+
+      if (!tokenBalances?.length) {
+        return [];
+      }
+
+      [route!.fromChainId, route!.toChainId].forEach((chainId) => {
+        if (gasCosts[chainId]) {
+          const gasTokenBalance =
+            tokenBalances?.find(
+              (t) =>
+                t.chainId === gasCosts[chainId].token.chainId &&
+                t.address === gasCosts[chainId].token.address,
+            )?.amount ?? 0n;
+          const insufficient =
+            gasTokenBalance <= 0n ||
+            gasTokenBalance < gasCosts[chainId].gasAmount ||
+            gasTokenBalance < (gasCosts[chainId].tokenAmount ?? 0n);
+
+          const insufficientAmount = insufficient
+            ? gasCosts[chainId].tokenAmount
+              ? gasCosts[chainId].tokenAmount! - gasTokenBalance
+              : gasCosts[chainId].gasAmount - gasTokenBalance
+            : undefined;
+
+          gasCosts[chainId] = {
+            ...gasCosts[chainId],
+            insufficient,
+            insufficientAmount,
+            chain: insufficient ? getChainById(chainId) : undefined,
+          };
+        }
+      });
+
+      const gasCostResult = Object.values(gasCosts).filter(
+        (gasCost) => gasCost.insufficient,
+      );
+
+      return gasCostResult;
+    },
+
+    enabled: Boolean(account.address && route),
+    refetchInterval,
+    staleTime: refetchInterval,
+  });
+
+  return {
+    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

@@ -0,0 +1,16 @@
+import { checkPackageUpdates } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { name, version } from '../config/version.js';
+import { useTools } from './useTools.js';
+
+let checkedPackageUpdates = false;
+
+export const useInitializer = () => {
+  useTools();
+  useEffect(() => {
+    if (!checkedPackageUpdates) {
+      checkedPackageUpdates = true;
+      checkPackageUpdates(name, version);
+    }
+  }, []);
+};

package/hooks/useLanguages.ts

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+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();
+  const { languages } = useWidgetConfig();
+  const { language } = useSettings(['language']);
+  const setValue = useSettingsStore((state) => state.setValue);
+
+  const sortedLanguages = Object.keys(i18n.store.data).sort();
+
+  const selectedLanguageCode = sortedLanguages.includes(
+    language || i18n.resolvedLanguage || '',
+  )
+    ? language || i18n.resolvedLanguage
+    : languages?.default || languages?.allow?.[0];
+
+  return {
+    availableLanguages: sortedLanguages,
+    selectedLanguageCode: selectedLanguageCode,
+    selectedLanguageDisplayName: t('language.name', {
+      lng: selectedLanguageCode,
+    }),
+    setLanguageWithCode: (code: string) => {
+      setValue('language', code);
+      i18n.changeLanguage(code);
+    },
+  };
+};

package/hooks/useProcessMessage.ts

@@ -0,0 +1,229 @@
+import type {
+  EVMChain,
+  LiFiStep,
+  Process,
+  ProcessType,
+  Status,
+  StatusMessage,
+  Substatus,
+} from '@lifi/sdk';
+import { LiFiErrorCode } from '@lifi/sdk';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
+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, subvariantOptions } = useWidgetConfig();
+  const { t } = useTranslation();
+  const { getChainById } = useAvailableChains();
+  if (!step || !process) {
+    return {};
+  }
+  return getProcessMessage(
+    t,
+    getChainById,
+    step,
+    process,
+    subvariant,
+    subvariantOptions,
+  );
+};
+
+const processStatusMessages: Record<
+  ProcessType,
+  Partial<
+    Record<
+      Status,
+      (
+        t: TFunction,
+        subvariant?: WidgetSubvariant,
+        subvariantOptions?: SubvariantOptions,
+      ) => string
+    >
+  >
+> = {
+  TOKEN_ALLOWANCE: {
+    STARTED: (t) => t(`main.process.tokenAllowance.started`),
+    ACTION_REQUIRED: (t) => t(`main.process.tokenAllowance.pending`),
+    PENDING: (t) => t(`main.process.tokenAllowance.pending`),
+    DONE: (t) => t(`main.process.tokenAllowance.done`),
+  },
+  SWITCH_CHAIN: {
+    ACTION_REQUIRED: (t) => t(`main.process.switchChain.actionRequired`),
+    DONE: (t) => t(`main.process.switchChain.done`),
+  },
+  SWAP: {
+    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, 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.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, subvariantOptions) =>
+      subvariant === 'custom'
+        ? subvariantOptions?.custom
+          ? t(`main.process.${subvariantOptions?.custom}.done`)
+          : t(`main.process.checkout.done`)
+        : t(`main.process.receivingChain.done`),
+  },
+  TRANSACTION: {},
+};
+
+const processSubstatusMessages: Record<
+  StatusMessage,
+  Partial<Record<Substatus, (t: TFunction) => string>>
+> = {
+  PENDING: {
+    // BRIDGE_NOT_AVAILABLE: 'Bridge communication is temporarily unavailable.',
+    // CHAIN_NOT_AVAILABLE: 'RPC communication is temporarily unavailable.',
+    // REFUND_IN_PROGRESS:
+    //   "The refund has been requested and it's being processed",
+    // WAIT_DESTINATION_TRANSACTION:
+    //   'The bridge off-chain logic is being executed. Wait for the transaction to appear on the destination chain.',
+    // WAIT_SOURCE_CONFIRMATIONS:
+    //   'The bridge deposit has been received. The bridge is waiting for more confirmations to start the off-chain logic.',
+  },
+  DONE: {
+    // COMPLETED: 'The transfer is complete.',
+    PARTIAL: (t) => t(`main.process.receivingChain.partial`),
+    REFUNDED: (t) => t(`main.process.receivingChain.partial`),
+  },
+  FAILED: {
+    // TODO: should be moved to failed status
+    // NOT_PROCESSABLE_REFUND_NEEDED:
+    //   'The transfer cannot be completed successfully. A refund operation is required.',
+    // UNKNOWN_ERROR:
+    //   'An unexpected error occurred. Please seek assistance in the LI.FI discord server.',
+  },
+  INVALID: {},
+  NOT_FOUND: {},
+};
+
+export function getProcessMessage(
+  t: TFunction,
+  getChainById: (chainId: number) => EVMChain | undefined,
+  step: LiFiStep,
+  process: Process,
+  subvariant?: WidgetSubvariant,
+  subvariantOptions?: SubvariantOptions,
+): {
+  title?: string;
+  message?: string;
+} {
+  if (process.error && process.status === 'FAILED') {
+    const getDefaultErrorMessage = (key?: string) =>
+      `${t((key as any) ?? 'error.message.transactionNotSent')} ${t(
+        'error.message.remainInYourWallet',
+        {
+          amount: formatTokenAmount(
+            BigInt(step.action.fromAmount),
+            step.action.fromToken.decimals,
+          ),
+          tokenSymbol: step.action.fromToken.symbol,
+          chainName: getChainById(step.action.fromChainId)?.name ?? '',
+        },
+      )}`;
+    let title: string = '';
+    let message: string = '';
+    switch (process.error.code) {
+      case LiFiErrorCode.AllowanceRequired:
+        title = t(`error.title.allowanceRequired`);
+        message = t(`error.message.allowanceRequired`, {
+          tokenSymbol: step.action.fromToken.symbol,
+        });
+        break;
+      case LiFiErrorCode.BalanceError:
+        title = t(`error.title.balanceIsTooLow`);
+        message = getDefaultErrorMessage();
+        break;
+      case LiFiErrorCode.ChainSwitchError:
+        title = t(`error.title.chainSwitch`);
+        message = getDefaultErrorMessage();
+        break;
+      case LiFiErrorCode.GasLimitError:
+        title = t(`error.title.gasLimitIsTooLow`);
+        message = getDefaultErrorMessage();
+        break;
+      case LiFiErrorCode.InsufficientFunds:
+        title = t(`error.title.insufficientFunds`);
+        message = `${t(
+          `error.message.insufficientFunds`,
+        )} ${getDefaultErrorMessage()}`;
+        break;
+      case LiFiErrorCode.SlippageError:
+        title = t(`error.title.slippageNotMet`);
+        message = t(`error.message.slippageThreshold`);
+        break;
+      case LiFiErrorCode.TransactionFailed:
+        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();
+        break;
+      case LiFiErrorCode.TransactionUnprepared:
+        title = t(`error.title.transactionUnprepared`);
+        message = getDefaultErrorMessage();
+        break;
+      case LiFiErrorCode.TransactionCanceled:
+        title = t(`error.title.transactionCanceled`);
+        message = getDefaultErrorMessage('error.message.transactionCanceled');
+        break;
+      case LiFiErrorCode.ExchangeRateUpdateCanceled:
+        title = t(`error.title.exchangeRateUpdateCanceled`);
+        message = getDefaultErrorMessage();
+        break;
+      case LiFiErrorCode.SignatureRejected:
+        title = t(`error.title.signatureRejected`);
+        message = t(`error.message.signatureRejected`, {
+          amount: formatTokenAmount(
+            BigInt(step.action.fromAmount),
+            step.action.fromToken.decimals,
+          ),
+          tokenSymbol: step.action.fromToken.symbol,
+          chainName: getChainById(step.action.fromChainId)?.name ?? '',
+        });
+        break;
+      case LiFiErrorCode.ProviderUnavailable:
+      default:
+        title = t(`error.title.unknown`);
+        if (process.txLink) {
+          message = t(`error.message.transactionFailed`);
+        } else {
+          message = process.error.message || t(`error.message.unknown`);
+        }
+        break;
+    }
+    return { title, message };
+  }
+  const title =
+    processSubstatusMessages[process.status as StatusMessage]?.[
+      process.substatus!
+    ]?.(t) ??
+    processStatusMessages[process.type]?.[process.status]?.(
+      t,
+      subvariant,
+      subvariantOptions,
+    );
+  return { title };
+}

package/hooks/useRouteExecution.ts

@@ -0,0 +1,204 @@
+/* eslint-disable no-console */
+import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
+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,
+} 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;
+  executeInBackground?: boolean;
+  onAcceptExchangeRateUpdate?(
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams,
+  ): void;
+}
+
+export const useRouteExecution = ({
+  routeId,
+  executeInBackground,
+  onAcceptExchangeRateUpdate,
+}: RouteExecutionProps) => {
+  const queryClient = useQueryClient();
+  const { account } = useAccount();
+  const resumedAfterMount = useRef(false);
+  const emitter = useWidgetEvents();
+  const routeExecutionStoreContext = useRouteExecutionStoreContext();
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[routeId],
+  );
+  const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore(
+    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute],
+    shallow,
+  );
+
+  const updateRouteHook = (updatedRoute: Route) => {
+    const routeExecution =
+      routeExecutionStoreContext.getState().routes[updatedRoute.id];
+    if (!routeExecution) {
+      return;
+    }
+    const clonedUpdatedRoute = structuredClone(updatedRoute);
+    updateRoute(clonedUpdatedRoute);
+    const process = getUpdatedProcess(routeExecution.route, clonedUpdatedRoute);
+    if (process) {
+      emitter.emit(WidgetEvent.RouteExecutionUpdated, {
+        route: clonedUpdatedRoute,
+        process,
+      });
+    }
+
+    if (isRouteDone(clonedUpdatedRoute)) {
+      emitter.emit(WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
+    }
+    if (isRouteFailed(clonedUpdatedRoute) && process) {
+      emitter.emit(WidgetEvent.RouteExecutionFailed, {
+        route: clonedUpdatedRoute,
+        process,
+      });
+    }
+    console.log('Route updated.', clonedUpdatedRoute);
+  };
+
+  const acceptExchangeRateUpdateHook = async (
+    params: ExchangeRateUpdateParams,
+  ) => {
+    if (!onAcceptExchangeRateUpdate) {
+      return false;
+    }
+
+    const accepted = await new Promise<boolean>((resolve) =>
+      onAcceptExchangeRateUpdate(resolve, params),
+    );
+
+    return accepted;
+  };
+
+  const executeRouteMutation = useMutation({
+    mutationFn: () => {
+      if (!account.isConnected) {
+        throw Error('Account is not connected.');
+      }
+      if (!routeExecution?.route) {
+        throw Error('Execution route not found.');
+      }
+      queryClient.removeQueries({ queryKey: ['routes'], exact: false });
+      return executeRoute(routeExecution.route, {
+        updateRouteHook,
+        acceptExchangeRateUpdateHook,
+        infiniteApproval: false,
+        executeInBackground,
+      });
+    },
+    onMutate: () => {
+      console.log('Execution started.', routeId);
+      if (routeExecution) {
+        emitter.emit(WidgetEvent.RouteExecutionStarted, routeExecution.route);
+      }
+    },
+  });
+
+  const resumeRouteMutation = useMutation({
+    mutationFn: (resumedRoute?: Route) => {
+      if (!account.isConnected) {
+        throw Error('Account is not connected.');
+      }
+      if (!routeExecution?.route) {
+        throw Error('Execution route not found.');
+      }
+      return resumeRoute(resumedRoute ?? routeExecution.route, {
+        updateRouteHook,
+        acceptExchangeRateUpdateHook,
+        infiniteApproval: false,
+        executeInBackground,
+      });
+    },
+    onMutate: () => {
+      console.log('Resumed to execution.', routeId);
+    },
+  });
+
+  const _executeRoute = useCallback(() => {
+    executeRouteMutation.mutateAsync(undefined, {
+      onError: (error) => {
+        console.warn('Execution failed!', routeId, error);
+      },
+      onSuccess: (route: Route) => {
+        console.log('Executed successfully!', route);
+      },
+    });
+  }, [executeRouteMutation, routeId]);
+
+  const _resumeRoute = useCallback(
+    (route?: Route) => {
+      resumeRouteMutation.mutateAsync(route, {
+        onError: (error) => {
+          console.warn('Resumed execution failed.', routeId, error);
+        },
+        onSuccess: (route) => {
+          console.log('Resumed execution successful.', route);
+        },
+      });
+    },
+    [resumeRouteMutation, routeId],
+  );
+
+  const restartRouteMutation = useCallback(() => {
+    restartRoute(routeId);
+    _resumeRoute(routeExecution?.route);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_resumeRoute, routeExecution?.route, routeId]);
+
+  const deleteRouteMutation = useCallback(() => {
+    deleteRoute(routeId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [routeId]);
+
+  // Resume route execution after page reload
+  useEffect(() => {
+    // Check if route is eligible for automatic resuming
+    const route = routeExecutionStoreContext.getState().routes[routeId]?.route;
+    if (
+      isRouteActive(route) &&
+      account.isConnected &&
+      !resumedAfterMount.current
+    ) {
+      resumedAfterMount.current = true;
+      _resumeRoute();
+    }
+
+    // Move execution to background on unmount
+    return () => {
+      const route =
+        routeExecutionStoreContext.getState().routes[routeId]?.route;
+      if (!route || !isRouteActive(route)) {
+        return;
+      }
+      updateRouteExecution(route, { executeInBackground: true });
+      console.log('Move route execution to background.', routeId);
+      resumedAfterMount.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account.isConnected, routeExecutionStoreContext, routeId]);
+
+  return {
+    executeRoute: _executeRoute,
+    restartRoute: restartRouteMutation,
+    deleteRoute: deleteRouteMutation,
+    route: routeExecution?.route,
+    status: routeExecution?.status,
+  };
+};