@lifi/widget 3.7.0 → 3.8.0-beta.0

package/src/utils/converters.ts

@@ -0,0 +1,226 @@
+import type {
+  ExtendedTransactionInfo,
+  FeeCost,
+  FullStatusData,
+  Process,
+  ProcessStatus,
+  Substatus,
+  TokenAmount,
+  ToolsResponse,
+} from '@lifi/sdk'
+import { formatUnits } from 'viem'
+import type { RouteExecution } from '../stores/routes/types.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
+      ? Number.parseFloat(
+          formatUnits(sendingFeeAmount, sending.gasToken.decimals)
+        ) * Number.parseFloat(sending.gasToken.priceUSD)
+      : 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
+            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/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/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,128 @@
+import type { FeeCost, GasCost, RouteExtended, Token } from '@lifi/sdk'
+import { formatUnits } from 'viem'
+
+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 =
+        Number.parseFloat(feeCost.token.priceUSD || '0') *
+        Number.parseFloat(formatUnits(feeAmount, 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,143 @@
+import { formatUnits } from 'viem'
+
+const subscriptMap = ['₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉']
+
+export const precisionFormatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 4,
+  maximumFractionDigits: 4,
+  useGrouping: false,
+})
+
+/**
+ * Format token amount to at least 4 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 === 0 || Number.isNaN(Number(formattedAmount))) {
+    return '0'
+  }
+
+  return precisionFormatter.format(parsedAmount)
+}
+
+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, price?: string) {
+  if (!amount || !price) {
+    return 0
+  }
+  if (Number.isNaN(Number(amount)) || Number.isNaN(Number(price))) {
+    return 0
+  }
+  return Number.parseFloat(amount) * Number.parseFloat(price)
+}
+
+/**
+ * Converts a number to a subscript format if it contains leading zeros in the fractional part.
+ *
+ * @param {number} value - The number to be converted.
+ * @param {Intl.NumberFormatOptions} options An object that contains one or more properties that specify comparison options.
+ * @returns {string} - The number formatted as a string, with subscripts for leading zeros if applicable.
+ */
+export function convertToSubscriptFormat(
+  value: number,
+  options?: Intl.NumberFormatOptions
+): string {
+  let formattedValue: string
+  if (options) {
+    formattedValue = value.toLocaleString('en', options)
+  } else {
+    formattedValue = precisionFormatter.format(value)
+  }
+
+  // Calculate the number of zeros after the decimal point
+  const d = Math.ceil(Math.log10(Math.abs(value)))
+
+  // If the value does not have significant leading zeros in the fractional part, return the formatted value as is
+  if (d > -3 || !value) {
+    return formattedValue
+  }
+
+  // Calculate the number of leading zeros in the fractional part
+  const leadingZeros = Math.abs(d)
+
+  const fractionalPartExtractor = value > 0 ? 2 : 3
+
+  // Extract the fractional part of the formatted value, excluding the leading zeros and "0." or "-0."
+  const fractionalPart = formattedValue.slice(
+    leadingZeros + fractionalPartExtractor
+  )
+
+  // Convert the number of leading zeros to their corresponding Unicode subscript characters
+  const subscript = leadingZeros
+    .toString()
+    .split('')
+    .map((digit) => subscriptMap[digit as any])
+    .join('')
+
+  return `${value > 0 ? '' : '-'}0.0${subscript}${fractionalPart}`
+}

package/src/utils/input.ts

@@ -0,0 +1,29 @@
+export const fitInputText = (
+  maxFontSize: number,
+  minFontSize: number,
+  element: HTMLElement
+) => {
+  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,8 @@
+import type { AllowDeny } from '../types/widget.js'
+
+export const isItemAllowed = <T>(itemId: T, items?: AllowDeny<T>) => {
+  if (items?.allow?.length) {
+    return items.allow.includes(itemId)
+  }
+  return !items?.deny?.includes(itemId)
+}

package/src/utils/navigationRoutes.ts

@@ -0,0 +1,71 @@
+export const navigationRoutes = {
+  home: '/',
+  activeTransactions: 'active-transactions',
+  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',
+  transactionHistory: 'transaction-history',
+  sendToWallet: 'send-to-wallet',
+  bookmarks: 'bookmarks',
+  recentWallets: 'recent-wallets',
+  connectedWallets: 'connected-wallets',
+  configuredWallets: 'configured-wallets',
+}
+
+export const navigationRoutesValues = Object.values(navigationRoutes)
+
+export const stickyHeaderRoutes = [
+  navigationRoutes.activeTransactions,
+  navigationRoutes.bridges,
+  navigationRoutes.exchanges,
+  navigationRoutes.fromChain,
+  navigationRoutes.home,
+  navigationRoutes.routes,
+  navigationRoutes.settings,
+  navigationRoutes.toChain,
+  navigationRoutes.toTokenNative,
+  navigationRoutes.transactionDetails,
+  navigationRoutes.transactionExecution,
+  navigationRoutes.transactionHistory,
+  navigationRoutes.sendToWallet,
+  navigationRoutes.bookmarks,
+  navigationRoutes.recentWallets,
+  navigationRoutes.connectedWallets,
+  navigationRoutes.configuredWallets,
+]
+
+export const backButtonRoutes = [
+  navigationRoutes.activeTransactions,
+  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.transactionHistory,
+  navigationRoutes.sendToWallet,
+  navigationRoutes.bookmarks,
+  navigationRoutes.recentWallets,
+  navigationRoutes.connectedWallets,
+  navigationRoutes.configuredWallets,
+]
+
+export type NavigationRouteTypeKeys = keyof typeof navigationRoutes
+
+export type NavigationRouteType =
+  (typeof navigationRoutes)[NavigationRouteTypeKeys]

package/src/utils/wallet.ts

@@ -0,0 +1,4 @@
+export const shortenAddress = (address?: string) =>
+  address
+    ? `${address.substring(0, 7)}...${address.substring(address.length - 5)}`
+    : null

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "dist/esm",
+    "rootDir": "./src",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
+  "include": ["./src/**/*", "./src/**/*.json"]
+}