chore(runway): cherry-pick fix(predict): improve Predict buy-with-any-token UX from UAT issues cp-7.73.0#28371
Conversation
…-token UX from UAT issues cp-7.73.0 (#28302) <!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Addresses several UAT issues in the Predict buy-with-any-token flow: - **Auto-select best payment token**: New `usePredictDefaultPaymentToken` hook auto-selects the token with the highest fiat balance when Predict balance is below MINIMUM_BET ($1), instead of requiring manual selection. Resets to Predict balance when sufficient. - **Optimistic positions on deposit**: Creates optimistic positions from the order preview at deposit time so the position appears immediately in the portfolio while the deposit confirms. Clears optimistic positions on failure (both direct order failures and failed deposit-and-order transactions). - **Navigate back on deposit**: Navigate back when the deposit-and-order flow begins, so the user isn't stuck on the buy form. - **Keep token selection always enabled**: Removes the `canSelectToken` gate — the pay-with-token row is now always interactive (disabled only while placing an order). - **"Predict balance first" hint**: Shows "Your Predict balance will be used first" below the pay-with row when an external token is selected, so users understand the payment order. - **Deposit amount guards**: `depositAmount` now returns 0 when the preview is unavailable or the bet is below minimum, preventing premature deposit calculations and stale values from triggering the deposit flow. - **Updated insufficient funds messaging**: Error messages now suggest trying a different token when funds are insufficient. - **Fix text overflow on Polymarket terms**: Nests the "learn more" link inside the disclaimer text and adds horizontal padding to prevent overflow. - **Fix premature payment token reset**: Adds a `totalPayForPredictBalance > 0` guard so the auto-reset effect only fires when there is an actual bet amount, preventing the selected token from being cleared immediately after selection. - **Depositing toast notification**: Shows a "Prediction in progress" toast with spinner when the deposit phase begins and invalidates position queries to reflect the optimistic position. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: ## **Manual testing steps** ```gherkin 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** https://www.loom.com/share/c25681fd77a444e496f999a23a55b0e6 <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Updates buy-with-any-token order state transitions, optimistic position caching, and navigation/toast behavior; mistakes could cause incorrect UI state or stale/phantom positions during deposit/order failures. > > **Overview** > Improves the *buy-with-any-token* flow by introducing a new `order` event status `depositing` and publishing it when the flow transitions into the deposit phase, with a matching “Prediction in progress” toast and positions query invalidation. > > Adds preview-based **optimistic positions** during deposit via `PolymarketProvider.createOptimisticPositionFromPreview`, and ensures cleanup via `clearOptimisticPosition` when `placeOrder` fails or when a `depositAndOrder` transaction fails. > > Refines buy screen UX: auto-selects a default payment token when Predict balance is below `MINIMUM_BET` (new `usePredictDefaultPaymentToken`), removes the `canSelectToken` gate (row only disabled while placing), navigates back when entering `DEPOSITING`, adds a “Predict balance will be used first” hint, guards deposit amount calculation until fees/minimum bet are available, and updates insufficient-funds copy to suggest trying another token; also adjusts the Polymarket TOS disclaimer layout to prevent overflow. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 7f97218. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
|
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. |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## release/7.73.0 #28371 +/- ##
=================================================
Coverage ? 82.91%
=================================================
Files ? 4874
Lines ? 126403
Branches ? 28343
=================================================
Hits ? 104808
Misses ? 14388
Partials ? 7207 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - skip-smart-e2e-selection label found All E2E tests pre-selected. |
|
✅ E2E Fixture Validation — Schema is up to date |
|



Description
Addresses several UAT issues in the Predict buy-with-any-token flow:
usePredictDefaultPaymentTokenhook auto-selects the token with thehighest fiat balance when Predict balance is below MINIMUM_BET ($1),
instead of requiring manual selection. Resets to Predict balance when
sufficient.
the order preview at deposit time so the position appears immediately in
the portfolio while the deposit confirms. Clears optimistic positions on
failure (both direct order failures and failed deposit-and-order
transactions).
flow begins, so the user isn't stuck on the buy form.
canSelectTokengate — the pay-with-token row is now always interactive (disabled only
while placing an order).
used first" below the pay-with row when an external token is selected,
so users understand the payment order.
depositAmountnow returns 0 when thepreview is unavailable or the bet is below minimum, preventing premature
deposit calculations and stale values from triggering the deposit flow.
trying a different token when funds are insufficient.
inside the disclaimer text and adds horizontal padding to prevent
overflow.
totalPayForPredictBalance > 0guard so the auto-reset effect onlyfires when there is an actual bet amount, preventing the selected token
from being cleared immediately after selection.
toast with spinner when the deposit phase begins and invalidates
position queries to reflect the optimistic position.
Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
https://www.loom.com/share/c25681fd77a444e496f999a23a55b0e6
Before
After
Pre-merge author checklist
Docs and MetaMask Mobile
Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Pre-merge reviewer checklist
app, test code being changed).
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Note
Medium Risk
Updates buy-with-any-token order state transitions, optimistic
position caching, and navigation/toast behavior; mistakes could cause
incorrect UI state or stale/phantom positions during deposit/order
failures.
Overview
Improves the buy-with-any-token flow by introducing a new
orderevent status
depositingand publishing it when the flow transitionsinto the deposit phase, with a matching “Prediction in progress” toast
and positions query invalidation.
Adds preview-based optimistic positions during deposit via
PolymarketProvider.createOptimisticPositionFromPreview, and ensurescleanup via
clearOptimisticPositionwhenplaceOrderfails or when adepositAndOrdertransaction fails.Refines buy screen UX: auto-selects a default payment token when
Predict balance is below
MINIMUM_BET(newusePredictDefaultPaymentToken), removes thecanSelectTokengate (rowonly disabled while placing), navigates back when entering
DEPOSITING,adds a “Predict balance will be used first” hint, guards deposit amount
calculation until fees/minimum bet are available, and updates
insufficient-funds copy to suggest trying another token; also adjusts
the Polymarket TOS disclaimer layout to prevent overflow.
Written by Cursor
Bugbot for commit
7f97218. This will update automatically
on new commits. Configure
here.