feat(predict): update sports market card UI (#30195)

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

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



https://github.com/user-attachments/assets/37ccf11c-b865-4a86-8c9a-cb84d242a7d2




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

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

#### 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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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]
> **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.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
2eb4496. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matallui

app/components/UI/Predict/components/PredictActionButtons/PredictActionButtons.tsx

@@ -3,7 +3,10 @@ import { Box } from '@metamask/design-system-react-native';
 import PredictBetButtons from './PredictBetButtons';
 import PredictClaimButton from './PredictClaimButton';
 import PredictDetailsButtonsSkeleton from '../PredictDetailsButtonsSkeleton';
-import { PredictActionButtonsProps } from './PredictActionButtons.types';
+import {
+  PredictActionButtonsProps,
+  PredictBetButtonLayout,
+} from './PredictActionButtons.types';
 import { PredictMarketStatus, PredictOutcomeToken } from '../../types';
 import { useLiveMarketPrices } from '../../hooks/useLiveMarketPrices';
 import { isDrawCapableLeague } from '../../constants/sports';
@@ -35,6 +38,9 @@ const PredictActionButtons: React.FC<PredictActionButtonsProps> = ({
   isLoading = false,
   isClaimPending = false,
   isCarousel,
+  buttonLayout,
+  buttonGapClassName,
+  buttonContainerClassName,
   testID = BASE_PREDICT_ACTION_BUTTONS_TEST_IDS.PREDICT_ACTION_BUTTON,
 }) => {
   const isGameMarket = Boolean(market.game);
@@ -172,6 +178,9 @@ const PredictActionButtons: React.FC<PredictActionButtonsProps> = ({
         onBetPress={onBetPress}
         testID={testID}
         isCarousel={isCarousel}
+        buttonLayout={buttonLayout}
+        buttonGapClassName={buttonGapClassName}
+        buttonContainerClassName={buttonContainerClassName}
       />
     );
   }
@@ -184,8 +193,19 @@ function PredictBetButtonsContainer(props: {
   onBetPress: (token: PredictOutcomeToken) => void;
   testID: string;
   isCarousel?: boolean;
+  buttonLayout?: PredictBetButtonLayout;
+  buttonGapClassName?: string;
+  buttonContainerClassName?: string;
 }) {
-  const { buttonConfig, onBetPress, testID, isCarousel } = props;
+  const {
+    buttonConfig,
+    onBetPress,
+    testID,
+    isCarousel,
+    buttonLayout,
+    buttonGapClassName,
+    buttonContainerClassName = 'w-full mt-4',
+  } = props;
   const { yesToken, drawToken, noToken } = buttonConfig;
 
   const onYesPress = useCallback(
@@ -202,7 +222,7 @@ function PredictBetButtonsContainer(props: {
   );
 
   return (
-    <Box twClassName="w-full mt-4">
+    <Box twClassName={buttonContainerClassName}>
       <PredictBetButtons
         yesLabel={buttonConfig.yesLabel}
         yesPrice={buttonConfig.yesPrice}
@@ -217,6 +237,8 @@ function PredictBetButtonsContainer(props: {
         noTeamColor={buttonConfig.noTeamColor}
         testID={`${testID}${PREDICT_ACTION_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON}`}
         isCarousel={isCarousel}
+        layout={buttonLayout}
+        gapClassName={buttonGapClassName}
       />
     </Box>
   );

app/components/UI/Predict/components/PredictActionButtons/PredictActionButtons.types.ts

@@ -7,7 +7,7 @@ import { ButtonBaseSize } from '@metamask/design-system-react-native';
 
 export type PredictBetButtonVariant = 'yes' | 'no' | 'draw';
 
-export type PredictBetButtonLayout = 'inline' | 'stacked';
+export type PredictBetButtonLayout = 'inline' | 'inlineNoSeparator' | 'stacked';
 
 export interface PredictBetButtonProps {
   label: string;
@@ -36,6 +36,8 @@ export interface PredictBetButtonsProps {
   disabled?: boolean;
   testID?: string;
   isCarousel?: boolean;
+  layout?: PredictBetButtonLayout;
+  gapClassName?: string;
 }
 
 export interface PredictClaimButtonProps {
@@ -57,4 +59,7 @@ export interface PredictActionButtonsProps {
   isClaimPending?: boolean;
   testID?: string;
   isCarousel?: boolean;
+  buttonLayout?: PredictBetButtonLayout;
+  buttonGapClassName?: string;
+  buttonContainerClassName?: string;
 }

app/components/UI/Predict/components/PredictActionButtons/PredictBetButton.test.tsx

@@ -174,6 +174,18 @@ describe('PredictBetButton', () => {
       expect(screen.getByText('DRAW · 20¢')).toBeOnTheScreen();
     });
 
+    it('renders inline with no separator', () => {
+      const props = createDefaultProps({
+        label: 'SEA',
+        price: 70,
+        layout: 'inlineNoSeparator',
+      });
+
+      renderWithProvider(<PredictBetButton {...props} />);
+
+      expect(screen.getByText('SEA 70¢')).toBeOnTheScreen();
+    });
+
     it('defaults to stacked layout when layout prop is omitted', () => {
       const props = createDefaultProps({ label: 'Yes', price: 65 });
 

app/components/UI/Predict/components/PredictActionButtons/PredictBetButton.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Button, Text } from '@metamask/design-system-react-native';
+import {
+  Button,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { useTheme } from '../../../../../util/theme';
 import { PredictBetButtonProps } from './PredictActionButtons.types';
@@ -41,6 +45,10 @@ const PredictBetButton: React.FC<PredictBetButtonProps> = ({
   };
 
   const textStyle = tw.style('font-medium text-center', getTextColor());
+  const inlineLabel =
+    layout === 'inlineNoSeparator'
+      ? `${label.toUpperCase()} ${price}¢`
+      : `${label.toUpperCase()} · ${price}¢`;
 
   return (
     <Button
@@ -51,9 +59,15 @@ const PredictBetButton: React.FC<PredictBetButtonProps> = ({
       isFullWidth
       size={size}
     >
-      {layout === 'inline' ? (
-        <Text style={textStyle} numberOfLines={1}>
-          {label.toUpperCase()} · {price}¢
+      {layout === 'inline' || layout === 'inlineNoSeparator' ? (
+        <Text
+          variant={
+            layout === 'inlineNoSeparator' ? TextVariant.BodySm : undefined
+          }
+          style={textStyle}
+          numberOfLines={1}
+        >
+          {inlineLabel}
         </Text>
       ) : (
         <>

app/components/UI/Predict/components/PredictActionButtons/PredictBetButtons.tsx

@@ -26,8 +26,10 @@ const PredictBetButtons: React.FC<PredictBetButtonsProps> = ({
   disabled = false,
   testID = BASE_PREDICT_BET_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON,
   isCarousel,
+  layout,
+  gapClassName = 'w-full gap-3',
 }) => (
-  <Box flexDirection={BoxFlexDirection.Row} twClassName="w-full gap-3">
+  <Box flexDirection={BoxFlexDirection.Row} twClassName={gapClassName}>
     <Box twClassName="flex-1">
       <PredictBetButton
         label={yesLabel}
@@ -38,6 +40,7 @@ const PredictBetButtons: React.FC<PredictBetButtonsProps> = ({
         disabled={disabled}
         testID={`${testID}${PREDICT_BET_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON_YES}`}
         size={isCarousel ? ButtonBaseSize.Md : undefined}
+        layout={layout}
       />
     </Box>
     {drawLabel !== undefined && drawPrice !== undefined && onDrawPress && (
@@ -50,6 +53,7 @@ const PredictBetButtons: React.FC<PredictBetButtonsProps> = ({
           disabled={disabled}
           testID={`${testID}${PREDICT_BET_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON_DRAW}`}
           size={isCarousel ? ButtonBaseSize.Md : undefined}
+          layout={layout}
         />
       </Box>
     )}
@@ -63,6 +67,7 @@ const PredictBetButtons: React.FC<PredictBetButtonsProps> = ({
         disabled={disabled}
         testID={`${testID}${PREDICT_BET_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON_NO}`}
         size={isCarousel ? ButtonBaseSize.Md : undefined}
+        layout={layout}
       />
     </Box>
   </Box>

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

@@ -187,10 +187,8 @@ describe('PredictGameDetailsFooter', () => {
 
       renderWithProvider(<PredictGameDetailsFooter {...props} />);
 
-      expect(screen.getByText('YES')).toBeOnTheScreen();
-      expect(screen.getByText('65¢')).toBeOnTheScreen();
-      expect(screen.getByText('NO')).toBeOnTheScreen();
-      expect(screen.getByText('35¢')).toBeOnTheScreen();
+      expect(screen.getByText('YES 65¢')).toBeOnTheScreen();
+      expect(screen.getByText('NO 35¢')).toBeOnTheScreen();
     });
 
     it('renders team buttons for game market', () => {
@@ -200,8 +198,8 @@ describe('PredictGameDetailsFooter', () => {
 
       renderWithProvider(<PredictGameDetailsFooter {...props} />);
 
-      expect(screen.getByText('SEA')).toBeOnTheScreen();
-      expect(screen.getByText('DEN')).toBeOnTheScreen();
+      expect(screen.getByText('SEA 65¢')).toBeOnTheScreen();
+      expect(screen.getByText('DEN 35¢')).toBeOnTheScreen();
     });
 
     it('calls onBetPress when bet button is pressed', () => {

app/components/UI/Predict/components/PredictGameDetailsFooter/PredictGameDetailsFooter.tsx

@@ -106,6 +106,9 @@ const PredictGameDetailsFooter: React.FC<PredictGameDetailsFooterProps> = ({
         claimableAmount={claimableAmount}
         isLoading={isLoading}
         isClaimPending={isClaimPending}
+        buttonLayout="inlineNoSeparator"
+        buttonGapClassName="w-full gap-2"
+        buttonContainerClassName="w-full mt-2"
         testID={`${testID}${PREDICT_GAME_DETAILS_FOOTER_TEST_IDS.ACTION_BUTTONS}`}
       />
     </Box>