@lifi/widget 3.14.0-beta.0 → 3.14.0

package/dist/esm/utils/format.d.ts

@@ -1,4 +1,3 @@
-export declare const precisionFormatter: Intl.NumberFormat;
 /**
  * Format token amount to at least 6 decimals.
  * @param amount amount to format.
@@ -7,12 +6,4 @@ export declare const precisionFormatter: Intl.NumberFormat;
 export declare function formatTokenAmount(amount: bigint | undefined, decimals: number): string;
 export declare function formatSlippage(slippage?: string, defaultValue?: string, returnInitial?: boolean): string;
 export declare function formatInputAmount(amount: string, decimals?: number | null, returnInitial?: boolean): string;
-export declare function formatTokenPrice(amount?: string, price?: string): number;
-/**
- * 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 declare function convertToSubscriptFormat(value: number, options?: Intl.NumberFormatOptions): string;
+export declare function formatTokenPrice(amount?: string | bigint, price?: string, decimals?: number): number;

package/dist/esm/utils/format.js

@@ -1,12 +1,4 @@
 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.
@@ -15,10 +7,10 @@ export const precisionFormatter = new Intl.NumberFormat('en', {
 export function formatTokenAmount(amount, decimals) {
     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(slippage = '', defaultValue = '', returnInitial = false) {
     if (!slippage) {
@@ -68,47 +60,16 @@ export function formatInputAmount(amount, decimals = null, returnInitial = false
     fraction = fraction.replace(/(0+)$/, '');
     return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
 }
-export function formatTokenPrice(amount, price) {
+export function formatTokenPrice(amount, price, decimals) {
     if (!amount || !price) {
         return 0;
     }
-    if (Number.isNaN(Number(amount)) || Number.isNaN(Number(price))) {
+    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(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, options) {
-    let formattedValue;
-    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])
-        .join('');
-    return `${value > 0 ? '' : '-'}0.0${subscript}${fractionalPart}`;
+    return Number.parseFloat(formattedAmount) * Number.parseFloat(price);
 }
 //# sourceMappingURL=format.js.map

package/dist/esm/utils/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../src/utils/format.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../src/utils/format.ts"],"names":[],"mappings":"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"}

package/dist/esm/utils/getPriceImpact.js

@@ -1,10 +1,11 @@
-import { formatTokenAmount, formatTokenPrice } from './format.js';
+import { formatTokenPrice } from './format.js';
 export const getPriceImpact = ({ fromToken, toToken, fromAmount, toAmount, }) => {
-    const fromTokenAmount = formatTokenAmount(fromAmount, fromToken.decimals);
-    const fromTokenPrice = formatTokenPrice(fromTokenAmount, fromToken.priceUSD);
-    const toTokenAmount = formatTokenAmount(toAmount, toToken.decimals);
-    const toTokenPrice = formatTokenPrice(toTokenAmount, toToken.priceUSD) || 0.01;
+    const fromTokenPrice = formatTokenPrice(fromAmount, fromToken.priceUSD, fromToken.decimals);
+    const toTokenPrice = formatTokenPrice(toAmount, toToken.priceUSD, toToken.decimals);
+    if (!fromTokenPrice) {
+        return 0;
+    }
     const priceImpact = toTokenPrice / fromTokenPrice - 1;
-    return Number(priceImpact);
+    return priceImpact;
 };
 //# sourceMappingURL=getPriceImpact.js.map

package/dist/esm/utils/getPriceImpact.js.map

@@ -1 +1 @@
-{"version":3,"file":"getPriceImpact.js","sourceRoot":"","sources":["../../../src/utils/getPriceImpact.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AASjE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,UAAU,EACV,QAAQ,GACa,EAAE,EAAE;IACzB,MAAM,eAAe,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IACzE,MAAM,cAAc,GAAG,gBAAgB,CAAC,eAAe,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAE5E,MAAM,aAAa,GAAG,iBAAiB,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IACnE,MAAM,YAAY,GAAG,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;IAE9E,MAAM,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,CAAC,CAAA;IAErD,OAAO,MAAM,CAAC,WAAW,CAAC,CAAA;AAC5B,CAAC,CAAA"}
+{"version":3,"file":"getPriceImpact.js","sourceRoot":"","sources":["../../../src/utils/getPriceImpact.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAS9C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,UAAU,EACV,QAAQ,GACa,EAAE,EAAE;IACzB,MAAM,cAAc,GAAG,gBAAgB,CACrC,UAAU,EACV,SAAS,CAAC,QAAQ,EAClB,SAAS,CAAC,QAAQ,CACnB,CAAA;IACD,MAAM,YAAY,GAAG,gBAAgB,CACnC,QAAQ,EACR,OAAO,CAAC,QAAQ,EAChB,OAAO,CAAC,QAAQ,CACjB,CAAA;IAED,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,CAAC,CAAA;IACV,CAAC;IAED,MAAM,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,CAAC,CAAA;IAErD,OAAO,WAAW,CAAA;AACpB,CAAC,CAAA"}

package/dist/esm/utils/percentFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percentFormatter.js","sourceRoot":"","sources":["../../../src/utils/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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.14.0-beta.0",
+  "version": "3.14.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -34,10 +34,10 @@
     "@bigmi/core": "^0.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "3.6.0-beta.3",
+    "@lifi/sdk": "^3.5.2",
     "@mui/icons-material": "6.0.2",
-    "@mui/material": "^6.4.0",
-    "@mui/system": "^6.4.0",
+    "@mui/material": "^6.4.1",
+    "@mui/system": "^6.4.1",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.11.2",
@@ -45,14 +45,14 @@
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
     "react-i18next": "^15.4.0",
-    "react-intersection-observer": "^9.15.0",
+    "react-intersection-observer": "^9.15.1",
     "react-router-dom": "^6.28.0",
-    "viem": "^2.22.8",
+    "viem": "^2.22.11",
     "zustand": "^5.0.3",
-    "@lifi/wallet-management": "^3.6.0-beta.0"
+    "@lifi/wallet-management": "^3.6.0"
   },
   "peerDependencies": {
-    "@bigmi/react": ">=0.0.7",
+    "@bigmi/react": ">=0.1.0",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@tanstack/react-query": "^5.62.0",
     "react": ">=18",

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -35,7 +35,6 @@ export const ActiveTransactionItem: React.FC<{
 
   const getStatusComponent = () => {
     switch (lastActiveProcess?.status) {
-      case 'PERMIT_REQUIRED':
       case 'ACTION_REQUIRED':
         return <InfoRounded color="info" fontSize="small" />
       case 'FAILED':

package/src/components/AlertMessage/AlertMessage.tsx

@@ -9,7 +9,7 @@ import type { Severity } from './types.js'
 interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
   icon: ReactNode
   title: ReactNode
-  multilineTitle?: boolean
+  multiline?: boolean
   severity?: Severity
 }
 
@@ -17,14 +17,14 @@ export const AlertMessage = ({
   title,
   icon,
   children,
-  multilineTitle,
+  multiline,
   severity = 'info',
   ...rest
 }: AlertMessageProps) => (
   <AlertMessageCard severity={severity} {...rest}>
     <AlertMessageCardTitle
       severity={severity}
-      alignItems={multilineTitle ? 'start' : 'center'}
+      alignItems={multiline ? 'start' : 'center'}
     >
       {icon}
       {title}

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -34,7 +34,10 @@ export const PriceFormHelperTextBase: React.FC<
   const { t } = useTranslation()
   const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
 
-  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD)
+  const tokenAmount = token
+    ? formatTokenAmount(token.amount, token.decimals)
+    : '0'
+  const tokenPrice = formatTokenPrice(amount, token?.priceUSD)
 
   return (
     <FormHelperText
@@ -59,7 +62,7 @@ export const PriceFormHelperTextBase: React.FC<
         }}
       >
         {t('format.currency', {
-          value: fromAmountTokenPrice,
+          value: tokenPrice,
         })}
       </Typography>
       {isLoading && tokenAddress ? (
@@ -73,9 +76,10 @@ export const PriceFormHelperTextBase: React.FC<
             lineHeight: 1,
             pl: 0.25,
           }}
+          title={tokenAmount}
         >
-          {`/ ${t('format.number', {
-            value: formatTokenAmount(token.amount, token.decimals),
+          {`/ ${t('format.tokenAmount', {
+            value: tokenAmount,
           })}`}
         </Typography>
       ) : null}

package/src/components/FeeBreakdownTooltip.tsx

@@ -2,8 +2,8 @@ import { Box, Tooltip, Typography } from '@mui/material'
 import type { TFunction } from 'i18next'
 import type { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import type { FeesBreakdown } from '../utils/fees.js'
+import { formatTokenAmount } from '../utils/format.js'
 
 export interface FeeBreakdownTooltipProps {
   gasCosts?: FeesBreakdown[]
@@ -60,9 +60,8 @@ export const getFeeBreakdownTypography = (
       }}
     >
       {t('format.currency', { value: fee.amountUSD })} (
-      {t('format.number', {
-        value: Number.parseFloat(formatUnits(fee.amount, fee.token.decimals)),
-        maximumFractionDigits: Math.min(fee.token.decimals, 9),
+      {t('format.tokenAmount', {
+        value: formatTokenAmount(fee.amount, fee.token.decimals),
       })}{' '}
       {fee.token.symbol})
     </Typography>

package/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -20,7 +20,7 @@ export const FundsSufficiencyMessage = () => {
           {t('warning.message.insufficientFunds')}
         </Typography>
       }
-      multilineTitle
+      multiline
     />
   )
 }

package/src/components/RouteCard/RouteCard.tsx

@@ -1,5 +1,4 @@
 import type { TokenAmount } from '@lifi/sdk'
-import { isEVMPermitStep } from '@lifi/sdk'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
@@ -46,12 +45,9 @@ export const RouteCard: React.FC<
       : undefined
 
   const customLabels = getMatchingLabels(route, routeLabels)
-  const tags: string[] =
-    route.tags?.filter((tag) => tag === 'CHEAPEST' || tag === 'FASTEST') ?? []
-  const hasRelayerSupport = route.steps.some((step) => isEVMPermitStep(step))
-  if (hasRelayerSupport) {
-    tags.push('GASLESS')
-  }
+  const tags = route.tags?.filter(
+    (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
+  )
 
   const cardContent = (
     <Box
@@ -59,7 +55,8 @@ export const RouteCard: React.FC<
         flex: 1,
       }}
     >
-      {subvariant !== 'refuel' && (tags.length || customLabels.length) ? (
+      {subvariant !== 'refuel' &&
+      (route.tags?.length || customLabels.length) ? (
         <Box
           sx={{
             display: 'flex',
@@ -69,7 +66,7 @@ export const RouteCard: React.FC<
             flexWrap: 'wrap',
           }}
         >
-          {tags.length ? (
+          {tags?.length ? (
             <CardLabel type={active ? 'active' : undefined}>
               <CardLabelTypography>
                 {t(`main.tags.${tags[0].toLowerCase()}` as any)}

package/src/components/Step/CircularProgress.style.tsx

@@ -15,7 +15,6 @@ const getStatusColor = (
   substatus?: Substatus
 ) => {
   switch (status) {
-    case 'PERMIT_REQUIRED':
     case 'ACTION_REQUIRED':
       return alpha(theme.palette.info.main, 0.12)
     case 'DONE':
@@ -34,22 +33,12 @@ export const CircularIcon = styled(Box, {
   shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
 })<{ status?: ProcessStatus; substatus?: Substatus }>(
   ({ theme, status, substatus }) => ({
-    backgroundColor: [
-      'PERMIT_REQUIRED',
-      'ACTION_REQUIRED',
-      'DONE',
-      'FAILED',
-    ].includes(status!)
+    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
       ? getStatusColor(theme, status, substatus)
       : theme.palette.background.paper,
     borderStyle: 'solid',
     borderColor: getStatusColor(theme, status, substatus),
-    borderWidth: ![
-      'PERMIT_REQUIRED',
-      'ACTION_REQUIRED',
-      'DONE',
-      'FAILED',
-    ].includes(status!)
+    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
       ? 3
       : 0,
     display: 'grid',

package/src/components/Step/CircularProgress.tsx

@@ -17,8 +17,7 @@ export function CircularProgress({ process }: { process: Process }) {
       {process.status === 'STARTED' || process.status === 'PENDING' ? (
         <CircularProgressPending size={40} />
       ) : null}
-      {process.status === 'PERMIT_REQUIRED' ||
-      process.status === 'ACTION_REQUIRED' ? (
+      {process.status === 'ACTION_REQUIRED' ? (
         <InfoRounded
           color="info"
           sx={{

package/src/components/Step/StepProcess.tsx

@@ -29,8 +29,7 @@ export const StepProcess: React.FC<{
         <CircularProgress process={process} />
         <Typography
           sx={{
-            marginLeft: 2,
-            marginRight: 0.5,
+            mx: 2,
             flex: 1,
             fontSize: 14,
             fontWeight: process.error ? 600 : 400,

package/src/components/Step/StepTimer.tsx

@@ -44,9 +44,7 @@ export const StepTimer: React.FC<{
       return
     }
     const shouldRestart = executionProcess.status === 'FAILED'
-    const shouldPause =
-      executionProcess.status === 'PERMIT_REQUIRED' ||
-      executionProcess.status === 'ACTION_REQUIRED'
+    const shouldPause = executionProcess.status === 'ACTION_REQUIRED'
     const shouldStart =
       executionProcess.status === 'STARTED' ||
       executionProcess.status === 'PENDING'

package/src/components/StepActions/StepActions.tsx

@@ -12,12 +12,11 @@ import {
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { LiFiToolLogo } from '../../icons/lifi.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../../types/widget.js'
-import { formatTokenAmount } from '../../utils/format.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { SmallAvatar } from '../Avatar/SmallAvatar.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
 import {
@@ -215,8 +214,8 @@ export const StepDetailsContent: React.FC<{
 
     fromAmount =
       estimatedFromAmount > 0n
-        ? formatUnits(estimatedFromAmount, step.action.fromToken.decimals)
-        : formatUnits(
+        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)
+        : formatTokenAmount(
             BigInt(step.estimate.fromAmount),
             step.action.fromToken.decimals
           )
@@ -243,22 +242,24 @@ export const StepDetailsContent: React.FC<{
     >
       {!showToAmount ? (
         <>
-          {formatUnits(
-            BigInt(step.estimate.fromAmount),
-            step.action.fromToken.decimals
-          )}{' '}
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.estimate.fromAmount),
+              step.action.fromToken.decimals
+            ),
+          })}{' '}
           {step.action.fromToken.symbol}
           {' - '}
         </>
       ) : null}
-      {t('format.number', {
+      {t('format.tokenAmount', {
         value: fromAmount,
       })}{' '}
       {step.action.fromToken.symbol}
       {showToAmount ? (
         <>
           <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
-          {t('format.number', {
+          {t('format.tokenAmount', {
             value: formatTokenAmount(
               BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
               step.execution?.toToken?.decimals ?? step.action.toToken.decimals
@@ -268,9 +269,11 @@ export const StepDetailsContent: React.FC<{
         </>
       ) : (
         ` (${t('format.currency', {
-          value:
-            Number.parseFloat(fromAmount) *
-            Number.parseFloat(step.action.fromToken.priceUSD),
+          value: formatTokenPrice(
+            fromAmount,
+            step.action.fromToken.priceUSD,
+            step.action.fromToken.decimals
+          ),
         })})`
       )}
     </Typography>

package/src/components/ToAddressRequiredMessage.tsx

@@ -36,7 +36,7 @@ export const ToAddressRequiredMessage: React.FC<
             </Typography>
           }
           icon={<Wallet />}
-          multilineTitle
+          multiline
         />
       </Box>
     </Collapse>

package/src/components/Token/Token.tsx

@@ -74,7 +74,11 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
   }
 
   const tokenAmount = formatTokenAmount(token.amount, token.decimals)
-  const tokenPrice = formatTokenPrice(tokenAmount, token.priceUSD)
+  const tokenPrice = formatTokenPrice(
+    token.amount,
+    token.priceUSD,
+    token.decimals
+  )
 
   let priceImpact: number | undefined = undefined
   let priceImpactPercent: number | undefined = undefined
@@ -127,6 +131,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
             display: 'flex',
             alignItems: 'center',
           }}
+          title={tokenAmount}
         >
           <TextFitter
             height={30}
@@ -134,7 +139,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
               fontWeight: 700,
             }}
           >
-            {t('format.number', {
+            {t('format.tokenAmount', {
               value: tokenAmount,
             })}
           </TextFitter>

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.14.0-beta.0'
+export const version = '3.14.0'