feat(predict): add auto-refresh for optimistic positions (MetaMask#23051)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Implements automatic 2-second refresh interval for optimistic positions
in
PredictPosition and PredictPositionDetail components. Positions
automatically
update in real-time and stop refreshing when resolved.

- Add auto-refresh effect that triggers every 2 seconds for optimistic
positions
- Track currentPosition state to display latest values from API
- Clear interval automatically when position becomes non-optimistic
- Clean up interval on component unmount to prevent memory leaks
- Add comprehensive test coverage for auto-refresh behavior
- Test refresh start, stop, cleanup, and position updates

<!--
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?
-->

## **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: null 

## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/browse/PRED-322?atlOrigin=eyJpIjoiODc3OGE2YzIxNWFiNGZhNzllNTY4YzI4N2Q4YTdkNmUiLCJwIjoiaiJ9

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> Introduce a polling hook to auto-refresh optimistic positions and wire
it into PredictPosition and PredictPositionDetail with updated
UI/behavior and comprehensive tests.
> 
> - **Core**:
> - Add `usePredictOptimisticPositionRefresh` hook to sequentially poll
`usePredictPositions` (default 2s), update position by
`marketId`/`outcomeId`, and clean up on unmount or when no longer
optimistic.
> - **Components**:
> - `PredictPosition` and `PredictPositionDetail` now consume the hook
and render using `currentPosition` (show skeletons while optimistic).
> - Pass updated `currentPosition` to `onPress` and navigate with
refreshed data.
>   - Disable cash out button when position is optimistic.
> - **Navigation**:
>   - Use `Routes.PREDICT.MODALS.SELL_PREVIEW` for cash-out navigation.
> - **Tests**:
> - Add extensive tests for the hook and update component tests to cover
immediate start, interval polling, stop on resolve, unmount cleanup, UI
updates, and error/slow-network handling.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
db0b529. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: caieu

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

@@ -1,11 +1,18 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react-native';
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+} from '@testing-library/react-native';
 import PredictPosition from './PredictPosition';
 import {
   PredictPositionStatus,
   type PredictPosition as PredictPositionType,
 } from '../../types';
 import { PredictPositionSelectorsIDs } from '../../../../../../e2e/selectors/Predict/Predict.selectors';
+import { usePredictPositions } from '../../hooks/usePredictPositions';
 
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string, vars?: Record<string, string | number>) => {
@@ -16,6 +23,17 @@ jest.mock('../../../../../../locales/i18n', () => ({
   }),
 }));
 
+const mockLoadPositions = jest.fn();
+jest.mock('../../hooks/usePredictPositions', () => ({
+  usePredictPositions: jest.fn(() => ({
+    positions: [],
+    loadPositions: mockLoadPositions,
+    isLoading: false,
+    isRefreshing: false,
+    error: null,
+  })),
+}));
+
 const basePosition: PredictPositionType = {
   id: 'pos-1',
   providerId: 'polymarket',
@@ -51,6 +69,27 @@ const renderComponent = (
 };
 
 describe('PredictPosition', () => {
+  const mockUsePredictPositions = usePredictPositions as jest.MockedFunction<
+    typeof usePredictPositions
+  >;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mockLoadPositions.mockClear();
+    mockUsePredictPositions.mockReturnValue({
+      positions: [],
+      loadPositions: mockLoadPositions,
+      isLoading: false,
+      isRefreshing: false,
+      error: null,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
   it('renders primary position info', () => {
     renderComponent();
 
@@ -237,4 +276,205 @@ describe('PredictPosition', () => {
       expect(screen.getByText('$123.45 on Yes to win $10')).toBeOnTheScreen();
     });
   });
+
+  describe('optimistic position auto-refresh', () => {
+    it('starts auto-refresh immediately when position is optimistic', async () => {
+      mockLoadPositions.mockResolvedValue(undefined);
+      renderComponent({ optimistic: true });
+
+      await waitFor(() => {
+        expect(mockLoadPositions).toHaveBeenCalledWith({ isRefresh: true });
+      });
+    });
+
+    it('does not start auto-refresh when position is not optimistic', async () => {
+      renderComponent({ optimistic: false });
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(2000);
+      });
+
+      expect(mockLoadPositions).not.toHaveBeenCalled();
+    });
+
+    it('continues auto-refresh at 2-second intervals after each load completes', async () => {
+      mockLoadPositions.mockResolvedValue(undefined);
+      renderComponent({ optimistic: true });
+
+      // First load happens immediately
+      await waitFor(() => {
+        expect(mockLoadPositions).toHaveBeenCalledTimes(1);
+      });
+
+      // Second load happens 2 seconds after first completes
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(2000);
+      });
+
+      expect(mockLoadPositions).toHaveBeenCalledTimes(2);
+
+      // Third load happens 2 seconds after second completes
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(2000);
+      });
+
+      expect(mockLoadPositions).toHaveBeenCalledTimes(3);
+    });
+
+    it('stops auto-refresh when position becomes non-optimistic', async () => {
+      const optimisticPosition = { ...basePosition, optimistic: true };
+      const resolvedPosition = { ...basePosition, optimistic: false };
+
+      mockLoadPositions.mockResolvedValue(undefined);
+      mockUsePredictPositions.mockReturnValue({
+        positions: [optimisticPosition],
+        loadPositions: mockLoadPositions,
+        isLoading: false,
+        isRefreshing: false,
+        error: null,
+      });
+
+      const { rerender } = renderComponent({ optimistic: true });
+
+      // First load happens immediately
+      await waitFor(() => {
+        expect(mockLoadPositions).toHaveBeenCalledTimes(1);
+      });
+
+      mockLoadPositions.mockClear();
+
+      mockUsePredictPositions.mockReturnValue({
+        positions: [resolvedPosition],
+        loadPositions: mockLoadPositions,
+        isLoading: false,
+        isRefreshing: false,
+        error: null,
+      });
+
+      rerender(<PredictPosition position={resolvedPosition} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('$2,345.67')).toBeOnTheScreen();
+      });
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(2000);
+      });
+
+      expect(mockLoadPositions).not.toHaveBeenCalled();
+    });
+
+    it('cleans up auto-refresh on unmount', async () => {
+      mockLoadPositions.mockResolvedValue(undefined);
+      const { unmount } = renderComponent({ optimistic: true });
+
+      // First load happens immediately
+      await waitFor(() => {
+        expect(mockLoadPositions).toHaveBeenCalledTimes(1);
+      });
+
+      mockLoadPositions.mockClear();
+
+      unmount();
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(2000);
+      });
+
+      expect(mockLoadPositions).not.toHaveBeenCalled();
+    });
+
+    it('updates displayed position when positions hook returns new data', async () => {
+      const optimisticPosition = {
+        ...basePosition,
+        optimistic: true,
+        currentValue: 100,
+        percentPnl: 0,
+      };
+      const resolvedPosition = {
+        ...basePosition,
+        optimistic: false,
+        currentValue: 2500,
+        percentPnl: 10.5,
+      };
+
+      mockUsePredictPositions.mockReturnValue({
+        positions: [optimisticPosition],
+        loadPositions: mockLoadPositions,
+        isLoading: false,
+        isRefreshing: false,
+        error: null,
+      });
+
+      const { rerender } = renderComponent({ optimistic: true });
+
+      expect(screen.queryByText('$2,500')).toBeNull();
+
+      mockUsePredictPositions.mockReturnValue({
+        positions: [resolvedPosition],
+        loadPositions: mockLoadPositions,
+        isLoading: false,
+        isRefreshing: false,
+        error: null,
+      });
+
+      rerender(<PredictPosition position={optimisticPosition} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('$2,500')).toBeOnTheScreen();
+        expect(screen.getByText('10.5%')).toBeOnTheScreen();
+      });
+    });
+
+    it('calls onPress with updated position after refresh', async () => {
+      const mockOnPress = jest.fn();
+      const optimisticPosition = {
+        ...basePosition,
+        optimistic: true,
+        currentValue: 100,
+      };
+      const resolvedPosition = {
+        ...basePosition,
+        optimistic: false,
+        currentValue: 2500,
+      };
+
+      mockUsePredictPositions.mockReturnValue({
+        positions: [optimisticPosition],
+        loadPositions: mockLoadPositions,
+        isLoading: false,
+        isRefreshing: false,
+        error: null,
+      });
+
+      const { rerender } = renderComponent({ optimistic: true }, mockOnPress);
+
+      mockUsePredictPositions.mockReturnValue({
+        positions: [resolvedPosition],
+        loadPositions: mockLoadPositions,
+        isLoading: false,
+        isRefreshing: false,
+        error: null,
+      });
+
+      rerender(
+        <PredictPosition position={optimisticPosition} onPress={mockOnPress} />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('$2,500')).toBeOnTheScreen();
+      });
+
+      fireEvent.press(
+        screen.getByTestId(PredictPositionSelectorsIDs.CURRENT_POSITION_CARD),
+      );
+
+      expect(mockOnPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          currentValue: 2500,
+          optimistic: false,
+        }),
+      );
+    });
+  });
 });

app/components/UI/Predict/components/PredictPosition/PredictPosition.tsx

@@ -11,6 +11,7 @@ import styleSheet from './PredictPosition.styles';
 import { PredictPositionSelectorsIDs } from '../../../../../../e2e/selectors/Predict/Predict.selectors';
 import { strings } from '../../../../../../locales/i18n';
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { usePredictOptimisticPositionRefresh } from '../../hooks/usePredictOptimisticPositionRefresh';
 
 interface PredictPositionProps {
   position: PredictPositionType;
@@ -21,6 +22,12 @@ const PredictPosition: React.FC<PredictPositionProps> = ({
   position,
   onPress,
 }: PredictPositionProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const currentPosition = usePredictOptimisticPositionRefresh({
+    position,
+  });
+
   const {
     icon,
     title,
@@ -30,14 +37,13 @@ const PredictPosition: React.FC<PredictPositionProps> = ({
     currentValue,
     size,
     optimistic,
-  } = position;
-  const { styles } = useStyles(styleSheet, {});
+  } = currentPosition;
 
   return (
     <TouchableOpacity
       testID={PredictPositionSelectorsIDs.CURRENT_POSITION_CARD}
       style={styles.positionContainer}
-      onPress={() => onPress?.(position)}
+      onPress={() => onPress?.(currentPosition)}
     >
       <View style={styles.positionImageContainer}>
         <Image source={{ uri: icon }} style={styles.positionImage} />