Improve SignatureRequest performance (#17052)

* Improve SignatureRequestData performance

* Memoize more selectors

ui/components/app/signature-request/signature-request-data/signature-request-data.js

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
-import { getMetaMaskIdentities, getAccountName } from '../../../../selectors';
+import {
+  getMemoizedMetaMaskIdentities,
+  getAccountName,
+} from '../../../../selectors';
 import Address from '../../transaction-decoding/components/decoding/address';
 import {
   isValidHexAddress,
@@ -16,15 +20,15 @@ import {
   TYPOGRAPHY,
 } from '../../../../helpers/constants/design-system';
 
-export default function SignatureRequestData({ data }) {
+function SignatureRequestData({ data }) {
-  const identities = useSelector(getMetaMaskIdentities);
+  const identities = useSelector(getMemoizedMetaMaskIdentities);
 
   return (
     <Box className="signature-request-data__node">
       {Object.entries(data).map(([label, value], i) => (
         <Box
           className="signature-request-data__node"
-          key={i}
+          key={`${label}-${i}`}
           paddingLeft={2}
           display={
             typeof value !== 'object' || value === null ? DISPLAY.FLEX : null
@@ -77,3 +81,7 @@ export default function SignatureRequestData({ data }) {
 SignatureRequestData.propTypes = {
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
 };
+
+export default memo(SignatureRequestData, (prevProps, nextProps) => {
+  return isEqual(prevProps.data, nextProps.data);
+});

ui/components/app/signature-request/signature-request.component.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { memoize } from 'lodash';
 import PropTypes from 'prop-types';
 import LedgerInstructionField from '../ledger-instruction-field';
 import { sanitizeMessage, getURLHostName } from '../../../helpers/utils/util';
@@ -107,6 +108,12 @@ export default class SignatureRequest extends PureComponent {
     }
   }
 
+  memoizedParseMessage = memoize((data) => {
+    const { message, domain = {}, primaryType, types } = JSON.parse(data);
+    const sanitizedMessage = sanitizeMessage(message, primaryType, types);
+    return { sanitizedMessage, domain };
+  });
+
   render() {
     const {
       txData: {
@@ -126,8 +133,8 @@ export default class SignatureRequest extends PureComponent {
       conversionRate,
       nativeCurrency,
     } = this.props;
-    const { message, domain = {}, primaryType, types } = JSON.parse(data);
     const { trackEvent } = this.context;
+    const { sanitizedMessage, domain } = this.memoizedParseMessage(data);
 
     const currentNetwork = this.getNetworkName();
 
@@ -236,7 +243,7 @@ export default class SignatureRequest extends PureComponent {
           </div>
         ) : null}
         <Message
-          data={sanitizeMessage(message, primaryType, types)}
+          data={sanitizedMessage}
           onMessageScrolled={() => this.setState({ hasScrolledMessage: true })}
           setMessageRootRef={this.setMessageRootRef.bind(this)}
           messageRootRef={this.messageRootRef}

ui/components/app/transaction-decoding/components/decoding/address/address.component.js

@@ -6,8 +6,8 @@ import { shortenAddress } from '../../../../../../helpers/utils/util';
 import Identicon from '../../../../../ui/identicon';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import {
-  getMetadataContractName,
+  getMemoizedMetadataContractName,
-  getAddressBook,
+  getMemoizedAddressBook,
 } from '../../../../../../selectors';
 import NicknamePopovers from '../../../../modals/nickname-popovers';
 
@@ -21,14 +21,14 @@ const Address = ({
   const t = useI18nContext();
   const [showNicknamePopovers, setShowNicknamePopovers] = useState(false);
 
-  const addressBook = useSelector(getAddressBook);
+  const addressBook = useSelector(getMemoizedAddressBook);
   const addressBookEntryObject = addressBook.find(
     (entry) =>
       entry.address.toLowerCase() === checksummedRecipientAddress.toLowerCase(),
   );
   const recipientNickname = addressBookEntryObject?.name;
   const recipientMetadataName = useSelector((state) =>
-    getMetadataContractName(state, checksummedRecipientAddress),
+    getMemoizedMetadataContractName(state, checksummedRecipientAddress),
   );
 
   const recipientToRender = addressOnly

ui/selectors/selectors.js

@@ -814,6 +814,27 @@ export function getShowWhatsNewPopup(state) {
 
 const createDeepEqualSelector = createSelectorCreator(defaultMemoize, isEqual);
 
+export const getMemoizedMetaMaskIdentities = createDeepEqualSelector(
+  getMetaMaskIdentities,
+  (identities) => identities,
+);
+
+export const getMemoizedAddressBook = createDeepEqualSelector(
+  getAddressBook,
+  (addressBook) => addressBook,
+);
+
+export const getMemoizedMetadataContractName = createDeepEqualSelector(
+  getTokenList,
+  (_tokenList, address) => address,
+  (tokenList, address) => {
+    const entry = Object.values(tokenList).find((identity) =>
+      isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)),
+    );
+    return entry && entry.name !== '' ? entry.name : '';
+  },
+);
+
 export const getUnapprovedTransactions = (state) =>
   state.metamask.unapprovedTxs;