Add for native value display

Author: pedronfigueiredo

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

@@ -1,30 +1,31 @@
-import { BigNumber } from 'bignumber.js';
 import { Hex } from '@metamask/utils';
+import { BigNumber } from 'bignumber.js';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-
 import { TokenStandard } from '../../../../../../../../../shared/constants/transaction';
 import { calcTokenAmount } from '../../../../../../../../../shared/lib/transactions-controller-utils';
 import {
   Box,
   Text,
 } from '../../../../../../../../components/component-library';
+import Tooltip from '../../../../../../../../components/ui/tooltip';
 import {
   BlockSize,
   BorderRadius,
   Display,
   JustifyContent,
   TextAlign,
 } from '../../../../../../../../helpers/constants/design-system';
-import Tooltip from '../../../../../../../../components/ui/tooltip';
 import { shortenString } from '../../../../../../../../helpers/utils/util';
+import { useI18nContext } from '../../../../../../../../hooks/useI18nContext';
 import { selectConversionRateByChainId } from '../../../../../../../../selectors';
 import { AssetPill } from '../../../../../simulation-details/asset-pill';
+import { IndividualFiatDisplay } from '../../../../../simulation-details/fiat-display';
 import {
   formatAmount,
   formatAmountMaxPrecision,
 } from '../../../../../simulation-details/formatAmount';
-import { IndividualFiatDisplay } from '../../../../../simulation-details/fiat-display';
+import { UNLIMITED_THRESHOLD } from '../../../approve/hooks/use-approve-token-simulation';
 import { getAmountColors } from '../../../utils';
 
 const NATIVE_DECIMALS = 18;
@@ -49,13 +50,24 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
   credit,
   debit,
 }) => {
+  const t = useI18nContext();
+
   const conversionRate = useSelector((state) =>
     selectConversionRateByChainId(state, chainId),
   );
 
-  const { fiatValue, tokenValue, tokenValueMaxPrecision } = useMemo(() => {
+  const {
+    fiatValue,
+    tokenValue,
+    tokenValueMaxPrecision,
+    shouldShowUnlimitedValue,
+  } = useMemo(() => {
     if (!value) {
-      return { tokenValue: null, tokenValueMaxPrecision: null };
+      return {
+        tokenValue: null,
+        tokenValueMaxPrecision: null,
+        shouldShowUnlimitedValue: false,
+      };
     }
 
     const tokenAmount = calcTokenAmount(value, NATIVE_DECIMALS);
@@ -66,6 +78,7 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
         : undefined,
       tokenValue: formatAmount('en-US', tokenAmount),
       tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
+      shouldShowUnlimitedValue: Number(value) > UNLIMITED_THRESHOLD,
     };
   }, [conversionRate, value]);
 
@@ -96,13 +109,15 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
             >
               {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,
+                  })}
             </Text>
           </Tooltip>
         </Box>

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

@@ -1,20 +1,11 @@
-import React, { useMemo } from 'react';
 import { NameType } from '@metamask/name-controller';
 import { Hex } from '@metamask/utils';
 import { captureException } from '@sentry/browser';
-
+import React, { useMemo } from 'react';
 import { MetaMetricsEventLocation } from '../../../../../../../../../shared/constants/metametrics';
-import { shortenString } from '../../../../../../../../helpers/utils/util';
 import { calcTokenAmount } from '../../../../../../../../../shared/lib/transactions-controller-utils';
 import useTokenExchangeRate from '../../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
-import { IndividualFiatDisplay } from '../../../../../simulation-details/fiat-display';
-import {
-  formatAmount,
-  formatAmountMaxPrecision,
-} from '../../../../../simulation-details/formatAmount';
-import { useGetTokenStandardAndDetails } from '../../../../../../hooks/useGetTokenStandardAndDetails';
-import useTrackERC20WithoutDecimalInformation from '../../../../../../hooks/useTrackERC20WithoutDecimalInformation';
-
+import Name from '../../../../../../../../components/app/name/name';
 import {
   Box,
   Text,
@@ -27,11 +18,18 @@ import {
   JustifyContent,
   TextAlign,
 } from '../../../../../../../../helpers/constants/design-system';
-import Name from '../../../../../../../../components/app/name/name';
-import { TokenDetailsERC20 } from '../../../../../../utils/token';
-import { getAmountColors } from '../../../utils';
+import { shortenString } from '../../../../../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../../../../../hooks/useI18nContext';
+import { useGetTokenStandardAndDetails } from '../../../../../../hooks/useGetTokenStandardAndDetails';
+import useTrackERC20WithoutDecimalInformation from '../../../../../../hooks/useTrackERC20WithoutDecimalInformation';
+import { TokenDetailsERC20 } from '../../../../../../utils/token';
+import { IndividualFiatDisplay } from '../../../../../simulation-details/fiat-display';
+import {
+  formatAmount,
+  formatAmountMaxPrecision,
+} from '../../../../../simulation-details/formatAmount';
 import { UNLIMITED_THRESHOLD } from '../../../approve/hooks/use-approve-token-simulation';
+import { getAmountColors } from '../../../utils';
 
 type PermitSimulationValueDisplayParams = {
   /** ID of the associated chain. */