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/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx

@@ -81,6 +81,7 @@ jest.mock('@react-navigation/native', () => {
     useNavigation: () => ({
       navigate: jest.fn(),
       setOptions: jest.fn(),
+      goBack: jest.fn(),
     }),
     useRoute: () => ({
       key: '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,8 +13,8 @@ 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';
 
@@ -26,59 +27,56 @@ const StakeConfirmationView = () => {
       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}
+        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

@@ -3,17 +3,18 @@ import React from 'react';
 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';
 
-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', () => {
@@ -88,20 +89,18 @@ const mockInitialState = {
 const earningsHistoryView = <StakeEarningsHistoryView />;
 
 describe('StakeEarningsHistoryView', () => {
-  it('calls navigation setOptions on render', () => {
-    const renderedView = renderWithProvider(earningsHistoryView, {
-      state: mockInitialState,
+  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,
     });
-    fireLayoutEvent(renderedView.root);
-    expect(mockNavigation.setOptions).toHaveBeenCalled();
-  });
 
-  it('calls navigation setOptions to get staking navigation bar', () => {
     const renderedView = renderWithProvider(earningsHistoryView, {
       state: mockInitialState,
     });
     fireLayoutEvent(renderedView.root);
-    expect(mockNavigation.setOptions).toHaveBeenCalled();
-    expect(getStakingNavbar).toHaveBeenCalled();
+
+    expect(renderedView.getByText(expectedTitle)).toBeOnTheScreen();
   });
 });

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

@@ -1,43 +1,35 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
+import { Box, HeaderStandard } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../locales/i18n';
 import { useStyles } from '../../../../hooks/useStyles';
-import { getStakingNavbar } from '../../../Navbar';
 import styleSheet from './StakeEarningsHistoryView.styles';
 import { StakeEarningsHistoryViewRouteParams } from './StakeEarningsHistoryView.types';
 import EarningsHistory from '../../../Earn/components/Earnings/EarningsHistory/EarningsHistory';
 
 const StakeEarningsHistoryView = () => {
   const navigation = useNavigation();
   const route = useRoute<StakeEarningsHistoryViewRouteParams>();
-  const { styles, theme } = useStyles(styleSheet, {});
+  const { styles } = useStyles(styleSheet, {});
   const { asset } = route.params;
 
-  useEffect(() => {
-    navigation.setOptions(
-      getStakingNavbar(
-        strings('stake.earnings_history_title', {
-          ticker: asset.ticker || asset.symbol,
-        }),
-        navigation,
-        theme.colors,
-        {
-          backgroundColor: theme.colors.background.default,
-          hasCancelButton: false,
-          hasBackButton: true,
-        },
-      ),
-    );
-  }, [navigation, theme.colors, asset.ticker, asset.symbol]);
-
   return (
-    <ScrollView contentContainerStyle={styles.mainContainer}>
-      <View>
-        <EarningsHistory asset={asset} />
-      </View>
-    </ScrollView>
+    <Box twClassName="flex-1 bg-default">
+      <HeaderStandard
+        title={strings('stake.earnings_history_title', {
+          ticker: asset.ticker || asset.symbol,
+        })}
+        onBack={navigation.goBack}
+        includesTopInset
+      />
+      <ScrollView contentContainerStyle={styles.mainContainer}>
+        <View>
+          <EarningsHistory asset={asset} />
+        </View>
+      </ScrollView>
+    </Box>
   );
 };
 

app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.styles.ts

@@ -10,7 +10,7 @@ const styleSheet = (params: { theme: Theme }) => {
       paddingTop: 8,
       paddingHorizontal: 16,
       backgroundColor: colors.background.default,
-      height: '100%',
+      flex: 1,
       justifyContent: 'space-between',
     },
     cardsContainer: {

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

@@ -72,6 +72,7 @@ jest.mock('@react-navigation/native', () => {
     useNavigation: () => ({
       navigate: mockNavigate,
       setOptions: mockSetOptions,
+      goBack: jest.fn(),
     }),
     useRoute: () => ({
       key: '1',

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

@@ -1,9 +1,10 @@
+import React, { useCallback } from 'react';
 import { View } from 'react-native';
-import React, { useEffect } from 'react';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { Box, HeaderStandard } from '@metamask/design-system-react-native';
+import { useSelector } from 'react-redux';
 import styleSheet from './UnstakeConfirmationView.styles';
 import { useStyles } from '../../../../hooks/useStyles';
-import { getStakingNavbar } from '../../../Navbar';
 import { strings } from '../../../../../../locales/i18n';
 import UnstakingTimeCard from '../../components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard';
 import { UnstakeConfirmationViewRouteParams } from './UnstakeConfirmationView.types';
@@ -12,9 +13,9 @@ import AccountCard from '../../components/StakingConfirmation/AccountCard/Accoun
 import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 import { getDecimalChainId } from '../../../../../util/networks';
-import { useSelector } from 'react-redux';
 import { selectEvmChainId } from '../../../../../selectors/networkController';
 
 const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking';
@@ -24,56 +25,53 @@ const UnstakeConfirmationView = () => {
     useRoute<
       RouteProp<{ params: UnstakeConfirmationViewRouteParams }, 'params'>
     >();
-  const { styles, theme } = useStyles(styleSheet, {});
+  const { styles } = useStyles(styleSheet, {});
   const chainId = useSelector(selectEvmChainId);
   const navigation = useNavigation();
+  const { trackEvent, createEventBuilder } = useAnalytics();
 
-  useEffect(() => {
-    navigation.setOptions(
-      getStakingNavbar(
-        strings('stake.unstake'),
-        navigation,
-        theme.colors,
-        {
-          backgroundColor: theme.colors.background.default,
-          hasCancelButton: false,
-        },
-        {
-          backButtonEvent: {
-            event: MetaMetricsEvents.UNSTAKE_CONFIRMATION_BACK_CLICKED,
-            properties: {
-              selected_provider: EVENT_PROVIDERS.CONSENSYS,
-              location: EVENT_LOCATIONS.UNSTAKE_CONFIRMATION_VIEW,
-            },
-          },
-        },
-      ),
+  const handleBackPress = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.UNSTAKE_CONFIRMATION_BACK_CLICKED)
+        .addProperties({
+          selected_provider: EVENT_PROVIDERS.CONSENSYS,
+          location: EVENT_LOCATIONS.UNSTAKE_CONFIRMATION_VIEW,
+        })
+        .build(),
     );
-  }, [navigation, theme.colors]);
+    navigation.goBack();
+  }, [navigation, trackEvent, createEventBuilder]);
 
   return (
-    <View style={styles.mainContainer}>
-      <View>
-        <TokenValueStack
-          amountWei={route.params.amountWei}
-          amountFiat={`$${route.params.amountFiat}`}
-          tokenSymbol="ETH"
-        />
-        <View style={styles.cardsContainer}>
-          <UnstakingTimeCard />
-          <AccountCard
-            contractName={MOCK_STAKING_CONTRACT_NAME}
-            primaryLabel={strings('stake.unstaking_to')}
-            secondaryLabel={strings('stake.interacting_with')}
-            chainId={getDecimalChainId(chainId)}
+    <Box twClassName="flex-1 bg-default">
+      <HeaderStandard
+        title={strings('stake.unstake')}
+        onBack={handleBackPress}
+        includesTopInset
+      />
+      <View style={styles.mainContainer}>
+        <View>
+          <TokenValueStack
+            amountWei={route.params.amountWei}
+            amountFiat={`$${route.params.amountFiat}`}
+            tokenSymbol="ETH"
           />
+          <View style={styles.cardsContainer}>
+            <UnstakingTimeCard />
+            <AccountCard
+              contractName={MOCK_STAKING_CONTRACT_NAME}
+              primaryLabel={strings('stake.unstaking_to')}
+              secondaryLabel={strings('stake.interacting_with')}
+              chainId={getDecimalChainId(chainId)}
+            />
+          </View>
         </View>
+        <ConfirmationFooter
+          valueWei={route.params.amountWei}
+          action={FooterButtonGroupActions.UNSTAKE}
+        />
       </View>
-      <ConfirmationFooter
-        valueWei={route.params.amountWei}
-        action={FooterButtonGroupActions.UNSTAKE}
-      />
-    </View>
+    </Box>
   );
 };