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( + + + , + 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(