perf: Create custom trace to measure performance of opening the accou…

…nt list (#27907)

## **Description**

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27907?quickstart=1)

Adds custom Sentry trace "`Account List`" that starts when the
`AccountPicker` component is clicked, and ends when the
`AccountListMenu` component has finished rendering.

- Baseline performance:
<img width="1513" alt="Screenshot 2024-10-16 at 9 45 28 AM"
src="https://github.com/user-attachments/assets/371cb728-5153-4520-9efb-d412f6e40baa">

- Load testing via revert of
#23933:
<img width="1513" alt="Screenshot 2024-10-16 at 9 45 40 AM"
src="https://github.com/user-attachments/assets/c51e6332-35c6-42cf-a1ee-b1f8f7e665b0">

## **Related issues**

- Closes MetaMask/MetaMask-planning#3399

## **Manual testing steps**

## **Screenshots/Recordings**

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

shared/lib/trace.ts

@@ -9,6 +9,7 @@ import { log as sentryLogger } from '../../app/scripts/lib/setupSentry';
  * The supported trace names.
  */
 export enum TraceName {
+  AccountList = 'Account List',
   BackgroundConnect = 'Background Connect',
   DeveloperTest = 'Developer Test',
   FirstRender = 'First Render',

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

@@ -1,4 +1,10 @@
-import React, { useContext, useState, useMemo, useCallback } from 'react';
+import React, {
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import Fuse from 'fuse.js';
@@ -99,6 +105,7 @@ import {
   AccountConnections,
   MergedInternalAccount,
 } from '../../../selectors/selectors.types';
+import { endTrace, TraceName } from '../../../../shared/lib/trace';
 import { HiddenAccountList } from './hidden-account-list';
 
 const ACTION_MODES = {
@@ -198,6 +205,9 @@ export const AccountListMenu = ({
 }: AccountListMenuProps) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
+  useEffect(() => {
+    endTrace({ name: TraceName.AccountList });
+  }, []);
   const accounts: InternalAccountWithBalance[] = useSelector(
     getMetaMaskAccountsOrdered,
   );

ui/components/multichain/account-picker/account-picker.js

@@ -31,6 +31,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
 ///: END:ONLY_INCLUDE_IF
+import { trace, TraceName } from '../../../../shared/lib/trace';
 
 export const AccountPicker = ({
   address,
@@ -58,7 +59,10 @@ export const AccountPicker = ({
     <ButtonBase
       className={classnames('multichain-account-picker', className)}
       data-testid="account-menu-icon"
-      onClick={onClick}
+      onClick={() => {
+        trace({ name: TraceName.AccountList });
+        onClick();
+      }}
       backgroundColor={BackgroundColor.transparent}
       borderRadius={BorderRadius.LG}
       ellipsis