feat: STAKE-884 add more mobile pooled staking events

app/components/UI/Navbar/index.js

@@ -63,6 +63,7 @@ import { toChecksumHexAddress } from '@metamask/controller-utils';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { isBtcAccount } from '../../../core/Multichain/utils';
 ///: END:ONLY_INCLUDE_IF
+import { withMetaMetrics } from '../Stake/utils/metaMetrics/withMetaMetrics';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event);
@@ -1949,16 +1950,23 @@ export const getSettingsNavigationOptions = (title, themeColors) => {
  * @param {String} title - Navbar Title.
  * @param {NavigationProp<ParamListBase>} navigation Navigation object returned from useNavigation hook.
  * @param {ThemeColors} themeColors theme.colors returned from useStyles hook.
- * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [options] - Optional options for navbar.
+ * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [navBarOptions] - Optional navbar options.
+ * @param {{ cancelButtonEvent?: { event: IMetaMetricsEvent, properties: Record<string, string> }, backButtonEvent?: { event: IMetaMetricsEvent, properties: Record<string, string>} }} [metricsOptions] - Optional metrics options.
  * @returns Staking Navbar Component.
  */
-export function getStakingNavbar(title, navigation, themeColors, options) {
-  const { hasBackButton = true, hasCancelButton = true } = options ?? {};
+export function getStakingNavbar(
+  title,
+  navigation,
+  themeColors,
+  navBarOptions,
+  metricsOptions,
+) {
+  const { hasBackButton = true, hasCancelButton = true } = navBarOptions ?? {};
 
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor:
-        options?.backgroundColor ?? themeColors.background.default,
+        navBarOptions?.backgroundColor ?? themeColors.background.default,
       shadowOffset: null,
     },
     headerLeft: {
@@ -1990,7 +1998,14 @@ export function getStakingNavbar(title, navigation, themeColors, options) {
         <ButtonIcon
           size={ButtonIconSizes.Lg}
           iconName={IconName.ArrowLeft}
-          onPress={navigationPop}
+          onPress={
+            metricsOptions?.backButtonEvent
+              ? withMetaMetrics(navigationPop, {
+                  event: metricsOptions.backButtonEvent.event,
+                  properties: metricsOptions.backButtonEvent.properties,
+                })
+              : navigationPop
+          }
           style={innerStyles.headerLeft}
         />
       ) : (
@@ -1999,7 +2014,14 @@ export function getStakingNavbar(title, navigation, themeColors, options) {
     headerRight: () =>
       hasCancelButton ? (
         <TouchableOpacity
-          onPress={() => navigation.dangerouslyGetParent()?.pop()}
+          onPress={
+            metricsOptions?.cancelButtonEvent
+              ? withMetaMetrics(navigationPop, {
+                  event: metricsOptions.cancelButtonEvent.event,
+                  properties: metricsOptions.cancelButtonEvent.properties,
+                })
+              : navigationPop
+          }
           style={styles.closeButton}
         >
           <Text style={innerStyles.headerButtonText}>

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

@@ -13,6 +13,7 @@ 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 '../../../../hooks/useMetrics';
 
 const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking';
 
@@ -23,10 +24,24 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => {
 
   useEffect(() => {
     navigation.setOptions(
-      getStakingNavbar(strings('stake.stake'), navigation, theme.colors, {
-        backgroundColor: theme.colors.background.alternative,
-        hasCancelButton: false,
-      }),
+      getStakingNavbar(
+        strings('stake.stake'),
+        navigation,
+        theme.colors,
+        {
+          backgroundColor: theme.colors.background.alternative,
+          hasCancelButton: false,
+        },
+        {
+          backButtonEvent: {
+            event: MetaMetricsEvents.STAKE_CONFIRMATION_BACK_CLICKED,
+            properties: {
+              selected_provider: 'consensys',
+              location: 'StakeConfirmationView',
+            },
+          },
+        },
+      ),
     );
   }, [navigation, theme.colors]);
 

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

@@ -246,6 +246,8 @@ describe('StakeInputView', () => {
           annualRewardRate: '2.5%',
           annualRewardsETH: '0.00938 ETH',
           annualRewardsFiat: '18.75 USD',
+          estimatedGasFee: '0.25',
+          estimatedGasFeePercentage: '66%',
         },
       });
     });

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

@@ -20,6 +20,7 @@ import useStakingInputHandlers from '../../hooks/useStakingInput';
 import InputDisplay from '../../components/InputDisplay';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
+import { formatEther } from 'ethers/lib/utils';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
@@ -49,6 +50,8 @@ const StakeInputView = () => {
     handleMax,
     balanceValue,
     isHighGasCostImpact,
+    getDepositTxGasPercentage,
+    estimatedGasFeeWei,
     isLoadingStakingGasFee,
   } = useStakingInputHandlers();
 
@@ -60,6 +63,21 @@ const StakeInputView = () => {
 
   const handleStakePress = useCallback(() => {
     if (isHighGasCostImpact()) {
+      trackEvent(
+        createEventBuilder(
+          MetaMetricsEvents.STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED,
+        )
+          .addProperties({
+            selected_provider: 'consensys',
+            location: 'StakeInputView',
+            tokens_to_stake_native_value: amountEth,
+            tokens_to_stake_usd_value: fiatAmount,
+            estimated_gas_fee: formatEther(estimatedGasFeeWei.toString()),
+            estimated_gas_percentage_of_deposit: `${getDepositTxGasPercentage()}%`,
+          })
+          .build(),
+      );
+
       navigation.navigate('StakeModals', {
         screen: Routes.STAKING.MODALS.GAS_IMPACT,
         params: {
@@ -68,6 +86,8 @@ const StakeInputView = () => {
           annualRewardsETH,
           annualRewardsFiat,
           annualRewardRate,
+          estimatedGasFee: formatEther(estimatedGasFeeWei.toString()),
+          estimatedGasFeePercentage: `${getDepositTxGasPercentage()}%`,
         },
       });
       return;
@@ -103,6 +123,8 @@ const StakeInputView = () => {
     trackEvent,
     createEventBuilder,
     amountEth,
+    estimatedGasFeeWei,
+    getDepositTxGasPercentage,
   ]);
 
   const handleMaxButtonPress = () => {
@@ -124,9 +146,23 @@ const StakeInputView = () => {
 
   useEffect(() => {
     navigation.setOptions(
-      getStakingNavbar(title, navigation, theme.colors, {
-        hasBackButton: false,
-      }),
+      getStakingNavbar(
+        title,
+        navigation,
+        theme.colors,
+        {
+          hasBackButton: false,
+        },
+        {
+          cancelButtonEvent: {
+            event: MetaMetricsEvents.STAKE_CANCEL_CLICKED,
+            properties: {
+              selected_provider: 'consensys',
+              location: 'StakeInputView',
+            },
+          },
+        },
+      ),
     );
   }, [navigation, theme.colors, title]);
 

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

@@ -11,6 +11,7 @@ import TokenValueStack from '../../components/StakingConfirmation/TokenValueStac
 import AccountCard from '../../components/StakingConfirmation/AccountCard/AccountCard';
 import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
 
 const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking';
 
@@ -21,10 +22,24 @@ const UnstakeConfirmationView = ({ route }: UnstakeConfirmationViewProps) => {
 
   useEffect(() => {
     navigation.setOptions(
-      getStakingNavbar(strings('stake.unstake'), navigation, theme.colors, {
-        backgroundColor: theme.colors.background.alternative,
-        hasCancelButton: false,
-      }),
+      getStakingNavbar(
+        strings('stake.unstake'),
+        navigation,
+        theme.colors,
+        {
+          backgroundColor: theme.colors.background.alternative,
+          hasCancelButton: false,
+        },
+        {
+          backButtonEvent: {
+            event: MetaMetricsEvents.UNSTAKE_CONFIRMATION_BACK_CLICKED,
+            properties: {
+              selected_provider: 'consensys',
+              location: 'UnstakeConfirmationView',
+            },
+          },
+        },
+      ),
     );
   }, [navigation, theme.colors]);
 

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

@@ -54,9 +54,23 @@ const UnstakeInputView = () => {
 
   useEffect(() => {
     navigation.setOptions(
-      getStakingNavbar(title, navigation, theme.colors, {
-        hasBackButton: false,
-      }),
+      getStakingNavbar(
+        title,
+        navigation,
+        theme.colors,
+        {
+          hasBackButton: false,
+        },
+        {
+          cancelButtonEvent: {
+            event: MetaMetricsEvents.UNSTAKE_CANCEL_CLICKED,
+            properties: {
+              selected_provider: 'consensys',
+              location: 'UnstakeInputView',
+            },
+          },
+        },
+      ),
     );
   }, [navigation, theme.colors, title]);
 

app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx

@@ -29,6 +29,8 @@ const props: GasImpactModalProps = {
       annualRewardRate: '2.5%',
       annualRewardsETH: '2.5 ETH',
       annualRewardsFiat: '$5000',
+      estimatedGasFee: '0.009171428571428572',
+      estimatedGasFeePercentage: '35%',
     },
     name: 'params',
   },

app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts

@@ -6,6 +6,8 @@ interface GasImpactModalRouteParams {
   annualRewardsETH: string;
   annualRewardsFiat: string;
   annualRewardRate: string;
+  estimatedGasFee: string;
+  estimatedGasFeePercentage: string;
 }
 
 export interface GasImpactModalProps {

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
@@ -22,27 +22,64 @@ import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../constants/navigation/Routes';
 import { GasImpactModalProps } from './GasImpactModal.types';
 import { strings } from '../../../../../../locales/i18n';
+import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
+import { formatEther } from 'ethers/lib/utils';
 
 const GasImpactModal = ({ route }: GasImpactModalProps) => {
   const { styles } = useStyles(styleSheet, {});
 
   const { navigate } = useNavigation();
 
+  const { trackEvent, createEventBuilder } = useMetrics();
+
   const sheetRef = useRef<BottomSheetRef>(null);
 
+  const {
+    amountWei,
+    annualRewardRate,
+    annualRewardsFiat,
+    annualRewardsETH,
+    amountFiat,
+    estimatedGasFee,
+    estimatedGasFeePercentage,
+  } = route.params;
+
+  const metricsEvent = useCallback(
+    (
+      eventName:
+        | typeof MetaMetricsEvents.STAKE_GAS_COST_IMPACT_CANCEL_CLICKED
+        | typeof MetaMetricsEvents.STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED,
+    ) => {
+      trackEvent(
+        createEventBuilder(eventName)
+          .addProperties({
+            selected_provider: 'consensys',
+            location: 'GasImpactModal',
+            tokens_to_stake_native_value: formatEther(amountWei),
+            tokens_to_stake_usd_value: amountFiat,
+            estimated_gas_fee: estimatedGasFee,
+            estimated_gas_percentage_of_deposit: estimatedGasFeePercentage,
+          })
+          .build(),
+      );
+    },
+    [
+      amountFiat,
+      amountWei,
+      createEventBuilder,
+      estimatedGasFee,
+      estimatedGasFeePercentage,
+      trackEvent,
+    ],
+  );
+
   const handleClose = () => {
+    metricsEvent(MetaMetricsEvents.STAKE_GAS_COST_IMPACT_CANCEL_CLICKED);
     sheetRef.current?.onCloseBottomSheet();
   };
 
   const handleNavigateToStakeReviewScreen = () => {
-    const {
-      amountWei,
-      annualRewardRate,
-      annualRewardsFiat,
-      annualRewardsETH,
-      amountFiat,
-    } = route.params;
-
+    metricsEvent(MetaMetricsEvents.STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED);
     navigate('StakeScreens', {
       screen: Routes.STAKING.STAKE_CONFIRMATION,
       params: {