@lifi/widget 0.0.0-preview-6cc63bac

package/src/utils/converters.ts

@@ -0,0 +1,238 @@
+import type {
+  ExecutionAction,
+  ExecutionActionStatus,
+  ExtendedTransactionInfo,
+  FeeCost,
+  FullStatusData,
+  Substatus,
+  TokenAmount,
+  ToolsResponse,
+} from '@lifi/sdk'
+import type { RouteExecution } from '../stores/routes/types.js'
+import { formatTokenPrice } from './format.js'
+
+const buildActionsFromTxHistory = (tx: FullStatusData): ExecutionAction[] => {
+  const sending = tx.sending as ExtendedTransactionInfo
+  const receiving = tx.receiving as ExtendedTransactionInfo
+
+  if (!sending.token?.chainId || !receiving.token?.chainId) {
+    return []
+  }
+
+  const actionStatus: ExecutionActionStatus =
+    tx.status === 'DONE' ? 'DONE' : 'FAILED'
+  const substatus: Substatus =
+    actionStatus === 'FAILED' ? 'UNKNOWN_ERROR' : 'COMPLETED'
+
+  if (sending.chainId === receiving.chainId) {
+    return [
+      {
+        type: 'SWAP', // operations on same chain will be swaps
+        message: '',
+        status: actionStatus,
+        chainId: sending.chainId,
+        txHash: sending.txHash,
+        txLink: sending.txLink,
+        substatus,
+        substatusMessage: '',
+      },
+    ]
+  }
+
+  const actions: ExecutionAction[] = [
+    {
+      type: 'CROSS_CHAIN', // first step of bridging, ignoring the approvals
+      message: '',
+      status: actionStatus, // can be FAILED
+      chainId: sending.chainId,
+      txHash: sending.txHash,
+      txLink: sending.txLink,
+    },
+    {
+      type: 'RECEIVING_CHAIN', // final step of bridging, post swaps
+      message: '',
+      status: actionStatus,
+      substatus,
+      substatusMessage: '',
+      chainId: receiving.chainId,
+      txHash: receiving.txHash,
+      txLink: receiving.txLink,
+    },
+  ]
+
+  return actions
+}
+
+export const buildRouteFromTxHistory = (
+  tx: FullStatusData,
+  tools?: ToolsResponse
+): RouteExecution | undefined => {
+  const sending = tx.sending as ExtendedTransactionInfo
+  const receiving = tx.receiving as ExtendedTransactionInfo
+
+  if (!sending.token?.chainId || !receiving.token?.chainId) {
+    return
+  }
+
+  let usedTool = tx.sending.includedSteps?.find(
+    (step) => step.toolDetails.key === tx.tool
+  )?.toolDetails
+
+  if (!usedTool) {
+    const selectedBridge = tools?.bridges.find(
+      (bridge) => bridge.key === tx.tool
+    )
+
+    const selectedExchange = tools?.exchanges.find(
+      (exchange) => exchange.key === tx.tool
+    )
+    usedTool = {
+      key: tx.tool,
+      name: selectedBridge?.name ?? selectedExchange?.name ?? tx.tool,
+      logoURI: selectedBridge?.logoURI ?? selectedExchange?.logoURI ?? '',
+    }
+  }
+
+  const fromToken: TokenAmount = {
+    ...sending.token,
+    amount: BigInt(sending.amount ?? 0),
+  }
+
+  const toToken: TokenAmount = {
+    ...receiving.token,
+    amount: BigInt(receiving.amount ?? 0),
+  }
+
+  const sendingValue = sending.value ? BigInt(sending.value) : 0n
+  const sendingFeeAmount =
+    sending.gasToken.address === sending.token.address && sending.amount
+      ? sendingValue - BigInt(sending.amount)
+      : sendingValue
+  const sendingFeeAmountUsd =
+    sending.gasToken.priceUSD && sendingFeeAmount
+      ? formatTokenPrice(
+          sendingFeeAmount,
+          sending.gasToken.priceUSD,
+          sending.gasToken.decimals
+        )
+      : 0
+
+  const feeCosts: FeeCost[] | undefined = sendingFeeAmount
+    ? [
+        {
+          amount: sendingFeeAmount.toString(),
+          amountUSD: sendingFeeAmountUsd.toFixed(2),
+          token: sending.gasToken,
+          included: false,
+          // Not used
+          description: '',
+          name: '',
+          percentage: '',
+        },
+      ]
+    : undefined
+
+  const routeExecution: RouteExecution = {
+    status: 1,
+    route: {
+      id: (tx as FullStatusData).transactionId,
+      fromAddress: (tx as FullStatusData).fromAddress,
+      toAddress: (tx as FullStatusData).toAddress,
+      fromChainId: sending.chainId,
+      fromAmount: sending.amount ?? '',
+      fromAmountUSD: sending.amountUSD ?? '',
+      toAmount: receiving.amount ?? '',
+      toAmountMin: receiving.amount ?? '',
+      toAmountUSD: receiving.amountUSD ?? '',
+      toChainId: receiving.chainId,
+      fromToken,
+      toToken,
+      gasCostUSD: sending.gasAmountUSD,
+      steps: [
+        {
+          id: (tx as FullStatusData).transactionId,
+          type: 'lifi',
+          tool: tx.tool,
+          toolDetails: usedTool,
+          action: {
+            fromToken: sending.token,
+            fromAmount: sending.amount ?? '',
+            fromChainId: sending.chainId,
+            fromAddress: (tx as FullStatusData).fromAddress,
+            toToken: receiving.token,
+            toChainId: receiving.chainId,
+            toAddress: (tx as FullStatusData).toAddress,
+            slippage: 0,
+          },
+          estimate: {
+            tool: tx.tool,
+            approvalAddress: '',
+            fromAmount: sending.amount ?? '',
+            fromAmountUSD: sending.amountUSD ?? '',
+            toAmountMin: receiving.amount ?? '',
+            toAmount: receiving.amount ?? '',
+            toAmountUSD: receiving.amountUSD ?? '',
+            executionDuration: 0,
+          },
+          includedSteps: [
+            {
+              id: (tx as FullStatusData).transactionId,
+              type: sending.chainId === receiving.chainId ? 'swap' : 'cross',
+              action: {
+                fromChainId: sending.chainId,
+                fromAmount: sending.amount ?? '',
+                fromToken: sending.token,
+                toChainId: receiving.chainId,
+                toToken: receiving.token,
+                slippage: 0,
+                fromAddress: (tx as FullStatusData).fromAddress,
+                toAddress: (tx as FullStatusData).toAddress,
+              },
+              estimate: {
+                tool: tx.tool,
+                fromAmount: sending.amount ?? '',
+                toAmount: receiving.amount ?? '',
+                toAmountMin: receiving.amount ?? '',
+                approvalAddress: '',
+                executionDuration: 0,
+              },
+              tool: tx.tool,
+              toolDetails: usedTool,
+            },
+          ],
+          integrator: tx.metadata?.integrator ?? '',
+          execution: {
+            status: 'DONE', // can be FAILED
+            startedAt: sending.timestamp
+              ? sending.timestamp * 1000
+              : Date.now(),
+            actions: buildActionsFromTxHistory(tx),
+            fromAmount: sending.amount,
+            toAmount: receiving.amount,
+            toToken: receiving.token,
+            internalTxLink: tx.lifiExplorerLink,
+            externalTxLink: tx.bridgeExplorerLink,
+            gasCosts: [
+              {
+                amount: sending.gasAmount,
+                amountUSD: sending.gasAmountUSD,
+                token: sending.gasToken,
+                estimate: '0',
+                limit: '0',
+                price: '0',
+                type: 'SEND',
+              },
+            ],
+            feeCosts,
+          },
+        },
+      ],
+      insurance: {
+        state: 'NOT_INSURABLE',
+        feeAmountUsd: '0',
+      },
+    },
+  }
+
+  return routeExecution
+}

package/src/utils/currencyExtendedFormatter.ts

@@ -0,0 +1,15 @@
+export const currencyExtendedFormatter = (
+  lng: string | undefined,
+  options: any
+): ((value: any) => string) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    ...options,
+    style: 'currency',
+  })
+  return (value: any) => {
+    if (value > 0 && value < 0.01) {
+      return `<${formatter.format(0.01)}`
+    }
+    return formatter.format(value)
+  }
+}

package/src/utils/deepEqual.ts

@@ -0,0 +1,62 @@
+/** Forked from https://github.com/epoberezkin/fast-deep-equal */
+
+export function deepEqual(a: any, b: any): boolean {
+  if (a === b) {
+    return true
+  }
+
+  if (a && b && typeof a === 'object' && typeof b === 'object') {
+    if (a.constructor !== b.constructor) {
+      return false
+    }
+
+    let length: number
+    let i: number
+
+    if (Array.isArray(a) && Array.isArray(b)) {
+      length = a.length
+      if (length !== b.length) {
+        return false
+      }
+      for (i = length; i-- !== 0; ) {
+        if (!deepEqual(a[i], b[i])) {
+          return false
+        }
+      }
+      return true
+    }
+
+    if (a.valueOf !== Object.prototype.valueOf) {
+      return a.valueOf() === b.valueOf()
+    }
+    if (a.toString !== Object.prototype.toString) {
+      return a.toString() === b.toString()
+    }
+
+    const keys = Object.keys(a)
+    length = keys.length
+    if (length !== Object.keys(b).length) {
+      return false
+    }
+
+    for (i = length; i-- !== 0; ) {
+      if (!Object.hasOwn(b, keys[i]!)) {
+        return false
+      }
+    }
+
+    for (i = length; i-- !== 0; ) {
+      const key = keys[i]
+
+      if (key && !deepEqual(a[key], b[key])) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  // true if both NaN, false otherwise
+  // biome-ignore lint/suspicious/noSelfCompare: allowed in typescript
+  return a !== a && b !== b
+}

package/src/utils/deepMerge.ts

@@ -0,0 +1,14 @@
+const isObject = (obj: any): boolean => obj && typeof obj === 'object'
+
+export const deepMerge = (...objects: any[]): any => {
+  return objects.reduce((prev, obj) => {
+    for (const key in obj) {
+      if (isObject(prev[key]) && isObject(obj[key])) {
+        prev[key] = deepMerge(prev[key], obj[key])
+      } else {
+        prev[key] = obj[key]
+      }
+    }
+    return prev
+  }, {})
+}

package/src/utils/elements.ts

@@ -0,0 +1,32 @@
+export enum ElementId {
+  AppExpandedContainer = 'widget-app-expanded-container',
+  Header = 'widget-header',
+  RelativeContainer = 'widget-relative-container',
+  ScrollableContainer = 'widget-scrollable-container',
+}
+
+export const createElementId = (
+  ElementId: ElementId,
+  elementId: string
+): string => (elementId ? `${ElementId}-${elementId}` : ElementId)
+
+// NOTE: The getter functions here are often used with code that can be effected by css changes in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+
+export const getAppContainer = (elementId: string): HTMLElement | null =>
+  document.getElementById(
+    createElementId(ElementId.AppExpandedContainer, elementId)
+  )
+
+export const getRelativeContainer = (elementId: string): HTMLElement | null =>
+  document.getElementById(
+    createElementId(ElementId.RelativeContainer, elementId)
+  )
+
+export const getScrollableContainer = (elementId: string): HTMLElement | null =>
+  document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId)
+  )
+
+export const getHeaderElement = (elementId: string): HTMLElement | null =>
+  document.getElementById(createElementId(ElementId.Header, elementId))

package/src/utils/enum.ts

@@ -0,0 +1,4 @@
+export const hasEnumFlag = <T extends number | bigint>(
+  flags: T,
+  flag: T
+): boolean => (flags & flag) === flag

package/src/utils/fees.ts

@@ -0,0 +1,136 @@
+import type { FeeCost, GasCost, RouteExtended, Token } from '@lifi/sdk'
+import { formatTokenPrice } from './format.js'
+
+export interface FeesBreakdown {
+  amount: bigint
+  amountUSD: number
+  token: Token
+}
+
+export const getAccumulatedFeeCostsBreakdown = (
+  route: RouteExtended,
+  included: boolean = false
+): {
+  gasCosts: FeesBreakdown[]
+  feeCosts: FeesBreakdown[]
+  gasCostUSD: number
+  feeCostUSD: number
+  combinedFeesUSD: number
+} => {
+  const gasCosts = getGasCostsBreakdown(route)
+  const feeCosts = getFeeCostsBreakdown(route, included)
+  const gasCostUSD = gasCosts.reduce(
+    (sum, gasCost) => sum + gasCost.amountUSD,
+    0
+  )
+  const feeCostUSD = feeCosts.reduce(
+    (sum, feeCost) => sum + feeCost.amountUSD,
+    0
+  )
+  const combinedFeesUSD = gasCostUSD + feeCostUSD
+  return {
+    gasCosts,
+    feeCosts,
+    gasCostUSD,
+    feeCostUSD,
+    combinedFeesUSD,
+  }
+}
+
+const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
+  return Array.from(
+    route.steps
+      .reduce((groupedGasCosts, step) => {
+        const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts
+        if (gasCosts?.length) {
+          const {
+            token,
+            amount: gasCostAmount,
+            amountUSD: gasCostAmountUSD,
+          } = getStepFeeCostsBreakdown(gasCosts)
+          const groupedGasCost = groupedGasCosts.get(token.chainId)
+          const amount = groupedGasCost
+            ? groupedGasCost.amount + gasCostAmount
+            : gasCostAmount
+          const amountUSD = groupedGasCost
+            ? groupedGasCost.amountUSD + gasCostAmountUSD
+            : gasCostAmountUSD
+          groupedGasCosts.set(token.chainId, {
+            amount,
+            amountUSD,
+            token,
+          })
+          return groupedGasCosts
+        }
+        return groupedGasCosts
+      }, new Map<number, FeesBreakdown>())
+      .values()
+  )
+}
+
+const getFeeCostsBreakdown = (
+  route: RouteExtended,
+  included?: boolean
+): FeesBreakdown[] => {
+  return Array.from(
+    route.steps
+      .reduce((groupedFeeCosts, step) => {
+        let feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts
+        if (typeof included === 'boolean') {
+          feeCosts = feeCosts?.filter(
+            (feeCost) => feeCost.included === included
+          )
+        }
+        if (feeCosts?.length) {
+          const {
+            token,
+            amount: feeCostAmount,
+            amountUSD: feeCostAmountUSD,
+          } = getStepFeeCostsBreakdown(feeCosts)
+          const groupedFeeCost = groupedFeeCosts.get(token.chainId)
+          const amount = groupedFeeCost
+            ? groupedFeeCost.amount + feeCostAmount
+            : feeCostAmount
+          const amountUSD = groupedFeeCost
+            ? groupedFeeCost.amountUSD + feeCostAmountUSD
+            : feeCostAmountUSD
+          groupedFeeCosts.set(token.chainId, {
+            amount,
+            amountUSD,
+            token,
+          })
+          return groupedFeeCosts
+        }
+        return groupedFeeCosts
+      }, new Map<number, FeesBreakdown>())
+      .values()
+  )
+}
+
+const getStepFeeCostsBreakdown = (
+  feeCosts: FeeCost[] | GasCost[]
+): FeesBreakdown => {
+  const { token } = feeCosts[0]
+
+  const { amount, amountUSD } = feeCosts.reduce(
+    (acc, feeCost) => {
+      const feeAmount = BigInt(Number(feeCost.amount).toFixed(0) || 0)
+      const amountUSD = formatTokenPrice(
+        feeAmount,
+        feeCost.token.priceUSD,
+        feeCost.token.decimals
+      )
+
+      acc.amount += feeAmount
+      acc.amountUSD += amountUSD
+      return acc
+    },
+    { amount: 0n, amountUSD: 0 }
+  )
+
+  return {
+    amount,
+    amountUSD,
+    token,
+  }
+}

package/src/utils/format.ts

@@ -0,0 +1,195 @@
+import { formatUnits } from '@lifi/sdk'
+
+export const usdDecimals = 2
+
+/**
+ * Format token amount to at least 6 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export function formatTokenAmount(
+  amount: bigint | undefined,
+  decimals: number
+): string {
+  const formattedAmount = amount ? formatUnits(amount, decimals) : '0'
+  const parsedAmount = Number.parseFloat(formattedAmount)
+  if (!parsedAmount || Number.isNaN(Number(formattedAmount))) {
+    return '0'
+  }
+
+  return formattedAmount
+}
+
+export function formatSlippage(
+  slippage = '',
+  defaultValue = '',
+  returnInitial = false
+): string {
+  if (!slippage) {
+    return slippage
+  }
+  const parsedSlippage = Number.parseFloat(slippage)
+  if (Number.isNaN(Number(slippage)) && !Number.isNaN(parsedSlippage)) {
+    return parsedSlippage.toString()
+  }
+  if (Number.isNaN(parsedSlippage)) {
+    return defaultValue
+  }
+  if (parsedSlippage >= 100) {
+    return '100'
+  }
+  if (parsedSlippage < 0) {
+    return Math.abs(parsedSlippage).toString()
+  }
+  if (returnInitial) {
+    return slippage
+  }
+  return parsedSlippage.toString()
+}
+
+/**
+ * Formats a user input amount string, normalizing it and optionally limiting decimal places.
+ * @param amount - The amount string to format (e.g., '123.45', '1,23', '0..')
+ * @param decimals - Maximum number of decimal places to allow. If null, no limit is applied.
+ * @param returnInitial - If true, preserves the input format during typing (e.g., keeps trailing dots,
+ *                        preserves leading zeros, keeps negative signs). If false (default), cleans up the
+ *                        format on blur (removes leading/trailing zeros, removes negative signs).
+ * @returns The formatted amount string, or empty string for invalid input.
+ */
+export function formatInputAmount(
+  amount: string,
+  decimals: number | null = null,
+  returnInitial: boolean = false
+): string {
+  if (!amount) {
+    return amount
+  }
+
+  // Replace commas with dots
+  let formattedAmount = amount.trim().replaceAll(',', '.')
+
+  // Keep only the first dot, remove all subsequent dots
+  const dotIndex = formattedAmount.indexOf('.')
+  if (dotIndex !== -1) {
+    formattedAmount = `${formattedAmount.slice(0, dotIndex + 1)}${formattedAmount.slice(dotIndex + 1).replaceAll('.', '')}`
+  }
+
+  // If the amount starts with a dot, prepend 0
+  if (
+    (!returnInitial && formattedAmount.startsWith('.')) ||
+    formattedAmount === '.'
+  ) {
+    formattedAmount = `0${formattedAmount}`
+  }
+
+  // Parse the valid part of the amount
+  const parsedAmount = Number.parseFloat(formattedAmount)
+  if (Number.isNaN(Number(formattedAmount)) && !Number.isNaN(parsedAmount)) {
+    formattedAmount = parsedAmount.toString()
+  }
+  if (Number.isNaN(Math.abs(Number(formattedAmount)))) {
+    return ''
+  }
+
+  // Split and limit decimals
+  let [integer, fraction = ''] = formattedAmount.split('.')
+  if (decimals !== null && fraction.length > decimals) {
+    fraction = fraction.slice(0, decimals)
+  }
+
+  if (returnInitial) {
+    if (!fraction) {
+      return formattedAmount
+    }
+    return `${integer}${fraction ? `.${fraction}` : ''}`
+  }
+
+  // Remove leading zeros and minus sign
+  integer = integer.replace(/^0+|-/, '')
+  // Remove trailing zeros
+  fraction = fraction.replace(/(0+)$/, '')
+
+  return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`
+}
+
+export function formatTokenPrice(
+  amount?: string | bigint,
+  price?: string,
+  decimals?: number
+): number {
+  if (!amount || !price) {
+    return 0
+  }
+
+  const formattedAmount =
+    typeof amount === 'bigint' && decimals !== undefined
+      ? formatUnits(amount, decimals)
+      : amount.toString()
+
+  if (Number.isNaN(Number(formattedAmount)) || Number.isNaN(Number(price))) {
+    return 0
+  }
+  return Number.parseFloat(formattedAmount) * Number.parseFloat(price)
+}
+
+/**
+ * Formatter for price value to token amount
+ */
+const formatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 20,
+  maximumFractionDigits: 20,
+  useGrouping: false,
+})
+
+/**
+ * Convert price value to token amount
+ */
+export function priceToTokenAmount(
+  priceValue: string,
+  priceUSD?: string
+): string {
+  if (!priceValue || !priceUSD) {
+    return '0'
+  }
+
+  const numericPriceValue = Number.parseFloat(priceValue)
+  const numericPrice = Number.parseFloat(priceUSD)
+
+  if (
+    Number.isNaN(numericPriceValue) ||
+    Number.isNaN(numericPrice) ||
+    !numericPrice
+  ) {
+    return '0'
+  }
+
+  return formatter.format(numericPriceValue / numericPrice)
+}
+
+const units = [
+  ['day', 86400],
+  ['hour', 3600],
+  ['minute', 60],
+  ['second', 1],
+] as const
+
+export function formatDuration(seconds: number, locale: string): string {
+  const match = units.find(([, v]) => seconds >= v)
+  const amount = match ? Math.floor(seconds / match[1]) : 0
+  const unit = match?.[0] ?? 'second'
+
+  return amount.toLocaleString(locale, {
+    style: 'unit',
+    unit,
+    unitDisplay: 'narrow',
+  })
+}
+
+export function wrapLongWords(text: string): string {
+  return text.replace(
+    /\S{32,}/g,
+    (word) => `${word.slice(0, 8)}...${word.slice(-4)}`
+  )
+}