feat: Implement redesigned staking confirmation entry point

app/components/Approvals/TransactionApproval/TransactionApproval.test.tsx

@@ -7,7 +7,15 @@ import {
   TransactionApproval,
   TransactionModalType,
 } from './TransactionApproval';
-
+import { useConfirmationRedesignEnabled } from '../../Views/confirmations/hooks/useConfirmationRedesignEnabled';
+import renderWithProvider from '../../../util/test/renderWithProvider';
+
+jest.mock(
+  '../../Views/confirmations/hooks/useConfirmationRedesignEnabled',
+  () => ({
+    useConfirmationRedesignEnabled: jest.fn(),
+  }),
+);
 jest.mock('../../Views/confirmations/hooks/useApprovalRequest');
 
 jest.mock('../../UI/QRHardware/withQRHardwareAwareness', () =>
@@ -30,6 +38,13 @@ const mockApprovalRequest = (approvalRequest?: ApprovalRequest<any>) => {
 describe('TransactionApproval', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    (
+      useConfirmationRedesignEnabled as jest.MockedFn<
+        typeof useConfirmationRedesignEnabled
+      >
+    ).mockReturnValue({
+      isRedesignedEnabled: false,
+    });
   });
 
   it('renders approval component if transaction type is dapp', () => {
@@ -79,9 +94,9 @@ describe('TransactionApproval', () => {
   it('returns null if no approval request', () => {
     mockApprovalRequest(undefined);
 
-    const wrapper = shallow(<TransactionApproval />);
+    const { toJSON } = renderWithProvider(<TransactionApproval />, {});
 
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchInlineSnapshot(`null`);
   });
 
   it('returns null if incorrect approval request type', () => {
@@ -91,9 +106,9 @@ describe('TransactionApproval', () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any);
 
-    const wrapper = shallow(<TransactionApproval />);
+    const { toJSON } = renderWithProvider(<TransactionApproval />, {});
 
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchInlineSnapshot(`null`);
   });
 
   it('returns null if incorrect transaction type', () => {
@@ -103,8 +118,34 @@ describe('TransactionApproval', () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any);
 
-    const wrapper = shallow(<TransactionApproval transactionType="invalid" />);
+    const { toJSON } = renderWithProvider(
+      <TransactionApproval transactionType="invalid" />,
+      {},
+    );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchInlineSnapshot(`null`);
+  });
+
+  it('returns null if redesign is enabled', () => {
+    mockApprovalRequest({
+      type: ApprovalTypes.TRANSACTION,
+      // TODO: Replace "any" with type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any);
+
+    (
+      useConfirmationRedesignEnabled as jest.MockedFn<
+        typeof useConfirmationRedesignEnabled
+      >
+    ).mockReturnValue({
+      isRedesignedEnabled: true,
+    });
+
+    const { toJSON } = renderWithProvider(
+      <TransactionApproval transactionType={TransactionModalType.Dapp} />,
+      {},
+    );
+
+    expect(toJSON()).toMatchInlineSnapshot(`null`);
   });
 });

app/components/Approvals/TransactionApproval/TransactionApproval.tsx

@@ -6,6 +6,7 @@ import Approve from '../../Views/confirmations/ApproveView/Approve';
 import QRSigningModal from '../../UI/QRHardware/QRSigningModal';
 import withQRHardwareAwareness from '../../UI/QRHardware/withQRHardwareAwareness';
 import { IQRState } from '../../UI/QRHardware/types';
+import { useConfirmationRedesignEnabled } from '../../Views/confirmations/hooks/useConfirmationRedesignEnabled';
 
 export enum TransactionModalType {
   Transaction = 'transaction',
@@ -24,6 +25,7 @@ export interface TransactionApprovalProps {
 
 const TransactionApprovalInternal = (props: TransactionApprovalProps) => {
   const { approvalRequest } = useApprovalRequest();
+  const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
   const [modalVisible, setModalVisible] = useState(false);
   const { onComplete: propsOnComplete } = props;
 
@@ -32,7 +34,10 @@ const TransactionApprovalInternal = (props: TransactionApprovalProps) => {
     propsOnComplete();
   }, [propsOnComplete]);
 
-  if (approvalRequest?.type !== ApprovalTypes.TRANSACTION && !modalVisible) {
+  if (
+    (approvalRequest?.type !== ApprovalTypes.TRANSACTION && !modalVisible) ||
+    isRedesignedEnabled
+  ) {
     return null;
   }
 

app/components/Approvals/TransactionApproval/__snapshots__/TransactionApproval.test.tsx.snap

@@ -27,9 +27,3 @@ exports[`TransactionApproval renders approve component if transaction type is tr
   modalVisible={true}
 />
 `;
-
-exports[`TransactionApproval returns null if incorrect approval request type 1`] = `""`;
-
-exports[`TransactionApproval returns null if incorrect transaction type 1`] = `""`;
-
-exports[`TransactionApproval returns null if no approval request 1`] = `""`;

app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx

@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect } from 'react';
 import { View } from 'react-native';
+import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
   ButtonSize,
@@ -20,14 +21,25 @@ import useStakingInputHandlers from '../../hooks/useStakingInput';
 import InputDisplay from '../../components/InputDisplay';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
+import usePoolStakedDeposit from '../../hooks/usePoolStakedDeposit';
 import { formatEther } from 'ethers/lib/utils';
 import { EVENT_PROVIDERS, EVENT_LOCATIONS } from '../../constants/events';
+import { selectConfirmationRedesignFlags } from '../../../../../selectors/featureFlagController';
+import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
   const { trackEvent, createEventBuilder } = useMetrics();
+  const { attemptDepositTransaction } = usePoolStakedDeposit();
+  const confirmationRedesignFlags = useSelector(
+    selectConfirmationRedesignFlags,
+  );
+  const isStakingDepositRedesignedEnabled =
+    confirmationRedesignFlags?.staking_transactions;
+  const activeAccount = useSelector(selectSelectedInternalAccount);
+
 
   const {
     isEth,
@@ -62,7 +74,15 @@ const StakeInputView = () => {
     });
   };
 
-  const handleStakePress = useCallback(() => {
+  const handleStakePress = useCallback(async () => {
+    if (isStakingDepositRedesignedEnabled) {
+      await attemptDepositTransaction(
+        amountWei.toString(),
+        activeAccount?.address as string,
+      );
+      return;
+    }
+
     if (isHighGasCostImpact()) {
       trackEvent(
         createEventBuilder(
@@ -126,6 +146,9 @@ const StakeInputView = () => {
     amountEth,
     estimatedGasFeeWei,
     getDepositTxGasPercentage,
+    isStakingDepositRedesignedEnabled,
+    activeAccount,
+    attemptDepositTransaction,
   ]);
 
   const handleMaxButtonPress = () => {

app/components/Views/confirmations/Confirm/Confirm.test.tsx

@@ -5,6 +5,7 @@ import {
   personalSignatureConfirmationState,
   securityAlertResponse,
   typedSignV1ConfirmationState,
+  stakingDepositConfirmationState,
 } from '../../../../util/test/confirm-data-helpers';
 import Confirm from './index';
 
@@ -33,7 +34,21 @@ jest.mock('react-native-gzip', () => ({
 }));
 
 describe('Confirm', () => {
-  it('should render correct information for personal sign', async () => {
+  it('renders flat confirmation', async () => {
+    const { getByTestId } = renderWithProvider(<Confirm />, {
+      state: stakingDepositConfirmationState,
+    });
+    expect(getByTestId('flat-confirmation-container')).toBeDefined();
+  });
+
+  it('renders modal confirmation', async () => {
+    const { getByTestId } = renderWithProvider(<Confirm />, {
+      state: typedSignV1ConfirmationState,
+    });
+    expect(getByTestId('modal-confirmation-container')).toBeDefined();
+  });
+
+  it('renders correct information for personal sign', async () => {
     const { getAllByRole, getByText } = renderWithProvider(<Confirm />, {
       state: personalSignatureConfirmationState,
     });
@@ -48,7 +63,7 @@ describe('Confirm', () => {
     expect(getAllByRole('button')).toHaveLength(2);
   });
 
-  it('should render correct information for typed sign v1', async () => {
+  it('renders correct information for typed sign v1', async () => {
     const { getAllByRole, getAllByText, getByText, queryByText } =
       renderWithProvider(<Confirm />, {
         state: typedSignV1ConfirmationState,
@@ -62,7 +77,7 @@ describe('Confirm', () => {
     expect(queryByText('This is a deceptive request')).toBeNull();
   });
 
-  it('should render blockaid banner if confirmation has blockaid error response', async () => {
+  it('renders blockaid banner if confirmation has blockaid error response', async () => {
     const { getByText } = renderWithProvider(<Confirm />, {
       state: {
         ...typedSignV1ConfirmationState,

app/components/Views/confirmations/Confirm/Confirm.tsx

@@ -4,29 +4,26 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { TransactionType } from '@metamask/transaction-controller';
 
 import { useStyles } from '../../../../component-library/hooks';
-import AccountNetworkInfo from '../components/Confirm/AccountNetworkInfo';
 import BottomModal from '../components/UI/BottomModal';
 import Footer from '../components/Confirm/Footer';
 import Info from '../components/Confirm/Info';
 import SignatureBlockaidBanner from '../components/Confirm/SignatureBlockaidBanner';
 import Title from '../components/Confirm/Title';
 import useApprovalRequest from '../hooks/useApprovalRequest';
 import { useConfirmationRedesignEnabled } from '../hooks/useConfirmationRedesignEnabled';
-
+import { useTransactionMetadataRequest } from '../hooks/useTransactionMetadataRequest';
 import styleSheet from './Confirm.styles';
 
 // todo: if possible derive way to dynamically check if confirmation should be rendered flat
-// todo: unit test coverage to be added once we have flat confirmations in place
-const FLAT_CONFIRMATIONS: TransactionType[] = [
-  // To be filled with flat confirmations
+const FLAT_TRANSACTION_CONFIRMATIONS: TransactionType[] = [
+  TransactionType.stakingDeposit,
 ];
 
 const ConfirmWrapped = () => (
   <>
     <ScrollView>
       <Title />
       <SignatureBlockaidBanner />
-      <AccountNetworkInfo />
       <Info />
     </ScrollView>
     <Footer />
@@ -35,27 +32,34 @@ const ConfirmWrapped = () => (
 
 const Confirm = () => {
   const { approvalRequest } = useApprovalRequest();
+  const transactionMetadata = useTransactionMetadataRequest();
   const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
   const { styles } = useStyles(styleSheet, {});
 
   if (!isRedesignedEnabled) {
     return null;
   }
 
-  const isFlatConfirmation = FLAT_CONFIRMATIONS.includes(
-    approvalRequest?.type as TransactionType,
+  const isFlatConfirmation = FLAT_TRANSACTION_CONFIRMATIONS.includes(
+    transactionMetadata?.type as TransactionType,
   );
 
   if (isFlatConfirmation) {
     return (
-      <SafeAreaView style={styles.mainContainer}>
+      <SafeAreaView
+        style={styles.mainContainer}
+        testID="flat-confirmation-container"
+      >
         <ConfirmWrapped />
       </SafeAreaView>
     );
   }
 
   return (
-    <BottomModal canCloseOnBackdropClick={false}>
+    <BottomModal
+      canCloseOnBackdropClick={false}
+      testID="modal-confirmation-container"
+    >
       <View style={styles.container} testID={approvalRequest?.type}>
         <ConfirmWrapped />
       </View>

app/components/Views/confirmations/components/Confirm/Info/Info.test.tsx

@@ -4,6 +4,21 @@ import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
 import Info from './Info';
 
+jest.mock('../../../../../../core/Engine', () => ({
+  getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
+  context: {
+    KeyringController: {
+      state: {
+        keyrings: [],
+      },
+      getOrAddQRKeyring: jest.fn(),
+    },
+  },
+  controllerMessenger: {
+    subscribe: jest.fn(),
+  },
+}));
+
 describe('Info', () => {
   it('should render correctly for personal sign', async () => {
     const { getByText } = renderWithProvider(<Info />, {

app/components/Views/confirmations/components/Confirm/Info/Info.tsx

@@ -1,21 +1,39 @@
 import { TransactionType } from '@metamask/transaction-controller';
+import { ApprovalType } from '@metamask/controller-utils';
 import React from 'react';
 
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
+import { useTransactionMetadataRequest } from '../../../hooks/useTransactionMetadataRequest';
 import PersonalSign from './PersonalSign';
 import TypedSignV1 from './TypedSignV1';
 import TypedSignV3V4 from './TypedSignV3V4';
+import StakingDeposit from './StakingDeposit';
+
+interface ConfirmationInfoComponentRequest {
+  signatureRequestVersion?: string;
+  transactionType?: TransactionType;
+}
 
 const ConfirmationInfoComponentMap = {
   [TransactionType.personalSign]: () => PersonalSign,
-  [TransactionType.signTypedData]: (approvalRequestVersion: string) => {
-    if (approvalRequestVersion === 'V1') return TypedSignV1;
+  [TransactionType.signTypedData]: ({
+    signatureRequestVersion,
+  }: ConfirmationInfoComponentRequest) => {
+    if (signatureRequestVersion === 'V1') return TypedSignV1;
     return TypedSignV3V4;
   },
+  [ApprovalType.Transaction]: ({
+    transactionType,
+  }: ConfirmationInfoComponentRequest) => {
+    if (transactionType === TransactionType.stakingDeposit)
+      return StakingDeposit;
+    return null;
+  },
 };
 
 const Info = () => {
   const { approvalRequest } = useApprovalRequest();
+  const transactionMetadata = useTransactionMetadataRequest();
 
   if (!approvalRequest?.type) {
     return null;
@@ -24,11 +42,12 @@ const Info = () => {
   const { requestData } = approvalRequest ?? {
     requestData: {},
   };
-  const approvalRequestVersion = requestData?.version;
+  const signatureRequestVersion = requestData?.version;
+  const transactionType = transactionMetadata?.type;
 
-  const InfoComponent: React.FC = ConfirmationInfoComponentMap[
+  const InfoComponent = ConfirmationInfoComponentMap[
     approvalRequest?.type as keyof typeof ConfirmationInfoComponentMap
-  ](approvalRequestVersion);
+  ]({ signatureRequestVersion, transactionType }) as React.FC;
 
   return <InfoComponent />;
 };