feat(predict): cp-7.62.0 adds PredictMarketSportCard by kevinbluer · Pull Request #24601 · MetaMask/metamask-mobile

kevinbluer · 2026-01-15T23:49:53Z

Description

This PR implements the sports market card component and refactors the scoreboard to derive UI state from API data for the Predict feature.

Key changes:

PredictMarketSportCard - New component displaying sports betting markets with team gradient backgrounds, integrated scoreboard, and dynamic team data (colors, abbreviations)
PredictSportScoreboard refactor - Updated to use centralized types (PredictGameStatus, PredictSportTeam) and derive possession/winner state from props:
- turn prop (team abbreviation) determines possession indicator
- Scores determine winner display when game is final
- Supports 4 UI states: Pre-game (scheduled), In-progress (ongoing), Halftime (ongoing + period: 'HT'), Final (ended)
formatGameStartTime - New utility function for locale-aware date/time formatting of ISO 8601 strings
Type consolidation - Removed PredictSportScoreboard.types.ts in favor of centralized types in types/index.ts
Test coverage - Added comprehensive tests for PredictMarketSportCard, formatGameStartTime, and updated PredictSportScoreboard tests

Architecture improvement:
The scoreboard component now derives UI state (possession, winner) internally from API data (turn, awayScore, homeScore) rather than requiring parent components to compute and pass these values. This reduces coupling and makes the component easier to use with real API responses.

Changelog

CHANGELOG entry: null

Related issues

Fixes: PRED-482

Manual testing steps

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

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.

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.

Note

Implements a new sports market card and simplifies scoreboard integration by deriving UI state directly from API data.

Adds PredictMarketSportCard showing title, gradient, PredictSportScoreboard, conditional action buttons, and navigation; uses formatGameStartTime for date/time
Refactors PredictSportScoreboard to accept gameStatus, period, and turn, deriving PreGame/InProgress/Halftime/Final, possession, and winner internally; removes PredictSportScoreboard.types.ts and re-exports props from implementation
Updates PredictGameDetailsContent to pass gameStatus, period, and turn (removes local game state/possession/winner computations)
Adds formatGameStartTime utility with tests; adds comprehensive tests for the new card and updated scoreboard

^{Written by Cursor Bugbot for commit 2e1d829. This will update automatically on new commits. Configure here.}

…sts (and removes redundant types)

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx

… formatting

… tests

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx

…tMarketSportCard and PredictSportScoreboard components

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

...omponents/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.test.tsx

…ionButtons

github-actions · 2026-01-16T18:16:01Z

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.

github-actions · 2026-01-16T18:17:19Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokePredictions
Risk Level: low
AI Confidence: 95%

click to see 🤖 AI reasoning details

This PR contains changes exclusively within the Predict feature (prediction markets) in the app/components/UI/Predict/ directory. The changes include:

Refactoring PredictSportScoreboard component: Changed the API from using pre-computed enums (GameState, Possession, Winner) to accepting raw data (gameStatus, period, turn) and deriving the UI state internally. This is a clean refactoring that simplifies the component interface.
New PredictMarketSportCard component: A new UI component for displaying sports prediction market cards that uses the refactored scoreboard component.
Updated PredictGameDetailsContent: Adapted to use the new PredictSportScoreboard API.
New utility function: Added formatGameStartTime for formatting game start times.
Comprehensive unit tests: All changes include corresponding unit test updates and new tests.

The changes are:

Self-contained within the Predict feature
Well-tested with unit tests
A refactoring that simplifies the component API without changing functionality
Not touching any critical infrastructure, controllers, or core wallet functionality

The SmokePredictions tag is the appropriate and only necessary tag since all changes are isolated to the predictions feature. No other features or core functionality are affected.

View GitHub Actions results

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

cursor · 2026-01-16T18:23:11Z

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx

+    >
+      <PredictSportTeamGradient
+        awayColor={market.game?.awayTeam.color ?? '#1a2942'}
+        homeColor={market.game?.homeTeam.color ?? '#3d2621'}


Inconsistent fallback colors between gradient and scoreboard

Low Severity

The fallback colors used when market.game is undefined differ between PredictSportTeamGradient (lines 105-106: #1a2942 and #3d2621) and PredictSportScoreboard (lines 122, 126: #1D4E9B and #FC4C02). When game data is missing, the gradient background and team helmet colors will be visually mismatched, creating an inconsistent appearance.

Additional Locations (1)

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx#L120-L126

sonarqubecloud · 2026-01-16T18:45:34Z

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
4 Security Hotspots
85.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

metamaskbot · 2026-01-26T10:05:50Z

Missing release label release-7.62.0 on PR. Adding release label release-7.62.0 on PR and removing other release labels(release-7.63.0), as PR was cherry-picked in branch 7.62.0.

feat(predict): add PredictMarketSportCard component and associated te…

d653619

…sts (and removes redundant types)

metamaskbot added the team-predict Predict team label Jan 15, 2026

kevinbluer marked this pull request as ready for review January 15, 2026 23:50

kevinbluer requested a review from a team as a code owner January 15, 2026 23:50

github-actions bot added the size-XL label Jan 15, 2026

kevinbluer changed the title ~~feat(predict): Add PredictMarketSportCard~~ feat(predict): cp-7.62.0 adds PredictMarketSportCard Jan 15, 2026

cursor bot reviewed Jan 15, 2026

View reviewed changes

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx Outdated Show resolved Hide resolved

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx Outdated Show resolved Hide resolved

kevinbluer added 4 commits January 15, 2026 18:06

chore(predict): addresses linting issue(s)

7aa942d

Merge branch 'main' into feat/predict-nft-game-card

7ad8003

feat(predict): enhance PredictMarketSportCard with outcomes and price…

d8cde80

… formatting

refactor(predict): update PredictSportScoreboard props and associated…

cd8b3ad

… tests

cursor bot reviewed Jan 16, 2026

View reviewed changes

app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx Outdated Show resolved Hide resolved

fix(predict): implement case-insensitive halftime detection in Predic…

3f27157

…tMarketSportCard and PredictSportScoreboard components

cursor bot reviewed Jan 16, 2026

View reviewed changes

...omponents/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.test.tsx Show resolved Hide resolved

kevinbluer added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Jan 16, 2026

kevinbluer added 2 commits January 16, 2026 09:29

Merge branch 'main' into feat/predict-nft-game-card

ec05e10

refactor(PredictMarketSportCard): update sport card to use PredictAct…

1fcc3a9

…ionButtons

matallui approved these changes Jan 16, 2026

View reviewed changes

kevinbluer enabled auto-merge January 16, 2026 16:17

Merge branch 'main' into feat/predict-nft-game-card

2e1d829

cursor bot reviewed Jan 16, 2026

View reviewed changes

kevinbluer added this pull request to the merge queue Jan 16, 2026

Merged via the queue into main with commit 2984b64 Jan 16, 2026
82 of 83 checks passed

kevinbluer deleted the feat/predict-nft-game-card branch January 16, 2026 19:06

github-actions bot locked and limited conversation to collaborators Jan 16, 2026

metamaskbot added the release-7.63.0 Issue or pull request that will be included in release 7.63.0 label Jan 16, 2026

metamaskbot added release-7.62.0 Issue or pull request that will be included in release 7.62.0 and removed release-7.63.0 Issue or pull request that will be included in release 7.63.0 labels Jan 26, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(predict): cp-7.62.0 adds PredictMarketSportCard#24601

feat(predict): cp-7.62.0 adds PredictMarketSportCard#24601
kevinbluer merged 9 commits intomainfrom
feat/predict-nft-game-card

kevinbluer commented Jan 15, 2026 •

edited by cursor bot

Loading

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

github-actions bot commented Jan 16, 2026

Uh oh!

github-actions bot commented Jan 16, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Jan 16, 2026

Uh oh!

sonarqubecloud bot commented Jan 16, 2026

Uh oh!

Uh oh!

metamaskbot commented Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

kevinbluer commented Jan 15, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Jan 16, 2026

Uh oh!

github-actions bot commented Jan 16, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 16, 2026

Choose a reason for hiding this comment

Inconsistent fallback colors between gradient and scoreboard

Uh oh!

sonarqubecloud bot commented Jan 16, 2026

Quality Gate passed

Uh oh!

Uh oh!

metamaskbot commented Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kevinbluer commented Jan 15, 2026 •

edited by cursor bot

Loading