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,30 @@
+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;
+};
+
+function getAlertsName(alerts: Alert[]): string[] {
+  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>
   );
 };
 

ui/pages/confirmations/components/confirm/footer/footer.tsx

@@ -27,7 +27,7 @@ import {
 import { confirmSelector } from '../../../selectors';
 import { REDESIGN_TRANSACTION_TYPES } from '../../../utils';
 import { getConfirmationSender } from '../utils';
-import { useUpdateAlertMetrics } from '../../../../../components/app/alert-system/useAlertSystemMetrics';
+import { useAlertMetrics } from '../../../../../components/app/alert-system/contexts/alertMetricsContext';
 
 const ConfirmButton = ({
   alertOwnerId = '',
@@ -94,7 +94,7 @@ const ConfirmButton = ({
 };
 
 const Footer = () => {
-  const { updateAlertMetrics } = useUpdateAlertMetrics();
+  const { trackAlertMetrics } = useAlertMetrics();
   const dispatch = useDispatch();
   const t = useI18nContext();
   const confirm = useSelector(confirmSelector);
@@ -103,6 +103,8 @@ const Footer = () => {
   const { currentConfirmation, isScrollToBottomNeeded } = confirm;
   const { from } = getConfirmationSender(currentConfirmation);
 
+  trackAlertMetrics();
+
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   const { mmiOnSignCallback, mmiSubmitDisabled } = useMMIConfirmations();
   ///: END:ONLY_INCLUDE_IF
@@ -118,7 +120,7 @@ const Footer = () => {
     if (!currentConfirmation) {
       return;
     }
-    updateAlertMetrics();
+    trackAlertMetrics();
 
     dispatch(
       rejectPendingApproval(
@@ -132,7 +134,7 @@ const Footer = () => {
     if (!currentConfirmation) {
       return;
     }
-    updateAlertMetrics();
+    trackAlertMetrics();
 
     const isTransactionConfirmation = REDESIGN_TRANSACTION_TYPES.find(
       (type) => type === currentConfirmation?.type,

ui/pages/confirmations/hooks/setConfirmationAlerts.ts

@@ -6,16 +6,13 @@ import {
   updateAlerts,
 } from '../../../ducks/confirm-alerts/confirm-alerts';
 import { currentConfirmationSelector } from '../../../selectors';
-import { useUpdateAlertMetrics } from '../../../components/app/alert-system/useAlertSystemMetrics';
 import useConfirmationAlerts from './useConfirmationAlerts';
 
 const setConfirmationAlerts = () => {
   const dispatch = useDispatch();
   const currentConfirmation = useSelector(currentConfirmationSelector);
   const alerts = useConfirmationAlerts();
   const ownerId = currentConfirmation?.id as string;
-  const { updateAlertMetrics } = useUpdateAlertMetrics();
-  updateAlertMetrics();
 
   useEffect(() => {
     dispatch(updateAlerts(ownerId, alerts));