@lifi/widget 0.0.0-preview-6cc63bac

package/src/utils/getActionMessage.ts

@@ -0,0 +1,163 @@
+import type {
+  ExecutionActionStatus,
+  ExecutionActionType,
+  LiFiStepExtended,
+  StatusMessage,
+  Substatus,
+} from '@lifi/sdk'
+import type { TFunction } from 'i18next'
+import type { ModeOptions, WidgetMode } from '../types/widget.js'
+
+export function getActionMessage(
+  t: TFunction,
+  step: LiFiStepExtended,
+  type: ExecutionActionType,
+  status: ExecutionActionStatus,
+  substatus?: Substatus,
+  mode?: WidgetMode,
+  modeOptions?: ModeOptions
+): {
+  title?: string
+  message?: string
+} {
+  const messageWithSubstatus = substatus
+    ? actionSubstatusMessages[status as StatusMessage]?.[substatus]?.(t)
+    : undefined
+  const title =
+    messageWithSubstatus ??
+    actionStatusMessages[type]?.[status]?.(t, step, mode, modeOptions)
+  return { title }
+}
+
+const actionStatusMessages: Record<
+  ExecutionActionType,
+  Partial<
+    Record<
+      ExecutionActionStatus,
+      (
+        t: TFunction,
+        step: LiFiStepExtended,
+        mode?: WidgetMode,
+        modeOptions?: ModeOptions
+      ) => 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.done', {
+        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, _, mode, modeOptions) =>
+      mode === 'custom'
+        ? t(`main.process.${modeOptions?.custom?.type ?? '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, _, mode, modeOptions) =>
+      mode === 'custom'
+        ? t(`main.process.${modeOptions?.custom?.type ?? '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
+): { title: string; message: string } {
+  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/getPriceImpact.ts

@@ -0,0 +1,35 @@
+import type { Token } from '@lifi/sdk'
+import { formatTokenPrice } from './format.js'
+
+interface GetPriceImpactProps {
+  fromToken: Token
+  toToken: Token
+  fromAmount?: bigint
+  toAmount?: bigint
+}
+
+export const getPriceImpact = ({
+  fromToken,
+  toToken,
+  fromAmount,
+  toAmount,
+}: GetPriceImpactProps): number => {
+  const fromTokenPrice = formatTokenPrice(
+    fromAmount,
+    fromToken.priceUSD,
+    fromToken.decimals
+  )
+  const toTokenPrice = formatTokenPrice(
+    toAmount,
+    toToken.priceUSD,
+    toToken.decimals
+  )
+
+  if (!fromTokenPrice) {
+    return 0
+  }
+
+  const priceImpact = toTokenPrice / fromTokenPrice - 1
+
+  return priceImpact
+}

package/src/utils/input.ts

@@ -0,0 +1,29 @@
+export const fitInputText = (
+  maxFontSize: number,
+  minFontSize: number,
+  element: HTMLElement
+): void => {
+  if (!element) {
+    return
+  }
+  let high = maxFontSize
+  let low = minFontSize
+  let size = minFontSize
+  let mid = 0
+  // Binary search for highest font size best fit
+  while (low <= high) {
+    mid = (high + low) >> 1
+    const fontSize = `${mid + 1}px`
+    element.style.fontSize = fontSize
+    // scrollWidth has different rounding than clientWidth, remove 1px for consistency
+    const scrollWidth = element.scrollWidth - 1
+    if (scrollWidth <= element.clientWidth) {
+      size = mid
+      low = mid + 1
+    } else {
+      high = mid - 1
+    }
+  }
+  const fontSize = `${size}px`
+  element.style.fontSize = fontSize
+}

package/src/utils/item.ts

@@ -0,0 +1,65 @@
+import type { FormType } from '../stores/form/types.js'
+import type {
+  AllowDeny,
+  AllowDenyItems,
+  AllowDenySet,
+  AllowDenySetItem,
+  AllowDenySets,
+} from '../types/widget.js'
+
+// Use for a single item check
+export const isItemAllowed = <T>(
+  item: T,
+  items: AllowDeny<T> | undefined
+): boolean => {
+  if (items?.allow?.length) {
+    return items.allow.includes(item)
+  }
+  return !items?.deny?.includes(item)
+}
+
+// Use for a O(1) set lookup of multiple items check
+export const isItemAllowedForSets = <T>(
+  item: T,
+  items: AllowDenySet | undefined,
+  getKey?: (item: T) => AllowDenySetItem
+): boolean => {
+  if (items?.allow?.size) {
+    return items.allow.has(getKey?.(item) ?? (item as AllowDenySetItem))
+  }
+  return !items?.deny?.has(getKey?.(item) ?? (item as AllowDenySetItem))
+}
+
+export const getConfigItemSets = <T>(
+  items: AllowDenyItems<T> | undefined,
+  getSet: (items: T[]) => Set<AllowDenySetItem>,
+  formType?: FormType
+): AllowDenySets | undefined => {
+  if (!items) {
+    return undefined
+  }
+  return {
+    allow: getSet(items.allow ?? []),
+    deny: getSet(items.deny ?? []),
+    ...(formType && {
+      [formType]: {
+        allow: getSet(items[formType]?.allow ?? []),
+        deny: getSet(items[formType]?.deny ?? []),
+      },
+    }),
+  }
+}
+
+export const isFormItemAllowed = <T>(
+  item: T,
+  configTokens: AllowDenySets | undefined,
+  formType?: FormType,
+  getKey?: (item: T) => AllowDenySetItem
+): boolean => {
+  return (
+    isItemAllowedForSets(item, configTokens, getKey) &&
+    (formType
+      ? isItemAllowedForSets(item, configTokens?.[formType], getKey)
+      : true)
+  )
+}

package/src/utils/navigationRoutes.ts

@@ -0,0 +1,68 @@
+export const navigationRoutes = {
+  home: '/',
+  activities: 'activities',
+  bridges: 'bridges',
+  exchanges: 'exchanges',
+  fromChain: 'from-chain',
+  fromToken: 'from-token',
+  languages: 'languages',
+  routes: 'routes',
+  settings: 'settings',
+  toChain: 'to-chain',
+  toToken: 'to-token',
+  toTokenNative: 'to-token-native',
+  transactionDetails: 'transaction-details',
+  transactionExecution: 'transaction-execution',
+  sendToWallet: 'send-to-wallet',
+  bookmarks: 'bookmarks',
+  recentWallets: 'recent-wallets',
+  connectedWallets: 'connected-wallets',
+  configuredWallets: 'configured-wallets',
+}
+
+export const navigationRoutesValues: string[] = Object.values(navigationRoutes)
+
+export const stickyHeaderRoutes: string[] = [
+  navigationRoutes.activities,
+  navigationRoutes.bridges,
+  navigationRoutes.exchanges,
+  navigationRoutes.fromChain,
+  navigationRoutes.home,
+  navigationRoutes.routes,
+  navigationRoutes.settings,
+  navigationRoutes.toChain,
+  navigationRoutes.toTokenNative,
+  navigationRoutes.transactionDetails,
+  navigationRoutes.transactionExecution,
+  navigationRoutes.sendToWallet,
+  navigationRoutes.bookmarks,
+  navigationRoutes.recentWallets,
+  navigationRoutes.connectedWallets,
+  navigationRoutes.configuredWallets,
+]
+
+export const backButtonRoutes: string[] = [
+  navigationRoutes.activities,
+  navigationRoutes.bridges,
+  navigationRoutes.exchanges,
+  navigationRoutes.languages,
+  navigationRoutes.fromChain,
+  navigationRoutes.fromToken,
+  navigationRoutes.routes,
+  navigationRoutes.settings,
+  navigationRoutes.toChain,
+  navigationRoutes.toToken,
+  navigationRoutes.toTokenNative,
+  navigationRoutes.transactionDetails,
+  navigationRoutes.transactionExecution,
+  navigationRoutes.sendToWallet,
+  navigationRoutes.bookmarks,
+  navigationRoutes.recentWallets,
+  navigationRoutes.connectedWallets,
+  navigationRoutes.configuredWallets,
+]
+
+type NavigationRouteTypeKeys = keyof typeof navigationRoutes
+
+export type NavigationRouteType =
+  (typeof navigationRoutes)[NavigationRouteTypeKeys]

package/src/utils/percentFormatter.ts

@@ -0,0 +1,28 @@
+/**
+ * We use <0.01% for both small positive and negative changes to keep it simple and clear, focusing on minimal impact rather than direction.
+ * Examples:
+ * +0.007% -> <0.01%
+ * -0.003% -> <0.01%
+ */
+export const percentFormatter = (
+  lng: string | undefined,
+  options: any
+): ((value: any) => string) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    ...options,
+    style: 'percent',
+  })
+  return (value: any) => {
+    if ((value > 0 && value < 0.0001) || (value < 0 && value > -0.0001)) {
+      return `<${formatter.format(0.0001)}`
+    }
+
+    const formattedValue = formatter.format(value)
+
+    if (options?.usePlusSign && value > 0) {
+      return `+${formattedValue}`
+    }
+
+    return formattedValue
+  }
+}

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()]
+}

package/src/utils/queries.ts

@@ -0,0 +1,2 @@
+export const getQueryKey = (key: string, prefix?: string) =>
+  `${prefix || 'li.fi'}-widget-${key}`

package/src/utils/timer.ts

@@ -0,0 +1,45 @@
+import type { LiFiStepExtended } from '@lifi/sdk'
+
+export function getExpiryTimestamp(step?: LiFiStepExtended): Date {
+  const { signedAt } = step?.execution ?? {}
+  if (!step || !signedAt) {
+    return new Date()
+  }
+  return new Date(signedAt + step.estimate.executionDuration * 1000)
+}
+
+export const formatTimer = ({
+  days = 0,
+  hours = 0,
+  minutes = 0,
+  seconds = 0,
+  locale = 'en',
+}: {
+  days?: number
+  hours?: number
+  minutes?: number
+  seconds?: number
+  locale?: string
+}): string => {
+  if (typeof (Intl as any).DurationFormat === 'function') {
+    const time = new (Intl as any).DurationFormat(locale, {
+      style: 'digital',
+      hours: '2-digit',
+      hoursDisplay: 'auto',
+    }).format({
+      days,
+      hours,
+      minutes,
+      seconds,
+    })
+    // This handles a fixed bug with Webkit, and Safari
+    // https://github.com/WebKit/WebKit/pull/38357
+    // https://developer.apple.com/documentation/safari-release-notes/safari-18_4-release-notes#JavaScript
+    //
+    // Since most users haven't updated their browsers yet, they would have this issue
+    // it should be safe to remove the check after a while.
+    return time.replace(/^:, /, '')
+  }
+
+  return ''
+}