@lifi/widget 3.13.2 → 3.14.0

package/src/components/TokenList/TokenListItem.tsx

@@ -13,7 +13,6 @@ import {
 import type { MouseEventHandler } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
@@ -66,12 +65,6 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   const { t } = useTranslation()
   const { getAddressLink } = useExplorer()
 
-  const tokenPrice = token.amount
-    ? formatTokenPrice(
-        formatUnits(token.amount, token.decimals),
-        token.priceUSD
-      )
-    : undefined
   const container = useRef(null)
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const [showAddress, setShowAddress] = useState(false)
@@ -93,6 +86,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       setShowAddress(false)
     }
   }
+  const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+  const tokenPrice = formatTokenPrice(
+    token.amount,
+    token.priceUSD,
+    token.decimals
+  )
 
   return (
     <ListItemButton
@@ -186,9 +185,10 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                 sx={{
                   fontWeight: 600,
                 }}
+                title={tokenAmount}
               >
-                {t('format.number', {
-                  value: formatTokenAmount(token.amount, token.decimals),
+                {t('format.tokenAmount', {
+                  value: tokenAmount,
                 })}
               </Typography>
             ) : null}

package/src/components/TokenRate/TokenRate.tsx

@@ -1,12 +1,9 @@
 import type { RouteExtended } from '@lifi/sdk'
 import type { TypographyProps } from '@mui/material'
 import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'
 import { create } from 'zustand'
-import {
-  convertToSubscriptFormat,
-  precisionFormatter,
-} from '../../utils/format.js'
 import { TokenRateTypography } from './TokenRate.style.js'
 
 interface TokenRateProps extends TypographyProps {
@@ -24,6 +21,7 @@ const useTokenRate = create<TokenRateState>((set) => ({
 }))
 
 export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
+  const { t } = useTranslation()
   const { isForward, toggleIsForward } = useTokenRate()
 
   const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
@@ -54,16 +52,12 @@ export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
     Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))
 
   const rateText = isForward
-    ? `1 ${fromToken.symbol} ≈ ${convertToSubscriptFormat(fromToRate)} ${toToken.symbol}`
-    : `1 ${toToken.symbol} ≈ ${convertToSubscriptFormat(toFromRate)} ${fromToken.symbol}`
-
-  const rateTitle = isForward
-    ? `1 ${fromToken.symbol} ≈ ${precisionFormatter.format(fromToRate)} ${toToken.symbol}`
-    : `1 ${toToken.symbol} ≈ ${precisionFormatter.format(toFromRate)} ${fromToken.symbol}`
+    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
 
   return (
     // biome-ignore lint/a11y/useSemanticElements:
-    <TokenRateTypography onClick={toggleRate} role="button" title={rateTitle}>
+    <TokenRateTypography onClick={toggleRate} role="button">
       {rateText}
     </TokenRateTypography>
   )

package/src/components/TransactionDetails.tsx

@@ -8,11 +8,10 @@ import type { CardProps } from '@mui/material'
 import { Box, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { isRouteDone } from '../stores/routes/utils.js'
 import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js'
-import { formatTokenAmount } from '../utils/format.js'
+import { formatTokenAmount, formatTokenPrice } from '../utils/format.js'
 import { getPriceImpact } from '../utils/getPriceImpact.js'
 import { Card } from './Card/Card.js'
 import { CardIconButton } from './Card/CardIconButton.js'
@@ -56,14 +55,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       BigInt(feeCollectionStep.estimate.fromAmount) -
       BigInt(feeCollectionStep.estimate.toAmount)
 
-    const feeAmount = formatUnits(
+    feeAmountUSD = formatTokenPrice(
       estimatedFromAmount,
+      feeCollectionStep.action.fromToken.priceUSD,
       feeCollectionStep.action.fromToken.decimals
     )
-
-    feeAmountUSD =
-      Number.parseFloat(feeAmount) *
-      Number.parseFloat(feeCollectionStep.action.fromToken.priceUSD)
   }
 
   const showIntegratorFeeCollectionDetails =
@@ -245,7 +241,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   sx={{ cursor: 'help' }}
                 >
                   <Typography variant="body2">
-                    {t('format.number', {
+                    {t('format.tokenAmount', {
                       value: formatTokenAmount(
                         BigInt(route.toAmountMin),
                         route.toToken.decimals

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.13.2'
+export const version = '3.14.0'

package/src/i18n/en.json

@@ -6,7 +6,8 @@
   "format": {
     "currency": "{{value, currencyExt(currency: USD)}}",
     "number": "{{value, number(maximumFractionDigits: 9)}}",
-    "percent": "{{value, percent(maximumFractionDigits: 2)}}"
+    "percent": "{{value, percent(maximumFractionDigits: 2)}}",
+    "tokenAmount": "{{value, numberExt}}"
   },
   "button": {
     "auto": "Auto",
@@ -88,7 +89,8 @@
       "emptyBridgesList": "We couldn't find any bridges that match your search",
       "emptyExchangesList": "We couldn't find any exchanges that match your search",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "fundsToExchange": "Funds sent to an exchange may be lost",
+      "smartContractAccount": "Always ensure your smart contract account is set up on the destination chain to avoid potential fund loss.",
+      "fundsToExchange": "Funds sent directly to exchanges might not be recoverable.",
       "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred.",
       "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
     },

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,5 +1,4 @@
 import { Error as ErrorIcon, Info, TurnedIn } from '@mui/icons-material'
-import { LoadingButton } from '@mui/lab'
 import { Button, Typography } from '@mui/material'
 import type { ChangeEvent, MutableRefObject } from 'react'
 import { forwardRef, useState } from 'react'
@@ -217,7 +216,7 @@ export const BookmarkAddressSheet = forwardRef<
           <Button variant="text" onClick={handleCancel} fullWidth>
             {t('button.cancel')}
           </Button>
-          <LoadingButton
+          <Button
             variant="contained"
             onClick={handleBookmark}
             loading={isValidating}
@@ -226,7 +225,7 @@ export const BookmarkAddressSheet = forwardRef<
             focusRipple
           >
             {t('button.bookmark')}
-          </LoadingButton>
+          </Button>
         </SendToWalletButtonRow>
       </SendToWalletSheetContainer>
     </BottomSheet>

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,11 +1,12 @@
-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 { 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 type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -21,16 +22,22 @@ import {
 interface ConfirmAddressSheetProps {
   onConfirm: (wallet: Bookmark) => void
   validatedBookmark?: Bookmark
+  chainId?: number
 }
 
 export const ConfirmAddressSheet = forwardRef<
   BottomSheetBase,
   ConfirmAddressSheetProps
->(({ validatedBookmark, onConfirm }, ref) => {
+>(({ validatedBookmark, onConfirm, chainId }, ref) => {
   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()
@@ -71,12 +78,27 @@ export const ConfirmAddressSheet = forwardRef<
         </SheetAddressContainer>
         <AlertMessage
           title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
-            </Typography>
+            <Box sx={{ display: 'grid', gap: 1 }}>
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.fundsToExchange')}
+              </Typography>
+            </Box>
           }
           icon={<Info />}
+          multiline
         />
+        {isContractAddress ? (
+          <AlertMessage
+            title={
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.smartContractAccount')}
+              </Typography>
+            }
+            icon={<Warning />}
+            severity="warning"
+            multiline
+          />
+        ) : null}
         <SendToWalletButtonRow>
           <Button variant="text" onClick={handleClose} fullWidth>
             {t('button.cancel')}

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 { 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/stores/routes/useExecutingRoutesIds.ts

@@ -18,8 +18,8 @@ export const useExecutingRoutesIds = () => {
         )
         .sort(
           (a, b) =>
-            (b?.route.steps[0].execution?.process[0].startedAt ?? 0) -
-            (a?.route.steps[0].execution?.process[0].startedAt ?? 0)
+            (b?.route.steps[0].execution?.process[0]?.startedAt ?? 0) -
+            (a?.route.steps[0].execution?.process[0]?.startedAt ?? 0)
         )
         .map(({ route }) => route.id),
     shallow

package/src/themes/createTheme.ts

@@ -1,5 +1,3 @@
-import { loadingButtonClasses } from '@mui/lab'
-import type {} from '@mui/lab/themeAugmentation'
 import type {
   CSSObject,
   PaletteMode,
@@ -8,6 +6,7 @@ import type {
 } from '@mui/material'
 import {
   alpha,
+  buttonClasses,
   createTheme as createMuiTheme,
   css,
   darken,
@@ -247,19 +246,18 @@ export const createTheme = (
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
-            [`&.${loadingButtonClasses.loading}.Mui-disabled`]: {
+            [`&.${buttonClasses.loading}.Mui-disabled`]: {
               backgroundColor: primaryMainColor,
               color: contrastButtonColor,
               cursor: 'auto',
               pointerEvents: 'auto',
             },
-            [`.${loadingButtonClasses.loadingIndicator}`]: {
+            [`.${buttonClasses.loadingIndicator}`]: {
               color: contrastButtonColor,
             },
-            [`&.${loadingButtonClasses.root}.${loadingButtonClasses.loading}`]:
-              {
-                color: 'transparent',
-              },
+            [`&.${buttonClasses.root}.${buttonClasses.loading}`]: {
+              color: 'transparent',
+            },
             ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
           }),
           text: ({ ownerState }) => ({

package/src/themes/types.ts

@@ -1,4 +1,3 @@
-import type {} from '@mui/lab/themeAugmentation'
 import type {
   CardProps,
   ComponentsOverrides,

package/src/types/widget.ts

@@ -13,6 +13,7 @@ import type {
   PaletteMode,
   PaletteOptions,
   Shape,
+  SxProps,
   Theme,
 } from '@mui/material'
 import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
@@ -191,6 +192,22 @@ export type WidgetLanguages = {
 
 export type PoweredByType = 'default' | 'jumper'
 
+export interface RouteLabel {
+  text: string
+  sx?: SxProps<Theme>
+}
+
+export interface RouteLabelRule {
+  label: RouteLabel
+  // Matching criteria
+  bridges?: AllowDeny<string>
+  exchanges?: AllowDeny<string>
+  fromChainId?: number[]
+  toChainId?: number[]
+  fromTokenAddress?: string[]
+  toTokenAddress?: string[]
+}
+
 export interface WidgetConfig {
   fromChain?: number
   toChain?: number
@@ -243,6 +260,11 @@ export interface WidgetConfig {
   explorerUrls?: Record<number, string[]> &
     Partial<Record<'internal', string[]>>
   poweredBy?: PoweredByType
+
+  /**
+   * Custom labels/badges to show on routes based on specified rules
+   */
+  routeLabels?: RouteLabelRule[]
 }
 
 export interface FormFieldOptions {

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