diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts index e66c8f3046e8..892a2977daf1 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts @@ -131,38 +131,6 @@ describe('useTokenValues', () => { }); }); -describe('roundDisplayValue', () => { - const TEST_CASES = [ - { value: 0, rounded: '0' }, - { value: 0.0000009, rounded: '<0.000001' }, - { value: 0.0000456, rounded: '0.000046' }, - { value: 0.0004567, rounded: '0.000457' }, - { value: 0.003456, rounded: '0.00346' }, - { value: 0.023456, rounded: '0.0235' }, - { value: 0.125456, rounded: '0.125' }, - { value: 1.0034, rounded: '1.003' }, - { value: 1.034, rounded: '1.034' }, - { value: 1.3034, rounded: '1.303' }, - { value: 7, rounded: '7' }, - { value: 7.1, rounded: '7.1' }, - { value: 12.0345, rounded: '12.03' }, - { value: 121.456, rounded: '121.5' }, - { value: 1034.123, rounded: '1034' }, - { value: 47361034.006, rounded: '47361034' }, - { value: 12130982923409.555, rounded: '12130982923410' }, - ]; - - // @ts-expect-error This is missing from the Mocha type definitions - it.each(TEST_CASES)( - 'Round $value to "$rounded"', - ({ value, rounded }: { value: number; rounded: string }) => { - const actual = roundDisplayValue(value); - - expect(actual).toEqual(rounded); - }, - ); -}); - describe('toNonScientificString', () => { const TEST_CASES = [ { scientific: 1.23e-5, expanded: '0.0000123' }, diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts index 6fb3c38629f4..f416282ee4ef 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts @@ -3,10 +3,13 @@ import { isHexString } from '@metamask/utils'; import { BigNumber } from 'bignumber.js'; import { isBoolean } from 'lodash'; import { useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; import { Numeric } from '../../../../../../../shared/modules/Numeric'; import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate'; +import { getIntlLocale } from '../../../../../../ducks/locale/locale'; import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter'; import { useAssetDetails } from '../../../../hooks/useAssetDetails'; +import { formatAmount } from '../../../simulation-details/formatAmount'; import { useDecodedTransactionData } from './useDecodedTransactionData'; export const useTokenValues = (transactionMeta: TransactionMeta) => { @@ -56,7 +59,11 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => { const fiatDisplayValue = fiatValue && fiatFormatter(fiatValue, { shorten: true }); - const displayTransferValue = roundDisplayValue(decodedTransferValue); + const locale = useSelector(getIntlLocale); + const displayTransferValue = formatAmount( + locale, + new BigNumber(decodedTransferValue), + ); return { decodedTransferValue: toNonScientificString(decodedTransferValue), @@ -66,31 +73,6 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => { }; }; -export function roundDisplayValue(decodedTransferValue: number): string { - switch (true) { - case decodedTransferValue === 0: - return '0'; - case decodedTransferValue < 0.000001: - return '<0.000001'; - case decodedTransferValue < 0.001: - return parseFloat(decodedTransferValue.toFixed(6)).toString(); - case decodedTransferValue < 0.01: - return parseFloat(decodedTransferValue.toFixed(5)).toString(); - case decodedTransferValue < 0.1: - return parseFloat(decodedTransferValue.toFixed(4)).toString(); - case decodedTransferValue < 10: - return parseFloat(decodedTransferValue.toFixed(3)).toString(); - case decodedTransferValue < 100: - return parseFloat(decodedTransferValue.toFixed(2)).toString(); - case decodedTransferValue < 1000: - return parseFloat(decodedTransferValue.toFixed(1)).toString(); - case decodedTransferValue < 10000: - return parseFloat(decodedTransferValue.toFixed(0)).toString(); - default: - return parseFloat(decodedTransferValue.toFixed(0)).toString(); - } -} - export function toNonScientificString(num: number): string { if (num >= 10e-18) { return num.toFixed(18).replace(/\.?0+$/u, ''); diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx index 5bb250ad74f0..fb2bdc1a9107 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx @@ -8,6 +8,7 @@ import { Text, } from '../../../../../../../components/component-library'; import Tooltip from '../../../../../../../components/ui/tooltip'; +import { getIntlLocale } from '../../../../../../../ducks/locale/locale'; import { AlignItems, BackgroundColor, @@ -17,10 +18,12 @@ import { TextColor, TextVariant, } from '../../../../../../../helpers/constants/design-system'; +import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay'; import { useI18nContext } from '../../../../../../../hooks/useI18nContext'; import { getWatchedToken } from '../../../../../../../selectors'; import { MultichainState } from '../../../../../../../selectors/multichain'; import { useConfirmContext } from '../../../../../context/confirm'; +import { formatAmountMaxPrecision } from '../../../../simulation-details/formatAmount'; import { useTokenValues } from '../../hooks/use-token-values'; import { useTokenDetails } from '../../hooks/useTokenDetails'; import { ConfirmLoader } from '../confirm-loader/confirm-loader'; @@ -29,6 +32,7 @@ const SendHeading = () => { const t = useI18nContext(); const { currentConfirmation: transactionMeta } = useConfirmContext(); + const locale = useSelector(getIntlLocale); const selectedToken = useSelector((state: MultichainState) => getWatchedToken(transactionMeta)(state), ); @@ -60,13 +64,8 @@ const SendHeading = () => { ); const TokenValue = - displayTransferValue === decodedTransferValue.toString() ? ( - {`${displayTransferValue} ${tokenSymbol || t('unknown')}`} - ) : ( + displayTransferValue === + `<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? ( { marginTop={3} >{`${displayTransferValue} ${tokenSymbol || t('unknown')}`} + ) : ( + {`${displayTransferValue} ${ + selectedToken?.symbol || t('unknown') + }`} ); const TokenFiatValue = fiatDisplayValue && (