feat(predict): update sports market card UI

[matallui]

Description

Updates the Predict sports/game market card UI for World Cup match markets to match the provided Figma designs and aligns the game details footer action buttons with the same button treatment.

This includes:

• Reworking PredictMarketSportCard to use the sports match card layout with team logos, scheduled/live states, draw support, and inline team-colored outcome buttons.
• Adding guarded buy-sheet handling directly from the sport card outcome buttons.
• Adding an inlineNoSeparator action-button layout so PredictGameDetailsFooter buttons match the card button format (CAN 55¢, DRAW 24¢, BIH 22¢).
• Updating focused tests for sport card rendering, buy actions, live state, and footer/action-button layouts.

Changelog

CHANGELOG entry: Updated World Cup prediction cards and game detail action buttons to match the sports match design.

Related issues

Fixes: PRED-875, PRED-866

Manual testing steps

Feature: World Cup sports match cards

  Scenario: user views World Cup match markets
    Given the Predict World Cup feed contains match/game markets
    When user opens the World Cup feed
    Then each game market is displayed with team logos, match schedule/live state, and team-colored outcome buttons

  Scenario: user opens a World Cup game detail screen
    Given user taps a World Cup match card
    When the game details screen opens
    Then the bottom prediction buttons match the card button treatment with inline label and cents price

Screenshots/Recordings

Before

N/A

After

Screen.Recording.2026-05-14.at.1.20.38.PM.mov

Validation

• yarn lint:tsc --pretty false
• Focused ESLint on changed files
• yarn jest app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCardWrapper.test.tsx --runInBand
• yarn jest app/components/UI/Predict/components/PredictActionButtons/PredictBetButton.test.tsx app/components/UI/Predict/components/PredictActionButtons/PredictBetButtons.test.tsx app/components/UI/Predict/components/PredictActionButtons/PredictActionButtons.test.tsx app/components/UI/Predict/components/PredictGameDetailsFooter/PredictGameDetailsFooter.test.tsx --runInBand

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.

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
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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

Medium Risk
Moderate risk due to a substantial rewrite of PredictMarketSportCard rendering and new guarded buy-sheet trigger paths that could affect navigation and bet entry UX.

Overview
Updates Predict’s sports match presentation by rewriting PredictMarketSportCard to a new layout with team logos, scheduled vs live states (including live score updates), optional draw support, and inline outcome buttons that can open the preview/buy sheet via guarded actions.

Extends action button APIs to support a new inlineNoSeparator layout plus customizable container/gap styling, and applies this in PredictGameDetailsFooter so footer bet buttons match the card’s “TEAM 60¢” format.

Adds the PulsingLiveDot component and adjusts World Cup tabs to use it for live indicators; updates and refocuses tests to cover the new card rendering, buy-button behavior, and button layout variants.

^{Reviewed by Cursor Bugbot for commit 2eb4496. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

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-commenter]

Codecov Report

❌ Patch coverage is 71.84466% with 29 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.82%. Comparing base (3751d9a) to head (9b9bc96).
⚠️ Report is 194 commits behind head on main.

Files with missing lines	Patch %	Lines
.../PredictMarketSportCard/PredictMarketSportCard.tsx	69.47%	13 Missing and 16 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #30195      +/-   ##
==========================================
+ Coverage   81.54%   81.82%   +0.27%     
==========================================
  Files        5343     5408      +65     
  Lines      142128   144436    +2308     
  Branches    32411    33008     +597     
==========================================
+ Hits       115899   118179    +2280     
+ Misses      18299    18155     -144     
- Partials     7930     8102     +172     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePredict
• Risk Level: medium
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 12 changed files are exclusively within the app/components/UI/Predict/ directory, making this a well-scoped Predict feature change.

Key changes:

1. PredictBetButton/PredictBetButtons/PredictActionButtons: New inlineNoSeparator layout variant added, plus configurable gap/container class props. This changes how bet buttons render in the game details footer.
2. PredictMarketSportCard: Major refactor - replaced PredictSportScoreboard + PredictSportCardFooter sub-components with a fully inline implementation. Now includes live game score updates via useLiveGameUpdates, team logos via PredictSportTeamLogo, buy buttons with team colors, and PulsingLiveDot for live status.
3. PulsingLiveDot: New animated component (Animated.loop with ripple effect) for live game indicators.
4. PredictGameDetailsFooter: Uses new inlineNoSeparator layout with custom spacing.
5. PredictWorldCup: Replaced inline LiveIndicator with the new PulsingLiveDot component.

Tag selection rationale:

• SmokePredictions: Primary tag - all changes are in the Predict feature, affecting market cards, action buttons, and game details footer which are core to the prediction market flow (opening positions, viewing markets).
• SmokeWalletPlatform: Required per SmokePredictions tag description - "Predictions is also a section inside the Trending tab (SmokeWalletPlatform); changes to Predictions views affect Trending."
• SmokeConfirmations: Required per SmokePredictions tag description - "opening/closing positions are on-chain transactions."

No other tags are warranted as changes are isolated to the Predict UI components with no impact on accounts, networks, swaps, browser, snaps, or other wallet features.

Performance Test Selection:
The PredictMarketSportCard component now includes an animated PulsingLiveDot (Animated.loop with parallel scale and opacity animations) and live game update polling via useLiveGameUpdates. These additions could impact rendering performance in the prediction market list, especially when multiple sport cards are displayed simultaneously with active animations. The @PerformancePredict tag covers prediction market list loading and market details, making it directly relevant to validate that these UI additions don't degrade performance.

View GitHub Actions results

[cursor]

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 2eb4496. Configure here.}

[cursor]

Local formatCents duplicates existing utility function

Low Severity

The newly added formatCents helper duplicates an existing utility already imported by PredictMarketOutcome. Grep confirms formatCents is defined/exported elsewhere and imported in PredictMarketOutcome/PredictMarketOutcome.tsx. Having two independent copies means a fix to the rounding logic or format in one location won't propagate to the other.

 

^{Reviewed by Cursor Bugbot for commit 2eb4496. Configure here.}

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
84.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud