Description

Predict market cards on the Explore feed now open the Buy/Sell preview as an in-place bottom sheet (matching the dedicated Predict feed) when the predictBottomSheet feature flag is on, instead of routing to the full-page bet slip.

What changed

1. Mounted PredictPreviewSheetProvider at the HomeTabs level in app/components/Nav/Main/MainNavigator.js, wrapping the Tab.Navigator. The provider was previously only mounted inside PredictScreenStack, so triggering openBuySheet/openSellSheet from any other tab fell back to navigation. Mounting at HomeTabs makes the sheet usable from Explore (and any future tab that needs it) while keeping the existing in-Predict behavior untouched (PredictScreenStack still mounts its own provider; the inner one shadows the outer for usage).

2. Why mount at HomeTabs and not inside the tab itself? BottomSheet from @metamask/design-system-react-native uses absolute inset-0 for its container. If the provider is mounted inside an individual tab's content area, the sheet's parent is smaller than the viewport and the sheet gets clipped at the top of the screen and below by the bottom tab bar. Mounting at HomeTabs puts the sheet's parent at the full-viewport Home Stack.Screen card, which is the smallest level above the tab bar that gives correct dimensions.

3. Fixed a duplicate-toast and stale-suppression bug that the new placement exposes. With both HomeTabs and PredictScreenStack providers now mounted simultaneously while the user is inside the Predict stack, both used to:

   • independently fire the state-based "Try again" failure toast on activeOrder.error transitions (no dedup in ToastService);
   • increment the same _providerSheetModeCount counter that gates shouldSuppressLegacyOrderFailureToast(), which then swallowed the legacy failure toast in tabs/flows where the active provider could not actually fire its own toast (e.g. Wallet/Trade/Money/Rewards, or HomepageDiscoveryTabs which mounts in disableBottomSheet mode).

   Replaced the module-level counter with a registration stack (_sheetModeProviders). Each entry holds the provider's id and a hasBuyParams() getter. The topmost (most recently mounted, innermost in the tree) entry is the only "active" one:

   • The state-based toast effect in PredictPreviewSheetContext.tsx bails out unless the current provider is active — so only the innermost provider fires the Retry toast.
   • shouldSuppressLegacyOrderFailureToast() now consults the active entry's hasBuyParams(), so the legacy toast is only suppressed when the active provider will actually surface its own toast.

4. Test coverage for the multi-provider scenario in PredictPreviewSheetContext.test.tsx:

   • Topmost provider fires the failure toast exactly once when both are mounted.
   • Outer provider becomes active again after the inner unmounts.
   • Outer (sheet-mode) provider still fires when the inner provider is mounted with disableBottomSheet.
   • shouldSuppressLegacyOrderFailureToast correctly tracks the topmost provider across mount/unmount.

5. Added PredictPreviewSheetProvider to the Predict barrel (app/components/UI/Predict/index.ts) for consistency, and a rationale comment in MainNavigator.js explaining why the wrap lives at HomeTabs (so a future maintainer doesn't move it back inside a tab).

Files touched

• app/components/Nav/Main/MainNavigator.js
• app/components/Nav/Main/MainNavigator.test.tsx (mock update)
• app/components/UI/Predict/contexts/PredictPreviewSheetContext.tsx
• app/components/UI/Predict/contexts/PredictPreviewSheetContext.test.tsx
• app/components/UI/Predict/index.ts

Changelog

CHANGELOG entry: Added in-place buy/sell bottom sheet to Predict market cards on the Explore feed when the predictBottomSheet feature flag is enabled.

Related issues

Fixes:

Manual testing steps

Feature: Predict bottom sheet on Explore feed

  Scenario: open buy sheet from Explore with feature flag ON
    Given the predictBottomSheet feature flag is enabled
    And the user is on the Explore tab
    And the Explore feed is showing Predict market cards

    When the user taps "Yes" on a Predict market card
    Then a buy preview bottom sheet opens in place
    And the sheet is anchored above the bottom tab bar (no clipping at the top or bottom)
    And the user can swipe the sheet down to dismiss it

  Scenario: navigation fallback when feature flag is OFF
    Given the predictBottomSheet feature flag is disabled
    And the user is on the Explore tab

    When the user taps "Yes" on a Predict market card
    Then the app navigates to the full-page bet slip (legacy behavior, unchanged)

  Scenario: Predict tab behavior is unchanged
    Given the predictBottomSheet feature flag is enabled
    And the user is on the Predict tab

    When the user taps an outcome on a market card
    Then the buy preview bottom sheet opens in place (existing behavior)
    And there is exactly one Retry toast if the order subsequently fails

  Scenario: only the topmost provider fires the failure toast
    Given the predictBottomSheet feature flag is enabled
    And the user opened and dismissed a buy sheet from Explore
    And the user navigated to the Predict tab and opened/dismissed another buy sheet
    And the user is now on the Predict tab with both sheets dismissed

    When the active Predict order transitions to a failed state
    Then the user sees exactly one "Try again" toast (not two)
    And tapping Retry reopens the most recently used sheet's market context

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
• I've tested with a power user scenario
• I've instrumented key operations with Sentry traces for production performance metrics

Performance checks N/A: this PR only repositions an existing React provider higher in the tree and refactors a module-level counter into a registration stack. No new subscriptions/renders on hot paths; the failure-toast effect now does strictly less work in non-active providers.

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.