feat: Add Perps Withdraw button into Developer Options, show new Perps Withdraw UI

app/components/Views/confirmations/components/developer/confirmations-developer-options/confirmations-developer-options.test.tsx

@@ -0,0 +1,160 @@
+import { ORIGIN_METAMASK } from '@metamask/controller-utils';
+import { CHAIN_IDS, TransactionType } from '@metamask/transaction-controller';
+import { Hex } from '@metamask/utils';
+import { fireEvent, act, render } from '@testing-library/react-native';
+import React from 'react';
+import { useTheme } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+import { selectSelectedInternalAccountAddress } from '../../../../../../selectors/accountsController';
+import { selectDefaultEndpointByChainId } from '../../../../../../selectors/networkController';
+import { addTransactionBatch } from '../../../../../../util/transaction-controller';
+import { generateTransferData } from '../../../../../../util/transactions';
+import Routes from '../../../../../../constants/navigation/Routes';
+import { useStyles } from '../../../../../../component-library/hooks';
+import { useConfirmNavigation } from '../../../hooks/useConfirmNavigation';
+import { ConfirmationLoader } from '../../confirm/confirm-component';
+import { ConfirmationsDeveloperOptions } from './confirmations-developer-options';
+import { ConfirmationsDeveloperOptionsTestIds } from './confirmations-developer-options.testIds';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useTheme: jest.fn(),
+}));
+
+jest.mock('../../../../../../component-library/hooks', () => ({
+  useStyles: jest.fn(),
+}));
+
+jest.mock('../../../../../../selectors/accountsController', () => ({
+  ...jest.requireActual('../../../../../../selectors/accountsController'),
+  selectSelectedInternalAccountAddress: jest.fn(),
+}));
+
+jest.mock('../../../../../../selectors/networkController', () => ({
+  ...jest.requireActual('../../../../../../selectors/networkController'),
+  selectDefaultEndpointByChainId: jest.fn(),
+}));
+
+jest.mock('../../../../../../util/transaction-controller', () => ({
+  addTransactionBatch: jest.fn(),
+}));
+
+jest.mock('../../../../../../util/transactions', () => ({
+  generateTransferData: jest.fn(),
+}));
+
+jest.mock('../../../hooks/useConfirmNavigation', () => ({
+  useConfirmNavigation: jest.fn(),
+}));
+
+const MOCK_ACCOUNT = '0x1234567890123456789012345678901234567890' as Hex;
+const MOCK_TRANSFER_DATA = '0xabcdef' as Hex;
+const MOCK_ARBITRUM_USDC = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831' as Hex;
+const MOCK_NETWORK_CLIENT_ID = 'arbitrum-mainnet';
+const mockNavigateToConfirmation = jest.fn();
+
+describe('ConfirmationsDeveloperOptions', () => {
+  const mockUseSelector = jest.mocked(useSelector);
+  const mockUseTheme = jest.mocked(useTheme);
+  const mockUseStyles = jest.mocked(useStyles);
+  const mockSelectSelectedInternalAccountAddress = jest.mocked(
+    selectSelectedInternalAccountAddress,
+  );
+  const mockSelectDefaultEndpointByChainId = jest.mocked(
+    selectDefaultEndpointByChainId,
+  );
+  const mockAddTransactionBatch = jest.mocked(addTransactionBatch);
+  const mockGenerateTransferData = jest.mocked(generateTransferData);
+  const mockUseConfirmNavigation = jest.mocked(useConfirmNavigation);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseTheme.mockReturnValue({
+      colors: {},
+    } as never);
+
+    mockUseStyles.mockReturnValue({
+      styles: {
+        accessory: {},
+        desc: {},
+        heading: {},
+      },
+    } as never);
+
+    mockSelectSelectedInternalAccountAddress.mockReturnValue(MOCK_ACCOUNT);
+    mockSelectDefaultEndpointByChainId.mockReturnValue({
+      networkClientId: MOCK_NETWORK_CLIENT_ID,
+    } as never);
+    mockGenerateTransferData.mockReturnValue(MOCK_TRANSFER_DATA);
+    mockAddTransactionBatch.mockResolvedValue(undefined as never);
+    mockUseConfirmNavigation.mockReturnValue({
+      navigateToConfirmation: mockNavigateToConfirmation,
+    } as never);
+    mockUseSelector.mockImplementation(((
+      selector: (state: object) => unknown,
+    ) => selector({})) as typeof useSelector);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders the Perps Withdraw developer option', () => {
+    const { getByText, getByTestId } = render(
+      <ConfirmationsDeveloperOptions />,
+    );
+
+    expect(getByText('Perps Withdraw')).toBeOnTheScreen();
+    expect(
+      getByText('Trigger a Perps withdraw confirmation.'),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(ConfirmationsDeveloperOptionsTestIds.PERPS_WITHDRAW_BUTTON),
+    ).toBeOnTheScreen();
+  });
+
+  it('navigates to the Perps confirmation flow when the Perps Withdraw button is pressed', async () => {
+    const { getByTestId } = render(<ConfirmationsDeveloperOptions />);
+
+    await act(async () => {
+      fireEvent.press(
+        getByTestId(ConfirmationsDeveloperOptionsTestIds.PERPS_WITHDRAW_BUTTON),
+      );
+    });
+
+    expect(mockGenerateTransferData).toHaveBeenCalledWith('transfer', {
+      toAddress: MOCK_ARBITRUM_USDC,
+      amount: '0x0',
+    });
+    expect(mockNavigateToConfirmation).toHaveBeenCalledWith({
+      loader: ConfirmationLoader.CustomAmount,
+      stack: Routes.PERPS.ROOT,
+    });
+    expect(mockSelectDefaultEndpointByChainId).toHaveBeenCalledWith(
+      {},
+      CHAIN_IDS.ARBITRUM,
+    );
+    expect(mockAddTransactionBatch).toHaveBeenCalledWith({
+      from: MOCK_ACCOUNT,
+      origin: ORIGIN_METAMASK,
+      networkClientId: MOCK_NETWORK_CLIENT_ID,
+      disableHook: true,
+      disableSequential: true,
+      transactions: [
+        {
+          params: {
+            to: MOCK_ARBITRUM_USDC,
+            data: MOCK_TRANSFER_DATA,
+          },
+          type: TransactionType.perpsWithdraw,
+        },
+      ],
+    });
+  });
+});

app/components/Views/confirmations/components/developer/confirmations-developer-options/confirmations-developer-options.testIds.ts

@@ -0,0 +1,4 @@
+export const ConfirmationsDeveloperOptionsTestIds = {
+  PERPS_WITHDRAW_BUTTON:
+    'confirmations-developer-options-perps-withdraw-button',
+} as const;

app/components/Views/confirmations/components/developer/confirmations-developer-options/confirmations-developer-options.tsx

@@ -23,6 +23,8 @@ import { generateTransferData } from '../../../../../../util/transactions';
 import { useConfirmNavigation } from '../../../hooks/useConfirmNavigation';
 import { selectSelectedInternalAccountAddress } from '../../../../../../selectors/accountsController';
 import { RootState } from '../../../../../../reducers';
+import { ConfirmationsDeveloperOptionsTestIds } from './confirmations-developer-options.testIds';
+import { ARBITRUM_USDC } from '../../../constants/perps';
 
 const POLYGON_USDCE_ADDRESS =
   '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174' as Hex;
@@ -36,10 +38,32 @@ export function ConfirmationsDeveloperOptions() {
       <PredictDeposit />
       <PredictClaim />
       <PredictWithdraw />
+      <PerpsWithdraw />
     </>
   );
 }
 
+function PerpsWithdraw() {
+  const { addTransactionBatchAndNavigate } = useAddPerpsTransactionBatch();
+
+  const handleWithdraw = useCallback(() => {
+    addTransactionBatchAndNavigate({
+      loader: ConfirmationLoader.CustomAmount,
+      transactionType: TransactionType.perpsWithdraw,
+    });
+  }, [addTransactionBatchAndNavigate]);
+
+  return (
+    <DeveloperButton
+      title="Perps Withdraw"
+      description="Trigger a Perps withdraw confirmation."
+      buttonLabel="Withdraw"
+      onPress={handleWithdraw}
+      testID={ConfirmationsDeveloperOptionsTestIds.PERPS_WITHDRAW_BUTTON}
+    />
+  );
+}
+
 function PredictWithdraw() {
   const { addTransactionBatchAndNavigate } = useAddTransactionBatch();
 
@@ -164,15 +188,71 @@ function useAddTransactionBatch() {
   };
 }
 
+function useAddPerpsTransactionBatch() {
+  const selectedAccount = useSelector(selectSelectedInternalAccountAddress);
+  const { navigateToConfirmation } = useConfirmNavigation();
+
+  const { networkClientId } =
+    useSelector((state: RootState) =>
+      selectDefaultEndpointByChainId(state, CHAIN_IDS.ARBITRUM),
+    ) ?? {};
+
+  const transferData = generateTransferData('transfer', {
+    toAddress: ARBITRUM_USDC.address,
+    amount: '0x0',
+  }) as Hex;
+
+  const addTransactionBatchAndNavigate = useCallback(
+    async ({
+      loader,
+      transactionType,
+    }: {
+      loader?: ConfirmationLoader;
+      transactionType: TransactionType;
+    }) => {
+      navigateToConfirmation({
+        loader,
+        stack: Routes.PERPS.ROOT,
+      });
+
+      addTransactionBatch({
+        from: selectedAccount as Hex,
+        origin: ORIGIN_METAMASK,
+        networkClientId,
+        disableHook: true,
+        disableSequential: true,
+        transactions: [
+          {
+            params: {
+              to: ARBITRUM_USDC.address,
+              data: transferData,
+            },
+            type: transactionType,
+          },
+        ],
+      }).catch((e) => {
+        console.error('Perps transaction error', e);
+      });
+    },
+    [navigateToConfirmation, networkClientId, selectedAccount, transferData],
+  );
+
+  return {
+    addTransactionBatchAndNavigate,
+  };
+}
+
 function DeveloperButton({
   buttonLabel,
   description,
   onPress,
+  testID,
   title,
 }: {
   buttonLabel: string;
   description: string;
   onPress: () => void;
+  testID?: string;
   title: string;
 }) {
   const theme = useTheme();
@@ -199,6 +279,7 @@ function DeveloperButton({
         size={ButtonSize.Lg}
         label={buttonLabel}
         onPress={onPress}
+        testID={testID}
         width={ButtonWidthTypes.Full}
         style={styles.accessory}
       />

app/components/Views/confirmations/components/info-root/info-root.test.tsx

@@ -16,6 +16,10 @@ import { ConfirmationInfoComponentIDs } from '../../constants/info-ids';
 import Info from './info-root';
 import { contractDeploymentTransactionStateMock } from '../../__mocks__/contract-deployment-transaction-mock';
 import { useRefreshSmartTransactionsLiveness } from '../../../../hooks/useRefreshSmartTransactionsLiveness';
+import {
+  TransactionMeta,
+  TransactionType,
+} from '@metamask/transaction-controller';
 
 jest.mock('../../../../hooks/AssetPolling/AssetPollingProvider', () => ({
   AssetPollingProvider: () => null,
@@ -137,6 +141,19 @@ jest.mock('../../../../../core/Engine', () => ({
 
 describe('Info', () => {
   const mockUseNetworkEnablement = jest.fn();
+  const perpsWithdrawConfirmation = {
+    chainId: '0xa4b1',
+    id: 'perps-withdraw-confirmation-id',
+    networkClientId: 'arbitrum',
+    origin: 'metamask',
+    txParams: {
+      from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+      to: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
+      value: '0x0',
+    },
+    type: TransactionType.perpsWithdraw,
+  } as unknown as TransactionMeta;
+
   mockUseNetworkEnablement.mockReturnValue({
     namespace: 'eip155',
     enabledNetworksByNamespace: {
@@ -211,6 +228,14 @@ describe('Info', () => {
     ).toBeDefined();
   });
 
+  it('renders CustomAmountInfo for perps withdraw confirmations', () => {
+    const { getByTestId } = renderWithProvider(<Info />, {
+      state: getAppStateForConfirmation(perpsWithdrawConfirmation),
+    });
+
+    expect(getByTestId('custom-amount-info')).toBeOnTheScreen();
+  });
+
   describe('useRefreshSmartTransactionsLiveness', () => {
     beforeEach(() => {
       jest.mocked(useRefreshSmartTransactionsLiveness).mockClear();

app/components/Views/confirmations/components/info-root/info-root.tsx

@@ -24,6 +24,7 @@ import { PredictDepositInfo } from '../info/predict-deposit-info';
 import { hasTransactionType } from '../../utils/transaction';
 import { PredictClaimInfo } from '../info/predict-claim-info';
 import { PredictWithdrawInfo } from '../info/predict-withdraw-info';
+import { PerpsWithdrawInfo } from '../info/perps-withdraw-info';
 import { MusdClaimInfo } from '../info/musd-claim-info';
 import { MusdConversionInfoRoot } from '../info/musd-conversion-info-root';
 import { useRefreshSmartTransactionsLiveness } from '../../../../hooks/useRefreshSmartTransactionsLiveness';
@@ -136,6 +137,13 @@ const Info = ({ route }: InfoProps) => {
     return <PredictWithdrawInfo />;
   }
 
+  if (
+    transactionMetadata &&
+    hasTransactionType(transactionMetadata, [TransactionType.perpsWithdraw])
+  ) {
+    return <PerpsWithdrawInfo />;
+  }
+
   const { requestData } = approvalRequest ?? {
     requestData: {},
   };