feat(predict): add enableDepositWalletWithdraw flag to gate withdraw entry

Author: matthewwalsh0

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

@@ -76,6 +76,25 @@ const initialState = {
   },
 };
 
+function stateWithDepositWalletWithdrawEnabled(enabled: boolean) {
+  return {
+    engine: {
+      backgroundState: {
+        ...initialState.engine.backgroundState,
+        RemoteFeatureFlagController: {
+          ...backgroundState.RemoteFeatureFlagController,
+          remoteFeatureFlags: {
+            ...backgroundState.RemoteFeatureFlagController?.remoteFeatureFlags,
+            confirmations_pay_extended: {
+              enableDepositWalletWithdraw: enabled,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
 describe('PredictBalance', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -387,6 +406,43 @@ describe('PredictBalance', () => {
       expect(mockExecuteGuardedAction).not.toHaveBeenCalled();
     });
 
+    it('calls withdraw for Deposit Wallet users when enableDepositWalletWithdraw flag is on', () => {
+      // 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: stateWithDepositWalletWithdrawEnabled(true),
+        },
+      );
+      const withdrawButton = getByText(/Withdraw/i);
+      fireEvent.press(withdrawButton);
+
+      // Assert
+      expect(mockWithdraw).toHaveBeenCalledTimes(1);
+      expect(mockOnDepositWalletWithdrawPress).not.toHaveBeenCalled();
+    });
+
     it('calls temporary unavailable handler instead of withdrawing for Deposit Wallet users', () => {
       // Arrange
       const mockWithdraw = jest.fn();

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

@@ -41,6 +41,7 @@ import { PredictNavigationParamList } from '../../types/navigation';
 import { usePredictWithdraw } from '../../hooks/usePredictWithdraw';
 import { usePredictAccountState } from '../../hooks/usePredictAccountState';
 import { PredictEventValues } from '../../constants/eventNames';
+import { selectMetaMaskPayFlags } from '../../../../../selectors/featureFlagController/confirmations';
 import { PREDICT_BALANCE_TEST_IDS } from './PredictBalance.testIds';
 
 // This is a temporary component that will be removed when the deposit flow is fully implemented
@@ -55,6 +56,7 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({
 }) => {
   const tw = useTailwind();
   const privacyMode = useSelector(selectPrivacyMode);
+  const { enableDepositWalletWithdraw } = useSelector(selectMetaMaskPayFlags);
 
   const navigation =
     useNavigation<NavigationProp<PredictNavigationParamList>>();
@@ -103,15 +105,18 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({
       return;
     }
 
-    // Temporary Deposit Wallet migration guard. Remove this branch and sheet
-    // once Deposit Wallet withdrawals are implemented.
-    if (walletType === 'deposit-wallet') {
+    if (walletType === 'deposit-wallet' && !enableDepositWalletWithdraw) {
       onDepositWalletWithdrawPress?.();
       return;
     }
 
     withdraw();
-  }, [onDepositWalletWithdrawPress, walletType, withdraw]);
+  }, [
+    enableDepositWalletWithdraw,
+    onDepositWalletWithdrawPress,
+    walletType,
+    withdraw,
+  ]);
 
   if (isLoading) {
     return (

app/core/Engine/controllers/transaction-controller/transaction-controller-init.test.ts

@@ -235,6 +235,7 @@ describe('Transaction Controller Init', () => {
       bufferSubsequent: 0.05,
       slippage: 0.005,
       stxDisabled: false,
+      enableDepositWalletWithdraw: false,
     });
 
     payHookClassMock.mockReturnValue({
@@ -454,6 +455,7 @@ describe('Transaction Controller Init', () => {
         bufferSubsequent: 0.05,
         slippage: 0.005,
         stxDisabled: true,
+        enableDepositWalletWithdraw: false,
       });
 
       const hooks = testConstructorOption('hooks');
@@ -471,6 +473,7 @@ describe('Transaction Controller Init', () => {
         bufferSubsequent: 0.05,
         slippage: 0.005,
         stxDisabled: false,
+        enableDepositWalletWithdraw: false,
       });
 
       const hooks = testConstructorOption('hooks');

app/selectors/featureFlagController/confirmations/index.test.ts

@@ -16,6 +16,7 @@ import {
   PAY_FIAT_ENABLED_TRANSACTION_TYPES,
   PAY_FIAT_MAX_DELAY_MINUTES_FOR_PAYMENT_METHODS,
   selectMetaMaskPayHardwareFlags,
+  PAY_ENABLE_DEPOSIT_WALLET_WITHDRAW_DEFAULT,
   PAY_HARDWARE_ENABLED_DEFAULT,
   PreferredToken,
   getPreferredTokensForTransactionType,
@@ -563,3 +564,23 @@ describe('selectMetaMaskPayHardwareFlags', () => {
     expect(selectMetaMaskPayHardwareFlags(state)).toEqual({ enabled: true });
   });
 });
+
+describe('selectMetaMaskPayFlags extended flags', () => {
+  it('returns default enableDepositWalletWithdraw when flag is absent', () => {
+    expect(
+      selectMetaMaskPayFlags(mockedEmptyFlagsState).enableDepositWalletWithdraw,
+    ).toEqual(PAY_ENABLE_DEPOSIT_WALLET_WITHDRAW_DEFAULT);
+  });
+
+  it('returns enableDepositWalletWithdraw from flag value', () => {
+    const state = cloneDeep(mockedEmptyFlagsState);
+    state.engine.backgroundState.RemoteFeatureFlagController.remoteFeatureFlags =
+      {
+        confirmations_pay_extended: { enableDepositWalletWithdraw: true },
+      };
+
+    expect(selectMetaMaskPayFlags(state).enableDepositWalletWithdraw).toEqual(
+      true,
+    );
+  });
+});

app/selectors/featureFlagController/confirmations/index.ts

@@ -11,6 +11,7 @@ export const BUFFER_SUBSEQUENT_DEFAULT = 0.05;
 export const PAY_FIAT_ENABLED_TRANSACTION_TYPES = [];
 export const PAY_FIAT_MAX_DELAY_MINUTES_FOR_PAYMENT_METHODS = 10;
 export const PAY_HARDWARE_ENABLED_DEFAULT = false;
+export const PAY_ENABLE_DEPOSIT_WALLET_WITHDRAW_DEFAULT = false;
 export const SLIPPAGE_DEFAULT = 0.005;
 export const STX_DISABLED_DEFAULT = false;
 
@@ -49,6 +50,10 @@ export interface MetaMaskPayFlags {
   stxDisabled: boolean;
 }
 
+export interface MetaMaskPayExtendedFlags {
+  enableDepositWalletWithdraw: boolean;
+}
+
 export interface MetaMaskPayTokensFlags {
   preferredTokens: PreferredTokensConfig;
   blockedTokens: BlockedTokensConfig;
@@ -88,11 +93,16 @@ export interface MetaMaskPayHardwareFlags {
 
 export const selectMetaMaskPayFlags = createSelector(
   selectRemoteFeatureFlags,
-  (featureFlags): MetaMaskPayFlags => {
+  (featureFlags): MetaMaskPayFlags & MetaMaskPayExtendedFlags => {
     const metaMaskPayFlags = featureFlags?.confirmations_pay as
       | Record<string, Json>
       | undefined;
 
+    const metaMaskPayExtendedFlags =
+      featureFlags?.confirmations_pay_extended as
+        | Record<string, Json>
+        | undefined;
+
     const attemptsMax =
       (metaMaskPayFlags?.attemptsMax as number) ?? ATTEMPTS_MAX_DEFAULT;
 
@@ -111,13 +121,18 @@ export const selectMetaMaskPayFlags = createSelector(
     const stxDisabled =
       (metaMaskPayFlags?.stxDisabled as boolean) ?? STX_DISABLED_DEFAULT;
 
+    const enableDepositWalletWithdraw =
+      (metaMaskPayExtendedFlags?.enableDepositWalletWithdraw as boolean) ??
+      PAY_ENABLE_DEPOSIT_WALLET_WITHDRAW_DEFAULT;
+
     return {
       attemptsMax,
       bufferInitial,
       bufferStep,
       bufferSubsequent,
       slippage,
       stxDisabled,
+      enableDepositWalletWithdraw,
     };
   },
 );