Fix typed sign message display in dark mode

MetaMask · Feb 13, 2025 · 308c0e4 · 308c0e4
1 parent 196be84
commit 308c0e4
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 56 deletions.
diff --git a/...ts/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx b/...ts/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import Avatar, {
@@ -9,6 +9,7 @@ import Avatar, {
 import Badge, {
   BadgeVariant,
 } from '../../../../../../../component-library/components/Badges/Badge';
+import Text from '../../../../../../../component-library/components/Texts/Text';
 import BadgeWrapper from '../../../../../../../component-library/components/Badges/BadgeWrapper';
 import { useStyles } from '../../../../../../../component-library/hooks';
 import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';

diff --git a/app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.tsx b/app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.tsx
@@ -1,11 +1,12 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { Text, View, Linking, TouchableOpacity } from 'react-native';
+import { View, Linking, TouchableOpacity } from 'react-native';
 import { UR } from '@ngraveio/bc-ur';
 import { stringify as uuidStringify } from 'uuid';
 import { ETHSignature } from '@keystonehq/bc-ur-registry-eth';
 
 import { strings } from '../../../../../../../../locales/i18n';
 import Engine from '../../../../../../../core/Engine';
+import Text from '../../../../../../../component-library/components/Texts/Text';
 import AnimatedQRCode from '../../../../../../UI/QRHardware/AnimatedQRCode';
 import AnimatedQRScannerModal from '../../../../../../UI/QRHardware/AnimatedQRScanner';
 import Alert, { AlertType } from '../../../../../../Base/Alert';

diff --git a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx
@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
 import { Hex, isValidHexAddress } from '@metamask/utils';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 
 import { strings } from '../../../../../../../../locales/i18n';
 import { useSignatureRequest } from '../../../../hooks/useSignatureRequest';
+import Text from '../../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../../component-library/hooks';
 import { useTypedSignSimulationEnabled } from '../../../../hooks/useTypedSignSimulationEnabled';
 import { parseSanitizeTypedDataMessage } from '../../../../utils/signature';

diff --git a/...onfirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx b/...onfirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Text,TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { Hex } from '@metamask/utils';
 import { BigNumber } from 'bignumber.js';
@@ -11,7 +11,11 @@ import { useTheme } from '../../../../../../../../../../util/theme';
 import ButtonPill from '../../../../../../../../../../component-library/components-temp/Buttons/ButtonPill/ButtonPill';
 import { ButtonIconSizes } from '../../../../../../../../../../component-library/components/Buttons/ButtonIcon/ButtonIcon.types';
 import ButtonIcon from '../../../../../../../../../../component-library/components/Buttons/ButtonIcon/ButtonIcon';
-import { IconName , IconColor } from '../../../../../../../../../../component-library/components/Icons/Icon';
+import {
+  IconName,
+  IconColor,
+} from '../../../../../../../../../../component-library/components/Icons/Icon';
+import Text from '../../../../../../../../../../component-library/components/Texts/Text';
 
 import AssetPill from '../../../../../../../../../UI/SimulationDetails/AssetPill/AssetPill';
 import { IndividualFiatDisplay } from '../../../../../../../../../UI/SimulationDetails/FiatDisplay/FiatDisplay';
@@ -66,15 +70,25 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
     selectConversionRateByChainId(state, chainId),
   );
 
-  const tokenAmount = isNumberValue(value) ? calcTokenAmount(value, NATIVE_DECIMALS) : null;
-  const isValidTokenAmount = tokenAmount !== null && tokenAmount !== undefined && tokenAmount instanceof BigNumber;
-
-  const fiatValue = isValidTokenAmount && conversionRate
-    ? tokenAmount.times(String(conversionRate)).toNumber()
-    : undefined;
-
-  const tokenValue = isValidTokenAmount ? formatAmount('en-US', tokenAmount) : null;
-  const tokenValueMaxPrecision = isValidTokenAmount ? formatAmountMaxPrecision('en-US', tokenAmount) : null;
+  const tokenAmount = isNumberValue(value)
+    ? calcTokenAmount(value, NATIVE_DECIMALS)
+    : null;
+  const isValidTokenAmount =
+    tokenAmount !== null &&
+    tokenAmount !== undefined &&
+    tokenAmount instanceof BigNumber;
+
+  const fiatValue =
+    isValidTokenAmount && conversionRate
+      ? tokenAmount.times(String(conversionRate)).toNumber()
+      : undefined;
+
+  const tokenValue = isValidTokenAmount
+    ? formatAmount('en-US', tokenAmount)
+    : null;
+  const tokenValueMaxPrecision = isValidTokenAmount
+    ? formatAmountMaxPrecision('en-US', tokenAmount)
+    : null;
 
   function handlePressTokenValue() {
     setHasValueModalOpen(true);
@@ -88,19 +102,22 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
             onPress={handlePressTokenValue}
             onPressIn={handlePressTokenValue}
             onPressOut={handlePressTokenValue}
-            style={[credit && styles.valueIsCredit, debit && styles.valueIsDebit]}
-            >
-              <Text>
-                {credit && '+ '}
-                {debit && '- '}
-                {tokenValue !== null &&
-                  shortenString(tokenValue || '', {
-                    truncatedCharLimit: 15,
-                    truncatedStartChars: 15,
-                    truncatedEndChars: 0,
-                    skipCharacterInEnd: true,
-                  })}
-              </Text>
+            style={[
+              credit && styles.valueIsCredit,
+              debit && styles.valueIsDebit,
+            ]}
+          >
+            <Text>
+              {credit && '+ '}
+              {debit && '- '}
+              {tokenValue !== null &&
+                shortenString(tokenValue || '', {
+                  truncatedCharLimit: 15,
+                  truncatedStartChars: 15,
+                  truncatedEndChars: 0,
+                  skipCharacterInEnd: true,
+                })}
+            </Text>
           </ButtonPill>
           <View style={styles.marginStart4}>
             <AssetPill asset={{ chainId, type: AssetType.Native }} />
@@ -117,35 +134,35 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
         )}
       </View>
       {hasValueModalOpen && (
-          /**
-           * TODO replace BottomModal instances with BottomSheet
-           * {@see {@link https://github.com/MetaMask/metamask-mobile/issues/12656}}
-           */
-          <BottomModal onClose={() => setHasValueModalOpen(false)}>
-            <TouchableOpacity
-              activeOpacity={1}
-              onPress={() => setHasValueModalOpen(false)}
-            >
-              <View style={styles.valueModal} >
-                <View style={styles.valueModalHeader}>
-                  <ButtonIcon
-                    iconColor={IconColor.Default}
-                    size={ButtonIconSizes.Sm}
-                    style={styles.valueModalHeaderIcon}
-                    onPress={() => setHasValueModalOpen(false)}
-                    iconName={IconName.ArrowLeft}
-                  />
-                  <Text style={styles.valueModalHeaderText}>
-                    {modalHeaderText}
-                  </Text>
-                </View>
-                <Text style={styles.valueModalText}>
-                  {tokenValueMaxPrecision}
+        /**
+         * TODO replace BottomModal instances with BottomSheet
+         * {@see {@link https://github.com/MetaMask/metamask-mobile/issues/12656}}
+         */
+        <BottomModal onClose={() => setHasValueModalOpen(false)}>
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={() => setHasValueModalOpen(false)}
+          >
+            <View style={styles.valueModal}>
+              <View style={styles.valueModalHeader}>
+                <ButtonIcon
+                  iconColor={IconColor.Default}
+                  size={ButtonIconSizes.Sm}
+                  style={styles.valueModalHeaderIcon}
+                  onPress={() => setHasValueModalOpen(false)}
+                  iconName={IconName.ArrowLeft}
+                />
+                <Text style={styles.valueModalHeaderText}>
+                  {modalHeaderText}
                 </Text>
               </View>
-            </TouchableOpacity>
-          </BottomModal>
-        )}
+              <Text style={styles.valueModalText}>
+                {tokenValueMaxPrecision}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </BottomModal>
+      )}
     </View>
   );
 };

diff --git a/...iews/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx b/...iews/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx
@@ -1,8 +1,9 @@
 import React, { ReactNode } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
 
 import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import { strings } from '../../../../../../../locales/i18n';
+import Text from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import CopyButton from '../../UI/CopyButton';
 import ExpandableSection from '../../UI/ExpandableSection';

diff --git a/app/components/Views/confirmations/components/Confirm/Title/Title.tsx b/app/components/Views/confirmations/components/Confirm/Title/Title.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { SignatureRequest } from '@metamask/signature-controller';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { TransactionType } from '@metamask/transaction-controller';
 
 import { strings } from '../../../../../../../locales/i18n';
 import { useStyles } from '../../../../../../component-library/hooks';
+import Text from '../../../../../../component-library/components/Texts/Text';
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
 import { isSIWESignatureRequest } from '../../../utils/signature';
 import { useSignatureRequest } from '../../../hooks/useSignatureRequest';