fix: Permit ellipsis should use max 15 char

MetaMask · Aug 16, 2024 · 8e30f0a · 8e30f0a
1 parent 54b3237
commit 8e30f0a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 64 deletions.
diff --git a/ui/components/app/confirm/info/row/text-token-units.test.tsx b/ui/components/app/confirm/info/row/text-token-units.test.tsx
@@ -40,7 +40,7 @@ describe('ConfirmInfoRowTextTokenUnits', () => {
       <ConfirmInfoRowTextTokenUnits value={value} decimals={decimals} />,
     );
 
-    expect(getByText('30,001,231,231,212')).toBeInTheDocument();
+    expect(getByText('30,001,231,231,...')).toBeInTheDocument();
   });
 
   it('renders the value with the correct formatted number and ellipsis', () => {
@@ -50,6 +50,6 @@ describe('ConfirmInfoRowTextTokenUnits', () => {
       <ConfirmInfoRowTextTokenUnits value={value} decimals={decimals} />,
     );
 
-    expect(getByText('3,000,123,123,121,23...')).toBeInTheDocument();
+    expect(getByText('3,000,123,123,1...')).toBeInTheDocument();
   });
 });
diff --git a/ui/components/app/confirm/info/row/text-token-units.tsx b/ui/components/app/confirm/info/row/text-token-units.tsx
@@ -3,10 +3,10 @@ import { BigNumber } from 'bignumber.js';
 
 import { calcTokenAmount } from '../../../../../../shared/lib/transactions-controller-utils';
 import {
-  ellipsisAmountText,
   formatAmount,
   formatAmountMaxPrecision,
 } from '../../../../../pages/confirmations/components/simulation-details/formatAmount';
+import { shortenString } from '../../../../../helpers/utils/util';
 import { ConfirmInfoRowText } from './text';
 
 type ConfirmInfoRowTextTokenUnitsProps = {
@@ -24,7 +24,12 @@ export const ConfirmInfoRowTextTokenUnits: React.FC<
 
   return (
     <ConfirmInfoRowText
-      text={ellipsisAmountText(tokenText)}
+      text={shortenString(tokenText, {
+        truncatedCharLimit: 15,
+        truncatedStartChars: 15,
+        truncatedEndChars: 0,
+        skipCharacterInEnd: true,
+      })}
       tooltip={tokenTextMaxPrecision}
     />
   );

diff --git a/.../confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/.../confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -10,6 +10,7 @@ import {
   ConfirmInfoRow,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
+import { shortenString } from '../../../../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../../selectors';
 import { Box, Text } from '../../../../../../../components/component-library';
@@ -25,7 +26,6 @@ import { SignatureRequestType } from '../../../../../types/confirm';
 import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
 import {
-  ellipsisAmountText,
   formatAmount,
   formatAmountMaxPrecision,
 } from '../../../../simulation-details/formatAmount';
@@ -95,7 +95,12 @@ const PermitSimulation: React.FC<{
                   paddingInline={2}
                   textAlign={TextAlign.Center}
                 >
-                  {ellipsisAmountText(tokenValue || '')}
+                  {shortenString(tokenValue || '', {
+                    truncatedCharLimit: 15,
+                    truncatedStartChars: 15,
+                    truncatedEndChars: 0,
+                    skipCharacterInEnd: true,
+                  })}
                 </Text>
               </Tooltip>
             </Box>

diff --git a/ui/pages/confirmations/components/simulation-details/formatAmount.test.ts b/ui/pages/confirmations/components/simulation-details/formatAmount.test.ts
@@ -1,24 +1,7 @@
 import { BigNumber } from 'bignumber.js';
-import { ellipsisAmountText, formatAmount } from './formatAmount';
+import { formatAmount } from './formatAmount';
 
 describe('formatAmount', () => {
-  describe('#ellipsisAmountText', () => {
-    const MOCK_MAX_LEFT_DIGITS = 15;
-
-    // @ts-expect-error This is missing from the Mocha type definitions
-    it.each([
-      ['1.003', '1.003'],
-      ['1,034', '1,034'],
-      ['1,213,098,292,340,945', '1,213,098,292,340,94...'],
-      ['30,001,231,231,212,312,138,768', '30,001,231,231,212,3...'],
-    ])(
-      'formats amount greater than or equal to 1 with appropriate decimal precision (%s => %s)',
-      (amount: string, expected: string) => {
-        expect(ellipsisAmountText(amount, MOCK_MAX_LEFT_DIGITS)).toBe(expected);
-      },
-    );
-  });
-
   describe('#formatAmount', () => {
     const locale = 'en-US';
 

diff --git a/ui/pages/confirmations/components/simulation-details/formatAmount.ts b/ui/pages/confirmations/components/simulation-details/formatAmount.ts
@@ -4,51 +4,11 @@ import {
   DEFAULT_PRECISION,
 } from '../../../../hooks/useCurrencyDisplay';
 
-const MAX_ELLIPSIS_LEFT_DIGITS = 15;
-
 // The number of significant decimals places to show for amounts less than 1.
 const MAX_SIGNIFICANT_DECIMAL_PLACES = 3;
 
 const ZERO_DISPLAY = '0';
 
-/**
- * This function receives an formatted number and will append an ellipsis if the number of digits
- * is greater than MAX_LEFT_DIGITS. Currently, we're only supporting en-US format. When we support
- * i18n numbers, we'll need to update this method to support i18n.
- *
- * This method has been designed to receive results of formatAmount.
- *
- * There is no need to format the decimal portion because formatAmount shaves the portions off
- * accordingly.
- *
- * @param amountText
- * @param maxLeftDigits
- */
-export function ellipsisAmountText(
-  amountText: string,
-  maxLeftDigits: number = MAX_ELLIPSIS_LEFT_DIGITS,
-): string {
-  const [integerPart] = amountText.split('.');
-  const cleanIntegerPart = integerPart.replace(/,/gu, '');
-
-  if (cleanIntegerPart.length > maxLeftDigits) {
-    let result = '';
-    let digitCount = 0;
-
-    for (let i = 0; digitCount < maxLeftDigits; i++) {
-      const integerChar = integerPart[i];
-      result += integerChar;
-      if (integerChar !== ',') {
-        digitCount += 1;
-      }
-    }
-
-    return `${result}...`;
-  }
-
-  return amountText;
-}
-
 export function formatAmountMaxPrecision(
   locale: string,
   num: number | BigNumber,