@openocean.finance/widget 1.0.0

package/src/utils/compactNumberFormatter.ts

@@ -0,0 +1,91 @@
+/**
+ * Converts a non-negative integer to its subscript representation using Unicode subscript characters.
+ * @param n - The number to convert to subscript
+ * @returns A string where each digit is converted to its subscript equivalent
+ * @example
+ * toSubscript(5) => '₅'
+ * toSubscript(10) => '₁₀'
+ */
+function toSubscript(n: number): string {
+  return n
+    .toString()
+    .split('')
+    .map((digit) => String.fromCharCode(8320 + Number(digit)))
+    .join('')
+}
+
+/**
+ * Formats numbers with special handling for small decimal values, converting runs of leading zeros
+ * into a more compact subscript notation.
+ *
+ * @param value - The numeric value to format (expected to be a string representing a BigInt)
+ * @param lng - The locale string for number formatting
+ * @param options - Formatting options including decimals and Intl.NumberFormat options
+ * @returns A formatted string with subscript notation for leading zeros
+ */
+export const compactNumberFormatter = (
+  lng: string | undefined,
+  options: any
+) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    notation: 'standard',
+    roundingPriority: 'morePrecision',
+    maximumSignificantDigits: 21,
+    maximumFractionDigits: 21,
+    ...options,
+  })
+  return (value: any) => {
+    if (!Number.parseFloat(value) || Number.isNaN(Number(value))) {
+      return '0'
+    }
+
+    const parts = formatter.formatToParts(value as Intl.StringNumericLiteral)
+    let integerPart = ''
+    let fractionPart = ''
+    let decimalSeparator = ''
+    let minusSign = ''
+
+    for (const p of parts) {
+      switch (p.type) {
+        case 'integer':
+        case 'group':
+          integerPart += p.value
+          break
+        case 'fraction':
+          fractionPart += p.value
+          break
+        case 'decimal':
+          decimalSeparator = p.value
+          break
+        case 'minusSign':
+          minusSign = p.value
+          break
+      }
+    }
+
+    // For numbers with no decimal part, return early
+    if (!fractionPart) {
+      return `${minusSign}${integerPart}`
+    }
+
+    // Count consecutive leading zeros in the fraction part
+    const match = fractionPart.match(/^0+/)
+    const leadingZerosCount = match ? match[0].length : 0
+
+    // For numbers with few leading zeros (≤ 3), format normally
+    // but limit the total length and trim trailing zeros
+    if (leadingZerosCount <= 3) {
+      fractionPart = fractionPart.slice(0, 6).replace(/0+$/, '')
+      return `${minusSign}${integerPart}${decimalSeparator}${fractionPart}`
+    }
+
+    // For numbers with many leading zeros (> 3), use subscript notation
+    // Format: "0.0₍number_of_zeros₎significant_digits"
+    const zerosSubscript = toSubscript(leadingZerosCount)
+    const remainder = fractionPart
+      .slice(leadingZerosCount, leadingZerosCount + 4)
+      .replace(/0+$/, '')
+
+    return `${minusSign}${integerPart}${decimalSeparator}0${zerosSubscript}${remainder}`
+  }
+}

package/src/utils/converters.ts

@@ -0,0 +1,230 @@
+import type {
+  ExtendedTransactionInfo,
+  FeeCost,
+  FullStatusData,
+  Process,
+  ProcessStatus,
+  Substatus,
+  TokenAmount,
+  ToolsResponse,
+} from '@lifi/sdk'
+import type { RouteExecution } from '../stores/routes/types.js'
+import { formatTokenPrice } from './format.js'
+
+const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
+  const sending = tx.sending as ExtendedTransactionInfo
+  const receiving = tx.receiving as ExtendedTransactionInfo
+
+  if (!sending.token?.chainId || !receiving.token?.chainId) {
+    return []
+  }
+
+  const processStatus: ProcessStatus = tx.status === 'DONE' ? 'DONE' : 'FAILED'
+  const substatus: Substatus =
+    processStatus === '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,
+        txHash: sending.txHash,
+        txLink: sending.txLink,
+        doneAt: receiving.timestamp ?? Date.now(),
+        substatus,
+        substatusMessage: '',
+      },
+    ]
+  }
+
+  const process: Process[] = [
+    {
+      type: 'CROSS_CHAIN', // first step of bridging, ignoring the approvals
+      startedAt: sending.timestamp ?? Date.now(),
+      message: '',
+      status: processStatus, // can be FAILED
+      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,
+      substatus,
+      substatusMessage: '',
+      doneAt: receiving.timestamp ?? Date.now(),
+      txHash: receiving.txHash,
+      txLink: receiving.txLink,
+    },
+  ]
+
+  return process
+}
+
+export const buildRouteFromTxHistory = (
+  tx: FullStatusData,
+  tools?: ToolsResponse
+) => {
+  const sending = tx.sending as ExtendedTransactionInfo
+  const receiving = tx.receiving as ExtendedTransactionInfo
+
+  if (!sending.token?.chainId || !receiving.token?.chainId) {
+    return
+  }
+
+  const selectedBridge = tools?.bridges.find((bridge) => bridge.key === tx.tool)
+
+  const selectedExchange = tools?.exchanges.find(
+    (exchange) => exchange.key === tx.tool
+  )
+
+  const 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: crypto.randomUUID(),
+          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: '',
+              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 ?? Date.now(),
+            doneAt: receiving.timestamp ?? Date.now(),
+            process: buildProcessFromTxHistory(tx),
+            fromAmount: sending.amount,
+            toAmount: receiving.amount,
+            toToken: receiving.token,
+            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
+) => {
+  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) {
+  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.prototype.hasOwnProperty.call(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: <explanation>
+  return a !== a && b !== b
+}

package/src/utils/deepMerge.ts

@@ -0,0 +1,14 @@
+const isObject = (obj: any) => obj && typeof obj === 'object'
+
+export const deepMerge = (...objects: 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/eip7702.ts

@@ -0,0 +1,23 @@
+/**
+ * EIP-7702 introduces delegation designators that allow EOAs to delegate execution to other contracts.
+ * A delegation designator starts with 0xef0100 followed by the target contract address.
+ *
+ * When an EOA has this code, it means:
+ * - The EOA can still send transactions (unlike other contract accounts)
+ * - All contract calls are delegated to the target address
+ * - The code itself remains as the delegation designator (0xef0100 || address)
+ *
+ * Delegation Designator Structure:
+ *
+ * ─────┬───┬──┬───────────────────────────────────────┐
+ *      │   │  │                                       │
+ *  0x ef 0100 a94f5374fce5edbc8e2a8697c15331677e6ebf0b
+ *      │   │  └───────────────────────────────────────┘
+ *      │   │                         Target Address
+ *      │   └── 7702
+ *      └── 3541
+ *
+ * @see https://eips.ethereum.org/EIPS/eip-7702
+ */
+export const isDelegationDesignatorCode = (code?: string) =>
+  code?.startsWith('0xef0100')

package/src/utils/elements.ts

@@ -0,0 +1,30 @@
+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) =>
+  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) =>
+  document.getElementById(
+    createElementId(ElementId.AppExpandedContainer, elementId)
+  )
+
+export const getRelativeContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.RelativeContainer, elementId)
+  )
+
+export const getScrollableContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId)
+  )
+
+export const getHeaderElement = (elementId: string) =>
+  document.getElementById(createElementId(ElementId.Header, elementId))

package/src/utils/enum.ts

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

package/src/utils/fees.ts

@@ -0,0 +1,130 @@
+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 = false
+) => {
+  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,
+  }
+}
+
+export 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()
+  )
+}
+
+export 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()
+  )
+}
+
+export 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,97 @@
+import { formatUnits } from 'viem'
+
+/**
+ * Format token amount to at least 6 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export function formatTokenAmount(
+  amount: bigint | undefined,
+  decimals: number
+) {
+  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()
+}
+
+export function formatInputAmount(
+  amount: string,
+  decimals: number | null = null,
+  returnInitial = false
+) {
+  if (!amount) {
+    return amount
+  }
+  let formattedAmount = amount.trim().replaceAll(',', '.')
+  if (formattedAmount.startsWith('.')) {
+    formattedAmount = `0${formattedAmount}`
+  }
+  const parsedAmount = Number.parseFloat(formattedAmount)
+  if (Number.isNaN(Number(formattedAmount)) && !Number.isNaN(parsedAmount)) {
+    return parsedAmount.toString()
+  }
+  if (Number.isNaN(Math.abs(Number(formattedAmount)))) {
+    return ''
+  }
+  if (returnInitial) {
+    return formattedAmount
+  }
+  let [integer, fraction = ''] = formattedAmount.split('.')
+  if (decimals !== null && fraction.length > decimals) {
+    fraction = fraction.slice(0, decimals)
+  }
+  integer = integer.replace(/^0+|-/, '')
+  fraction = fraction.replace(/(0+)$/, '')
+  return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`
+}
+
+export function formatTokenPrice(
+  amount?: string | bigint,
+  price?: string,
+  decimals?: 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)
+}