feat: Add metrics for alerts (transactions redesign)

.storybook/preview.js

@@ -20,6 +20,7 @@ import { metamaskStorybookTheme } from './metamask-storybook-theme';
 import { DocsContainer } from '@storybook/addon-docs';
 import { useDarkMode } from 'storybook-dark-mode';
 import { themes } from '@storybook/theming';
+import { AlertMetricsProvider } from '../ui/components/app/alert-system/contexts/alertMetricsContext';
 
 // eslint-disable-next-line
 /* @ts-expect-error: Avoids error from window property not existing */
@@ -124,13 +125,15 @@ const metamaskDecorator = (story, context) => {
     <Provider store={store}>
       <Router history={history}>
         <MetaMetricsProviderStorybook>
-          <I18nProvider
-            currentLocale={currentLocale}
-            current={current}
-            en={allLocales.en}
-          >
-            <LegacyI18nProvider>{story()}</LegacyI18nProvider>
-          </I18nProvider>
+          <AlertMetricsProvider>
+            <I18nProvider
+              currentLocale={currentLocale}
+              current={current}
+              en={allLocales.en}
+            >
+              <LegacyI18nProvider>{story()}</LegacyI18nProvider>
+            </I18nProvider>
+          </AlertMetricsProvider>
         </MetaMetricsProviderStorybook>
       </Router>
     </Provider>

ui/components/app/alert-system/alert-modal/alert-modal.test.tsx

@@ -6,6 +6,7 @@ import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import * as useAlertsModule from '../../../../hooks/useAlerts';
 import mockState from '../../../../../test/data/mock-state.json';
 import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts';
+import { AlertsActionMetrics } from '../../../../pages/confirmations/hooks/useConfirmationAlertMetrics';
 import { AlertModal } from './alert-modal';
 
 const onProcessActionMock = jest.fn();
@@ -18,6 +19,13 @@ jest.mock('../contexts/alertActionHandler', () => ({
   useAlertActionHandler: jest.fn(() => mockAlertActionHandlerProviderValue),
 }));
 
+const mockTrackAlertMetrics = jest.fn();
+jest.mock('../contexts/alertMetricsContext', () => ({
+  useAlertMetrics: jest.fn(() => ({
+    trackAlertMetrics: mockTrackAlertMetrics,
+  })),
+}));
+
 describe('AlertModal', () => {
   const OWNER_ID_MOCK = '123';
   const FROM_ALERT_KEY_MOCK = 'from';
@@ -250,4 +258,45 @@ describe('AlertModal', () => {
       expect(getByTestId('alert-modal-button')).toBeDefined();
     });
   });
+
+  describe('Track alert metrics', () => {
+    it('calls trackAlertMetrics when alert modal is opened', () => {
+      const { getByText } = renderWithProvider(
+        <AlertModal
+          ownerId={OWNER_ID_MOCK}
+          onAcknowledgeClick={onAcknowledgeClickMock}
+          onClose={onCloseMock}
+          alertKey={FROM_ALERT_KEY_MOCK}
+        />,
+        mockStore,
+      );
+
+      expect(getByText(ALERT_MESSAGE_MOCK)).toBeInTheDocument();
+      expect(mockTrackAlertMetrics).toHaveBeenCalledWith({
+        alertKey: FROM_ALERT_KEY_MOCK,
+        action: AlertsActionMetrics.AlertVisualized,
+      });
+    });
+
+    it('calls trackAlertMetrics when action button is clicked', () => {
+      const { getByText } = renderWithProvider(
+        <AlertModal
+          ownerId={OWNER_ID_MOCK}
+          onAcknowledgeClick={onAcknowledgeClickMock}
+          onClose={onCloseMock}
+          alertKey={CONTRACT_ALERT_KEY_MOCK}
+        />,
+        mockStore,
+      );
+
+      expect(getByText(ACTION_LABEL_MOCK)).toBeInTheDocument();
+
+      fireEvent.click(getByText(ACTION_LABEL_MOCK));
+
+      expect(mockTrackAlertMetrics).toHaveBeenCalledWith({
+        alertKey: CONTRACT_ALERT_KEY_MOCK,
+        action: AlertsActionMetrics.AlertActionClicked,
+      });
+    });
+  });
 });

ui/components/app/alert-system/alert-modal/alert-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { ButtonVariant } from '@metamask/snaps-sdk';
 
 import { SecurityProvider } from '../../../../../shared/constants/security-provider';
@@ -36,6 +36,11 @@ import useAlerts from '../../../../hooks/useAlerts';
 import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts';
 import { useAlertActionHandler } from '../contexts/alertActionHandler';
 import { AlertProvider } from '../alert-provider';
+import {
+  AlertsActionMetrics,
+  UseAlertSystemMetricsProps,
+} from '../../../../pages/confirmations/hooks/useConfirmationAlertMetrics';
+import { useAlertMetrics } from '../contexts/alertMetricsContext';
 
 export type AlertModalProps = {
   /**
@@ -257,20 +262,33 @@ function AcknowledgeButton({
 function ActionButton({
   action,
   onClose,
+  metrics,
 }: {
   action?: { key: string; label: string };
   onClose: (request: { recursive?: boolean } | void) => void;
+  metrics: {
+    trackAlertMetrics: ({
+      alertKey,
+      action,
+    }: UseAlertSystemMetricsProps) => void;
+    alertKey: string;
+  };
 }) {
   const { processAction } = useAlertActionHandler();
+  const { trackAlertMetrics, alertKey } = metrics;
 
   const handleClick = useCallback(() => {
     if (!action) {
       return;
     }
+    trackAlertMetrics({
+      alertKey,
+      action: AlertsActionMetrics.AlertActionClicked,
+    });
 
     processAction(action.key);
     onClose({ recursive: true });
-  }, [action, onClose, processAction]);
+  }, [action, onClose, processAction, trackAlertMetrics, alertKey]);
 
   if (!action) {
     return null;
@@ -304,6 +322,7 @@ export function AlertModal({
   enableProvider = true,
 }: AlertModalProps) {
   const { isAlertConfirmed, setAlertConfirmed, alerts } = useAlerts(ownerId);
+  const { trackAlertMetrics } = useAlertMetrics();
 
   const handleClose = useCallback(
     (...args) => {
@@ -314,6 +333,15 @@ export function AlertModal({
 
   const selectedAlert = alerts.find((alert: Alert) => alert.key === alertKey);
 
+  useEffect(() => {
+    if (selectedAlert) {
+      trackAlertMetrics({
+        alertKey: selectedAlert.key,
+        action: AlertsActionMetrics.AlertVisualized,
+      });
+    }
+  }, [selectedAlert, trackAlertMetrics]);
+
   if (!selectedAlert) {
     return null;
   }
@@ -322,7 +350,7 @@ export function AlertModal({
 
   const handleCheckboxClick = useCallback(() => {
     return setAlertConfirmed(selectedAlert.key, !isConfirmed);
-  }, [isConfirmed, selectedAlert.key]);
+  }, [isConfirmed, selectedAlert.key, setAlertConfirmed]);
 
   return (
     <Modal isOpen onClose={handleClose}>
@@ -380,6 +408,10 @@ export function AlertModal({
                       key={action.key}
                       action={action}
                       onClose={handleClose}
+                      metrics={{
+                        trackAlertMetrics,
+                        alertKey: selectedAlert.key,
+                      }}
                     />
                   ),
                 )}

ui/components/app/alert-system/confirm-alert-modal/confirm-alert-modal.stories.tsx

@@ -83,7 +83,6 @@ export const TemplateStory: StoryFn<typeof ConfirmAlertModal> = (args) => {
       {isOpen && (
         <ConfirmAlertModal
           {...args}
-          alertKey={'From'}
           onClose={handleOnClose}
           onCancel={handleOnClose}
           onSubmit={handleOnClose}

ui/components/app/alert-system/confirm-alert-modal/confirm-alert-modal.test.tsx

@@ -8,6 +8,12 @@ import {
   ConfirmAlertModal,
 } from './confirm-alert-modal';
 
+jest.mock('../contexts/alertMetricsContext', () => ({
+  useAlertMetrics: jest.fn(() => ({
+    trackAlertMetrics: jest.fn(),
+  })),
+}));
+
 describe('ConfirmAlertModal', () => {
   const OWNER_ID_MOCK = '123';
   const FROM_ALERT_KEY_MOCK = 'from';

ui/components/app/alert-system/contexts/alertMetricsContext.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { renderHookWithProvider } from '../../../../../test/lib/render-helpers';
+import {
+  AlertsActionMetrics,
+  UseAlertSystemMetricsProps,
+} from '../../../../pages/confirmations/hooks/useConfirmationAlertMetrics';
+import { useAlertMetrics } from './alertMetricsContext';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(),
+}));
+
+describe('useAlertMetrics', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('provides trackAlertMetrics function from context', () => {
+    (React.useContext as jest.Mock).mockReturnValue({
+      trackAlertMetrics: jest.fn(),
+    });
+    const { result } = renderHookWithProvider(useAlertMetrics);
+
+    expect(result.current).toBeDefined();
+    expect(result.current.trackAlertMetrics).toBeDefined();
+    expect(typeof result.current.trackAlertMetrics).toBe('function');
+
+    const mockProps: UseAlertSystemMetricsProps = {
+      alertKey: 'testKey',
+      action: AlertsActionMetrics.InlineAlertClicked,
+    };
+    expect(() => result.current.trackAlertMetrics(mockProps)).not.toThrow();
+  });
+
+  it('throws an error if used outside of AlertMetricsProvider', () => {
+    const { result } = renderHookWithProvider(() => useAlertMetrics());
+    expect(result.error).toEqual(
+      new Error('useAlertMetrics must be used within an AlertMetricsProvider'),
+    );
+  });
+});

ui/components/app/alert-system/contexts/alertMetricsContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import {
+  UseAlertSystemMetricsProps,
+  useConfirmationAlertMetrics,
+} from '../../../../pages/confirmations/hooks/useConfirmationAlertMetrics';
+
+const AlertMetricsContext = createContext<{
+  trackAlertMetrics: (props?: UseAlertSystemMetricsProps) => void;
+} | null>(null);
+
+export const AlertMetricsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const { trackAlertMetrics } = useConfirmationAlertMetrics();
+
+  const value = useMemo(() => ({ trackAlertMetrics }), [trackAlertMetrics]);
+
+  return (
+    <AlertMetricsContext.Provider value={value}>
+      {children}
+    </AlertMetricsContext.Provider>
+  );
+};
+
+export const useAlertMetrics = () => {
+  const context = useContext(AlertMetricsContext);
+  if (!context) {
+    throw new Error(
+      'useAlertMetrics must be used within an AlertMetricsProvider',
+    );
+  }
+  return context;
+};

ui/components/app/alert-system/multiple-alert-modal/multiple-alert-modal.test.tsx

@@ -9,6 +9,12 @@ import {
   MultipleAlertModalProps,
 } from './multiple-alert-modal';
 
+jest.mock('../contexts/alertMetricsContext', () => ({
+  useAlertMetrics: jest.fn(() => ({
+    trackAlertMetrics: jest.fn(),
+  })),
+}));
+
 describe('MultipleAlertModal', () => {
   const OWNER_ID_MOCK = '123';
   const FROM_ALERT_KEY_MOCK = 'from';

ui/components/app/confirm/info/row/alert-row/alert-row.test.tsx

@@ -5,6 +5,7 @@ import { Text } from '../../../../../component-library';
 import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
 import { Severity } from '../../../../../../helpers/constants/design-system';
 import mockState from '../../../../../../../test/data/mock-state.json';
+import { AlertsActionMetrics } from '../../../../../../pages/confirmations/hooks/useConfirmationAlertMetrics';
 import { ConfirmInfoAlertRow, ConfirmInfoAlertRowProps } from './alert-row';
 
 const onProcessActionMock = jest.fn();
@@ -17,6 +18,13 @@ jest.mock('../../../../alert-system/contexts/alertActionHandler', () => ({
   useAlertActionHandler: jest.fn(() => mockAlertActionHandlerProviderValue),
 }));
 
+const mockTrackAlertMetrics = jest.fn();
+jest.mock('../../../../alert-system/contexts/alertMetricsContext', () => ({
+  useAlertMetrics: jest.fn(() => ({
+    trackAlertMetrics: mockTrackAlertMetrics,
+  })),
+}));
+
 describe('AlertRow', () => {
   const OWNER_ID_MOCK = '123';
   const OWNER_ID_NO_ALERT_MOCK = '000';
@@ -121,6 +129,20 @@ describe('AlertRow', () => {
       });
     });
 
+    describe('Track alert metrics', () => {
+      it('calls trackAlertMetrics when inline alert is clicked', () => {
+        const { getByTestId } = renderAlertRow({
+          alertKey: KEY_ALERT_KEY_MOCK,
+          ownerId: OWNER_ID_MOCK,
+        });
+        fireEvent.click(getByTestId('inline-alert'));
+        expect(mockTrackAlertMetrics).toHaveBeenCalledWith({
+          alertKey: KEY_ALERT_KEY_MOCK,
+          action: AlertsActionMetrics.InlineAlertClicked,
+        });
+      });
+    });
+
     describe('ProcessAlertAction', () => {
       it('renders dynamic action button', () => {
         const { getByTestId, getByText } = renderAlertRow({

ui/components/app/confirm/info/row/alert-row/alert-row.tsx

@@ -12,6 +12,8 @@ import {
 } from '../row';
 import { Box } from '../../../../../component-library';
 import { MultipleAlertModal } from '../../../../alert-system/multiple-alert-modal';
+import { AlertsActionMetrics } from '../../../../../../pages/confirmations/hooks/useConfirmationAlertMetrics';
+import { useAlertMetrics } from '../../../../alert-system/contexts/alertMetricsContext';
 
 export type ConfirmInfoAlertRowProps = ConfirmInfoRowProps & {
   alertKey: string;
@@ -42,10 +44,12 @@ export const ConfirmInfoAlertRow = ({
   variant,
   ...rowProperties
 }: ConfirmInfoAlertRowProps) => {
+  const { trackAlertMetrics } = useAlertMetrics();
   const { getFieldAlerts } = useAlerts(ownerId);
   const fieldAlerts = getFieldAlerts(alertKey);
   const hasFieldAlert = fieldAlerts.length > 0;
   const selectedAlertSeverity = fieldAlerts[0]?.severity;
+  const selectedAlertKey = fieldAlerts[0]?.key;
 
   const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false);
 
@@ -55,6 +59,10 @@ export const ConfirmInfoAlertRow = ({
 
   const handleInlineAlertClick = () => {
     setAlertModalVisible(true);
+    trackAlertMetrics({
+      alertKey: selectedAlertKey,
+      action: AlertsActionMetrics.InlineAlertClicked,
+    });
   };
 
   const confirmInfoRowProps = {
@@ -77,7 +85,7 @@ export const ConfirmInfoAlertRow = ({
     <>
       {alertModalVisible && (
         <MultipleAlertModal
-          alertKey={fieldAlerts[0].key}
+          alertKey={selectedAlertKey}
           ownerId={ownerId}
           onFinalAcknowledgeClick={handleModalClose}
           onClose={handleModalClose}