From 8f01e5ffd302d8e292a253301b203c04b15a0ad9 Mon Sep 17 00:00:00 2001 From: tommasini <46944231+tommasini@users.noreply.github.com> Date: Fri, 23 Feb 2024 13:54:59 +0000 Subject: [PATCH] feat: migration of AnimatedQrScanner, QRsigningDetails and onboarding flow (#8653) AnimatedQrScanner, QRSigningDetails, onboarding flow, components under UI folder, with new Segment metrics. --- .../UI/OnboardingWizard/Step1/index.js | 25 +++++----- .../UI/OnboardingWizard/Step2/index.js | 30 ++++++++---- .../UI/OnboardingWizard/Step3/index.js | 8 +-- .../UI/OnboardingWizard/Step4/index.js | 7 +-- .../UI/OnboardingWizard/Step5/index.js | 8 +-- .../UI/OnboardingWizard/Step6/index.js | 6 ++- app/components/UI/OnboardingWizard/index.js | 15 +++--- .../UI/ProtectYourWalletModal/index.js | 49 ++++++++----------- .../UI/QRHardware/AnimatedQRScanner.tsx | 24 ++++++--- .../UI/QRHardware/QRSigningDetails.tsx | 6 ++- 10 files changed, 97 insertions(+), 81 deletions(-) diff --git a/app/components/UI/OnboardingWizard/Step1/index.js b/app/components/UI/OnboardingWizard/Step1/index.js index 00378bdd4db..cc3ee2ab591 100644 --- 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 index 26bd1d5248f..3bce98fe7d9 100644 --- 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 index 65216a970cf..700ed3d9be0 100644 --- 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,7 +67,7 @@ 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], }); @@ -73,7 +75,7 @@ const Step3 = ({ setOnboardingWizardStep, coachmarkRef, onClose }) => { 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 index ad519d674cb..2973c67361f 100644 --- 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 index 0b3ec670818..9f2450dd66b 100644 --- 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 index 2c1ec078a46..4a7fbf3c413 100644 --- 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 index 04f5307b873..97dcd2a8442 100644 --- 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, diff --git a/app/components/UI/ProtectYourWalletModal/index.js b/app/components/UI/ProtectYourWalletModal/index.js index 88b72ca8306..53ad4502c1e 100644 --- a/app/components/UI/ProtectYourWalletModal/index.js +++ b/app/components/UI/ProtectYourWalletModal/index.js @@ -1,13 +1,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { - StyleSheet, - View, - Text, - Image, - TouchableOpacity, - InteractionManager, -} from 'react-native'; +import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'; import ActionModal from '../ActionModal'; import { fontStyles } from '../../../styles/common'; import { connect } from 'react-redux'; @@ -16,10 +9,10 @@ import Icon from 'react-native-vector-icons/FontAwesome'; import { strings } from '../../../../locales/i18n'; import scaling from '../../../util/scaling'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import { ThemeContext, mockTheme } from '../../../util/theme'; import { ProtectWalletModalSelectorsIDs } from '../../../../e2e/selectors/Modals/ProtectWalletModal.selectors'; +import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; const protectWalletImage = require('../../../images/explain-backup-seedphrase.png'); // eslint-disable-line @@ -96,6 +89,10 @@ class ProtectYourWalletModal extends PureComponent { * Boolean that determines if the user has set a password before */ passwordSet: PropTypes.bool, + /** + * Metrics injected by withMetricsAwareness HOC + */ + metrics: PropTypes.object, }; goToBackupFlow = () => { @@ -104,15 +101,13 @@ class ProtectYourWalletModal extends PureComponent { 'SetPasswordFlow', this.props.passwordSet ? { screen: 'AccountBackupStep1' } : undefined, ); - InteractionManager.runAfterInteractions(() => { - AnalyticsV2.trackEvent( - MetaMetricsEvents.WALLET_SECURITY_PROTECT_ENGAGED, - { - wallet_protection_required: false, - source: 'Modal', - }, - ); - }); + this.props.metrics.trackEvent( + MetaMetricsEvents.WALLET_SECURITY_PROTECT_ENGAGED, + { + wallet_protection_required: false, + source: 'Modal', + }, + ); }; onLearnMore = () => { @@ -128,15 +123,13 @@ class ProtectYourWalletModal extends PureComponent { onDismiss = () => { this.props.protectWalletModalNotVisible(); - InteractionManager.runAfterInteractions(() => { - AnalyticsV2.trackEvent( - MetaMetricsEvents.WALLET_SECURITY_PROTECT_DISMISSED, - { - wallet_protection_required: false, - source: 'Modal', - }, - ); - }); + this.props.metrics.trackEvent( + MetaMetricsEvents.WALLET_SECURITY_PROTECT_DISMISSED, + { + wallet_protection_required: false, + source: 'Modal', + }, + ); }; render() { @@ -209,4 +202,4 @@ ProtectYourWalletModal.contextType = ThemeContext; export default connect( mapStateToProps, mapDispatchToProps, -)(ProtectYourWalletModal); +)(withMetricsAwareness(ProtectYourWalletModal)); diff --git a/app/components/UI/QRHardware/AnimatedQRScanner.tsx b/app/components/UI/QRHardware/AnimatedQRScanner.tsx index b7c97428359..2357e210385 100644 --- a/app/components/UI/QRHardware/AnimatedQRScanner.tsx +++ b/app/components/UI/QRHardware/AnimatedQRScanner.tsx @@ -19,10 +19,10 @@ import { URRegistryDecoder } from '@keystonehq/ur-decoder'; import Modal from 'react-native-modal'; import { UR } from '@ngraveio/bc-ur'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import { SUPPORTED_UR_TYPE } from '../../../constants/qr'; import { useTheme } from '../../../util/theme'; import { Theme } from '../../../util/theme/models'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const createStyles = (theme: Theme) => StyleSheet.create({ @@ -102,9 +102,11 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => { hideModal, pauseQRCode, } = props; + const [urDecoder, setURDecoder] = useState(new URRegistryDecoder()); const [progress, setProgress] = useState(0); const theme = useTheme(); + const { trackEvent } = useMetrics(); const styles = createStyles(theme); let expectedURTypes: string[]; @@ -141,14 +143,14 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => { const onError = useCallback( (error) => { if (onScanError && error) { - AnalyticsV2.trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { purpose, error, }); onScanError(error.message); } }, - [purpose, onScanError], + [purpose, onScanError, trackEvent], ); const onBarCodeRead = useCallback( @@ -164,7 +166,7 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => { urDecoder.receivePart(content); setProgress(Math.ceil(urDecoder.getProgress() * 100)); if (urDecoder.isError()) { - AnalyticsV2.trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { purpose, error: urDecoder.resultError(), }); @@ -176,14 +178,14 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => { setProgress(0); setURDecoder(new URRegistryDecoder()); } else if (purpose === 'sync') { - AnalyticsV2.trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { purpose, received_ur_type: ur.type, error: 'invalid `sync` qr code', }); onScanError(strings('transaction.invalid_qr_code_sync')); } else { - AnalyticsV2.trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { purpose, received_ur_type: ur.type, error: 'invalid `sign` qr code', @@ -195,7 +197,15 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => { onScanError(strings('transaction.unknown_qr_code')); } }, - [visible, urDecoder, onScanError, expectedURTypes, purpose, onScanSuccess], + [ + visible, + urDecoder, + onScanError, + expectedURTypes, + purpose, + onScanSuccess, + trackEvent, + ], ); const onStatusChange = useCallback( diff --git a/app/components/UI/QRHardware/QRSigningDetails.tsx b/app/components/UI/QRHardware/QRSigningDetails.tsx index e8e15b26e8e..2567e571de9 100644 --- a/app/components/UI/QRHardware/QRSigningDetails.tsx +++ b/app/components/UI/QRHardware/QRSigningDetails.tsx @@ -29,11 +29,11 @@ import { ETHSignature } from '@keystonehq/bc-ur-registry-eth'; import { stringify as uuidStringify } from 'uuid'; import Alert, { AlertType } from '../../Base/Alert'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import { useNavigation } from '@react-navigation/native'; import { useTheme } from '../../../util/theme'; import Device from '../../../util/device'; +import { useMetrics } from '../../../components/hooks/useMetrics'; interface IQRSigningDetails { QRState: IQRState; @@ -128,6 +128,7 @@ const QRSigningDetails = ({ fromAddress, }: IQRSigningDetails) => { const { colors } = useTheme(); + const { trackEvent } = useMetrics(); const styles = createStyles(colors); const navigation = useNavigation(); const KeyringController = useMemo(() => { @@ -230,7 +231,7 @@ const QRSigningDetails = ({ setSentOrCanceled(true); successCallback?.(); } else { - AnalyticsV2.trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.HARDWARE_WALLET_ERROR, { error: 'received signature request id is not matched with origin request', }); @@ -243,6 +244,7 @@ const QRSigningDetails = ({ QRState.sign.request?.requestId, failureCallback, successCallback, + trackEvent, ], ); const onScanError = useCallback(