refactor: parse signTypedData logic

app/components/Views/confirmations/components/info/personal-sign/message.tsx

@@ -8,7 +8,7 @@ import Text from '../../../../../../component-library/components/Texts/Text';
 import { Theme } from '../../../../../../util/theme/models';
 import { fontStyles } from '../../../../../../styles/common';
 import { useStyles } from '../../../../../../component-library/hooks';
-import { sanitizeString } from '../../../../../../util/string';
+import { escapeSpecialUnicode } from '../../../../../../util/string';
 import { getSIWEDetails, SIWEMessage } from '../../../utils/signature';
 import { useSignatureRequest } from '../../../hooks/signatures/useSignatureRequest';
 import Address from '../../UI/info-row/info-value/address';
@@ -104,7 +104,7 @@ const Message = () => {
     if (!signatureRequest?.messageParams?.data) {
       return '';
     }
-    return sanitizeString(
+    return escapeSpecialUnicode(
       hexToText(signatureRequest?.messageParams?.data as string),
     );
   }, [signatureRequest?.messageParams?.data]);

app/components/Views/confirmations/components/info/typed-sign-v3v4/info-section-origin-and-details/info-section-origin-and-details.tsx

@@ -8,7 +8,10 @@ import { InfoRowDivider } from '../../../UI/info-row/divider';
 import InfoSection from '../../../UI/info-row/info-section';
 import InfoRowAddress from '../../../UI/info-row/info-value/address';
 import DisplayURL from '../../../UI/info-row/info-value/display-url';
-import { isRecognizedPermit, parseTypedDataMessageFromSignatureRequest } from '../../../../utils/signature';
+import {
+  isRecognizedPermit,
+  parseAndNormalizeSignTypedDataFromSignatureRequest,
+} from '../../../../utils/signature';
 import { useSignatureRequest } from '../../../../hooks/signatures/useSignatureRequest';
 import useApprovalRequest from '../../../../hooks/useApprovalRequest';
 import { View } from 'react-native';
@@ -26,9 +29,9 @@ export const InfoSectionOriginAndDetails = () => {
   const signatureRequest = useSignatureRequest();
   const isPermit = isRecognizedPermit(signatureRequest);
 
-  const parsedMessage = parseTypedDataMessageFromSignatureRequest(signatureRequest);
-  const spender = parsedMessage?.message?.spender;
-  const verifyingContract = parsedMessage?.domain?.verifyingContract;
+  const parsedData = parseAndNormalizeSignTypedDataFromSignatureRequest(signatureRequest);
+  const spender = parsedData.message?.spender;
+  const verifyingContract = parsedData.domain?.verifyingContract;
 
   if (!signatureRequest) {
     return null;
@@ -57,13 +60,10 @@ export const InfoSectionOriginAndDetails = () => {
         <DisplayURL url={origin} />
       </InfoRow>
       {isValidAddress(verifyingContract) && (
-          <InfoRow label={strings('confirm.label.interacting_with')}>
-            <InfoRowAddress
-              address={verifyingContract}
-              chainId={chainId}
-            />
-          </InfoRow>
-        )}
+        <InfoRow label={strings('confirm.label.interacting_with')}>
+          <InfoRowAddress address={verifyingContract} chainId={chainId} />
+        </InfoRow>
+      )}
     </InfoSection>
   );
 };

app/components/Views/confirmations/components/info/typed-sign-v3v4/message.tsx

@@ -7,7 +7,7 @@ import { useSignatureRequest } from '../../../hooks/signatures/useSignatureReque
 import Text from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import { useTypedSignSimulationEnabled } from '../../../hooks/signatures/useTypedSignSimulationEnabled';
-import { parseSanitizeTypedDataMessage } from '../../../utils/signature';
+import { parseNormalizeAndSanitizeSignTypedData } from '../../../utils/signature';
 import InfoRow from '../../UI/info-row';
 import { useTokenDecimalsInTypedSignRequest } from '../../../hooks/signatures/useTokenDecimalsInTypedSignRequest';
 import DataTree from '../../data-tree';
@@ -51,7 +51,7 @@ const Message = () => {
     sanitizedMessage,
     primaryType,
   } = useMemo(
-    () => parseSanitizeTypedDataMessage(typedSignData),
+    () => parseNormalizeAndSanitizeSignTypedData(typedSignData),
     [typedSignData],
   );
 

app/components/Views/confirmations/components/info/typed-sign-v3v4/simulation/typed-sign-permit/typed-sign-permit.tsx

@@ -8,7 +8,7 @@ import Engine from '../../../../../../../../core/Engine';
 import { safeToChecksumAddress } from '../../../../../../../../util/address';
 import { PrimaryType } from '../../../../../constants/signatures';
 import { useSignatureRequest } from '../../../../../hooks/signatures/useSignatureRequest';
-import { isPermitDaiRevoke, parseTypedDataMessage } from '../../../../../utils/signature';
+import { isPermitDaiRevoke, parseAndNormalizeSignTypedData } from '../../../../../utils/signature';
 import InfoRow from '../../../../UI/info-row';
 import InfoSection from '../../../../UI/info-row/info-section';
 import PermitSimulationValueDisplay from '../components/value-display';
@@ -74,7 +74,7 @@ const PermitSimulation = () => {
     message,
     message: { allowed, tokenId, value },
     primaryType,
-  } = parseTypedDataMessage(msgData as string);
+  } = parseAndNormalizeSignTypedData(msgData as string);
 
   const tokenDetails = extractTokenDetailsByPrimaryType(message, primaryType);
 

app/components/Views/confirmations/components/title/title.tsx

@@ -12,7 +12,12 @@ import useApprovalRequest from '../../hooks/useApprovalRequest';
 import { useSignatureRequest } from '../../hooks/signatures/useSignatureRequest';
 import { useStandaloneConfirmation } from '../../hooks/ui/useStandaloneConfirmation';
 import { useTransactionMetadataRequest } from '../../hooks/transactions/useTransactionMetadataRequest';
-import { isPermitDaiRevoke, isRecognizedPermit, isSIWESignatureRequest, parseTypedDataMessageFromSignatureRequest } from '../../utils/signature';
+import {
+  isPermitDaiRevoke,
+  isRecognizedPermit,
+  isSIWESignatureRequest,
+  parseAndNormalizeSignTypedDataFromSignatureRequest,
+} from '../../utils/signature';
 import { REDESIGNED_TRANSFER_TYPES } from '../../constants/confirmations';
 import styleSheet from './title.styles';
 
@@ -40,9 +45,10 @@ const getTitleAndSubTitle = (
       const isPermit = isRecognizedPermit(signatureRequest);
 
       if (isPermit) {
-        const parsedMessage = parseTypedDataMessageFromSignatureRequest(signatureRequest) ?? {};
-        const { allowed, tokenId, value } = parsedMessage?.message ?? {};
-        const { verifyingContract } = parsedMessage?.domain ?? {};
+        const parsedData =
+          parseAndNormalizeSignTypedDataFromSignatureRequest(signatureRequest);
+        const { allowed, tokenId, value } = parsedData.message ?? {};
+        const { verifyingContract } = parsedData.domain ?? {};
 
         const isERC721Permit = tokenId !== undefined;
         if (isERC721Permit) {

app/components/Views/confirmations/hooks/signatures/useSignatureMetrics.ts

@@ -14,7 +14,7 @@ import { getSignatureDecodingEventProps } from '../../utils/signature-metrics';
 import { useSignatureRequest } from './useSignatureRequest';
 import { useSecurityAlertResponse } from '../alerts/useSecurityAlertResponse';
 import { useTypedSignSimulationEnabled } from './useTypedSignSimulationEnabled';
-import { parseTypedDataMessageFromSignatureRequest } from '../../utils/signature';
+import { parseAndNormalizeSignTypedDataFromSignatureRequest } from '../../utils/signature';
 import { useSelector } from 'react-redux';
 import { selectConfirmationMetricsById } from '../../../../../core/redux/slices/confirmationMetrics';
 import { RootState } from '../../../../../reducers';
@@ -66,7 +66,7 @@ export const useSignatureMetrics = () => {
 
   const { chainId, decodingData, decodingLoading, messageParams, type, id } =
     signatureRequest ?? {};
-  const { primaryType } = parseTypedDataMessageFromSignatureRequest(signatureRequest) ?? {};
+  const { primaryType } = parseAndNormalizeSignTypedDataFromSignatureRequest(signatureRequest);
 
   const confirmationMetrics = useSelector((state: RootState) =>
     selectConfirmationMetricsById(state, id ?? '')

app/components/Views/confirmations/hooks/signatures/useTokenDecimalsInTypedSignRequest.test.ts

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react-hooks';
 
 import { typedSignV4SignatureRequest } from '../../../../../util/test/confirm-data-helpers';
 import { DataTreeInput } from '../../components/data-tree/data-tree';
-import { parseSanitizeTypedDataMessage } from '../../utils/signature';
+import { parseNormalizeAndSanitizeSignTypedData } from '../../utils/signature';
 // eslint-disable-next-line import/no-namespace
 import * as TokenDecimalHook from '../useGetTokenStandardAndDetails';
 import { useTokenDecimalsInTypedSignRequest } from './useTokenDecimalsInTypedSignRequest';
@@ -12,7 +12,7 @@ describe('useTokenDecimalsInTypedSignRequest', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const typedSignData = signatureRequest?.messageParams?.data as any;
   const { domain: { verifyingContract } = {}, sanitizedMessage } =
-    parseSanitizeTypedDataMessage(typedSignData);
+    parseNormalizeAndSanitizeSignTypedData(typedSignData);
 
   it('returns correct decimal value for typed sign signature request', () => {
     jest

app/components/Views/confirmations/hooks/signatures/useTypedSignSimulationEnabled.ts

@@ -6,7 +6,7 @@ import {
   SignatureRequestType,
 } from '@metamask/signature-controller';
 import { selectUseTransactionSimulations } from '../../../../../selectors/preferencesController';
-import { isRecognizedPermit, parseTypedDataMessage } from '../../utils/signature';
+import { isRecognizedPermit, parseAndNormalizeSignTypedData } from '../../utils/signature';
 import { useSignatureRequest } from './useSignatureRequest';
 
 const NON_PERMIT_SUPPORTED_TYPES_SIGNS = [
@@ -32,7 +32,7 @@ const isNonPermitSupportedByDecodingAPI = (
   const {
     domain: { name, version },
     primaryType,
-  } = parseTypedDataMessage(data);
+  } = parseAndNormalizeSignTypedData(data);
 
   return NON_PERMIT_SUPPORTED_TYPES_SIGNS.some(
     ({ domainName, primaryTypeList, versionList }) =>

app/components/Views/confirmations/legacy/components/PersonalSign/PersonalSign.tsx

@@ -12,7 +12,7 @@ import {
   isExternalHardwareAccount,
   stripHexPrefix,
 } from '../../../../../../util/address';
-import { sanitizeString } from '../../../../../../util/string';
+import { escapeSpecialUnicode } from '../../../../../../util/string';
 import { useTheme } from '../../../../../../util/theme';
 import { WALLET_CONNECT_ORIGIN } from '../../../../../../util/walletconnect';
 import SignatureRequest from '../SignatureRequest';
@@ -210,7 +210,7 @@ const PersonalSign = ({
   };
 
   const renderMessageText = () => {
-    const textChild = sanitizeString(msgHexToText(messageParams.data))
+    const textChild = escapeSpecialUnicode(msgHexToText(messageParams.data))
       .split('\n')
       .map((line: string, i: number) => (
         <Text

app/components/Views/confirmations/legacy/components/TypedSign/index.js

@@ -10,10 +10,8 @@ import { MetaMetricsEvents } from '../../../../../../core/Analytics';
 import { MetricsEventBuilder } from '../../../../../../core/Analytics/MetricsEventBuilder';
 import { KEYSTONE_TX_CANCELED } from '../../../../../../constants/error';
 import { ThemeContext, mockTheme } from '../../../../../../util/theme';
-import {
-  parseTypedSignDataMessage,
-  sanitizeString,
-} from '../../../../../../util/string';
+import { escapeSpecialUnicode } from '../../../../../../util/string';
+import { parseAndSanitizeSignTypedData } from '../../../../../../components/Views/confirmations/utils/signature';
 
 import {
   addSignatureErrorListener,
@@ -201,14 +199,14 @@ class TypedSign extends PureComponent {
         {obj[key] && typeof obj[key] === 'object' ? (
           <View>
             <Text style={[styles.messageText, styles.msgKey]}>
-              {sanitizeString(key)}:
+              {escapeSpecialUnicode(key)}:
             </Text>
             <View>{this.renderTypedMessageV3(obj[key])}</View>
           </View>
         ) : (
           <Text style={styles.messageText}>
-            <Text style={styles.msgKey}>{sanitizeString(key)}:</Text>{' '}
-            {sanitizeString(`${obj[key]}`)}
+            <Text style={styles.msgKey}>{escapeSpecialUnicode(key)}:</Text>{' '}
+            {escapeSpecialUnicode(`${obj[key]}`)}
           </Text>
         )}
       </View>
@@ -225,19 +223,19 @@ class TypedSign extends PureComponent {
           {messageParams.data.map((obj, i) => (
             <View key={`${obj.name}_${i}`}>
               <Text style={[styles.messageText, styles.msgKey]}>
-                {sanitizeString(obj.name)}:
+                {escapeSpecialUnicode(obj.name)}:
               </Text>
               <Text style={styles.messageText} key={obj.name}>
-                {sanitizeString(` ${obj.value}`)}
+                {escapeSpecialUnicode(` ${obj.value}`)}
               </Text>
             </View>
           ))}
         </View>
       );
     }
     if (messageParams.version === 'V3' || messageParams.version === 'V4') {
-      const message = parseTypedSignDataMessage(messageParams.data);
-      return this.renderTypedMessageV3(message);
+      const { sanitizedMessage } = parseAndSanitizeSignTypedData(messageParams.data);
+      return this.renderTypedMessageV3(sanitizedMessage);
     }
   };