MetaMask
diff --git a/‎app/components/UI/Predict/constants/transactions.ts‎
Lines changed: 9 additions & 0 deletions b/‎app/components/UI/Predict/constants/transactions.ts‎
Lines changed: 9 additions & 0 deletions
diff --git a/‎app/components/UI/Predict/views/PredictBuyWithAnyToken/PredictBuyWithAnyToken.test.tsx‎
Lines changed: 82 additions & 4 deletions b/‎app/components/UI/Predict/views/PredictBuyWithAnyToken/PredictBuyWithAnyToken.test.tsx‎
Lines changed: 82 additions & 4 deletions
diff --git a/‎app/components/UI/Predict/views/PredictBuyWithAnyToken/PredictBuyWithAnyToken.tsx‎
Lines changed: 86 additions & 22 deletions b/‎app/components/UI/Predict/views/PredictBuyWithAnyToken/PredictBuyWithAnyToken.tsx‎
Lines changed: 86 additions & 22 deletions
@@ -7,6 +7,15 @@ export const PREDICT_BALANCE_CHAIN_ID = '0x89' as Hex;
 
 export const MINIMUM_BET = 1; // $1 minimum bet
 
+// Keeps the CTA locked long enough for the payment selector to close and the
+// new quote-loading state to arrive, while avoiding a laggy return to the buy
+// sheet after normal blur/focus navigation.
+export const PAYMENT_SELECTOR_NAVIGATION_UNLOCK_DELAY_MS = 1000;
+
+// Fallback recovery if the payment-selector route does not emit the expected
+// blur/focus events, such as transparent modal or interrupted navigation cases.
+export const PAYMENT_SELECTOR_NAVIGATION_SAFETY_UNLOCK_MS = 5000;
+
 export const PREDICT_BALANCE_TOKEN_KEY = 'predict-balance';
 
 export const PREDICTION_ERROR_TRANSACTION_BATCH_ID = 'NA';
@@ -24,6 +24,13 @@ let mockFakOrdersEnabled = false;
 let mockIsPreviewCalculating = false;
 let mockIsPlacingOrder = false;
 let mockErrorMessage: string | undefined;
+let mockErrorMessageSource:
+  | 'preview'
+  | 'below_minimum'
+  | 'insufficient_balance'
+  | 'blocking_pay_alert'
+  | 'order_error'
+  | undefined;
 let mockBuyErrorBanner: {
   variant: 'price_changed' | 'order_failed';
   title: string;
@@ -155,6 +162,8 @@ jest.mock('./hooks/usePredictBuyInfo', () => ({
 
 let mockIsCurrentTokenInsufficient = false;
 let mockHasAlternativeBalance = false;
+let mockIsPaymentSelectorNavigationLocked = false;
+const mockLockPaymentSelectorNavigation = jest.fn();
 
 jest.mock('./hooks/usePredictBuyConditions', () => ({
   usePredictBuyConditions: () => ({
@@ -167,12 +176,15 @@ jest.mock('./hooks/usePredictBuyConditions', () => ({
     isCurrentTokenInsufficient: mockIsCurrentTokenInsufficient,
     hasAlternativeBalance: mockHasAlternativeBalance,
     maxBetAmount: 50,
+    isPaymentSelectorNavigationLocked: mockIsPaymentSelectorNavigationLocked,
+    lockPaymentSelectorNavigation: mockLockPaymentSelectorNavigation,
   }),
 }));
 
 jest.mock('./hooks/usePredictBuyError', () => ({
   usePredictBuyError: () => ({
     errorMessage: mockErrorMessage,
+    errorMessageSource: mockErrorMessageSource,
     buyErrorBanner: mockBuyErrorBanner,
     isOrderNotFilled: false,
     resetOrderNotFilled: mockResetOrderNotFilled,
@@ -314,16 +326,24 @@ jest.mock('./components/PredictPayWithAnyTokenInfo', () => {
 });
 
 jest.mock('./components/PredictPayWithRow', () => {
-  const { Text } = jest.requireActual('react-native');
+  const { Pressable, Text } = jest.requireActual('react-native');
   return {
     PredictPayWithRow: ({
       disabled,
       variant,
+      onPaymentSelectorOpen,
     }: {
       disabled?: boolean;
       variant?: string;
+      onPaymentSelectorOpen?: () => void;
     }) => (
-      <Text testID="predict-pay-with-row">{`disabled-${String(disabled)} variant-${variant ?? 'default'}`}</Text>
+      <Pressable
+        testID="predict-pay-with-row"
+        disabled={disabled}
+        onPress={onPaymentSelectorOpen}
+      >
+        <Text>{`disabled-${String(disabled)} variant-${variant ?? 'default'}`}</Text>
+      </Pressable>
     ),
   };
 });
@@ -406,9 +426,11 @@ describe('PredictBuyWithAnyToken', () => {
     mockIsPreviewCalculating = false;
     mockIsPlacingOrder = false;
     mockErrorMessage = undefined;
+    mockErrorMessageSource = undefined;
     mockBuyErrorBanner = null;
     mockIsCurrentTokenInsufficient = false;
     mockHasAlternativeBalance = false;
+    mockIsPaymentSelectorNavigationLocked = false;
     mockUseSelector.mockImplementation((selector) => {
       if (typeof selector === 'function') {
         return selector({
@@ -476,6 +498,27 @@ describe('PredictBuyWithAnyToken', () => {
     );
   });
 
+  it('locks the buy button when the payment selector opens and unlocks one second after focus returns', () => {
+    renderWithProvider(<PredictBuyWithAnyToken />);
+
+    fireEvent.press(screen.getByTestId('predict-pay-with-row'));
+
+    expect(mockLockPaymentSelectorNavigation).toHaveBeenCalledTimes(1);
+  });
+
+  it('uses the payment selector lock condition to disable the buy button and pay row', () => {
+    mockIsPaymentSelectorNavigationLocked = true;
+
+    renderWithProvider(<PredictBuyWithAnyToken />);
+
+    expect(screen.getByTestId('predict-buy-action-button')).toHaveTextContent(
+      /button-disabled-true/,
+    );
+    expect(screen.getByTestId('predict-pay-with-row')).toHaveTextContent(
+      /disabled-true/,
+    );
+  });
+
   describe('sheet mode', () => {
     const sheetProps = {
       mode: 'sheet' as const,
@@ -662,6 +705,7 @@ describe('PredictBuyWithAnyToken', () => {
       expect(mockNavigate).toHaveBeenCalledWith(
         Routes.CONFIRMATION_PAY_WITH_MODAL,
       );
+      expect(mockLockPaymentSelectorNavigation).toHaveBeenCalledTimes(1);
       expect(mockHandleConfirm).not.toHaveBeenCalled();
     });
 
@@ -771,10 +815,11 @@ describe('PredictBuyWithAnyToken', () => {
       expect(mockNavigate).not.toHaveBeenCalled();
     });
 
-    it('suppresses error text in Change Payment Method mode', () => {
+    it('suppresses insufficient balance helper text in Change Payment Method mode', () => {
       mockIsCurrentTokenInsufficient = true;
       mockHasAlternativeBalance = true;
       mockErrorMessage = 'Not enough funds';
+      mockErrorMessageSource = 'insufficient_balance';
 
       renderWithProvider(<PredictBuyWithAnyToken {...sheetProps} />);
 
@@ -783,16 +828,49 @@ describe('PredictBuyWithAnyToken', () => {
       );
     });
 
-    it('suppresses error text in Add Funds mode', () => {
+    it('suppresses insufficient balance helper text in Add Funds mode', () => {
       mockIsCurrentTokenInsufficient = true;
       mockHasAlternativeBalance = false;
       mockErrorMessage = 'Not enough funds';
+      mockErrorMessageSource = 'insufficient_balance';
 
       renderWithProvider(<PredictBuyWithAnyToken {...sheetProps} />);
 
       expect(screen.getByTestId('predict-buy-error')).toHaveTextContent(
         'no-error',
       );
     });
+
+    it('keeps transaction pay alert text visible in Change Payment Method mode', () => {
+      mockIsCurrentTokenInsufficient = true;
+      mockHasAlternativeBalance = true;
+      mockErrorMessage = 'Add less or use a different token';
+      mockErrorMessageSource = 'blocking_pay_alert';
+
+      renderWithProvider(<PredictBuyWithAnyToken {...sheetProps} />);
+
+      expect(screen.getByTestId('predict-buy-error')).toHaveTextContent(
+        'Add less or use a different token',
+      );
+    });
+
+    it('keeps transaction pay alert text visible even when a sheet banner exists', () => {
+      mockErrorMessage = 'Add less or use a different token';
+      mockErrorMessageSource = 'blocking_pay_alert';
+      mockBuyErrorBanner = {
+        variant: 'order_failed',
+        title: 'Order failed',
+        description: 'Please retry',
+      };
+
+      renderWithProvider(<PredictBuyWithAnyToken {...sheetProps} />);
+
+      expect(screen.getByTestId('predict-buy-error')).toHaveTextContent(
+        'Add less or use a different token',
+      );
+      expect(
+        screen.getByTestId('predict-buy-preview-order-failed-banner'),
+      ).toBeOnTheScreen();
+    });
   });
 });
@@ -68,6 +68,52 @@ import {
   predictBuyPreviewSessionRef,
 } from '../PredictBuyPreview/PredictBuyPreview';
 
+interface BuyActionButtonStateParams {
+  isPaymentSelectorNavigationLocked: boolean;
+  isBannerActive: boolean;
+  isChangePaymentMode: boolean;
+  isAddFundsMode: boolean;
+  isRetrying: boolean;
+  hasPreview: boolean;
+  canPlaceBet: boolean;
+}
+
+const getBuyActionButtonState = ({
+  isPaymentSelectorNavigationLocked,
+  isBannerActive,
+  isChangePaymentMode,
+  isAddFundsMode,
+  isRetrying,
+  hasPreview,
+  canPlaceBet,
+}: BuyActionButtonStateParams) => {
+  if (isPaymentSelectorNavigationLocked) {
+    return {
+      disabled: true,
+      reducedOpacity: true,
+    };
+  }
+
+  if (!isBannerActive && (isChangePaymentMode || isAddFundsMode)) {
+    return {
+      disabled: false,
+      reducedOpacity: false,
+    };
+  }
+
+  if (isBannerActive) {
+    return {
+      disabled: isRetrying || !hasPreview,
+      reducedOpacity: !hasPreview,
+    };
+  }
+
+  return {
+    disabled: !canPlaceBet,
+    reducedOpacity: !canPlaceBet,
+  };
+};
+
 const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
   const tw = useTailwind();
   const keypadRef = useRef<PredictKeypadHandles>(null);
@@ -186,19 +232,21 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
     hasAlternativeBalance,
     maxBetAmount,
     isPaySystemSettling,
+    isPaymentSelectorNavigationLocked,
+    lockPaymentSelectorNavigation,
   } = usePredictBuyConditions({
     currentValue,
     preview,
     isPreviewCalculating,
     isUserInputChange,
     isConfirming,
     totalPayForPredictBalance,
-    isInputFocused,
     hasBlockingPayAlerts,
   });
 
   const {
     errorMessage,
+    errorMessageSource,
     buyErrorBanner,
     isOrderNotFilled,
     resetOrderNotFilled,
@@ -227,8 +275,9 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
   );
 
   const handleChangePaymentMethod = useCallback(() => {
+    lockPaymentSelectorNavigation();
     navigation.navigate(Routes.CONFIRMATION_PAY_WITH_MODAL);
-  }, [navigation]);
+  }, [lockPaymentSelectorNavigation, navigation]);
 
   const handleAddFunds = useCallback(() => {
     if (isSheetMode) {
@@ -297,6 +346,10 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
   }, [isSheetMode, isBannerActive, isInputFocused, setIsInputFocused]);
 
   const handleBuyButtonPress = useCallback(() => {
+    if (isPaymentSelectorNavigationLocked) {
+      return;
+    }
+
     if (isBannerActive) {
       handleRetryWithBestPrice();
       return;
@@ -312,6 +365,7 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
     handleConfirm();
   }, [
     isBannerActive,
+    isPaymentSelectorNavigationLocked,
     isChangePaymentMode,
     isAddFundsMode,
     handleRetryWithBestPrice,
@@ -336,6 +390,26 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
     ? { twClassName: 'bg-background-default' }
     : { style: tw.style('flex-1 bg-background-default') };
 
+  const {
+    disabled: isBuyActionButtonDisabled,
+    reducedOpacity: showBuyActionButtonReducedOpacity,
+  } = getBuyActionButtonState({
+    isPaymentSelectorNavigationLocked,
+    isBannerActive,
+    isChangePaymentMode,
+    isAddFundsMode,
+    isRetrying,
+    hasPreview: Boolean(preview),
+    canPlaceBet,
+  });
+  const shouldSuppressInlineError =
+    (isChangePaymentMode || isAddFundsMode) &&
+    errorMessageSource === 'insufficient_balance';
+  const shouldRenderInlineError =
+    !isSheetMode ||
+    !buyErrorBanner ||
+    errorMessageSource === 'blocking_pay_alert';
+
   return (
     <Wrapper {...wrapperProps}>
       {!isSheetMode && (
@@ -396,16 +470,17 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
               hideAvailableBalance={false}
             />
             {payWithAnyTokenEnabled && (
-              <PredictPayWithRow disabled={isPlacingOrder} />
+              <PredictPayWithRow
+                disabled={isPlacingOrder || isPaymentSelectorNavigationLocked}
+                onPaymentSelectorOpen={lockPaymentSelectorNavigation}
+              />
             )}
           </Box>
         </ScrollView>
       )}
-      {!(isSheetMode && buyErrorBanner) && (
+      {shouldRenderInlineError && (
         <PredictBuyError
-          errorMessage={
-            isChangePaymentMode || isAddFundsMode ? undefined : errorMessage
-          }
+          errorMessage={shouldSuppressInlineError ? undefined : errorMessage}
         />
       )}
       {!isSheetMode && (
@@ -431,9 +506,10 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
         )}
         {payWithAnyTokenEnabled && isSheetMode && (
           <PredictPayWithRow
-            disabled={isPlacingOrder}
+            disabled={isPlacingOrder || isPaymentSelectorNavigationLocked}
             variant="row"
             availableBalance={availableBalanceDisplay}
+            onPaymentSelectorOpen={lockPaymentSelectorNavigation}
           />
         )}
         <PredictFeeSummary
@@ -459,20 +535,8 @@ const PredictBuyWithAnyToken = (props: PredictBuyPreviewProps) => {
         <PredictBuyActionButton
           isLoading={isPlacingOrder || (isBannerActive && isRetrying)}
           onPress={handleBuyButtonPress}
-          disabled={
-            !isBannerActive && (isChangePaymentMode || isAddFundsMode)
-              ? false
-              : isBannerActive
-                ? isRetrying || !preview
-                : !canPlaceBet
-          }
-          showReducedOpacity={
-            !isBannerActive && (isChangePaymentMode || isAddFundsMode)
-              ? false
-              : isBannerActive
-                ? !preview
-                : !canPlaceBet
-          }
+          disabled={isBuyActionButtonDisabled}
+          showReducedOpacity={showBuyActionButtonReducedOpacity}
           outcomeTokenTitle={outcomeToken?.title}
           sharePrice={preview?.sharePrice ?? outcomeToken?.price ?? 0}
           isSheetMode={isSheetMode}