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;

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

@@ -94,9 +94,15 @@ jest.mock('../../hooks/usePredictActionGuard', () => ({
 }));
 
 const mockRefetchClaimablePositions = jest.fn();
+let mockActivePositions: PredictPosition[] = [];
+let mockClaimablePositions: PredictPosition[] = [];
 jest.mock('../../hooks/usePredictPositions', () => ({
-  usePredictPositions: () => ({
-    data: [{ id: 'position-1' }],
+  usePredictPositions: ({
+    claimable,
+  }: {
+    claimable?: boolean;
+  } = {}) => ({
+    data: claimable ? mockClaimablePositions : mockActivePositions,
     isLoading: false,
     error: null,
     refetch: mockRefetchClaimablePositions,
@@ -127,36 +133,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,
@@ -190,6 +173,8 @@ describe('MarketsWonCard', () => {
     jest.clearAllMocks();
     mockBalanceResult.data = 100.5;
     mockBalanceResult.isLoading = false;
+    mockActivePositions = [{ id: 'position-1' } as PredictPosition];
+    mockClaimablePositions = [];
 
     mockUseUnrealizedPnL.mockReturnValue({
       data: {
@@ -230,15 +215,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,21 @@ 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,
+    livePriceUpdates: true,
+  });
+  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.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,