Description

When the predictBottomSheet feature flag is ON, this PR moves Predict buy-flow
error reporting out of the legacy PredictOrderRetrySheet overlay and the
generic background-failure toast and into inline banners rendered directly inside
the buy BottomSheet. It also auto-reopens the buy sheet with the right banner
when an order fails after backgrounding (e.g. ETH deposit-then-place flow).

When the flag is OFF, behavior is unchanged: the legacy retry sheet still opens
for not-fully-filled errors, and the failure toast still fires for background
failures.

Two banner variants:

• price_changed (warning) - triggered by PREDICT_BUY_ORDER_NOT_FULLY_FILLED.
  Title: "Price changed". Body: "Couldn't buy at {price}. Try at market price?".
• order_failed (error) - generic order failure / network / timeout after
  background processing. Title: "Order failed". Body: "Your order couldn't be
  filled. Try again?".

Both variants swap the primary CTA to "Retry"; tapping Retry re-runs
placeOrder with SLIPPAGE_BEST_AVAILABLE (matching the legacy retry-sheet
behaviour). On retry failure inside sheet mode the secondary
PredictOrderRetrySheet no longer stacks on top - the inline banner re-renders
in place.

Design: https://www.figma.com/design/gsBaqApTVELyFTNA70OwKg/Predict?m=dev&node-id=14938-29764

What changed

New component:

• PredictBuyErrorBanner (app/components/UI/Predict/views/PredictBuyWithAnyToken/components/PredictBuyErrorBanner/) - styled inline banner with price_changed and order_failed variants. Built with Box/Text/Icon from @metamask/design-system-react-native and useTailwind().

Modified:

• usePredictBuyError - returns a new buyErrorBanner object alongside errorMessage; maps order_not_filled to price_changed (with formatCents of preview?.sharePrice ?? outcomeTokenPrice ?? 0 so the body remains accurate even on auto-reopen when preview is briefly null) and other failures to order_failed. Also exposes clearBuyErrorBanner for sheet-dismiss/amount-change clearing. Accepts an isSheetMode flag (defaults to false) that gates the new behaviour: in sheet mode buyErrorBanner is populated and errorMessage suppresses the active-order error string; in legacy (full-screen) mode buyErrorBanner is always null and the active-order error is surfaced via errorMessage instead, preserving the pre-feature contract.
• usePredictOrderRetry - accepts isSheetMode. In sheet mode it skips opening the legacy PredictOrderRetrySheet both on the initial becameNotFilled effect AND in the handleRetryWithBestPrice catch block (the second guard prevents the secondary sheet from stacking on retry failure).
• PredictPreviewSheetContext - tracks provider-mount state and auto-reopens the buy sheet when activeOrder?.error flips on while no buy sheet is mounted, so background failures resurface inside the sheet rather than as a toast.
• usePredictToastRegistrations - suppresses the order/failed toast when the flag is ON and the preview-sheet provider is mounted; the inline banner replaces it.
• PredictBuyActionButton - accepts isRetry; swaps the label to "Retry" when an actionable banner is active.
• PredictBuyWithAnyToken - renders PredictBuyErrorBanner between the fee summary and the action button; blurs the input/closes the keyboard when a banner becomes active in sheet mode so the Retry button is unobstructed; swaps the CTA label/handler when retry is required; passes outcomeTokenPrice and isSheetMode into usePredictBuyError so the banner/error-message gating is centralized in the hook (no leak of banner-driven button state into legacy mode).
• PredictBuyPreview, Predict.testIds.ts, contexts/index.ts - small wiring updates.
• locales/languages/en.json - new predict.order.price_changed_title, price_changed_body, and retry keys; tightened order_failed_body copy.

Tests:

• New: PredictBuyErrorBanner.test.tsx, PredictPreviewSheetContext.test.tsx (auto-reopen), and added cases in usePredictBuyError.test.ts (banner variants, fallbacks, plus a legacy mode (isSheetMode: false) describe block asserting the legacy contract), usePredictOrderRetry.test.ts (sheet-mode effect + catch-block guards), usePredictToastRegistrations.test.tsx (toast suppression), PredictBuyActionButton.test.tsx (isRetry label), PredictBuyWithAnyToken.test.tsx (banner rendering + keyboard blur).
• All existing tests in the touched files still pass.
• yarn lint:tsc is clean.

Changelog

CHANGELOG entry: Added inline error banners in the Predict buy bottom sheet for price-changed and order-failed scenarios, replacing the secondary retry sheet and failure toast when the predictBottomSheet flag is enabled.

Related issues

Fixes:
JIRA Ticket: https://consensyssoftware.atlassian.net/browse/PRED-836?atlOrigin=eyJpIjoiZWM0M2E2YjZiOGJmNGMwOWFiZDMwNDBhM2UxMzc0OGUiLCJwIjoiaiJ9

Manual testing steps

Feature: Inline error banners in Predict buy bottom sheet (predictBottomSheet flag ON)

  Background:
    Given the user has the predictBottomSheet feature flag enabled
    And the user is on a Predict market with at least one outcome
    And the user has Predict balance funded enough to place a $1 bet

  Scenario: Price changed banner appears when the order is not fully filled
    Given an injected PREDICT_BUY_ORDER_NOT_FULLY_FILLED error from the provider
    When the user opens the buy sheet, enters $1, and taps Confirm
    Then the buy sheet shows a yellow "Price changed" banner with copy "Couldn't buy at {price}. Try at market price?"
    And the primary CTA label changes to "Retry"
    And no PredictOrderRetrySheet overlay opens
    And no failure toast appears

  Scenario: Order failed banner appears after background failure (ETH path)
    Given an injected order failure occurring after the deposit step settles and the sheet has already closed
    When the user opens the buy sheet, picks ETH, enters $1, and taps Confirm
    Then the buy sheet closes and the deposit/processing toast appears
    And ~3 seconds later the buy sheet reopens automatically with a red "Order failed" banner
    And the keyboard is dismissed and the "Retry" CTA is fully visible
    And no failure toast is shown

  Scenario: Retry stays inline in sheet mode
    Given the buy sheet is showing the "Order failed" banner
    When the user taps "Retry" and the retried order also fails
    Then the action button shows "Placing prediction..." while the retry runs
    And the inline banner re-renders in the same sheet
    And no secondary PredictOrderRetrySheet stacks on top of the buy sheet

  Scenario: Banner clears when the user changes the bet amount
    Given the buy sheet is showing the "Price changed" banner
    When the user changes the bet amount via keypad or quick-amount button
    Then the banner disappears
    And the CTA returns to the normal "Buy {outcome}" label

  Scenario: Banner clears when the user dismisses the sheet
    Given the buy sheet is showing the "Price changed" banner
    When the user swipes the sheet down or taps the close button
    And then reopens the buy sheet for the same market
    Then no error banner is shown
    And the sheet is in a clean state

Feature: Legacy behaviour preserved when predictBottomSheet flag is OFF

  Scenario: Legacy retry sheet still opens for not-fully-filled errors
    Given the predictBottomSheet feature flag is disabled
    And the same PREDICT_BUY_ORDER_NOT_FULLY_FILLED injection as above
    When the user taps Confirm
    Then PredictOrderRetrySheet opens as the secondary overlay
    And no inline banner appears in the buy sheet

  Scenario: Legacy failure toast still appears for background failures
    Given the predictBottomSheet feature flag is disabled
    And an injected background order failure
    When the user taps Confirm and the sheet closes
    Then the failure toast "Failed to place prediction" is shown
    And the buy sheet does not auto-reopen

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.