Trigger and terminate custom spans when clicking on account list item or account overview tab

Author: MajorLift

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

@@ -68,6 +68,7 @@ import {
   getOriginOfCurrentTab,
   getSelectedInternalAccount,
   getUpdatedAndSortedAccounts,
+  getDefaultHomeActiveTabName,
 } from '../../../selectors';
 import { setSelectedAccount } from '../../../store/actions';
 import {
@@ -234,6 +235,7 @@ export const AccountListMenu = ({
       ),
     [updatedAccountsList, allowedAccountTypes],
   );
+  const defaultHomeActiveTabName = useSelector(getDefaultHomeActiveTabName);
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   const addSnapAccountEnabled = useSelector(getIsAddSnapAccountEnabled);
   ///: END:ONLY_INCLUDE_IF
@@ -303,6 +305,22 @@ export const AccountListMenu = ({
     }
   }
 
+  const handleTraceFromTabName = (tabName: string) => {
+    switch (tabName) {
+      case 'nfts':
+        endTrace({ name: TraceName.AccountOverviewNftsTab });
+        trace({ name: TraceName.AccountOverviewNftsTab });
+        break;
+      case 'activity':
+        endTrace({ name: TraceName.AccountOverviewActivityTab });
+        trace({ name: TraceName.AccountOverviewActivityTab });
+        break;
+      default:
+        endTrace({ name: TraceName.AccountOverviewAssetListTab });
+        trace({ name: TraceName.AccountOverviewAssetListTab });
+    }
+  };
+
   const onAccountListItemItemClicked = useCallback(
     (account) => {
       return () => {
@@ -314,6 +332,7 @@ export const AccountListMenu = ({
             location: 'Main Menu',
           },
         });
+        handleTraceFromTabName(defaultHomeActiveTabName);
         dispatch(setSelectedAccount(account.address));
       };
     },

ui/components/multichain/account-overview/account-overview-tabs.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
+import { endTraces, trace, TraceName } from '../../../../shared/lib/trace';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { ASSET_ROUTE } from '../../../helpers/constants/routes';
 import {
@@ -37,7 +38,6 @@ import {
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 import InstitutionalHomeFooter from '../../../pages/home/institutional/institutional-home-footer';
 ///: END:ONLY_INCLUDE_IF
-import { endTrace, trace, TraceName } from '../../../../shared/lib/trace';
 import { AccountOverviewCommonProps } from './common';
 
 export type AccountOverviewTabsProps = AccountOverviewCommonProps & {
@@ -62,10 +62,6 @@ export const AccountOverviewTabs = ({
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
 
-  useEffect(() => {
-    endTrace({ name: TraceName.AccountOverviewTab });
-  }, []);
-
   const tabProps = useMemo(
     () => ({
       activeClassName: 'account-overview__tab--active',
@@ -85,13 +81,32 @@ export const AccountOverviewTabs = ({
     }
   };
 
+  const handleTraceFromTabName = (tabName: string) => {
+    endTraces(
+      { name: TraceName.AccountOverviewAssetListTab },
+      { name: TraceName.AccountOverviewNftsTab },
+      { name: TraceName.AccountOverviewActivityTab },
+    );
+    switch (tabName) {
+      case 'nfts':
+        trace({ name: TraceName.AccountOverviewNftsTab });
+        break;
+      case 'activity':
+        trace({ name: TraceName.AccountOverviewActivityTab });
+        break;
+      default:
+        trace({ name: TraceName.AccountOverviewAssetListTab });
+    }
+  };
+
   const handleTabClick = useCallback(
     (tabName: string) => {
       onTabClick(tabName);
       trackEvent({
         category: MetaMetricsEventCategory.Home,
         event: getEventFromTabName(tabName),
       });
+      handleTraceFromTabName(tabName);
     },
     [onTabClick],
   );