refactor(analytics): D2 migrate useMetrics to useAnalytics in Stake and Earn components (#28263)

> [!IMPORTANT]
> Depends on D1 #28262 for createMockEventBuilder added in
`app/util/test/analyticsMock.ts`.
> if D1 revert is ever needed, you have to also revert this one

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Part of the analytics system migration from the legacy `useMetrics` hook
to the new `useAnalytics` hook across Stake and Earn components.

**What changed:**
- Replaced `useMetrics` with `useAnalytics` in 8 production components:
`GasImpactModal`, `ClaimBanner`, `StakingCta`, `FooterButtonGroup`,
`RewardsCard`, `UnstakeTimeCard`, and related views
(`StakeConfirmationView`, `UnstakeConfirmationView`).
- Moved `MetaMetricsEvents` imports from `hooks/useMetrics` to
`core/Analytics` (the canonical source) in all affected files.
- Replaced `MetricsEventBuilder.createEventBuilder` with
`AnalyticsEventBuilder.createEventBuilder` in
`tooltipMetaMetricsUtils.ts`.
- Updated 5 test files to use the `createMockUseAnalyticsHook` factory +
`jest.mocked(useAnalytics)` pattern instead of manual inline mock
objects, reducing boilerplate and improving type safety.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
-->

CHANGELOG entry: null

## **Related issues**

Fixes: #26817

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

### **Before**

N/A

### **After**

N/A

## **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.

<!-- Generated with the help of the pr-description AI skill -->


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes analytics instrumentation in
staking/earn user flows; functional behavior should be unchanged but
event building/tracking could regress or break silently.
> 
> **Overview**
> Migrates Stake/Earn UI analytics from the legacy `useMetrics` hook to
the newer `useAnalytics` hook across staking modals/cards/confirmation
flows, and standardizes `MetaMetricsEvents` imports to come from
`core/Analytics`.
> 
> Updates tooltip event construction to use `AnalyticsEventBuilder`
instead of `MetricsEventBuilder`, and refactors affected unit tests to
mock `useAnalytics` via shared helpers (`createMockUseAnalyticsHook` /
`createMockEventBuilder`) to avoid async Engine readiness polling and
reduce inline mock boilerplate.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
ca3af27. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: NicolasMassart

app/components/UI/Earn/components/EarnTokenList/EarnTokenList.test.tsx

@@ -7,20 +7,11 @@ import { Metrics, SafeAreaProvider } from 'react-native-safe-area-context';
 import EarnTokenList from '.';
 import { strings } from '../../../../../../locales/i18n';
 import Engine from '../../../../../core/Engine';
-// Prevent `useMetrics` from triggering async Engine readiness polling (`whenEngineReady`)
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import { createMockUseAnalyticsHook } from '../../../../../util/test/analyticsMock';
+// Prevent `useAnalytics` from triggering async Engine readiness polling (`whenEngineReady`)
 // which can cause Jest timeouts / "import after environment torn down" errors.
-jest.mock('../../../../hooks/useMetrics', () => ({
-  MetaMetricsEvents: {
-    EARN_TOKEN_LIST_ITEM_CLICKED: 'EARN_TOKEN_LIST_ITEM_CLICKED',
-  },
-  useMetrics: () => ({
-    trackEvent: jest.fn(),
-    createEventBuilder: () => ({
-      addProperties: jest.fn().mockReturnThis(),
-      build: jest.fn().mockReturnValue({}),
-    }),
-  }),
-}));
+jest.mock('../../../../hooks/useAnalytics/useAnalytics');
 import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../../../util/test/accountsControllerTestUtils';
 import initialRootState from '../../../../../util/test/initial-root-state';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
@@ -154,6 +145,8 @@ describe('EarnTokenList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
 
+    jest.mocked(useAnalytics).mockReturnValue(createMockUseAnalyticsHook());
+
     jest.spyOn(useStakingEligibilityHook, 'default').mockReturnValue({
       isEligible: true,
       isLoadingEligibility: false,

app/components/UI/Earn/components/Tron/TronStakingLearnMoreModal/TronStakingLearnMoreModal.test.tsx

@@ -4,6 +4,11 @@ import TronStakingLearnMoreModal from '.';
 import { MetaMetricsEvents } from '../../../../../../core/Analytics';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { Metrics, SafeAreaProvider } from 'react-native-safe-area-context';
+import { useAnalytics } from '../../../../../hooks/useAnalytics/useAnalytics';
+import {
+  createMockEventBuilder,
+  createMockUseAnalyticsHook,
+} from '../../../../../../util/test/analyticsMock';
 
 const mockNavigate = jest.fn();
 
@@ -18,29 +23,9 @@ jest.mock('@react-navigation/native', () => {
 });
 
 const mockTrackEvent = jest.fn();
-const mockCreateEventBuilder = jest.fn(() => ({
-  addProperties: jest.fn().mockReturnThis(),
-  build: jest.fn().mockReturnValue({}),
-}));
+const mockCreateEventBuilder = jest.fn(() => createMockEventBuilder());
 
-jest.mock('../../../../../hooks/useAnalytics/useAnalytics', () => ({
-  useAnalytics: () => ({
-    trackEvent: mockTrackEvent,
-    createEventBuilder: mockCreateEventBuilder,
-  }),
-}));
-
-// LearnMoreModalFooter (child component) still uses useMetrics - mock it
-jest.mock('../../../../../hooks/useMetrics', () => {
-  const actual = jest.requireActual('../../../../../../core/Analytics');
-  return {
-    ...actual,
-    useMetrics: () => ({
-      trackEvent: mockTrackEvent,
-      createEventBuilder: mockCreateEventBuilder,
-    }),
-  };
-});
+jest.mock('../../../../../hooks/useAnalytics/useAnalytics');
 
 const mockTrace = jest.fn();
 const mockEndTrace = jest.fn();
@@ -102,8 +87,15 @@ const renderModal = () =>
   );
 
 describe('TronStakingLearnMoreModal', () => {
+  let mockHook: ReturnType<typeof createMockUseAnalyticsHook>;
+
   beforeEach(() => {
     jest.clearAllMocks();
+    mockHook = createMockUseAnalyticsHook({
+      trackEvent: mockTrackEvent,
+      createEventBuilder: mockCreateEventBuilder,
+    });
+    jest.mocked(useAnalytics).mockReturnValue(mockHook);
     mockUseTronStakeApy.mockReturnValue({
       fetchStatus: 'fetched',
       apyPercent: '4.5%',

app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx

@@ -13,7 +13,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
 import UnstakingTimeCard from '../../components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard';
 import { ScrollView } from 'react-native-gesture-handler';
-import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 import { getDecimalChainId } from '../../../../../util/networks';
 

app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx

@@ -11,7 +11,7 @@ import TokenValueStack from '../../components/StakingConfirmation/TokenValueStac
 import AccountCard from '../../components/StakingConfirmation/AccountCard/AccountCard';
 import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
-import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 import { getDecimalChainId } from '../../../../../util/networks';
 import { useSelector } from 'react-redux';

app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx

@@ -8,6 +8,8 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import Routes from '../../../../../constants/navigation/Routes';
 import { strings } from '../../../../../../locales/i18n';
 import { flushPromises } from '../../../../../util/test/utils';
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import { createMockUseAnalyticsHook } from '../../../../../util/test/analyticsMock';
 
 import usePoolStakedDeposit from '../../hooks/usePoolStakedDeposit';
 import { GasImpactModalRouteParams } from './GasImpactModal.types';
@@ -59,26 +61,7 @@ jest.mock('../../hooks/usePoolStakedDeposit', () => ({
   default: jest.fn(),
 }));
 
-jest.mock('../../../../hooks/useMetrics', () => ({
-  useMetrics: () => ({
-    trackEvent: jest.fn(),
-    createEventBuilder: jest.fn().mockReturnValue({
-      addProperties: jest.fn().mockReturnThis(),
-      build: jest.fn().mockReturnValue({}),
-    }),
-  }),
-  MetaMetricsEvents: {
-    STAKE_TRANSACTION_APPROVED: 'STAKE_TRANSACTION_APPROVED',
-    STAKE_TRANSACTION_REJECTED: 'STAKE_TRANSACTION_REJECTED',
-    STAKE_TRANSACTION_CONFIRMED: 'STAKE_TRANSACTION_CONFIRMED',
-    STAKE_TRANSACTION_FAILED: 'STAKE_TRANSACTION_FAILED',
-    STAKE_TRANSACTION_SUBMITTED: 'STAKE_TRANSACTION_SUBMITTED',
-    STAKE_GAS_COST_IMPACT_CANCEL_CLICKED:
-      'STAKE_GAS_COST_IMPACT_CANCEL_CLICKED',
-    STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED:
-      'STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED',
-  },
-}));
+jest.mock('../../../../hooks/useAnalytics/useAnalytics');
 
 const initialMetrics: Metrics = {
   frame: { x: 0, y: 0, width: 320, height: 640 },
@@ -104,6 +87,8 @@ describe('GasImpactModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
 
+    jest.mocked(useAnalytics).mockReturnValue(createMockUseAnalyticsHook());
+
     usePoolStakedDepositMock.mockReturnValue({
       attemptDepositTransaction: jest.fn(),
     });

app/components/UI/Stake/components/GasImpactModal/index.tsx

@@ -26,7 +26,8 @@ import { useStyles } from '../../../../hooks/useStyles';
 import Routes from '../../../../../constants/navigation/Routes';
 import { GasImpactModalRouteParams } from './GasImpactModal.types';
 import { strings } from '../../../../../../locales/i18n';
-import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 import usePoolStakedDeposit from '../../hooks/usePoolStakedDeposit';
 import { EVM_SCOPE } from '../../../Earn/constants/networks';
@@ -43,7 +44,7 @@ const GasImpactModal = () => {
   );
   const { navigate } = useNavigation();
 
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
 
   const sheetRef = useRef<BottomSheetRef>(null);
 

app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.test.tsx

@@ -4,7 +4,9 @@ import { act, fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import Engine from '../../../../../../../core/Engine';
 import { createMockAccountsControllerState } from '../../../../../../../util/test/accountsControllerTestUtils';
+import { useAnalytics } from '../../../../../../hooks/useAnalytics/useAnalytics';
 import { backgroundState } from '../../../../../../../util/test/initial-root-state';
+import { createMockUseAnalyticsHook } from '../../../../../../../util/test/analyticsMock';
 import { mockNetworkState } from '../../../../../../../util/test/network';
 import renderWithProvider, {
   DeepPartial,
@@ -86,6 +88,7 @@ jest.mock('../../../../hooks/usePoolStakedClaim', () => ({
     attemptPoolStakedClaimTransaction: mockAttemptPoolStakedClaimTransaction,
   }),
 }));
+jest.mock('../../../../../../hooks/useAnalytics/useAnalytics');
 
 const mockNavigate = jest.fn();
 const noop = () => undefined;
@@ -103,6 +106,7 @@ jest.mock('@react-navigation/native', () => ({
 describe('ClaimBanner', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.mocked(useAnalytics).mockReturnValue(createMockUseAnalyticsHook());
     mockNavigate.mockClear();
     (useStakingChain as jest.Mock).mockReturnValue({
       isStakingSupportedChain: true,

app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx

@@ -19,10 +19,8 @@ import Routes from '../../../../../../../constants/navigation/Routes';
 import Engine from '../../../../../../../core/Engine';
 import { selectSelectedInternalAccountByScope } from '../../../../../../../selectors/multichainAccounts/accounts';
 
-import {
-  MetaMetricsEvents,
-  useMetrics,
-} from '../../../../../../hooks/useMetrics';
+import { useAnalytics } from '../../../../../../hooks/useAnalytics/useAnalytics';
+import { MetaMetricsEvents } from '../../../../../../../core/Analytics';
 import { EVENT_LOCATIONS } from '../../../../constants/events';
 import usePooledStakes from '../../../../hooks/usePooledStakes';
 import usePoolStakedClaim from '../../../../hooks/usePoolStakedClaim';
@@ -42,7 +40,7 @@ type StakeBannerProps = Pick<BannerProps, 'style'> & {
 
 const ClaimBanner = ({ claimableAmount, asset, style }: StakeBannerProps) => {
   const { styles } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const [isSubmittingClaimTransaction, setIsSubmittingClaimTransaction] =
     useState(false);
   const { MultichainNetworkController } = Engine.context;

app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react-native';
+import { useAnalytics } from '../../../../../hooks/useAnalytics/useAnalytics';
+import { createMockUseAnalyticsHook } from '../../../../../../util/test/analyticsMock';
 import StakingCta from './StakingCta';
 
 const mockNavigate = jest.fn();
@@ -13,7 +15,14 @@ jest.mock('@react-navigation/native', () => {
     }),
   };
 });
+jest.mock('../../../../../hooks/useAnalytics/useAnalytics');
+
 describe('StakingCta', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.mocked(useAnalytics).mockReturnValue(createMockUseAnalyticsHook());
+  });
+
   it('render matches snapshot', () => {
     render(<StakingCta chainId="0x1" estimatedRewardRate="2.6%" />);
     expect(screen.toJSON()).toMatchSnapshot();

app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx

@@ -8,7 +8,8 @@ import Text, {
 import { strings } from '../../../../../../../locales/i18n';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
-import { MetaMetricsEvents, useMetrics } from '../../../../../hooks/useMetrics';
+import { useAnalytics } from '../../../../../hooks/useAnalytics/useAnalytics';
+import { MetaMetricsEvents } from '../../../../../../core/Analytics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../../constants/events';
 import { Hex } from 'viem/_types/types/misc';
 import { trace, TraceName } from '../../../../../../util/trace';
@@ -26,7 +27,7 @@ const StakingCta = ({
 }: StakingCtaProps) => {
   const { styles } = useStyles(styleSheet, {});
   const { navigate } = useNavigation();
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
 
   const navigateToLearnMoreModal = () => {
     trace({