feat: add staking events (#12144)

## **Description** Adds support for events: * Review Stake Button Clicked * Unstake Button Clicked * Input Amount Clicked * Withdraw Button Clicked * Claim button clicked * Learn More Clicked ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/jira/software/projects/STAKE/boards/550?selectedIssue=STAKE-837 ## **Manual testing steps** Manual testing not possible right now due to [events bug](#12117) ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Nov 5, 2024 · dd574d7 · dd574d7
1 parent 7fb3bda
commit dd574d7
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 6 deletions.
diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
@@ -18,11 +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';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
+  const { trackEvent, createEventBuilder } = useMetrics();
 
   const {
     isEth,
@@ -51,6 +53,15 @@ const StakeInputView = () => {
     navigation.navigate('StakeModals', {
       screen: Routes.STAKING.MODALS.LEARN_MORE,
     });
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED)
+      .addProperties({
+        selected_provider: 'consensys',
+        text: 'Tooltip Question Mark Trigger',
+        location: 'Stake Input View'
+      })
+      .build()
+    );
   };
 
   const handleStakePress = useCallback(() => {
@@ -64,13 +75,25 @@ 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(),
+    );
   }, [
+    amountEth,
     navigation,
     amountWei,
     fiatAmount,
     annualRewardsETH,
     annualRewardsFiat,
     annualRewardRate,
+    trackEvent,
+    createEventBuilder
   ]);
 
   const handleMaxButtonPress = () => {

diff --git a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx
@@ -17,12 +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 useUnstakingInputHandlers from '../../hooks/useUnstakingInput';
 
 const UnstakeInputView = () => {
   const title = strings('stake.unstake_eth');
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
+  const { trackEvent, createEventBuilder } = useMetrics();
 
   const {
     isEth,
@@ -64,7 +66,16 @@ const UnstakeInputView = () => {
         amountFiat: fiatAmount,
       },
     });
-  }, [amountWei, fiatAmount, navigation]);
+    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]);
 
   return (
     <ScreenLayout style={styles.container}>

diff --git a/app/components/UI/Stake/components/LearnMoreModal/index.tsx b/app/components/UI/Stake/components/LearnMoreModal/index.tsx
@@ -17,6 +17,7 @@ import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../../../locales/i18n';
 import { POOLED_STAKING_FAQ_URL } from '../../constants';
 import createLearnMoreModalStyles from './LearnMoreModal.styles';
+import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 
 const styles = createLearnMoreModalStyles();
 
@@ -41,6 +42,7 @@ const LearnMoreModal = () => {
   const sheetRef = useRef<BottomSheetRef>(null);
 
   const navigation = useNavigation();
+  const { trackEvent, createEventBuilder } = useMetrics();
 
   const handleClose = () => {
     sheetRef.current?.onCloseBottomSheet();
@@ -91,6 +93,15 @@ const LearnMoreModal = () => {
                   url: POOLED_STAKING_FAQ_URL,
                 },
               });
+              trackEvent(
+                createEventBuilder(MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED)
+                .addProperties({
+                  selected_provider: 'consensys',
+                  text: 'Learn More',
+                  location: 'Learn More Modal'
+                })
+                .build()
+              );
             }} // Take to the faq page
             label={strings('stake.learn_more')}
             variant={ButtonVariants.Secondary}

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx
@@ -19,6 +19,7 @@ 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';
 
 type StakeBannerProps = Pick<BannerProps, 'style'> & {
   claimableAmount: string;
@@ -27,6 +28,7 @@ type StakeBannerProps = Pick<BannerProps, 'style'> & {
 const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => {
   const { styles } = useStyles(styleSheet, {});
 
+  const { trackEvent, createEventBuilder } = useMetrics();
   const [isSubmittingClaimTransaction, setIsSubmittingClaimTransaction] =
     useState(false);
 
@@ -40,6 +42,14 @@ 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(

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx b/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx
@@ -8,6 +8,9 @@ import { useStyles } from '../../../../../../component-library/hooks';
 import styleSheet from './StakingButtons.styles';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
+import { useMetrics, MetaMetricsEvents } from '../../../../../hooks/useMetrics';
+import { useSelector } from 'react-redux';
+import { selectChainId } from '../../../../../../selectors/networkController';
 
 interface StakingButtonsProps extends Pick<ViewProps, 'style'> {
   hasStakedPositions: boolean;
@@ -21,14 +24,38 @@ const StakingButtons = ({
 }: StakingButtonsProps) => {
   const { navigate } = useNavigation();
   const { styles } = useStyles(styleSheet, {});
+  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 = () =>
+  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()
+    );
+  };
 
   return (
     <View style={[styles.balanceButtonsContainer, style]}>

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx b/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx
@@ -12,20 +12,32 @@ 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';
 
 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 = () =>
+  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 (
     <View style={style}>

diff --git a/app/components/UI/Stake/hooks/useInputHandler.ts b/app/components/UI/Stake/hooks/useInputHandler.ts
@@ -13,6 +13,7 @@ import {
   fromWei,
 } from '../../../../util/number';
 import { strings } from '../../../../../locales/i18n';
+import { useMetrics, MetaMetricsEvents } from '../../../hooks/useMetrics';
 
 interface InputHandlerParams {
   balance: BN;
@@ -27,6 +28,8 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
   const currentCurrency = useSelector(selectCurrentCurrency);
   const conversionRate = useSelector(selectConversionRate) || 1;
 
+  const { trackEvent, createEventBuilder } = useMetrics();
+
   const isNonZeroAmount = useMemo(() => amountWei.gt(new BN(0)), [amountWei]);
 
   const isOverMaximum = useMemo(
@@ -107,8 +110,18 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
         2,
       ).toString();
       setFiatAmount(newFiatAmount);
+      trackEvent(
+        createEventBuilder(MetaMetricsEvents.STAKE_INPUT_AMOUNT_CLICKED)
+        .addProperties({
+          location: 'Stake',
+          amount: value,
+          is_max: value === 1,
+          mode: isEth ? 'native' : 'fiat'
+        })
+        .build()
+      );
     },
-    [balance, conversionRate],
+    [balance, conversionRate, createEventBuilder, isEth, trackEvent],
   );
 
   const handleMaxInput = useCallback(
@@ -129,8 +142,18 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
         2,
       ).toString();
       setFiatAmount(fiatValue);
+      trackEvent(
+        createEventBuilder(MetaMetricsEvents.STAKE_INPUT_AMOUNT_CLICKED)
+        .addProperties({
+          location: 'Stake',
+          amount: ethValue,
+          is_max: true,
+          mode: isEth ? 'native' : 'fiat'
+        })
+        .build()
+      );
     },
-    [conversionRate],
+    [conversionRate, createEventBuilder, isEth, trackEvent],
   );
 
   const currencyToggleValue = isEth

diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
@@ -275,6 +275,12 @@ enum EVENT_NAME {
 
   // Stake
   STAKE_BUTTON_CLICKED = 'Stake Button Clicked',
+  REVIEW_STAKE_BUTTON_CLICKED = 'Review Stake Button Clicked',
+  REVIEW_UNSTAKE_BUTTON_CLICKED = 'Review Unstake Button Clicked',
+  STAKE_INPUT_AMOUNT_CLICKED = 'Stake Input Amount Clicked',
+  STAKE_WITHDRAW_BUTTON_CLICKED = 'Stake Withdraw Button Clicked',
+  STAKE_CLAIM_BUTTON_CLICKED = 'Stake Claim Button Clicked',
+  STAKE_LEARN_MORE_CLICKED = 'Stake Learn More Clicked',
 
   // Force Upgrade | Automatic Security Checks
   FORCE_UPGRADE_UPDATE_NEEDED_PROMPT_VIEWED = 'Force Upgrade Update Needed Prompt Viewed',
@@ -876,6 +882,14 @@ const events = {
   // Connection
   CONNECTION_DROPPED: generateOpt(EVENT_NAME.CONNECTION_DROPPED),
   CONNECTION_RESTORED: generateOpt(EVENT_NAME.CONNECTION_RESTORED),
+
+  // Stake
+  REVIEW_STAKE_BUTTON_CLICKED: generateOpt(EVENT_NAME.REVIEW_STAKE_BUTTON_CLICKED),
+  REVIEW_UNSTAKE_BUTTON_CLICKED: generateOpt(EVENT_NAME.REVIEW_UNSTAKE_BUTTON_CLICKED),
+  STAKE_INPUT_AMOUNT_CLICKED: generateOpt(EVENT_NAME.STAKE_INPUT_AMOUNT_CLICKED),
+  STAKE_WITHDRAW_BUTTON_CLICKED: generateOpt(EVENT_NAME.STAKE_WITHDRAW_BUTTON_CLICKED),
+  STAKE_CLAIM_BUTTON_CLICKED: generateOpt(EVENT_NAME.STAKE_CLAIM_BUTTON_CLICKED),
+  STAKE_LEARN_MORE_CLICKED: generateOpt(EVENT_NAME.STAKE_LEARN_MORE_CLICKED)
 };
 
 /**