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

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({

app/components/UI/Predict/hooks/index.ts

@@ -13,12 +13,6 @@ export {
   type UseLiveMarketPricesResult,
 } from './useLiveMarketPrices';
 
-export {
-  usePredictLivePositions,
-  type UseLivePositionsOptions,
-  type UseLivePositionsResult,
-} from './usePredictLivePositions';
-
 export {
   usePredictTabs,
   type FeedTab,