diff --git a/shared/lib/trace.ts b/shared/lib/trace.ts index ab1deefd1cc5..1dd50b736222 100644 --- a/shared/lib/trace.ts +++ b/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', diff --git a/ui/components/multichain/account-list-menu/account-list-menu.tsx b/ui/components/multichain/account-list-menu/account-list-menu.tsx index 2e5925dbf9cf..19d313aedf54 100644 --- a/ui/components/multichain/account-list-menu/account-list-menu.tsx +++ b/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, ); diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js index 18c516cf3cab..20d382923190 100644 --- a/ui/components/multichain/account-picker/account-picker.js +++ b/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 = ({ { + trace({ name: TraceName.AccountList }); + onClick(); + }} backgroundColor={BackgroundColor.transparent} borderRadius={BorderRadius.LG} ellipsis