chore(predict): add error handling for predict actions (#21590)

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

- Add error handling on features calls (place order, claim, withdraw)

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

## **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]
> Adds an offline error UI and propagates robust error handling/logging
across Predict UI, hooks, controller, and provider with new validations,
toasts, retries, and extensive tests.
> 
> - **UI/UX**:
> - Introduce `PredictOffline` component (error state with retry) and
integrate into `PredictTabView` to display on errors from
`PredictPositionsHeader`/`PredictPositions`.
> - `PredictPositions`/`PredictPositionsHeader`: add `onError`
callbacks; surface hook errors to parent.
> - **Hooks**:
> - `usePredictClaim`/`usePredictDeposit`/`usePredictPlaceOrder`:
capture exceptions to Sentry, navigate back on failure, show actionable
toasts with retry, and reload balances.
> - **Controller** (`PredictController`):
> - Harden `placeOrder`, `claimWithConfirmation`,
`depositWithConfirmation`, `prepareWithdraw` with validation
(account/chainId/batchId/transactions), state updates (`lastError`,
timestamps), DevLogger logs, and Sentry contexts; clear errors on
success.
> - **Provider** (`PolymarketProvider`):
> - Return structured errors (no throws) for `placeOrder`; add
validations and errors for claim/deposit/account state; improve price
history/markets error fallback; preview BUY rate-limiting.
> - **Localization**: add `predict.error.{title,description,retry}`
strings.
> - **Tests**: add new suites and expand coverage for error paths,
navigation, retries, toasts, validations, and rate limiting across
components, hooks, controller, and provider.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ded18c7. 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/PredictOffline/PredictOffline.styles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    errorState: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 24,
+    },
+    errorStateIcon: {
+      marginBottom: 16,
+    },
+    errorStateTitle: {
+      marginBottom: 8,
+      textAlign: 'center',
+    },
+    errorStateDescription: {
+      textAlign: 'center',
+      marginBottom: 24,
+    },
+    errorStateButton: {
+      alignSelf: 'center',
+      width: '100%',
+    },
+  });
+
+export default styleSheet;

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

@@ -0,0 +1,235 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import PredictOffline from './PredictOffline';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+
+// Mock dependencies
+jest.mock('@metamask/design-system-react-native', () => {
+  const { View, Text } = jest.requireActual('react-native');
+  return {
+    Box: ({
+      children,
+      testID,
+      ...props
+    }: {
+      children: React.ReactNode;
+      testID?: string;
+      [key: string]: unknown;
+    }) => (
+      <View testID={testID} {...props}>
+        {children}
+      </View>
+    ),
+    Text: ({
+      children,
+      variant,
+      ...props
+    }: {
+      children: React.ReactNode;
+      variant?: string;
+      [key: string]: unknown;
+    }) => (
+      <Text testID={props.testID} {...props}>
+        {children}
+      </Text>
+    ),
+    TextVariant: {
+      HeadingMd: 'heading-md',
+      BodyMd: 'body-md',
+    },
+  };
+});
+
+jest.mock('../../../../../component-library/components/Icons/Icon', () => {
+  const { View } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: ({
+      name,
+      size,
+      color,
+      testID,
+      ...props
+    }: {
+      name: string;
+      size: string;
+      color: string;
+      testID?: string;
+      [key: string]: unknown;
+    }) => (
+      <View testID={testID || 'icon'} {...props}>
+        {name}
+      </View>
+    ),
+    IconName: {
+      Warning: 'warning',
+    },
+    IconSize: {
+      XXL: 'xxl',
+    },
+    IconColor: {
+      Error: 'error',
+    },
+  };
+});
+
+jest.mock('../../../../../component-library/components/Buttons/Button', () => {
+  const { TouchableOpacity, Text } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: ({
+      onPress,
+      label,
+      testID,
+      ...props
+    }: {
+      onPress: () => void;
+      label: string;
+      testID?: string;
+      [key: string]: unknown;
+    }) => (
+      <TouchableOpacity
+        testID={testID || 'button'}
+        onPress={onPress}
+        {...props}
+      >
+        <Text>{label}</Text>
+      </TouchableOpacity>
+    ),
+    ButtonSize: {
+      Lg: 'lg',
+    },
+    ButtonVariants: {
+      Primary: 'primary',
+    },
+  };
+});
+
+jest.mock('../../../../../component-library/hooks', () => ({
+  useStyles: jest.fn(() => ({
+    styles: {
+      errorState: {},
+      errorStateIcon: {},
+      errorStateTitle: {},
+      errorStateDescription: {},
+      errorStateButton: {},
+    },
+  })),
+}));
+
+describe('PredictOffline', () => {
+  describe('Component Rendering', () => {
+    it('renders the error state with default message', () => {
+      renderWithProvider(<PredictOffline />);
+
+      expect(
+        screen.getByText('Unable to connect to predictions'),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText(
+          'Prediction markets are temporarily offline. Please check you have a stable connection and try again.',
+        ),
+      ).toBeOnTheScreen();
+      expect(screen.getByTestId('icon')).toBeOnTheScreen();
+    });
+
+    it('renders with custom test ID', () => {
+      renderWithProvider(<PredictOffline testID="custom-error-state" />);
+
+      expect(screen.getByTestId('custom-error-state')).toBeOnTheScreen();
+    });
+
+    it('renders with default test ID when not provided', () => {
+      renderWithProvider(<PredictOffline />);
+
+      expect(screen.getByTestId('predict-error-state')).toBeOnTheScreen();
+    });
+  });
+
+  describe('Message Display', () => {
+    it('displays error description', () => {
+      renderWithProvider(<PredictOffline />);
+
+      expect(
+        screen.getByText(
+          'Prediction markets are temporarily offline. Please check you have a stable connection and try again.',
+        ),
+      ).toBeOnTheScreen();
+    });
+
+    it('displays error title', () => {
+      renderWithProvider(<PredictOffline />);
+
+      expect(
+        screen.getByText('Unable to connect to predictions'),
+      ).toBeOnTheScreen();
+    });
+  });
+
+  describe('Retry Button', () => {
+    it('renders retry button when onRetry callback is provided', () => {
+      const onRetry = jest.fn();
+
+      renderWithProvider(<PredictOffline onRetry={onRetry} />);
+
+      expect(screen.getByText('Retry')).toBeOnTheScreen();
+    });
+
+    it('calls onRetry callback when retry button is pressed', () => {
+      const onRetry = jest.fn();
+
+      renderWithProvider(<PredictOffline onRetry={onRetry} />);
+
+      const retryButton = screen.getByText('Retry');
+      fireEvent.press(retryButton);
+
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render retry button when onRetry callback is not provided', () => {
+      renderWithProvider(<PredictOffline />);
+
+      expect(screen.queryByText('Retry')).not.toBeOnTheScreen();
+    });
+  });
+
+  describe('Icon Display', () => {
+    it('displays warning icon', () => {
+      renderWithProvider(<PredictOffline />);
+
+      const icon = screen.getByTestId('icon');
+
+      expect(icon).toBeOnTheScreen();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders without retry button when onRetry is undefined', () => {
+      renderWithProvider(<PredictOffline onRetry={undefined} />);
+
+      expect(screen.queryByText('Retry')).not.toBeOnTheScreen();
+    });
+  });
+
+  describe('Integration', () => {
+    it('renders all elements together with retry callback', () => {
+      const onRetry = jest.fn();
+
+      renderWithProvider(
+        <PredictOffline onRetry={onRetry} testID="network-error" />,
+      );
+
+      expect(screen.getByTestId('network-error')).toBeOnTheScreen();
+      expect(
+        screen.getByText('Unable to connect to predictions'),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText(
+          'Prediction markets are temporarily offline. Please check you have a stable connection and try again.',
+        ),
+      ).toBeOnTheScreen();
+      expect(screen.getByText('Retry')).toBeOnTheScreen();
+      expect(screen.getByTestId('icon')).toBeOnTheScreen();
+    });
+  });
+});

app/components/UI/Predict/components/PredictOffline/PredictOffline.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { strings } from '../../../../../../locales/i18n';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+} from '../../../../../component-library/components/Buttons/Button';
+import { useStyles } from '../../../../../component-library/hooks';
+import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
+import Icon, {
+  IconName,
+  IconSize,
+  IconColor,
+} from '../../../../../component-library/components/Icons/Icon';
+import styleSheet from './PredictOffline.styles';
+
+interface PredictOfflineProps {
+  /**
+   * Optional callback when retry button is pressed
+   */
+  onRetry?: () => void;
+  /**
+   * TestID for the component
+   */
+  testID?: string;
+}
+
+const PredictOffline: React.FC<PredictOfflineProps> = ({
+  onRetry,
+  testID = 'predict-error-state',
+}) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <Box testID={testID} style={styles.errorState}>
+      <Icon
+        name={IconName.Warning}
+        size={IconSize.XXL}
+        color={IconColor.Error}
+        style={styles.errorStateIcon}
+      />
+      <Text
+        variant={TextVariant.HeadingMd}
+        twClassName="text-default"
+        style={styles.errorStateTitle}
+      >
+        {strings('predict.error.title')}
+      </Text>
+      <Text
+        variant={TextVariant.BodyMd}
+        twClassName="text-alternative"
+        style={styles.errorStateDescription}
+      >
+        {strings('predict.error.description')}
+      </Text>
+      {onRetry && (
+        <Button
+          variant={ButtonVariants.Primary}
+          size={ButtonSize.Lg}
+          onPress={onRetry}
+          label={strings('predict.error.retry')}
+          style={styles.errorStateButton}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default PredictOffline;

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

@@ -0,0 +1 @@
+export { default } from './PredictOffline';