refactor(analytics): migrate Batch 3-7: mobile-platform (#26385)

## **Description**

Phase 3 analytics migration (Batch 3-7): migrate Payment Request's
`PaymentRequest` class component from `withMetricsAwareness` HOC to the
new analytics system.

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

**Changes**: `PaymentRequest/index.js` now uses `analytics.trackEvent()`
and `AnalyticsEventBuilder` from `app/util/analytics` directly instead
of the `withMetricsAwareness` HOC; test mocks updated to mock the
analytics utility instead of MetaMetrics.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

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

## **Manual testing steps**

```gherkin
Feature: Payment Request analytics

  Scenario: user triggers a payment request flow event
    Given app is open and user is in a payment request flow

    When user performs an action that triggers analytics (e.g. network selector press)
    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**
> Analytics plumbing is swapped from `withMetricsAwareness` to the
shared `analytics` utility with minimal behavioral change and no
sensitive data handling.
> 
> **Overview**
> Migrates `PaymentRequest` analytics from the deprecated
`withMetricsAwareness`/MetaMetrics injection to the shared
`analytics.trackEvent()` + `AnalyticsEventBuilder` flow when the network
picker is pressed, preserving the `chain_id` property.
> 
> Removes the `metrics` prop/HOC wrapper and updates tests to mock the
new analytics module (plus a small TypeScript cast workaround for the
connected `.js` component).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
89e949b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: NicolasMassart

app/components/UI/PaymentRequest/index.js

@@ -64,9 +64,10 @@ import { selectContractExchangeRates } from '../../../selectors/tokenRatesContro
 import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import PickerNetwork from '../../../component-library/components/Pickers/PickerNetwork/PickerNetwork';
 import Routes from '../../../constants/navigation/Routes';
-import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import { RequestPaymentViewSelectors } from '../ReceiveRequest/RequestPaymentView.testIds';
 import { MetaMetricsEvents } from '../../../core/Analytics';
+import { analytics } from '../../../util/analytics/analytics';
+import { AnalyticsEventBuilder } from '../../../util/analytics/AnalyticsEventBuilder';
 
 const KEYBOARD_OFFSET = 120;
 const createStyles = (colors) =>
@@ -308,10 +309,6 @@ class PaymentRequest extends PureComponent {
      * Object that represents the current route info like params passed to it
      */
     route: PropTypes.object,
-    /**
-     * Metrics injected by withMetricsAwareness HOC
-     */
-    metrics: PropTypes.object,
     /**
      * Network configurations
      */
@@ -910,9 +907,10 @@ class PaymentRequest extends PureComponent {
     this.props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
       screen: Routes.SHEET.NETWORK_SELECTOR,
     });
-    this.props.metrics.trackEvent(
-      this.props.metrics
-        .createEventBuilder(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED)
+    analytics.trackEvent(
+      AnalyticsEventBuilder.createEventBuilder(
+        MetaMetricsEvents.NETWORK_SELECTOR_PRESSED,
+      )
         .addProperties({
           chain_id: getDecimalChainId(this.props.chainId),
         })
@@ -967,4 +965,4 @@ const mapStateToProps = (state) => ({
   networkImageSource: selectNetworkImageSource(state),
 });
 
-export default withMetricsAwareness(connect(mapStateToProps)(PaymentRequest));
+export default connect(mapStateToProps)(PaymentRequest);

app/components/UI/PaymentRequest/index.test.tsx

@@ -6,7 +6,13 @@ import {
   userEvent,
   waitFor,
 } from '@testing-library/react-native';
-import PaymentRequest from './index';
+import PaymentRequestConnected from './index';
+
+// Workaround: source is a .js file so TypeScript can't infer PropTypes;
+// connect() produces a narrow type that rejects valid ownProps like chainId.
+const PaymentRequest = PaymentRequestConnected as React.ComponentType<
+  Record<string, unknown>
+>;
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import { SolScope } from '@metamask/keyring-api';
@@ -21,6 +27,13 @@ jest.mock('react', () => ({
   useState: jest.fn(),
 }));
 
+const mockTrackEvent = jest.fn();
+jest.mock('../../../util/analytics/analytics', () => ({
+  analytics: {
+    trackEvent: (event: Record<string, unknown>) => mockTrackEvent(event),
+  },
+}));
+
 // Enable fake timers globally for this test file
 jest.useFakeTimers();
 
@@ -115,6 +128,7 @@ let mockSetShowError: jest.Mock;
 let mockShowError = false;
 
 beforeEach(() => {
+  mockTrackEvent.mockClear();
   mockSetShowError = jest.fn((value) => {
     mockShowError = value;
   });
@@ -259,17 +273,7 @@ describe('PaymentRequest', () => {
 
   describe('handleNetworkPickerPress', () => {
     it('should navigate to network selector modal when feature flag is enabled', () => {
-      const mockMetrics = {
-        trackEvent: jest.fn(),
-        createEventBuilder: jest.fn(() => ({
-          addProperties: jest.fn(() => ({
-            build: jest.fn(() => 'builtEvent'),
-          })),
-        })),
-      };
-
       const { getByTestId } = renderComponent({
-        metrics: mockMetrics,
         chainId: '0x1',
         networkImageSource: ethLogo,
       });