feat: bottom sheet errors

Author: MarioAslau

app/components/UI/Predict/Predict.testIds.ts

@@ -187,6 +187,10 @@ export const PredictPositionSelectorsIDs = {
 export const PredictBuyPreviewSelectorsIDs = {
   // Buy/Place bet button
   PLACE_BET_BUTTON: 'predict-buy-preview-place-bet-button',
+
+  // Inline error banners (sheet mode)
+  PRICE_CHANGED_BANNER: 'predict-buy-preview-price-changed-banner',
+  ORDER_FAILED_BANNER: 'predict-buy-preview-order-failed-banner',
 } as const;
 
 // ========================================

app/components/UI/Predict/contexts/PredictPreviewSheetContext.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react-native';
 import { Text, TouchableOpacity, View } from 'react-native';
 import {
+  isPredictSheetProviderMounted,
   PredictPreviewSheetProvider,
   usePredictPreviewSheet,
 } from './PredictPreviewSheetContext';
@@ -41,6 +42,16 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn((selector: (state: unknown) => unknown) => selector({})),
 }));
 
+const mockClearOrderError = jest.fn();
+let mockActiveOrder: { error?: string; state?: string } | null = null;
+
+jest.mock('../hooks/usePredictActiveOrder', () => ({
+  usePredictActiveOrder: jest.fn(() => ({
+    activeOrder: mockActiveOrder,
+    clearOrderError: mockClearOrderError,
+  })),
+}));
+
 jest.mock('../components/PredictPreviewSheet/PredictPreviewSheet', () => {
   const { forwardRef, useImperativeHandle } = jest.requireActual('react');
   const {
@@ -173,6 +184,7 @@ describe('PredictPreviewSheetContext', () => {
     jest.clearAllMocks();
     mockBottomSheetEnabled = true;
     mockPayWithAnyTokenEnabled = false;
+    mockActiveOrder = null;
     mockSelectPredictBottomSheetEnabledFlag.mockImplementation(
       () => mockBottomSheetEnabled,
     );
@@ -416,4 +428,121 @@ describe('PredictPreviewSheetContext', () => {
     fireEvent.press(screen.getByTestId('open-sell'));
     expect(screen.getByTestId('predict-sell-preview-sheet')).toBeOnTheScreen();
   });
+
+  describe('background error auto-reopen', () => {
+    it('reopens the buy sheet when activeOrder.error appears after dismiss', () => {
+      const { rerender } = render(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      fireEvent.press(screen.getByTestId('open-buy'));
+      expect(screen.getByTestId('predict-buy-preview-sheet')).toBeOnTheScreen();
+
+      fireEvent.press(screen.getByTestId('dismiss-sheet'));
+      expect(
+        screen.queryByTestId('predict-buy-preview-sheet'),
+      ).not.toBeOnTheScreen();
+
+      mockActiveOrder = { error: 'order/failed' };
+      rerender(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      expect(screen.getByTestId('predict-buy-preview-sheet')).toBeOnTheScreen();
+    });
+
+    it('does not auto-reopen when bottomSheetEnabled is OFF', () => {
+      mockBottomSheetEnabled = false;
+      const { rerender } = render(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      // navigation flow when flag is OFF - openBuySheet still records lastBuyParamsRef
+      fireEvent.press(screen.getByTestId('open-buy'));
+
+      mockActiveOrder = { error: 'order/failed' };
+      rerender(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      expect(
+        screen.queryByTestId('predict-buy-preview-sheet'),
+      ).not.toBeOnTheScreen();
+    });
+
+    it('does not auto-reopen if no buy was previously opened', () => {
+      const { rerender } = render(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      mockActiveOrder = { error: 'order/failed' };
+      rerender(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      expect(
+        screen.queryByTestId('predict-buy-preview-sheet'),
+      ).not.toBeOnTheScreen();
+    });
+  });
+
+  describe('isPredictSheetProviderMounted', () => {
+    it('returns false when provider is not mounted', () => {
+      expect(isPredictSheetProviderMounted()).toBe(false);
+    });
+
+    it('returns true while provider is mounted and false after unmount', () => {
+      const { unmount } = render(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      expect(isPredictSheetProviderMounted()).toBe(true);
+
+      unmount();
+
+      expect(isPredictSheetProviderMounted()).toBe(false);
+    });
+  });
+
+  describe('clearOrderError on dismiss', () => {
+    it('calls clearOrderError when buy sheet is dismissed', () => {
+      render(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      fireEvent.press(screen.getByTestId('open-buy'));
+      fireEvent.press(screen.getByTestId('dismiss-sheet'));
+
+      expect(mockClearOrderError).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call clearOrderError when sell sheet is dismissed', () => {
+      render(
+        <PredictPreviewSheetProvider>
+          <TestConsumer />
+        </PredictPreviewSheetProvider>,
+      );
+
+      fireEvent.press(screen.getByTestId('open-sell'));
+      fireEvent.press(screen.getByTestId('dismiss-sheet'));
+
+      expect(mockClearOrderError).not.toHaveBeenCalled();
+    });
+  });
 });

app/components/UI/Predict/contexts/PredictPreviewSheetContext.tsx

@@ -37,6 +37,19 @@ import PredictBuyPreview from '../views/PredictBuyPreview/PredictBuyPreview';
 import PredictBuyWithAnyToken from '../views/PredictBuyWithAnyToken/PredictBuyWithAnyToken';
 import PredictSellPreview from '../views/PredictSellPreview/PredictSellPreview';
 import { PredictMarketDetailsSelectorsIDs } from '../Predict.testIds';
+import { usePredictActiveOrder } from '../hooks/usePredictActiveOrder';
+
+let _providerMounted = false;
+
+/**
+ * Returns whether `PredictPreviewSheetProvider` is currently mounted somewhere
+ * in the tree. Used by `usePredictToastRegistrations` to decide whether to
+ * suppress the order-failure toast (the provider auto-reopens the sheet with
+ * an inline error banner instead).
+ */
+export function isPredictSheetProviderMounted(): boolean {
+  return _providerMounted;
+}
 
 const SellSheetHeader: React.FC<{ params: PredictSellPreviewParams }> = ({
   params,
@@ -140,6 +153,7 @@ export const PredictPreviewSheetProvider: React.FC<
   const payWithAnyTokenEnabled = useSelector(
     selectPredictWithAnyTokenEnabledFlag,
   );
+  const { activeOrder, clearOrderError } = usePredictActiveOrder();
 
   const buySheetRef = useRef<PredictPreviewSheetRef>(null);
   const sellSheetRef = useRef<PredictPreviewSheetRef>(null);
@@ -154,8 +168,23 @@ export const PredictPreviewSheetProvider: React.FC<
   const [buyNonce, setBuyNonce] = useState(0);
   const [sellNonce, setSellNonce] = useState(0);
 
+  /**
+   * Remembers the last params passed to `openBuySheet` so we can auto-reopen
+   * the sheet when an order fails in the background after the sheet was
+   * dismissed (e.g. closed during DEPOSITING).
+   */
+  const lastBuyParamsRef = useRef<PredictBuyPreviewParams | null>(null);
+
+  useEffect(() => {
+    _providerMounted = true;
+    return () => {
+      _providerMounted = false;
+    };
+  }, []);
+
   const openBuySheet = useCallback(
     (params: PredictBuyPreviewParams) => {
+      lastBuyParamsRef.current = params;
       if (bottomSheetEnabled) {
         setBuyParams(params);
         buyNonceRef.current += 1;
@@ -192,12 +221,32 @@ export const PredictPreviewSheetProvider: React.FC<
     }
   }, [sellParams, sellNonce]);
 
+  // Auto-reopen the buy sheet when a background order fails so the user can
+  // see the inline error banner and retry instead of getting a toast.
+  useEffect(() => {
+    if (
+      bottomSheetEnabled &&
+      activeOrder?.error &&
+      !buyParams &&
+      lastBuyParamsRef.current
+    ) {
+      const savedParams = lastBuyParamsRef.current;
+      lastBuyParamsRef.current = null;
+      setBuyParams(savedParams);
+      buyNonceRef.current += 1;
+      setBuyNonce(buyNonceRef.current);
+    }
+  }, [activeOrder?.error, buyParams, bottomSheetEnabled]);
+
   const BuyComponent = useMemo(
     () => (payWithAnyTokenEnabled ? PredictBuyWithAnyToken : PredictBuyPreview),
     [payWithAnyTokenEnabled],
   );
 
-  const onBuyDismiss = useCallback(() => setBuyParams(null), []);
+  const onBuyDismiss = useCallback(() => {
+    setBuyParams(null);
+    clearOrderError();
+  }, [clearOrderError]);
   const onSellDismiss = useCallback(() => setSellParams(null), []);
 
   const contextValue = React.useMemo(

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

@@ -4,6 +4,7 @@ export {
 } from './PredictEntryPointContext';
 
 export {
+  isPredictSheetProviderMounted,
   PredictPreviewSheetProvider,
   usePredictPreviewSheet,
 } from './PredictPreviewSheetContext';

app/components/UI/Predict/hooks/usePredictOrderRetry.test.ts

@@ -58,6 +58,7 @@ function createParamsObj(overrides?: Record<string, unknown>) {
     } as PlaceOrderParams['analyticsProperties'],
     isOrderNotFilled: false,
     resetOrderNotFilled: jest.fn(),
+    isSheetMode: false as boolean | undefined,
     ...overrides,
   };
 }
@@ -131,6 +132,61 @@ describe('usePredictOrderRetry', () => {
       );
       expect(promptedCalls).toHaveLength(1);
     });
+
+    it('opens the retry sheet ref when isOrderNotFilled becomes true and isSheetMode is false', () => {
+      const params = createDefaultParams({ isOrderNotFilled: false });
+      const { result, rerender } = renderHook(() =>
+        usePredictOrderRetry(params),
+      );
+      const onOpen = jest.fn();
+      // simulate ref attached by the rendered sheet
+      (
+        result.current.retrySheetRef as unknown as {
+          current: { onOpenBottomSheet: jest.Mock };
+        }
+      ).current = { onOpenBottomSheet: onOpen };
+
+      params.isOrderNotFilled = true;
+      rerender();
+
+      expect(onOpen).toHaveBeenCalledTimes(1);
+    });
+
+    it('skips opening the retry sheet ref when isSheetMode is true', () => {
+      const params = createDefaultParams({
+        isOrderNotFilled: false,
+        isSheetMode: true,
+      });
+      const { result, rerender } = renderHook(() =>
+        usePredictOrderRetry(params),
+      );
+      const onOpen = jest.fn();
+      (
+        result.current.retrySheetRef as unknown as {
+          current: { onOpenBottomSheet: jest.Mock };
+        }
+      ).current = { onOpenBottomSheet: onOpen };
+
+      params.isOrderNotFilled = true;
+      rerender();
+
+      expect(onOpen).not.toHaveBeenCalled();
+    });
+
+    it('still tracks RETRY_PROMPTED in sheet mode', () => {
+      const params = createDefaultParams({
+        isOrderNotFilled: false,
+        isSheetMode: true,
+      });
+      const { rerender } = renderHook(() => usePredictOrderRetry(params));
+
+      params.isOrderNotFilled = true;
+      rerender();
+
+      expect(mockTrackEvent).toHaveBeenCalledWith(
+        expect.objectContaining({ status: 'retry_prompted' }),
+      );
+    });
   });
 
   describe('handleRetryWithBestPrice', () => {
@@ -273,6 +329,50 @@ describe('usePredictOrderRetry', () => {
       expect(result.current.retrySheetVariant).toBe('failed');
     });
 
+    it('opens the retry sheet on retry failure when isSheetMode is false', async () => {
+      const mockPlaceOrder = jest
+        .fn()
+        .mockRejectedValue(new Error('unexpected error'));
+      const params = createDefaultParams({ placeOrder: mockPlaceOrder });
+      const { result } = renderHook(() => usePredictOrderRetry(params));
+      const onOpen = jest.fn();
+      (
+        result.current.retrySheetRef as unknown as {
+          current: { onOpenBottomSheet: jest.Mock };
+        }
+      ).current = { onOpenBottomSheet: onOpen };
+
+      await act(async () => {
+        await result.current.handleRetryWithBestPrice();
+      });
+
+      expect(onOpen).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not open the retry sheet on retry failure when isSheetMode is true', async () => {
+      const mockPlaceOrder = jest
+        .fn()
+        .mockRejectedValue(new Error('unexpected error'));
+      const params = createDefaultParams({
+        placeOrder: mockPlaceOrder,
+        isSheetMode: true,
+      });
+      const { result } = renderHook(() => usePredictOrderRetry(params));
+      const onOpen = jest.fn();
+      (
+        result.current.retrySheetRef as unknown as {
+          current: { onOpenBottomSheet: jest.Mock };
+        }
+      ).current = { onOpenBottomSheet: onOpen };
+
+      await act(async () => {
+        await result.current.handleRetryWithBestPrice();
+      });
+
+      expect(onOpen).not.toHaveBeenCalled();
+      expect(result.current.retrySheetVariant).toBe('failed');
+    });
+
     it('does not call placeOrder when preview is null', async () => {
       const mockPlaceOrder = jest.fn();
       const params = createDefaultParams({