chore(runway): cherry-pick fix(predict): cp-7.62.0 display user positions in sport market cards (#24895)

- fix(predict): cp-7.62.0 display user positions in sport market cards
(#24853)

## **Description**

This PR integrates user positions into `PredictMarketSportCard` with
conditional rendering of action buttons based on position state.

**Problem**: Sport market cards always showed bet buttons regardless of
whether the user had open positions.

**Solution**: Created a new `PredictSportCardFooter` component that:
- Fetches positions via `usePredictPositions`
- Shows skeleton loader while positions are loading (prevents flash of
bet buttons → picks)
- Conditionally renders UI based on market status and positions:

| Market Status | Positions | Rendered UI |
|---------------|-----------|-------------|
| `open` | None | Bet buttons |
| `open` | Has open positions | Positions only (no buttons) |
| `closed` | Any | Positions only (if any) |
| `resolved` | Has claimable positions | Positions + Claim button |

## **Changelog**

CHANGELOG entry: null

## **Related issues**

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

## **Manual testing steps**

```gherkin
Feature: Sport Market Card Position Display

  Scenario: user sees bet buttons when no positions exist
    Given user has no positions on a sport market
    When user views the sport market card
    Then user sees Yes/No bet buttons

  Scenario: user sees positions when they have open positions
    Given user has open positions on a sport market
    When user views the sport market card
    Then user sees their positions displayed
    And user does not see bet buttons

  Scenario: user sees claim button when positions are claimable
    Given user has claimable positions on a resolved sport market
    When user views the sport market card
    Then user sees their positions displayed
    And user sees a Claim button with the claimable amount

  Scenario: user sees skeleton while positions load
    Given user opens the predict feed
    When sport market cards are loading
    Then user sees skeleton placeholders in card footers
    And user does not see a flash of bet buttons
```

## **Screenshots/Recordings**

### **Before**

<!-- Cards always showed bet buttons, then flashed to positions when
loaded -->

### **After**

<!-- Cards show skeleton → then positions (or buttons if no positions)
-->
<img width="382" height="805" alt="Screenshot 2026-01-16 at 10 17 34 PM"

src="https://github.com/user-attachments/assets/4732657b-ccf5-4272-ae75-53dd9822d330"
/>


## **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 position-aware footer into sport market cards and refines
picks rendering to avoid UI flash and enable claims.
> 
> - Introduces `PredictSportCardFooter` used by `PredictMarketSportCard`
to: fetch positions (`usePredictPositions`), show a skeleton while
loading, and render `PredictPicksForCard`, bet buttons, or a claim
button based on market/position state; resolves `entryPoint` (overrides
with trending when applicable)
> - Removes inline action handling from `PredictMarketSportCard`;
delegates to `PredictSportCardFooter`
> - Enhances `PredictPicksForCard` to accept optional `positions`,
`showSeparator`, disable internal fetching when positions are provided,
return `null` when no positions, and display `currentValue` instead of
`amount`
> - Adds comprehensive tests for footer behavior, navigation/guarded
actions, claim flow, and updated picks behavior
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c2516ae. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[2a9d9ea](2a9d9ea)

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

Author: runway-github[bot]

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

@@ -7,7 +7,6 @@ import { PredictEventValues } from '../../constants/eventNames';
 import PredictMarketSportCard from './';
 import Routes from '../../../../../constants/navigation/Routes';
 
-// Mock navigation
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
@@ -16,7 +15,6 @@ jest.mock('@react-navigation/native', () => ({
   }),
 }));
 
-// Mock TrendingFeedSessionManager
 const mockIsFromTrending = jest.fn();
 jest.mock('../../../Trending/services/TrendingFeedSessionManager', () => ({
   __esModule: true,
@@ -29,38 +27,6 @@ jest.mock('../../../Trending/services/TrendingFeedSessionManager', () => ({
   },
 }));
 
-// Mock formatGameStartTime for consistent test results across locales
-jest.mock('../../utils/format', () => ({
-  ...jest.requireActual('../../utils/format'),
-  formatGameStartTime: jest.fn((startTime: string | undefined) => {
-    if (!startTime) {
-      return { date: 'TBD', time: '' };
-    }
-    // Return predictable values for tests
-    return { date: 'Sun, Feb 8', time: '3:30 PM' };
-  }),
-}));
-
-// Mock usePredictActionGuard
-const mockExecuteGuardedAction = jest.fn((action: () => void) => action());
-jest.mock('../../hooks/usePredictActionGuard', () => ({
-  usePredictActionGuard: () => ({
-    executeGuardedAction: mockExecuteGuardedAction,
-    isEligible: true,
-    hasNoBalance: false,
-  }),
-}));
-
-// Mock useLiveMarketPrices
-jest.mock('../../hooks/useLiveMarketPrices', () => ({
-  useLiveMarketPrices: () => ({
-    prices: new Map(),
-    getPrice: jest.fn(),
-    isConnected: false,
-    lastUpdateTime: null,
-  }),
-}));
-
 jest.mock('../PredictSportScoreboard/PredictSportScoreboard', () => {
   const { View, Text } = jest.requireActual('react-native');
   return {
@@ -87,6 +53,28 @@ jest.mock('../PredictSportScoreboard/PredictSportScoreboard', () => {
   };
 });
 
+jest.mock('../PredictSportCardFooter', () => {
+  const { View, Text } = jest.requireActual('react-native');
+  return {
+    PredictSportCardFooter: function MockPredictSportCardFooter({
+      market,
+      entryPoint,
+      testID,
+    }: {
+      market: { id: string };
+      entryPoint?: string;
+      testID?: string;
+    }) {
+      return (
+        <View testID={testID ?? 'mock-footer'}>
+          <Text testID="mock-footer-market-id">{market.id}</Text>
+          <Text testID="mock-footer-entry-point">{entryPoint}</Text>
+        </View>
+      );
+    },
+  };
+});
+
 const mockMarket: PredictMarketType = {
   id: 'test-market-sport-1',
   providerId: 'test-provider',
@@ -154,9 +142,6 @@ describe('PredictMarketSportCard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockIsFromTrending.mockReturnValue(false);
-    mockExecuteGuardedAction.mockImplementation((action: () => void) =>
-      action(),
-    );
   });
 
   afterEach(() => {
@@ -176,61 +161,6 @@ describe('PredictMarketSportCard', () => {
     expect(getByText('3:30 PM')).toBeOnTheScreen();
   });
 
-  it('renders team buttons with prices', () => {
-    const { getByText } = renderWithProvider(
-      <PredictMarketSportCard market={mockMarket} />,
-      { state: initialState },
-    );
-
-    expect(getByText('SEA · 77¢')).toBeOnTheScreen();
-    expect(getByText('DEN · 23¢')).toBeOnTheScreen();
-  });
-
-  it('calls executeGuardedAction and navigates to buy preview when team button is pressed', () => {
-    const { getByText } = renderWithProvider(
-      <PredictMarketSportCard market={mockMarket} />,
-      { state: initialState },
-    );
-
-    fireEvent.press(getByText('SEA · 77¢'));
-
-    expect(mockExecuteGuardedAction).toHaveBeenCalledWith(
-      expect.any(Function),
-      {
-        checkBalance: true,
-        attemptedAction: PredictEventValues.ATTEMPTED_ACTION.PREDICT,
-      },
-    );
-    expect(mockNavigate).toHaveBeenCalledWith(
-      Routes.PREDICT.MODALS.BUY_PREVIEW,
-      {
-        market: mockMarket,
-        outcome: mockMarket.outcomes[0],
-        outcomeToken: expect.objectContaining({
-          id: 'token-away',
-          title: 'SEA',
-        }),
-        entryPoint: PredictEventValues.ENTRY_POINT.PREDICT_FEED,
-      },
-    );
-  });
-
-  it('hides action buttons when game has ended', () => {
-    const endedMarket: PredictMarketType = {
-      ...mockMarket,
-      game: mockMarket.game
-        ? { ...mockMarket.game, status: 'ended' }
-        : undefined,
-    };
-
-    const { queryByTestId } = renderWithProvider(
-      <PredictMarketSportCard market={endedMarket} testID="sport-card" />,
-      { state: initialState },
-    );
-
-    expect(queryByTestId('sport-card-action-buttons')).toBeNull();
-  });
-
   it('navigates to market details when pressed', () => {
     const { getByTestId } = renderWithProvider(
       <PredictMarketSportCard market={mockMarket} testID="sport-market-card" />,
@@ -431,4 +361,67 @@ describe('PredictMarketSportCard', () => {
     // Should render without crashing
     expect(getByTestId('sport-market-card')).toBeOnTheScreen();
   });
+
+  describe('footer integration', () => {
+    it('renders PredictSportCardFooter with correct market', () => {
+      const { getByTestId } = renderWithProvider(
+        <PredictMarketSportCard market={mockMarket} testID="sport-card" />,
+        { state: initialState },
+      );
+
+      expect(getByTestId('mock-footer-market-id').props.children).toBe(
+        'test-market-sport-1',
+      );
+    });
+
+    it('renders PredictSportCardFooter with correct testID', () => {
+      const { getByTestId } = renderWithProvider(
+        <PredictMarketSportCard market={mockMarket} testID="sport-card" />,
+        { state: initialState },
+      );
+
+      expect(getByTestId('sport-card-footer')).toBeOnTheScreen();
+    });
+
+    it('renders PredictSportCardFooter with default testID when no testID provided', () => {
+      const { getByTestId } = renderWithProvider(
+        <PredictMarketSportCard market={mockMarket} />,
+        { state: initialState },
+      );
+
+      expect(getByTestId('mock-footer')).toBeOnTheScreen();
+    });
+
+    it('passes resolved entry point to footer', () => {
+      const { getByTestId } = renderWithProvider(
+        <PredictMarketSportCard
+          market={mockMarket}
+          testID="sport-card"
+          entryPoint={PredictEventValues.ENTRY_POINT.HOMEPAGE_POSITIONS}
+        />,
+        { state: initialState },
+      );
+
+      expect(getByTestId('mock-footer-entry-point').props.children).toBe(
+        PredictEventValues.ENTRY_POINT.HOMEPAGE_POSITIONS,
+      );
+    });
+
+    it('passes trending entry point to footer when from trending', () => {
+      mockIsFromTrending.mockReturnValue(true);
+
+      const { getByTestId } = renderWithProvider(
+        <PredictMarketSportCard
+          market={mockMarket}
+          testID="sport-card"
+          entryPoint={PredictEventValues.ENTRY_POINT.PREDICT_FEED}
+        />,
+        { state: initialState },
+      );
+
+      expect(getByTestId('mock-footer-entry-point').props.children).toBe(
+        PredictEventValues.ENTRY_POINT.TRENDING,
+      );
+    });
+  });
 });

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

@@ -6,12 +6,9 @@ import {
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import {
-  PredictMarket as PredictMarketType,
-  PredictOutcomeToken,
-} from '../../types';
+import { PredictMarket as PredictMarketType } from '../../types';
 import {
   PredictNavigationParamList,
   PredictEntryPoint,
@@ -21,8 +18,7 @@ import Routes from '../../../../../constants/navigation/Routes';
 import TrendingFeedSessionManager from '../../../Trending/services/TrendingFeedSessionManager';
 import PredictSportTeamGradient from '../PredictSportTeamGradient/PredictSportTeamGradient';
 import PredictSportScoreboard from '../PredictSportScoreboard/PredictSportScoreboard';
-import { PredictActionButtons } from '../PredictActionButtons';
-import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
+import { PredictSportCardFooter } from '../PredictSportCardFooter';
 
 interface PredictMarketSportCardProps {
   market: PredictMarketType;
@@ -44,34 +40,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
     useNavigation<NavigationProp<PredictNavigationParamList>>();
   const tw = useTailwind();
 
-  const { executeGuardedAction } = usePredictActionGuard({
-    providerId: market.providerId,
-    navigation,
-  });
-
-  const outcome = market.outcomes?.[0];
   const game = market.game;
-  const isEnded = game?.status === 'ended';
-
-  const handleBetPress = useCallback(
-    (token: PredictOutcomeToken) => {
-      executeGuardedAction(
-        () => {
-          navigation.navigate(Routes.PREDICT.MODALS.BUY_PREVIEW, {
-            market,
-            outcome,
-            outcomeToken: token,
-            entryPoint: resolvedEntryPoint,
-          });
-        },
-        {
-          checkBalance: true,
-          attemptedAction: PredictEventValues.ATTEMPTED_ACTION.PREDICT,
-        },
-      );
-    },
-    [executeGuardedAction, navigation, market, outcome, resolvedEntryPoint],
-  );
 
   return (
     <TouchableOpacity
@@ -110,14 +79,11 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
             />
           )}
 
-          {outcome && !isEnded && (
-            <PredictActionButtons
-              market={market}
-              outcome={outcome}
-              onBetPress={handleBetPress}
-              testID={testID ? `${testID}-action-buttons` : undefined}
-            />
-          )}
+          <PredictSportCardFooter
+            market={market}
+            entryPoint={resolvedEntryPoint}
+            testID={testID ? `${testID}-footer` : undefined}
+          />
         </Box>
       </PredictSportTeamGradient>
     </TouchableOpacity>