@lifi/widget 3.14.0-beta.0 → 3.14.1

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,12 +1,14 @@
-import { Info, Wallet } from '@mui/icons-material'
-import { Button, Typography } from '@mui/material'
+import { Info, Wallet, Warning } from '@mui/icons-material'
+import { Box, Button, Typography } from '@mui/material'
 import type { MutableRefObject } from 'react'
-import { forwardRef } from 'react'
+import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { useIsContractAddress } from '../../hooks/useIsContractAddress.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
@@ -21,20 +23,46 @@ import {
 interface ConfirmAddressSheetProps {
   onConfirm: (wallet: Bookmark) => void
   validatedBookmark?: Bookmark
+  chainId?: number
+}
+
+interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
+  onClose: () => void
 }
 
 export const ConfirmAddressSheet = forwardRef<
   BottomSheetBase,
   ConfirmAddressSheetProps
->(({ validatedBookmark, onConfirm }, ref) => {
+>((props, ref) => {
+  const handleClose = () => {
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+  }
+
+  return (
+    <BottomSheet ref={ref}>
+      <ConfirmAddressSheetContent {...props} onClose={handleClose} />
+    </BottomSheet>
+  )
+})
+
+const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
+  validatedBookmark,
+  onConfirm,
+  chainId,
+  onClose,
+}) => {
   const { t } = useTranslation()
   const { navigateBack } = useNavigateBack()
   const { setFieldValue } = useFieldActions()
   const { setSendToWallet } = useSendToWalletActions()
+  const isContractAddress = useIsContractAddress(
+    validatedBookmark?.address,
+    chainId,
+    validatedBookmark?.chainType
+  )
 
-  const handleClose = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
-  }
+  const containerRef = useRef<HTMLElement>(null)
+  useSetContentHeight(containerRef, isContractAddress)
 
   const handleConfirm = () => {
     if (validatedBookmark) {
@@ -44,48 +72,61 @@ export const ConfirmAddressSheet = forwardRef<
       })
       onConfirm?.(validatedBookmark)
       setSendToWallet(true)
-      handleClose()
+      onClose()
       navigateBack()
     }
   }
 
   return (
-    <BottomSheet ref={ref}>
-      <SendToWalletSheetContainer>
-        <IconContainer>
-          <Wallet sx={{ fontSize: 40 }} />
-        </IconContainer>
-        <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
-        <SheetAddressContainer>
-          {validatedBookmark?.name ? (
-            <Typography
-              sx={{
-                fontWeight: 600,
-                mb: 0.5,
-              }}
-            >
-              {validatedBookmark?.name}
+    <SendToWalletSheetContainer ref={containerRef}>
+      <IconContainer>
+        <Wallet sx={{ fontSize: 40 }} />
+      </IconContainer>
+      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
+      <SheetAddressContainer>
+        {validatedBookmark?.name ? (
+          <Typography
+            sx={{
+              fontWeight: 600,
+              mb: 0.5,
+            }}
+          >
+            {validatedBookmark?.name}
+          </Typography>
+        ) : null}
+        <Typography>{validatedBookmark?.address}</Typography>
+      </SheetAddressContainer>
+      <AlertMessage
+        title={
+          <Box sx={{ display: 'grid', gap: 1 }}>
+            <Typography variant="body2" fontWeight={500}>
+              {t('info.message.fundsToExchange')}
             </Typography>
-          ) : null}
-          <Typography>{validatedBookmark?.address}</Typography>
-        </SheetAddressContainer>
+          </Box>
+        }
+        icon={<Info />}
+        multiline
+      />
+      {isContractAddress ? (
         <AlertMessage
           title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
+            <Typography variant="body2" fontWeight={500}>
+              {t('info.message.smartContractAccount')}
             </Typography>
           }
-          icon={<Info />}
+          icon={<Warning />}
+          severity="warning"
+          multiline
         />
-        <SendToWalletButtonRow>
-          <Button variant="text" onClick={handleClose} fullWidth>
-            {t('button.cancel')}
-          </Button>
-          <Button variant="contained" onClick={handleConfirm} fullWidth>
-            {t('button.confirm')}
-          </Button>
-        </SendToWalletButtonRow>
-      </SendToWalletSheetContainer>
-    </BottomSheet>
+      ) : null}
+      <SendToWalletButtonRow>
+        <Button variant="text" onClick={onClose} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleConfirm} fullWidth>
+          {t('button.confirm')}
+        </Button>
+      </SendToWalletButtonRow>
+    </SendToWalletSheetContainer>
   )
-})
+}

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,3 +1,4 @@
+import { ChainType } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import {
   Error as ErrorIcon,
@@ -58,8 +59,6 @@ export const SendToWalletPage = () => {
   const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
   const [errorMessage, setErrorMessage] = useState('')
   const { validateAddress, isValidating } = useAddressValidation()
-  const { accounts } = useAccount()
-  const connectedWallets = accounts.filter((account) => account.isConnected)
   const { requiredToChainType } = useToAddressRequirements()
   const [toChainId] = useFieldValues('toChain')
   const { chain: toChain } = useChain(toChainId)
@@ -67,6 +66,12 @@ export const SendToWalletPage = () => {
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)
   const { variant } = useWidgetConfig()
 
+  const { accounts } = useAccount()
+  const connectedWallets = accounts.filter((account) => account.isConnected)
+  const connectedEVMChainId = connectedWallets.find(
+    (account) => account.chainType === ChainType.EVM
+  )?.chainId
+
   useHeader(t('header.sendToWallet'))
 
   const handleInputChange = (e: ChangeEvent) => {
@@ -241,6 +246,7 @@ export const SendToWalletPage = () => {
           ref={confirmAddressSheetRef}
           validatedBookmark={validatedWallet}
           onConfirm={handleOnConfirm}
+          chainId={connectedEVMChainId || toChainId}
         />
         <BookmarkAddressSheet
           ref={bookmarkAddressSheetRef}

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -146,7 +146,7 @@ const ExchangeRateBottomSheetContent: React.FC<
             fontWeight: 600,
           }}
         >
-          {t('format.number', {
+          {t('format.tokenAmount', {
             value: formatTokenAmount(
               BigInt(data.oldToAmount),
               data.toToken.decimals
@@ -168,7 +168,7 @@ const ExchangeRateBottomSheetContent: React.FC<
             fontWeight: 600,
           }}
         >
-          {t('format.number', {
+          {t('format.tokenAmount', {
             value: formatTokenAmount(
               BigInt(data?.newToAmount),
               data?.toToken.decimals

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -4,11 +4,12 @@ import { useMemo } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import * as supportedLanguages from '../../i18n/index.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
+import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
+import { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'
 import { deepMerge } from '../../utils/deepMerge.js'
 import { isItemAllowed } from '../../utils/item.js'
+import { percentFormatter } from '../../utils/percentFormatter.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
-import { currencyExtendedFormatter } from './currencyExtendedFormatter.js'
-import { percentFormatter } from './percentFormatter.js'
 import type { LanguageKey, LanguageTranslationResources } from './types.js'
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -63,6 +64,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
 
     i18n.init()
 
+    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)
     i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)
     i18n.services.formatter?.addCached('percent', percentFormatter)
 

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -5,18 +5,20 @@ import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk'
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useEffect } from 'react'
-import { useConfig as useWagmiConfig } from 'wagmi'
+import { useAccount, useConfig as useWagmiConfig } from 'wagmi'
 import {
   getConnectorClient as getWagmiConnectorClient,
   switchChain,
 } from 'wagmi/actions'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { getSafeMultisigConfig } from './getSafeMultisigConfig.js'
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig()
   const { wallet } = useWallet()
   const wagmiConfig = useWagmiConfig()
   const bigmiConfig = useBigmiConfig()
+  const account = useAccount({ config: wagmiConfig })
 
   useEffect(() => {
     // Configure SDK Providers
@@ -31,6 +33,11 @@ export const SDKProviders = () => {
       (provider) => provider.type === ChainType.UTXO
     )
     if (!hasConfiguredEVMProvider) {
+      // TODO: refactor this in favor of EIP-5792: Wallet Call API
+      const multisig =
+        account.connector?.id === 'safe'
+          ? getSafeMultisigConfig(account.connector)
+          : undefined
       providers.push(
         EVM({
           getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
@@ -38,6 +45,7 @@ export const SDKProviders = () => {
             const chain = await switchChain(wagmiConfig, { chainId })
             return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id })
           },
+          multisig,
         })
       )
     }
@@ -61,7 +69,13 @@ export const SDKProviders = () => {
       providers.push(...sdkConfig.providers)
     }
     config.setProviders(providers)
-  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter])
+  }, [
+    account.connector,
+    bigmiConfig,
+    sdkConfig?.providers,
+    wagmiConfig,
+    wallet?.adapter,
+  ])
 
   return null
 }

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