@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/hooks/useProcessMessage.ts

@@ -0,0 +1,202 @@
+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';
+import type { WidgetSubvariant } from '../types';
+import { formatTokenAmount } from '../utils';
+import { useAvailableChains } from './useAvailableChains';
+
+export const useProcessMessage = (step?: LiFiStep, process?: Process) => {
+  const { subvariant } = useWidgetConfig();
+  const { t } = useTranslation();
+  const { getChainById } = useAvailableChains();
+  if (!step || !process) {
+    return {};
+  }
+  return getProcessMessage(t, getChainById, step, process, subvariant);
+};
+
+const processStatusMessages: Record<
+  ProcessType,
+  Partial<
+    Record<Status, (t: TFunction, subvariant?: WidgetSubvariant) => 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) =>
+      subvariant === 'nft'
+        ? t(`main.process.nft.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`),
+  },
+  RECEIVING_CHAIN: {
+    PENDING: (t) => t(`main.process.receivingChain.pending`),
+    DONE: (t, subvariant) =>
+      subvariant === 'nft'
+        ? t(`main.process.nft.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,
+): {
+  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.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);
+  return { title };
+}

package/src/hooks/useRequiredToAddress.ts

@@ -0,0 +1,22 @@
+import { useWatch } from 'react-hook-form';
+import { useChain } from '../hooks';
+import { FormKey, useWidgetConfig } from '../providers';
+import { RequiredUI } from '../types';
+
+export const useRequiredToAddress = () => {
+  const { requiredUI } = useWidgetConfig();
+  const [fromChainId, toChainId] = useWatch({
+    name: [FormKey.FromChain, FormKey.ToChain],
+  });
+
+  const { chain: fromChain } = useChain(fromChainId);
+  const { chain: toChain } = useChain(toChainId);
+
+  const differentChainType =
+    fromChain && toChain && fromChain.chainType !== toChain.chainType;
+
+  const requiredToAddress =
+    requiredUI?.includes(RequiredUI.ToAddress) || differentChainType;
+
+  return requiredToAddress;
+};

package/src/hooks/useRouteExecution.ts

@@ -0,0 +1,202 @@
+/* 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 {
+  getUpdatedProcess,
+  isRouteActive,
+  isRouteDone,
+  isRouteFailed,
+  useRouteExecutionStore,
+  useRouteExecutionStoreContext,
+} from '../stores';
+import { WidgetEvent } from '../types/events';
+import { useAccount } from './useAccount';
+import { useWidgetEvents } from './useWidgetEvents';
+
+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
+    if (
+      isRouteActive(routeExecution?.route) &&
+      account.isConnected &&
+      !resumedAfterMount.current
+    ) {
+      resumedAfterMount.current = true;
+      _resumeRoute();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account.isConnected]);
+
+  useEffect(() => {
+    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;
+    };
+  }, [routeExecutionStoreContext, routeId]);
+
+  return {
+    executeRoute: _executeRoute,
+    restartRoute: restartRouteMutation,
+    deleteRoute: deleteRouteMutation,
+    route: routeExecution?.route,
+    status: routeExecution?.status,
+  };
+};