feat: Views folder migration events from W to R beginning letters (#8672

)

This apply migration of events to Segment from W to R beginning leters
of components name under Views folder

app/components/Views/RestoreWallet/RestoreWallet.tsx

@@ -19,9 +19,10 @@ import { useAppThemeFromContext } from '../../../util/theme';
 import { createWalletResetNeededNavDetails } from './WalletResetNeeded';
 import { createWalletRestoredNavDetails } from './WalletRestored';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import { trackEventV2 as trackEvent } from '../../../util/analyticsV2';
+
 import generateDeviceAnalyticsMetaData from '../../../util/metrics';
 import { StackNavigationProp } from '@react-navigation/stack';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 /* eslint-disable import/no-commonjs, @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
 const onboardingDeviceImage = require('../../../images/swaps_onboard_device.png');
@@ -43,6 +44,7 @@ export const createRestoreWalletNavDetailsNested =
   );
 
 const RestoreWallet = () => {
+  const { trackEvent } = useMetrics();
   const { colors } = useAppThemeFromContext();
   const styles = createStyles(colors);
 
@@ -58,10 +60,11 @@ const RestoreWallet = () => {
       MetaMetricsEvents.VAULT_CORRUPTION_RESTORE_WALLET_SCREEN_VIEWED,
       { ...deviceMetaData, previousScreen },
     );
-  }, [deviceMetaData, previousScreen]);
+  }, [deviceMetaData, previousScreen, trackEvent]);
 
   const handleOnNext = useCallback(async (): Promise<void> => {
     setLoading(true);
+
     trackEvent(
       MetaMetricsEvents.VAULT_CORRUPTION_RESTORE_WALLET_BUTTON_PRESSED,
       deviceMetaData,
@@ -74,7 +77,7 @@ const RestoreWallet = () => {
       replace(...createWalletResetNeededNavDetails());
       setLoading(false);
     }
-  }, [deviceMetaData, replace]);
+  }, [deviceMetaData, replace, trackEvent]);
 
   return (
     <SafeAreaView style={styles.screen}>

app/components/Views/RestoreWallet/WalletResetNeeded.tsx

@@ -18,15 +18,16 @@ import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { createRestoreWalletNavDetails } from './RestoreWallet';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import { trackEventV2 as trackEvent } from '../../../util/analyticsV2';
 import generateDeviceAnalyticsMetaData from '../../../util/metrics';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 export const createWalletResetNeededNavDetails = createNavigationDetails(
   Routes.VAULT_RECOVERY.WALLET_RESET_NEEDED,
 );
 
 const WalletResetNeeded = () => {
   const { colors } = useAppThemeFromContext();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
 
   const navigation = useNavigation<StackNavigationProp<any>>();
@@ -38,7 +39,7 @@ const WalletResetNeeded = () => {
       MetaMetricsEvents.VAULT_CORRUPTION_WALLET_RESET_NEEDED_SCREEN_VIEWED,
       deviceMetaData,
     );
-  }, [deviceMetaData]);
+  }, [trackEvent, deviceMetaData]);
 
   const handleCreateNewWallet = useCallback(async () => {
     trackEvent(
@@ -48,7 +49,7 @@ const WalletResetNeeded = () => {
     navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
       screen: Routes.MODAL.DELETE_WALLET,
     });
-  }, [deviceMetaData, navigation]);
+  }, [deviceMetaData, navigation, trackEvent]);
 
   const handleTryAgain = useCallback(async () => {
     trackEvent(
@@ -60,7 +61,7 @@ const WalletResetNeeded = () => {
         previousScreen: Routes.VAULT_RECOVERY.WALLET_RESET_NEEDED,
       }),
     );
-  }, [deviceMetaData, navigation]);
+  }, [deviceMetaData, navigation, trackEvent]);
 
   return (
     <SafeAreaView style={styles.screen}>

app/components/Views/RestoreWallet/WalletRestored.tsx

@@ -22,11 +22,11 @@ import { useNavigation } from '@react-navigation/native';
 import { Authentication } from '../../../core';
 import { useAppThemeFromContext } from '../../../util/theme';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import { trackEventV2 as trackEvent } from '../../../util/analyticsV2';
 import generateDeviceAnalyticsMetaData from '../../../util/metrics';
 import { SRP_GUIDE_URL } from '../../../constants/urls';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 export const createWalletRestoredNavDetails = createNavigationDetails(
   Routes.VAULT_RECOVERY.WALLET_RESTORED,
@@ -35,6 +35,7 @@ export const createWalletRestoredNavDetails = createNavigationDetails(
 const WalletRestored = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const { colors } = useAppThemeFromContext();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
   const navigation = useNavigation<StackNavigationProp<any>>();
   const selectedAddress = useSelector(selectSelectedAddress);
@@ -46,7 +47,7 @@ const WalletRestored = () => {
       MetaMetricsEvents.VAULT_CORRUPTION_WALLET_SUCCESSFULLY_RESTORED_SCREEN_VIEWED,
       deviceMetaData,
     );
-  }, [deviceMetaData]);
+  }, [deviceMetaData, trackEvent]);
 
   const finishWalletRestore = useCallback(async (): Promise<void> => {
     try {
@@ -74,7 +75,7 @@ const WalletRestored = () => {
       deviceMetaData,
     );
     await finishWalletRestore();
-  }, [deviceMetaData, finishWalletRestore]);
+  }, [deviceMetaData, finishWalletRestore, trackEvent]);
 
   return (
     <SafeAreaView style={styles.screen}>

app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx

@@ -39,7 +39,6 @@ import { useTheme } from '../../../util/theme';
 import Engine from '../../../core/Engine';
 import { BIOMETRY_CHOICE } from '../../../constants/storage';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { uint8ArrayToMnemonic } from '../../../util/mnemonic';
 import { passwordRequirementsMet } from '../../../util/password';
 import { Authentication } from '../../../core/';
@@ -54,6 +53,7 @@ import generateTestId from '../../../../wdio/utils/generateTestId';
 import { RevealSeedViewSelectorsIDs } from '../../../../e2e/selectors/Settings/SecurityAndPrivacy/RevealSeedView.selectors';
 
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const PRIVATE_KEY = 'private_key';
 
@@ -89,6 +89,7 @@ const RevealPrivateCredential = ({
   const dispatch = useDispatch();
 
   const theme = useTheme();
+  const { trackEvent } = useMetrics();
   const { colors, themeAppearance } = theme;
   const styles = createStyles(theme);
 
@@ -153,7 +154,7 @@ const RevealPrivateCredential = ({
     updateNavBar();
     // Track SRP Reveal screen rendered
     if (!isPrivateKey) {
-      AnalyticsV2.trackEvent(MetaMetricsEvents.REVEAL_SRP_SCREEN, {});
+      trackEvent(MetaMetricsEvents.REVEAL_SRP_SCREEN);
     }
 
     const unlockWithBiometrics = async () => {
@@ -186,15 +187,14 @@ const RevealPrivateCredential = ({
 
   const cancelReveal = () => {
     if (!unlocked)
-      AnalyticsV2.trackEvent(
+      trackEvent(
         isPrivateKey
           ? MetaMetricsEvents.REVEAL_PRIVATE_KEY_CANCELLED
           : MetaMetricsEvents.REVEAL_SRP_CANCELLED,
         { view: 'Enter password' },
       );
 
-    if (!isPrivateKey)
-      AnalyticsV2.trackEvent(MetaMetricsEvents.CANCEL_REVEAL_SRP_CTA, {});
+    if (!isPrivateKey) trackEvent(MetaMetricsEvents.CANCEL_REVEAL_SRP_CTA);
     if (cancel) return cancel();
     navigateBack();
   };
@@ -212,7 +212,7 @@ const RevealPrivateCredential = ({
     if (!isPrivateKey) {
       const currentDate = new Date();
       dispatch(recordSRPRevealTimestamp(currentDate.toString()));
-      AnalyticsV2.trackEvent(MetaMetricsEvents.NEXT_REVEAL_SRP_CTA, {});
+      trackEvent(MetaMetricsEvents.NEXT_REVEAL_SRP_CTA);
     }
     setIsModalVisible(true);
     setWarningIncorrectPassword('');
@@ -223,22 +223,21 @@ const RevealPrivateCredential = ({
   };
 
   const done = () => {
-    if (!isPrivateKey)
-      AnalyticsV2.trackEvent(MetaMetricsEvents.SRP_DONE_CTA, {});
+    if (!isPrivateKey) trackEvent(MetaMetricsEvents.SRP_DONE_CTA);
     navigateBack();
   };
 
   const copyPrivateCredentialToClipboard = async (
     privCredentialName: string,
   ) => {
-    AnalyticsV2.trackEvent(
+    trackEvent(
       privCredentialName === PRIVATE_KEY
         ? MetaMetricsEvents.REVEAL_PRIVATE_KEY_COMPLETED
         : MetaMetricsEvents.REVEAL_SRP_COMPLETED,
       { action: 'copied to clipboard' },
     );
 
-    if (!isPrivateKey) AnalyticsV2.trackEvent(MetaMetricsEvents.COPY_SRP, {});
+    if (!isPrivateKey) trackEvent(MetaMetricsEvents.COPY_SRP);
 
     await ClipboardManager.setStringExpire(clipboardPrivateCredential);
 
@@ -283,24 +282,23 @@ const RevealPrivateCredential = ({
 
   const onTabBarChange = (event: { i: number }) => {
     if (event.i === 0) {
-      AnalyticsV2.trackEvent(
+      trackEvent(
         isPrivateKey
           ? MetaMetricsEvents.REVEAL_PRIVATE_KEY_COMPLETED
           : MetaMetricsEvents.REVEAL_SRP_COMPLETED,
         { action: 'viewed SRP' },
       );
 
-      if (!isPrivateKey) AnalyticsV2.trackEvent(MetaMetricsEvents.VIEW_SRP, {});
+      if (!isPrivateKey) trackEvent(MetaMetricsEvents.VIEW_SRP);
     } else if (event.i === 1) {
-      AnalyticsV2.trackEvent(
+      trackEvent(
         isPrivateKey
           ? MetaMetricsEvents.REVEAL_PRIVATE_KEY_COMPLETED
           : MetaMetricsEvents.REVEAL_SRP_COMPLETED,
         { action: 'viewed QR code' },
       );
 
-      if (!isPrivateKey)
-        AnalyticsV2.trackEvent(MetaMetricsEvents.VIEW_SRP_QR, {});
+      if (!isPrivateKey) trackEvent(MetaMetricsEvents.VIEW_SRP_QR);
     }
   };
 
@@ -395,17 +393,14 @@ const RevealPrivateCredential = ({
   );
 
   const closeModal = () => {
-    AnalyticsV2.trackEvent(
+    trackEvent(
       isPrivateKey
         ? MetaMetricsEvents.REVEAL_PRIVATE_KEY_CANCELLED
         : MetaMetricsEvents.REVEAL_SRP_CANCELLED,
       { view: 'Hold to reveal' },
     );
 
-    AnalyticsV2.trackEvent(
-      MetaMetricsEvents.SRP_DISMISS_HOLD_TO_REVEAL_DIALOG,
-      {},
-    );
+    trackEvent(MetaMetricsEvents.SRP_DISMISS_HOLD_TO_REVEAL_DIALOG);
 
     setIsModalVisible(false);
   };

app/components/Views/Settings/AdvancedSettings/index.js

@@ -36,7 +36,7 @@ import {
   selectUseTokenDetection,
 } from '../../../../selectors/preferencesController';
 import Routes from '../../../../constants/navigation/Routes';
-import { trackEventV2 as trackEvent } from '../../../../util/analyticsV2';
+
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { AdvancedViewSelectorsIDs } from '../../../../../e2e/selectors/Settings/AdvancedView.selectors';
 import Text, {
@@ -52,6 +52,7 @@ import Banner, {
   BannerAlertSeverity,
   BannerVariant,
 } from '../../../../component-library/components/Banners/Banner';
+import { withMetricsAwareness } from '../../../../components/hooks/useMetrics';
 import { wipeTransactions } from '../../../../util/transaction-controller';
 
 const createStyles = (colors) =>
@@ -186,6 +187,10 @@ class AdvancedSettings extends PureComponent {
      * Object that represents the current route info like params passed to it
      */
     route: PropTypes.object,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   scrollView = React.createRef();
@@ -291,7 +296,9 @@ class AdvancedSettings extends PureComponent {
       // Disable eth_sign directly without friction
       const { PreferencesController } = Engine.context;
       PreferencesController.setDisabledRpcMethodPreference('eth_sign', false);
-      trackEvent(MetaMetricsEvents.SETTINGS_ADVANCED_ETH_SIGN_DISABLED, {});
+      this.props.metrics.trackEvent(
+        MetaMetricsEvents.SETTINGS_ADVANCED_ETH_SIGN_DISABLED,
+      );
     }
   };
 
@@ -552,4 +559,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setShowCustomNonce(showCustomNonce)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withMetricsAwareness(AdvancedSettings));

app/components/Views/Settings/SecuritySettings/BlockaidIndicator/BlockaidIndicator.tsx

@@ -20,7 +20,6 @@ import Icon, {
   IconName,
   IconColor,
 } from '../../../../../component-library/components/Icons/Icon';
-import AnalyticsV2 from '../../../../../util/analyticsV2';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import Engine from '../../../../../core/Engine';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -33,6 +32,7 @@ import { selectIsSecurityAlertsEnabled } from '../../../../../selectors/preferen
 
 // Internal dependencies
 import createStyles from './BlockaidIndicator.styles';
+import { useMetrics } from '../../../../../components/hooks/useMetrics';
 
 enum Status {
   Idle = 'IDLE',
@@ -41,6 +41,7 @@ enum Status {
 
 const BlockaidIndicator = ({ navigation }: Props) => {
   const dispatch = useDispatch();
+  const { trackEvent } = useMetrics();
   const { PreferencesController } = Engine.context;
   const styles = createStyles();
 
@@ -62,12 +63,9 @@ const BlockaidIndicator = ({ navigation }: Props) => {
         setFailureCount(failureCount + 1);
       }
       if (ppomInitialisationStatus === PPOMInitialisationStatus.SUCCESS) {
-        AnalyticsV2.trackEvent(
-          MetaMetricsEvents.SETTINGS_SECURITY_ALERTS_ENABLED,
-          {
-            security_alerts_enabled: true,
-          },
-        );
+        trackEvent(MetaMetricsEvents.SETTINGS_SECURITY_ALERTS_ENABLED, {
+          security_alerts_enabled: true,
+        });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

app/components/Views/Settings/index.tsx

@@ -1,16 +1,10 @@
 import React, { useCallback, useEffect } from 'react';
-import {
-  StyleSheet,
-  ScrollView,
-  InteractionManager,
-  Alert,
-} from 'react-native';
+import { StyleSheet, ScrollView, Alert } from 'react-native';
 import { useNavigation, CommonActions } from '@react-navigation/native';
 import SettingsDrawer from '../../UI/SettingsDrawer';
 import { getSettingsNavigationOptions } from '../../UI/Navbar';
 import { strings } from '../../../../locales/i18n';
-import Analytics from '../../../core/Analytics/Analytics';
-import { IMetaMetricsEvent, MetaMetricsEvents } from '../../../core/Analytics';
+import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useSelector } from 'react-redux';
 import { useTheme } from '../../../util/theme';
 import Routes from '../../../constants/navigation/Routes';
@@ -21,6 +15,7 @@ import { SettingsViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Set
 import { createSnapsSettingsListNavDetails } from '../Snaps/SnapsSettingsList/SnapsSettingsList';
 ///: END:ONLY_INCLUDE_IF
 import { TextColor } from '../../../component-library/components/Texts/Text';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
@@ -33,6 +28,7 @@ const createStyles = (colors: Colors) =>
 
 const Settings = () => {
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
   const navigation = useNavigation<any>();
 
@@ -51,12 +47,6 @@ const Settings = () => {
     updateNavBar();
   }, [updateNavBar]);
 
-  const trackEvent = (event: IMetaMetricsEvent) => {
-    InteractionManager.runAfterInteractions(() => {
-      Analytics.trackEvent(event);
-    });
-  };
-
   const onPressGeneral = () => {
     trackEvent(MetaMetricsEvents.SETTINGS_GENERAL);
     navigation.navigate('GeneralSettings');