feat: Implement confirm layout (#13331)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR adds flat confirmation layout in re-designed confirmations. 

## **Related issues**

Fixes: Task is currently in draft

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: jpuri <[email protected]>

Author: OGPoyraz

app/components/Views/confirmations/Confirm/Confirm.styles.ts

@@ -7,6 +7,17 @@ const styleSheet = (params: { theme: Theme }) => {
   const { theme } = params;
 
   return StyleSheet.create({
+    mainContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 9999,
+      backgroundColor: theme.colors.background.alternative,
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+    },
     container: {
       backgroundColor: theme.colors.background.alternative,
       paddingHorizontal: 16,

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

@@ -1,37 +1,63 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { TransactionType } from '@metamask/transaction-controller';
 
 import { useStyles } from '../../../../component-library/hooks';
-import BottomModal from '../components/UI/BottomModal';
 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 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 ConfirmWrapped = () => (
+  <>
+    <ScrollView>
+      <Title />
+      <SignatureBlockaidBanner />
+      <AccountNetworkInfo />
+      <Info />
+    </ScrollView>
+    <Footer />
+  </>
+);
+
 const Confirm = () => {
-  const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
   const { approvalRequest } = useApprovalRequest();
+  const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
   const { styles } = useStyles(styleSheet, {});
 
   if (!isRedesignedEnabled) {
     return null;
   }
 
+  const isFlatConfirmation = FLAT_CONFIRMATIONS.includes(
+    approvalRequest?.type as TransactionType,
+  );
+
+  if (isFlatConfirmation) {
+    return (
+      <SafeAreaView style={styles.mainContainer}>
+        <ConfirmWrapped />
+      </SafeAreaView>
+    );
+  }
+
   return (
     <BottomModal canCloseOnBackdropClick={false}>
-      <View style={styles.container} testID={approvalRequest?.type}>
-        <View>
-          <Title />
-          {/* TODO: component SignatureBlockaidBanner to be removed once we implement alert system in mobile */}
-          <SignatureBlockaidBanner />
-          <AccountNetworkInfo />
-          <Info />
-        </View>
-        <Footer />
+      <View style={styles.container}>
+        <ConfirmWrapped />
       </View>
     </BottomModal>
   );