release: 7.76.3

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

@@ -264,6 +264,7 @@ export const getPredictSearchSelector = {
 
 export const PredictBalanceSelectorsIDs = {
   BALANCE_CARD: 'predict-balance-card',
+  WITHDRAW_BUTTON: 'predict-balance-withdraw-button',
 } as const;
 
 export const PredictBalanceSelectorsText = {

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

@@ -5,6 +5,7 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import PredictBalance from './PredictBalance';
 import { strings } from '../../../../../../locales/i18n';
 import { ButtonVariants } from '../../../../../component-library/components/Buttons/Button';
+import { PREDICT_BALANCE_TEST_IDS } from './PredictBalance.testIds';
 
 // Mock React Query
 jest.mock('@tanstack/react-query', () => ({
@@ -30,6 +31,13 @@ jest.mock('../../hooks/usePredictBalance', () => ({
   usePredictBalance: (options?: unknown) => mockUsePredictBalance(options),
 }));
 
+// Mock usePredictAccountState hook
+const mockUsePredictAccountState = jest.fn();
+jest.mock('../../hooks/usePredictAccountState', () => ({
+  usePredictAccountState: (options?: unknown) =>
+    mockUsePredictAccountState(options),
+}));
+
 // Mock usePredictDeposit hook
 const mockUsePredictDeposit = jest.fn();
 jest.mock('../../hooks/usePredictDeposit', () => ({
@@ -83,6 +91,15 @@ describe('PredictBalance', () => {
       isDepositPending: false,
     });
 
+    mockUsePredictAccountState.mockReturnValue({
+      data: {
+        address: '0x1111111111111111111111111111111111111111',
+        isDeployed: true,
+        walletType: 'safe',
+      },
+      isLoading: false,
+    });
+
     mockUsePredictWithdraw.mockReturnValue({
       withdraw: jest.fn(),
     });
@@ -347,7 +364,7 @@ describe('PredictBalance', () => {
       expect(mockDeposit).toHaveBeenCalled();
     });
 
-    it('calls withdraw directly when Withdraw button is pressed', () => {
+    it('calls withdraw directly when Withdraw button is pressed for Safe users', () => {
       // Arrange
       const mockWithdraw = jest.fn();
       mockUsePredictBalance.mockReturnValue({
@@ -369,6 +386,83 @@ describe('PredictBalance', () => {
       expect(mockWithdraw).toHaveBeenCalledTimes(1);
       expect(mockExecuteGuardedAction).not.toHaveBeenCalled();
     });
+
+    it('calls temporary unavailable handler instead of withdrawing for Deposit Wallet users', () => {
+      // Arrange
+      const mockWithdraw = jest.fn();
+      const mockOnDepositWalletWithdrawPress = jest.fn();
+      mockUsePredictBalance.mockReturnValue({
+        data: 100,
+        isLoading: false,
+      });
+      mockUsePredictAccountState.mockReturnValue({
+        data: {
+          address: '0x2222222222222222222222222222222222222222',
+          isDeployed: true,
+          walletType: 'deposit-wallet',
+        },
+        isLoading: false,
+      });
+      mockUsePredictWithdraw.mockReturnValue({
+        withdraw: mockWithdraw,
+      });
+
+      // Act
+      const { getByText } = renderWithProvider(
+        <PredictBalance
+          onDepositWalletWithdrawPress={mockOnDepositWalletWithdrawPress}
+        />,
+        {
+          state: initialState,
+        },
+      );
+      const withdrawButton = getByText(/Withdraw/i);
+      fireEvent.press(withdrawButton);
+
+      // Assert
+      expect(mockWithdraw).not.toHaveBeenCalled();
+      expect(mockOnDepositWalletWithdrawPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('disables Withdraw while account state is unavailable', () => {
+      // Arrange
+      const mockWithdraw = jest.fn();
+      const mockOnDepositWalletWithdrawPress = jest.fn();
+      mockUsePredictBalance.mockReturnValue({
+        data: 100,
+        isLoading: false,
+      });
+      mockUsePredictAccountState.mockReturnValue({
+        data: undefined,
+        isLoading: true,
+      });
+      mockUsePredictWithdraw.mockReturnValue({
+        withdraw: mockWithdraw,
+      });
+
+      // Act
+      const { getByTestId, UNSAFE_getByProps } = renderWithProvider(
+        <PredictBalance
+          onDepositWalletWithdrawPress={mockOnDepositWalletWithdrawPress}
+        />,
+        {
+          state: initialState,
+        },
+      );
+      const withdrawButton = getByTestId(
+        PREDICT_BALANCE_TEST_IDS.WITHDRAW_BUTTON,
+      );
+      fireEvent.press(withdrawButton);
+
+      // Assert
+      const disabledWithdrawButton = UNSAFE_getByProps({
+        testID: PREDICT_BALANCE_TEST_IDS.WITHDRAW_BUTTON,
+        isDisabled: true,
+      });
+      expect(disabledWithdrawButton.props.isDisabled).toBe(true);
+      expect(mockWithdraw).not.toHaveBeenCalled();
+      expect(mockOnDepositWalletWithdrawPress).not.toHaveBeenCalled();
+    });
   });
 
   describe('balance refresh', () => {

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

@@ -1,4 +1,12 @@
 export const PREDICT_BALANCE_TEST_IDS = {
   SKELETON: 'predict-balance-card-skeleton',
   CARD: 'predict-balance-card',
+  WITHDRAW_BUTTON: 'predict-balance-withdraw-button',
+  WITHDRAW_UNAVAILABLE_SHEET: 'predict-withdraw-unavailable-sheet',
+  WITHDRAW_UNAVAILABLE_TITLE: 'predict-withdraw-unavailable-title',
+  WITHDRAW_UNAVAILABLE_DESCRIPTION: 'predict-withdraw-unavailable-description',
+  WITHDRAW_UNAVAILABLE_CLOSE_BUTTON:
+    'predict-withdraw-unavailable-close-button',
+  WITHDRAW_UNAVAILABLE_GOT_IT_BUTTON:
+    'predict-withdraw-unavailable-got-it-button',
 } as const;

app/components/UI/Predict/components/PredictBalance/PredictBalance.tsx

@@ -39,15 +39,20 @@ import { formatPrice } from '../../utils/format';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
 import { PredictNavigationParamList } from '../../types/navigation';
 import { usePredictWithdraw } from '../../hooks/usePredictWithdraw';
+import { usePredictAccountState } from '../../hooks/usePredictAccountState';
 import { PredictEventValues } from '../../constants/eventNames';
 import { PREDICT_BALANCE_TEST_IDS } from './PredictBalance.testIds';
 
 // This is a temporary component that will be removed when the deposit flow is fully implemented
 interface PredictBalanceProps {
   onLayout?: (height: number) => void;
+  onDepositWalletWithdrawPress?: () => void;
 }
 
-const PredictBalance: React.FC<PredictBalanceProps> = ({ onLayout }) => {
+const PredictBalance: React.FC<PredictBalanceProps> = ({
+  onLayout,
+  onDepositWalletWithdrawPress,
+}) => {
   const tw = useTailwind();
   const privacyMode = useSelector(selectPrivacyMode);
 
@@ -64,6 +69,11 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({ onLayout }) => {
 
   const isAddingFunds = isDepositPending;
   const hasBalance = balance > 0;
+  const { data: accountState } = usePredictAccountState({
+    enabled: hasBalance,
+  });
+  const walletType = accountState?.walletType;
+  const isWithdrawDisabled = hasBalance && !walletType;
 
   useEffect(() => {
     if (!isDepositPending) {
@@ -87,8 +97,21 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({ onLayout }) => {
   }, [deposit, executeGuardedAction]);
 
   const handleWithdraw = useCallback(() => {
+    // Do not proceed until account state is loaded; otherwise Deposit Wallet
+    // users can bypass the temporary guard during the query window.
+    if (!walletType) {
+      return;
+    }
+
+    // Temporary Deposit Wallet migration guard. Remove this branch and sheet
+    // once Deposit Wallet withdrawals are implemented.
+    if (walletType === 'deposit-wallet') {
+      onDepositWalletWithdrawPress?.();
+      return;
+    }
+
     withdraw();
-  }, [withdraw]);
+  }, [onDepositWalletWithdrawPress, walletType, withdraw]);
 
   if (isLoading) {
     return (
@@ -202,6 +225,8 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({ onLayout }) => {
               style={tw.style('flex-1')}
               label={strings('predict.deposit.withdraw')}
               onPress={handleWithdraw}
+              isDisabled={isWithdrawDisabled}
+              testID={PREDICT_BALANCE_TEST_IDS.WITHDRAW_BUTTON}
             />
           )}
         </Box>

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { strings } from '../../../../../../locales/i18n';
+import PredictWithdrawUnavailableSheet from './PredictWithdrawUnavailableSheet';
+import { PREDICT_BALANCE_TEST_IDS } from '../PredictBalance/PredictBalance.testIds';
+
+let mockIsVisible = true;
+const mockCloseSheet = jest.fn();
+const mockGetRefHandlers = jest.fn(() => ({
+  onOpenBottomSheet: jest.fn(),
+  onCloseBottomSheet: jest.fn(),
+}));
+
+jest.mock('../../hooks/usePredictBottomSheet', () => ({
+  usePredictBottomSheet: () => ({
+    sheetRef: { current: null },
+    isVisible: mockIsVisible,
+    closeSheet: mockCloseSheet,
+    handleSheetClosed: jest.fn(),
+    getRefHandlers: mockGetRefHandlers,
+  }),
+}));
+
+describe('PredictWithdrawUnavailableSheet', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsVisible = true;
+  });
+
+  it('renders null when closed', () => {
+    mockIsVisible = false;
+
+    const { queryByTestId } = render(<PredictWithdrawUnavailableSheet />);
+
+    expect(
+      queryByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_SHEET),
+    ).toBeNull();
+  });
+
+  it('renders the temporary Deposit Wallet withdraw unavailable note', () => {
+    const { getByTestId } = render(<PredictWithdrawUnavailableSheet />);
+
+    expect(
+      getByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_SHEET),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_TITLE),
+    ).toHaveTextContent(strings('predict.withdraw.unavailable_title'));
+    expect(
+      getByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_DESCRIPTION),
+    ).toHaveTextContent(strings('predict.withdraw.unavailable_description'));
+    expect(
+      getByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_GOT_IT_BUTTON),
+    ).toHaveTextContent(strings('predict.withdraw.unavailable_got_it'));
+  });
+
+  it('dismisses when Got it is pressed', () => {
+    const { getByTestId } = render(<PredictWithdrawUnavailableSheet />);
+
+    fireEvent.press(
+      getByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_GOT_IT_BUTTON),
+    );
+
+    expect(mockCloseSheet).toHaveBeenCalledTimes(1);
+  });
+
+  it('dismisses when close is pressed', () => {
+    const { getByTestId } = render(<PredictWithdrawUnavailableSheet />);
+
+    fireEvent.press(
+      getByTestId(PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_CLOSE_BUTTON),
+    );
+
+    expect(mockCloseSheet).toHaveBeenCalledTimes(1);
+  });
+});

app/components/UI/Predict/components/PredictWithdrawUnavailableSheet/PredictWithdrawUnavailableSheet.tsx

@@ -0,0 +1,85 @@
+import {
+  BottomSheet,
+  BottomSheetFooter,
+  BottomSheetHeader,
+  Box,
+  BoxAlignItems,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { strings } from '../../../../../../locales/i18n';
+import {
+  usePredictBottomSheet,
+  type PredictBottomSheetRef,
+} from '../../hooks/usePredictBottomSheet';
+import { PREDICT_BALANCE_TEST_IDS } from '../PredictBalance/PredictBalance.testIds';
+
+export type PredictWithdrawUnavailableSheetRef = PredictBottomSheetRef;
+
+/**
+ * Temporary migration notice for Deposit Wallet users.
+ * Remove this sheet and its trigger once Deposit Wallet withdrawals are supported.
+ */
+const PredictWithdrawUnavailableSheet = forwardRef<PredictBottomSheetRef>(
+  (_props, ref) => {
+    const {
+      sheetRef,
+      isVisible,
+      closeSheet,
+      handleSheetClosed,
+      getRefHandlers,
+    } = usePredictBottomSheet();
+
+    useImperativeHandle(ref, getRefHandlers, [getRefHandlers]);
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <BottomSheet
+        ref={sheetRef}
+        isInteractable
+        onClose={handleSheetClosed}
+        testID={PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_SHEET}
+      >
+        <BottomSheetHeader
+          onClose={closeSheet}
+          closeButtonProps={{
+            testID: PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_CLOSE_BUTTON,
+          }}
+          titleTestID={PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_TITLE}
+        >
+          {strings('predict.withdraw.unavailable_title')}
+        </BottomSheetHeader>
+        <Box
+          alignItems={BoxAlignItems.Start}
+          paddingHorizontal={4}
+          paddingBottom={4}
+        >
+          <Text
+            variant={TextVariant.BodyMd}
+            color={TextColor.TextAlternative}
+            testID={PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_DESCRIPTION}
+          >
+            {strings('predict.withdraw.unavailable_description')}
+          </Text>
+        </Box>
+        <BottomSheetFooter
+          twClassName="px-4"
+          primaryButtonProps={{
+            children: strings('predict.withdraw.unavailable_got_it'),
+            onPress: closeSheet,
+            testID: PREDICT_BALANCE_TEST_IDS.WITHDRAW_UNAVAILABLE_GOT_IT_BUTTON,
+          }}
+        />
+      </BottomSheet>
+    );
+  },
+);
+
+PredictWithdrawUnavailableSheet.displayName = 'PredictWithdrawUnavailableSheet';
+
+export default PredictWithdrawUnavailableSheet;

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

@@ -0,0 +1,2 @@
+export { default } from './PredictWithdrawUnavailableSheet';
+export type { PredictWithdrawUnavailableSheetRef } from './PredictWithdrawUnavailableSheet';