refactor(predict): migrate useUnrealizedPnL to React Query (MetaMask#26877)

## Summary
- Migrate `useUnrealizedPnL` from manual `useState`/`useEffect` to React
Query's `useQuery`, completing React Query adoption across the Predict
module
- Extract query key factory and `queryOptions()` into
`queries/unrealizedPnL.ts` following the established pattern
(`balance.ts`, `positions.ts`)
- Register the new query in `predictQueries` index
- Update consumer (`PredictPositionsHeader`) to use the simplified
`loadUnrealizedPnL()` signature (no more `{ isRefresh }` arg — React
Query handles this)

## Test plan
- [ ] `npx jest useUnrealizedPnL` — all tests pass
- [ ] `npx jest PredictPositionsHeader` — consumer tests still pass
- [ ] Verify unrealized P&L displays correctly on the Positions screen
- [ ] Verify pull-to-refresh updates P&L data

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes how unrealized P&L is fetched/cached
(React Query) and when the UI shows/refreshes it (focus +
position-gated), which could affect staleness and error/display states.
> 
> **Overview**
> Migrates `useUnrealizedPnL` from manual `useState`/`useEffect`
fetching to a React Query `useQuery` implementation backed by a new
`predictQueries.unrealizedPnL` entry and `queries/unrealizedPnL.ts`
(keys + `queryOptions`).
> 
> Updates `PredictPositionsHeader` to consume the new hook shape
(`data`/`error` as `Error`), **only render P&L when there are active
(non-claimable) positions**, and refresh by invalidating the unrealized
P&L query on screen focus and via the imperative `refresh()` handler.
> 
> Ensures unrealized P&L cache is refreshed after relevant actions by
invalidating `predictQueries.unrealizedPnL` on order placement and on
confirmed deposit/claim/withdraw toast events; tests are adjusted
accordingly.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3100866. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Kureev

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

@@ -76,6 +76,15 @@ jest.mock('@tanstack/react-query', () => ({
   }),
 }));
 
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    navigate: mockNavigate,
+  }),
+  useFocusEffect: jest.fn(),
+}));
+
 const mockExecuteGuardedAction = jest.fn(async (action) => await action());
 jest.mock('../../hooks/usePredictActionGuard', () => ({
   usePredictActionGuard: () => ({
@@ -87,7 +96,7 @@ jest.mock('../../hooks/usePredictActionGuard', () => ({
 const mockRefetchClaimablePositions = jest.fn();
 jest.mock('../../hooks/usePredictPositions', () => ({
   usePredictPositions: () => ({
-    data: [],
+    data: [{ id: 'position-1' }],
     isLoading: false,
     error: null,
     refetch: mockRefetchClaimablePositions,
@@ -104,14 +113,6 @@ jest.mock('../../hooks/usePredictClaim', () => ({
   }),
 }));
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({
-    navigate: mockNavigate,
-  }),
-}));
-
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string, params?: Record<string, unknown>) => {
     const mockStrings: Record<string, string> = {
@@ -191,16 +192,15 @@ describe('MarketsWonCard', () => {
     mockBalanceResult.isLoading = false;
 
     mockUseUnrealizedPnL.mockReturnValue({
-      unrealizedPnL: {
+      data: {
         user: '0x1234567890123456789012345678901234567890',
         cashUpnl: 8.63,
         percentUpnl: 3.9,
       },
       isLoading: false,
-      isRefreshing: false,
+      isFetching: false,
       error: null,
-      loadUnrealizedPnL: jest.fn(),
-    });
+    } as unknown as ReturnType<typeof useUnrealizedPnL>);
   });
 
   afterEach(() => {
@@ -265,27 +265,15 @@ describe('MarketsWonCard', () => {
   });
 
   describe('refresh', () => {
-    it('reloads balance and unrealized P&L when refresh is called', async () => {
-      const mockLoadUnrealizedPnL = jest.fn();
-      mockUseUnrealizedPnL.mockReturnValue({
-        unrealizedPnL: {
-          user: '0x1234567890123456789012345678901234567890',
-          cashUpnl: 8.63,
-          percentUpnl: 3.9,
-        },
-        isLoading: false,
-        isRefreshing: false,
-        error: null,
-        loadUnrealizedPnL: mockLoadUnrealizedPnL,
-      });
+    it('invalidates balance and unrealized P&L queries when refresh is called', async () => {
       const ref = React.createRef<{ refresh: () => Promise<void> }>();
       const state = createTestState(100.5);
 
       renderWithProvider(<MarketsWonCard ref={ref} />, { state });
 
       await ref.current?.refresh();
 
-      expect(mockLoadUnrealizedPnL).toHaveBeenCalledWith({ isRefresh: true });
+      expect(mockInvalidateQueries).toHaveBeenCalled();
     });
   });
 
@@ -303,16 +291,15 @@ describe('MarketsWonCard', () => {
 
     it('displays skeleton loader when unrealized P&L is loading', () => {
       mockUseUnrealizedPnL.mockReturnValue({
-        unrealizedPnL: {
+        data: {
           user: '0x1234567890123456789012345678901234567890',
           cashUpnl: 0,
           percentUpnl: 0,
         },
         isLoading: true,
-        isRefreshing: false,
+        isFetching: true,
         error: null,
-        loadUnrealizedPnL: jest.fn(),
-      });
+      } as unknown as ReturnType<typeof useUnrealizedPnL>);
       const state = createTestState(100.5);
 
       renderWithProvider(<MarketsWonCard />, { state });
@@ -326,12 +313,11 @@ describe('MarketsWonCard', () => {
       mockBalanceResult.data = undefined;
       mockBalanceResult.isLoading = false;
       mockUseUnrealizedPnL.mockReturnValue({
-        unrealizedPnL: null,
+        data: undefined,
         isLoading: false,
-        isRefreshing: false,
+        isFetching: false,
         error: null,
-        loadUnrealizedPnL: jest.fn(),
-      });
+      } as unknown as ReturnType<typeof useUnrealizedPnL>);
       const state = createTestState();
 
       const { toJSON } = renderWithProvider(<MarketsWonCard />, { state });
@@ -357,16 +343,15 @@ describe('MarketsWonCard', () => {
       mockBalanceResult.error = null;
       mockBalanceResult.data = 100.5;
       mockUseUnrealizedPnL.mockReturnValue({
-        unrealizedPnL: {
+        data: {
           user: '0x1234567890123456789012345678901234567890',
           cashUpnl: 8.63,
           percentUpnl: 3.9,
         },
         isLoading: false,
-        isRefreshing: false,
-        error: 'P&L fetch failed',
-        loadUnrealizedPnL: jest.fn(),
-      });
+        isFetching: false,
+        error: new Error('P&L fetch failed'),
+      } as unknown as ReturnType<typeof useUnrealizedPnL>);
       const state = createTestState(100.5);
 
       renderWithProvider(<MarketsWonCard onError={mockOnError} />, { state });
@@ -379,16 +364,15 @@ describe('MarketsWonCard', () => {
       mockBalanceResult.error = { message: 'Balance error' };
       mockBalanceResult.data = 100.5;
       mockUseUnrealizedPnL.mockReturnValue({
-        unrealizedPnL: {
+        data: {
           user: '0x1234567890123456789012345678901234567890',
           cashUpnl: 8.63,
           percentUpnl: 3.9,
         },
         isLoading: false,
-        isRefreshing: false,
-        error: 'P&L error',
-        loadUnrealizedPnL: jest.fn(),
-      });
+        isFetching: false,
+        error: new Error('P&L error'),
+      } as unknown as ReturnType<typeof useUnrealizedPnL>);
       const state = createTestState(100.5);
 
       renderWithProvider(<MarketsWonCard onError={mockOnError} />, { state });

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

@@ -8,9 +8,14 @@ import {
   ButtonSize as ButtonSizeHero,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import {
+  NavigationProp,
+  useNavigation,
+  useFocusEffect,
+} from '@react-navigation/native';
 import React, {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -41,6 +46,7 @@ import { usePredictClaim } from '../../hooks/usePredictClaim';
 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 { PredictNavigationParamList } from '../../types/navigation';
@@ -89,16 +95,32 @@ const PredictPositionsHeader = forwardRef<
     selectPredictWonPositions({ address: selectedAddress }),
   );
 
+  const { data: activePositions } = usePredictPositions({ claimable: false });
+  const hasPositions = (activePositions?.length ?? 0) > 0;
+
   const {
-    unrealizedPnL,
+    data: pnlData,
     isLoading: isUnrealizedPnLLoading,
-    loadUnrealizedPnL,
     error: pnlError,
   } = useUnrealizedPnL();
 
+  // Only show P&L when the user has active (non-claimable) positions
+  const unrealizedPnL = hasPositions ? (pnlData ?? null) : null;
+
+  // Invalidate unrealized P&L query when screen comes into focus
+  const pnlQueryKey = useMemo(
+    () => predictQueries.unrealizedPnL.keys.byAddress(selectedAddress),
+    [selectedAddress],
+  );
+  useFocusEffect(
+    useCallback(() => {
+      queryClient.invalidateQueries({ queryKey: pnlQueryKey });
+    }, [queryClient, pnlQueryKey]),
+  );
+
   // Notify parent of errors while keeping state isolated
   useEffect(() => {
-    const combinedError = balanceError?.message ?? pnlError ?? null;
+    const combinedError = balanceError?.message ?? pnlError?.message ?? null;
     onError?.(combinedError);
   }, [balanceError, pnlError, onError]);
 
@@ -122,7 +144,7 @@ const PredictPositionsHeader = forwardRef<
   useImperativeHandle(ref, () => ({
     refresh: async () => {
       await Promise.all([
-        loadUnrealizedPnL({ isRefresh: true }),
+        queryClient.invalidateQueries({ queryKey: pnlQueryKey }),
         queryClient.invalidateQueries({
           queryKey: predictQueries.balance.keys.all(),
         }),

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

@@ -194,6 +194,10 @@ export function usePredictPlaceOrder(
           queryKey: predictQueries.activity.keys.all(),
         });
 
+        queryClient.invalidateQueries({
+          queryKey: predictQueries.unrealizedPnL.keys.all(),
+        });
+
         if (side === Side.BUY) {
           showOrderPlacedToast();
         } else {

app/components/UI/Predict/hooks/usePredictToastRegistrations.test.tsx

@@ -189,6 +189,11 @@ describe('usePredictToastRegistrations', () => {
           queryKey: ['predict', 'balance'],
         }),
       );
+      expect(mockInvalidateQueries).toHaveBeenCalledWith(
+        expect.objectContaining({
+          queryKey: ['predict', 'unrealizedPnL'],
+        }),
+      );
     });
 
     it('uses account ready fallback when deposit confirmed amount is missing', () => {
@@ -335,6 +340,11 @@ describe('usePredictToastRegistrations', () => {
           queryKey: ['predict', 'balance'],
         }),
       );
+      expect(mockInvalidateQueries).toHaveBeenCalledWith(
+        expect.objectContaining({
+          queryKey: ['predict', 'unrealizedPnL'],
+        }),
+      );
     });
 
     it('shows error toast with retry on failed status', async () => {
@@ -429,6 +439,11 @@ describe('usePredictToastRegistrations', () => {
           queryKey: ['predict', 'balance'],
         }),
       );
+      expect(mockInvalidateQueries).toHaveBeenCalledWith(
+        expect.objectContaining({
+          queryKey: ['predict', 'unrealizedPnL'],
+        }),
+      );
     });
 
     it('uses payload amount for withdraw success toast when state amount is unavailable', () => {

app/components/UI/Predict/hooks/usePredictToastRegistrations.tsx

@@ -161,6 +161,10 @@ export const usePredictToastRegistrations = (): ToastRegistration[] => {
         queryClient.invalidateQueries({
           queryKey: predictQueries.activity.keys.all(),
         });
+
+        queryClient.invalidateQueries({
+          queryKey: predictQueries.unrealizedPnL.keys.all(),
+        });
       }
 
       if (type === 'deposit') {