feat: updated staking events to use withMetaMetrics helper

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

@@ -18,14 +18,13 @@ import Routes from '../../../../../constants/navigation/Routes';
 import styleSheet from './StakeInputView.styles';
 import useStakingInputHandlers from '../../hooks/useStakingInput';
 import InputDisplay from '../../components/InputDisplay';
-import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
 import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
 
   const {
     isEth,
@@ -38,7 +37,7 @@ const StakeInputView = () => {
     handleCurrencySwitch,
     currencyToggleValue,
     percentageOptions,
-    handleAmountPress,
+    handleQuickAmountPress,
     handleKeypadChange,
     calculateEstimatedAnnualRewards,
     estimatedAnnualRewards,
@@ -83,15 +82,6 @@ const StakeInputView = () => {
         annualRewardRate,
       },
     });
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.REVIEW_STAKE_BUTTON_CLICKED)
-        .addProperties({
-          selected_provider: 'consensys',
-          tokens_to_stake_native_value: amountEth,
-          tokens_to_stake_usd_value: fiatAmount,
-        })
-        .build(),
-    );
   }, [
     isHighGasCostImpact,
     navigation,
@@ -100,9 +90,6 @@ const StakeInputView = () => {
     annualRewardsETH,
     annualRewardsFiat,
     annualRewardRate,
-    trackEvent,
-    createEventBuilder,
-    amountEth,
   ]);
 
   const handleMaxButtonPress = () => {
@@ -174,8 +161,26 @@ const StakeInputView = () => {
       </View>
       <QuickAmounts
         amounts={percentageOptions}
-        onAmountPress={handleAmountPress}
-        onMaxPress={handleMaxButtonPress}
+        onAmountPress={({ value }: { value: number }) =>
+          withMetaMetrics(handleQuickAmountPress, {
+            event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
+            properties: {
+              location: 'StakeInputView',
+              amount: value,
+              // onMaxPress is called instead when it's defined and the max is clicked.
+              is_max: false,
+              mode: isEth ? 'native' : 'fiat',
+            },
+          })({ value })
+        }
+        onMaxPress={withMetaMetrics(handleMaxButtonPress, {
+          event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
+          properties: {
+            location: 'StakeInputView',
+            is_max: true,
+            mode: isEth ? 'native' : 'fiat',
+          },
+        })}
       />
       <Keypad
         value={isEth ? amountEth : fiatAmount}
@@ -194,7 +199,13 @@ const StakeInputView = () => {
             isOverMaximum || !isNonZeroAmount || isLoadingStakingGasFee
           }
           width={ButtonWidthTypes.Full}
-          onPress={handleStakePress}
+          onPress={withMetaMetrics(handleStakePress, {
+            event: MetaMetricsEvents.REVIEW_STAKE_BUTTON_CLICKED,
+            properties: {
+              tokens_to_stake_native_value: amountEth,
+              tokens_to_stake_usd_value: fiatAmount,
+            },
+          })}
         />
       </View>
     </ScreenLayout>

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

@@ -17,15 +17,14 @@ import { View } from 'react-native';
 import styleSheet from './UnstakeInputView.styles';
 import InputDisplay from '../../components/InputDisplay';
 import Routes from '../../../../../constants/navigation/Routes';
-import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
 import useUnstakingInputHandlers from '../../hooks/useUnstakingInput';
 import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
 
 const UnstakeInputView = () => {
   const title = strings('stake.unstake_eth');
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
 
   const {
     isEth,
@@ -38,7 +37,7 @@ const UnstakeInputView = () => {
     handleCurrencySwitch,
     currencyToggleValue,
     percentageOptions,
-    handleAmountPress,
+    handleQuickAmountPress,
     handleKeypadChange,
     stakedBalanceValue,
   } = useUnstakingInputHandlers();
@@ -67,23 +66,7 @@ const UnstakeInputView = () => {
         amountFiat: fiatAmount,
       },
     });
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.REVIEW_UNSTAKE_BUTTON_CLICKED)
-        .addProperties({
-          selected_provider: 'consensys',
-          tokens_to_stake_native_value: amountEth,
-          tokens_to_stake_usd_value: fiatAmount,
-        })
-        .build(),
-    );
-  }, [
-    amountEth,
-    amountWei,
-    createEventBuilder,
-    fiatAmount,
-    navigation,
-    trackEvent,
-  ]);
+  }, [amountWei, fiatAmount, navigation]);
 
   return (
     <ScreenLayout style={styles.container}>
@@ -111,7 +94,17 @@ const UnstakeInputView = () => {
       <UnstakeInputViewBanner style={styles.unstakeBanner} />
       <QuickAmounts
         amounts={percentageOptions}
-        onAmountPress={handleAmountPress}
+        onAmountPress={({ value }: { value: number }) =>
+          withMetaMetrics(handleQuickAmountPress, {
+            event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
+            properties: {
+              location: 'UnstakeInputView',
+              amount: value,
+              is_max: value === 1,
+              mode: isEth ? 'native' : 'fiat',
+            },
+          })({ value })
+        }
       />
       <Keypad
         value={isEth ? amountEth : fiatAmount}
@@ -128,7 +121,14 @@ const UnstakeInputView = () => {
           variant={ButtonVariants.Primary}
           isDisabled={isOverMaximum || !isNonZeroAmount}
           width={ButtonWidthTypes.Full}
-          onPress={handleUnstakePress}
+          onPress={withMetaMetrics(handleUnstakePress, {
+            event: MetaMetricsEvents.REVIEW_UNSTAKE_BUTTON_CLICKED,
+            properties: {
+              selected_provider: 'consensys',
+              tokens_to_stake_native_value: amountEth,
+              tokens_to_stake_usd_value: fiatAmount,
+            },
+          })}
         />
       </View>
     </ScreenLayout>

app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx

@@ -19,7 +19,8 @@ import { useSelector } from 'react-redux';
 import { selectSelectedInternalAccount } from '../../../../../../../selectors/accountsController';
 import usePooledStakes from '../../../../hooks/usePooledStakes';
 import Engine from '../../../../../../../core/Engine';
-import { MetaMetricsEvents, useMetrics } from '../../../../../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../../../../hooks/useMetrics';
+import { withMetaMetrics } from '../../../../utils/metaMetrics/withMetaMetrics';
 
 type StakeBannerProps = Pick<BannerProps, 'style'> & {
   claimableAmount: string;
@@ -28,7 +29,6 @@ type StakeBannerProps = Pick<BannerProps, 'style'> & {
 const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => {
   const { styles } = useStyles(styleSheet, {});
 
-  const { trackEvent, createEventBuilder } = useMetrics();
   const [isSubmittingClaimTransaction, setIsSubmittingClaimTransaction] =
     useState(false);
 
@@ -42,14 +42,6 @@ const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => {
     try {
       if (!activeAccount?.address) return;
 
-      trackEvent(
-        createEventBuilder(MetaMetricsEvents.STAKE_CLAIM_BUTTON_CLICKED)
-        .addProperties({
-          location: 'Token Details'
-        })
-        .build()
-      );
-
       setIsSubmittingClaimTransaction(true);
 
       const txRes = await attemptPoolStakedClaimTransaction(
@@ -112,7 +104,12 @@ const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => {
                 {strings('stake.claim')} ETH
               </Text>
             }
-            onPress={onClaimPress}
+            onPress={withMetaMetrics(onClaimPress, {
+              event: MetaMetricsEvents.STAKE_CLAIM_BUTTON_CLICKED,
+              properties: {
+                location: 'Token Details',
+              },
+            })}
             disabled={isSubmittingClaimTransaction}
             loading={isSubmittingClaimTransaction}
           />

app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx

@@ -11,6 +11,7 @@ import Routes from '../../../../../../constants/navigation/Routes';
 import { useMetrics, MetaMetricsEvents } from '../../../../../hooks/useMetrics';
 import { useSelector } from 'react-redux';
 import { selectChainId } from '../../../../../../selectors/networkController';
+import { withMetaMetrics } from '../../../utils/metaMetrics/withMetaMetrics';
 
 interface StakingButtonsProps extends Pick<ViewProps, 'style'> {
   hasStakedPositions: boolean;
@@ -27,33 +28,22 @@ const StakingButtons = ({
   const { trackEvent, createEventBuilder } = useMetrics();
   const chainId = useSelector(selectChainId);
 
-  const onUnstakePress = () => {
+  const onUnstakePress = () =>
     navigate('StakeScreens', {
       screen: Routes.STAKING.UNSTAKE,
     });
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.STAKE_WITHDRAW_BUTTON_CLICKED)
-      .addProperties({
-        location: 'Token Details',
-        text: 'Unstake',
-        token_symbol: 'ETH',
-        chain_id: chainId,
-      })
-      .build()
-    );
-  };
 
   const onStakePress = () => {
     navigate('StakeScreens', { screen: Routes.STAKING.STAKE });
     trackEvent(
       createEventBuilder(MetaMetricsEvents.STAKE_BUTTON_CLICKED)
-      .addProperties({
-        location: 'Token Details',
-        text: 'Stake',
-        token_symbol: 'ETH',
-        chain_id: chainId,
-      })
-      .build()
+        .addProperties({
+          location: 'Token Details',
+          text: 'Stake',
+          token_symbol: 'ETH',
+          chain_id: chainId,
+        })
+        .build(),
     );
   };
 
@@ -64,7 +54,15 @@ const StakingButtons = ({
           style={styles.balanceActionButton}
           variant={ButtonVariants.Secondary}
           label={strings('stake.unstake')}
-          onPress={onUnstakePress}
+          onPress={withMetaMetrics(onUnstakePress, {
+            event: MetaMetricsEvents.STAKE_WITHDRAW_BUTTON_CLICKED,
+            properties: {
+              location: 'Token Details',
+              text: 'Unstake',
+              token_symbol: 'ETH',
+              chain_id: chainId,
+            },
+          })}
         />
       )}
       <Button

app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx

@@ -12,31 +12,22 @@ import Button, {
 import { strings } from '../../../../../../../locales/i18n';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
-import { useMetrics, MetaMetricsEvents } from '../../../../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../../../hooks/useMetrics';
+import { withMetaMetrics } from '../../../utils/metaMetrics/withMetaMetrics';
 
 interface StakingCtaProps extends Pick<ViewProps, 'style'> {
   estimatedRewardRate: string;
 }
 
 const StakingCta = ({ estimatedRewardRate, style }: StakingCtaProps) => {
   const { styles } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
 
   const { navigate } = useNavigation();
 
   const navigateToLearnMoreModal = () => {
     navigate('StakeModals', {
       screen: Routes.STAKING.MODALS.LEARN_MORE,
     });
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED)
-        .addProperties({
-          selected_provider: 'consensys',
-          text: 'Learn More',
-          location: 'Token Details',
-        })
-        .build(),
-    );
   };
 
   return (
@@ -55,7 +46,14 @@ const StakingCta = ({ estimatedRewardRate, style }: StakingCtaProps) => {
         <Button
           label={strings('stake.stake_your_eth_cta.learn_more_with_period')}
           variant={ButtonVariants.Link}
-          onPress={navigateToLearnMoreModal}
+          onPress={withMetaMetrics(navigateToLearnMoreModal, {
+            event: MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED,
+            properties: {
+              selected_provider: 'consensys',
+              text: 'Learn More',
+              location: 'Token Details',
+            },
+          })}
         />
       </View>
     </View>