feat: Adding metrics events for re-designed signatures pages

app/components/Views/confirmations/Confirm/Confirm.test.tsx

@@ -8,6 +8,11 @@ import {
 } from '../../../../util/test/confirm-data-helpers';
 import Confirm from './index';
 
+jest.mock('../../../../util/address', () => ({
+  ...jest.requireActual('../../../../util/address'),
+  getAddressAccountType: (str: string) => str,
+}));
+
 jest.mock('react-native-gzip', () => ({
   deflate: (str: string) => str,
 }));
@@ -51,7 +56,7 @@ describe('Confirm', () => {
     expect(queryByText('This is a deceptive request')).toBeNull();
   });
 
-  it('should render blockaid banner is confirmation has blockaid error response', async () => {
+  it('should render blockaid banner if confirmation has blockaid error response', async () => {
     const typedSignApproval =
       typedSignV1ConfirmationState.engine.backgroundState.ApprovalController
         .pendingApprovals['7e62bcb1-a4e9-11ef-9b51-ddf21c91a998'];

app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx

@@ -7,17 +7,21 @@ import { fireEvent } from '@testing-library/react-native';
 
 const mockConfirmSpy = jest.fn();
 const mockRejectSpy = jest.fn();
-jest.mock('../../../hooks/useApprovalRequest', () => () => ({
-  onConfirm: mockConfirmSpy,
-  onReject: mockRejectSpy,
+jest.mock('../../../hooks/useConfirmActions', () => ({
+  useConfirmActions: () => ({
+    onConfirm: mockConfirmSpy,
+    onReject: mockRejectSpy,
+  }),
 }));
 
 describe('Footer', () => {
-  it('should match snapshot for personal sign', async () => {
-    const container = renderWithProvider(<Footer />, {
+  it('should render correctly', async () => {
+    const { getByText, getAllByRole } = renderWithProvider(<Footer />, {
       state: personalSignatureConfirmationState,
     });
-    expect(container).toMatchSnapshot();
+    expect(getByText('Reject')).toBeDefined();
+    expect(getByText('Confirm')).toBeDefined();
+    expect(getAllByRole('button')).toHaveLength(2);
   });
 
   it('should call onConfirm when confirm button is clicked', async () => {

app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx

@@ -4,11 +4,11 @@ import { View } from 'react-native';
 import { strings } from '../../../../../../../locales/i18n';
 import StyledButton from '../../../../../../components/UI/StyledButton';
 import { useStyles } from '../../../../../../component-library/hooks';
-import useApprovalRequest from '../../../hooks/useApprovalRequest';
+import { useConfirmActions } from '../../../hooks/useConfirmActions';
 import styleSheet from './Footer.styles';
 
 const Footer = () => {
-  const { onConfirm, onReject } = useApprovalRequest();
+  const { onConfirm, onReject } = useConfirmActions();
   const { styles } = useStyles(styleSheet, {});
 
   return (

app/components/Views/confirmations/hooks/useConfirmActions.test.ts

@@ -0,0 +1,43 @@
+import Engine from '../../../../core/Engine';
+import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
+import { personalSignatureConfirmationState } from '../../../../util/test/confirm-data-helpers';
+import { useConfirmActions } from './useConfirmActions';
+
+jest.mock('../../../../core/Engine', () => ({
+  acceptPendingApproval: jest.fn(),
+  rejectPendingApproval: jest.fn(),
+}));
+
+const mockCaptureSignatureMetrics = jest.fn();
+jest.mock('./useSignatureMetrics', () => ({
+  useSignatureMetrics: () => ({
+    captureSignatureMetrics: mockCaptureSignatureMetrics,
+  }),
+}));
+
+const flushPromises = async () => await new Promise(process.nextTick);
+
+describe('useConfirmAction', () => {
+  afterEach(() => {
+    mockCaptureSignatureMetrics.mockClear();
+  });
+
+  it('call required callbacks when confirm button is clicked', async () => {
+    const { result } = renderHookWithProvider(() => useConfirmActions(), {
+      state: personalSignatureConfirmationState,
+    });
+    result?.current?.onConfirm();
+    expect(Engine.acceptPendingApproval).toHaveBeenCalledTimes(1);
+    await flushPromises();
+    expect(mockCaptureSignatureMetrics).toHaveBeenCalledTimes(1);
+  });
+
+  it('call required callbacks when reject button is clicked', async () => {
+    const { result } = renderHookWithProvider(() => useConfirmActions(), {
+      state: personalSignatureConfirmationState,
+    });
+    result?.current?.onReject();
+    expect(Engine.rejectPendingApproval).toHaveBeenCalledTimes(1);
+    expect(mockCaptureSignatureMetrics).toHaveBeenCalledTimes(1);
+  });
+});

app/components/Views/confirmations/hooks/useConfirmActions.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { MetaMetricsEvents } from '../../../hooks/useMetrics';
+import { isSignatureRequest } from '../utils/confirm';
+import useApprovalRequest from './useApprovalRequest';
+import { useSignatureMetrics } from './useSignatureMetrics';
+
+export const useConfirmActions = () => {
+  const {
+    onConfirm: onRequestConfirm,
+    onReject: onRequestReject,
+    approvalRequest,
+  } = useApprovalRequest();
+  const { captureSignatureMetrics } = useSignatureMetrics();
+
+  const signatureRequest =
+    approvalRequest?.type && isSignatureRequest(approvalRequest?.type);
+
+  const onConfirm = useCallback(async () => {
+    await onRequestConfirm({
+      waitForResult: true,
+      deleteAfterResult: true,
+      handleErrors: false,
+    });
+    if (signatureRequest) {
+      captureSignatureMetrics(MetaMetricsEvents.SIGNATURE_APPROVED);
+    }
+  }, [captureSignatureMetrics, onRequestConfirm, signatureRequest]);
+
+  const onReject = useCallback(() => {
+    onRequestReject();
+    if (signatureRequest) {
+      captureSignatureMetrics(MetaMetricsEvents.SIGNATURE_REJECTED);
+    }
+  }, [captureSignatureMetrics, onRequestReject, signatureRequest]);
+
+  return { onConfirm, onReject };
+};

app/components/Views/confirmations/hooks/useSignatureMetrics.test.ts

@@ -0,0 +1,57 @@
+import { MetaMetricsEvents } from '../../../../core/Analytics';
+import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
+import { useSignatureMetrics } from './useSignatureMetrics';
+
+const mockSigRequest = {
+  type: 'personal_sign',
+  messageParams: {
+    data: '0x4578616d706c652060706572736f6e616c5f7369676e60206d657373616765',
+    from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+    meta: {
+      url: 'https://metamask.github.io/test-dapp/',
+      title: 'E2E Test Dapp',
+      icon: { uri: 'https://metamask.github.io/metamask-fox.svg' },
+      analytics: { request_source: 'In-App-Browser' },
+    },
+    origin: 'metamask.github.io',
+    metamaskId: '76b33b40-7b5c-11ef-bc0a-25bce29dbc09',
+  },
+  chainId: '0x0',
+};
+
+jest.mock('./useSignatureRequest', () => ({
+  useSignatureRequest: () => mockSigRequest,
+}));
+
+jest.mock('../../../../util/address', () => ({
+  getAddressAccountType: (str: string) => str,
+}));
+
+const mockTrackEvent = jest.fn().mockImplementation();
+jest.mock('../../../../core/Analytics', () => ({
+  ...jest.requireActual('../../../../core/Analytics'),
+  MetaMetrics: {
+    getInstance: () => ({ trackEvent: mockTrackEvent }),
+  },
+}));
+
+describe('useSignatureMetrics', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should capture metrics events correctly', async () => {
+    const { result } = renderHookWithProvider(() => useSignatureMetrics(), {
+      state: {},
+    });
+    // first call for 'SIGNATURE_REQUESTED' event
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+    result?.current?.captureSignatureMetrics(
+      MetaMetricsEvents.SIGNATURE_APPROVED,
+    );
+    expect(mockTrackEvent).toHaveBeenCalledTimes(2);
+    result?.current?.captureSignatureMetrics(
+      MetaMetricsEvents.SIGNATURE_REJECTED,
+    );
+    expect(mockTrackEvent).toHaveBeenCalledTimes(3);
+  });
+});