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

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **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**

<!--
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:
[PRED-482](https://consensyssoftware.atlassian.net/browse/PRED-482)

## **Manual testing steps**

```gherkin
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**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<img width="746" height="400" alt="image"
src="https://github.com/user-attachments/assets/f1aa5ea7-24f3-41dd-8012-2885bcc50f93"
/>

<img width="748" height="408" alt="image"
src="https://github.com/user-attachments/assets/65f96c30-03fc-4478-be7f-9d92dcd40ffa"
/>

<img width="734" height="410" alt="image"
src="https://github.com/user-attachments/assets/b6cb2c87-dae1-4465-bcfe-2f82dc18f1e0"
/>


## **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.


[PRED-482]:
https://consensyssoftware.atlassian.net/browse/PRED-482?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!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
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2e1d829. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

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

Author: 2 people

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

@@ -92,32 +92,39 @@ jest.mock('../PredictSportTeamGradient', () => {
 
 jest.mock('../PredictSportScoreboard', () => {
   const { View } = jest.requireActual('react-native');
-  const actualModule = jest.requireActual(
-    '../PredictSportScoreboard/PredictSportScoreboard.types',
-  );
   return {
     __esModule: true,
     default: function MockPredictSportScoreboard({
       testID,
-      gameState,
+      gameStatus,
+      period,
       awayTeam,
       homeTeam,
     }: {
       testID?: string;
-      gameState?: string;
+      gameStatus?: string;
+      period?: string | null;
       awayTeam?: { abbreviation: string };
       homeTeam?: { abbreviation: string };
     }) {
+      // Derive UI state label from gameStatus + period (same logic as real component)
+      let stateLabel = 'undefined';
+      if (gameStatus === 'scheduled') {
+        stateLabel = 'PreGame';
+      } else if (gameStatus === 'ended') {
+        stateLabel = 'Final';
+      } else if (gameStatus === 'ongoing' && period === 'HT') {
+        stateLabel = 'Halftime';
+      } else if (gameStatus === 'ongoing') {
+        stateLabel = 'InProgress';
+      }
       return (
         <View
           testID={testID}
-          accessibilityHint={`state:${gameState ?? 'undefined'},away:${awayTeam?.abbreviation ?? 'undefined'},home:${homeTeam?.abbreviation ?? 'undefined'}`}
+          accessibilityHint={`state:${stateLabel},away:${awayTeam?.abbreviation ?? 'undefined'},home:${homeTeam?.abbreviation ?? 'undefined'}`}
         />
       );
     },
-    GameState: actualModule.GameState,
-    Possession: actualModule.Possession,
-    Winner: actualModule.Winner,
   };
 });
 

app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.tsx

@@ -26,43 +26,9 @@ import PredictGameAboutSheet from '../PredictGameDetailsFooter/PredictGameAboutS
 import { usePredictBottomSheet } from '../../hooks/usePredictBottomSheet';
 import { PredictGameDetailsContentProps } from './PredictGameDetailsContent.types';
 import PredictSportTeamGradient from '../PredictSportTeamGradient';
-import PredictSportScoreboard, {
-  GameState,
-  Possession,
-  Winner,
-} from '../PredictSportScoreboard';
+import PredictSportScoreboard from '../PredictSportScoreboard';
 import PredictGameChart from '../PredictGameChart';
 import PredictPicks from '../PredictPicks/PredictPicks';
-import { PredictGameScore, PredictGameStatus } from '../../types';
-
-const getGameState = (
-  status: PredictGameStatus,
-  period: string | null,
-): GameState => {
-  if (status === 'scheduled') return GameState.PreGame;
-  if (status === 'ended') return GameState.Final;
-  if (period?.toUpperCase() === 'HT') return GameState.Halftime;
-  return GameState.InProgress;
-};
-
-const getPossession = (
-  turn: string | undefined,
-  awayAbbr: string,
-  homeAbbr: string,
-): Possession => {
-  if (!turn) return Possession.None;
-  const lowerTurn = turn.toLowerCase();
-  if (lowerTurn === awayAbbr.toLowerCase()) return Possession.Away;
-  if (lowerTurn === homeAbbr.toLowerCase()) return Possession.Home;
-  return Possession.None;
-};
-
-const getWinner = (score: PredictGameScore | null): Winner => {
-  if (!score) return Winner.None;
-  if (score.away > score.home) return Winner.Away;
-  if (score.home > score.away) return Winner.Home;
-  return Winner.None;
-};
 
 const formatGameDateTime = (
   startTime: string,
@@ -120,15 +86,6 @@ const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
     return null;
   }
 
-  const gameState = getGameState(game.status, game.period);
-  const possession = getPossession(
-    game.turn,
-    game.awayTeam.abbreviation,
-    game.homeTeam.abbreviation,
-  );
-  const winner =
-    gameState === GameState.Final ? getWinner(game.score) : Winner.None;
-
   return (
     <PredictSportTeamGradient
       awayColor={game.awayTeam.color}
@@ -194,13 +151,13 @@ const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
             }}
             awayScore={game.score?.away}
             homeScore={game.score?.home}
-            gameState={gameState}
+            gameStatus={game.status}
+            period={game.period}
             eventTitle={market.title}
             date={gameDateTime?.date}
             time={gameDateTime?.time}
             quarter={game.period ?? undefined}
-            possession={possession}
-            winner={winner}
+            turn={game.turn}
             testID="game-scoreboard"
           />