diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts index 82c6a557be4f..3caee8b7d088 100644 --- a/shared/constants/metametrics.ts +++ b/shared/constants/metametrics.ts @@ -779,6 +779,7 @@ export enum MetaMetricsEventCategory { Tokens = 'Tokens', Transactions = 'Transactions', Wallet = 'Wallet', + Confirmations = 'Confirmations', ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) MMI = 'Institutional', ///: END:ONLY_INCLUDE_IF @@ -831,6 +832,7 @@ export enum MetaMetricsEventLocation { TokenDetails = 'token_details', TokenDetection = 'token_detection', TokenMenu = 'token_menu', + Transaction = 'transaction', } export enum MetaMetricsEventUiCustomization { diff --git a/ui/pages/confirmations/components/confirm/header/header-info.test.tsx b/ui/pages/confirmations/components/confirm/header/header-info.test.tsx index 08a8d3f9d1fc..3e0372c6b9b5 100644 --- a/ui/pages/confirmations/components/confirm/header/header-info.test.tsx +++ b/ui/pages/confirmations/components/confirm/header/header-info.test.tsx @@ -20,14 +20,55 @@ const mockStore = { }, confirm: { currentConfirmation: { + id: 'testApprovalId', msgParams: { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + signatureMethod: 'eth_signTypedData_v4', }, - type: 'eth_signTypedData_v4', + type: 'eth_signTypedData', }, }, }; +const cases = [ + { + description: 'for a signature', + store: { + ...mockStore, + }, + expectedEvent: { + category: MetaMetricsEventCategory.Confirmations, + event: MetaMetricsEventName.AccountDetailsOpened, + properties: { + action: 'Confirm Screen', + location: MetaMetricsEventLocation.SignatureConfirmation, + signature_type: 'eth_signTypedData_v4', + }, + }, + }, + { + description: 'for a transaction', + store: { + ...mockStore, + confirm: { + currentConfirmation: { + id: 'testApprovalId', + type: 'a_transaction_type', + }, + }, + }, + expectedEvent: { + category: MetaMetricsEventCategory.Confirmations, + event: MetaMetricsEventName.AccountDetailsOpened, + properties: { + action: 'Confirm Screen', + location: MetaMetricsEventLocation.Transaction, + transaction_type: 'a_transaction_type', + }, + }, + }, +]; + const render = () => { const store = configureStore(mockStore); return renderWithProvider( @@ -58,29 +99,23 @@ describe('Header', () => { }); }); - it(`sends "${MetaMetricsEventName.AccountDetailsOpened}" metametric`, () => { - const mockTrackEvent = jest.fn(); - const { getByLabelText } = renderWithProvider( - - {}} - /> - , - configureStore(mockStore), - ); - const accountInfoIcon = getByLabelText('Account details'); - fireEvent.click(accountInfoIcon); + cases.forEach(({ description, store, expectedEvent }) => { + it(`sends "${MetaMetricsEventName.AccountDetailsOpened}" metametric ${description}`, () => { + const mockTrackEvent = jest.fn(); + const { getByLabelText } = renderWithProvider( + + {}} + /> + , + configureStore(store), + ); + const accountInfoIcon = getByLabelText('Account details'); + fireEvent.click(accountInfoIcon); - expect(mockTrackEvent).toHaveBeenNthCalledWith(1, { - category: MetaMetricsEventCategory.Transactions, - event: MetaMetricsEventName.AccountDetailsOpened, - properties: { - action: 'Confirm Screen', - location: MetaMetricsEventLocation.SignatureConfirmation, - signature_type: 'eth_signTypedData_v4', - }, + expect(mockTrackEvent).toHaveBeenNthCalledWith(1, expectedEvent); }); }); }); diff --git a/ui/pages/confirmations/components/confirm/header/header-info.tsx b/ui/pages/confirmations/components/confirm/header/header-info.tsx index b94839220498..0f40b35f00ef 100644 --- a/ui/pages/confirmations/components/confirm/header/header-info.tsx +++ b/ui/pages/confirmations/components/confirm/header/header-info.tsx @@ -46,6 +46,8 @@ import { import { useBalance } from '../../../hooks/useBalance'; import useConfirmationRecipientInfo from '../../../hooks/useConfirmationRecipientInfo'; import { REDESIGN_TRANSACTION_TYPES } from '../../../utils'; +import { SignatureRequestType } from '../../../types/confirm'; +import { isSignatureTransactionType } from '../../../utils/confirm'; const HeaderInfo = ({ showAdvancedDetails, @@ -66,16 +68,30 @@ const HeaderInfo = ({ const { balance: balanceToUse } = useBalance(fromAddress); + const isSignature = isSignatureTransactionType(currentConfirmation); + + const eventProps = isSignature + ? { + location: MetaMetricsEventLocation.SignatureConfirmation, + signature_type: (currentConfirmation as SignatureRequestType)?.msgParams + ?.signatureMethod, + } + : { + location: MetaMetricsEventLocation.Transaction, + transaction_type: currentConfirmation?.type, + }; + function trackAccountModalOpened() { - trackEvent({ - category: MetaMetricsEventCategory.Transactions, + const event = { + category: MetaMetricsEventCategory.Confirmations, event: MetaMetricsEventName.AccountDetailsOpened, properties: { action: 'Confirm Screen', - location: MetaMetricsEventLocation.SignatureConfirmation, - signature_type: currentConfirmation?.type, + ...eventProps, }, - }); + }; + + trackEvent(event); } const isShowAdvancedDetailsToggle = REDESIGN_TRANSACTION_TYPES.includes( diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts index a48e1d4984ba..ab472318fcac 100644 --- a/ui/pages/confirmations/types/confirm.ts +++ b/ui/pages/confirmations/types/confirm.ts @@ -26,6 +26,7 @@ export type SignatureRequestType = { origin: string; data: string | TypedSignDataV1Type; version?: string; + signatureMethod?: string; siwe?: { isSIWEMessage: boolean; parsedMessage: null | {