Display Unlimited for really large spending caps on Permit

Author: pedronfigueiredo

ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts

@@ -10,7 +10,7 @@ import { formatAmount } from '../../../../simulation-details/formatAmount';
 import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData';
 import { useIsNFT } from './use-is-nft';
 
-const UNLIMITED_THRESHOLD = 10 ** 15;
+export const UNLIMITED_THRESHOLD = 10 ** 15;
 
 function isSpendingCapUnlimited(decodedSpendingCap: number) {
   return decodedSpendingCap >= UNLIMITED_THRESHOLD;

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.test.tsx

@@ -78,6 +78,35 @@ const decodingDataBidding: DecodingDataStateChanges = [
 
 describe('DecodedSimulation', () => {
   it('renders component correctly', async () => {
+    const state = getMockTypedSignConfirmStateForRequest({
+      ...permitSignatureMsg,
+      decodingLoading: false,
+      decodingData: {
+        ...decodingData,
+        stateChanges: decodingData.stateChanges
+          ? [
+              {
+                ...decodingData.stateChanges[0],
+                amount: '12345',
+              },
+            ]
+          : [],
+      },
+    });
+
+    const mockStore = configureMockStore([])(state);
+
+    const { findByText } = renderWithConfirmContextProvider(
+      <PermitSimulation />,
+      mockStore,
+    );
+
+    expect(await findByText('Estimated changes')).toBeInTheDocument();
+    expect(await findByText('Spending cap')).toBeInTheDocument();
+    expect(await findByText('12,345')).toBeInTheDocument();
+  });
+
+  it('renders component correctly for a very large amount', async () => {
     const state = getMockTypedSignConfirmStateForRequest({
       ...permitSignatureMsg,
       decodingLoading: false,
@@ -92,7 +121,7 @@ describe('DecodedSimulation', () => {
 
     expect(await findByText('Estimated changes')).toBeInTheDocument();
     expect(await findByText('Spending cap')).toBeInTheDocument();
-    expect(await findByText('1,461,501,637,3...')).toBeInTheDocument();
+    expect(await findByText('Unlimited')).toBeInTheDocument();
   });
 
   it('render correctly for ERC712 token', async () => {

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/value-display/value-display.tsx

@@ -30,6 +30,8 @@ import {
 import Name from '../../../../../../../../components/app/name/name';
 import { TokenDetailsERC20 } from '../../../../../../utils/token';
 import { getAmountColors } from '../../../utils';
+import { useI18nContext } from '../../../../../../../../hooks/useI18nContext';
+import { UNLIMITED_THRESHOLD } from '../../../approve/hooks/use-approve-token-simulation';
 
 type PermitSimulationValueDisplayParams = {
   /** ID of the associated chain. */
@@ -69,6 +71,8 @@ const PermitSimulationValueDisplay: React.FC<
   credit,
   debit,
 }) => {
+  const t = useI18nContext();
+
   const exchangeRate = useTokenExchangeRate(tokenContract);
 
   const tokenDetails = useGetTokenStandardAndDetails(tokenContract);
@@ -88,18 +92,24 @@ const PermitSimulationValueDisplay: React.FC<
     return undefined;
   }, [exchangeRate, tokenDecimals, value]);
 
-  const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
-    if (!value || tokenId) {
-      return { tokenValue: null, tokenValueMaxPrecision: null };
-    }
+  const { tokenValue, tokenValueMaxPrecision, shouldShowUnlimitedValue } =
+    useMemo(() => {
+      if (!value || tokenId) {
+        return {
+          tokenValue: null,
+          tokenValueMaxPrecision: null,
+          shouldShowUnlimitedValue: false,
+        };
+      }
 
-    const tokenAmount = calcTokenAmount(value, tokenDecimals);
+      const tokenAmount = calcTokenAmount(value, tokenDecimals);
 
-    return {
-      tokenValue: formatAmount('en-US', tokenAmount),
-      tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
-    };
-  }, [tokenDecimals, value]);
+      return {
+        tokenValue: formatAmount('en-US', tokenAmount),
+        tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
+        shouldShowUnlimitedValue: Number(value) > UNLIMITED_THRESHOLD,
+      };
+    }, [tokenDecimals, value]);
 
   /** Temporary error capturing as we are building out Permit Simulations */
   if (!tokenContract) {
@@ -138,13 +148,15 @@ const PermitSimulationValueDisplay: React.FC<
             >
               {credit && '+ '}
               {debit && '- '}
-              {tokenValue !== null &&
-                shortenString(tokenValue || '', {
-                  truncatedCharLimit: 15,
-                  truncatedStartChars: 15,
-                  truncatedEndChars: 0,
-                  skipCharacterInEnd: true,
-                })}
+              {shouldShowUnlimitedValue
+                ? t('unlimited')
+                : tokenValue !== null &&
+                  shortenString(tokenValue || '', {
+                    truncatedCharLimit: 15,
+                    truncatedStartChars: 15,
+                    truncatedEndChars: 0,
+                    skipCharacterInEnd: true,
+                  })}
               {tokenId && `#${tokenId}`}
             </Text>
           </Tooltip>

ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap

@@ -486,7 +486,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                               data-testid="simulation-token-value"
                               style="padding-top: 1px; padding-bottom: 1px;"
                             >
-                              14,615,016,373,...
+                              Unlimited
                             </p>
                           </div>
                         </div>
@@ -539,7 +539,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                               data-testid="simulation-token-value"
                               style="padding-top: 1px; padding-bottom: 1px;"
                             >
-                              24,615,016,373,...
+                              Unlimited
                             </p>
                           </div>
                         </div>
@@ -1069,7 +1069,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                               data-testid="simulation-token-value"
                               style="padding-top: 1px; padding-bottom: 1px;"
                             >
-                              14,615,016,373,...
+                              Unlimited
                             </p>
                           </div>
                         </div>

ui/pages/confirmations/confirm/confirm.test.tsx

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -153,8 +153,11 @@ describe('Confirm', () => {
       const { container, findAllByText } =
         await renderWithConfirmContextProvider(<Confirm />, mockStore);
 
-      const valueElement = await findAllByText('14,615,016,373,...');
-      expect(valueElement[0]).toBeInTheDocument();
+      await waitFor(async () => {
+        const element = await findAllByText('Unlimited');
+        expect(element[0]).toBeInTheDocument();
+      });
+
       expect(container).toMatchSnapshot();
     });
   });
@@ -177,8 +180,11 @@ describe('Confirm', () => {
       const { container, findAllByText } =
         await renderWithConfirmContextProvider(<Confirm />, mockStore);
 
-      const valueElement = await findAllByText('14,615,016,373,...');
-      expect(valueElement[0]).toBeInTheDocument();
+      await waitFor(async () => {
+        const element = await findAllByText('Unlimited');
+        expect(element[0]).toBeInTheDocument();
+      });
+
       expect(container).toMatchSnapshot();
     });
   });