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

[caieu]

Description

A user reported that the "Pay with" token selector on PredictBuyWithAnyTokenwasn'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

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

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

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.

---

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.

^{Reviewed by Cursor Bugbot for commit 69b5397. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 8b7f9c5. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 11 changed files are within the Predict (Polymarket) feature area, specifically the PredictBuyWithAnyToken flow. Key changes include:

1. usePredictBuyActions.ts: Added rejectPendingTransactions() that clears unapproved transactions via TransactionController and ApprovalController before initializing the "pay with any token" flow. This is a functional fix to prevent stale approvals from interfering with new deposit-and-order batches.

2. usePredictBuyInfo.ts: Expanded blocking alert detection to include both useInsufficientPayTokenBalanceAlert and a new useNoPayTokenQuotesAlert, unifying them into blockingPayAlerts. Returns blockingPayAlertMessage and hasBlockingPayAlerts to downstream hooks.

3. usePredictBuyConditions.ts: Refactored to accept hasBlockingPayAlerts as a prop, simplified isPayFeesLoading logic (removed dependency on quotes length), and removed direct alert hook dependency.

4. usePredictBuyError.ts: Refactored to accept blockingPayAlertMessage as a prop instead of computing it internally.

5. PredictPayWithRow.tsx: Added hasTransactionType(transactionMeta, [TransactionType.predictDepositAndOrder]) check so the "Pay With" row is only editable when the transaction is of the correct type. Fixed background styling to use !canEdit instead of disabled.

Tag selection rationale:

• SmokePredictions: Directly covers the Polymarket prediction market feature, including opening positions which uses the modified buy flow.
• SmokeWalletPlatform: Per tag description, Predictions is a section inside the Trending tab; changes to Predictions views affect Trending.
• SmokeConfirmations: Per SmokePredictions tag description, opening/closing positions are on-chain transactions. Additionally, usePredictBuyActions directly interacts with TransactionController and ApprovalController (Engine controllers), which are part of the confirmation infrastructure.

No other tags are needed as changes are fully contained within the Predict feature and don't touch shared navigation, account management, network, swap, or other unrelated flows.

Performance Test Selection:
The changes are functional refactoring of hooks within the Predict buy flow - consolidating alert handling, adding transaction rejection cleanup, and fixing editability logic. These are logic/correctness fixes, not UI rendering or data loading performance changes. No significant performance impact is expected, so no performance tests are needed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details