feat: Implement redesigned staking confirmation entry point

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/Views/confirmations/Confirm/Confirm.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { TransactionType } from '@metamask/transaction-controller';
+import { ApprovalType } from '@metamask/controller-utils';
 
 import { useStyles } from '../../../../component-library/hooks';
 import AccountNetworkInfo from '../components/Confirm/AccountNetworkInfo';
@@ -12,13 +13,13 @@ import SignatureBlockaidBanner from '../components/Confirm/SignatureBlockaidBann
 import Title from '../components/Confirm/Title';
 import useApprovalRequest from '../hooks/useApprovalRequest';
 import { useConfirmationRedesignEnabled } from '../hooks/useConfirmationRedesignEnabled';
-
+import { useTransactionMetadata } from '../hooks/useTransactionMetadata';
 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_CONFIRMATIONS: (TransactionType | ApprovalType)[] = [
+  TransactionType.stakingDeposit,
 ];
 
 const ConfirmWrapped = () => (
@@ -35,6 +36,7 @@ const ConfirmWrapped = () => (
 
 const Confirm = () => {
   const { approvalRequest } = useApprovalRequest();
+  const transactionMetadata = useTransactionMetadata();
   const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
   const { styles } = useStyles(styleSheet, {});
 
@@ -43,7 +45,10 @@ const Confirm = () => {
   }
 
   const isFlatConfirmation = FLAT_CONFIRMATIONS.includes(
-    approvalRequest?.type as TransactionType,
+    // order is important here, as transactionMetadata.type is more specific
+    (transactionMetadata?.type || approvalRequest?.type) as
+      | TransactionType
+      | ApprovalType,
   );
 
   if (isFlatConfirmation) {

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 { useTransactionMetadata } from '../../../hooks/useTransactionMetadata';
 import PersonalSign from './PersonalSign';
 import TypedSignV1 from './TypedSignV1';
 import TypedSignV3V4 from './TypedSignV3V4';
+import StakingDeposit from './StakingDeposit';
+
+type 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 = useTransactionMetadata();
 
   if (!approvalRequest?.type) {
     return null;
@@ -24,11 +42,16 @@
   const { requestData } = approvalRequest ?? {
     requestData: {},
   };
-  const approvalRequestVersion = requestData?.version;
+  const signatureRequestVersion = requestData?.version;
+  const transactionType = transactionMetadata?.type;
 
-  const InfoComponent: React.FC = ConfirmationInfoComponentMap[
+  const InfoComponent: React.FC | null = ConfirmationInfoComponentMap[
     approvalRequest?.type as keyof typeof ConfirmationInfoComponentMap
-  ](approvalRequestVersion);
+  ]({ signatureRequestVersion, transactionType });
+
+  if (!InfoComponent) {
+    return null;
+  }
 
   return <InfoComponent />;
 };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+const StakingDeposit = () => <Text>Staking Deposit</Text>;
+
+export default StakingDeposit;

app/components/Views/confirmations/components/Confirm/Info/StakingDeposit/index.ts

@@ -0,0 +1 @@
+export { default } from './StakingDeposit';

app/components/Views/confirmations/hooks/useConfirmationRedesignEnabled.test.ts

@@ -1,8 +1,13 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import {
+  TransactionMeta,
+  TransactionControllerState,
+  TransactionType,
+} from '@metamask/transaction-controller';
+
 // eslint-disable-next-line import/no-namespace
 import * as AddressUtils from '../../../../util/address';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
-import { personalSignatureConfirmationState } from '../../../../util/test/confirm-data-helpers';
-
 import { useConfirmationRedesignEnabled } from './useConfirmationRedesignEnabled';
 
 jest.mock('../../../../core/Engine', () => ({
@@ -20,25 +25,133 @@ jest.mock('../../../../core/Engine', () => ({
   },
 }));
 
-describe('useConfirmationRedesignEnabled', () => {
-  it('return true for personal sign request', async () => {
-    const { result } = renderHookWithProvider(
-      () => useConfirmationRedesignEnabled(),
-      {
-        state: personalSignatureConfirmationState,
+const ID_MOCK = '123-456-789';
+
+function renderHook({
+  approvalType,
+  transactionMetadata,
+  overrideRemoteFlags,
+}: {
+  approvalType?: ApprovalType;
+  transactionMetadata?: Partial<TransactionMeta>;
+  overrideRemoteFlags?: Record<string, boolean>;
+}) {
+  const { result } = renderHookWithProvider(useConfirmationRedesignEnabled, {
+    state: {
+      engine: {
+        backgroundState: {
+          ApprovalController: {
+            pendingApprovals: {
+              [ID_MOCK]: {
+                id: ID_MOCK,
+                type: approvalType ?? ApprovalType.Transaction,
+              },
+            },
+          },
+          TransactionController: {
+            transactions: transactionMetadata ? [transactionMetadata] : [],
+          } as unknown as TransactionControllerState,
+          RemoteFeatureFlagController: {
+            remoteFeatureFlags: {
+              confirmation_redesign: {
+                signatures: true,
+                stakingDeposit: true,
+                ...overrideRemoteFlags,
+              },
+            },
+          },
+        },
       },
-    );
-    expect(result?.current.isRedesignedEnabled).toBeTruthy();
+    },
   });
 
-  it('return false for external accounts', async () => {
-    jest.spyOn(AddressUtils, 'isHardwareAccount').mockReturnValue(true);
-    const { result } = renderHookWithProvider(
-      () => useConfirmationRedesignEnabled(),
-      {
-        state: personalSignatureConfirmationState,
-      },
-    );
-    expect(result?.current.isRedesignedEnabled).toBeFalsy();
+  return result.current;
+}
+
+describe('useConfirmationRedesignEnabled', () => {
+  describe('signature confirmations', () => {
+    it('return true for personal sign request', async () => {
+      const result = renderHook({
+        approvalType: ApprovalType.PersonalSign,
+      });
+
+      expect(result.isRedesignedEnabled).toBe(true);
+    });
+
+    it('return false for external accounts', async () => {
+      jest.spyOn(AddressUtils, 'isHardwareAccount').mockReturnValue(true);
+      const result = renderHook({
+        approvalType: ApprovalType.PersonalSign,
+      });
+
+      expect(result.isRedesignedEnabled).toBe(false);
+    });
+
+    it('return false when remote flag is disabled', async () => {
+      const result = renderHook({
+        approvalType: ApprovalType.PersonalSign,
+        overrideRemoteFlags: {
+          signatures: false,
+        },
+      });
+
+      expect(result.isRedesignedEnabled).toBe(false);
+    });
+  });
+
+  describe('transaction redesigned confirmations', () => {
+    describe('staking confirmations', () => {
+      describe('staking deposit', () => {
+        it('return true when enabled', async () => {
+          const result = renderHook({
+            approvalType: ApprovalType.Transaction,
+            transactionMetadata: {
+              id: ID_MOCK,
+              type: TransactionType.stakingDeposit,
+            },
+          });
+
+          expect(result.isRedesignedEnabled).toBe(true);
+        });
+
+        it('return false when remote flag is disabled', async () => {
+          const result = renderHook({
+            approvalType: ApprovalType.Transaction,
+            transactionMetadata: {
+              id: ID_MOCK,
+              type: TransactionType.stakingDeposit,
+            },
+            overrideRemoteFlags: {
+              stakingDeposit: false,
+            },
+          });
+
+          expect(result.isRedesignedEnabled).toBe(false);
+        });
+
+        it('return false when transactionMeta is not present', async () => {
+          const result = renderHook({
+            approvalType: ApprovalType.Transaction,
+            overrideRemoteFlags: {
+              stakingDeposit: false,
+            },
+          });
+
+          expect(result.isRedesignedEnabled).toBe(false);
+        });
+
+        it('return false when approval type is not transaction', async () => {
+          const result = renderHook({
+            approvalType: 'Not transaction' as ApprovalType,
+            transactionMetadata: {
+              id: ID_MOCK,
+              type: TransactionType.stakingDeposit,
+            },
+          });
+
+          expect(result.isRedesignedEnabled).toBe(false);
+        });
+      });
+    });
   });
 });