fix: Reduce usage of scientific notation

MetaMask · Oct 22, 2024 · 2394961 · 2394961
1 parent 81f4678
commit 2394961
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 16 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,7 +5,11 @@ 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 { useTokenValues } from './use-token-values';
+import {
+  roundDisplayValue,
+  toNonScientificString,
+  useTokenValues,
+} from './use-token-values';
 import { useDecodedTransactionData } from './useDecodedTransactionData';
 
 jest.mock('../../../../hooks/useAssetDetails', () => ({
@@ -73,7 +77,8 @@ describe('useTokenValues', () => {
     await waitForNextUpdate();
 
     expect(result.current).toEqual({
-      decodedTransferValue: 7,
+      decodedTransferValue: '7',
+      displayTransferValue: '7',
       fiatDisplayValue: '$6.37',
       pending: false,
     });
@@ -118,9 +123,60 @@ describe('useTokenValues', () => {
     await waitForNextUpdate();
 
     expect(result.current).toEqual({
-      decodedTransferValue: 7,
+      decodedTransferValue: '7',
+      displayTransferValue: '7',
       fiatDisplayValue: null,
       pending: false,
     });
   });
 });
+
+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' },
+    { scientific: 1e-10, expanded: '0.0000000001' },
+    { scientific: 1.23e-21, expanded: '1.23e-21' },
+  ];
+
+  // @ts-expect-error This is missing from the Mocha type definitions
+  it.each(TEST_CASES)(
+    'Expand $scientific to "$expanded"',
+    ({ scientific, expanded }: { scientific: number; expanded: string }) => {
+      const actual = toNonScientificString(scientific);
+
+      expect(actual).toEqual(expanded);
+    },
+  );
+});
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
@@ -56,9 +56,46 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
   const fiatDisplayValue =
     fiatValue && fiatFormatter(fiatValue, { shorten: true });
 
+  const displayTransferValue = roundDisplayValue(decodedTransferValue);
+
   return {
-    decodedTransferValue,
+    decodedTransferValue: toNonScientificString(decodedTransferValue),
+    displayTransferValue,
     fiatDisplayValue,
     pending,
   };
 };
+
+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, '');
+  }
+
+  // keep in scientific notation
+  return num.toString();
+}
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
@@ -23,6 +23,7 @@ import { useConfirmContext } from '../../../../../context/confirm';
 import { useTokenImage } from '../../hooks/use-token-image';
 import { useTokenValues } from '../../hooks/use-token-values';
 import { ConfirmLoader } from '../confirm-loader/confirm-loader';
+import Tooltip from '../../../../../../../components/ui/tooltip';
 
 const SendHeading = () => {
   const t = useI18nContext();
@@ -32,8 +33,12 @@ const SendHeading = () => {
     getWatchedToken(transactionMeta)(state),
   );
   const { tokenImage } = useTokenImage(transactionMeta, selectedToken);
-  const { decodedTransferValue, fiatDisplayValue, pending } =
-    useTokenValues(transactionMeta);
+  const {
+    decodedTransferValue,
+    displayTransferValue,
+    fiatDisplayValue,
+    pending,
+  } = useTokenValues(transactionMeta);
 
   const TokenImage = (
     <AvatarToken
@@ -51,21 +56,31 @@ const SendHeading = () => {
     />
   );
 
-  const TokenValue = (
-    <>
+  const TokenValue =
+    displayTransferValue === decodedTransferValue.toString() ? (
       <Text
         variant={TextVariant.headingLg}
         color={TextColor.inherit}
         marginTop={3}
-      >{`${decodedTransferValue || ''} ${
+      >{`${displayTransferValue} ${
         selectedToken?.symbol || t('unknown')
       }`}</Text>
-      {fiatDisplayValue && (
-        <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
-          {fiatDisplayValue}
-        </Text>
-      )}
-    </>
+    ) : (
+      <Tooltip title={decodedTransferValue.toString()} position="right">
+        <Text
+          variant={TextVariant.headingLg}
+          color={TextColor.inherit}
+          marginTop={3}
+        >{`${displayTransferValue} ${
+          selectedToken?.symbol || t('unknown')
+        }`}</Text>
+      </Tooltip>
+    );
+
+  const TokenFiatValue = fiatDisplayValue && (
+    <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
+      {fiatDisplayValue}
+    </Text>
   );
 
   if (pending) {
@@ -82,6 +97,7 @@ const SendHeading = () => {
     >
       {TokenImage}
       {TokenValue}
+      {TokenFiatValue}
     </Box>
   );
 };

diff --git a/...mations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap b/...mations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`TokenTransferInfo renders correctly 1`] = `
     <h2
       class="mm-box mm-text mm-text--heading-lg mm-box--margin-top-3 mm-box--color-inherit"
     >
-       Unknown
+      0 Unknown
     </h2>
   </div>
   <div