From 7a39e73ca5a8b117770b5b11de77ae6c3a3e0454 Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 15:36:14 -0500
Subject: [PATCH 01/10] feat: added metricsOptions to getStakingNavbar

---
 app/components/UI/Navbar/index.js | 34 +++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
index b7763524b3e..8a59e6e2296 100644
--- a/app/components/UI/Navbar/index.js
+++ b/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);
@@ -1935,16 +1936,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: {
@@ -1976,7 +1984,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}
         />
       ) : (
@@ -1985,7 +2000,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}>

From 6684053a28dbac2b2f6b5a7ac3c303ff147ad68d Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 15:37:21 -0500
Subject: [PATCH 02/10] feat: added stake-input-cancel-clicked and
 unstake-input-cancel-clicked events

---
 .../Views/StakeInputView/StakeInputView.tsx   | 20 ++++++++++++++++---
 .../UnstakeInputView/UnstakeInputView.tsx     | 20 ++++++++++++++++---
 app/core/Analytics/MetaMetrics.events.ts      |  4 ++++
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
index ead9d7016c8..044a9b1ae1f 100644
--- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
+++ b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
@@ -124,9 +124,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]);
 
diff --git a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx
index b27bbbe07e0..25bfb52380a 100644
--- a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx
+++ b/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]);
 
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index ed8898687ef..47b225237d0 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -283,7 +283,9 @@ enum EVENT_NAME {
   STAKE_CLAIM_BUTTON_CLICKED = 'Stake Claim Button Clicked',
   STAKE_LEARN_MORE_CLICKED = 'Stake Learn More Clicked',
   STAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Stake Input Currency Switch Clicked',
+  STAKE_CANCEL_CLICKED = 'Stake Cancel Clicked',
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Unstake Input Currency Switch Clicked',
+  UNSTAKE_CANCEL_CLICKED = 'Unstake Cancel Clicked',
 
   // Force Upgrade | Automatic Security Checks
   FORCE_UPGRADE_UPDATE_NEEDED_PROMPT_VIEWED = 'Force Upgrade Update Needed Prompt Viewed',
@@ -913,9 +915,11 @@ const events = {
   STAKE_INPUT_CURRENCY_SWITCH_CLICKED: generateOpt(
     EVENT_NAME.STAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),
+  STAKE_CANCEL_CLICKED: generateOpt(EVENT_NAME.STAKE_CANCEL_CLICKED),
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED: generateOpt(
     EVENT_NAME.UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),
+  UNSTAKE_CANCEL_CLICKED: generateOpt(EVENT_NAME.UNSTAKE_CANCEL_CLICKED),
 };
 
 /**

From f4b6088599346e8d526bee382ff6fdd12e92d434 Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 15:50:54 -0500
Subject: [PATCH 03/10] feat: added stake-cancel-clicked and
 unstake-cancel-clicked events to stake and unstake confirmation views

---
 .../FooterButtonGroup/FooterButtonGroup.tsx   | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
index c60c393fb18..594652775ff 100644
--- a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
+++ b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
@@ -24,6 +24,10 @@ import {
 import Routes from '../../../../../../../constants/navigation/Routes';
 import usePoolStakedUnstake from '../../../../hooks/usePoolStakedUnstake';
 import usePooledStakes from '../../../../hooks/usePooledStakes';
+import {
+  MetaMetricsEvents,
+  useMetrics,
+} from '../../../../../../hooks/useMetrics';
 
 const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   const { styles } = useStyles(styleSheet, {});
@@ -31,6 +35,8 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   const navigation = useNavigation();
   const { navigate } = navigation;
 
+  const { trackEvent, createEventBuilder } = useMetrics();
+
   const activeAccount = useSelector(selectSelectedInternalAccount);
 
   const { attemptDepositTransaction } = usePoolStakedDeposit();
@@ -110,6 +116,27 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
     }
   };
 
+  const handleCancelPress = () => {
+    const isStaking = action === FooterButtonGroupActions.STAKE;
+
+    const event = {
+      name: isStaking
+        ? MetaMetricsEvents.STAKE_CANCEL_CLICKED
+        : MetaMetricsEvents.UNSTAKE_CANCEL_CLICKED,
+      location: isStaking ? 'StakeConfirmationView' : 'UnstakeConfirmationView',
+    };
+
+    trackEvent(
+      createEventBuilder(event.name)
+        .addProperties({
+          location: event.location,
+        })
+        .build(),
+    );
+
+    navigation.goBack();
+  };
+
   return (
     <View style={styles.footerContainer}>
       <Button
@@ -122,9 +149,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
         variant={ButtonVariants.Secondary}
         width={ButtonWidthTypes.Full}
         size={ButtonSize.Lg}
-        onPress={() => {
-          navigation.goBack();
-        }}
+        onPress={handleCancelPress}
         disabled={didSubmitTransaction}
       />
       <Button

From 2fb696f562930c895113ccf9dbaa518f412a7cbb Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 16:00:29 -0500
Subject: [PATCH 04/10] feat: added stake-transaction-initiated and
 unstake-transaction-initiated events on stake and unstake confirmation
 screens

---
 .../FooterButtonGroup/FooterButtonGroup.tsx   | 33 +++++++++++++++----
 app/core/Analytics/MetaMetrics.events.ts      |  8 +++++
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
index 594652775ff..403e92f88ba 100644
--- a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
+++ b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
@@ -92,17 +92,37 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
 
       setDidSubmitTransaction(true);
 
+      const isStaking = action === FooterButtonGroupActions.STAKE;
+
+      const metricsEvent = {
+        name: isStaking
+          ? MetaMetricsEvents.STAKE_TRANSACTION_INITIATED
+          : MetaMetricsEvents.UNSTAKE_TRANSACTION_INITIATED,
+        location: isStaking
+          ? 'StakeConfirmationView'
+          : 'UnstakeConfirmationView',
+      };
+
+      trackEvent(
+        createEventBuilder(metricsEvent.name)
+          .addProperties({
+            selected_provider: 'consensys',
+            location: metricsEvent.location,
+          })
+          .build(),
+      );
+
       let transactionId: string | undefined;
 
-      if (action === FooterButtonGroupActions.STAKE) {
+      if (isStaking) {
         const txRes = await attemptDepositTransaction(
           valueWei,
           activeAccount.address,
         );
         transactionId = txRes?.transactionMeta?.id;
       }
-
-      if (action === FooterButtonGroupActions.UNSTAKE) {
+      // Unstaking
+      else {
         const txRes = await attemptUnstakeTransaction(
           valueWei,
           activeAccount.address,
@@ -119,7 +139,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   const handleCancelPress = () => {
     const isStaking = action === FooterButtonGroupActions.STAKE;
 
-    const event = {
+    const metricsEvent = {
       name: isStaking
         ? MetaMetricsEvents.STAKE_CANCEL_CLICKED
         : MetaMetricsEvents.UNSTAKE_CANCEL_CLICKED,
@@ -127,9 +147,10 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
     };
 
     trackEvent(
-      createEventBuilder(event.name)
+      createEventBuilder(metricsEvent.name)
         .addProperties({
-          location: event.location,
+          selected_provider: 'consensys',
+          location: metricsEvent.location,
         })
         .build(),
     );
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index 47b225237d0..531b3adde66 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -284,8 +284,10 @@ enum EVENT_NAME {
   STAKE_LEARN_MORE_CLICKED = 'Stake Learn More Clicked',
   STAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Stake Input Currency Switch Clicked',
   STAKE_CANCEL_CLICKED = 'Stake Cancel Clicked',
+  STAKE_TRANSACTION_INITIATED = 'Stake Transaction Initiated',
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Unstake Input Currency Switch Clicked',
   UNSTAKE_CANCEL_CLICKED = 'Unstake Cancel Clicked',
+  UNSTAKE_TRANSACTION_INITIATED = 'Unstake Transaction Initiated',
 
   // Force Upgrade | Automatic Security Checks
   FORCE_UPGRADE_UPDATE_NEEDED_PROMPT_VIEWED = 'Force Upgrade Update Needed Prompt Viewed',
@@ -916,10 +918,16 @@ const events = {
     EVENT_NAME.STAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),
   STAKE_CANCEL_CLICKED: generateOpt(EVENT_NAME.STAKE_CANCEL_CLICKED),
+  STAKE_TRANSACTION_INITIATED: generateOpt(
+    EVENT_NAME.STAKE_TRANSACTION_INITIATED,
+  ),
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED: generateOpt(
     EVENT_NAME.UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),
   UNSTAKE_CANCEL_CLICKED: generateOpt(EVENT_NAME.UNSTAKE_CANCEL_CLICKED),
+  UNSTAKE_TRANSACTION_INITIATED: generateOpt(
+    EVENT_NAME.UNSTAKE_TRANSACTION_INITIATED,
+  ),
 };
 
 /**

From a6469fa19e317246ef60e2a9b1bf003a62531ea8 Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 16:57:33 -0500
Subject: [PATCH 05/10] feat: added gas-cost-impact-triggered,
 gas-cost-impact-cancelled-clicked, and gas-cost-impact-proceeded-clicked
 events

---
 .../Views/StakeInputView/StakeInputView.tsx   | 22 ++++++++
 .../GasImpactModal/GasImpactModal.types.ts    |  2 +
 .../Stake/components/GasImpactModal/index.tsx | 55 ++++++++++++++++---
 .../UI/Stake/hooks/useStakingInput.ts         |  1 +
 app/core/Analytics/MetaMetrics.events.ts      | 12 ++++
 5 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
index 044a9b1ae1f..a23b753a1ac 100644
--- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
+++ b/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 = () => {
diff --git a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts b/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts
index a00204cfbee..7a1d9441615 100644
--- a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts
+++ b/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 {
diff --git a/app/components/UI/Stake/components/GasImpactModal/index.tsx b/app/components/UI/Stake/components/GasImpactModal/index.tsx
index 4e348f75426..dd3577b5918 100644
--- a/app/components/UI/Stake/components/GasImpactModal/index.tsx
+++ b/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: {
diff --git a/app/components/UI/Stake/hooks/useStakingInput.ts b/app/components/UI/Stake/hooks/useStakingInput.ts
index 6167437c07f..6bd19072d34 100644
--- a/app/components/UI/Stake/hooks/useStakingInput.ts
+++ b/app/components/UI/Stake/hooks/useStakingInput.ts
@@ -135,6 +135,7 @@ const useStakingInputHandlers = () => {
     balanceValue,
     getDepositTxGasPercentage,
     isHighGasCostImpact,
+    estimatedGasFeeWei,
   };
 };
 
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index 531b3adde66..8ef48d5e105 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -285,6 +285,9 @@ enum EVENT_NAME {
   STAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Stake Input Currency Switch Clicked',
   STAKE_CANCEL_CLICKED = 'Stake Cancel Clicked',
   STAKE_TRANSACTION_INITIATED = 'Stake Transaction Initiated',
+  STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED = 'Stake Gas Cost Impact Warning Triggered',
+  STAKE_GAS_COST_IMPACT_CANCEL_CLICKED = 'Stake Gas Cost Impact Cancel Clicked',
+  STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED = 'Stake Gas Cost Impact Proceeded Clicked',
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Unstake Input Currency Switch Clicked',
   UNSTAKE_CANCEL_CLICKED = 'Unstake Cancel Clicked',
   UNSTAKE_TRANSACTION_INITIATED = 'Unstake Transaction Initiated',
@@ -921,6 +924,15 @@ const events = {
   STAKE_TRANSACTION_INITIATED: generateOpt(
     EVENT_NAME.STAKE_TRANSACTION_INITIATED,
   ),
+  STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED: generateOpt(
+    EVENT_NAME.STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED,
+  ),
+  STAKE_GAS_COST_IMPACT_CANCEL_CLICKED: generateOpt(
+    EVENT_NAME.STAKE_GAS_COST_IMPACT_CANCEL_CLICKED,
+  ),
+  STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED: generateOpt(
+    EVENT_NAME.STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED,
+  ),
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED: generateOpt(
     EVENT_NAME.UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),

From be6e389a8a4b70609ca44d7d3c36aefddbe1e9c2 Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 17:04:32 -0500
Subject: [PATCH 06/10] feat: added stake-confirmation-back-clicked and
 unstake-confirmation-back-clicked events

---
 .../StakeConfirmationView.tsx                 | 23 +++++++++++++++----
 .../UnstakeConfirmationView.tsx               | 23 +++++++++++++++----
 app/core/Analytics/MetaMetrics.events.ts      |  8 +++++++
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx
index 0eb0e2ba8de..d1e571f50cf 100644
--- a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx
+++ b/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]);
 
diff --git a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx
index 1a78eab35e5..6bbbdc7c979 100644
--- a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx
+++ b/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]);
 
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index 8ef48d5e105..0052ffb479b 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -284,6 +284,7 @@ enum EVENT_NAME {
   STAKE_LEARN_MORE_CLICKED = 'Stake Learn More Clicked',
   STAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Stake Input Currency Switch Clicked',
   STAKE_CANCEL_CLICKED = 'Stake Cancel Clicked',
+  STAKE_CONFIRMATION_BACK_CLICKED = 'Stake Confirmation Back Clicked',
   STAKE_TRANSACTION_INITIATED = 'Stake Transaction Initiated',
   STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED = 'Stake Gas Cost Impact Warning Triggered',
   STAKE_GAS_COST_IMPACT_CANCEL_CLICKED = 'Stake Gas Cost Impact Cancel Clicked',
@@ -291,6 +292,7 @@ enum EVENT_NAME {
   UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED = 'Unstake Input Currency Switch Clicked',
   UNSTAKE_CANCEL_CLICKED = 'Unstake Cancel Clicked',
   UNSTAKE_TRANSACTION_INITIATED = 'Unstake Transaction Initiated',
+  UNSTAKE_CONFIRMATION_BACK_CLICKED = 'Unstake Confirmation Back Clicked',
 
   // Force Upgrade | Automatic Security Checks
   FORCE_UPGRADE_UPDATE_NEEDED_PROMPT_VIEWED = 'Force Upgrade Update Needed Prompt Viewed',
@@ -921,6 +923,9 @@ const events = {
     EVENT_NAME.STAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),
   STAKE_CANCEL_CLICKED: generateOpt(EVENT_NAME.STAKE_CANCEL_CLICKED),
+  STAKE_CONFIRMATION_BACK_CLICKED: generateOpt(
+    EVENT_NAME.STAKE_CONFIRMATION_BACK_CLICKED,
+  ),
   STAKE_TRANSACTION_INITIATED: generateOpt(
     EVENT_NAME.STAKE_TRANSACTION_INITIATED,
   ),
@@ -937,6 +942,9 @@ const events = {
     EVENT_NAME.UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED,
   ),
   UNSTAKE_CANCEL_CLICKED: generateOpt(EVENT_NAME.UNSTAKE_CANCEL_CLICKED),
+  UNSTAKE_CONFIRMATION_BACK_CLICKED: generateOpt(
+    EVENT_NAME.UNSTAKE_CONFIRMATION_BACK_CLICKED,
+  ),
   UNSTAKE_TRANSACTION_INITIATED: generateOpt(
     EVENT_NAME.UNSTAKE_TRANSACTION_INITIATED,
   ),

From bd0f3aea798c9fa3b8f9089fb376e49a1890c1bc Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 17:51:45 -0500
Subject: [PATCH 07/10] feat: added stake and unstake tx lifecycle metrics

---
 .../FooterButtonGroup/FooterButtonGroup.tsx   | 70 +++++++++++++++++--
 app/core/Analytics/MetaMetrics.events.ts      | 38 ++++++++++
 2 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
index 403e92f88ba..8f18975926e 100644
--- a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
+++ b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { View } from 'react-native';
 import { strings } from '../../../../../../../../locales/i18n';
@@ -28,6 +28,31 @@ import {
   MetaMetricsEvents,
   useMetrics,
 } from '../../../../../../hooks/useMetrics';
+import { IMetaMetricsEvent } from '../../../../../../../core/Analytics';
+import { formatEther } from 'ethers/lib/utils';
+
+const STAKING_TX_METRIC_EVENTS: Record<
+  FooterButtonGroupActions,
+  Record<
+    'APPROVED' | 'REJECTED' | 'CONFIRMED' | 'FAILED' | 'SUBMITTED',
+    IMetaMetricsEvent
+  >
+> = {
+  STAKE: {
+    APPROVED: MetaMetricsEvents.STAKE_TRANSACTION_APPROVED,
+    REJECTED: MetaMetricsEvents.STAKE_TRANSACTION_REJECTED,
+    CONFIRMED: MetaMetricsEvents.STAKE_TRANSACTION_CONFIRMED,
+    FAILED: MetaMetricsEvents.STAKE_TRANSACTION_FAILED,
+    SUBMITTED: MetaMetricsEvents.STAKE_TRANSACTION_SUBMITTED,
+  },
+  UNSTAKE: {
+    APPROVED: MetaMetricsEvents.UNSTAKE_TRANSACTION_APPROVED,
+    REJECTED: MetaMetricsEvents.UNSTAKE_TRANSACTION_REJECTED,
+    CONFIRMED: MetaMetricsEvents.UNSTAKE_TRANSACTION_CONFIRMED,
+    FAILED: MetaMetricsEvents.UNSTAKE_TRANSACTION_FAILED,
+    SUBMITTED: MetaMetricsEvents.UNSTAKE_TRANSACTION_SUBMITTED,
+  },
+};
 
 const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   const { styles } = useStyles(styleSheet, {});
@@ -46,13 +71,46 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
 
   const [didSubmitTransaction, setDidSubmitTransaction] = useState(false);
 
+  const isStaking = useMemo(
+    () => action === FooterButtonGroupActions.STAKE,
+    [action],
+  );
+
+  const submitTxMetaMetric = useCallback(
+    (txEventName: IMetaMetricsEvent) => {
+      const location = isStaking
+        ? 'StakeConfirmationView'
+        : 'UnstakeConfirmationView';
+
+      return trackEvent(
+        createEventBuilder(txEventName)
+          .addProperties({
+            selected_provider: 'consensys',
+            location,
+            transaction_amount_eth: formatEther(valueWei),
+          })
+          .build(),
+      );
+    },
+    [createEventBuilder, isStaking, trackEvent, valueWei],
+  );
+
   const listenForTransactionEvents = useCallback(
     (transactionId?: string) => {
       if (!transactionId) return;
 
+      Engine.controllerMessenger.subscribeOnceIf(
+        'TransactionController:transactionApproved',
+        () => {
+          submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].APPROVED);
+        },
+        ({ transactionMeta }) => transactionMeta.id === transactionId,
+      );
+
       Engine.controllerMessenger.subscribeOnceIf(
         'TransactionController:transactionSubmitted',
         () => {
+          submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].SUBMITTED);
           setDidSubmitTransaction(false);
           navigate(Routes.TRANSACTIONS_VIEW);
         },
@@ -62,6 +120,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
       Engine.controllerMessenger.subscribeOnceIf(
         'TransactionController:transactionFailed',
         () => {
+          submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].FAILED);
           setDidSubmitTransaction(false);
         },
         ({ transactionMeta }) => transactionMeta.id === transactionId,
@@ -70,6 +129,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
       Engine.controllerMessenger.subscribeOnceIf(
         'TransactionController:transactionRejected',
         () => {
+          submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].REJECTED);
           setDidSubmitTransaction(false);
         },
         ({ transactionMeta }) => transactionMeta.id === transactionId,
@@ -78,12 +138,13 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
       Engine.controllerMessenger.subscribeOnceIf(
         'TransactionController:transactionConfirmed',
         () => {
+          submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].CONFIRMED);
           refreshPooledStakes();
         },
         (transactionMeta) => transactionMeta.id === transactionId,
       );
     },
-    [navigate, refreshPooledStakes],
+    [action, navigate, refreshPooledStakes, submitTxMetaMetric],
   );
 
   const handleConfirmation = async () => {
@@ -92,8 +153,6 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
 
       setDidSubmitTransaction(true);
 
-      const isStaking = action === FooterButtonGroupActions.STAKE;
-
       const metricsEvent = {
         name: isStaking
           ? MetaMetricsEvents.STAKE_TRANSACTION_INITIATED
@@ -108,6 +167,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
           .addProperties({
             selected_provider: 'consensys',
             location: metricsEvent.location,
+            transaction_amount_eth: formatEther(valueWei),
           })
           .build(),
       );
@@ -137,8 +197,6 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   };
 
   const handleCancelPress = () => {
-    const isStaking = action === FooterButtonGroupActions.STAKE;
-
     const metricsEvent = {
       name: isStaking
         ? MetaMetricsEvents.STAKE_CANCEL_CLICKED
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index 0052ffb479b..87b26a00eed 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -286,6 +286,11 @@ enum EVENT_NAME {
   STAKE_CANCEL_CLICKED = 'Stake Cancel Clicked',
   STAKE_CONFIRMATION_BACK_CLICKED = 'Stake Confirmation Back Clicked',
   STAKE_TRANSACTION_INITIATED = 'Stake Transaction Initiated',
+  STAKE_TRANSACTION_APPROVED = 'Stake Transaction Approved',
+  STAKE_TRANSACTION_REJECTED = 'Stake Transaction Rejected',
+  STAKE_TRANSACTION_FAILED = 'Stake Transaction Failed',
+  STAKE_TRANSACTION_SUBMITTED = 'Stake Transaction Submitted',
+  STAKE_TRANSACTION_CONFIRMED = 'Stake Transaction Confirmed',
   STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED = 'Stake Gas Cost Impact Warning Triggered',
   STAKE_GAS_COST_IMPACT_CANCEL_CLICKED = 'Stake Gas Cost Impact Cancel Clicked',
   STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED = 'Stake Gas Cost Impact Proceeded Clicked',
@@ -293,6 +298,11 @@ enum EVENT_NAME {
   UNSTAKE_CANCEL_CLICKED = 'Unstake Cancel Clicked',
   UNSTAKE_TRANSACTION_INITIATED = 'Unstake Transaction Initiated',
   UNSTAKE_CONFIRMATION_BACK_CLICKED = 'Unstake Confirmation Back Clicked',
+  UNSTAKE_TRANSACTION_APPROVED = 'Unstake Transaction Approved',
+  UNSTAKE_TRANSACTION_REJECTED = 'Unstake Transaction Rejected',
+  UNSTAKE_TRANSACTION_FAILED = 'Unstake Transaction Failed',
+  UNSTAKE_TRANSACTION_CONFIRMED = 'Unstake Transaction Confirmed',
+  UNSTAKE_TRANSACTION_SUBMITTED = 'Unstake Transaction Submitted',
 
   // Force Upgrade | Automatic Security Checks
   FORCE_UPGRADE_UPDATE_NEEDED_PROMPT_VIEWED = 'Force Upgrade Update Needed Prompt Viewed',
@@ -929,6 +939,19 @@ const events = {
   STAKE_TRANSACTION_INITIATED: generateOpt(
     EVENT_NAME.STAKE_TRANSACTION_INITIATED,
   ),
+  STAKE_TRANSACTION_APPROVED: generateOpt(
+    EVENT_NAME.STAKE_TRANSACTION_APPROVED,
+  ),
+  STAKE_TRANSACTION_REJECTED: generateOpt(
+    EVENT_NAME.STAKE_TRANSACTION_REJECTED,
+  ),
+  STAKE_TRANSACTION_FAILED: generateOpt(EVENT_NAME.STAKE_TRANSACTION_FAILED),
+  STAKE_TRANSACTION_CONFIRMED: generateOpt(
+    EVENT_NAME.STAKE_TRANSACTION_CONFIRMED,
+  ),
+  STAKE_TRANSACTION_SUBMITTED: generateOpt(
+    EVENT_NAME.STAKE_TRANSACTION_SUBMITTED,
+  ),
   STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED: generateOpt(
     EVENT_NAME.STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED,
   ),
@@ -948,6 +971,21 @@ const events = {
   UNSTAKE_TRANSACTION_INITIATED: generateOpt(
     EVENT_NAME.UNSTAKE_TRANSACTION_INITIATED,
   ),
+  UNSTAKE_TRANSACTION_APPROVED: generateOpt(
+    EVENT_NAME.UNSTAKE_TRANSACTION_APPROVED,
+  ),
+  UNSTAKE_TRANSACTION_REJECTED: generateOpt(
+    EVENT_NAME.UNSTAKE_TRANSACTION_REJECTED,
+  ),
+  UNSTAKE_TRANSACTION_FAILED: generateOpt(
+    EVENT_NAME.UNSTAKE_TRANSACTION_FAILED,
+  ),
+  UNSTAKE_TRANSACTION_CONFIRMED: generateOpt(
+    EVENT_NAME.UNSTAKE_TRANSACTION_CONFIRMED,
+  ),
+  UNSTAKE_TRANSACTION_SUBMITTED: generateOpt(
+    EVENT_NAME.UNSTAKE_TRANSACTION_SUBMITTED,
+  ),
 };
 
 /**

From c4d2c492720e42c4b0aaadac7526f5756b67f62a Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Wed, 11 Dec 2024 17:55:22 -0500
Subject: [PATCH 08/10] feat: updated tests

---
 .../UI/Stake/Views/StakeInputView/StakeInputView.test.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx
index 650343c3958..559c068e427 100644
--- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx
+++ b/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%',
         },
       });
     });

From 8a9d08e0b61ec6a0099b5dc35bd7bb6a54e23b65 Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Thu, 12 Dec 2024 11:21:04 -0500
Subject: [PATCH 09/10] fix: fixed missing route params for gas impact modal
 test

---
 .../UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx b/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx
index 7018981373c..f6eca2e2f22 100644
--- a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx
+++ b/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',
   },

From 60f1ec1271ee1ff9f58d0ccf42e3c68e0e1fdfd8 Mon Sep 17 00:00:00 2001
From: Matthew Grainger <matthew.grainger@consensys.net>
Date: Thu, 12 Dec 2024 12:09:23 -0500
Subject: [PATCH 10/10] feat: added visited-eth-overview-with-staked-positions
 event

---
 .../StakingBalance/StakingBalance.tsx         | 33 ++++++++++++++++++-
 app/core/Analytics/MetaMetrics.events.ts      |  4 +++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
index 1d41646bc3c..5814ada1fde 100644
--- a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
+++ b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Badge, {
   BadgeVariant,
 } from '../../../../../component-library/components/Badges/Badge';
@@ -44,6 +44,7 @@ import useBalance from '../../hooks/useBalance';
 import { NetworkBadgeSource } from '../../../AssetOverview/Balance/Balance';
 import { selectChainId } from '../../../../../selectors/networkController';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 
 export interface StakingBalanceProps {
   asset: TokenI;
@@ -51,6 +52,12 @@ export interface StakingBalanceProps {
 
 const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
   const { styles } = useStyles(styleSheet, {});
+
+  const [
+    hasSentViewingStakingRewardsMetric,
+    setHasSentViewingStakingRewardsMetric,
+  ] = useState(false);
+
   const chainId = useSelector(selectChainId);
   const networkName = useSelector(selectNetworkName);
 
@@ -58,6 +65,8 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
 
   const { isStakingSupportedChain } = useStakingChain();
 
+  const { trackEvent, createEventBuilder } = useMetrics();
+
   const {
     pooledStakesData,
     exchangeRate,
@@ -92,6 +101,28 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
 
   const hasClaimableEth = !!Number(claimableEth);
 
+  useEffect(() => {
+    if (hasStakedPositions && !hasSentViewingStakingRewardsMetric) {
+      trackEvent(
+        createEventBuilder(
+          MetaMetricsEvents.VISITED_ETH_OVERVIEW_WITH_STAKED_POSITIONS,
+        )
+          .addProperties({
+            selected_provider: 'consensys',
+            location: 'StakingBalance',
+          })
+          .build(),
+      );
+
+      setHasSentViewingStakingRewardsMetric(true);
+    }
+  }, [
+    createEventBuilder,
+    hasSentViewingStakingRewardsMetric,
+    hasStakedPositions,
+    trackEvent,
+  ]);
+
   if (!isStakingSupportedChain) {
     return <></>;
   }
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
index 87b26a00eed..8610a0c4d9b 100644
--- a/app/core/Analytics/MetaMetrics.events.ts
+++ b/app/core/Analytics/MetaMetrics.events.ts
@@ -303,6 +303,7 @@ enum EVENT_NAME {
   UNSTAKE_TRANSACTION_FAILED = 'Unstake Transaction Failed',
   UNSTAKE_TRANSACTION_CONFIRMED = 'Unstake Transaction Confirmed',
   UNSTAKE_TRANSACTION_SUBMITTED = 'Unstake Transaction Submitted',
+  VISITED_ETH_OVERVIEW_WITH_STAKED_POSITIONS = 'Visited ETH Overview with Staked Positions',
 
   // Force Upgrade | Automatic Security Checks
   FORCE_UPGRADE_UPDATE_NEEDED_PROMPT_VIEWED = 'Force Upgrade Update Needed Prompt Viewed',
@@ -986,6 +987,9 @@ const events = {
   UNSTAKE_TRANSACTION_SUBMITTED: generateOpt(
     EVENT_NAME.UNSTAKE_TRANSACTION_SUBMITTED,
   ),
+  VISITED_ETH_OVERVIEW_WITH_STAKED_POSITIONS: generateOpt(
+    EVENT_NAME.VISITED_ETH_OVERVIEW_WITH_STAKED_POSITIONS,
+  ),
 };
 
 /**