feat(predict): add crypto up/down details UI#30005
Open
ghgoodreau wants to merge 30 commits into
Open
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
|
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. |
ghgoodreau
added
team-predict
Co-authored-by: Cursor <cursoragent@cursor.com>
This was referenced May 11, 2026
Co-authored-by: Cursor <cursoragent@cursor.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## predict/crypto-data-plumbing #30005 +/- ##
===============================================================
Coverage ? 81.55%
===============================================================
Files ? 5349
Lines ? 142649
Branches ? 32592
===============================================================
Hits ? 116341
Misses ? 18325
Partials ? 7983 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
pull Bot
pushed a commit
to Reality2byte/metamask-mobile
that referenced
this pull request
May 12, 2026
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until this PR meets the canonical Definition of Ready For Review in `docs/readme/ready-for-review.md`. In short: the template must be materially complete (not just section titles present), all status checks must be currently passing, and the only expected follow-up commits must be reviewer-driven. --> ## **Description** This PR updates the shared Liveline chart foundation used by the Predict crypto up/down work. It makes the React Native wrapper and WebView template support imperative live-point updates, queued messages before chart readiness, native loading behavior, and safer callback handling. # TODO 1. This PR is stack item 1/3 and should merge before MetaMask#30004 and MetaMask#30005. 2. Keep this PR as draft until the stacked PRs are validated and all required checks are passing. <!-- 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: N/A - stacked Predict crypto up/down implementation split from MetaMask#29436. ## **Manual testing steps** ```gherkin Feature: Liveline chart foundation Scenario: chart initializes and accepts live data updates Given a Predict screen renders a Liveline chart with historical data When the chart WebView becomes ready and live price points arrive Then the chart remains mounted and updates without showing an error state ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** N/A ### **After** N/A ## **Pre-merge author checklist** <!-- Every checklist item must be consciously assessed before marking this PR as "Ready for review". A checked box means you deliberately considered that responsibility, not that you literally performed every action listed. Unchecked boxes are ambiguous: they are not an implicit "N/A" and they are not a silent "skip". See `docs/readme/ready-for-review.md` for the full checklist semantics. --> - [x] 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). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. #### 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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist** <!-- Reviewer checklist items follow the same semantics as the author checklist: an unchecked box is ambiguous, a checked box means the reviewer consciously assessed that responsibility. See `docs/readme/ready-for-review.md`. --> - [ ] 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** > Moderate risk because it changes the RN↔WebView messaging contract and rendering flow (adds queued imperative updates and live-mode state), which could affect chart correctness, loading states, and performance. > > **Overview** > Updates `LivelineChart` to support an imperative ref API (`appendPoint`, `clearData`) that sends incremental WebView messages, queues them until `CHART_READY`, and flushes deterministically before firing `onChartReady`. > > Extends the RN↔WebView protocol and template to handle `APPEND_POINT`/`CLEAR_DATA`, maintain a live-mode data buffer with merge/trim behavior, and optionally hide in-chart controls via the new `hideControls` prop (CSS body class). > > Adjusts loading and callback handling: keeps a native loading overlay while `loading` is true, stabilizes `onMessage` while always using latest callback props, and adds dev-only `PERF` telemetry logging plus expanded unit tests for the new behaviors. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit ce2a7e2. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 34db32a. Configure here.
Co-authored-by: Cursor <cursoragent@cursor.com>
…to predict/crypto-updown-details-ui
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Key changes:
Tag selection reasoning:
The changes are medium risk - they're contained within the Predict feature but involve significant functional additions (live chart rendering, market rollover logic, action buttons) that could affect the prediction market user flows. Performance Test Selection: |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds the crypto up/down market details UI for Predict. It introduces the crypto up/down chart and details screen, wires crypto markets into the existing market details route, adds time-slot selection, price summary, target/current price display, and buy/claim actions.
It also includes focused UI test coverage and a small Bugbot cleanup so outcome status checks use the outcome status type rather than the market status enum.
TODO
Changelog
CHANGELOG entry: Added crypto up/down market details with live charting in Predict
Related issues
Fixes: N/A - stacked Predict crypto up/down implementation split from #29436.
Manual testing steps
Screenshots/Recordings
Before
N/A
After
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an exampleFor performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Medium Risk
Adds a new crypto market details flow with time-based market selection and live price handling; moderate risk due to new UI/state timing logic and changes to live chart data retention/formatting.
Overview
Adds a dedicated crypto up/down market details screen that includes a time-slot picker, a target/current price summary (with delta), and an embedded live
LivelineChart, plus optional buy/claim actions viaPredictMarketDetailsActions.Updates crypto live chart data handling in
useCryptoUpDownChartDatato use a fixed 30s live window with bounded retention, preserve millisecond sub-second timestamps, and de-duplicate/re-time repeated “current” timestamps to keep points monotonic.Tightens shared Predict logic: introduces
OPEN_PREDICT_OUTCOME_STATUSfor consistent outcome filtering, improvesuseGameDetailsTabsto avoid out-of-bounds tab indices and hide Outcomes when disabled, tweaksTimeSlotPickerheight/layout, and expands unit test coverage for the new UI and chart behaviors.Reviewed by Cursor Bugbot for commit c4bf19d. Bugbot is set up for automated code reviews on this repo. Configure here.