@lifi/widget 3.13.2 → 3.14.0

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.13.2",
+  "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",
@@ -30,30 +30,29 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.0.7",
-    "@bigmi/core": "^0.0.7",
+    "@bigmi/client": "^0.1.0",
+    "@bigmi/core": "^0.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.4.4",
+    "@lifi/sdk": "^3.5.2",
     "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.21",
-    "@mui/material": "^6.3.0",
-    "@mui/system": "^6.3.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",
-    "i18next": "^24.2.0",
+    "i18next": "^24.2.1",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.2.0",
-    "react-intersection-observer": "^9.14.0",
+    "react-i18next": "^15.4.0",
+    "react-intersection-observer": "^9.15.1",
     "react-router-dom": "^6.28.0",
-    "viem": "^2.21.57",
-    "zustand": "^5.0.2",
-    "@lifi/wallet-management": "^3.5.2"
+    "viem": "^2.22.11",
+    "zustand": "^5.0.3",
+    "@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/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/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount, useWalletMenu } from '@lifi/wallet-management'
-import { LoadingButton } from '@mui/lab'
+import { Button } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -39,7 +39,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   }
 
   return (
-    <LoadingButton
+    <Button
       variant="contained"
       color="primary"
       onClick={handleClick}
@@ -49,6 +49,6 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       fullWidth
     >
       {getButtonText()}
-    </LoadingButton>
+    </Button>
   )
 }

package/src/components/ButtonTertiary.tsx

@@ -1,8 +1,7 @@
-import { LoadingButton, loadingButtonClasses } from '@mui/lab'
-import { styled } from '@mui/material'
+import { Button, buttonClasses, styled } from '@mui/material'
 import { getContrastAlphaColor } from '../utils/colors.js'
 
-export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
+export const ButtonTertiary = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
   height: 40,
   fontSize: 14,
@@ -10,10 +9,10 @@ export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
   '&:hover, &:active': {
     backgroundColor: getContrastAlphaColor(theme, 0.08),
   },
-  [`&.${loadingButtonClasses.loading}:disabled`]: {
+  [`&.${buttonClasses.loading}:disabled`]: {
     backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
-  [`.${loadingButtonClasses.loadingIndicator}`]: {
+  [`.${buttonClasses.loadingIndicator}`]: {
     color: theme.palette.text.primary,
   },
 }))

package/src/components/Card/CardLabel.tsx

@@ -13,7 +13,6 @@ export const CardLabel = styled(Box, {
   minWidth: 24,
   userSelect: 'none',
   fontSize: '1rem',
-  marginRight: theme.spacing(1),
   backgroundColor: blend(
     theme.palette.background.paper,
     theme.palette.common.white,

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

@@ -14,6 +14,7 @@ import { Token } from '../Token/Token.js'
 import { TokenContainer } from './RouteCard.style.js'
 import { RouteCardEssentials } from './RouteCardEssentials.js'
 import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded.js'
+import { getMatchingLabels } from './getMatchingLabels.js'
 import type { RouteCardProps } from './types.js'
 
 export const RouteCard: React.FC<
@@ -26,7 +27,7 @@ export const RouteCard: React.FC<
   ...other
 }) => {
   const { t } = useTranslation()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const { subvariant, subvariantOptions, routeLabels } = useWidgetConfig()
   const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -43,6 +44,7 @@ export const RouteCard: React.FC<
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : undefined
 
+  const customLabels = getMatchingLabels(route, routeLabels)
   const tags = route.tags?.filter(
     (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
   )
@@ -53,12 +55,15 @@ export const RouteCard: React.FC<
         flex: 1,
       }}
     >
-      {subvariant !== 'refuel' && route.tags?.length ? (
+      {subvariant !== 'refuel' &&
+      (route.tags?.length || customLabels.length) ? (
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
             mb: 2,
+            gap: 1,
+            flexWrap: 'wrap',
           }}
         >
           {tags?.length ? (
@@ -68,6 +73,11 @@ export const RouteCard: React.FC<
               </CardLabelTypography>
             </CardLabel>
           ) : null}
+          {customLabels.map((label, index) => (
+            <CardLabel key={index} sx={label.sx}>
+              <CardLabelTypography>{label.text}</CardLabelTypography>
+            </CardLabel>
+          ))}
         </Box>
       ) : null}
       <TokenContainer>

package/src/components/RouteCard/getMatchingLabels.ts

@@ -0,0 +1,53 @@
+import type { Route } from '@lifi/sdk'
+import type { RouteLabel, RouteLabelRule } from '../../types/widget.js'
+import { isItemAllowed } from '../../utils/item.js'
+
+export const getMatchingLabels = (
+  route: Route,
+  routeLabels?: RouteLabelRule[]
+): RouteLabel[] => {
+  if (!routeLabels?.length) {
+    return []
+  }
+
+  return routeLabels
+    .filter((rule) => {
+      const conditions: boolean[] = []
+
+      // Check bridge/exchange matches if specified
+      if (rule.bridges || rule.exchanges) {
+        const toolNames = route.steps.flatMap((step) =>
+          step.includedSteps.map((s) => s.tool)
+        )
+        conditions.push(
+          toolNames.some(
+            (toolName) =>
+              isItemAllowed(toolName, rule.bridges) &&
+              isItemAllowed(toolName, rule.exchanges)
+          )
+        )
+      }
+
+      // Check token matches if specified
+      if (rule.fromTokenAddress?.length) {
+        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))
+      }
+
+      if (rule.toTokenAddress?.length) {
+        conditions.push(rule.toTokenAddress.includes(route.toToken.address))
+      }
+
+      // Check chain matches if specified
+      if (rule.fromChainId?.length) {
+        conditions.push(rule.fromChainId.includes(route.fromChainId))
+      }
+
+      if (rule.toChainId?.length) {
+        conditions.push(rule.toChainId.includes(route.toChainId))
+      }
+
+      // Must have at least one condition and all conditions must be true
+      return conditions.length && conditions.every(Boolean)
+    })
+    .map((rule) => rule.label)
+}

package/src/components/Step/Step.tsx

@@ -27,36 +27,47 @@ export const Step: React.FC<{
   )
 
   const getCardTitle = () => {
+    const hasBridgeStep = step.includedSteps.some(
+      (step) => step.type === 'cross'
+    )
+    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')
+    const hasCustomStep = step.includedSteps.some(
+      (step) => step.type === 'custom'
+    )
+
+    const isCustomVariant = hasCustomStep && subvariant === 'custom'
+
     switch (step.type) {
       case 'lifi': {
-        const hasBridgeStep = step.includedSteps.some(
-          (step) => step.type === 'cross'
-        )
-        const hasSwapStep = step.includedSteps.some(
-          (step) => step.type === 'swap'
-        )
         if (hasBridgeStep && hasSwapStep) {
-          return subvariant === 'custom'
+          return isCustomVariant
             ? subvariantOptions?.custom === 'deposit'
               ? t('main.stepBridgeAndDeposit')
               : t('main.stepBridgeAndBuy')
             : t('main.stepSwapAndBridge')
         }
         if (hasBridgeStep) {
-          return subvariant === 'custom'
+          return isCustomVariant
             ? subvariantOptions?.custom === 'deposit'
               ? t('main.stepBridgeAndDeposit')
               : t('main.stepBridgeAndBuy')
             : t('main.stepBridge')
         }
-        return subvariant === 'custom'
+        if (hasSwapStep) {
+          return isCustomVariant
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepSwapAndDeposit')
+              : t('main.stepSwapAndBuy')
+            : t('main.stepSwap')
+        }
+        return isCustomVariant
           ? subvariantOptions?.custom === 'deposit'
-            ? t('main.stepSwapAndDeposit')
-            : t('main.stepSwapAndBuy')
+            ? t('main.stepDeposit')
+            : t('main.stepBuy')
           : t('main.stepSwap')
       }
       default:
-        return subvariant === 'custom'
+        return isCustomVariant
           ? subvariantOptions?.custom === 'deposit'
             ? t('main.stepDeposit')
             : t('main.stepBuy')

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>