From 61c75534014d0571541d4d04846cb6defc23b7f4 Mon Sep 17 00:00:00 2001 From: tommasini <46944231+tommasini@users.noreply.github.com> Date: Fri, 23 Feb 2024 14:04:19 +0000 Subject: [PATCH] feat: AccountApproval, ACcountRightButton, AddCustomCollectible, AddCustomToken, AddressCopy, BackupAlert useGoToBridge events migration (#8657) AccountApproval, ACcountRightButton, AddCustomCollectible, AddCustomToken, AddressCopy, BackupAlert useGoToBridge components under UI folder, with new Segment metrics. --- app/components/UI/AccountApproval/index.js | 24 +- app/components/UI/AccountOverview/index.js | 18 +- .../UI/AccountRightButton/index.tsx | 13 +- .../UI/AddCustomCollectible/index.tsx | 8 +- .../__snapshots__/index.test.tsx.snap | 227 ++---------------- app/components/UI/AddCustomToken/index.js | 12 +- app/components/UI/AddressCopy/AddressCopy.tsx | 11 +- app/components/UI/BackupAlert/BackupAlert.tsx | 36 +-- .../UI/Bridge/utils/useGoToBridge.ts | 7 +- 9 files changed, 79 insertions(+), 277 deletions(-) diff --git a/app/components/UI/AccountApproval/index.js b/app/components/UI/AccountApproval/index.js index 21fd9048ce8..c2872f58347 100644 --- a/app/components/UI/AccountApproval/index.js +++ b/app/components/UI/AccountApproval/index.js @@ -15,7 +15,6 @@ import Text from '../../../component-library/components/Texts/Text'; import NotificationManager from '../../../core/NotificationManager'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import URL from 'url-parse'; import { getAddressAccountType } from '../../../util/address'; @@ -40,6 +39,7 @@ import ShowWarningBanner from './showWarningBanner'; import { ConnectAccountModalSelectorsIDs } from '../../../../e2e/selectors/Modals/ConnectAccountModal.selectors'; import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors'; import { getDecimalChainId } from '../../../util/networks'; +import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; /** * Account access approval component @@ -87,6 +87,10 @@ class AccountApproval extends PureComponent { * A string representing the network chainId */ chainId: PropTypes.string, + /** + * Metrics injected by withMetricsAwareness HOC + */ + metrics: PropTypes.object, }; state = { @@ -133,12 +137,10 @@ class AccountApproval extends PureComponent { const { hostname } = new URL(prefixedUrl); this.checkUrlFlaggedAsPhishing(hostname); - InteractionManager.runAfterInteractions(() => { - AnalyticsV2.trackEvent( - MetaMetricsEvents.CONNECT_REQUEST_STARTED, - this.getAnalyticsParams(), - ); - }); + this.props.metrics.trackEvent( + MetaMetricsEvents.CONNECT_REQUEST_STARTED, + this.getAnalyticsParams(), + ); }; showWalletConnectNotification = (confirmation = false) => { @@ -172,7 +174,7 @@ class AccountApproval extends PureComponent { // onConfirm will close current window by rejecting current approvalRequest. this.props.onCancel(); - AnalyticsV2.trackEvent( + this.props.metrics.trackEvent( MetaMetricsEvents.CONNECT_REQUEST_OTPFAILURE, this.getAnalyticsParams(), ); @@ -193,7 +195,7 @@ class AccountApproval extends PureComponent { } this.props.onConfirm(); - AnalyticsV2.trackEvent( + this.props.metrics.trackEvent( MetaMetricsEvents.CONNECT_REQUEST_COMPLETED, this.getAnalyticsParams(), ); @@ -204,7 +206,7 @@ class AccountApproval extends PureComponent { * Calls onConfirm callback and analytics to track connect canceled event */ onCancel = () => { - AnalyticsV2.trackEvent( + this.props.metrics.trackEvent( MetaMetricsEvents.CONNECT_REQUEST_CANCELLED, this.getAnalyticsParams(), ); @@ -381,4 +383,4 @@ const mapStateToProps = (state) => ({ AccountApproval.contextType = ThemeContext; -export default connect(mapStateToProps)(AccountApproval); +export default connect(mapStateToProps)(withMetricsAwareness(AccountApproval)); diff --git a/app/components/UI/AccountOverview/index.js b/app/components/UI/AccountOverview/index.js index 6d122401bde..69f9b0b01a9 100644 --- a/app/components/UI/AccountOverview/index.js +++ b/app/components/UI/AccountOverview/index.js @@ -37,7 +37,6 @@ import { ThemeContext, mockTheme } from '../../../util/theme'; import EthereumAddress from '../EthereumAddress'; import Identicon from '../Identicon'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import Analytics from '../../../core/Analytics/Analytics'; import AppConstants from '../../../core/AppConstants'; import Engine from '../../../core/Engine'; import { selectChainId } from '../../../selectors/networkController'; @@ -51,6 +50,7 @@ import { regex } from '../../../util/regex'; import Text, { TextVariant, } from '../../../component-library/components/Texts/Text'; +import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; const createStyles = (colors) => StyleSheet.create({ @@ -207,6 +207,10 @@ class AccountOverview extends PureComponent { * Current opens tabs in browser */ browserTabs: PropTypes.array, + /** + * Metrics injected by withMetricsAwareness HOC + */ + metrics: PropTypes.object, }; state = { @@ -302,9 +306,8 @@ class AccountOverview extends PureComponent { data: { msg: strings('account_details.account_copied_to_clipboard') }, }); setTimeout(() => this.props.protectWalletModalVisible(), 2000); - InteractionManager.runAfterInteractions(() => { - Analytics.trackEvent(MetaMetricsEvents.WALLET_COPIED_ADDRESS); - }); + + this.props.metrics.trackEvent(MetaMetricsEvents.WALLET_COPIED_ADDRESS); }; doENSLookup = async () => { @@ -337,7 +340,7 @@ class AccountOverview extends PureComponent { screen: Routes.BROWSER.VIEW, params, }); - Analytics.trackEvent(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED, { + this.props.metrics.trackEvent(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED, { portfolioUrl: AppConstants.PORTFOLIO_URL, }); }; @@ -478,4 +481,7 @@ const mapDispatchToProps = (dispatch) => ({ AccountOverview.contextType = ThemeContext; -export default connect(mapStateToProps, mapDispatchToProps)(AccountOverview); +export default connect( + mapStateToProps, + mapDispatchToProps, +)(withMetricsAwareness(AccountOverview)); diff --git a/app/components/UI/AccountRightButton/index.tsx b/app/components/UI/AccountRightButton/index.tsx index 78fbec7ef25..56b73f3b4ba 100644 --- a/app/components/UI/AccountRightButton/index.tsx +++ b/app/components/UI/AccountRightButton/index.tsx @@ -35,8 +35,8 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap import { selectProviderConfig } from '../../../selectors/networkController'; import Routes from '../../../constants/navigation/Routes'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import Analytics from '../../../core/Analytics/Analytics'; import { AccountOverviewSelectorsIDs } from '../../../../e2e/selectors/AccountOverview.selectors'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const styles = StyleSheet.create({ leftButton: { @@ -66,6 +66,7 @@ const AccountRightButton = ({ // Placeholder ref for dismissing keyboard. Works when the focused input is within a Webview. const placeholderInputRef = useRef(null); const { navigate } = useNavigation(); + const { trackEvent } = useMetrics(); const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); const accountAvatarType = useSelector((state: any) => @@ -122,12 +123,9 @@ const AccountRightButton = ({ navigate(Routes.MODAL.ROOT_MODAL_FLOW, { screen: Routes.SHEET.NETWORK_SELECTOR, }); - Analytics.trackEventWithParameters( - MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, - { - chain_id: providerConfig.chainId, - }, - ); + trackEvent(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, { + chain_id: providerConfig.chainId, + }); } else { onPress?.(); } @@ -138,6 +136,7 @@ const AccountRightButton = ({ onPress, navigate, providerConfig.chainId, + trackEvent, ]); const networkName = useMemo( diff --git a/app/components/UI/AddCustomCollectible/index.tsx b/app/components/UI/AddCustomCollectible/index.tsx index a0c5b05e056..d2e4b719018 100644 --- a/app/components/UI/AddCustomCollectible/index.tsx +++ b/app/components/UI/AddCustomCollectible/index.tsx @@ -16,7 +16,6 @@ import ActionView from '../ActionView'; import { isSmartContractAddress } from '../../../util/transactions'; import Device from '../../../util/device'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import { useTheme } from '../../../util/theme'; import { CUSTOM_TOKEN_CONTAINER_ID } from '../../../../wdio/screen-objects/testIDs/Screens/AddCustomToken.testIds'; @@ -30,6 +29,7 @@ import { import { selectChainId } from '../../../selectors/networkController'; import { selectSelectedAddress } from '../../../selectors/preferencesController'; import { getDecimalChainId } from '../../../util/networks'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const createStyles = (colors: any) => StyleSheet.create({ @@ -82,6 +82,7 @@ const AddCustomCollectible = ({ const [loading, setLoading] = useState(false); const assetTokenIdInput = React.createRef() as any; const { colors, themeAppearance } = useTheme(); + const { trackEvent } = useMetrics(); const styles = createStyles(colors); const selectedAddress = useSelector(selectSelectedAddress); @@ -190,10 +191,7 @@ const AddCustomCollectible = ({ const { NftController } = Engine.context as any; NftController.addNft(address, tokenId); - AnalyticsV2.trackEvent( - MetaMetricsEvents.COLLECTIBLE_ADDED, - getAnalyticsParams(), - ); + trackEvent(MetaMetricsEvents.COLLECTIBLE_ADDED, getAnalyticsParams()); setLoading(false); navigation.goBack(); }; diff --git a/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap b/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap index da48b5e2861..9036a3995b0 100644 --- a/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap @@ -1,220 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AddCustomToken should render correctly 1`] = ` - - - - - - Token detection is not available on this network yet. Please import token manually and make sure you trust it. Learn about - - - token scams and security risks. - - - - - Token Address - - - - - - - Token Symbol - - - - - - - Token Decimal - - - - - - - +/> `; diff --git a/app/components/UI/AddCustomToken/index.js b/app/components/UI/AddCustomToken/index.js index 3814c94fcb0..8b8d2ef7841 100644 --- a/app/components/UI/AddCustomToken/index.js +++ b/app/components/UI/AddCustomToken/index.js @@ -15,7 +15,6 @@ import { isValidAddress } from 'ethereumjs-util'; import ActionView from '../ActionView'; import { isSmartContractAddress } from '../../../util/transactions'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import AppConstants from '../../../core/AppConstants'; import Alert, { AlertType } from '../../Base/Alert'; @@ -36,6 +35,7 @@ import { NFT_IDENTIFIER_INPUT_BOX_ID } from '../../../../wdio/screen-objects/tes import { regex } from '../../../../app/util/regex'; import { AddCustomTokenViewSelectorsIDs } from '../../../../e2e/selectors/AddCustomTokenView.selectors'; import { getDecimalChainId } from '../../../util/networks'; +import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; const createStyles = (colors) => StyleSheet.create({ @@ -79,7 +79,7 @@ const createStyles = (colors) => /** * Copmonent that provides ability to add custom tokens. */ -export default class AddCustomToken extends PureComponent { +class AddCustomToken extends PureComponent { state = { address: '', symbol: '', @@ -104,6 +104,10 @@ export default class AddCustomToken extends PureComponent { * Checks if token detection is supported */ isTokenDetectionSupported: PropTypes.bool, + /** + * Metrics injected by withMetricsAwareness HOC + */ + metrics: PropTypes.object, }; getAnalyticsParams = () => { @@ -127,7 +131,7 @@ export default class AddCustomToken extends PureComponent { const { address, symbol, decimals, name } = this.state; await TokensController.addToken(address, symbol, decimals, { name }); - AnalyticsV2.trackEvent( + this.props.metrics.trackEvent( MetaMetricsEvents.TOKEN_ADDED, this.getAnalyticsParams(), ); @@ -479,3 +483,5 @@ export default class AddCustomToken extends PureComponent { } AddCustomToken.contextType = ThemeContext; + +export default withMetricsAwareness(AddCustomToken); diff --git a/app/components/UI/AddressCopy/AddressCopy.tsx b/app/components/UI/AddressCopy/AddressCopy.tsx index 3c9db52a4a8..e25fbd155c0 100644 --- a/app/components/UI/AddressCopy/AddressCopy.tsx +++ b/app/components/UI/AddressCopy/AddressCopy.tsx @@ -18,8 +18,8 @@ import ClipboardManager from '../../../core/ClipboardManager'; import { showAlert } from '../../../actions/alert'; import { protectWalletModalVisible } from '../../../actions/user'; import { strings } from '../../../../locales/i18n'; -import { InteractionManager, Platform, View } from 'react-native'; -import { Analytics, MetaMetricsEvents } from '../../../core/Analytics'; +import { Platform, View } from 'react-native'; +import { MetaMetricsEvents } from '../../../core/Analytics'; import { useStyles } from '../../../component-library/hooks'; import generateTestId from '../../../../wdio/utils/generateTestId'; @@ -30,11 +30,13 @@ import { selectIdentities, selectSelectedAddress, } from '../../../selectors/preferencesController'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => { const { styles } = useStyles(styleSheet, {}); const dispatch = useDispatch(); + const { trackEvent } = useMetrics(); const handleShowAlert = (config: { isVisible: boolean; @@ -70,9 +72,8 @@ const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => { data: { msg: strings('account_details.account_copied_to_clipboard') }, }); setTimeout(() => handleProtectWalletModalVisible(), 2000); - InteractionManager.runAfterInteractions(() => { - Analytics.trackEvent(MetaMetricsEvents.WALLET_COPIED_ADDRESS); - }); + + trackEvent(MetaMetricsEvents.WALLET_COPIED_ADDRESS); }; return ( diff --git a/app/components/UI/BackupAlert/BackupAlert.tsx b/app/components/UI/BackupAlert/BackupAlert.tsx index 832f9839824..179cf78357c 100644 --- a/app/components/UI/BackupAlert/BackupAlert.tsx +++ b/app/components/UI/BackupAlert/BackupAlert.tsx @@ -1,11 +1,6 @@ /* eslint-disable react/prop-types */ import React, { useState, useEffect } from 'react'; -import { - View, - TouchableOpacity, - InteractionManager, - Platform, -} from 'react-native'; +import { View, TouchableOpacity, Platform } from 'react-native'; import ElevatedView from 'react-native-elevated-view'; import { strings } from '../../../../locales/i18n'; import { baseStyles } from '../../../styles/common'; @@ -13,7 +8,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { backUpSeedphraseAlertNotVisible } from '../../../actions/user'; import { findRouteNameFromNavigatorState } from '../../../util/general'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import AnalyticsV2 from '../../../util/analyticsV2'; import generateTestId from '../../../../wdio/utils/generateTestId'; import { NOTIFICATION_REMIND_ME_LATER_BUTTON_ID, @@ -31,6 +25,7 @@ import Icon, { import Text, { TextVariant, } from '../../../component-library/components/Texts/Text'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const BROWSER_ROUTE = 'BrowserView'; @@ -50,7 +45,7 @@ const BLOCKED_LIST = [ const BackupAlert = ({ navigation, onDismiss }: BackupAlertI) => { const { styles } = useStyles(styleSheet, {}); - + const { trackEvent } = useMetrics(); const [inBrowserView, setInBrowserView] = useState(false); const [inBlockedView, setInBlockedView] = useState(false); const [isVisible, setIsVisible] = useState(true); @@ -81,28 +76,21 @@ const BackupAlert = ({ navigation, onDismiss }: BackupAlertI) => { navigation.navigate('SetPasswordFlow', { screen: 'AccountBackupStep1', }); - InteractionManager.runAfterInteractions(() => { - AnalyticsV2.trackEvent( - MetaMetricsEvents.WALLET_SECURITY_PROTECT_ENGAGED, - { - wallet_protection_required: false, - source: 'Backup Alert', - }, - ); + + trackEvent(MetaMetricsEvents.WALLET_SECURITY_PROTECT_ENGAGED, { + wallet_protection_required: false, + source: 'Backup Alert', }); }; const onDismissAlert = () => { dispatch(backUpSeedphraseAlertNotVisible()); - InteractionManager.runAfterInteractions(() => { - AnalyticsV2.trackEvent( - MetaMetricsEvents.WALLET_SECURITY_PROTECT_DISMISSED, - { - wallet_protection_required: false, - source: 'Backup Alert', - }, - ); + + trackEvent(MetaMetricsEvents.WALLET_SECURITY_PROTECT_DISMISSED, { + wallet_protection_required: false, + source: 'Backup Alert', }); + if (onDismiss) onDismiss(); }; diff --git a/app/components/UI/Bridge/utils/useGoToBridge.ts b/app/components/UI/Bridge/utils/useGoToBridge.ts index bb62951f8aa..510abb714a5 100644 --- a/app/components/UI/Bridge/utils/useGoToBridge.ts +++ b/app/components/UI/Bridge/utils/useGoToBridge.ts @@ -1,6 +1,6 @@ import Routes from '../../../../constants/navigation/Routes'; import AppConstants from '../../../../core/AppConstants'; -import { Analytics, MetaMetricsEvents } from '../../../../core/Analytics'; +import { MetaMetricsEvents } from '../../../../core/Analytics'; import { useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; @@ -9,6 +9,7 @@ import { selectChainId } from '../../../../selectors/networkController'; import type { BrowserTab } from '../../Tokens/types'; import type { BrowserParams } from '../../../../components/Views/Browser/Browser.types'; import { getDecimalChainId } from '../../../../util/networks'; +import { useMetrics } from '../../../../components/hooks/useMetrics'; const BRIDGE_URL = `${AppConstants.PORTFOLIO_URL}/bridge`; @@ -21,7 +22,7 @@ export default function useGoToBridge(location: string) { const chainId = useSelector(selectChainId); const browserTabs = useSelector((state: any) => state.browser.tabs); const { navigate } = useNavigation(); - + const { trackEvent } = useMetrics(); return (address?: string) => { const existingBridgeTab = browserTabs.find((tab: BrowserTab) => tab.url.match(new RegExp(BRIDGE_URL)), @@ -44,7 +45,7 @@ export default function useGoToBridge(location: string) { screen: Routes.BROWSER.VIEW, params, }); - Analytics.trackEventWithParameters(MetaMetricsEvents.BRIDGE_LINK_CLICKED, { + trackEvent(MetaMetricsEvents.BRIDGE_LINK_CLICKED, { bridgeUrl: BRIDGE_URL, location, chain_id_source: getDecimalChainId(chainId),