fix: Improve AccountListMenu/Item performance

ui/components/multichain/account-list-item/account-list-item.js

@@ -49,7 +49,6 @@ import {
   isAccountConnectedToCurrentTab,
   getShowFiatInTestnets,
   getUseBlockie,
-  getSelectedInternalAccount,
 } from '../../../selectors';
 import {
   getMultichainIsTestnet,
@@ -71,9 +70,9 @@ import { AccountListItemMenuTypes } from './account-list-item.types';
 const MAXIMUM_CURRENCY_DECIMALS = 3;
 const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 17;
 
-export const AccountListItem = ({
+const AccountListItem = ({
   account,
-  selected = false,
+  selected,
   onClick,
   closeMenu,
   accountsCount,
@@ -147,7 +146,6 @@ export const AccountListItem = ({
   const isConnected =
     currentTabOrigin && currentTabIsConnectedToSelectedAddress;
   const isSingleAccount = accountsCount === 1;
-  const selectedAccount = useSelector(getSelectedInternalAccount);
 
   return (
     <Box
@@ -420,9 +418,7 @@ export const AccountListItem = ({
           account={account}
           onClose={() => setAccountOptionsMenuOpen(false)}
           closeMenu={closeMenu}
-          disableAccountSwitcher={
-            isSingleAccount && selectedAccount.address === account.address
-          }
+          disableAccountSwitcher={isSingleAccount && selected}
           isOpen={accountOptionsMenuOpen}
           onActionClick={onActionClick}
           activeTabOrigin={currentTabOrigin}
@@ -459,7 +455,7 @@ AccountListItem.propTypes = {
   /**
    * Represents if this account is currently selected
    */
-  selected: PropTypes.bool,
+  selected: PropTypes.bool.isRequired,
   /**
    * Function to execute when the item is clicked
    */
@@ -507,3 +503,5 @@ AccountListItem.propTypes = {
 };
 
 AccountListItem.displayName = 'AccountListItem';
+
+export default React.memo(AccountListItem);

ui/components/multichain/account-list-item/account-list-item.test.js

@@ -32,6 +32,7 @@ const mockNonEvmAccount = {
 
 const DEFAULT_PROPS = {
   account: mockAccount,
+  selected: false,
   onClick: jest.fn(),
 };
 

ui/components/multichain/account-list-item/index.js

@@ -1,2 +1,2 @@
-export { AccountListItem } from './account-list-item';
+export { default as AccountListItem } from './account-list-item';
 export { AccountListItemMenuTypes } from './account-list-item.types';

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useMemo } from 'react';
+import React, { useContext, useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import Fuse from 'fuse.js';
@@ -180,7 +180,7 @@ type AccountListMenuProps = {
 export const AccountListMenu = ({
   onClose,
   showAccountCreation = true,
-  accountListItemProps = {},
+  accountListItemProps,
   allowedAccountTypes = [
     EthAccountType.Eoa,
     EthAccountType.Erc4337,
@@ -259,7 +259,10 @@ export const AccountListMenu = ({
   }
   searchResults = mergeAccounts(searchResults, filteredAccounts);
 
-  const title = getActionTitle(t as (text: string) => string, actionMode);
+  const title = useMemo(
+    () => getActionTitle(t as (text: string) => string, actionMode),
+    [actionMode, t],
+  );
 
   // eslint-disable-next-line no-empty-function
   let onBack = () => {};
@@ -271,6 +274,23 @@ export const AccountListMenu = ({
     }
   }
 
+  const onAccountListItemItemClicked = useCallback(
+    (account) => {
+      return () => {
+        onClose();
+        trackEvent({
+          category: MetaMetricsEventCategory.Navigation,
+          event: MetaMetricsEventName.NavAccountSwitched,
+          properties: {
+            location: 'Main Menu',
+          },
+        });
+        dispatch(setSelectedAccount(account.address));
+      };
+    },
+    [dispatch, onClose, trackEvent],
+  );
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -564,17 +584,7 @@ export const AccountListMenu = ({
                     key={account.address}
                   >
                     <AccountListItem
-                      onClick={() => {
-                        onClose();
-                        trackEvent({
-                          category: MetaMetricsEventCategory.Navigation,
-                          event: MetaMetricsEventName.NavAccountSwitched,
-                          properties: {
-                            location: 'Main Menu',
-                          },
-                        });
-                        dispatch(setSelectedAccount(account.address));
-                      }}
+                      onClick={onAccountListItemItemClicked(account)}
                       account={account}
                       key={account.address}
                       selected={selectedAccount.address === account.address}

ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx

@@ -94,6 +94,7 @@ export const ConnectAccountsModalList: React.FC<ConnectAccountsListProps> = ({
               <AccountListItem
                 onClick={() => handleAccountClick(account.address)}
                 account={account}
+                selected={isSelectedAccount}
                 key={account.address}
                 closeMenu={onClose}
                 startAccessory={<Checkbox isChecked={isSelectedAccount} />}

ui/components/multichain/pages/send/__snapshots__/send.test.js.snap

@@ -232,8 +232,11 @@ exports[`SendPage render and initialization should render correctly even when a
                   class="mm-box mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column"
                 >
                   <div
-                    class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
+                    class="mm-box multichain-account-list-item multichain-account-list-item--selected multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
                   >
+                    <div
+                      class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
+                    />
                     <div
                       class="mm-box mm-box--display-flex mm-box--sm:display-none"
                       data-testid="account-list-item-badge"

ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap

@@ -6,8 +6,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
     class="mm-box mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column"
   >
     <div
-      class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
+      class="mm-box multichain-account-list-item multichain-account-list-item--selected multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
     >
+      <div
+        class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
+      />
       <div
         class="mm-box mm-box--display-flex mm-box--sm:display-none"
         data-testid="account-list-item-badge"

ui/components/multichain/pages/send/components/account-picker.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { EthAccountType } from '@metamask/keyring-api';
 import { getSelectedInternalAccount } from '../../../../../selectors';
@@ -24,6 +24,10 @@ export const SendPageAccountPicker = () => {
 
   const sendStage = useSelector(getSendStage);
   const disabled = SEND_STAGES.EDIT === sendStage;
+  const accountListItemProps = { showOptions: false };
+  const onAccountListMenuClose = useCallback(() => {
+    setShowAccountPicker(false);
+  }, []);
 
   return (
     <SendPageRow>
@@ -60,9 +64,9 @@ export const SendPageAccountPicker = () => {
       />
       {showAccountPicker ? (
         <AccountListMenu
-          accountListItemProps={{ showOptions: false }}
+          accountListItemProps={accountListItemProps}
           showAccountCreation={false}
-          onClose={() => setShowAccountPicker(false)}
+          onClose={onAccountListMenuClose}
           allowedAccountTypes={[EthAccountType.Eoa, EthAccountType.Erc4337]}
         />
       ) : null}

ui/components/multichain/pages/send/components/your-accounts.tsx

@@ -8,6 +8,7 @@ import {
 import {
   getUpdatedAndSortedAccounts,
   getInternalAccounts,
+  getSelectedInternalAccount,
 } from '../../../../../selectors';
 import { AccountListItem } from '../../..';
 import {
@@ -44,6 +45,7 @@ export const SendPageYourAccounts = ({
       (account: InternalAccount) => allowedAccountTypes.includes(account.type),
     );
   }, [accounts, internalAccounts]);
+  const selectedAccount = useSelector(getSelectedInternalAccount);
 
   return (
     <SendPageRow>
@@ -52,6 +54,7 @@ export const SendPageYourAccounts = ({
       {mergedAccounts.map((account: any) => (
         <AccountListItem
           account={account}
+          selected={selectedAccount.address === account.address}
           key={account.address}
           isPinned={Boolean(account.pinned)}
           onClick={() => {

ui/pages/remove-snap-account/snap-account-card.tsx

@@ -37,7 +37,7 @@ export const SnapAccountCard = ({
         boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
       }}
     >
-      <AccountListItem account={account} selected={remove} />
+      <AccountListItem account={account} selected={remove || false} />
     </Box>
   );
 };