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

package/hooks/useGasSufficiency.ts

@@ -1,143 +0,0 @@
-import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
-import { useQuery } from '@tanstack/react-query';
-import type { Connector } from 'wagmi';
-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(Number(gasCost.amount).toFixed(0)),
-                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(Number(feeCost.amount).toFixed(0)),
-                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

@@ -1,18 +0,0 @@
-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/useHeaderHeight.ts

@@ -1,27 +0,0 @@
-import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-
-export const minHeaderHeight = 64;
-export const maxHeaderHeight = 108;
-export const maxHeaderHeightSubvariantSplit = 136;
-
-// We use fixed position on the header when Widget is in Full Height layout.
-// We do this to get it to work like the sticky header does in the other layout modes.
-// As the header is position fixed its not in the document flow anymore.
-// To prevent the remaining page content from appearing behind the header we need to
-// pass the headers height so that the position of the page content can be adjusted
-export const useHeaderHeight = () => {
-  const { hiddenUI, subvariant } = useWidgetConfig();
-  const { hasExternalProvider } = useHasExternalWalletProvider();
-
-  const headerHeight =
-    subvariant === 'split'
-      ? maxHeaderHeightSubvariantSplit
-      : hiddenUI?.includes('walletMenu') || hasExternalProvider
-        ? minHeaderHeight
-        : maxHeaderHeight;
-
-  return {
-    headerHeight,
-  };
-};

package/hooks/useInitializer.ts

@@ -1,16 +0,0 @@
-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 && process.env.NODE_ENV === 'development') {
-      checkedPackageUpdates = true;
-      checkPackageUpdates(name, version);
-    }
-  }, []);
-};

package/hooks/useLanguages.ts

@@ -1,31 +0,0 @@
-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/useNavigateBack.ts

@@ -1,26 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-export const useNavigateBack = () => {
-  const navigate = useNavigate();
-
-  const navigateBack = useCallback(() => {
-    // TODO: find a better router with nested memory routers support
-    // https://github.com/remix-run/react-router/pull/9112
-    // https://github.com/remix-run/react-router/discussions/9601
-    //
-    // if (window.history.length > 2) {
-    navigate(-1);
-    // } else {
-    //   navigate(
-    //     window.location.pathname.substring(
-    //       0,
-    //       window.location.pathname.lastIndexOf('/'),
-    //     ) || '/',
-    //     { replace: true },
-    //   );
-    // }
-  }, [navigate]);
-
-  return { navigateBack, navigate };
-};

package/hooks/useProcessMessage.ts

@@ -1,237 +0,0 @@
-import type {
-  EVMChain,
-  LiFiStep,
-  Process,
-  ProcessStatus,
-  ProcessType,
-  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<
-      ProcessStatus,
-      (
-        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'
-        ? t(`main.process.${subvariantOptions?.custom ?? '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'
-        ? t(`main.process.${subvariantOptions?.custom ?? '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.TransactionExpired:
-        title = t(`error.title.transactionExpired`);
-        message = t(`error.message.transactionExpired`);
-        break;
-      case LiFiErrorCode.TransactionSimulationFailed:
-        title = t(`error.title.transactionSimulationFailed`);
-        message = t(`error.message.transactionSimulationFailed`);
-        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.TransactionConflict:
-        title = t(`error.title.transactionConflict`);
-        message = getDefaultErrorMessage('error.message.transactionConflict');
-        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.txHash) {
-          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 };
-}