fix(predict): keep live position data in sync across screens (#29527)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR fixes inconsistencies in Predict position values across the home
screen, market details, and card/list surfaces.

It moves active-position live updates into `usePredictPositions` via
`usePredictLivePositions`, syncs websocket-derived values back into the
shared React Query positions cache, removes duplicate component-level
live subscriptions, scopes live subscriptions to focused screens only,
and fixes market websocket unsubscribe behavior so overlapping token
subscriptions do not break updates on other active screens. It also
updates the positions header to read claimable positions from
`usePredictPositions` instead of Redux/controller state so it stays
aligned with the shared query source.

## **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: Fixed live prediction position values so they stay
updated across the home screen and market details views.

## **Related issues**

Refs: https://consensyssoftware.atlassian.net/browse/PRED-820

## **Manual testing steps**

```gherkin
Feature: live predict positions stay synchronized across screens

  Scenario: home positions continue updating after visiting market details
    Given the user has at least one active Predict position
    And the user is on the Wallet home screen with the Predictions positions section visible
    When the user waits for live position values to update
    And opens one of the active positions into market details
    And waits for live position values to update on market details
    And navigates back to the Wallet home screen
    Then the same home position continues receiving live value updates

  Scenario: only the focused screen keeps market subscriptions active
    Given the user has active Predict positions on the Wallet home screen
    When the user opens a single position in market details
    Then market details only shows live updates for the focused position tokens
    And no unrelated position updates continue streaming from the hidden home screen

  Scenario: claimable positions still render correctly
    Given the user has claimable Predict positions
    When the user opens surfaces that show claimable positions
    Then claimable amounts still render correctly
    And the positions header claim button amount matches the claimable positions list
```

## **Screenshots/Recordings**

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

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

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

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] 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
- [x] 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**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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

<!-- Generated with the help of the pr-description AI skill -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes how live price updates propagate
through shared React Query caches and alters WebSocket
subscription/unsubscribe behavior, which could affect update frequency
and data correctness across multiple screens.
> 
> **Overview**
> Ensures Predict **active position** values stay consistent across
home, market details, and card surfaces by adding an opt-in
`livePriceUpdates` flag to `usePredictPositions` that enables
`usePredictLivePositions` to *sync websocket-derived PnL/value updates
back into the shared positions query cache*.
> 
> Removes component-level live position mapping (`PredictPicks`,
`PredictPicksForCard`) in favor of consuming already-updated
`usePredictPositions` data, and scopes live subscriptions to focused
screens while skipping claimable positions.
> 
> Fixes Polymarket market-price WebSocket unsubscribe logic to avoid
unsubscribing token IDs still required by other active subscriptions,
and updates `PredictPositionsHeader` to derive won/claimable positions
from `usePredictPositions` instead of Redux state; tests were
updated/added to cover the new live-update and unsubscribe semantics.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
8eda7a8. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: caieu

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

@@ -80,6 +80,7 @@ const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
     marketId: market.id,
     childMarketIds: market.childMarketIds,
     claimable: false,
+    livePriceUpdates: true,
   });
   const { data: claimablePositions = [] } = usePredictPositions({
     marketId: market.id,

app/components/UI/Predict/components/PredictHome/PredictHomePositions.tsx

@@ -42,7 +42,7 @@ const PredictHomePositions = forwardRef<
     refetch,
     isLoading: isActiveLoading,
     error: activeError,
-  } = usePredictPositions({ claimable: false });
+  } = usePredictPositions({ claimable: false, livePriceUpdates: true });
 
   const {
     data: claimablePositions = [],

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

@@ -45,13 +45,6 @@ jest.mock('../../hooks/usePredictCashOut', () => ({
   usePredictCashOut: () => ({ onCashOut: mockOnCashOut }),
 }));
 
-jest.mock('../../hooks/usePredictLivePositions', () => ({
-  usePredictLivePositions: jest.fn((positions: unknown[]) => ({
-    livePositions: positions ?? [],
-    isConnected: false,
-    lastUpdateTime: null,
-  })),
-}));
 jest.mock('../../utils/format');
 
 const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;

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

@@ -1,7 +1,6 @@
 import { Box } from '@metamask/design-system-react-native';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { usePredictLivePositions } from '../../hooks/usePredictLivePositions';
 import { usePredictCashOut } from '../../hooks/usePredictCashOut';
 import {
   PredictMarket,
@@ -29,7 +28,6 @@ const PredictPicks: React.FC<PredictPicksProps> = ({
   claimablePositions,
   testID = PREDICT_PICKS_TEST_ID,
 }) => {
-  const { livePositions } = usePredictLivePositions(positions);
   const { onCashOut } = usePredictCashOut({
     market,
     callerName: 'PredictPicks',
@@ -43,7 +41,7 @@ const PredictPicks: React.FC<PredictPicksProps> = ({
   if (usePositionDetail) {
     return (
       <Box testID={testID} twClassName="flex-col pt-3">
-        {livePositions.map((position) => (
+        {positions.map((position) => (
           <PredictPositionDetail
             key={position.id}
             position={position}
@@ -65,7 +63,7 @@ const PredictPicks: React.FC<PredictPicksProps> = ({
 
   return (
     <Box testID={testID} twClassName="flex-col">
-      {livePositions.map((position) => (
+      {positions.map((position) => (
         <PredictPickItem
           key={position.id}
           position={position}

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

@@ -7,13 +7,6 @@ import { formatPrice } from '../../utils/format';
 
 import { POLYMARKET_PROVIDER_ID } from '../../providers/polymarket/constants';
 jest.mock('../../hooks/usePredictPositions');
-jest.mock('../../hooks/usePredictLivePositions', () => ({
-  usePredictLivePositions: jest.fn((positions: unknown[]) => ({
-    livePositions: positions ?? [],
-    isConnected: false,
-    lastUpdateTime: null,
-  })),
-}));
 jest.mock('../../utils/format');
 
 const mockUsePredictPositions = usePredictPositions as jest.Mock;
@@ -327,12 +320,12 @@ describe('PredictPicksForCard', () => {
 
       expect(mockUsePredictPositions).toHaveBeenCalledWith({
         marketId: 'specific-market-456',
-        refetchInterval: 10000,
         enabled: true,
+        livePriceUpdates: true,
       });
     });
 
-    it('passes refetchInterval of 10000ms to hook when no positions prop', () => {
+    it('enables livePriceUpdates when no positions prop', () => {
       mockUsePredictPositions.mockReturnValue({
         data: [],
         isLoading: false,
@@ -345,7 +338,7 @@ describe('PredictPicksForCard', () => {
 
       expect(mockUsePredictPositions).toHaveBeenCalledWith(
         expect.objectContaining({
-          refetchInterval: 10000,
+          livePriceUpdates: true,
         }),
       );
     });
@@ -362,8 +355,8 @@ describe('PredictPicksForCard', () => {
 
       expect(mockUsePredictPositions).toHaveBeenCalledWith({
         marketId: 'market-1',
-        refetchInterval: undefined,
         enabled: false,
+        livePriceUpdates: false,
       });
     });
   });

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { Box } from '@metamask/design-system-react-native';
 
 import { usePredictPositions } from '../../hooks/usePredictPositions';
-import { usePredictLivePositions } from '../../hooks/usePredictLivePositions';
 import type { PredictPosition } from '../../types';
 import PredictPicksForCardItem from './PredictPicksForCardItem';
 import {
@@ -33,14 +32,13 @@ const PredictPicksForCard: React.FC<PredictPicksForCardProps> = ({
 }) => {
   const { data: fetchedPositions = [] } = usePredictPositions({
     marketId,
-    refetchInterval: positionsProp ? undefined : 10000,
     enabled: !positionsProp,
+    livePriceUpdates: !positionsProp,
   });
 
   const basePositions = positionsProp ?? fetchedPositions;
-  const { livePositions } = usePredictLivePositions(basePositions);
 
-  if (livePositions.length === 0) {
+  if (basePositions.length === 0) {
     return null;
   }
 
@@ -52,7 +50,7 @@ const PredictPicksForCard: React.FC<PredictPicksForCardProps> = ({
           twClassName="h-px bg-border-muted my-2"
         />
       )}
-      {livePositions.map((position) => (
+      {basePositions.map((position) => (
         <PredictPicksForCardItem
           key={position.id}
           position={position}

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

@@ -3,6 +3,7 @@ import React from 'react';
 import Routes from '../../../../../constants/navigation/Routes';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { useUnrealizedPnL } from '../../hooks/useUnrealizedPnL';
+import { usePredictPositions } from '../../hooks/usePredictPositions';
 import { PredictPosition, PredictPositionStatus } from '../../types';
 import MarketsWonCard from './PredictPositionsHeader';
 
@@ -94,14 +95,9 @@ jest.mock('../../hooks/usePredictActionGuard', () => ({
 }));
 
 const mockRefetchClaimablePositions = jest.fn();
-jest.mock('../../hooks/usePredictPositions', () => ({
-  usePredictPositions: () => ({
-    data: [{ id: 'position-1' }],
-    isLoading: false,
-    error: null,
-    refetch: mockRefetchClaimablePositions,
-  }),
-}));
+let mockActivePositions: PredictPosition[] = [];
+let mockClaimablePositions: PredictPosition[] = [];
+jest.mock('../../hooks/usePredictPositions');
 
 const mockClaim = jest.fn();
 jest.mock('../../hooks/usePredictClaim', () => ({
@@ -127,36 +123,13 @@ jest.mock('../../../../../../locales/i18n', () => ({
   }),
 }));
 
-function createTestState(
-  _availableBalance?: number,
-  claimableAmount?: number,
-  privacyMode = false,
-) {
+function createTestState(_availableBalance?: number, privacyMode = false) {
   const testAddress = '0x1234567890123456789012345678901234567890';
   const testAccountId = 'test-account-id';
 
-  const claimablePositions = claimableAmount
-    ? ([
-        {
-          id: 'position-1',
-          status: PredictPositionStatus.WON,
-          cashPnl: claimableAmount,
-          currentValue: claimableAmount,
-          marketId: 'market-1',
-          title: 'Test Market',
-          outcome: 'Yes',
-        },
-      ] as unknown as PredictPosition[])
-    : [];
-
   return {
     engine: {
       backgroundState: {
-        PredictController: {
-          claimablePositions: {
-            [testAddress]: claimablePositions,
-          },
-        },
         AccountsController: {
           internalAccounts: {
             selectedAccount: testAccountId,
@@ -185,11 +158,16 @@ describe('MarketsWonCard', () => {
   const mockUseUnrealizedPnL = useUnrealizedPnL as jest.MockedFunction<
     typeof useUnrealizedPnL
   >;
+  const mockUsePredictPositions = usePredictPositions as jest.MockedFunction<
+    typeof usePredictPositions
+  >;
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockBalanceResult.data = 100.5;
     mockBalanceResult.isLoading = false;
+    mockActivePositions = [{ id: 'position-1' } as PredictPosition];
+    mockClaimablePositions = [];
 
     mockUseUnrealizedPnL.mockReturnValue({
       data: {
@@ -201,13 +179,35 @@ describe('MarketsWonCard', () => {
       isFetching: false,
       error: null,
     } as unknown as ReturnType<typeof useUnrealizedPnL>);
+    mockUsePredictPositions.mockImplementation(
+      ({ claimable }: { claimable?: boolean } = {}) =>
+        ({
+          data: claimable ? mockClaimablePositions : mockActivePositions,
+          isLoading: false,
+          error: null,
+          refetch: mockRefetchClaimablePositions,
+        }) as unknown as ReturnType<typeof usePredictPositions>,
+    );
   });
 
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
 
   describe('rendering', () => {
+    it('does not enable live updates for active position count query', () => {
+      const state = createTestState(100.5);
+
+      renderWithProvider(<MarketsWonCard />, { state });
+
+      const activePositionsCall = mockUsePredictPositions.mock.calls.find(
+        ([options]) => options?.claimable === false,
+      );
+
+      expect(activePositionsCall?.[0]).toMatchObject({ claimable: false });
+      expect(activePositionsCall?.[0]?.livePriceUpdates).toBeUndefined();
+    });
+
     it('displays available balance and unrealized P&L', () => {
       const state = createTestState(100.5);
 
@@ -230,15 +230,26 @@ describe('MarketsWonCard', () => {
     });
 
     it('hides monetary values when privacy mode is enabled', () => {
-      const state = createTestState(100.5, 24.66, true);
+      mockClaimablePositions = [
+        {
+          id: 'position-1',
+          status: PredictPositionStatus.WON,
+          cashPnl: 24.66,
+          currentValue: 24.66,
+          marketId: 'market-1',
+          title: 'Test Market',
+          outcome: 'Yes',
+        } as PredictPosition,
+      ];
+      const state = createTestState(100.5, true);
 
       renderWithProvider(<MarketsWonCard />, { state });
 
       expect(screen.queryByText('$100.50')).toBeNull();
       expect(screen.queryByText('+$8.63 (+3.9%)')).toBeNull();
       expect(screen.queryByText('Claim $24.66')).toBeNull();
       expect(screen.getByText('••••••••••••')).toBeOnTheScreen();
-      expect(screen.getByText('•••••••••')).toBeOnTheScreen();
+      expect(screen.getAllByText('•••••••••').length).toBeGreaterThan(0);
     });
   });
 

app/components/UI/Predict/components/PredictPositionsHeader/PredictPositionsHeader.tsx

@@ -46,8 +46,7 @@ import { usePredictDeposit } from '../../hooks/usePredictDeposit';
 import { useUnrealizedPnL } from '../../hooks/useUnrealizedPnL';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
 import { usePredictPositions } from '../../hooks/usePredictPositions';
-import { selectPredictWonPositions } from '../../selectors/predictController';
-import { PredictPosition } from '../../types';
+import { PredictPosition, PredictPositionStatus } from '../../types';
 import { PredictNavigationParamList } from '../../types/navigation';
 import {
   formatPercentage,
@@ -95,12 +94,20 @@ const PredictPositionsHeader = forwardRef<
   const evmAccount = getEvmAccountFromSelectedAccountGroup();
   const selectedAddress = evmAccount?.address ?? '0x0';
   const { isDepositPending } = usePredictDeposit();
-  const wonPositions = useSelector(
-    selectPredictWonPositions({ address: selectedAddress }),
-  );
-
-  const { data: activePositions } = usePredictPositions({ claimable: false });
+  const { data: activePositions } = usePredictPositions({
+    claimable: false,
+  });
+  const { data: claimablePositions = [] } = usePredictPositions({
+    claimable: true,
+  });
   const hasPositions = (activePositions?.length ?? 0) > 0;
+  const wonPositions = useMemo(
+    () =>
+      claimablePositions.filter(
+        (position) => position.status === PredictPositionStatus.WON,
+      ),
+    [claimablePositions],
+  );
 
   const {
     data: pnlData,

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

@@ -306,7 +306,7 @@ describe('PredictSportCardFooter', () => {
       expect(mockUsePredictPositions).toHaveBeenCalledWith({
         marketId: 'specific-market-123',
         claimable: false,
-        refetchInterval: 10000,
+        livePriceUpdates: true,
       });
     });
 

app/components/UI/Predict/components/PredictSportCardFooter/PredictSportCardFooter.tsx

@@ -53,7 +53,7 @@ const PredictSportCardFooter: React.FC<PredictSportCardFooterProps> = ({
   const { data: positions = [], isLoading } = usePredictPositions({
     marketId: market.id,
     claimable: false,
-    refetchInterval: 10000,
+    livePriceUpdates: true,
   });
 
   const { data: claimablePositions = [] } = usePredictPositions({