chore(runway): cherry-pick fix(predict): cp-7.63.0 game picks not showing for claimable positions (#25229)

- fix(predict): cp-7.63.0 game picks not showing for claimable positions
(#25220)

## **Description**

Fixed an issue where positions/picks were not visible for game markets
after the market was closed when users had claimable positions.

**Root Cause:** The `PredictPicks` component was only checking for live
positions when determining whether to render. When a market closed and
positions became claimable (no longer "live"), the component would
return `null` even though there were claimable positions to display.

**Solution:**
1. Added a second `usePredictPositions` hook call with `claimable: true`
to fetch claimable positions
2. Updated render condition to show component when either live OR
claimable positions exist
3. Conditionally hide Cash Out button for claimable positions (since
they can only be claimed, not cashed out)
4. Updated `PredictSportCardFooter` to also render claimable positions

## **Changelog**

CHANGELOG entry: null

## **Related issues**

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

## **Manual testing steps**

```gherkin
Feature: Game picks display for claimable positions

  Scenario: user views game picks after market closes with claimable positions
    Given user has an open position on a game market
    And the game market has ended and positions are now claimable

    When user navigates to the market details
    Then user sees their position(s) in the "Your picks" section
    And the Cash Out button is not displayed for claimable positions
    And the Claim button is available
```

## **Screenshots/Recordings**

### **Before**

Positions/picks section was hidden when market closed and positions
became claimable.

### **After**

Positions/picks section now displays for both live and claimable
positions, with Cash Out button only shown for non-claimable positions.
<img width="371" height="761" alt="Screenshot 2026-01-26 at 11 57 12 AM"

src="https://github.com/user-attachments/assets/574590a4-1f62-491d-9577-a6f38f4b86d7"
/>
<img width="365" height="766" alt="Screenshot 2026-01-26 at 11 57 02 AM"

src="https://github.com/user-attachments/assets/d0921cba-96d7-45bd-be34-13640ee021b8"
/>



## **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]
> Ensures users see their picks after markets close by including
claimable positions alongside live ones and adjusting actions
accordingly.
> 
> - PredictPicks: adds a second `usePredictPositions` call with
`claimable: true`, renders when either `livePositions` or
`claimablePositions` exist, and passes both to `PredictPickItem`; `Cash
out` button is hidden for `claimable` positions
> - PredictSportCardFooter: also fetches `claimablePositions`, renders
them via `PredictPicksForCard`, and shows claim CTA with aggregated
`claimableAmount`
> - Tests: comprehensive unit tests added/updated for live vs claimable
flows, hook parameters, optimistic states, navigation, and action guards
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
afdbf84. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[c560e11](c560e11)

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

Author: runway-github[bot]

app/components/UI/Predict/components/PredictPicks/PredictPickItem.test.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import PredictPickItem from './PredictPickItem';
+import { PredictPositionStatus, type PredictPosition } from '../../types';
+import { formatPrice } from '../../utils/format';
+
+import { usePredictOptimisticPositionRefresh } from '../../hooks/usePredictOptimisticPositionRefresh';
+
+jest.mock('../../hooks/usePredictOptimisticPositionRefresh');
+jest.mock('../../utils/format');
+
+const mockUsePredictOptimisticPositionRefresh =
+  usePredictOptimisticPositionRefresh as jest.MockedFunction<
+    typeof usePredictOptimisticPositionRefresh
+  >;
+const mockFormatPrice = formatPrice as jest.MockedFunction<typeof formatPrice>;
+
+const createMockPosition = (
+  overrides: Partial<PredictPosition> = {},
+): PredictPosition => ({
+  id: 'position-1',
+  providerId: 'polymarket',
+  marketId: 'market-1',
+  outcomeId: 'outcome-1',
+  outcomeTokenId: '0',
+  icon: 'https://example.com/icon.png',
+  title: 'Will BTC hit 100k?',
+  outcome: 'Yes',
+  outcomeIndex: 0,
+  amount: 10,
+  price: 0.67,
+  status: PredictPositionStatus.OPEN,
+  size: 50,
+  cashPnl: 15.5,
+  percentPnl: 5.25,
+  initialValue: 100,
+  currentValue: 115.5,
+  avgPrice: 0.5,
+  claimable: false,
+  endDate: '2025-12-31T00:00:00Z',
+  ...overrides,
+});
+
+describe('PredictPickItem', () => {
+  const mockOnCashOut = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUsePredictOptimisticPositionRefresh.mockImplementation(
+      ({ position }) => position as PredictPosition,
+    );
+    mockFormatPrice.mockImplementation(
+      (value: number | string, _options?: { maximumDecimals?: number }) => {
+        const num = typeof value === 'string' ? parseFloat(value) : value;
+        if (isNaN(num)) return '$0.00';
+        return `$${num.toFixed(2)}`;
+      },
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders position info with initialValue and outcome', () => {
+      const position = createMockPosition({ initialValue: 50, outcome: 'Yes' });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(screen.getByText(/\$50\.00 on/)).toBeOnTheScreen();
+      expect(screen.getByText(/Yes/)).toBeOnTheScreen();
+    });
+
+    it('renders positive cashPnl value with SuccessDefault color', () => {
+      const position = createMockPosition({ id: 'pos-1', cashPnl: 25.75 });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      const pnlText = screen.getByTestId('predict-picks-pnl-pos-1');
+      expect(pnlText).toBeOnTheScreen();
+      expect(screen.getByText('$25.75')).toBeOnTheScreen();
+    });
+
+    it('renders negative cashPnl value with ErrorDefault color', () => {
+      const position = createMockPosition({ id: 'pos-1', cashPnl: -10.5 });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(screen.getByText('$-10.50')).toBeOnTheScreen();
+    });
+  });
+
+  describe('Cash Out button', () => {
+    it('renders Cash Out button when position is not claimable', () => {
+      const position = createMockPosition({ id: 'pos-1', claimable: false });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(
+        screen.getByTestId('predict-picks-cash-out-button-pos-1'),
+      ).toBeOnTheScreen();
+      expect(screen.getByText('Cash out')).toBeOnTheScreen();
+    });
+
+    it('does not render Cash Out button when position is claimable', () => {
+      const position = createMockPosition({ id: 'pos-1', claimable: true });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(
+        screen.queryByTestId('predict-picks-cash-out-button-pos-1'),
+      ).toBeNull();
+      expect(screen.queryByText('Cash out')).toBeNull();
+    });
+
+    it('calls onCashOut with position when Cash Out button is pressed', () => {
+      const position = createMockPosition({ id: 'pos-1', claimable: false });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      fireEvent.press(
+        screen.getByTestId('predict-picks-cash-out-button-pos-1'),
+      );
+
+      expect(mockOnCashOut).toHaveBeenCalledTimes(1);
+      expect(mockOnCashOut).toHaveBeenCalledWith(position);
+    });
+  });
+
+  describe('optimistic updates', () => {
+    it('renders Skeleton when position is optimistic', () => {
+      const position = createMockPosition({
+        id: 'pos-1',
+        claimable: false,
+      });
+      mockUsePredictOptimisticPositionRefresh.mockReturnValue({
+        ...position,
+        optimistic: true,
+      });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(screen.queryByTestId('predict-picks-pnl-pos-1')).toBeNull();
+    });
+
+    it('disables Cash Out button when position is optimistic', () => {
+      const position = createMockPosition({
+        id: 'pos-1',
+        claimable: false,
+      });
+      mockUsePredictOptimisticPositionRefresh.mockReturnValue({
+        ...position,
+        optimistic: true,
+      });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      const button = screen.getByTestId('predict-picks-cash-out-button-pos-1');
+      expect(button.props.accessibilityState?.disabled).toBe(true);
+    });
+  });
+
+  describe('formatPrice calls', () => {
+    it('calls formatPrice for position initialValue', () => {
+      const position = createMockPosition({ initialValue: 15.75 });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(mockFormatPrice).toHaveBeenCalledWith(15.75, {
+        maximumDecimals: 2,
+      });
+    });
+
+    it('calls formatPrice for cashPnl', () => {
+      const position = createMockPosition({ cashPnl: 1234.56 });
+
+      render(
+        <PredictPickItem
+          position={position}
+          onCashOut={mockOnCashOut}
+          testID="test-pick"
+        />,
+      );
+
+      expect(mockFormatPrice).toHaveBeenNthCalledWith(2, 1234.56, {
+        maximumDecimals: 2,
+      });
+    });
+  });
+});

app/components/UI/Predict/components/PredictPicks/PredictPickItem.tsx

@@ -61,17 +61,19 @@ const PredictPickItem: React.FC<PredictPickItemProps> = ({
           </Text>
         )}
       </Box>
-      <Button
-        variant={ButtonVariant.Secondary}
-        twClassName="py-3 px-4 light:bg-muted/5"
-        onPress={() => onCashOut(currentPosition)}
-        isDisabled={isOptimistic}
-        testID={`predict-picks-cash-out-button-${position.id}`}
-      >
-        <Text variant={TextVariant.BodyMd} twClassName="font-medium">
-          {strings('predict.cash_out')}
-        </Text>
-      </Button>
+      {!position.claimable && (
+        <Button
+          variant={ButtonVariant.Secondary}
+          twClassName="light:bg-muted/5"
+          onPress={() => onCashOut(currentPosition)}
+          isDisabled={isOptimistic}
+          testID={`predict-picks-cash-out-button-${position.id}`}
+        >
+          <Text variant={TextVariant.BodyMd} twClassName="font-medium">
+            {strings('predict.cash_out')}
+          </Text>
+        </Button>
+      )}
     </Box>
   );
 };