@lifi/widget 3.14.0-beta.0 → 3.14.0

package/src/providers/WalletProvider/getSafeMultisigConfig.ts

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { MultisigTransaction, MultisigTxDetails } from '@lifi/sdk'
+import type { Connector } from 'wagmi'
+
+enum TransactionStatus {
+  AWAITING_CONFIRMATIONS = 'AWAITING_CONFIRMATIONS',
+  AWAITING_EXECUTION = 'AWAITING_EXECUTION',
+  CANCELLED = 'CANCELLED',
+  FAILED = 'FAILED',
+  SUCCESS = 'SUCCESS',
+}
+
+type GatewayTransactionDetails = {
+  safeAddress: string
+  txId: string
+  executedAt?: number
+  txStatus: TransactionStatus
+  txHash?: string
+}
+
+export const getSafeMultisigConfig = (connector: Connector) => {
+  const getMultisigTransactionDetails = async (
+    txHash: string,
+    chainId: number,
+    updateIntermediateStatus?: () => void
+  ): Promise<MultisigTxDetails> => {
+    const safeAppProvider = (await connector.getProvider()) as any
+    const safeProviderSDK = safeAppProvider.sdk
+
+    const safeTransactionDetails: GatewayTransactionDetails =
+      await safeProviderSDK.txs.getBySafeTxHash(txHash)
+
+    const safeTxHash = safeTransactionDetails.txId
+
+    const safeApiTransactionResponse = await fetch(
+      `https://safe-client.safe.global/v1/chains/${chainId}/transactions/${safeTxHash}`
+    )
+
+    const safeApiTransactionDetails = await safeApiTransactionResponse.json()
+
+    const nonTerminalStatus = [
+      TransactionStatus.SUCCESS,
+      TransactionStatus.CANCELLED,
+      TransactionStatus.FAILED,
+    ]
+
+    const isSafeStatusPending =
+      !nonTerminalStatus.includes(safeTransactionDetails.txStatus) &&
+      !nonTerminalStatus.includes(safeApiTransactionDetails.txStatus)
+
+    const isAwaitingExecution = [
+      safeTransactionDetails.txStatus,
+      safeApiTransactionDetails.txStatus,
+    ].includes(TransactionStatus.AWAITING_EXECUTION)
+
+    if (isAwaitingExecution) {
+      updateIntermediateStatus?.()
+    }
+
+    if (isSafeStatusPending) {
+      await new Promise((resolve) => {
+        setTimeout(resolve, 5000)
+      })
+
+      return await getMultisigTransactionDetails(
+        txHash,
+        chainId,
+        updateIntermediateStatus
+      )
+    }
+
+    if (
+      [
+        safeTransactionDetails.txStatus,
+        safeApiTransactionDetails.txStatus,
+      ].includes(TransactionStatus.SUCCESS)
+    ) {
+      return {
+        status: 'DONE',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    if (
+      [
+        safeTransactionDetails.txStatus,
+        safeApiTransactionDetails.txStatus,
+      ].includes(TransactionStatus.FAILED)
+    ) {
+      return {
+        status: 'FAILED',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    if (
+      [
+        safeTransactionDetails.txStatus,
+        safeApiTransactionDetails.txStatus,
+      ].includes(TransactionStatus.CANCELLED)
+    ) {
+      return {
+        status: 'CANCELLED',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    if (isSafeStatusPending) {
+      return {
+        status: 'PENDING',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    return {
+      status: 'PENDING',
+      txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+    }
+  }
+
+  const sendBatchTransaction = async (
+    batchTransactions: MultisigTransaction[]
+  ): Promise<`0x${string}`> => {
+    const safeAppProvider = (await connector.getProvider()) as any
+    const safeProviderSDK = safeAppProvider.sdk
+
+    try {
+      const { safeTxHash } = await safeProviderSDK.txs.send({
+        txs: batchTransactions,
+      })
+
+      return `0x${safeTxHash.slice(2)}`
+    } catch (error) {
+      throw new Error(error as string)
+    }
+  }
+
+  return {
+    isMultisigWalletClient: connector?.id === 'safe',
+    shouldBatchTransactions: connector?.id === 'safe',
+    sendBatchTransaction,
+    getMultisigTransactionDetails,
+  }
+}

package/src/types/widget.ts

@@ -244,7 +244,6 @@ export interface WidgetConfig {
   hiddenUI?: HiddenUIType[]
   requiredUI?: RequiredUIType[]
   useRecommendedRoute?: boolean
-  useRelayerRoutes?: boolean
 
   walletConfig?: WidgetWalletConfig
   sdkConfig?: WidgetSDKConfig

package/src/utils/compactNumberFormatter.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import { compactNumberFormatter } from './compactNumberFormatter.js'
+
+describe('Compact Number Formatter', () => {
+  describe('basic formatting', () => {
+    const testCases = [
+      { input: '0.123456789', expected: '0.123456' },
+      { input: '0.0123456', expected: '0.012345' },
+      { input: '0.00123456', expected: '0.001234' },
+      { input: '0.000123456', expected: '0.000123' },
+      { input: '0.06942', expected: '0.06942' },
+      { input: '0.006942', expected: '0.006942' },
+      { input: '0.0006942', expected: '0.000694' },
+      { input: '0.00006942', expected: '0.0₄6942' },
+      { input: '0.00000123456', expected: '0.0₅1234' },
+      { input: '0.000006942', expected: '0.0₅6942' },
+      { input: '0.00000000001', expected: '0.0₁₀1' },
+      { input: '0.00000006942', expected: '0.0₇6942' },
+      { input: '0.0000000694269', expected: '0.0₇6942' },
+      { input: '0.0000000694069', expected: '0.0₇694' },
+      { input: '0.000000006942', expected: '0.0₈6942' },
+      {
+        input: '0.000000000000006942',
+        expected: '0.0₁₄6942',
+      },
+      { input: '-0.0000042', expected: '-0.0₅42' },
+      { input: '-0.000000042', expected: '-0.0₇42' },
+      { input: '1.0000000042', expected: '1.0₈42' },
+      { input: '123456789.00042', expected: '123456789.00042' },
+      {
+        input: '123456789.000042',
+        expected: '123456789.0₄42',
+      },
+      {
+        input: '123456789.0000042',
+        expected: '123456789.0₅42',
+      },
+      { input: '1234567.000000042', expected: '1234567.0₇42' },
+      {
+        input: '1234567.000000042',
+        expected: '1,234,567.0₇42',
+        lng: 'en',
+        useGrouping: true,
+      },
+      {
+        input: '1234567.987654321',
+        expected: '1,234,567.987654',
+        lng: 'en',
+        useGrouping: true,
+      },
+      {
+        input: '1234567.000000042',
+        expected: '1.234.567,0₇42',
+        lng: 'de',
+        useGrouping: true,
+      },
+    ]
+
+    testCases.forEach(({ input, expected, lng, useGrouping = false }) => {
+      it(`should format ${input} correctly`, () => {
+        expect(compactNumberFormatter(lng, { useGrouping })(input)).toBe(
+          expected
+        )
+      })
+    })
+  })
+})

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

@@ -8,8 +8,8 @@ import type {
   TokenAmount,
   ToolsResponse,
 } from '@lifi/sdk'
-import { formatUnits } from 'viem'
 import type { RouteExecution } from '../stores/routes/types.js'
+import { formatTokenPrice } from './format.js'
 
 const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
   const sending = tx.sending as ExtendedTransactionInfo
@@ -105,9 +105,11 @@ export const buildRouteFromTxHistory = (
       : sendingValue
   const sendingFeeAmountUsd =
     sending.gasToken.priceUSD && sendingFeeAmount
-      ? Number.parseFloat(
-          formatUnits(sendingFeeAmount, sending.gasToken.decimals)
-        ) * Number.parseFloat(sending.gasToken.priceUSD)
+      ? formatTokenPrice(
+          sendingFeeAmount,
+          sending.gasToken.priceUSD,
+          sending.gasToken.decimals
+        )
       : 0
 
   const feeCosts: FeeCost[] | undefined = sendingFeeAmount

package/src/utils/fees.ts

@@ -1,5 +1,5 @@
 import type { FeeCost, GasCost, RouteExtended, Token } from '@lifi/sdk'
-import { formatUnits } from 'viem'
+import { formatTokenPrice } from './format.js'
 
 export interface FeesBreakdown {
   amount: bigint
@@ -109,9 +109,11 @@ export const getStepFeeCostsBreakdown = (
   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))
+      const amountUSD = formatTokenPrice(
+        feeAmount,
+        feeCost.token.priceUSD,
+        feeCost.token.decimals
+      )
 
       acc.amount += feeAmount
       acc.amountUSD += amountUSD

package/src/utils/format.ts

@@ -1,15 +1,5 @@
 import { formatUnits } from 'viem'
 
-const subscriptMap = ['₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉']
-
-export const precisionFormatter = new Intl.NumberFormat('en', {
-  notation: 'standard',
-  roundingPriority: 'morePrecision',
-  maximumSignificantDigits: 6,
-  maximumFractionDigits: 6,
-  useGrouping: false,
-})
-
 /**
  * Format token amount to at least 6 decimals.
  * @param amount amount to format.
@@ -21,11 +11,11 @@ export function formatTokenAmount(
 ) {
   const formattedAmount = amount ? formatUnits(amount, decimals) : '0'
   const parsedAmount = Number.parseFloat(formattedAmount)
-  if (parsedAmount === 0 || Number.isNaN(Number(formattedAmount))) {
+  if (!parsedAmount || Number.isNaN(Number(formattedAmount))) {
     return '0'
   }
 
-  return precisionFormatter.format(parsedAmount)
+  return formattedAmount
 }
 
 export function formatSlippage(
@@ -86,58 +76,22 @@ export function formatInputAmount(
   return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`
 }
 
-export function formatTokenPrice(amount?: string, price?: string) {
+export function formatTokenPrice(
+  amount?: string | bigint,
+  price?: string,
+  decimals?: number
+) {
   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)))
+  const formattedAmount =
+    typeof amount === 'bigint' && decimals !== undefined
+      ? formatUnits(amount, decimals)
+      : amount.toString()
 
-  // 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
+  if (Number.isNaN(Number(formattedAmount)) || Number.isNaN(Number(price))) {
+    return 0
   }
-
-  // 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}`
+  return Number.parseFloat(formattedAmount) * Number.parseFloat(price)
 }

package/src/utils/getPriceImpact.ts

@@ -1,5 +1,5 @@
 import type { Token } from '@lifi/sdk'
-import { formatTokenAmount, formatTokenPrice } from './format.js'
+import { formatTokenPrice } from './format.js'
 
 interface GetPriceImpractProps {
   fromToken: Token
@@ -14,13 +14,22 @@ export const getPriceImpact = ({
   fromAmount,
   toAmount,
 }: GetPriceImpractProps) => {
-  const fromTokenAmount = formatTokenAmount(fromAmount, fromToken.decimals)
-  const fromTokenPrice = formatTokenPrice(fromTokenAmount, fromToken.priceUSD)
+  const fromTokenPrice = formatTokenPrice(
+    fromAmount,
+    fromToken.priceUSD,
+    fromToken.decimals
+  )
+  const toTokenPrice = formatTokenPrice(
+    toAmount,
+    toToken.priceUSD,
+    toToken.decimals
+  )
 
-  const toTokenAmount = formatTokenAmount(toAmount, toToken.decimals)
-  const toTokenPrice = formatTokenPrice(toTokenAmount, toToken.priceUSD) || 0.01
+  if (!fromTokenPrice) {
+    return 0
+  }
 
   const priceImpact = toTokenPrice / fromTokenPrice - 1
 
-  return Number(priceImpact)
+  return priceImpact
 }

package/dist/esm/providers/I18nProvider/percentFormatter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"percentFormatter.js","sourceRoot":"","sources":["../../../../src/providers/I18nProvider/percentFormatter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAAuB,EAAE,OAAY,EAAE,EAAE;IACxE,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;QAC3C,GAAG,OAAO;QACV,KAAK,EAAE,SAAS;KACjB,CAAC,CAAA;IACF,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACpE,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAA;QACvC,CAAC;QACD,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC,CAAA;AACH,CAAC,CAAA"}