wip

MetaMask · Oct 24, 2024 · c805139 · c805139
1 parent ce9f337
commit c805139
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 73 deletions.
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
@@ -5,11 +5,7 @@ import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderHookWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
 import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { useAssetDetails } from '../../../../hooks/useAssetDetails';
-import {
-  roundDisplayValue,
-  toNonScientificString,
-  useTokenValues,
-} from './use-token-values';
+import { toNonScientificString, useTokenValues } from './use-token-values';
 import { useDecodedTransactionData } from './useDecodedTransactionData';
 
 jest.mock('../../../../hooks/useAssetDetails', () => ({
@@ -131,38 +127,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
@@ -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
@@ -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,18 +18,19 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../../../../helpers/constants/design-system';
-import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
 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';
 
 const SendHeading = () => {
-  const t = useI18nContext();
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
+  const locale = useSelector(getIntlLocale);
   const selectedToken = useSelector((state: MultichainState) =>
     getWatchedToken(transactionMeta)(state),
   );
@@ -60,20 +62,21 @@ const SendHeading = () => {
   );
 
   const TokenValue =
-    displayTransferValue === decodedTransferValue.toString() ? (
-      <Text
-        variant={TextVariant.headingLg}
-        color={TextColor.inherit}
-        marginTop={3}
-      >{`${displayTransferValue} ${tokenSymbol || t('unknown')}`}</Text>
-    ) : (
+    displayTransferValue ===
+    `<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? (
       <Tooltip title={decodedTransferValue.toString()} position="right">
         <Text
           variant={TextVariant.headingLg}
           color={TextColor.inherit}
           marginTop={3}
-        >{`${displayTransferValue} ${tokenSymbol || t('unknown')}`}</Text>
+        >{`${displayTransferValue} ${tokenSymbol}`}</Text>
       </Tooltip>
+    ) : (
+      <Text
+        variant={TextVariant.headingLg}
+        color={TextColor.inherit}
+        marginTop={3}
+      >{`${displayTransferValue} ${tokenSymbol}`}</Text>
     );
 
   const TokenFiatValue = fiatDisplayValue && (