fix(predict): prevent token selector from using stale approvals from other flows cp-7.73.0 (#28685)

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

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

A user reported that the "Pay with" token selector on
`PredictBuyWithAnyToken`wasn't allowing to select a different token. A
transaction is needed to that work and the current logic could pick up
pending approvals from unrelated flows (bridge, swap, send, etc.),
allowing them to select tokens from the wrong transaction context.

**Root cause:** `initPayWithAnyToken()` calls `addTransactionBatch()`
directly without first rejecting existing pending approvals — unlike the
standalone `predictDeposit` flow which goes through
`useConfirmNavigation` and rejects all unapproved transactions before
creating its own. When stale approvals existed, `useApprovalRequest()`
returned the first (wrong) approval, and `PredictPayWithRow` enabled
token selection based on a generic `transactionMeta` truthiness check.

**Fix (defense-in-depth):**

1. **`usePredictBuyActions`** — added `rejectPendingTransactions()` in
the `transitionEnd` handler before `initPayWithAnyToken()`, mirroring
the cleanup pattern from `useConfirmNavigation`.
2. **`PredictPayWithRow`** — replaced the generic `transactionMeta`
truthiness check with `hasTransactionType(transactionMeta,
[TransactionType.predictDepositAndOrder])`, so the selector only enables
for the correct transaction type.

This branch also includes prior commits that handle no-quotes blocking
alerts in the buy flow and disable the pay-with selector until
transaction metadata is ready.

## **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: Predict buy-with-any-token token selector isolation

  Scenario: token selector stays disabled when a non-predict approval is pending
    Given user has an unconfirmed swap or bridge transaction pending
    And user navigates to a Predict market buy screen

    When the buy screen finishes loading
    Then the "Pay with" row does not show an arrow icon
    And tapping the "Pay with" row does not open the token selection modal

  Scenario: token selector enables after deposit-and-order batch is created
    Given user has no pending transactions
    And user navigates to a Predict market buy screen

    When the buy screen finishes loading and initPayWithAnyToken completes
    Then the "Pay with" row shows the arrow icon
    And tapping the "Pay with" row opens the token selection modal

  Scenario: stale approvals are rejected on buy screen entry
    Given user has an unconfirmed transaction from another flow
    And user navigates to a Predict market buy screen

    When the screen transition completes
    Then the stale unconfirmed transaction is rejected
    And a new deposit-and-order batch is created as the only pending approval
```

## **Screenshots/Recordings**

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

### **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**
> Touches transaction/approval handling in the Predict buy flow by
programmatically rejecting unapproved transactions and tightening when
the pay-with selector is enabled; regressions could affect in-flight
approvals or block token selection.
> 
> **Overview**
> Prevents the `PredictBuyWithAnyToken` pay-with token selector from
latching onto stale approvals from other flows.
> 
> On screen entry, `usePredictBuyActions` now rejects all `unapproved`
transactions before calling `initPayWithAnyToken`, and
`PredictPayWithRow` only enables navigation/UI affordances when the
current `transactionMeta` is a `TransactionType.predictDepositAndOrder`
(otherwise it disables press, hides the arrow, and removes the muted
background). The buy flow also propagates *blocking* pay alerts
(insufficient balance / no quotes) via `usePredictBuyInfo` into
`usePredictBuyConditions` and `usePredictBuyError` to disable placing
bets and surface the correct blocking message, with updated tests.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
69b5397. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: caieu

app/components/UI/Predict/views/PredictBuyWithAnyToken/PredictBuyWithAnyToken.tsx

@@ -129,6 +129,8 @@ const PredictBuyWithAnyToken = () => {
     depositFee,
     rewardsFeeAmount,
     totalPayForPredictBalance,
+    hasBlockingPayAlerts,
+    blockingPayAlertMessage,
   } = usePredictBuyInfo({
     currentValue,
     preview,
@@ -153,6 +155,7 @@ const PredictBuyWithAnyToken = () => {
     isConfirming,
     totalPayForPredictBalance,
     isInputFocused,
+    hasBlockingPayAlerts,
   });
 
   const { errorMessage, isOrderNotFilled, resetOrderNotFilled } =
@@ -166,6 +169,7 @@ const PredictBuyWithAnyToken = () => {
       isConfirming,
       isPayFeesLoading,
       isInputFocused,
+      blockingPayAlertMessage,
     });
 
   const { handleConfirm, placeOrder } = usePredictBuyActions({

app/components/UI/Predict/views/PredictBuyWithAnyToken/components/PredictPayWithRow/PredictPayWithRow.test.tsx

@@ -59,6 +59,14 @@ jest.mock('../../../../../../../util/address', () => ({
   isHardwareAccount: jest.fn(() => false),
 }));
 
+let mockHasTransactionType = true;
+jest.mock('../../../../../../Views/confirmations/utils/transaction', () => ({
+  hasTransactionType: (transactionMeta: unknown) => {
+    if (!transactionMeta) return false;
+    return mockHasTransactionType;
+  },
+}));
+
 jest.mock('../../../../../../../../locales/i18n', () => ({
   strings: (key: string) => {
     if (key === 'confirm.label.pay_with') return 'Pay with';
@@ -93,6 +101,7 @@ describe('PredictPayWithRow', () => {
     mockIsPredictBalanceSelected = false;
     mockSelectedPaymentToken = null;
     mockIsHardwareAccount.mockReturnValue(false);
+    mockHasTransactionType = true;
   });
 
   it('renders label with payToken symbol', () => {
@@ -199,6 +208,56 @@ describe('PredictPayWithRow', () => {
     expect(screen.getByText('Pay with USDC')).toBeOnTheScreen();
   });
 
+  it('does not navigate when transactionMeta is null', () => {
+    mockTransactionMeta = null;
+
+    renderWithProvider(<PredictPayWithRow />);
+    fireEvent.press(screen.getByText('Pay with USDC'));
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('hides arrow icon when transactionMeta is null', () => {
+    mockTransactionMeta = null;
+
+    const { toJSON } = renderWithProvider(<PredictPayWithRow />);
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).not.toContain('ArrowDown');
+  });
+
+  it('applies muted background when canEdit is true', () => {
+    const { toJSON } = renderWithProvider(<PredictPayWithRow />);
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).toContain('backgroundColor');
+  });
+
+  it('does not apply muted background when disabled', () => {
+    const { toJSON } = renderWithProvider(<PredictPayWithRow disabled />);
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).not.toContain('backgroundColor');
+  });
+
+  it('does not apply muted background when transactionMeta is null', () => {
+    mockTransactionMeta = null;
+
+    const { toJSON } = renderWithProvider(<PredictPayWithRow />);
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).not.toContain('backgroundColor');
+  });
+
+  it('does not apply muted background for hardware accounts', () => {
+    mockIsHardwareAccount.mockReturnValue(true);
+
+    const { toJSON } = renderWithProvider(<PredictPayWithRow />);
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).not.toContain('backgroundColor');
+  });
+
   it('renders predict balance first hint when external token selected', () => {
     mockIsPredictBalanceSelected = false;
 
@@ -216,4 +275,22 @@ describe('PredictPayWithRow', () => {
       screen.queryByText('Predict balance used first'),
     ).not.toBeOnTheScreen();
   });
+
+  it('does not navigate when transaction is not predictDepositAndOrder', () => {
+    mockHasTransactionType = false;
+
+    renderWithProvider(<PredictPayWithRow />);
+    fireEvent.press(screen.getByText('Pay with USDC'));
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('hides arrow icon when transaction is not predictDepositAndOrder', () => {
+    mockHasTransactionType = false;
+
+    const { toJSON } = renderWithProvider(<PredictPayWithRow />);
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).not.toContain('ArrowDown');
+  });
 });

app/components/UI/Predict/views/PredictBuyWithAnyToken/components/PredictPayWithRow/PredictPayWithRow.tsx

@@ -11,6 +11,7 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { Hex } from '@metamask/utils';
+import { TransactionType } from '@metamask/transaction-controller';
 import { strings } from '../../../../../../../../locales/i18n';
 import Icon, {
   IconColor,
@@ -20,6 +21,7 @@ import Icon, {
 import Routes from '../../../../../../../constants/navigation/Routes';
 import { useTransactionPayToken } from '../../../../../../Views/confirmations/hooks/pay/useTransactionPayToken';
 import { useTransactionMetadataRequest } from '../../../../../../Views/confirmations/hooks/transactions/useTransactionMetadataRequest';
+import { hasTransactionType } from '../../../../../../Views/confirmations/utils/transaction';
 import { TokenIcon } from '../../../../../../Views/confirmations/components/token-icon';
 import { isHardwareAccount } from '../../../../../../../util/address';
 import { POLYGON_USDCE } from '../../../../../../Views/confirmations/constants/predict';
@@ -39,7 +41,13 @@ export function PredictPayWithRow({
   const { payToken } = useTransactionPayToken();
   const transactionMeta = useTransactionMetadataRequest();
   const from = transactionMeta?.txParams?.from;
-  const canEdit = !isHardwareAccount((from as string) ?? '') && !disabled;
+  const isPredictDepositAndOrder = hasTransactionType(transactionMeta, [
+    TransactionType.predictDepositAndOrder,
+  ]);
+  const canEdit =
+    !isHardwareAccount((from as string) ?? '') &&
+    !disabled &&
+    isPredictDepositAndOrder;
   const { isPredictBalanceSelected, selectedPaymentToken } =
     usePredictPaymentToken();
 
@@ -72,7 +80,7 @@ export function PredictPayWithRow({
           flexDirection={BoxFlexDirection.Row}
           alignItems={BoxAlignItems.Center}
           justifyContent={BoxJustifyContent.Center}
-          twClassName={`rounded-full py-2 pl-[9px] pr-[16px] mt-2 ${disabled ? '' : 'bg-muted'} mx-auto`}
+          twClassName={`rounded-full py-2 pl-[9px] pr-[16px] mt-2 ${!canEdit ? '' : 'bg-muted'} mx-auto`}
           gap={3}
         >
           {tokenIconAddress && tokenIconChainId && (

app/components/UI/Predict/views/PredictBuyWithAnyToken/hooks/usePredictBuyActions.test.ts

@@ -90,6 +90,8 @@ jest.mock('../../../../../Views/confirmations/hooks/useConfirmActions', () => ({
 }));
 
 const mockClearActiveOrderTransactionId = jest.fn();
+const mockRejectRequest = jest.fn();
+const mockTransactions: { id: string; status: string }[] = [];
 
 jest.mock('../../../hooks/usePredictActiveOrder', () => ({
   usePredictActiveOrder: () => ({
@@ -121,6 +123,16 @@ jest.mock('../../../../../../core/Engine', () => ({
       clearActiveOrderTransactionId: (...args: unknown[]) =>
         mockClearActiveOrderTransactionId(...args),
     },
+    ApprovalController: {
+      rejectRequest: (...args: unknown[]) => mockRejectRequest(...args),
+    },
+    TransactionController: {
+      state: {
+        get transactions() {
+          return mockTransactions;
+        },
+      },
+    },
   },
 }));
 
@@ -154,6 +166,7 @@ describe('usePredictBuyActions', () => {
     mockTransitionEndCallbacks.length = 0;
     mockBeforeRemoveCallbacks.length = 0;
     mockAddListener.mockImplementation(createAddListenerMock());
+    mockTransactions.length = 0;
   });
 
   describe('mount effect', () => {
@@ -548,4 +561,52 @@ describe('usePredictBuyActions', () => {
       expect(mockDispatch).not.toHaveBeenCalledWith(StackActions.pop());
     });
   });
+
+  describe('pending transaction rejection', () => {
+    it('rejects unapproved transactions before calling initPayWithAnyToken', () => {
+      mockTransactions.push(
+        { id: 'tx-1', status: 'unapproved' },
+        { id: 'tx-2', status: 'unapproved' },
+      );
+
+      renderHook(() => usePredictBuyActions(createDefaultParams()));
+
+      expect(mockRejectRequest).toHaveBeenCalledTimes(2);
+      expect(mockRejectRequest).toHaveBeenCalledWith('tx-1', expect.anything());
+      expect(mockRejectRequest).toHaveBeenCalledWith('tx-2', expect.anything());
+      expect(mockInitPayWithAnyToken).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not reject already approved transactions', () => {
+      mockTransactions.push(
+        { id: 'tx-1', status: 'confirmed' },
+        { id: 'tx-2', status: 'unapproved' },
+      );
+
+      renderHook(() => usePredictBuyActions(createDefaultParams()));
+
+      expect(mockRejectRequest).toHaveBeenCalledTimes(1);
+      expect(mockRejectRequest).toHaveBeenCalledWith('tx-2', expect.anything());
+    });
+
+    it('proceeds with initPayWithAnyToken even if rejection throws', () => {
+      mockTransactions.push({ id: 'tx-1', status: 'unapproved' });
+      mockRejectRequest.mockImplementation(() => {
+        throw new Error('Already resolved');
+      });
+
+      renderHook(() => usePredictBuyActions(createDefaultParams()));
+
+      expect(mockInitPayWithAnyToken).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not reject transactions when pay with any token is disabled', () => {
+      mockPayWithAnyTokenEnabled = false;
+      mockTransactions.push({ id: 'tx-1', status: 'unapproved' });
+
+      renderHook(() => usePredictBuyActions(createDefaultParams()));
+
+      expect(mockRejectRequest).not.toHaveBeenCalled();
+    });
+  });
 });

app/components/UI/Predict/views/PredictBuyWithAnyToken/hooks/usePredictBuyActions.ts

@@ -7,6 +7,8 @@ import {
   OrderPreview,
   PlaceOrderParams,
 } from '../../../types';
+import { TransactionStatus } from '@metamask/transaction-controller';
+import { providerErrors } from '@metamask/rpc-errors';
 import useApprovalRequest from '../../../../../Views/confirmations/hooks/useApprovalRequest';
 import { usePredictActiveOrder } from '../../../hooks/usePredictActiveOrder';
 import Engine from '../../../../../../core/Engine';
@@ -17,6 +19,28 @@ import { usePredictTrading } from '../../../hooks/usePredictTrading';
 import { PlaceOrderOutcome } from '../../../hooks/usePredictPlaceOrder';
 import { PREDICT_ERROR_CODES } from '../../../constants/errors';
 import { useConfirmActions } from '../../../../../Views/confirmations/hooks/useConfirmActions';
+
+/**
+ * Rejects all unapproved transactions to prevent stale approvals from
+ * interfering with the new deposit-and-order transaction batch.
+ * Mirrors the cleanup logic in useConfirmNavigation.
+ */
+function rejectPendingTransactions() {
+  const { ApprovalController, TransactionController } = Engine.context;
+  const unapprovedTxs = TransactionController.state.transactions.filter(
+    (tx) => tx.status === TransactionStatus.unapproved,
+  );
+  for (const tx of unapprovedTxs) {
+    try {
+      ApprovalController.rejectRequest(
+        tx.id,
+        providerErrors.userRejectedRequest(),
+      );
+    } catch {
+      // Approval may already be resolved
+    }
+  }
+}
 interface UsePredictBuyActionsParams {
   preview?: OrderPreview | null;
   analyticsProperties: PlaceOrderParams['analyticsProperties'];
@@ -65,6 +89,7 @@ export const usePredictBuyActions = ({
     const unsubscribe = navigation.addListener('transitionEnd', (e) => {
       if (!e.data.closing && !hasInitializedPayWithAnyTokenRef.current) {
         hasInitializedPayWithAnyTokenRef.current = true;
+        rejectPendingTransactions();
         initPayWithAnyToken();
       }
     });

app/components/UI/Predict/views/PredictBuyWithAnyToken/hooks/usePredictBuyConditions.test.ts

@@ -20,7 +20,7 @@ let mockSelectedPaymentToken: {
   chainId?: string;
 } | null = null;
 let mockIsDepositPending = false;
-let mockInsufficientPayTokenBalanceAlert: { message: string } | null = null;
+
 let mockPredictBalance = 0;
 const mockResetSelectedPaymentToken = jest.fn();
 
@@ -58,15 +58,6 @@ jest.mock('../../../hooks/usePredictDeposit', () => ({
   }),
 }));
 
-jest.mock(
-  '../../../../../Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert',
-  () => ({
-    useInsufficientPayTokenBalanceAlert: () => [
-      mockInsufficientPayTokenBalanceAlert,
-    ],
-  }),
-);
-
 jest.mock(
   '../../../../../Views/confirmations/hooks/pay/useTransactionPayData',
   () => ({
@@ -91,6 +82,7 @@ const defaultParams = {
   isConfirming: false,
   totalPayForPredictBalance: 0,
   isInputFocused: false,
+  hasBlockingPayAlerts: false,
 };
 
 describe('usePredictBuyConditions', () => {
@@ -107,7 +99,7 @@ describe('usePredictBuyConditions', () => {
     mockIsPredictBalanceSelected = true;
     mockSelectedPaymentToken = null;
     mockIsDepositPending = false;
-    mockInsufficientPayTokenBalanceAlert = null;
+
     mockPredictBalance = 0;
   });
 
@@ -362,12 +354,12 @@ describe('usePredictBuyConditions', () => {
 
     it('returns false when external payment token balance is insufficient', () => {
       mockIsPredictBalanceSelected = false;
-      mockInsufficientPayTokenBalanceAlert = {
-        message: 'Insufficient payment token balance',
-      };
 
       const { result } = renderHook(() =>
-        usePredictBuyConditions(defaultParams),
+        usePredictBuyConditions({
+          ...defaultParams,
+          hasBlockingPayAlerts: true,
+        }),
       );
 
       expect(result.current.canPlaceBet).toBe(false);