feat: T-C views components events migration (#8692)

View component migration from T-C initial letters

Implemented trackOnboarding from segments drafts!

app/components/Views/ConnectHardware/SelectHardware/index.tsx

@@ -18,13 +18,13 @@ import Routes from '../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { getLedgerKeyring } from '../../../../core/Ledger/Ledger';
 import { fontStyles } from '../../../../styles/common';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import {
   mockTheme,
   useAppThemeFromContext,
   useAssetFromTheme,
 } from '../../../../util/theme';
 import { getNavigationOptionsTitle } from '../../../UI/Navbar';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const createStyle = (colors: any) =>
   StyleSheet.create({
@@ -85,6 +85,7 @@ const qrHardwareLogoDark = require(qrHardwareLogoDarkImgPath);
 
 const SelectHardwareWallet = () => {
   const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
   const { colors } = useAppThemeFromContext() || mockTheme;
   const styles = createStyle(colors);
 
@@ -107,7 +108,7 @@ const SelectHardwareWallet = () => {
     const ledgerKeyring = await getLedgerKeyring();
     const accounts = await ledgerKeyring.getAccounts();
 
-    AnalyticsV2.trackEvent(MetaMetricsEvents.CONNECT_LEDGER, {
+    trackEvent(MetaMetricsEvents.CONNECT_LEDGER, {
       device_type: 'Ledger',
     });
 

app/components/Views/ConnectQRHardware/index.tsx

@@ -16,7 +16,6 @@ import { strings } from '../../../../locales/i18n';
 import { UR } from '@ngraveio/bc-ur';
 import Alert, { AlertType } from '../../Base/Alert';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import AnalyticsV2 from '../../../util/analyticsV2';
 
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import Device from '../../../util/device';
@@ -26,6 +25,7 @@ import { fontStyles } from '../../../styles/common';
 import Logger from '../../../util/Logger';
 import { removeAccountsFromPermissions } from '../../../core/Permissions';
 import { safeToChecksumAddress } from '../../../util/address';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 interface IConnectQRHardwareProps {
   navigation: any;
@@ -74,6 +74,7 @@ const createStyles = (colors: any) =>
 
 const ConnectQRHardware = ({ navigation }: IConnectQRHardwareProps) => {
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
 
   const KeyringController = useMemo(() => {
@@ -138,31 +139,28 @@ const ConnectQRHardware = ({ navigation }: IConnectQRHardwareProps) => {
   }, [QRState.sync, hideScanner, showScanner]);
 
   const onConnectHardware = useCallback(async () => {
-    AnalyticsV2.trackEvent(MetaMetricsEvents.CONTINUE_QR_HARDWARE_WALLET, {
+    trackEvent(MetaMetricsEvents.CONTINUE_QR_HARDWARE_WALLET, {
       device_type: 'QR Hardware',
     });
     resetError();
     const _accounts = await KeyringController.connectQRHardware(0);
     setAccounts(_accounts);
-  }, [KeyringController, resetError]);
+  }, [KeyringController, resetError, trackEvent]);
 
   const onScanSuccess = useCallback(
     (ur: UR) => {
       hideScanner();
-      AnalyticsV2.trackEvent(
-        MetaMetricsEvents.CONNECT_HARDWARE_WALLET_SUCCESS,
-        {
-          device_type: 'QR Hardware',
-        },
-      );
+      trackEvent(MetaMetricsEvents.CONNECT_HARDWARE_WALLET_SUCCESS, {
+        device_type: 'QR Hardware',
+      });
       if (ur.type === SUPPORTED_UR_TYPE.CRYPTO_HDKEY) {
         KeyringController.submitQRCryptoHDKey(ur.cbor.toString('hex'));
       } else {
         KeyringController.submitQRCryptoAccount(ur.cbor.toString('hex'));
       }
       resetError();
     },
-    [KeyringController, hideScanner, resetError],
+    [KeyringController, hideScanner, resetError, trackEvent],
   );
 
   const onScanError = useCallback(

app/components/Views/DetectedTokens/index.tsx

@@ -16,7 +16,6 @@ import NotificationManager from '../../../core/NotificationManager';
 import { strings } from '../../../../locales/i18n';
 import Logger from '../../../util/Logger';
 import { useTheme } from '../../../util/theme';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { getDecimalChainId } from '../../../util/networks';
 import { createNavigationDetails } from '../../../util/navigation/navUtils';
 import Routes from '../../../constants/navigation/Routes';
@@ -25,6 +24,7 @@ import { selectChainId } from '../../../selectors/networkController';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors: any) =>
   StyleSheet.create({
@@ -68,6 +68,7 @@ interface IgnoredTokensByAddress {
 
 const DetectedTokens = () => {
   const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
   const sheetRef = useRef<BottomSheetRef>(null);
   const detectedTokens = useSelector(selectDetectedTokens);
   const chainId = useSelector(selectChainId);
@@ -125,7 +126,7 @@ const DetectedTokens = () => {
             await TokensController.addTokens(tokensToImport);
             InteractionManager.runAfterInteractions(() =>
               tokensToImport.forEach(({ address, symbol }) =>
-                AnalyticsV2.trackEvent(MetaMetricsEvents.TOKEN_ADDED, {
+                trackEvent(MetaMetricsEvents.TOKEN_ADDED, {
                   token_address: address,
                   token_symbol: symbol,
                   chain_id: getDecimalChainId(chainId),
@@ -145,23 +146,22 @@ const DetectedTokens = () => {
         }
       });
     },
-    [chainId, detectedTokens, ignoredTokens],
+    [chainId, detectedTokens, ignoredTokens, trackEvent],
   );
 
   const triggerIgnoreAllTokens = () => {
     navigation.navigate('DetectedTokensConfirmation', {
       onConfirm: () => dismissModalAndTriggerAction(true),
       isHidingAll: true,
     });
-    InteractionManager.runAfterInteractions(() =>
-      AnalyticsV2.trackEvent(MetaMetricsEvents.TOKENS_HIDDEN, {
-        location: 'token_detection',
-        token_standard: 'ERC20',
-        asset_type: 'token',
-        tokens: detectedTokensForAnalytics,
-        chain_id: getDecimalChainId(chainId),
-      }),
-    );
+
+    trackEvent(MetaMetricsEvents.TOKENS_HIDDEN, {
+      location: 'token_detection',
+      token_standard: 'ERC20',
+      asset_type: 'token',
+      tokens: detectedTokensForAnalytics,
+      chain_id: getDecimalChainId(chainId),
+    });
   };
 
   const triggerImportTokens = async () => {
@@ -251,7 +251,7 @@ const DetectedTokens = () => {
     if (hasPendingAction) {
       return;
     }
-    AnalyticsV2.trackEvent(MetaMetricsEvents.TOKEN_IMPORT_CANCELED, {
+    trackEvent(MetaMetricsEvents.TOKEN_IMPORT_CANCELED, {
       source: 'detected',
       tokens: detectedTokensForAnalytics,
       chain_id: getDecimalChainId(chainId),

app/components/Views/EditAccountName/EditAccountName.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
-import { InteractionManager, Platform, SafeAreaView } from 'react-native';
+import { Platform, SafeAreaView } from 'react-native';
 
 // External dependencies
 import Text from '../../../component-library/components/Texts/Text/Text';
@@ -22,7 +22,6 @@ import { useStyles } from '../../../component-library/hooks';
 import { getEditAccountNameNavBarOptions } from '../../../components/UI/Navbar';
 import Engine from '../../../core/Engine';
 import generateTestId from '../../../../wdio/utils/generateTestId';
-import Analytics from '../../../core/Analytics/Analytics';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { selectChainId } from '../../../selectors/networkController';
 import {
@@ -38,9 +37,11 @@ import { useTheme } from '../../../util/theme';
 // Internal dependencies
 import styleSheet from './EditAccountName.styles';
 import { getDecimalChainId } from '../../../util/networks';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const EditAccountName = () => {
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
   const { styles } = useStyles(styleSheet, {});
   const { setOptions, goBack, navigate } = useNavigation();
   const [accountName, setAccountName] = useState<string>();
@@ -81,26 +82,22 @@ const EditAccountName = () => {
     setAccountName(name);
   };
 
-  const saveAccountName = () => {
+  const saveAccountName = async () => {
     const { PreferencesController } = Engine.context;
     PreferencesController.setAccountLabel(selectedAddress, accountName);
     navigate('WalletView');
 
-    InteractionManager.runAfterInteractions(() => {
-      try {
-        const analyticsProperties = async () => {
-          const accountType = getAddressAccountType(selectedAddress);
-          const account_type = accountType === 'QR' ? 'hardware' : accountType;
-          return { account_type, chain_id: getDecimalChainId(chainId) };
-        };
-        Analytics.trackEventWithParameters(
-          MetaMetricsEvents.ACCOUNT_RENAMED,
-          analyticsProperties(),
-        );
-      } catch {
-        return {};
-      }
-    });
+    try {
+      const analyticsProperties = async () => {
+        const accountType = getAddressAccountType(selectedAddress);
+        const account_type = accountType === 'QR' ? 'hardware' : accountType;
+        return { account_type, chain_id: getDecimalChainId(chainId) };
+      };
+      const analyticsProps = await analyticsProperties();
+      trackEvent(MetaMetricsEvents.ACCOUNT_RENAMED, analyticsProps);
+    } catch {
+      return {};
+    }
   };
 
   return (

app/components/Views/ImportFromSecretRecoveryPhrase/index.js

@@ -63,7 +63,7 @@ import {
 import navigateTermsOfUse from '../../../util/termsOfUse/termsOfUse';
 import { ImportFromSeedSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ImportFromSeed.selectors';
 import { ChoosePasswordSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ChoosePassword.selectors';
-import trackAfterInteractions from '../../../util/metrics/TrackAfterInteraction/trackAfterInteractions';
+import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 
 const MINIMUM_SUPPORTED_CLIPBOARD_VERSION = 9;
 
@@ -105,9 +105,7 @@ const ImportFromSecretRecoveryPhrase = ({
   const confirmPasswordInput = React.createRef();
 
   const track = (event, properties) => {
-    trackAfterInteractions(event, properties).catch(() => {
-      Logger.log('ImportFromSecretRecoveryPhrase', `Failed to track ${event}`);
-    });
+    trackOnboarding(event, properties);
   };
 
   const updateNavBar = () => {

app/components/Views/LedgerAccountInfo/index.tsx

@@ -30,8 +30,8 @@ import AccountDetails from '../../../components/UI/HardwareWallet/AccountDetails
 
 import ledgerDeviceDarkImage from '../../../images/ledger-device-dark.png';
 import ledgerDeviceLightImage from '../../../images/ledger-device-light.png';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { MetaMetricsEvents } from '../../../core/Analytics';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors: any) =>
   StyleSheet.create({
@@ -79,6 +79,7 @@ const createStyles = (colors: any) =>
 const LedgerAccountInfo = () => {
   const dispatch = useDispatch();
   const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
   const [account, setAccount] = useState('');
   const [accountBalance, setAccountBalance] = useState<string>('0');
   const { colors } = useAppThemeFromContext() ?? mockTheme;
@@ -118,7 +119,7 @@ const LedgerAccountInfo = () => {
   const onForgetDevice = async () => {
     await forgetLedger();
     dispatch(setReloadAccounts(true));
-    AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_FORGOTTEN, {
+    trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_FORGOTTEN, {
       device_type: 'Ledger',
     });
     navigation.dispatch(StackActions.pop(2));

app/components/Views/LedgerConnect/index.tsx

@@ -32,13 +32,13 @@ import LedgerConnectionError, {
 import { getNavigationOptionsTitle } from '../../UI/Navbar';
 import { unlockLedgerDefaultAccount } from '../../../core/Ledger/Ledger';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { LEDGER_SUPPORT_LINK } from '../../../constants/urls';
 
 import ledgerDeviceDarkImage from '../../../images/ledger-device-dark.png';
 import ledgerDeviceLightImage from '../../../images/ledger-device-light.png';
 import ledgerConnectLightImage from '../../../images/ledger-connect-light.png';
 import ledgerConnectDarkImage from '../../../images/ledger-connect-dark.png';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (theme: any) =>
   StyleSheet.create({
@@ -114,6 +114,7 @@ const createStyles = (theme: any) =>
 const LedgerConnect = () => {
   const { AccountTrackerController } = Engine.context as any;
   const theme = useAppThemeFromContext() ?? mockTheme;
+  const { trackEvent } = useMetrics();
   const navigation = useNavigation();
   const styles = useMemo(() => createStyles(theme), [theme]);
   const [selectedDevice, setSelectedDevice] = useState<NanoDevice>(null);
@@ -137,13 +138,13 @@ const LedgerConnect = () => {
 
   const connectLedger = () => {
     setLoading(true);
-    AnalyticsV2.trackEvent(MetaMetricsEvents.CONTINUE_LEDGER_HARDWARE_WALLET, {
+    trackEvent(MetaMetricsEvents.CONTINUE_LEDGER_HARDWARE_WALLET, {
       device_type: 'Ledger',
     });
     ledgerLogicToRun(async () => {
       const account = await unlockLedgerDefaultAccount(true);
       await AccountTrackerController.syncBalanceWithAddresses([account]);
-      AnalyticsV2.trackEvent(MetaMetricsEvents.CONNECT_LEDGER_SUCCESS, {
+      trackEvent(MetaMetricsEvents.CONNECT_LEDGER_SUCCESS, {
         device_type: 'Ledger',
       });
       navigation.dispatch(StackActions.pop(2));

app/components/Views/LockScreen/index.js

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
 import LottieView from 'lottie-react-native';
 import { baseStyles } from '../../../styles/common';
 import Logger from '../../../util/Logger';
-import { trackErrorAsAnalytics } from '../../../util/analyticsV2';
 import { Authentication } from '../../../core';
 import {
   getAssetFromTheme,
@@ -23,6 +22,7 @@ import {
 import Routes from '../../../constants/navigation/Routes';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import { CommonActions } from '@react-navigation/native';
+import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 
 const LOGO_SIZE = 175;
 const createStyles = (colors) =>

app/components/Views/Login/index.js

@@ -42,10 +42,6 @@ import {
 import Routes from '../../../constants/navigation/Routes';
 import { passwordRequirementsMet } from '../../../util/password';
 import ErrorBoundary from '../ErrorBoundary';
-import {
-  trackErrorAsAnalytics,
-  trackEventV2 as trackEvent,
-} from '../../../util/analyticsV2';
 import { toLowerCaseEquals } from '../../../util/general';
 import DefaultPreference from 'react-native-default-preference';
 import { Authentication } from '../../../core';
@@ -61,6 +57,8 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import { RevealSeedViewSelectorsIDs } from '../../../../e2e/selectors/Settings/SecurityAndPrivacy/RevealSeedView.selectors';
 import { LoginViewSelectors } from '../../../../e2e/selectors/LoginView.selectors';
+import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
+import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 
 const deviceHeight = Device.getDeviceHeight();
 const breakPoint = deviceHeight < 700;
@@ -222,6 +220,10 @@ class Login extends PureComponent {
      * Action to set if the user is using remember me
      */
     setAllowLoginWithRememberMe: PropTypes.func,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   state = {
@@ -243,7 +245,7 @@ class Login extends PureComponent {
   fieldRef = React.createRef();
 
   async componentDidMount() {
-    trackEvent(MetaMetricsEvents.LOGIN_SCREEN_VIEWED);
+    this.props.metrics.trackEvent(MetaMetricsEvents.LOGIN_SCREEN_VIEWED);
     BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
 
     const authData = await Authentication.getType();
@@ -640,4 +642,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setAllowLoginWithRememberMe(enabled)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Login);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withMetricsAwareness(Login));