From 3e6f1c32881d27a506387cdbaca5f3e5a7c64515 Mon Sep 17 00:00:00 2001
From: vthomas13 <10986371+vthomas13@users.noreply.github.com>
Date: Tue, 25 Jul 2023 09:06:11 -0400
Subject: [PATCH] Adding Metametrics for Activity Screen (#20077)

* adding activity metrics and tests

* removing unnecessary stopPropagation
---
 shared/constants/metametrics.ts               |  2 +
 .../transaction-list-item.component.js        | 20 +++++--
 .../transaction-list-item.component.test.js   | 53 +++++++++++++++++++
 3 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
index 1371a451d..32f8fc22d 100644
--- a/shared/constants/metametrics.ts
+++ b/shared/constants/metametrics.ts
@@ -484,6 +484,8 @@ export enum MetaMetricsEventName {
   AccountPasswordCreated = 'Account Password Created',
   AccountReset = 'Account Reset',
   AccountRenamed = 'Account Renamed',
+  ActivityDetailsOpened = 'Activity Details Opened',
+  ActivityDetailsClosed = 'Activity Details Closed',
   AppInstalled = 'App Installed',
   AppUnlocked = 'App Unlocked',
   AppUnlockedFailed = 'App Unlocked Failed',
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
index 4d0ef1298..68731b1e0 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -34,7 +34,10 @@ import {
 import { IconColor } from '../../../helpers/constants/design-system';
 import { Icon, IconName, IconSize } from '../../component-library';
 ///: END:ONLY_INCLUDE_IN
-import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
 import {
   TransactionGroupCategory,
   TransactionStatus,
@@ -172,8 +175,19 @@ function TransactionListItemInner({
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`);
       return;
     }
-    setShowDetails((prev) => !prev);
-  }, [isUnapproved, history, id]);
+    setShowDetails((prev) => {
+      trackEvent({
+        event: prev
+          ? MetaMetricsEventName.ActivityDetailsClosed
+          : MetaMetricsEventName.ActivityDetailsOpened,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          activity_type: category,
+        },
+      });
+      return !prev;
+    });
+  }, [isUnapproved, history, id, trackEvent, category]);
 
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   const debugTransactionMeta = {
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.test.js b/ui/components/app/transaction-list-item/transaction-list-item.component.test.js
index 91535ecf0..5a830e3d7 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.test.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.test.js
@@ -20,6 +20,12 @@ import {
 import { useGasFeeEstimates } from '../../../hooks/useGasFeeEstimates';
 import { GasEstimateTypes } from '../../../../shared/constants/gas';
 import { getTokens } from '../../../ducks/metamask/metamask';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+
 import TransactionListItem from '.';
 
 const FEE_MARKET_ESTIMATE_RETURN_VALUE = {
@@ -115,6 +121,53 @@ const generateUseSelectorRouter = (opts) => (selector) => {
 };
 
 describe('TransactionListItem', () => {
+  describe('ActivityListItem interactions', () => {
+    beforeAll(() => {
+      useGasFeeEstimates.mockImplementation(
+        () => FEE_MARKET_ESTIMATE_RETURN_VALUE,
+      );
+    });
+
+    afterAll(() => {
+      useGasFeeEstimates.mockRestore();
+    });
+
+    it('should show the activity details popover and log metrics when the activity list item is clicked', () => {
+      useSelector.mockImplementation(
+        generateUseSelectorRouter({
+          balance: '0x3',
+        }),
+      );
+
+      const store = mockStore(mockState);
+      const mockTrackEvent = jest.fn();
+      const { queryByTestId } = renderWithProvider(
+        <MetaMetricsContext.Provider value={mockTrackEvent}>
+          <TransactionListItem transactionGroup={transactionGroup} />
+        </MetaMetricsContext.Provider>,
+        store,
+      );
+      const activityListItem = queryByTestId('activity-list-item');
+      fireEvent.click(activityListItem);
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        event: MetaMetricsEventName.ActivityDetailsOpened,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          activity_type: 'send',
+        },
+      });
+      const popoverClose = queryByTestId('popover-close');
+      fireEvent.click(popoverClose);
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        event: MetaMetricsEventName.ActivityDetailsClosed,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          activity_type: 'send',
+        },
+      });
+    });
+  });
+
   describe('when account has insufficient balance to cover gas', () => {
     beforeAll(() => {
       useGasFeeEstimates.mockImplementation(