feat: migration of AnimatedQrScanner, QRsigningDetails and onboarding…

… flow (#8653) AnimatedQrScanner, QRSigningDetails, onboarding flow, components under UI folder, with new Segment metrics.
MetaMask · Feb 23, 2024 · 8f01e5f · 8f01e5f
1 parent 374cd97
commit 8f01e5f
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 81 deletions.
diff --git a/app/components/UI/OnboardingWizard/Step1/index.js b/app/components/UI/OnboardingWizard/Step1/index.js
@@ -1,13 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
-  View,
-  Text,
-  StyleSheet,
-  InteractionManager,
-  Platform,
-} from 'react-native';
+import { View, Text, StyleSheet, Platform } from 'react-native';
 import Coachmark from '../Coachmark';
 import Device from '../../../../util/device';
 import setOnboardingWizardStep from '../../../../actions/wizard';
@@ -17,11 +11,11 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 
 import { ThemeContext, mockTheme } from '../../../../util/theme';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_STEP_1_CONTAINER_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { withMetricsAwareness } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
   main: {
@@ -49,6 +43,10 @@ class Step1 extends PureComponent {
      * Dispatch set onboarding wizard step
      */
     setOnboardingWizardStep: PropTypes.func,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   /**
@@ -57,11 +55,10 @@ class Step1 extends PureComponent {
   onNext = () => {
     const { setOnboardingWizardStep } = this.props;
     setOnboardingWizardStep && setOnboardingWizardStep(2);
-    InteractionManager.runAfterInteractions(() => {
-      AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STARTED, {
-        tutorial_step_count: 1,
-        tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[1],
-      });
+
+    this.props.metrics.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STARTED, {
+      tutorial_step_count: 1,
+      tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[1],
     });
   };
 
@@ -118,4 +115,4 @@ const mapDispatchToProps = (dispatch) => ({
 
 Step1.contextType = ThemeContext;
 
-export default connect(null, mapDispatchToProps)(Step1);
+export default connect(null, mapDispatchToProps)(withMetricsAwareness(Step1));
diff --git a/app/components/UI/OnboardingWizard/Step2/index.js b/app/components/UI/OnboardingWizard/Step2/index.js
@@ -10,10 +10,10 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import { mockTheme, ThemeContext } from '../../../../util/theme';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_SECOND_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { withMetricsAwareness } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
   main: {
@@ -41,6 +41,10 @@ class Step2 extends PureComponent {
      * Callback called when closing step
      */
     onClose: PropTypes.func,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   state = {
@@ -70,10 +74,13 @@ class Step2 extends PureComponent {
   onNext = () => {
     const { setOnboardingWizardStep } = this.props;
     setOnboardingWizardStep && setOnboardingWizardStep(3);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
-      tutorial_step_count: 2,
-      tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[2],
-    });
+    this.props.metrics.trackEvent(
+      MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED,
+      {
+        tutorial_step_count: 2,
+        tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[2],
+      },
+    );
   };
 
   /**
@@ -82,10 +89,13 @@ class Step2 extends PureComponent {
   onBack = () => {
     const { setOnboardingWizardStep } = this.props;
     setOnboardingWizardStep && setOnboardingWizardStep(1);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
-      tutorial_step_count: 2,
-      tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[2],
-    });
+    this.props.metrics.trackEvent(
+      MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED,
+      {
+        tutorial_step_count: 2,
+        tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[2],
+      },
+    );
   };
 
   getOnboardingStyles = () => {
@@ -154,4 +164,4 @@ const mapDispatchToProps = (dispatch) => ({
 
 Step2.contextType = ThemeContext;
 
-export default connect(null, mapDispatchToProps)(Step2);
+export default connect(null, mapDispatchToProps)(withMetricsAwareness(Step2));
diff --git a/app/components/UI/OnboardingWizard/Step3/index.js b/app/components/UI/OnboardingWizard/Step3/index.js
@@ -10,7 +10,6 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_THIRD_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
@@ -20,6 +19,7 @@ import {
   selectIdentities,
   selectSelectedAddress,
 } from '../../../../selectors/preferencesController';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
   main: {
@@ -32,6 +32,8 @@ const styles = StyleSheet.create({
 
 const Step3 = ({ setOnboardingWizardStep, coachmarkRef, onClose }) => {
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
+
   const [coachmarkTop, setCoachmarkTop] = useState(0);
   const [coachmarkLeft, setCoachmarkLeft] = useState(0);
   const [coachmarkRight, setCoachmarkRight] = useState(0);
@@ -65,15 +67,15 @@ const Step3 = ({ setOnboardingWizardStep, coachmarkRef, onClose }) => {
 
   const onNext = () => {
     setOnboardingWizardStep && setOnboardingWizardStep(4);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
       tutorial_step_count: 3,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[3],
     });
   };
 
   const onBack = () => {
     setOnboardingWizardStep && setOnboardingWizardStep(2);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
       tutorial_step_count: 3,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[3],
     });

diff --git a/app/components/UI/OnboardingWizard/Step4/index.js b/app/components/UI/OnboardingWizard/Step4/index.js
@@ -10,10 +10,10 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_FOURTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
   main: {
@@ -29,6 +29,7 @@ const styles = StyleSheet.create({
 
 const Step4 = (props) => {
   const { setOnboardingWizardStep, onClose } = props;
+  const { trackEvent } = useMetrics();
   const { colors } = useTheme();
   const dynamicOnboardingStyles = onboardingStyles(colors);
   const [coachmarkBottom, setCoachmarkBottom] = useState();
@@ -50,7 +51,7 @@ const Step4 = (props) => {
    */
   const onNext = () => {
     setOnboardingWizardStep && setOnboardingWizardStep(5);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
       tutorial_step_count: 4,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[4],
     });
@@ -61,7 +62,7 @@ const Step4 = (props) => {
    */
   const onBack = () => {
     setOnboardingWizardStep && setOnboardingWizardStep(3);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
       tutorial_step_count: 4,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[4],
     });

diff --git a/app/components/UI/OnboardingWizard/Step5/index.js b/app/components/UI/OnboardingWizard/Step5/index.js
@@ -11,11 +11,11 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
 import { createBrowserNavDetails } from '../../../Views/Browser';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_FIFTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const WIDTH = Dimensions.get('window').width;
 const styles = StyleSheet.create({
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 
 const Step5 = (props) => {
   const { navigation, setOnboardingWizardStep, onClose } = props;
-
+  const { trackEvent } = useMetrics();
   const { colors } = useTheme();
   const dynamicOnboardingStyles = onboardingStyles(colors);
   const [coachmarkBottom, setCoachmarkBottom] = useState();
@@ -47,7 +47,7 @@ const Step5 = (props) => {
   const onNext = () => {
     setOnboardingWizardStep && setOnboardingWizardStep(6);
     navigation && navigation.navigate(...createBrowserNavDetails());
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_COMPLETED, {
       tutorial_step_count: 5,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[5],
     });
@@ -61,7 +61,7 @@ const Step5 = (props) => {
     setTimeout(() => {
       setOnboardingWizardStep && setOnboardingWizardStep(4);
     }, 1);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
       tutorial_step_count: 5,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[5],
     });

diff --git a/app/components/UI/OnboardingWizard/Step6/index.js b/app/components/UI/OnboardingWizard/Step6/index.js
@@ -11,11 +11,11 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
 import Routes from '../../../../constants/navigation/Routes';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_SIXTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
   main: {
@@ -32,6 +32,8 @@ const styles = StyleSheet.create({
 
 const Step6 = (props) => {
   const { setOnboardingWizardStep, onClose, navigation } = props;
+  const { trackEvent } = useMetrics();
+
   const [ready, setReady] = useState(false);
   const [coachmarkTop, setCoachmarkTop] = useState(0);
   const { colors } = useTheme();
@@ -59,7 +61,7 @@ const Step6 = (props) => {
   const onBack = () => {
     navigation?.navigate?.(Routes.WALLET.HOME);
     setOnboardingWizardStep && setOnboardingWizardStep(5);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_STEP_REVISITED, {
       tutorial_step_count: 6,
       tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[6],
     });

diff --git a/app/components/UI/OnboardingWizard/index.js b/app/components/UI/OnboardingWizard/index.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, InteractionManager } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { colors as importedColors } from '../../../styles/common';
 import { connect } from 'react-redux';
 import Step1 from './Step1';
@@ -17,12 +17,12 @@ import {
   MetaMetricsEvents,
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../core/Analytics';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { DrawerContext } from '../../../components/Nav/Main/MainNavigator';
 import { useTheme } from '../../../util/theme';
 import Device from '../../../util/device';
 import AsyncStorageWrapper from '../../../store/async-storage-wrapper';
 import { isTest } from '../../../util/test/utils';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = ({ colors, typography }) =>
   StyleSheet.create({
@@ -77,6 +77,7 @@ const OnboardingWizard = (props) => {
   } = props;
   const { drawerRef } = useContext(DrawerContext);
   const theme = useTheme();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(theme);
 
   /**
@@ -86,13 +87,11 @@ const OnboardingWizard = (props) => {
     await DefaultPreference.set(ONBOARDING_WIZARD, EXPLORED);
     setOnboardingWizardStep && setOnboardingWizardStep(0);
     drawerRef?.current?.dismissDrawer?.();
-    InteractionManager.runAfterInteractions(() => {
-      AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_SKIPPED, {
-        tutorial_step_count: step,
-        tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[step],
-      });
-      AnalyticsV2.trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_COMPLETED);
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_SKIPPED, {
+      tutorial_step_count: step,
+      tutorial_step_name: ONBOARDING_WIZARD_STEP_DESCRIPTION[step],
     });
+    trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_COMPLETED);
   };
 
   // Since react-native-default-preference is not covered by the fixtures,