chore(runway): cherry-pick feat(predict): cp-7.65.0 add analytics tracking to deposit flow (#25741)

- feat(predict): cp-7.65.0 add analytics tracking to deposit flow
(#25670)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Add analytics event tracking when deposit is triggered from different
entry points (homepage balance, buy preview). The deposit function now
accepts optional analytics parameters including entryPoint and
amountUsd.
- Add trackPredictOrderEvent call in usePredictDeposit when analytics
  properties are provided
- Pass HOMEPAGE_BALANCE entry point from PredictBalance component
- Pass BUY_PREVIEW entry point with market context from
usePredictPlaceOrder
  when balance is insufficient
- Add new event values: BUY_PREVIEW entry point and transaction types
  for deposit, withdraw, and claim
- Update tests to verify analytics properties are passed correctly

<!--
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?
-->

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

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> **Medium Risk**
> Adds analytics tracking to the deposit flow and changes the `deposit`
hook signature to accept optional parameters, which could affect callers
and analytics payload correctness but does not alter on-chain
transaction behavior.
> 
> **Overview**
> Adds **analytics tracking for Predict deposits** by extending
`usePredictDeposit().deposit` to accept optional `{ amountUsd,
analyticsProperties }` and emitting
`PredictController.trackPredictOrderEvent` with `status: initiated` and
`transactionType: mm_predict_deposit` when properties are provided.
> 
> Updates deposit entry points to pass analytics context:
`PredictBalance` now sends `entryPoint: homepage_balance`, and
`usePredictPlaceOrder` triggers a deposit on insufficient BUY balance
with `entryPoint: buy_preview`, `marketId`, and merged
`orderParams.analyticsProperties`. Expands `PredictEventValues` with
`BUY_PREVIEW` and new transaction type constants, and updates/adds tests
to validate the new analytics payloads.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4bf856b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[fa7d510](fa7d510)

Co-authored-by: Caainã Jeronimo <caainaje@gmail.com>

Author: runway-github[bot]

app/components/UI/Predict/components/PredictBalance/PredictBalance.test.tsx

@@ -293,7 +293,7 @@ describe('PredictBalance', () => {
       expect(queryByText(/Withdraw/i)).not.toBeOnTheScreen();
     });
 
-    it('calls deposit function when Add Funds button is pressed', () => {
+    it('calls deposit function with analytics properties when Add Funds button is pressed', () => {
       // Arrange
       const mockDeposit = jest.fn();
       mockUsePredictBalance.mockReturnValue({
@@ -318,6 +318,11 @@ describe('PredictBalance', () => {
 
       // Assert
       expect(mockDeposit).toHaveBeenCalledTimes(1);
+      expect(mockDeposit).toHaveBeenCalledWith({
+        analyticsProperties: {
+          entryPoint: 'homepage_balance',
+        },
+      });
     });
 
     it('calls executeGuardedAction when Add Funds button is pressed', () => {

app/components/UI/Predict/components/PredictBalance/PredictBalance.tsx

@@ -70,7 +70,11 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({ onLayout }) => {
   const handleAddFunds = useCallback(() => {
     executeGuardedAction(
       () => {
-        deposit();
+        deposit({
+          analyticsProperties: {
+            entryPoint: PredictEventValues.ENTRY_POINT.HOMEPAGE_BALANCE,
+          },
+        });
       },
       { attemptedAction: PredictEventValues.ATTEMPTED_ACTION.DEPOSIT },
     );

app/components/UI/Predict/constants/eventNames.ts

@@ -86,10 +86,14 @@ export const PredictEventValues = {
     BACKGROUND: 'background',
     TRENDING_SEARCH: 'trending_search',
     TRENDING: 'trending',
+    BUY_PREVIEW: 'buy_preview',
   },
   TRANSACTION_TYPE: {
     MM_PREDICT_BUY: 'mm_predict_buy',
     MM_PREDICT_SELL: 'mm_predict_sell',
+    MM_PREDICT_DEPOSIT: 'mm_predict_deposit',
+    MM_PREDICT_WITHDRAW: 'mm_predict_withdraw',
+    MM_PREDICT_CLAIM: 'mm_predict_claim',
   },
   MARKET_TYPE: {
     BINARY: 'binary',

app/components/UI/Predict/hooks/usePredictDeposit.test.ts

@@ -19,6 +19,7 @@ jest.mock('../../../../core/Engine', () => ({
   context: {
     PredictController: {
       depositWithConfirmation: jest.fn(),
+      trackPredictOrderEvent: jest.fn(),
     },
     AccountTreeController: {
       getAccountsFromSelectedAccountGroup: jest.fn(() => [
@@ -215,6 +216,9 @@ describe('usePredictDeposit', () => {
     (
       Engine.context.PredictController.depositWithConfirmation as jest.Mock
     ).mockClear();
+    (
+      Engine.context.PredictController.trackPredictOrderEvent as jest.Mock
+    ).mockClear();
   });
 
   afterEach(() => {
@@ -844,4 +848,113 @@ describe('usePredictDeposit', () => {
       consoleErrorSpy.mockRestore();
     });
   });
+
+  describe('analytics tracking', () => {
+    it('tracks analytics event when analyticsProperties is provided', async () => {
+      (
+        Engine.context.PredictController.depositWithConfirmation as jest.Mock
+      ).mockResolvedValue({
+        success: true,
+        response: { batchId: 'batch-123' },
+      });
+      const { result } = setupUsePredictDepositTest();
+
+      await result.current.deposit({
+        amountUsd: 100,
+        analyticsProperties: {
+          entryPoint: 'homepage_balance',
+        },
+      });
+
+      expect(
+        Engine.context.PredictController.trackPredictOrderEvent,
+      ).toHaveBeenCalledWith({
+        status: 'initiated',
+        providerId: 'polymarket',
+        amountUsd: 100,
+        analyticsProperties: {
+          entryPoint: 'homepage_balance',
+          transactionType: 'mm_predict_deposit',
+        },
+      });
+    });
+
+    it('does not track analytics event when analyticsProperties is not provided', async () => {
+      (
+        Engine.context.PredictController.depositWithConfirmation as jest.Mock
+      ).mockResolvedValue({
+        success: true,
+        response: { batchId: 'batch-123' },
+      });
+      const { result } = setupUsePredictDepositTest();
+
+      await result.current.deposit();
+
+      expect(
+        Engine.context.PredictController.trackPredictOrderEvent,
+      ).not.toHaveBeenCalled();
+    });
+
+    it('tracks analytics event with custom providerId', async () => {
+      (
+        Engine.context.PredictController.depositWithConfirmation as jest.Mock
+      ).mockResolvedValue({
+        success: true,
+        response: { batchId: 'batch-123' },
+      });
+      const { result } = setupUsePredictDepositTest(
+        {},
+        { providerId: 'custom-provider' },
+      );
+
+      await result.current.deposit({
+        amountUsd: 50,
+        analyticsProperties: {
+          entryPoint: 'buy_preview',
+          marketId: 'market-123',
+        },
+      });
+
+      expect(
+        Engine.context.PredictController.trackPredictOrderEvent,
+      ).toHaveBeenCalledWith({
+        status: 'initiated',
+        providerId: 'custom-provider',
+        amountUsd: 50,
+        analyticsProperties: {
+          entryPoint: 'buy_preview',
+          marketId: 'market-123',
+          transactionType: 'mm_predict_deposit',
+        },
+      });
+    });
+
+    it('tracks analytics event without amountUsd when not provided', async () => {
+      (
+        Engine.context.PredictController.depositWithConfirmation as jest.Mock
+      ).mockResolvedValue({
+        success: true,
+        response: { batchId: 'batch-123' },
+      });
+      const { result } = setupUsePredictDepositTest();
+
+      await result.current.deposit({
+        analyticsProperties: {
+          entryPoint: 'homepage_balance',
+        },
+      });
+
+      expect(
+        Engine.context.PredictController.trackPredictOrderEvent,
+      ).toHaveBeenCalledWith({
+        status: 'initiated',
+        providerId: 'polymarket',
+        amountUsd: undefined,
+        analyticsProperties: {
+          entryPoint: 'homepage_balance',
+          transactionType: 'mm_predict_deposit',
+        },
+      });
+    });
+  });
 });

app/components/UI/Predict/hooks/usePredictDeposit.ts

@@ -5,6 +5,7 @@ import { strings } from '../../../../../locales/i18n';
 import { IconName } from '../../../../component-library/components/Icons/Icon';
 import { ToastContext } from '../../../../component-library/components/Toast';
 import { ToastVariants } from '../../../../component-library/components/Toast/Toast.types';
+import Engine from '../../../../core/Engine';
 import Logger from '../../../../util/Logger';
 import { useAppThemeFromContext } from '../../../../util/theme';
 import { ConfirmationLoader } from '../../../Views/confirmations/components/confirm/confirm-component';
@@ -15,11 +16,21 @@ import { PredictNavigationParamList } from '../types/navigation';
 import { ensureError } from '../utils/predictErrorHandler';
 import { usePredictTrading } from './usePredictTrading';
 import { getEvmAccountFromSelectedAccountGroup } from '../utils/accounts';
+import {
+  PredictEventValues,
+  PredictTradeStatus,
+} from '../constants/eventNames';
+import { PlaceOrderParams } from '../providers/types';
 
 interface UsePredictDepositParams {
   providerId?: string;
 }
 
+interface PredictDepositAnalyticsParams {
+  amountUsd?: number;
+  analyticsProperties?: PlaceOrderParams['analyticsProperties'];
+}
+
 export const usePredictDeposit = ({
   providerId = 'polymarket',
 }: UsePredictDepositParams = {}) => {
@@ -41,34 +52,74 @@ export const usePredictDeposit = ({
     }),
   );
 
-  const deposit = useCallback(async () => {
-    try {
-      navigateToConfirmation({
-        loader: ConfirmationLoader.CustomAmount,
-      });
+  const deposit = useCallback(
+    async (params?: PredictDepositAnalyticsParams) => {
+      try {
+        navigateToConfirmation({
+          loader: ConfirmationLoader.CustomAmount,
+        });
 
-      depositWithConfirmation({
-        providerId,
-      }).catch((err) => {
-        console.error('Failed to initialize deposit:', err);
+        const { amountUsd, analyticsProperties } = params ?? {};
 
-        // Log error with deposit initialization context
-        Logger.error(ensureError(err), {
-          tags: {
-            feature: PREDICT_CONSTANTS.FEATURE_NAME,
-            component: 'usePredictDeposit',
-          },
-          context: {
-            name: 'usePredictDeposit',
-            data: {
-              method: 'deposit',
-              action: 'deposit_initialization',
-              operation: 'financial_operations',
-              providerId,
+        if (analyticsProperties) {
+          Engine.context.PredictController.trackPredictOrderEvent({
+            status: PredictTradeStatus.INITIATED,
+            providerId,
+            amountUsd,
+            analyticsProperties: {
+              ...analyticsProperties,
+              transactionType:
+                PredictEventValues.TRANSACTION_TYPE.MM_PREDICT_DEPOSIT,
             },
-          },
+          });
+        }
+
+        depositWithConfirmation({
+          providerId,
+        }).catch((err) => {
+          console.error('Failed to initialize deposit:', err);
+
+          // Log error with deposit initialization context
+          Logger.error(ensureError(err), {
+            tags: {
+              feature: PREDICT_CONSTANTS.FEATURE_NAME,
+              component: 'usePredictDeposit',
+            },
+            context: {
+              name: 'usePredictDeposit',
+              data: {
+                method: 'deposit',
+                action: 'deposit_initialization',
+                operation: 'financial_operations',
+                providerId,
+              },
+            },
+          });
+          navigation.goBack();
+          toastRef?.current?.showToast({
+            variant: ToastVariants.Icon,
+            labelOptions: [
+              { label: strings('predict.deposit.error_title'), isBold: true },
+              { label: '\n', isBold: false },
+              {
+                label: strings('predict.deposit.error_description'),
+                isBold: false,
+              },
+            ],
+            iconName: IconName.Error,
+            iconColor: theme.colors.error.default,
+            backgroundColor: theme.colors.accent04.normal,
+            hasNoTimeout: false,
+            linkButtonOptions: {
+              label: strings('predict.deposit.try_again'),
+              onPress: () => deposit(params),
+            },
+          });
         });
+      } catch (err) {
+        console.error('Failed to proceed with deposit:', err);
         navigation.goBack();
+        // Re-throw to allow testing of this error path
         toastRef?.current?.showToast({
           variant: ToastVariants.Icon,
           labelOptions: [
@@ -85,60 +136,38 @@ export const usePredictDeposit = ({
           hasNoTimeout: false,
           linkButtonOptions: {
             label: strings('predict.deposit.try_again'),
-            onPress: () => deposit(),
+            onPress: () => deposit(params),
           },
         });
-      });
-    } catch (err) {
-      console.error('Failed to proceed with deposit:', err);
-      navigation.goBack();
-      // Re-throw to allow testing of this error path
-      toastRef?.current?.showToast({
-        variant: ToastVariants.Icon,
-        labelOptions: [
-          { label: strings('predict.deposit.error_title'), isBold: true },
-          { label: '\n', isBold: false },
-          {
-            label: strings('predict.deposit.error_description'),
-            isBold: false,
-          },
-        ],
-        iconName: IconName.Error,
-        iconColor: theme.colors.error.default,
-        backgroundColor: theme.colors.accent04.normal,
-        hasNoTimeout: false,
-        linkButtonOptions: {
-          label: strings('predict.deposit.try_again'),
-          onPress: () => deposit(),
-        },
-      });
 
-      // Log error with deposit navigation context
-      Logger.error(ensureError(err), {
-        tags: {
-          feature: PREDICT_CONSTANTS.FEATURE_NAME,
-          component: 'usePredictDeposit',
-        },
-        context: {
-          name: 'usePredictDeposit',
-          data: {
-            method: 'deposit',
-            action: 'deposit_navigation',
-            operation: 'financial_operations',
-            providerId,
+        // Log error with deposit navigation context
+        Logger.error(ensureError(err), {
+          tags: {
+            feature: PREDICT_CONSTANTS.FEATURE_NAME,
+            component: 'usePredictDeposit',
           },
-        },
-      });
-    }
-  }, [
-    depositWithConfirmation,
-    navigateToConfirmation,
-    navigation,
-    providerId,
-    theme.colors.accent04.normal,
-    theme.colors.error.default,
-    toastRef,
-  ]);
+          context: {
+            name: 'usePredictDeposit',
+            data: {
+              method: 'deposit',
+              action: 'deposit_navigation',
+              operation: 'financial_operations',
+              providerId,
+            },
+          },
+        });
+      }
+    },
+    [
+      depositWithConfirmation,
+      navigateToConfirmation,
+      navigation,
+      providerId,
+      theme.colors.accent04.normal,
+      theme.colors.error.default,
+      toastRef,
+    ],
+  );
 
   return {
     deposit,