chore(runway): cherry-pick feat(predict): cp-7.62.0 integrate UI components into game details view (#24603)

- feat(predict): cp-7.62.0 integrate UI components into game details
view (#24595)

## **Description**

This PR integrates the visual UI components into
`PredictGameDetailsContent` for 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:**
- Wrapped component with `PredictSportTeamGradient` for team-colored
backgrounds
- Added `PredictSportScoreboard` at top showing game state, scores, and
possession
- Added `PredictGameChart` below scoreboard for price history
visualization
- Added `PredictPicks` section showing user positions with Cash Out
functionality
- Passed team colors to footer for gradient background
- Added guards for undefined `market.game` and empty outcomes

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-481

## **Manual testing steps**

```gherkin
Feature: Game Details View Integration

  Scenario: user views game details for an NFL game
    Given user is on the Predict market list screen
    And there is an NFL game market available

    When user taps on the NFL game market
    Then user sees the game details screen with:
      - Team-colored gradient background
      - Scoreboard showing team abbreviations and scores
      - Price history chart with team colors
      - "Your picks" section (if user has positions)
      - Footer with team betting buttons

  Scenario: user views scoreboard during live game
    Given user is viewing game details for an in-progress game
    
    When the game status is "ongoing"
    Then scoreboard displays current quarter and time
    And scoreboard shows possession indicator
    And scores update in real-time

  Scenario: user cashes out a position
    Given user is viewing game details
    And user has an open position

    When user taps "Cash out" button
    Then user is navigated to the sell preview screen
```

## **Screenshots/Recordings**

### **Before**

N/A - New feature integration

### **After**

<!-- Screenshots to be added after visual verification -->
<img width="387" height="802" alt="Screenshot 2026-01-15 at 3 48 47 PM"

src="https://github.com/user-attachments/assets/672611b5-af8e-45d2-bccf-6ac88b099709"
/>



## **Pre-merge author checklist**

- [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.

## **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]
> Integrates core sports UI into `PredictGameDetailsContent` and
enhances footer visuals.
> 
> - Wraps content with `PredictSportTeamGradient` using team colors;
passes colors to `PredictGameDetailsFooter` which now supports an
optional gradient
> - Adds `PredictSportScoreboard` with mapped `GameState`, possession,
winner, and formatted date/time
> - Renders `PredictGameChart` when exactly two tokens are present; adds
`PredictPicks` section
> - Introduces guards to return `null` when `market.game` is missing or
no outcomes
> - Updates tests and snapshot to cover gradient, scoreboard states,
chart token handling, picks, and footer gradient behavior
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
dc309e8. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[df3e6ba](df3e6ba)

Co-authored-by: Luis Taniça <matallui@gmail.com>

Author: runway-github[bot]