refactor(stake): use native stack navigators for Stake routes

app/components/UI/Earn/Views/EarnInputView/EarnInputView.tsx

@@ -900,12 +900,6 @@ const EarnInputView = () => {
     navigateToLearnMoreModal,
   ]);
 
-  useEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
   const headerTitle = useMemo(() => {
     const isLending =
       earnToken?.experience?.type === EARN_EXPERIENCES.STABLECOIN_LENDING;

app/components/UI/Earn/Views/EarnWithdrawInputView/EarnWithdrawInputView.tsx

@@ -349,6 +349,7 @@
       ? `${strings('earn.withdraw')} ${tokenLabel}`
       : `${strings('stake.unstake')} ${tokenLabel}`;
 
+    //TODO: replace this with HeaderStandard
     navigation.setOptions(
       getStakingNavbar(
         title,

app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
 import renderWithProvider, {
   DeepPartial,
 } from '../../../../../util/test/renderWithProvider';
-import StakeConfirmationView from './StakeConfirmationView';
+import StakeConfirmationView, {
+  STAKE_CONFIRMATION_VIEW_BACK_BUTTON_TEST_ID,
+} from './StakeConfirmationView';
 import { Image, ImageSize } from 'react-native';
 import { createMockAccountsControllerState } from '../../../../../util/test/accountsControllerTestUtils';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
@@ -12,6 +15,8 @@ import { StakeConfirmationViewRouteParams } from './StakeConfirmationView.types'
 import { MOCK_POOL_STAKING_SDK } from '../../__mocks__/stakeMockData';
 import { RootState } from '../../../../../reducers';
 import { strings } from '../../../../../../locales/i18n';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
+import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 
 jest.mock('../../../../hooks/useIpfsGateway', () => jest.fn());
 
@@ -74,13 +79,18 @@ jest.mock('react-redux', () => ({
     .mockImplementation((callback) => callback(mockInitialState)),
 }));
 
+const mockNavigate = jest.fn();
+const mockGoBack = jest.fn();
+const mockSetOptions = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');
   return {
     ...actualNav,
     useNavigation: () => ({
-      navigate: jest.fn(),
-      setOptions: jest.fn(),
+      navigate: mockNavigate,
+      setOptions: mockSetOptions,
+      goBack: mockGoBack,
     }),
     useRoute: () => ({
       key: '1',
@@ -97,6 +107,24 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const mockAddProperties = jest.fn().mockReturnThis();
+const mockBuild = jest.fn().mockReturnValue({
+  name: 'STAKE_CONFIRMATION_BACK_CLICKED',
+});
+const mockEventBuilder = {
+  addProperties: mockAddProperties,
+  build: mockBuild,
+};
+const mockCreateEventBuilder = jest.fn().mockReturnValue(mockEventBuilder);
+const mockTrackEvent = jest.fn();
+
+jest.mock('../../../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
+    trackEvent: mockTrackEvent,
+    createEventBuilder: mockCreateEventBuilder,
+  }),
+}));
+
 jest.mock('../../hooks/usePoolStakedDeposit', () => ({
   __esModule: true,
   default: () => ({
@@ -117,13 +145,49 @@ jest.mock('../../hooks/usePooledStakes', () => ({
 }));
 
 describe('StakeConfirmationView', () => {
-  it('renders stake confirmation view', () => {
-    const { getByText } = renderWithProvider(
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderView = () =>
+    renderWithProvider(
       <Provider store={store}>
         <StakeConfirmationView />
       </Provider>,
     );
 
+  it('renders stake confirmation view', () => {
+    const { getByText } = renderView();
+
     expect(getByText(strings('stake.staking_from'))).toBeOnTheScreen();
   });
+
+  it('renders header with the stake title', () => {
+    const { getByText } = renderView();
+
+    expect(getByText(strings('stake.stake'))).toBeOnTheScreen();
+  });
+
+  it('calls navigation.goBack on back press', () => {
+    const { getByTestId } = renderView();
+
+    fireEvent.press(getByTestId(STAKE_CONFIRMATION_VIEW_BACK_BUTTON_TEST_ID));
+
+    expect(mockGoBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('tracks STAKE_CONFIRMATION_BACK_CLICKED on back press', () => {
+    const { getByTestId } = renderView();
+
+    fireEvent.press(getByTestId(STAKE_CONFIRMATION_VIEW_BACK_BUTTON_TEST_ID));
+
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.STAKE_CONFIRMATION_BACK_CLICKED,
+    );
+    expect(mockAddProperties).toHaveBeenCalledWith({
+      selected_provider: EVENT_PROVIDERS.CONSENSYS,
+      location: EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW,
+    });
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { Box, HeaderStandard } from '@metamask/design-system-react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import { useStyles } from '../../../../hooks/useStyles';
-import { getStakingNavbar } from '../../../Navbar';
 import styleSheet from './StakeConfirmationView.styles';
 import TokenValueStack from '../../components/StakingConfirmation/TokenValueStack/TokenValueStack';
 import AccountCard from '../../components/StakingConfirmation/AccountCard/AccountCard';
@@ -12,73 +13,76 @@ import { StakeConfirmationViewRouteParams } from './StakeConfirmationView.types'
 import { strings } from '../../../../../../locales/i18n';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
 import UnstakingTimeCard from '../../components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard';
-import { ScrollView } from 'react-native-gesture-handler';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 import { getDecimalChainId } from '../../../../../util/networks';
 
 const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking';
 
+export const STAKE_CONFIRMATION_VIEW_BACK_BUTTON_TEST_ID =
+  'stake-confirmation-header-back-button';
+
 const StakeConfirmationView = () => {
   const navigation = useNavigation();
   const route =
     useRoute<
       RouteProp<{ params: StakeConfirmationViewRouteParams }, 'params'>
     >();
 
-  const { styles, theme } = useStyles(styleSheet, {});
+  const { styles } = useStyles(styleSheet, {});
+  const { trackEvent, createEventBuilder } = useAnalytics();
 
-  useEffect(() => {
-    navigation.setOptions(
-      getStakingNavbar(
-        strings('stake.stake'),
-        navigation,
-        theme.colors,
-        {
-          backgroundColor: theme.colors.background.default,
-          hasCancelButton: false,
-        },
-        {
-          backButtonEvent: {
-            event: MetaMetricsEvents.STAKE_CONFIRMATION_BACK_CLICKED,
-            properties: {
-              selected_provider: EVENT_PROVIDERS.CONSENSYS,
-              location: EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW,
-            },
-          },
-        },
-      ),
+  const handleBackPress = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.STAKE_CONFIRMATION_BACK_CLICKED)
+        .addProperties({
+          selected_provider: EVENT_PROVIDERS.CONSENSYS,
+          location: EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW,
+        })
+        .build(),
     );
-  }, [navigation, theme.colors]);
+    navigation.goBack();
+  }, [navigation, trackEvent, createEventBuilder]);
 
   return (
-    <ScrollView contentContainerStyle={styles.mainContainer}>
-      <View>
-        <TokenValueStack
-          amountWei={route.params.amountWei}
-          amountFiat={`$${route.params.amountFiat}`}
-          tokenSymbol="ETH"
-        />
-        <View style={styles.cardsContainer}>
-          <AccountCard
-            contractName={MOCK_STAKING_CONTRACT_NAME}
-            primaryLabel={strings('stake.staking_from')}
-            secondaryLabel={strings('stake.interacting_with')}
-            chainId={getDecimalChainId(route?.params?.chainId)}
-          />
-          <RewardsCard
-            rewardRate={route.params.annualRewardRate}
-            rewardsEth={route.params.annualRewardsETH}
-            rewardsFiat={route.params.annualRewardsFiat}
+    <Box twClassName="flex-1 bg-default">
+      <HeaderStandard
+        title={strings('stake.stake')}
+        onBack={handleBackPress}
+        backButtonProps={{
+          testID: STAKE_CONFIRMATION_VIEW_BACK_BUTTON_TEST_ID,
+        }}
+        includesTopInset
+      />
+      <ScrollView contentContainerStyle={styles.mainContainer}>
+        <View>
+          <TokenValueStack
+            amountWei={route.params.amountWei}
+            amountFiat={`$${route.params.amountFiat}`}
+            tokenSymbol="ETH"
           />
-          <UnstakingTimeCard />
+          <View style={styles.cardsContainer}>
+            <AccountCard
+              contractName={MOCK_STAKING_CONTRACT_NAME}
+              primaryLabel={strings('stake.staking_from')}
+              secondaryLabel={strings('stake.interacting_with')}
+              chainId={getDecimalChainId(route?.params?.chainId)}
+            />
+            <RewardsCard
+              rewardRate={route.params.annualRewardRate}
+              rewardsEth={route.params.annualRewardsETH}
+              rewardsFiat={route.params.annualRewardsFiat}
+            />
+            <UnstakingTimeCard />
+          </View>
         </View>
-      </View>
-      <ConfirmationFooter
-        valueWei={route.params.amountWei}
-        action={FooterButtonGroupActions.STAKE}
-      />
-    </ScrollView>
+        <ConfirmationFooter
+          valueWei={route.params.amountWei}
+          action={FooterButtonGroupActions.STAKE}
+        />
+      </ScrollView>
+    </Box>
   );
 };
 

app/components/UI/Stake/Views/StakeEarningsHistoryView/StakeEarningsHistoryView.test.tsx

@@ -1,19 +1,23 @@
 import { Hex } from '@metamask/utils';
 import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { fireLayoutEvent } from '../../../../../util/testUtils/react-native-svg-charts';
+import { strings } from '../../../../../../locales/i18n';
 import useEarningsHistory from '../../../Earn/hooks/useEarningsHistory';
-import { getStakingNavbar } from '../../../Navbar';
 import { MOCK_STAKED_ETH_MAINNET_ASSET } from '../../__mocks__/stakeMockData';
-import StakeEarningsHistoryView from './StakeEarningsHistoryView';
+import StakeEarningsHistoryView, {
+  STAKE_EARNINGS_HISTORY_VIEW_BACK_BUTTON_TEST_ID,
+} from './StakeEarningsHistoryView';
 
-jest.mock('../../../Navbar');
 jest.mock('../../../Earn/hooks/useEarningsHistory');
 
+const mockGoBack = jest.fn();
 const mockNavigation = {
   navigate: jest.fn(),
   setOptions: jest.fn(),
+  goBack: mockGoBack,
 };
 
 jest.mock('@react-navigation/native', () => {
@@ -29,7 +33,7 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 jest.mock('react-native-svg-charts', () => {
-  const reactNativeSvgCharts = jest.requireActual('react-native-svg-charts'); // Get the actual Grid component
+  const reactNativeSvgCharts = jest.requireActual('react-native-svg-charts');
   return {
     ...reactNativeSvgCharts,
     Grid: () => <></>,
@@ -88,20 +92,35 @@ const mockInitialState = {
 const earningsHistoryView = <StakeEarningsHistoryView />;
 
 describe('StakeEarningsHistoryView', () => {
-  it('calls navigation setOptions on render', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the staking earnings history header title with the asset ticker', () => {
+    const expectedTitle = strings('stake.earnings_history_title', {
+      ticker:
+        MOCK_STAKED_ETH_MAINNET_ASSET.ticker ||
+        MOCK_STAKED_ETH_MAINNET_ASSET.symbol,
+    });
+
     const renderedView = renderWithProvider(earningsHistoryView, {
       state: mockInitialState,
     });
     fireLayoutEvent(renderedView.root);
-    expect(mockNavigation.setOptions).toHaveBeenCalled();
+
+    expect(renderedView.getByText(expectedTitle)).toBeOnTheScreen();
   });
 
-  it('calls navigation setOptions to get staking navigation bar', () => {
+  it('calls navigation.goBack when the header back button is pressed', () => {
     const renderedView = renderWithProvider(earningsHistoryView, {
       state: mockInitialState,
     });
     fireLayoutEvent(renderedView.root);
-    expect(mockNavigation.setOptions).toHaveBeenCalled();
-    expect(getStakingNavbar).toHaveBeenCalled();
+
+    fireEvent.press(
+      renderedView.getByTestId(STAKE_EARNINGS_HISTORY_VIEW_BACK_BUTTON_TEST_ID),
+    );
+
+    expect(mockGoBack).toHaveBeenCalledTimes(1);
   });
 });