PR: fix(predict): replace bet slip auto-reopen with auto-dismissing Retry toast

Suggested branch: fix/bet-slip-auto-reopen-during-pwat
Suggested labels: team-mobile-predict, needs-qa
Assignee: yourself

Description

Problem

When paying with any token (PWAT) for a Predict bet, the bet slip would pop back up unexpectedly while the deposit was still in flight. The "Prediction in progress" loading toast would appear, then the slip would re-open over it (often before the deposit even confirmed on-chain), and then stay stuck open after the order completed. This was confusing and felt broken.

Root cause: the auto-reopen useEffect in PredictPreviewSheetContext — added in #29184 to surface inline error banners after background failures — fired on any transient activeOrder.error value. The PredictController briefly sets error during its internal retry paths (PredictController.ts:1277 and :2300) even on flows that ultimately succeed, so the slip popped back up over toasts that were still mid-loading. The reopened slip didn't close on SUCCESS either, because the freshly-mounted usePredictBuyActions instance has didInitiateOrderRef = false and skips the SUCCESS pop.

Solution

Replaced the auto-reopen with a user-initiated reopen via an auto-dismissing Retry toast. The toast lives ~3s; tapping Retry within that window reopens the slip with the original market context and the inline order_failed banner. If the user does nothing, the toast fades out and activeOrder.error is automatically cleared so the next slip open is a clean state (no stale banner flash).

sequenceDiagram
    participant User
    participant Slip as Bet slip
    participant Ctrl as PredictController
    participant Toast

    User->>Slip: Confirm bet (PWAT)
    Ctrl->>Ctrl: state -> DEPOSITING
    Slip->>Slip: animate close
    Toast->>User: "Prediction in progress" loading toast

    alt Order succeeds
        Ctrl-->>Toast: 'confirmed' event
        Toast->>User: "Prediction placed" success toast
    else Order fails
        Ctrl-->>Toast: state.error transitions truthy
        Toast->>User: auto-dismissing "Failed to place prediction" + Retry (inline)
        opt User taps Retry within ~3s
            Toast->>Toast: cancel auto-clear timer
            Toast->>Slip: openBuySheet(lastBuyParams)
            Slip->>User: bet slip reopens with inline order_failed banner
        end
        opt User does nothing
            Toast->>Toast: auto-dismisses (~3s)
            Toast->>Ctrl: clearOrderError()
        end
    end

Key changes

• Removed the auto-reopen useEffect and dismissedWithErrorRef from PredictPreviewSheetContext.tsx.
• Added a state-based trigger inside the provider that fires a toast via ToastService.showToast(...) whenever activeOrder.error transitions falsy → truthy AND the bottom-sheet flow is enabled AND the slip is closed AND we have remembered buy params from a previous open. This mirrors the original auto-reopen condition but surfaces a toast instead of taking over the screen. Using state (not the controller's 'failed' event) avoids the timing race on isBackgroundOrder that the event-based path is subject to.
• Added module-level isPredictSheetProviderMounted() so the legacy event-based toast in usePredictToastRegistrations.tsx can suppress itself when the provider is mounted (avoids a duplicate failure toast).
• Added a clearErrorTimerRef 3-second timer that calls clearOrderError() after the toast auto-dismisses, so an unhandled failure doesn't leave a stale activeOrder.error for the next slip open. The timer is cancelled when the user taps Retry (so the reopened slip can show the order_failed banner) and on provider unmount (so we don't setState after teardown).
• Tap Retry → cancels the auto-clear timer and reopens the slip with the same market context. The reopened slip's existing inline order_failed banner handles the per-slip error UX (preserves PR feat(predict): bPredict Bottom Sheet Errors PRED-836 #29184's intent).

Toast shape

• Variant: ToastVariants.Icon
• Layout: [avatar icon] [bold label + description] [Retry] on a single row.
• iconName: IconName.Error
• iconColor: theme.colors.error.default (red — see "known limitations" below)
• backgroundColor: theme.colors.error.muted (soft red wash, matching the standard error-avatar look used in NetworkConnectionBanner, ErrorBoundary, AlertModal, etc.)
• hasNoTimeout: false (auto-dismisses on platform default ~2.75s visibility + 0.25s exit)
• closeButtonOptions: { label: 'Retry', variant: ButtonVariants.Link, onPress } — the inline Retry action

Locale keys

All existing — no new strings:

• predict.order.prediction_failed — toast title
• predict.order.order_failed_generic — toast description
• predict.order.retry — Retry action label

Out of scope (intentionally)

• The shared Toast component is unchanged on this PR (an earlier draft added an opt-in compact prop, which has since been reverted in favor of the existing closeButtonOptions API).
• The deposit / withdraw / claim error toasts in usePredictToastRegistrations.tsx continue to use the existing accent04.normal indigo background — only the new bottom-sheet failure toast was switched to the conventional error.muted red wash. Harmonizing the rest is a follow-up.

Known limitations

• The error.svg asset (app/component-library/components/Icons/Icon/assets/error.svg) has hardcoded fill="none" on the root and fill="#121314" on the path, so the small Error glyph paints near-black regardless of the iconColor we pass. This affects every IconName.Error callsite in the app, not just ours. Filed for the design-system-engineers team. The error.muted soft red background masks the issue here visually (dark glyph on light red wash reads correctly as "error"), but the glyph itself only becomes red once the SVG asset is fixed upstream.

Changelog

CHANGELOG entry: Fixed an issue where the Predict bet slip would unexpectedly reopen during a pay-with-any-token deposit and remain open after the order completed. Background failures now surface a "Failed to place prediction" toast with a Retry action that reopens the slip with the order-failed banner; if the user doesn't tap Retry, the toast auto-dismisses and the order error is cleared automatically.

Related issues

Fixes:
Jira Ticket: https://consensyssoftware.atlassian.net/browse/PRED-883

Manual testing steps

Feature: Predict bet slip stays closed during PWAT deposit; failures show a Retry toast

  Background:
    Given the user has the predictBottomSheet feature flag enabled
    And the user is on a Predict market

  Scenario: Successful PWAT bet does not reopen the slip
    Given the user has chosen an external token (e.g. ETH) as the payment method
    When the user enters an amount and taps Confirm
    Then the bet slip closes via animation
    And the "Prediction in progress" toast appears
    When the deposit and order confirm on-chain
    Then the loading toast is replaced by the "Prediction placed" success toast
    And the bet slip does NOT reopen at any point during the flow

  Scenario: Background failure surfaces a Retry toast that reopens the slip
    Given the user has confirmed a PWAT bet and the slip has closed
    When the order fails in the background
    Then a "Failed to place prediction" toast appears on a soft red avatar background
    And the toast shows a "Transaction failed. Please try again." description
    And the toast shows a "Retry" link inline on the right
    When the user taps Retry within the toast's visibility window
    Then the bet slip reopens at the same market with the inline "Order failed" banner and a Retry CTA

  Scenario: User ignores the failure toast — error auto-clears
    Given the failure toast is visible
    When the user takes no action for ~3 seconds
    Then the toast auto-dismisses
    And the active order error is cleared automatically
    When the user opens any market's bet slip
    Then no inline order_failed banner is shown (clean state)

  Scenario: Failure while the slip is currently visible
    Given the bet slip is currently open (e.g. the user reopened it manually mid-flight)
    When the order fails
    Then no toast appears (the inline banner inside the slip handles it)

  Scenario: Bottom-sheet flow disabled — legacy failure toast still works
    Given the predictBottomSheet feature flag is OFF
    And the user has confirmed a bet that fails in the background
    Then the legacy "order failed" toast from usePredictToastRegistrations fires
    And the bottom-sheet provider's toast does NOT fire

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 — PredictPreviewSheetContext.test.tsx (28 tests, including a dedicated failure toast (state-based trigger) suite and a failure toast auto-clear timer suite using jest.useFakeTimers()) and updated usePredictToastRegistrations.test.tsx for the suppression branch. Coverage on touched files: rerun yarn jest --coverage after final cleanup and update.
• I've documented my code using JSDoc format if applicable — provider helpers, the clearErrorTimerRef rationale, and the state-based trigger comment block.
• 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 — N/A, no new long-running operations introduced.

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.