@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/types/widget.ts

@@ -12,6 +12,7 @@ import type {
   Token,
 } from '@lifi/sdk'
 import type { WalletMenuOpenArgs } from '@lifi/wallet-management'
+import type { WidgetProviderProps } from '@lifi/widget-provider'
 import type {
   Components,
   PaletteMode,
@@ -21,14 +22,13 @@ import type {
   Theme,
 } from '@mui/material'
 import type { TypographyVariantsOptions } from '@mui/material/styles'
-import type { CSSProperties, FC, ReactNode, RefObject } from 'react'
 import type {
-  BaseAccountParameters,
-  CoinbaseWalletParameters,
-  MetaMaskParameters,
-  PortoParameters,
-  WalletConnectParameters,
-} from 'wagmi/connectors'
+  CSSProperties,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  RefObject,
+} from 'react'
 import type {
   LanguageKey,
   LanguageResources,
@@ -41,9 +41,9 @@ export type SplitSubvariant = 'bridge' | 'swap'
 export type SplitSubvariantOptions = {
   defaultTab: SplitSubvariant
 }
-export type CustomSubvariant = 'checkout' | 'deposit' | 'fund'
+export type CustomSubvariant = 'checkout' | 'deposit'
 export type WideSubvariant = {
-  enableChainSidebar?: boolean
+  disableChainSidebar?: boolean
 }
 export interface SubvariantOptions {
   /**
@@ -133,6 +133,7 @@ export enum HiddenUI {
   SearchTokenInput = 'searchTokenInput',
   InsufficientGasMessage = 'insufficientGasMessage',
   ContactSupport = 'contactSupport',
+  HideSmallBalances = 'hideSmallBalances',
   AllNetworks = 'allNetworks',
 }
 export type HiddenUIType = `${HiddenUI}`
@@ -149,12 +150,8 @@ export type DefaultUI = {
 }
 
 export interface WidgetWalletConfig {
+  walletEcosystemsOrder?: Record<string, ChainType[]>
   onConnect?(args?: WalletMenuOpenArgs): void
-  walletConnect?: WalletConnectParameters
-  coinbase?: CoinbaseWalletParameters
-  metaMask?: MetaMaskParameters
-  baseAccount?: BaseAccountParameters
-  porto?: Partial<PortoParameters>
   /**
    * Determines whether the widget should provide partial wallet management functionality.
    *
@@ -181,12 +178,7 @@ export interface WidgetSDKConfig
     | 'widgetVersion'
   > {
   routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>
-  executionOptions?: Pick<
-    ExecutionOptions,
-    | 'disableMessageSigning'
-    | 'updateTransactionRequestHook'
-    | 'getContractCalls'
-  >
+  executionOptions?: Pick<ExecutionOptions, 'updateTransactionRequestHook'>
 }
 
 export interface WidgetContractTool {
@@ -307,6 +299,10 @@ export type ExplorerUrl =
       addressPath?: string
     }
 
+export type WidgetProvider = (
+  props: PropsWithChildren<WidgetProviderProps>
+) => ReactNode
+
 export interface WidgetConfig {
   fromChain?: number
   toChain?: number
@@ -319,16 +315,12 @@ export interface WidgetConfig {
   toAmount?: number | string
   formUpdateKey?: string
 
-  /**
-   * @deprecated Use `getContractCalls` inside the SDK config `executionOptions` instead.
-   */
+  providers?: WidgetProvider[]
+
   contractCalls?: ContractCall[]
   contractComponent?: ReactNode
   contractSecondaryComponent?: ReactNode
   contractCompactComponent?: ReactNode
-  /**
-   * @deprecated Use `getContractCalls` inside the SDK config `executionOptions` instead.
-   */
   contractTool?: WidgetContractTool
   integrator: string
   apiKey?: string

package/src/utils/chainType.ts

@@ -1,27 +1,4 @@
-import { isUTXOAddress } from '@bigmi/core'
-import { ChainId, ChainType, isSVMAddress } from '@lifi/sdk'
-import { isValidSuiAddress } from '@mysten/sui/utils'
-import { isAddress as isEVMAddress } from 'viem'
-
-const chainTypeAddressValidation = {
-  [ChainType.EVM]: isEVMAddress,
-  [ChainType.SVM]: isSVMAddress,
-  [ChainType.MVM]: isValidSuiAddress,
-  [ChainType.UTXO]: isUTXOAddress,
-  [ChainType.TVM]: () => false,
-}
-
-export const getChainTypeFromAddress = (
-  address: string
-): ChainType | undefined => {
-  for (const chainType in chainTypeAddressValidation) {
-    const isChainType =
-      chainTypeAddressValidation[chainType as ChainType](address)
-    if (isChainType) {
-      return chainType as ChainType
-    }
-  }
-}
+import { ChainId, ChainType } from '@lifi/sdk'
 
 export const defaultChainIdsByType = {
   [ChainType.EVM]: ChainId.ETH,

package/src/utils/converters.ts

@@ -1,9 +1,9 @@
 import type {
+  ExecutionAction,
+  ExecutionActionStatus,
   ExtendedTransactionInfo,
   FeeCost,
   FullStatusData,
-  Process,
-  ProcessStatus,
   Substatus,
   TokenAmount,
   ToolsResponse,
@@ -11,7 +11,7 @@ import type {
 import type { RouteExecution } from '../stores/routes/types.js'
 import { formatTokenPrice } from './format.js'
 
-const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
+const buildActionsFromTxHistory = (tx: FullStatusData): ExecutionAction[] => {
   const sending = tx.sending as ExtendedTransactionInfo
   const receiving = tx.receiving as ExtendedTransactionInfo
 
@@ -19,53 +19,48 @@ const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
     return []
   }
 
-  const processStatus: ProcessStatus = tx.status === 'DONE' ? 'DONE' : 'FAILED'
+  const actionStatus: ExecutionActionStatus =
+    tx.status === 'DONE' ? 'DONE' : 'FAILED'
   const substatus: Substatus =
-    processStatus === 'FAILED' ? 'UNKNOWN_ERROR' : 'COMPLETED'
+    actionStatus === 'FAILED' ? 'UNKNOWN_ERROR' : 'COMPLETED'
 
   if (sending.chainId === receiving.chainId) {
     return [
       {
         type: 'SWAP', // operations on same chain will be swaps
-        startedAt: sending.timestamp ?? Date.now(),
         message: '',
-        status: processStatus,
+        status: actionStatus,
         chainId: sending.chainId,
         txHash: sending.txHash,
         txLink: sending.txLink,
-        doneAt: receiving.timestamp ?? Date.now(),
         substatus,
         substatusMessage: '',
       },
     ]
   }
 
-  const process: Process[] = [
+  const actions: ExecutionAction[] = [
     {
       type: 'CROSS_CHAIN', // first step of bridging, ignoring the approvals
-      startedAt: sending.timestamp ?? Date.now(),
       message: '',
-      status: processStatus, // can be FAILED
+      status: actionStatus, // can be FAILED
       chainId: sending.chainId,
       txHash: sending.txHash,
       txLink: sending.txLink,
-      doneAt: sending.timestamp,
     },
     {
       type: 'RECEIVING_CHAIN', // final step of bridging, post swaps
-      startedAt: receiving.timestamp ?? Date.now(),
       message: '',
-      status: processStatus,
+      status: actionStatus,
       substatus,
       substatusMessage: '',
-      doneAt: receiving.timestamp ?? Date.now(),
       chainId: receiving.chainId,
       txHash: receiving.txHash,
       txLink: receiving.txLink,
     },
   ]
 
-  return process
+  return actions
 }
 
 export const buildRouteFromTxHistory = (
@@ -155,7 +150,7 @@ export const buildRouteFromTxHistory = (
       gasCostUSD: sending.gasAmountUSD,
       steps: [
         {
-          id: crypto.randomUUID(),
+          id: (tx as FullStatusData).transactionId,
           type: 'lifi',
           tool: tx.tool,
           toolDetails: usedTool,
@@ -181,7 +176,7 @@ export const buildRouteFromTxHistory = (
           },
           includedSteps: [
             {
-              id: '',
+              id: (tx as FullStatusData).transactionId,
               type: sending.chainId === receiving.chainId ? 'swap' : 'cross',
               action: {
                 fromChainId: sending.chainId,
@@ -209,8 +204,7 @@ export const buildRouteFromTxHistory = (
           execution: {
             status: 'DONE', // can be FAILED
             startedAt: sending.timestamp ?? Date.now(),
-            doneAt: receiving.timestamp ?? Date.now(),
-            process: buildProcessFromTxHistory(tx),
+            actions: buildActionsFromTxHistory(tx),
             fromAmount: sending.amount,
             toAmount: receiving.amount,
             toToken: receiving.token,

package/src/utils/format.ts

@@ -1,4 +1,6 @@
-import { formatUnits } from 'viem'
+import { formatUnits } from '@lifi/sdk'
+
+export const usdDecimals = 2
 
 /**
  * Format token amount to at least 6 decimals.

package/src/utils/getActionMessage.ts

@@ -0,0 +1,168 @@
+import type {
+  ExecutionActionStatus,
+  ExecutionActionType,
+  LiFiStepExtended,
+  StatusMessage,
+  Substatus,
+} from '@lifi/sdk'
+import type { TFunction } from 'i18next'
+import type { SubvariantOptions, WidgetSubvariant } from '../types/widget'
+
+export function getActionMessage(
+  t: TFunction,
+  step: LiFiStepExtended,
+  type: ExecutionActionType,
+  status: ExecutionActionStatus,
+  substatus?: Substatus,
+  subvariant?: WidgetSubvariant,
+  subvariantOptions?: SubvariantOptions
+): {
+  title?: string
+  message?: string
+} {
+  const messageWithSubstatus = substatus
+    ? actionSubstatusMessages[status as StatusMessage]?.[substatus]?.(t)
+    : undefined
+  const title =
+    messageWithSubstatus ??
+    actionStatusMessages[type]?.[status]?.(
+      t,
+      step,
+      subvariant,
+      subvariantOptions
+    )
+  return { title }
+}
+
+const actionStatusMessages: Record<
+  ExecutionActionType,
+  Partial<
+    Record<
+      ExecutionActionStatus,
+      (
+        t: TFunction,
+        step: LiFiStepExtended,
+        subvariant?: WidgetSubvariant,
+        subvariantOptions?: SubvariantOptions
+      ) => string
+    >
+  >
+> = {
+  CHECK_ALLOWANCE: {
+    STARTED: (t, step) =>
+      t('main.process.tokenAllowance.started', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    PENDING: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    DONE: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+  },
+  NATIVE_PERMIT: {
+    STARTED: (t) => t('main.process.permit.started'),
+    ACTION_REQUIRED: (t) => t('main.process.permit.actionRequired'),
+    PENDING: (t) => t('main.process.permit.pending'),
+    DONE: (t) => t('main.process.permit.done'),
+  },
+  RESET_ALLOWANCE: {
+    STARTED: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    RESET_REQUIRED: (t, step) =>
+      t('main.process.tokenAllowance.resetRequired', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    PENDING: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    DONE: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+  },
+  SET_ALLOWANCE: {
+    STARTED: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    ACTION_REQUIRED: (t, step) =>
+      t('main.process.tokenAllowance.actionRequired', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    PENDING: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    DONE: (t, step) =>
+      t('main.process.tokenAllowance.done', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+  },
+  PERMIT: {
+    STARTED: (t) => t('main.process.permit.started'),
+    ACTION_REQUIRED: (t) => t('main.process.permit.actionRequired'),
+    PENDING: (t) => t('main.process.permit.pending'),
+    DONE: (t) => t('main.process.permit.done'),
+  },
+  SWAP: {
+    STARTED: (t) => t('main.process.swap.started'),
+    ACTION_REQUIRED: (t) => t('main.process.swap.actionRequired'),
+    MESSAGE_REQUIRED: (t) => t('main.process.swap.messageRequired'),
+    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'),
+    MESSAGE_REQUIRED: (t) => t('main.process.bridge.messageRequired'),
+    PENDING: (t) => t('main.process.bridge.pending'),
+    DONE: (t) => t('main.process.bridge.done'),
+  },
+  RECEIVING_CHAIN: {
+    STARTED: (t) => t('main.process.receivingChain.pending'),
+    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'),
+  },
+}
+
+const actionSubstatusMessages: 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: {},
+}

package/src/utils/getErrorMessage.ts

@@ -0,0 +1,144 @@
+import {
+  type EVMChain,
+  type ExecutionAction,
+  LiFiErrorCode,
+  type LiFiStepExtended,
+} from '@lifi/sdk'
+import type { TFunction } from 'i18next'
+import { formatTokenAmount, wrapLongWords } from '../utils/format.js'
+
+export function getErrorMessage(
+  t: TFunction,
+  getChainById: (chainId: number) => EVMChain | undefined,
+  step: LiFiStepExtended,
+  failedAction?: ExecutionAction
+) {
+  const error = failedAction?.error
+  if (!error) {
+    return {
+      title: t('error.title.unknown'),
+      message: t('error.message.unknown'),
+    }
+  }
+
+  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 = ''
+  let message = ''
+  switch (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.InsufficientGas:
+      title = t('error.title.insufficientGas')
+      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.RateLimitExceeded:
+      title = t('error.title.rateLimitExceeded')
+      message = t('error.message.rateLimitExceeded')
+      break
+    case LiFiErrorCode.ThirdPartyError:
+      title = t('error.title.thirdPartyError')
+      message = t('error.message.thirdPartyError')
+      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.TransactionRejected:
+      title = t('error.title.transactionRejected')
+      message = getDefaultErrorMessage('error.message.transactionRejected')
+      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
+    default:
+      title = t('error.title.unknown')
+      if (failedAction?.txHash) {
+        message = t('error.message.transactionFailed')
+      } else {
+        message = error.message || t('error.message.unknown')
+      }
+      break
+  }
+  message = wrapLongWords(message)
+  return { title, message }
+}

package/src/utils/prepareActions.ts

@@ -0,0 +1,27 @@
+import type { ExecutionAction } from '@lifi/sdk'
+
+// NB: New SDK adds new actions - merge them into old TOKEN_ALLOWANCE before UI changes
+const allowanceTypes = new Set([
+  'NATIVE_PERMIT',
+  'CHECK_ALLOWANCE',
+  'RESET_ALLOWANCE',
+  'SET_ALLOWANCE',
+])
+
+export function prepareActions(
+  actions: ExecutionAction[]
+): ExecutionAction[][] {
+  const groups = new Map<string | number, ExecutionAction[]>()
+  for (const action of actions) {
+    const key = allowanceTypes.has(action.type)
+      ? 'TOKEN_ALLOWANCE'
+      : action.type
+    const group = groups.get(key)
+    if (group) {
+      group.push(action)
+    } else {
+      groups.set(key, [action])
+    }
+  }
+  return [...groups.values()]
+}