use context to save state

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

@@ -38,9 +38,9 @@ import { useAlertActionHandler } from '../contexts/alertActionHandler';
 import { AlertProvider } from '../alert-provider';
 import {
   AlertsActionMetrics,
-  useAlertSystemMetrics,
   UseAlertSystemMetricsProps,
-} from '../useAlertSystemMetrics';
+} from '../useConfirmAlertMetrics';
+import { useAlertMetrics } from '../contexts/alertMetricsContext';
 
 export type AlertModalProps = {
   /**
@@ -322,7 +322,7 @@ export function AlertModal({
   enableProvider = true,
 }: AlertModalProps) {
   const { isAlertConfirmed, setAlertConfirmed, alerts } = useAlerts(ownerId);
-  const { trackAlertMetrics } = useAlertSystemMetrics();
+  const { trackAlertMetrics } = useAlertMetrics();
 
   const handleClose = useCallback(
     (...args) => {
@@ -348,7 +348,7 @@ export function AlertModal({
       alertKey,
       action: AlertsActionMetrics.AlertVisualized,
     });
-  }, [ownerId, alertKey]);
+  }, [alertKey]);
 
   return (
     <Modal isOpen onClose={handleClose}>

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

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import {
+  ALERTS_NAME_METRICS,
+  UseAlertSystemMetricsProps,
+  useConfirmAlertMetrics,
+} from '../useConfirmAlertMetrics';
+import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts';
+
+const AlertMetricsContext = createContext<{
+  trackAlertMetrics: (props?: UseAlertSystemMetricsProps) => void;
+} | null>(null);
+
+export const AlertMetricsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const { trackAlertMetrics } = useConfirmAlertMetrics();
+
+  return (
+    <AlertMetricsContext.Provider value={{ trackAlertMetrics }}>
+      {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/useConfirmAlertMetrics.ts

@@ -0,0 +1,123 @@
+import { TransactionType } from '@metamask/transaction-controller';
+import { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import useAlerts from '../../../hooks/useAlerts';
+import { useTransactionEventFragment } from '../../../pages/confirmations/hooks/useTransactionEventFragment';
+import { REDESIGN_TRANSACTION_TYPES } from '../../../pages/confirmations/utils';
+import { Alert } from '../../../ducks/confirm-alerts/confirm-alerts';
+import { AlertsName } from '../../../pages/confirmations/hooks/alerts/constants';
+import { confirmSelector } from '../../../selectors';
+
+export type UseAlertSystemMetricsProps = {
+  alertKey?: string;
+  action?: AlertsActionMetrics;
+};
+
+export type AlertMetricsProperties = {
+  alert_visualized: string[];
+  alert_visualized_count: number;
+  alert_key_clicked: string[];
+  alert_action_clicked: string[];
+};
+
+export const ALERTS_NAME_METRICS: Record<AlertsName | string, string> = {
+  [AlertsName.GasEstimateFailed]: 'gas_estimate_failed',
+  [AlertsName.GasFeeLow]: 'gas_fee_low',
+  [AlertsName.GasTooLow]: 'gas_too_low',
+  [AlertsName.InsufficientBalance]: 'insufficient_balance',
+  [AlertsName.NetworkBusy]: 'network_busy',
+  [AlertsName.NoGasPrice]: 'no_gas_price',
+  [AlertsName.PendingTransaction]: 'pending_transaction',
+  [AlertsName.SigningOrSubmitting]: 'signing_or_submitting',
+  Blockaid: 'blockaid',
+};
+
+export enum AlertsActionMetrics {
+  AlertVisualized = 'AlertVisualized',
+  InlineAlertClicked = 'InlineAlertClicked',
+  AlertActionClicked = 'AlertActionClicked',
+}
+
+export function useConfirmAlertMetrics() {
+  const { currentConfirmation } = useSelector(confirmSelector);
+  const ownerId = currentConfirmation?.id ?? '';
+  const { alerts, isAlertConfirmed } = useAlerts(ownerId);
+  const { updateTransactionEventFragment } = useTransactionEventFragment();
+
+  const [metricsProperties, setMetricsProperties] =
+    useState<AlertMetricsProperties>({
+      alert_visualized: [],
+      alert_visualized_count: 0,
+      alert_key_clicked: [],
+      alert_action_clicked: [],
+    });
+
+  const isValidType = REDESIGN_TRANSACTION_TYPES.includes(
+    currentConfirmation?.type as TransactionType,
+  );
+
+  const trackAlertMetrics = useCallback(
+    (props?: UseAlertSystemMetricsProps) => {
+      const { alertKey, action } = props ?? {};
+      if (!isValidType || !alertKey || !action) {
+        return;
+      }
+
+      setMetricsProperties((prevState) => {
+        const newState = { ...prevState };
+        const alertName = ALERTS_NAME_METRICS[alertKey] ?? alertKey;
+
+        switch (action) {
+          case AlertsActionMetrics.AlertVisualized:
+            newState.alert_visualized = [
+              ...new Set([...prevState.alert_visualized, alertName]),
+            ];
+            newState.alert_visualized_count = newState.alert_visualized.length;
+            break;
+          case AlertsActionMetrics.InlineAlertClicked:
+            newState.alert_key_clicked = [
+              ...new Set([...prevState.alert_key_clicked, alertName]),
+            ];
+            break;
+          case AlertsActionMetrics.AlertActionClicked:
+            newState.alert_action_clicked = [
+              ...new Set([...prevState.alert_action_clicked, alertName]),
+            ];
+            break;
+          default:
+        }
+        return newState;
+      });
+    },
+    [isValidType],
+  );
+
+  useEffect(() => {
+    if (isValidType && alerts.length > 0) {
+      const properties = {
+        alert_triggered_count: alerts.length,
+        alert_triggered: getAlertsName(alerts),
+        alert_resolved_count: alerts.filter((alert) =>
+          isAlertConfirmed(alert.key),
+        ).length,
+        alert_resolved: getAlertsName(
+          alerts.filter((alert) => isAlertConfirmed(alert.key)),
+        ),
+        ...metricsProperties,
+      };
+      updateTransactionEventFragment({ properties }, ownerId);
+    }
+  }, [
+    metricsProperties,
+    alerts,
+    isValidType,
+    ownerId,
+    updateTransactionEventFragment,
+  ]);
+
+  return { trackAlertMetrics };
+}
+
+function getAlertsName(alerts: Alert[]) {
+  return alerts.map((alert) => ALERTS_NAME_METRICS[alert.key]);
+}

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

@@ -12,10 +12,8 @@ import {
 } from '../row';
 import { Box } from '../../../../../component-library';
 import { MultipleAlertModal } from '../../../../alert-system/multiple-alert-modal';
-import {
-  AlertsActionMetrics,
-  useAlertSystemMetrics,
-} from '../../../../alert-system/useAlertSystemMetrics';
+import { AlertsActionMetrics } from '../../../../alert-system/useConfirmAlertMetrics';
+import { useAlertMetrics } from '../../../../alert-system/contexts/alertMetricsContext';
 
 export type ConfirmInfoAlertRowProps = ConfirmInfoRowProps & {
   alertKey: string;
@@ -46,7 +44,7 @@ export const ConfirmInfoAlertRow = ({
   variant,
   ...rowProperties
 }: ConfirmInfoAlertRowProps) => {
-  const { trackAlertMetrics } = useAlertSystemMetrics();
+  const { trackAlertMetrics } = useAlertMetrics();
   const { getFieldAlerts } = useAlerts(ownerId);
   const fieldAlerts = getFieldAlerts(alertKey);
   const hasFieldAlert = fieldAlerts.length > 0;

ui/pages/confirmations/components/confirm/confirm-alerts/confirm-alerts.tsx

@@ -2,15 +2,18 @@ import React, { ReactElement } from 'react';
 import { AlertActionHandlerProvider } from '../../../../../components/app/alert-system/contexts/alertActionHandler';
 import useConfirmationAlertActions from '../../../hooks/useConfirmationAlertActions';
 import setConfirmationAlerts from '../../../hooks/setConfirmationAlerts';
+import { AlertMetricsProvider } from '../../../../../components/app/alert-system/contexts/alertMetricsContext';
 
 const ConfirmAlerts = ({ children }: { children: ReactElement }) => {
   const processAction = useConfirmationAlertActions();
   setConfirmationAlerts();
 
   return (
-    <AlertActionHandlerProvider onProcessAction={processAction}>
-      {children}
-    </AlertActionHandlerProvider>
+    <AlertMetricsProvider>
+      <AlertActionHandlerProvider onProcessAction={processAction}>
+        {children}
+      </AlertActionHandlerProvider>
+    </AlertMetricsProvider>
   );
 };