refactor(analytics): migrate Batch 3-8: mobile-platform (#26387)

## **Description**

Phase 3 analytics migration (Batch 3-8): migrate Account Backup/Recovery
components from `useMetrics` to the new analytics system
(`useAnalytics`).

**Reason**: Deprecate MetaMetrics in favour of the shared analytics
utility and AnalyticsController.

**Changes**: `SRPListItem`, `SRPList`, `SRPQuiz`, `ManualBackupStep1`,
and `ManualBackupStep2` now use `useAnalytics` from
`app/components/hooks/useAnalytics/useAnalytics` instead of
`useMetrics`; test mocks updated to mock `useAnalytics` instead of
`useMetrics`.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MCWP-301 (Batch
3-8)

## **Manual testing steps**

```gherkin
Feature: Account Backup/Recovery analytics

  Scenario: user triggers an account backup/recovery flow event
    Given app is open and user is in an account backup/recovery flow

    When user performs an action that triggers analytics (e.g. SRP picker selection, SRP quiz progression, seed phrase reveal)
    Then the event is tracked on Mixpanel
```

## **Screenshots/Recordings**

N/A – analytics migration, no UI change.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily a hook migration from `useMetrics` to `useAnalytics` with no
functional flow changes; risk is limited to potential missing/incorrect
analytics wiring due to API/mocking differences.
> 
> **Overview**
> Migrates SRP backup/recovery UI surfaces (`SRPList`, `SRPListItem`,
`ManualBackupStep1`, `ManualBackupStep2`, and `SRPQuiz`) from the
deprecated `useMetrics` hook to the new `useAnalytics` hook while
keeping existing event names/properties and event-builder usage.
> 
> Updates the associated Jest tests to mock `useAnalytics` instead of
`useMetrics`, including adjusting mocked IDs (`getMetaMetricsId`
`getAnalyticsId`) and providing a compatible `createEventBuilder` mock
shape where needed.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
988af76. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: NicolasMassart

app/components/UI/SRPList/SRPList.test.tsx

@@ -16,12 +16,10 @@ import { fireEvent } from '@testing-library/react-native';
 import ExtendedKeyringTypes from '../../../constants/keyringTypes';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
-import useMetrics from '../../hooks/useMetrics/useMetrics';
 
 const mockTrackEvent = jest.fn();
-jest.mock('../../hooks/useMetrics/useMetrics', () => ({
-  __esModule: true,
-  default: jest.fn(),
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: jest.fn(),
 }));
 
 jest.mock('../../../core/Engine', () => {
@@ -78,7 +76,10 @@ const getTestId = (selector: string, keyringId: string) =>
 describe('SRPList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    (useMetrics as jest.Mock).mockReturnValue({
+    const { useAnalytics } = jest.requireMock(
+      '../../hooks/useAnalytics/useAnalytics',
+    );
+    (useAnalytics as jest.Mock).mockReturnValue({
       trackEvent: mockTrackEvent,
       createEventBuilder: MetricsEventBuilder.createEventBuilder,
     });

app/components/UI/SRPList/SRPList.tsx

@@ -9,7 +9,7 @@ import SRPListItem from '../SRPListItem';
 import { SRPListSelectorsIDs } from './SRPList.testIds';
 import { useHdKeyringsWithSnapAccounts } from '../../hooks/useHdKeyringsWithSnapAccounts';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
-import useMetrics from '../../hooks/useMetrics/useMetrics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import { useSyncSRPs } from '../../hooks/useSyncSRPs';
 
 const SRPList = ({
@@ -24,7 +24,7 @@ const SRPList = ({
   const maxHeight = windowHeight * 0.7;
   const { styles } = useStyles(styleSheet, { maxHeight });
   const hdKeyringsWithSnapAccounts = useHdKeyringsWithSnapAccounts();
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
 
   return (
     <View

app/components/UI/SRPListItem/SRPListItem.test.tsx

@@ -18,12 +18,10 @@ import SRPListItem from './SRPListItem';
 import ExtendedKeyringTypes from '../../../constants/keyringTypes';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
-import useMetrics from '../../hooks/useMetrics/useMetrics';
 
 const mockTrackEvent = jest.fn();
-jest.mock('../../hooks/useMetrics/useMetrics', () => ({
-  __esModule: true,
-  default: jest.fn(),
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: jest.fn(),
 }));
 
 jest.mock('../../../core/Engine', () => {
@@ -134,7 +132,10 @@ const getTestId = (selector: string, keyringId: string) =>
 describe('SRPList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    (useMetrics as jest.Mock).mockReturnValue({
+    const { useAnalytics } = jest.requireMock(
+      '../../hooks/useAnalytics/useAnalytics',
+    );
+    (useAnalytics as jest.Mock).mockReturnValue({
       trackEvent: mockTrackEvent,
       createEventBuilder: MetricsEventBuilder.createEventBuilder,
     });

app/components/UI/SRPListItem/SRPListItem.tsx

@@ -23,7 +23,7 @@ import Avatar, {
 } from '../../../component-library/components/Avatars/Avatar';
 import { useSelector } from 'react-redux';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
-import useMetrics from '../../hooks/useMetrics/useMetrics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import { selectAvatarAccountType } from '../../../selectors/settings';
 import { selectAccountGroupsByKeyringId } from '../../../selectors/multisrp';
 import { RootState } from '../../../reducers';
@@ -71,7 +71,7 @@ const SRPListItem = ({
   showArrowName = '',
 }: SRPListItemProps) => {
   const { styles } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const [showAccounts, setShowAccounts] = useState(false);
   const accountAvatarType = useSelector(selectAvatarAccountType);
 

app/components/Views/ManualBackupStep1/index.test.tsx

@@ -74,17 +74,19 @@ jest.mock('../../../util/theme', () => ({
   },
 }));
 
-// Mock useMetrics hook
+// Mock useAnalytics hook
 const mockIsMetricsEnabled = jest.fn().mockReturnValue(true);
-jest.mock('../../hooks/useMetrics', () => ({
-  useMetrics: () => ({
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
     isEnabled: mockIsMetricsEnabled,
     enable: jest.fn(),
     addTraitsToUser: jest.fn(),
-    createEventBuilder: jest.fn(),
+    createEventBuilder: jest.fn(() => ({
+      addProperties: jest.fn(() => ({ build: jest.fn() })),
+      build: jest.fn(),
+    })),
     trackEvent: jest.fn(),
-    trackAnonymousEvent: jest.fn(),
-    getMetaMetricsId: jest.fn(),
+    getAnalyticsId: jest.fn(),
   }),
 }));
 

app/components/Views/ManualBackupStep1/index.tsx

@@ -54,7 +54,7 @@ import Label from '../../../component-library/components/Form/Label';
 import TextField from '../../../component-library/components/Form/TextField/TextField';
 import { saveOnboardingEvent as saveEvent } from '../../../actions/onboarding';
 import { AppThemeKey } from '../../../util/theme/models';
-import { useMetrics } from '../../hooks/useMetrics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import {
   createTrackFunction,
   handleSkipBackup,
@@ -92,7 +92,7 @@ const ManualBackupStep1 = () => {
   const [hasFunds, setHasFunds] = useState(false);
   const { colors, themeAppearance } = useTheme();
   const styles = useMemo(() => createStyles(colors), [colors]);
-  const { isEnabled: isMetricsEnabled } = useMetrics();
+  const { isEnabled: isMetricsEnabled } = useAnalytics();
 
   const backupFlow = route?.params?.backupFlow || false;
   const settingsBackup = route?.params?.settingsBackup || false;

app/components/Views/ManualBackupStep2/index.js

@@ -32,7 +32,7 @@ import Text, {
   TextColor,
 } from '../../../component-library/components/Texts/Text';
 import Routes from '../../../constants/navigation/Routes';
-import { useMetrics } from '../../hooks/useMetrics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import { CommonActions } from '@react-navigation/native';
 import { ONBOARDING_SUCCESS_FLOW } from '../../../constants/onboarding';
 import { TraceName, endTrace } from '../../../util/trace';
@@ -100,7 +100,7 @@ const ManualBackupStep2 = ({
     return gridWords.filter((word) => word !== '').length === validWords.length;
   }, [route.params?.words, gridWords]);
 
-  const { isEnabled: isMetricsEnabled } = useMetrics();
+  const { isEnabled: isMetricsEnabled } = useAnalytics();
   const goNext = () => {
     if (validateWords()) {
       seedphraseBackedUp();

app/components/Views/ManualBackupStep2/index.test.tsx

@@ -72,17 +72,13 @@ jest
 const mockMath = Object.create(global.Math);
 mockMath.random = () => 0.5;
 
-// mock useMetrics
+// mock useAnalytics
 const mockMetricsIsEnabled = jest.fn().mockReturnValue(true);
-jest.mock('../../../components/hooks/useMetrics', () => {
-  const actual = jest.requireActual('../../../components/hooks/useMetrics');
-  return {
-    ...actual,
-    useMetrics: () => ({
-      isEnabled: mockMetricsIsEnabled,
-    }),
-  };
-});
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
+    isEnabled: mockMetricsIsEnabled,
+  }),
+}));
 
 describe('ManualBackupStep2', () => {
   const mockWords = [

app/components/Views/Quiz/SRPQuiz/SRPQuiz.tsx

@@ -19,7 +19,7 @@ import { SRP_GUIDE_URL } from '../../../../constants/urls';
 import { QuizStage } from '../types';
 import { QuizContent } from '../QuizContent';
 import stylesheet from './styles';
-import { useMetrics } from '../../../../components/hooks/useMetrics';
+import { useAnalytics } from '../../../../components/hooks/useAnalytics/useAnalytics';
 
 import {
   SrpQuizGetStartedSelectorsIDs,
@@ -55,7 +55,7 @@ const SRPQuiz = (props: SRPQuizProps) => {
   const { styles, theme } = useStyles(stylesheet, {});
   const { colors } = theme;
   const navigation = useNavigation();
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
 
   const dismissModal = (): void => {
     modalRef.current?.onCloseBottomSheet();