feat(predict): cp-7.62.0 integrate UI components into game details view#24595
feat(predict): cp-7.62.0 integrate UI components into game details view#24595
Conversation
…tails - Wrap PredictGameDetailsContent with PredictSportTeamGradient - Add PredictSportScoreboard at top of ScrollView with game state logic - Add PredictGameChart below scoreboard with token IDs - Pass team colors to footer for gradient background - Add guard for undefined market.game - Fix React hooks exhaustive-deps warning in tokenIds useMemo
- Add PredictPicks component below chart section - Shows user positions with Cash Out functionality - Matches Figma design for 'Your picks' section
|
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. |
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsThe changes are entirely contained within the Predict feature components (PredictGameDetailsContent and PredictGameDetailsFooter). The modifications add UI enhancements including:
All changes are isolated to the Predictions feature with no impact on core wallet functionality, controllers, Engine, or other features. The unit tests have been updated to cover the new functionality. The SmokePredictions tag is the appropriate and only necessary tag to run, as it covers the prediction markets E2E tests that would validate these UI changes. |
| }, | ||
| ]} | ||
| testID="game-chart" | ||
| /> |
There was a problem hiding this comment.
Chart series config order mismatched with token order
Medium Severity
The seriesConfig array is hardcoded as [awayTeam, homeTeam], but tokenIds is derived from outcome.tokens in whatever order they appear from the API. The PredictGameChart component maps seriesConfig[index] directly to tokenIds[index], so if the token order doesn't match [away, home], the chart will display swapped team colors. Looking at the test data, tokens are ordered [Team A, Team B] where Team A is homeTeam and Team B is awayTeam, causing the home team's price data to render with the away team's color.
| gameState={gameState} | ||
| eventTitle={market.title} | ||
| date={gameDateTime?.date} | ||
| time={gameDateTime?.time} |
There was a problem hiding this comment.
Elapsed game time not passed during live games
Medium Severity
The scoreboard receives time={gameDateTime?.time} which is always the game's start time (e.g., "8:00 PM EST"). During live games (InProgress state), the scoreboard displays {quarter} • {time}, so it would incorrectly show "Q2 • 8:00 PM EST" instead of the elapsed game clock "Q2 • 5:30". The game.elapsed field contains the actual game clock time but is never passed to the scoreboard component.
|
|
Getting this merged to complete the UI integration and will address bugs in separate PRs. |
Description
This PR integrates the visual UI components into
PredictGameDetailsContentfor the Live NFL Sports feature in Prediction Markets. The changes add team gradient backgrounds, a live scoreboard, price history chart, and user positions section to the game details screen.What changed:
PredictSportTeamGradientfor team-colored backgroundsPredictSportScoreboardat top showing game state, scores, and possessionPredictGameChartbelow scoreboard for price history visualizationPredictPickssection showing user positions with Cash Out functionalitymarket.gameand empty outcomesChangelog
CHANGELOG entry: null
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/PRED-481
Manual testing steps
Screenshots/Recordings
Before
N/A - New feature integration
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Integrates core game UI into
PredictGameDetailsContentand enhances footer styling/behavior.PredictSportTeamGradientand passes team colors toPredictGameDetailsFooter(conditional gradient rendering)PredictSportScoreboardwith derivedgameState, possession, and winner; formats date/time fromstartTimePredictGameChartwhen exactly two token IDs exist; addsPredictPickssectionnullwhenmarket.gameis missing oroutcomesis emptyWritten by Cursor Bugbot for commit bbee739. This will update automatically on new commits. Configure here.