From b1d2b64e96715efbb3c43633061b6bcb6dc31f69 Mon Sep 17 00:00:00 2001 From: tommasini <46944231+tommasini@users.noreply.github.com> Date: Fri, 23 Feb 2024 13:58:46 +0000 Subject: [PATCH] feat: migration of analytics of NavBar, NavBarTitle, LedgerConfirmationModal (#8655) NavBar, NavBarTitle, LedgerConfirmationModal components under UI folder, with new Segment metrics. --- .../EnableAutomaticSecurityChecksModal.tsx | 24 +++++------ .../LedgerModals/LedgerConfirmationModal.tsx | 20 +++++----- app/components/UI/Navbar/index.js | 40 +++++-------------- .../__snapshots__/index.test.js.snap | 2 +- app/components/UI/NavbarTitle/index.js | 12 ++++-- app/components/UI/NetworkModal/index.tsx | 6 +-- 6 files changed, 44 insertions(+), 60 deletions(-) diff --git a/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx b/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx index fecb9590f22..8f88277cc40 100644 --- a/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx +++ b/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx @@ -21,7 +21,6 @@ import { userSelectedAutomaticSecurityChecksOptions, } from '../../../actions/security'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import { ScrollView } from 'react-native-gesture-handler'; import { @@ -31,6 +30,7 @@ import { import generateTestId from '../../../../wdio/utils/generateTestId'; import generateDeviceAnalyticsMetaData from '../../../util/metrics'; +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 +43,7 @@ export const createEnableAutomaticSecurityChecksModalNavDetails = const EnableAutomaticSecurityChecksModal = () => { const { colors } = useTheme(); + const { trackEvent } = useMetrics(); const styles = createStyles(colors); const modalRef = useRef(null); const dispatch = useDispatch(); @@ -51,11 +52,10 @@ const EnableAutomaticSecurityChecksModal = () => { modalRef?.current?.dismissModal(cb); useEffect(() => { - AnalyticsV2.trackEvent( - MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_PROMPT_VIEWED, - generateDeviceAnalyticsMetaData(), - ); - }, []); + trackEvent(MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_PROMPT_VIEWED, { + ...generateDeviceAnalyticsMetaData(), + }); + }, [trackEvent]); useEffect(() => { dispatch(setAutomaticSecurityChecksModalOpen(true)); @@ -67,25 +67,25 @@ const EnableAutomaticSecurityChecksModal = () => { const triggerCloseAndDisableAutomaticSecurityChecks = useCallback( () => dismissModal(() => { - AnalyticsV2.trackEvent( + trackEvent( MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_DISABLED_FROM_PROMPT, - generateDeviceAnalyticsMetaData(), + { ...generateDeviceAnalyticsMetaData() }, ); dispatch(userSelectedAutomaticSecurityChecksOptions()); }), - [dispatch], + [dispatch, trackEvent], ); const enableAutomaticSecurityChecks = useCallback(() => { dismissModal(() => { - AnalyticsV2.trackEvent( + trackEvent( MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_ENABLED_FROM_PROMPT, - generateDeviceAnalyticsMetaData(), + { ...generateDeviceAnalyticsMetaData() }, ); dispatch(userSelectedAutomaticSecurityChecksOptions()); dispatch(setAutomaticSecurityChecks(true)); }); - }, [dispatch]); + }, [dispatch, trackEvent]); return ( diff --git a/app/components/UI/LedgerModals/LedgerConfirmationModal.tsx b/app/components/UI/LedgerModals/LedgerConfirmationModal.tsx index 7fa40e3b5df..65cae14f23a 100644 --- a/app/components/UI/LedgerModals/LedgerConfirmationModal.tsx +++ b/app/components/UI/LedgerModals/LedgerConfirmationModal.tsx @@ -16,7 +16,7 @@ import OpenETHAppStep from './Steps/OpenETHAppStep'; import SearchingForDeviceStep from './Steps/SearchingForDeviceStep'; import { unlockLedgerDefaultAccount } from '../../../core/Ledger/Ledger'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const createStyles = (colors: Colors) => StyleSheet.create({ @@ -46,6 +46,7 @@ const LedgerConfirmationModal = ({ }: LedgerConfirmationModalProps) => { const { colors } = useAppThemeFromContext() || mockTheme; const styles = useMemo(() => createStyles(colors), [colors]); + const { trackEvent } = useMetrics(); const [permissionErrorShown, setPermissionErrorShown] = useState(false); const { isSendingLedgerCommands, @@ -76,7 +77,7 @@ const LedgerConfirmationModal = ({ } catch (_e) { // Handle a super edge case of the user starting a transaction with the device connected // After arriving to confirmation the ETH app is not installed anymore this causes a crash. - AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { device_type: 'Ledger', error: 'LEDGER_ETH_APP_NOT_INSTALLED', }); @@ -88,12 +89,9 @@ const LedgerConfirmationModal = ({ try { onRejection(); } finally { - AnalyticsV2.trackEvent( - MetaMetricsEvents.LEDGER_HARDWARE_TRANSACTION_CANCELLED, - { - device_type: 'Ledger', - }, - ); + trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_TRANSACTION_CANCELLED, { + device_type: 'Ledger', + }); } }; @@ -180,7 +178,7 @@ const LedgerConfirmationModal = ({ break; } if (ledgerError !== LedgerCommunicationErrors.UserRefusedConfirmation) { - AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { device_type: 'Ledger', error: `${ledgerError}`, }); @@ -203,7 +201,7 @@ const LedgerConfirmationModal = ({ break; } setPermissionErrorShown(true); - AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { device_type: 'Ledger', error: 'LEDGER_BLUETOOTH_PERMISSION_ERR', }); @@ -214,7 +212,7 @@ const LedgerConfirmationModal = ({ title: strings('ledger.bluetooth_off'), subtitle: strings('ledger.bluetooth_off_message'), }); - AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { + trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, { device_type: 'Ledger', error: 'LEDGER_BLUETOOTH_CONNECTION_ERR', }); diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js index 347e341906d..6ceff88b828 100644 --- a/app/components/UI/Navbar/index.js +++ b/app/components/UI/Navbar/index.js @@ -6,7 +6,6 @@ import AccountRightButton from '../AccountRightButton'; import { Alert, Image, - InteractionManager, Platform, StyleSheet, Text, @@ -21,8 +20,7 @@ import { scale } from 'react-native-size-matters'; import { strings } from '../../../../locales/i18n'; import AppConstants from '../../../core/AppConstants'; import DeeplinkManager from '../../../core/DeeplinkManager/SharedDeeplinkManager'; -import Analytics from '../../../core/Analytics/Analytics'; -import { MetaMetricsEvents } from '../../../core/Analytics'; +import { MetaMetrics, MetaMetricsEvents } from '../../../core/Analytics'; import { importAccountFromPrivateKey } from '../../../util/address'; import Device from '../../../util/device'; import PickerNetwork from '../../../component-library/components/Pickers/PickerNetwork'; @@ -52,16 +50,8 @@ import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors'; import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/WalletView.selectors'; import { NetworksViewSelectorsIDs } from '../../../../e2e/selectors/Settings/NetworksView.selectors'; -const trackEvent = (event) => { - InteractionManager.runAfterInteractions(() => { - Analytics.trackEvent(event); - }); -}; - -const trackEventWithParameters = (event, params) => { - InteractionManager.runAfterInteractions(() => { - Analytics.trackEventWithParameters(event, params); - }); +const trackEvent = (event, params = {}) => { + MetaMetrics.getInstance().trackEvent(event, params); }; const styles = StyleSheet.create({ @@ -533,7 +523,7 @@ export function getSendFlowTitle( }); const rightAction = () => { const providerType = route?.params?.providerType ?? ''; - trackEventWithParameters(MetaMetricsEvents.SEND_FLOW_CANCEL, { + trackEvent(MetaMetricsEvents.SEND_FLOW_CANCEL, { view: title.split('.')[1], network: providerType, }); @@ -1386,14 +1376,9 @@ export function getSwapsQuotesNavbar(navigation, route, themeColors) { const selectedQuote = route.params?.selectedQuote; const quoteBegin = route.params?.quoteBegin; if (!selectedQuote) { - InteractionManager.runAfterInteractions(() => { - Analytics.trackEventWithParameters( - MetaMetricsEvents.QUOTES_REQUEST_CANCELLED, - { - ...trade, - responseTime: new Date().getTime() - quoteBegin, - }, - ); + trackEvent(MetaMetricsEvents.QUOTES_REQUEST_CANCELLED, { + ...trade, + responseTime: new Date().getTime() - quoteBegin, }); } navigation.pop(); @@ -1404,14 +1389,9 @@ export function getSwapsQuotesNavbar(navigation, route, themeColors) { const selectedQuote = route.params?.selectedQuote; const quoteBegin = route.params?.quoteBegin; if (!selectedQuote) { - InteractionManager.runAfterInteractions(() => { - Analytics.trackEventWithParameters( - MetaMetricsEvents.QUOTES_REQUEST_CANCELLED, - { - ...trade, - responseTime: new Date().getTime() - quoteBegin, - }, - ); + trackEvent(MetaMetricsEvents.QUOTES_REQUEST_CANCELLED, { + ...trade, + responseTime: new Date().getTime() - quoteBegin, }); } navigation.dangerouslyGetParent()?.pop(); diff --git a/app/components/UI/NavbarTitle/__snapshots__/index.test.js.snap b/app/components/UI/NavbarTitle/__snapshots__/index.test.js.snap index c0849cce627..86e69b97324 100644 --- a/app/components/UI/NavbarTitle/__snapshots__/index.test.js.snap +++ b/app/components/UI/NavbarTitle/__snapshots__/index.test.js.snap @@ -32,7 +32,7 @@ exports[`NavbarTitle should render correctly 1`] = ` } } > - diff --git a/app/components/UI/NavbarTitle/index.js b/app/components/UI/NavbarTitle/index.js index 0999c9b2e91..540ef5fa028 100644 --- a/app/components/UI/NavbarTitle/index.js +++ b/app/components/UI/NavbarTitle/index.js @@ -11,9 +11,9 @@ import { ThemeContext, mockTheme } from '../../../util/theme'; import { NAVBAR_TITLE_NETWORKS_TEXT } from '../../../../wdio/screen-objects/testIDs/Screens/WalletScreen-testIds'; import Routes from '../../../constants/navigation/Routes'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import Analytics from '../../../core/Analytics/Analytics'; import { withNavigation } from '@react-navigation/compat'; import { selectProviderConfig } from '../../../selectors/networkController'; +import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; const createStyles = (colors) => StyleSheet.create({ @@ -75,6 +75,10 @@ class NavbarTitle extends PureComponent { * Object that represents the navigator */ navigation: PropTypes.object, + /** + * Metrics injected by withMetricsAwareness HOC + */ + metrics: PropTypes.object, }; static defaultProps = { @@ -91,7 +95,7 @@ class NavbarTitle extends PureComponent { screen: Routes.SHEET.NETWORK_SELECTOR, }); - Analytics.trackEventWithParameters( + this.props.metrics.trackEvent( MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, { chain_id: getDecimalChainId(this.props.providerConfig.chainId), @@ -160,4 +164,6 @@ const mapStateToProps = (state) => ({ providerConfig: selectProviderConfig(state), }); -export default withNavigation(connect(mapStateToProps)(NavbarTitle)); +export default withNavigation( + connect(mapStateToProps)(withMetricsAwareness(NavbarTitle)), +); diff --git a/app/components/UI/NetworkModal/index.tsx b/app/components/UI/NetworkModal/index.tsx index 3594d1faf4b..bbc5b1c8d9c 100644 --- a/app/components/UI/NetworkModal/index.tsx +++ b/app/components/UI/NetworkModal/index.tsx @@ -20,7 +20,6 @@ import { ButtonSize, ButtonVariants, } from '../../../component-library/components/Buttons/Button'; -import AnalyticsV2 from '../../../util/analyticsV2'; import { useTheme } from '../../../util/theme'; import { networkSwitched } from '../../../actions/onboardNetwork'; @@ -33,6 +32,7 @@ import { ButtonProps } from '../../../component-library/components/Buttons/Butto import checkSafeNetwork from '../../../core/RPCMethods/networkChecker.util'; import NetworkVerificationInfo from '../NetworkVerificationInfo'; import createNetworkModalStyles from './index.styles'; +import { useMetrics } from '../../../components/hooks/useMetrics'; interface NetworkProps { isVisible: boolean; @@ -59,7 +59,7 @@ const NetworkModals = (props: NetworkProps) => { shouldNetworkSwitchPopToWallet, onNetworkSwitch, } = props; - + const { trackEvent } = useMetrics(); const [showDetails, setShowDetails] = React.useState(false); const [networkAdded, setNetworkAdded] = React.useState(false); const [showCheckNetwork, setShowCheckNetwork] = React.useState(false); @@ -191,7 +191,7 @@ const NetworkModals = (props: NetworkProps) => { symbol: ticker, }; - AnalyticsV2.trackEvent(MetaMetricsEvents.NETWORK_ADDED, analyticsParamsAdd); + trackEvent(MetaMetricsEvents.NETWORK_ADDED, analyticsParamsAdd); closeModal(); if (onNetworkSwitch) {