1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Improve SignatureRequest performance (#17052)

* Improve SignatureRequestData performance

* Memoize more selectors
This commit is contained in:
Frederik Bolding 2022-12-22 21:07:51 +01:00 committed by GitHub
parent b9d9112b97
commit 05d50eee73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 11 deletions

View File

@ -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);
});

View File

@ -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}

View File

@ -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

View File

@ -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;