feat: added pooled staking tooltips analytics events

MetaMask · Nov 14, 2024 · e291152 · e291152
1 parent 90731a3
commit e291152
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 51 deletions.
diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
@@ -19,7 +19,7 @@ import styleSheet from './StakeInputView.styles';
 import useStakingInputHandlers from '../../hooks/useStakingInput';
 import InputDisplay from '../../components/InputDisplay';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
-import { withMetaMetrics } from '../../utils/withMetaMetrics';
+import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
@@ -54,15 +54,6 @@ 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(() => {
@@ -78,12 +69,12 @@ const StakeInputView = () => {
     });
     trackEvent(
       createEventBuilder(MetaMetricsEvents.REVIEW_STAKE_BUTTON_CLICKED)
-      .addProperties({
-        selected_provider: 'consensys',
-        tokens_to_stake_native_value: amountEth,
-        tokens_to_stake_usd_value: fiatAmount,
-      })
-      .build(),
+        .addProperties({
+          selected_provider: 'consensys',
+          tokens_to_stake_native_value: amountEth,
+          tokens_to_stake_usd_value: fiatAmount,
+        })
+        .build(),
     );
   }, [
     amountEth,
@@ -94,7 +85,7 @@ const StakeInputView = () => {
     annualRewardsFiat,
     annualRewardRate,
     trackEvent,
-    createEventBuilder
+    createEventBuilder,
   ]);
 
   const handleMaxButtonPress = () => {
@@ -152,7 +143,15 @@ const StakeInputView = () => {
       <View style={styles.rewardsRateContainer}>
         <EstimatedAnnualRewardsCard
           estimatedAnnualRewards={estimatedAnnualRewards}
-          onIconPress={navigateToLearnMoreModal}
+          onIconPress={withMetaMetrics(navigateToLearnMoreModal, {
+            event: MetaMetricsEvents.TOOLTIP_OPENED,
+            properties: {
+              selected_provider: 'consensys',
+              text: 'Tooltip Opened',
+              location: 'Stake Input View',
+              tooltip_name: 'MetaMask Pool Estimated Rewards',
+            },
+          })}
           isLoading={isLoadingVaultData}
         />
       </View>

diff --git a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap
@@ -567,7 +567,7 @@ exports[`StakeInputView render matches snapshot 1`] = `
                                   onPress={[Function]}
                                 >
                                   <SvgMock
-                                    color="#6a737d"
+                                    color="#9fa6ae"
                                     height={16}
                                     name="Question"
                                     style={

diff --git a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx
@@ -19,7 +19,7 @@ import InputDisplay from '../../components/InputDisplay';
 import Routes from '../../../../../constants/navigation/Routes';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import useUnstakingInputHandlers from '../../hooks/useUnstakingInput';
-import { withMetaMetrics } from '../../utils/withMetaMetrics';
+import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
 
 const UnstakeInputView = () => {
   const title = strings('stake.unstake_eth');
@@ -69,14 +69,21 @@ const UnstakeInputView = () => {
     });
     trackEvent(
       createEventBuilder(MetaMetricsEvents.REVIEW_UNSTAKE_BUTTON_CLICKED)
-      .addProperties({
-        selected_provider: 'consensys',
-        tokens_to_stake_native_value: amountEth,
-        tokens_to_stake_usd_value: fiatAmount,
-      })
-      .build(),
+        .addProperties({
+          selected_provider: 'consensys',
+          tokens_to_stake_native_value: amountEth,
+          tokens_to_stake_usd_value: fiatAmount,
+        })
+        .build(),
     );
-  }, [amountEth, amountWei, createEventBuilder, fiatAmount, navigation, trackEvent]);
+  }, [
+    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,7 +17,8 @@ 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';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
 
 const styles = createLearnMoreModalStyles();
 
@@ -42,12 +43,21 @@ const LearnMoreModal = () => {
   const sheetRef = useRef<BottomSheetRef>(null);
 
   const navigation = useNavigation();
-  const { trackEvent, createEventBuilder } = useMetrics();
 
   const handleClose = () => {
     sheetRef.current?.onCloseBottomSheet();
   };
 
+  const handleLearnMoreBrowserRedirect = () => {
+    // Take to the faq page
+    navigation.navigate('Webview', {
+      screen: 'SimpleWebview',
+      params: {
+        url: POOLED_STAKING_FAQ_URL,
+      },
+    });
+  };
+
   return (
     <BottomSheet ref={sheetRef}>
       <View style={styles.container}>
@@ -86,23 +96,14 @@ const LearnMoreModal = () => {
       <View style={styles.buttonContainer}>
         <View style={styles.button}>
           <Button
-            onPress={() => {
-              navigation.navigate('Webview', {
-                screen: 'SimpleWebview',
-                params: {
-                  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
+            onPress={withMetaMetrics(handleLearnMoreBrowserRedirect, {
+              event: MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED,
+              properties: {
+                selected_provider: 'consensys',
+                text: 'Learn More',
+                location: 'Learn More Modal',
+              },
+            })}
             label={strings('stake.learn_more')}
             variant={ButtonVariants.Secondary}
             width={ButtonWidthTypes.Full}

diff --git a/app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.tsx b/app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.tsx
@@ -12,6 +12,8 @@ import { useStyles } from '../../../../../hooks/useStyles';
 import Card from '../../../../../../component-library/components/Cards/Card';
 import styleSheet from './RewardsCard.styles';
 import { RewardsCardProps } from './RewardsCard.types';
+import { createTooltipOpenedEvent } from '../../../utils/metaMetrics/tooltipMetaMetricsUtils';
+import { useMetrics } from '../../../../../hooks/useMetrics';
 
 const RewardsCard = ({
   rewardRate,
@@ -20,6 +22,8 @@ const RewardsCard = ({
 }: RewardsCardProps) => {
   const { styles } = useStyles(styleSheet, {});
 
+  const { trackEvent } = useMetrics();
+
   return (
     <Card style={styles.card} disabled>
       <KeyValueRow
@@ -29,6 +33,10 @@ const RewardsCard = ({
             title: strings('tooltip_modal.reward_rate.title'),
             content: strings('tooltip_modal.reward_rate.tooltip'),
             size: TooltipSizes.Sm,
+            onPress: () =>
+              trackEvent(
+                createTooltipOpenedEvent('Rewards Card', 'Reward Rate'),
+              ),
           },
         }}
         value={{
@@ -57,6 +65,10 @@ const RewardsCard = ({
             title: strings('tooltip_modal.reward_frequency.title'),
             content: strings('tooltip_modal.reward_frequency.tooltip'),
             size: TooltipSizes.Sm,
+            onPress: () =>
+              trackEvent(
+                createTooltipOpenedEvent('Rewards Card', 'Reward Frequency'),
+              ),
           },
         }}
         value={{

diff --git a/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.tsx b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.tsx
@@ -7,10 +7,14 @@ import { useStyles } from '../../../../../hooks/useStyles';
 import styleSheet from './UnstakeTimeCard.styles';
 import { TextVariant } from '../../../../../../component-library/components/Texts/Text';
 import { strings } from '../../../../../../../locales/i18n';
+import { useMetrics } from '../../../../../hooks/useMetrics';
+import { createTooltipOpenedEvent } from '../../../utils/metaMetrics/tooltipMetaMetricsUtils';
 
 const UnstakingTimeCard = () => {
   const { styles } = useStyles(styleSheet, {});
 
+  const { trackEvent } = useMetrics();
+
   return (
     <Card style={styles.card} disabled>
       <KeyValueRow
@@ -20,6 +24,13 @@ const UnstakingTimeCard = () => {
             title: strings('tooltip_modal.unstaking_time.title'),
             content: strings('tooltip_modal.unstaking_time.tooltip'),
             size: TooltipSizes.Sm,
+            onPress: () =>
+              trackEvent(
+                createTooltipOpenedEvent(
+                  'Unstaking Time Card',
+                  'Unstaking Time',
+                ),
+              ),
           },
         }}
         value={{

diff --git a/app/components/UI/Stake/components/StakingEarnings/index.tsx b/app/components/UI/Stake/components/StakingEarnings/index.tsx
@@ -21,6 +21,9 @@ import { StakeSDKProvider } from '../../sdk/stakeSdkProvider';
 import useStakingEarnings from '../../hooks/useStakingEarnings';
 import usePooledStakes from '../../hooks/usePooledStakes';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import { getTooltipMetricProperties } from '../../utils/metaMetrics/tooltipMetaMetricsUtils';
 
 const StakingEarningsContent = () => {
   const { styles } = useStyles(styleSheet, {});
@@ -38,7 +41,7 @@ const StakingEarningsContent = () => {
     isLoadingEarningsData,
   } = useStakingEarnings();
 
-  const onNavigateToTooltipModal = () =>
+  const onDisplayAnnualRateTooltip = () =>
     openTooltipModal(
       strings('stake.annual_rate'),
       strings('tooltip_modal.reward_rate.tooltip'),
@@ -76,7 +79,13 @@ const StakingEarningsContent = () => {
               accessibilityLabel={strings(
                 'stake.accessibility_labels.stake_annual_rate_tooltip',
               )}
-              onPress={onNavigateToTooltipModal}
+              onPress={withMetaMetrics(onDisplayAnnualRateTooltip, {
+                event: MetaMetricsEvents.TOOLTIP_OPENED,
+                properties: getTooltipMetricProperties(
+                  'Staking Earnings',
+                  'Annual Rate',
+                ),
+              })}
             />
           </View>
           {isLoadingEarningsData ? (

diff --git a/app/components/UI/Stake/utils/metaMetrics/tooltipMetaMetricsUtils.ts b/app/components/UI/Stake/utils/metaMetrics/tooltipMetaMetricsUtils.ts
@@ -0,0 +1,23 @@
+import { MetricsEventBuilder } from '../../../../../core/Analytics/MetricsEventBuilder';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+
+export const getTooltipMetricProperties = (
+  location: string,
+  tooltipName: string,
+) => ({
+  selected_provider: 'consensys',
+  text: 'Tooltip Opened',
+  location,
+  tooltip_name: tooltipName,
+});
+
+export const createTooltipOpenedEvent = (
+  location: string,
+  tooltipName: string,
+) => {
+  const createEventBuilder = MetricsEventBuilder.createEventBuilder;
+
+  return createEventBuilder(MetaMetricsEvents.TOOLTIP_OPENED)
+    .addProperties(getTooltipMetricProperties(location, tooltipName))
+    .build();
+};
diff --git a/...ponents/UI/Stake/utils/withMetaMetrics.ts → ...take/utils/metaMetrics/withMetaMetrics.ts b/...ponents/UI/Stake/utils/withMetaMetrics.ts → ...take/utils/metaMetrics/withMetaMetrics.ts
@@ -1,9 +1,9 @@
 import {
   IMetaMetricsEvent,
   JsonMap,
-} from '../../../../core/Analytics/MetaMetrics.types';
-import { MetricsEventBuilder } from '../../../../core/Analytics/MetricsEventBuilder';
-import { MetaMetrics } from '../../../../core/Analytics';
+} from '../../../../../core/Analytics/MetaMetrics.types';
+import { MetricsEventBuilder } from '../../../../../core/Analytics/MetricsEventBuilder';
+import { MetaMetrics } from '../../../../../core/Analytics';
 
 interface WithMetaMetricsEvent {
   event: IMetaMetricsEvent;

diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
@@ -391,6 +391,9 @@ enum EVENT_NAME {
   // Connection
   CONNECTION_DROPPED = 'Connection dropped',
   CONNECTION_RESTORED = 'Connection restored',
+
+  // Tooltip
+  TOOLTIP_OPENED = 'Tooltip Opened',
 }
 
 enum ACTIONS {
@@ -556,6 +559,7 @@ const events = {
   BROWSER_RELOAD: generateOpt(EVENT_NAME.BROWSER_RELOAD),
   BROWSER_ADD_FAVORITES: generateOpt(EVENT_NAME.BROWSER_ADD_FAVORITES),
   DAPP_VIEWED: generateOpt(EVENT_NAME.DAPP_VIEWED),
+  TOOLTIP_OPENED: generateOpt(EVENT_NAME.TOOLTIP_OPENED),
   // Security & Privacy Settings
   VIEW_SECURITY_SETTINGS: generateOpt(EVENT_NAME.VIEW_SECURITY_SETTINGS),
   BASIC_FUNCTIONALITY_ENABLED: generateOpt(