Update standalone component hierarchy

app/components/UI/Stake/routes/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import StakeInputView from '../Views/StakeInputView/StakeInputView';
 import Routes from '../../../../constants/navigation/Routes';
+import { Confirm } from '../../../Views/confirmations/Confirm/Confirm';
 import StakeConfirmationView from '../Views/StakeConfirmationView/StakeConfirmationView';
 import UnstakeInputView from '../Views/UnstakeInputView/UnstakeInputView';
 import UnstakeConfirmationView from '../Views/UnstakeConfirmationView/UnstakeConfirmationView';
@@ -10,7 +11,7 @@ import MaxInputModal from '../components/MaxInputModal';
 import GasImpactModal from '../components/GasImpactModal';
 import StakeEarningsHistoryView from '../Views/StakeEarningsHistoryView/StakeEarningsHistoryView';
 import PoolStakingLearnMoreModal from '../components/PoolStakingLearnMoreModal';
-import StakingDeposit from '../../../Views/confirmations/components/Confirm/Info/StakingDeposit/StakingDeposit';
+
 const Stack = createStackNavigator();
 const ModalStack = createStackNavigator();
 
@@ -45,7 +46,7 @@ const StakeScreenStack = () => (
       />
       <Stack.Screen
         name={Routes.STANDALONE_CONFIRMATIONS.STAKE_DEPOSIT}
-        component={StakingDeposit}
+        component={Confirm}
       />
     </Stack.Navigator>
   </StakeSDKProvider>

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

@@ -33,6 +33,13 @@ const styleSheet = (params: {
       paddingBottom: Device.isIphoneX() ? 20 : 0,
       maxHeight: '90%',
     },
+    standaloneContainer: {
+      backgroundColor: theme.colors.background.alternative,
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      height: '100%',
+    },
     scrollableSection: {
       padding: 4,
     },

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

@@ -11,6 +11,7 @@ import Title from '../components/Confirm/Title';
 import useApprovalRequest from '../hooks/useApprovalRequest';
 import { useConfirmationRedesignEnabled } from '../hooks/useConfirmationRedesignEnabled';
 import { useFlatConfirmation } from '../hooks/useFlatConfirmation';
+import { useStandaloneConfirmation } from '../hooks/useStandaloneConfirmation';
 import styleSheet from './Confirm.styles';
 
 const ConfirmWrapped = ({
@@ -37,13 +38,22 @@ export const Confirm = () => {
   const { approvalRequest } = useApprovalRequest();
   const { isFlatConfirmation } = useFlatConfirmation();
   const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
+  const { isStandaloneConfirmation } = useStandaloneConfirmation();
 
   const { styles } = useStyles(styleSheet, { isFlatConfirmation });
 
   if (!isRedesignedEnabled) {
     return null;
   }
 
+  if (isStandaloneConfirmation) {
+    return (
+      <View style={styles.standaloneContainer}>
+        <ConfirmWrapped styles={styles} />
+      </View>
+    );
+  }
+
   if (isFlatConfirmation) {
     return (
       <View style={styles.flatContainer} testID="flat-confirmation-container">

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

@@ -1,32 +1,24 @@
 import React, { useEffect } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { ScrollView, View } from 'react-native';
 
 import { strings } from '../../../../../../../../locales/i18n';
-import { useStyles } from '../../../../../../../component-library/hooks';
 import { useConfirmActions } from '../../../../hooks/useConfirmActions';
-import Footer from '../../Footer';
 import TokenHero from '../../TokenHero';
 import { getStakingDepositNavbar } from './Navbar';
-import styleSheet from './StakingDeposit.styles';
 
 const StakingDeposit = () => {
   const navigation = useNavigation();
   const { onReject } = useConfirmActions();
   const title = strings('stake.stake');
-  const { styles } = useStyles(styleSheet, {});
 
   useEffect(() => {
     navigation.setOptions(getStakingDepositNavbar({ title, onReject }));
   }, [navigation, onReject, title]);
 
   return (
-    <View style={styles.container}>
-      <ScrollView>
-        <TokenHero />
-      </ScrollView>
-      <Footer />
-    </View>
+    <>
+      <TokenHero />
+    </>
   );
 };
 export default StakingDeposit;

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

@@ -9,6 +9,7 @@ import Text from '../../../../../../component-library/components/Texts/Text';
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
 import { isSIWESignatureRequest } from '../../../utils/signature';
 import { useSignatureRequest } from '../../../hooks/useSignatureRequest';
+import { useStandaloneConfirmation } from '../../../hooks/useStandaloneConfirmation';
 import styleSheet from './Title.styles';
 
 const getTitleAndSubTitle = (
@@ -42,12 +43,17 @@ const Title = () => {
   const { approvalRequest } = useApprovalRequest();
   const signatureRequest = useSignatureRequest();
   const { styles } = useStyles(styleSheet, {});
+  const { isStandaloneConfirmation } = useStandaloneConfirmation();
 
   const { title, subTitle } = getTitleAndSubTitle(
     approvalRequest?.type,
     signatureRequest,
   );
 
+  if (isStandaloneConfirmation) {
+    return null;
+  }
+
   return (
     <View style={styles.titleContainer}>
       <Text style={styles.title}>{title}</Text>