feat: Support standalone confirmation for re-redesigned confirmations (…

…#13550)

<!--
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 aims to implement support of standalone confirmation for
redesigned confirmations.

## **Related issues**

Fixes: MetaMask/MetaMask-planning#4217

## **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.

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

@@ -82,6 +82,9 @@ const StakeInputView = ({ route }: StakeInputViewProps) => {
         amountWei.toString(),
         activeAccount?.address as string,
       );
+      navigation.navigate('StakeScreens', {
+        screen: Routes.STANDALONE_CONFIRMATIONS.STAKE_DEPOSIT,
+      });
       return;
     }
 

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';
@@ -11,6 +12,7 @@ import GasImpactModal from '../components/GasImpactModal';
 import StakeEarningsHistoryView from '../Views/StakeEarningsHistoryView/StakeEarningsHistoryView';
 import PoolStakingLearnMoreModal from '../components/PoolStakingLearnMoreModal';
 import EarnTokenList from '../components/EarnTokenList';
+
 const Stack = createStackNavigator();
 const ModalStack = createStackNavigator();
 
@@ -43,6 +45,10 @@ const StakeScreenStack = () => (
         name={Routes.STAKING.EARNINGS_HISTORY}
         component={StakeEarningsHistoryView}
       />
+      <Stack.Screen
+        name={Routes.STANDALONE_CONFIRMATIONS.STAKE_DEPOSIT}
+        component={Confirm}
+      />
     </Stack.Navigator>
   </StakeSDKProvider>
 );

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

@@ -4,8 +4,8 @@ import renderWithProvider from '../../../../util/test/renderWithProvider';
 import {
   personalSignatureConfirmationState,
   securityAlertResponse,
-  typedSignV1ConfirmationState,
   stakingDepositConfirmationState,
+  typedSignV1ConfirmationState,
 } from '../../../../util/test/confirm-data-helpers';
 // eslint-disable-next-line import/no-namespace
 import * as ConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled';
@@ -49,17 +49,11 @@ jest.mock('@react-navigation/native', () => ({
     navigate: jest.fn(),
     addListener: jest.fn(),
     dispatch: jest.fn(),
+    setOptions: jest.fn(),
   }),
 }));
 
 describe('Confirm', () => {
-  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,
@@ -96,6 +90,18 @@ describe('Confirm', () => {
     expect(queryByText('This is a deceptive request')).toBeNull();
   });
 
+  it('renders correct information for staking deposit', async () => {
+    const { getByText } = renderWithProvider(<Confirm />, {
+      state: stakingDepositConfirmationState,
+    });
+    expect(getByText('APR')).toBeDefined();
+    expect(getByText('Est. annual reward')).toBeDefined();
+    expect(getByText('Reward frequency')).toBeDefined();
+    expect(getByText('Withdrawal time')).toBeDefined();
+    expect(getByText('Network Fee')).toBeDefined();
+    expect(getByText('Advanced details')).toBeDefined();
+  });
+
   it('renders blockaid banner if confirmation has blockaid error response', async () => {
     const { getByText } = renderWithProvider(<Confirm />, {
       state: {

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

@@ -24,19 +24,18 @@ describe('Confirm', () => {
     jest.clearAllMocks();
   });
 
-  it('renders flat confirmation', async () => {
+  it('navigates to modal confirmation', async () => {
     renderWithProvider(<ConfirmRoot />, {
-      state: stakingDepositConfirmationState,
+      state: personalSignatureConfirmationState,
     });
     expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.CONFIRM_FLAT_PAGE);
+    expect(mockNavigate).toHaveBeenLastCalledWith(Routes.CONFIRM_MODAL);
   });
 
-  it('renders modal confirmation', async () => {
+  it('does not navigate if confirmation is standalone', async () => {
     renderWithProvider(<ConfirmRoot />, {
-      state: personalSignatureConfirmationState,
+      state: stakingDepositConfirmationState,
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenLastCalledWith(Routes.CONFIRM_MODAL);
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 });

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

@@ -4,19 +4,29 @@ import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../constants/navigation/Routes';
 import { useFlatConfirmation } from '../hooks/useFlatConfirmation';
 import { useConfirmationRedesignEnabled } from '../hooks/useConfirmationRedesignEnabled';
+import { useStandaloneConfirmation } from '../hooks/useStandaloneConfirmation';
 
 export const ConfirmRoot = () => {
   const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
   const { isFlatConfirmation } = useFlatConfirmation();
+  const { isStandaloneConfirmation } = useStandaloneConfirmation();
   const navigation = useNavigation();
 
   useEffect(() => {
     if (isRedesignedEnabled) {
+      if (isStandaloneConfirmation) {
+        return;
+      }
       navigation.navigate(
         isFlatConfirmation ? Routes.CONFIRM_FLAT_PAGE : Routes.CONFIRM_MODAL,
       );
     }
-  }, [isFlatConfirmation, isRedesignedEnabled, navigation]);
+  }, [
+    isFlatConfirmation,
+    isRedesignedEnabled,
+    isStandaloneConfirmation,
+    navigation,
+  ]);
 
   return null;
 };

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

@@ -2,10 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
-import {
-  personalSignatureConfirmationState,
-  stakingDepositConfirmationState,
-} from '../../../../../../util/test/confirm-data-helpers';
+import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
 // eslint-disable-next-line import/no-namespace
 import * as QRHardwareHook from '../../../context/QRHardwareContext/QRHardwareContext';
 import Info from './Info';
@@ -60,12 +57,4 @@ describe('Info', () => {
     });
     expect(getByText('QR Scanning Component')).toBeTruthy();
   });
-  describe('Staking Deposit', () => {
-    it('should render correctly', async () => {
-      const { getByText } = renderWithProvider(<Info />, {
-        state: stakingDepositConfirmationState,
-      });
-      expect(getByText('Stake')).toBeDefined();
-    });
-  });
 });

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { getStakingDepositNavbar } from './Navbar';
+
+describe('getStakingDepositNavbar', () => {
+  it('renders the header title correctly', () => {
+    const title = 'Test Title';
+    const { getByText } = render(
+      <>
+        {getStakingDepositNavbar({ title, onReject: jest.fn() }).headerTitle()}
+      </>,
+    );
+
+    expect(getByText(title)).toBeTruthy();
+  });
+
+  it('calls onReject when the back button is pressed', () => {
+    const onRejectMock = jest.fn();
+    const { getByTestId } = render(
+      <>
+        {getStakingDepositNavbar({
+          title: 'Test Title',
+          onReject: onRejectMock,
+        }).headerLeft()}
+      </>,
+    );
+
+    const backButton = getByTestId('staking-deposit-navbar-back-button');
+    backButton.props.onPress();
+
+    expect(onRejectMock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  default as MorphText,
+  TextVariant,
+} from '../../../../../../../component-library/components/Texts/Text';
+import ButtonIcon, {
+  ButtonIconSizes,
+} from '../../../../../../../component-library/components/Buttons/ButtonIcon';
+import { IconName } from '../../../../../../../component-library/components/Icons/Icon';
+
+export function getStakingDepositNavbar({
+  title,
+  onReject,
+}: {
+  title: string;
+  onReject: () => void;
+}) {
+  const innerStyles = StyleSheet.create({
+    headerLeft: {
+      marginHorizontal: 16,
+    },
+    headerTitle: {
+      alignItems: 'center',
+    },
+  });
+
+  function handleBackPress() {
+    if (onReject) {
+      onReject();
+    }
+  }
+
+  return {
+    headerTitle: () => (
+      <View style={innerStyles.headerTitle}>
+        <MorphText variant={TextVariant.HeadingMD}>{title}</MorphText>
+      </View>
+    ),
+    headerLeft: () => (
+      <ButtonIcon
+        size={ButtonIconSizes.Lg}
+        iconName={IconName.ArrowLeft}
+        onPress={handleBackPress}
+        style={innerStyles.headerLeft}
+        testID="staking-deposit-navbar-back-button"
+      />
+    ),
+  };
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import { stakingDepositConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
+import StakingDeposit from './StakingDeposit';
+
+jest.mock('../../../../../../../core/Engine', () => ({
+  getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
+  context: {
+    NetworkController: {
+      getNetworkConfigurationByNetworkClientId: jest.fn(),
+    },
+    GasFeeController: {
+      startPolling: jest.fn(),
+      stopPollingByPollingToken: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+      setOptions: jest.fn(),
+    }),
+  };
+});
+
+describe('StakingDeposit', () => {
+  it('should render correctly', () => {
+    const { getByText } = renderWithProvider(<StakingDeposit />, {
+      state: stakingDepositConfirmationState,
+    });
+    expect(getByText('APR')).toBeDefined();
+    expect(getByText('Est. annual reward')).toBeDefined();
+    expect(getByText('Reward frequency')).toBeDefined();
+    expect(getByText('Withdrawal time')).toBeDefined();
+    expect(getByText('Network Fee')).toBeDefined();
+    expect(getByText('Advanced details')).toBeDefined();
+  });
+});

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

@@ -1,18 +1,35 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../../../../../locales/i18n';
 import AdvancedDetails from '../../AdvancedDetails/AdvancedDetails';
-import FlatNavHeader from '../../FlatNavHeader';
 import StakingDetails from '../../StakingDetails';
 import TokenHero from '../../TokenHero';
 import GasFeesDetails from '../GasFeesDetails';
+import { getStakingDepositNavbar } from './Navbar';
 
-const StakingDeposit = () => (
-  <>
-    <FlatNavHeader title={strings('stake.stake')} />
-    <TokenHero />
-    <StakingDetails />
-    <GasFeesDetails />
-    <AdvancedDetails />
-  </>
-);
+const StakingDeposit = () => {
+  const navigation = useNavigation();
+
+  const updateNavBar = useCallback(() => {
+    navigation.setOptions(
+      getStakingDepositNavbar({
+        title: strings('stake.stake'),
+        onReject: () => navigation.goBack(),
+      }),
+    );
+  }, [navigation]);
+
+  useEffect(() => {
+    updateNavBar();
+  }, [updateNavBar]);
+
+  return (
+    <>
+      <TokenHero />
+      <StakingDetails />
+      <GasFeesDetails />
+      <AdvancedDetails />
+    </>
+  );
+};
 export default StakingDeposit;

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

@@ -10,6 +10,7 @@ import Text from '../../../../../../component-library/components/Texts/Text';
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
 import { useSignatureRequest } from '../../../hooks/useSignatureRequest';
 import { isSIWESignatureRequest , isRecognizedPermit, parseTypedDataMessageFromSignatureRequest } from '../../../utils/signature';
+import { useStandaloneConfirmation } from '../../../hooks/useStandaloneConfirmation';
 import styleSheet from './Title.styles';
 
 const getTitleAndSubTitle = (approvalRequest?: ApprovalRequest<{ data: string }>, signatureRequest?: SignatureRequest) => {
@@ -60,6 +61,11 @@ const Title = () => {
   const { approvalRequest } = useApprovalRequest();
   const signatureRequest = useSignatureRequest();
   const { styles } = useStyles(styleSheet, {});
+  const { isStandaloneConfirmation } = useStandaloneConfirmation();
+
+  if (isStandaloneConfirmation) {
+    return null;
+  }
 
   const { title, subTitle } = getTitleAndSubTitle(approvalRequest, signatureRequest);
 

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

@@ -12,8 +12,6 @@ const styleSheet = (params: { theme: Theme }) => {
     assetAmountText: {
       textAlign: 'center',
     },
-    assetFiatConversionContainer: {
-    },
     assetFiatConversionText: {
       textAlign: 'center',
       color: theme.colors.text.alternative,
@@ -27,9 +25,10 @@ const styleSheet = (params: { theme: Theme }) => {
       width: 48,
       height: 48,
     },
-    container:{
-      paddingVertical: 8
-    }
+    container: {
+      paddingBottom: 8,
+      paddingTop: 16,
+    },
   });
 };