feat: implement Pay With Predict section

[vinistevam]

Description

Adds the Predict section to the new "Pay with" bottom sheet, completing the dedicated-flow section coverage alongside the existing Perps and Crypto sections.
When a user opens "Pay with" during a predictDepositAndOrder transaction, they now see a dedicated Predict section showing their Predict account balance with an Add button that routes to the existing add-funds flow. Tapping the balance row commits "use Predict balance" and dismisses the sheet — mirroring the UX the Perps section already provides for perpsDepositAndOrder.
The Pay With bottom-sheet entry points inside the Predict order flow (the PredictPayWithRow and the "Change payment method" CTA on PredictBuyWithAnyToken) now route to the new bottom sheet instead of the legacy PayWithModal when the bottom-sheet feature is enabled. The synthetic "Predict balance" row that the legacy modal injects via usePredictBalanceTokenFilter is suppressed in that mode so the Predict section in the bottom sheet remains the single source of truth.
The Crypto section's checkmark behavior is extended so that when Predict balance is the implicit default (PredictController.selectedPaymentToken === null on a predictDepositAndOrder flow), the preferred-token row no longer renders a misleading checkmark, and the user-selected-token row is hidden — same "fiat wins / dedicated section wins" semantics that already exist for Perps and fiat payment methods. When the user explicitly picks a crypto token via "Other assets", both pieces of state are updated coherently so the picker reflects the explicit selection.
The bottom-sheet route is registered inside the Predict native stack so navigation dispatches from the order screen reach the route reliably, matching the same fix-pattern that was applied to the Perps native stack.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1363

Manual testing steps

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

Before

After

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

[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.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces a new payment method flow for Predict (Polymarket) using the PayWithBottomSheet component, feature-flagged via isPayWithBottomSheetEnabled(). Key changes:

1. SmokePredictions (primary): Direct changes to Predict payment flows - usePredictBalanceTokenFilter now bypasses balance filtering when the bottom sheet is enabled, PredictBuyWithAnyToken and PredictPayWithRow navigate to the new CONFIRMATION_PAY_WITH_BOTTOM_SHEET route, and a new usePayWithPredictSection hook creates a Predict section in the PayWith bottom sheet. The Predict routes stack now includes the PayWithBottomSheet screen.

2. SmokeWalletPlatform (required by SmokePredictions tag description): Predictions is a section inside the Trending tab, so changes to Predictions views affect Trending.

3. SmokeConfirmations (required by SmokePredictions tag description + direct impact): The usePayWithCryptoSection and usePayWithSections hooks are confirmation-layer hooks that now include Predict-specific logic. The PayWithBottomSheet is a confirmation modal. Opening/closing positions are on-chain transactions that go through confirmations.

4. SmokePerps (indirect impact): The usePayWithCryptoSection hook is shared between Perps and Predict flows. The changes add Predict-parallel logic alongside existing Perps logic in this shared hook. The PayWithBottomSheet component is also used in Perps routes. Any regression in the shared hook could affect Perps payment flows.

The changes are feature-flagged (isPayWithBottomSheetEnabled()), reducing risk of breaking existing flows, but the shared hooks warrant testing of both Predict and Perps flows.

Performance Test Selection:
The changes are primarily feature additions to the Predict payment flow (new PayWithBottomSheet navigation, new usePayWithPredictSection hook, token filter logic). These are UI flow changes gated behind a feature flag and do not introduce new rendering-heavy components, list rendering changes, or modifications to core data loading/state management that would impact measurable performance metrics. No performance test tags are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[github-actions]

⚠️ E2E Fixture Validation — Structural changes detected

Category	Count
New keys	15
Missing keys	0
Type mismatches	0
Value mismatches	12 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report