Merge pull request #17057 from MetaMask/Version-v10.23.2

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [10.23.2]
+### Fixed
+- Improve performance on signature request screens ([#17052](https://github.com/MetaMask/metamask-extension/pull/17052))
+
 ## [10.23.1]
 ### Fixed
 - Fix incorrectly displaying "New Contract" instead of the recipient address, on the header from the Confirmation page ([#16961](https://github.com/MetaMask/metamask-extension/pull/16961))
@@ -3340,7 +3344,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.23.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.23.2...HEAD
+[10.23.2]: https://github.com/MetaMask/metamask-extension/compare/v10.23.1...v10.23.2
 [10.23.1]: https://github.com/MetaMask/metamask-extension/compare/v10.23.0...v10.23.1
 [10.23.0]: https://github.com/MetaMask/metamask-extension/compare/v10.22.3...v10.23.0
 [10.22.3]: https://github.com/MetaMask/metamask-extension/compare/v10.22.2...v10.22.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "10.23.1",
+  "version": "10.23.2",
   "private": true,
   "repository": {
     "type": "git",

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 }) {
-  const identities = useSelector(getMetaMaskIdentities);
+function SignatureRequestData({ data }) {
+  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 Identicon from '../../ui/identicon';
 import LedgerInstructionField from '../ledger-instruction-field';
@@ -61,6 +62,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 {
       fromAccount,
@@ -74,8 +81,8 @@ export default class SignatureRequest extends PureComponent {
       hardwareWalletRequiresConnection,
     } = this.props;
     const { address: fromAddress } = fromAccount;
-    const { message, domain = {}, primaryType, types } = JSON.parse(data);
     const { trackEvent } = this.context;
+    const { sanitizedMessage, domain } = this.memoizedParseMessage(data);
 
     const onSign = (event) => {
       sign(event);
@@ -139,7 +146,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,
-  getAddressBook,
+  getMemoizedMetadataContractName,
+  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

@@ -804,6 +804,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;