diff --git a/app/components/Views/RestoreWallet/RestoreWallet.tsx b/app/components/Views/RestoreWallet/RestoreWallet.tsx index 2b6c786632f..2333630949a 100644 --- a/app/components/Views/RestoreWallet/RestoreWallet.tsx +++ b/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 => { 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 ( diff --git a/app/components/Views/RestoreWallet/WalletResetNeeded.tsx b/app/components/Views/RestoreWallet/WalletResetNeeded.tsx index 321e892a6e1..8fb3ecfbeeb 100644 --- a/app/components/Views/RestoreWallet/WalletResetNeeded.tsx +++ b/app/components/Views/RestoreWallet/WalletResetNeeded.tsx @@ -18,8 +18,8 @@ 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, @@ -27,6 +27,7 @@ export const createWalletResetNeededNavDetails = createNavigationDetails( const WalletResetNeeded = () => { const { colors } = useAppThemeFromContext(); + const { trackEvent } = useMetrics(); const styles = createStyles(colors); const navigation = useNavigation>(); @@ -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 ( diff --git a/app/components/Views/RestoreWallet/WalletRestored.tsx b/app/components/Views/RestoreWallet/WalletRestored.tsx index bdab7d609f2..d481bc883e7 100644 --- a/app/components/Views/RestoreWallet/WalletRestored.tsx +++ b/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(false); const { colors } = useAppThemeFromContext(); + const { trackEvent } = useMetrics(); const styles = createStyles(colors); const navigation = useNavigation>(); 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 => { try { @@ -74,7 +75,7 @@ const WalletRestored = () => { deviceMetaData, ); await finishWalletRestore(); - }, [deviceMetaData, finishWalletRestore]); + }, [deviceMetaData, finishWalletRestore, trackEvent]); return ( diff --git a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx index 1c00b147e8c..a9dbab7fe4a 100644 --- a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx +++ b/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); }; diff --git a/app/components/Views/Settings/AdvancedSettings/index.js b/app/components/Views/Settings/AdvancedSettings/index.js index 9bb53c3230c..ab5691a2bd5 100644 --- a/app/components/Views/Settings/AdvancedSettings/index.js +++ b/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)); diff --git a/app/components/Views/Settings/SecuritySettings/BlockaidIndicator/BlockaidIndicator.tsx b/app/components/Views/Settings/SecuritySettings/BlockaidIndicator/BlockaidIndicator.tsx index faf5f1fd58b..b267b16a248 100644 --- a/app/components/Views/Settings/SecuritySettings/BlockaidIndicator/BlockaidIndicator.tsx +++ b/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 diff --git a/app/components/Views/Settings/index.tsx b/app/components/Views/Settings/index.tsx index be682eae2d4..d55480975ec 100644 --- a/app/components/Views/Settings/index.tsx +++ b/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(); @@ -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'); diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index ed28f471309..2fe135ac1aa 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -1,11 +1,5 @@ import React, { useEffect, useRef, useCallback, useMemo } from 'react'; -import { - InteractionManager, - ActivityIndicator, - StyleSheet, - View, - TextStyle, -} from 'react-native'; +import { ActivityIndicator, StyleSheet, View, TextStyle } from 'react-native'; import type { Theme } from '@metamask/design-tokens'; import { useSelector } from 'react-redux'; import ScrollableTabView from 'react-native-scrollable-tab-view'; @@ -22,7 +16,6 @@ import { } from '../../../util/number'; import Engine from '../../../core/Engine'; import CollectibleContracts from '../../UI/CollectibleContracts'; -import Analytics from '../../../core/Analytics/Analytics'; import { MetaMetricsEvents } from '../../../core/Analytics'; import { getTicker } from '../../../util/transactions'; import OnboardingWizard from '../../UI/OnboardingWizard'; @@ -50,6 +43,7 @@ import { } from '../../../selectors/currencyRateController'; import { selectAccountsByChainId } from '../../../selectors/accountTrackerController'; import { selectSelectedAddress } from '../../../selectors/preferencesController'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const createStyles = ({ colors, typography }: Theme) => StyleSheet.create({ @@ -92,6 +86,7 @@ const Wallet = ({ navigation }: any) => { const { navigate } = useNavigation(); const walletRef = useRef(null); const theme = useTheme(); + const { trackEvent } = useMetrics(); const styles = createStyles(theme); const { colors } = theme; @@ -150,13 +145,10 @@ const Wallet = ({ navigation }: any) => { navigate(Routes.MODAL.ROOT_MODAL_FLOW, { screen: Routes.SHEET.NETWORK_SELECTOR, }); - Analytics.trackEventWithParameters( - MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, - { - chain_id: getDecimalChainId(providerConfig.chainId), - }, - ); - }, [navigate, providerConfig.chainId]); + trackEvent(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, { + chain_id: getDecimalChainId(providerConfig.chainId), + }); + }, [navigate, providerConfig.chainId, trackEvent]); const { colors: themeColors } = useTheme(); /** @@ -231,15 +223,16 @@ const Wallet = ({ navigation }: any) => { [styles, colors], ); - const onChangeTab = useCallback((obj) => { - InteractionManager.runAfterInteractions(() => { + const onChangeTab = useCallback( + (obj) => { if (obj.ref.props.tabLabel === strings('wallet.tokens')) { - Analytics.trackEvent(MetaMetricsEvents.WALLET_TOKENS); + trackEvent(MetaMetricsEvents.WALLET_TOKENS); } else { - Analytics.trackEvent(MetaMetricsEvents.WALLET_COLLECTIBLES); + trackEvent(MetaMetricsEvents.WALLET_COLLECTIBLES); } - }); - }, []); + }, + [trackEvent], + ); const renderContent = useCallback(() => { let balance: any = 0; diff --git a/app/components/Views/WalletActions/WalletActions.tsx b/app/components/Views/WalletActions/WalletActions.tsx index 0964286e438..c69602d4a73 100644 --- a/app/components/Views/WalletActions/WalletActions.tsx +++ b/app/components/Views/WalletActions/WalletActions.tsx @@ -21,7 +21,6 @@ import isBridgeAllowed from '../../UI/Bridge/utils/isBridgeAllowed'; import useGoToBridge from '../../../components/UI/Bridge/utils/useGoToBridge'; import Routes from '../../../constants/navigation/Routes'; import { MetaMetricsEvents } from '../../../core/Analytics'; -import Analytics from '../../../core/Analytics/Analytics'; import { getEther } from '../../../util/transactions'; import { newAssetTransaction } from '../../../actions/transaction'; import { strings } from '../../../../locales/i18n'; @@ -43,6 +42,7 @@ import { WALLET_SEND, WALLET_SWAP, } from './WalletActions.constants'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const WalletActions = () => { const { styles } = useStyles(styleSheet, {}); @@ -56,24 +56,22 @@ const WalletActions = () => { const dispatch = useDispatch(); const [isNetworkRampSupported] = useRampNetwork(); + const { trackEvent } = useMetrics(); const onReceive = () => { sheetRef.current?.onCloseBottomSheet(() => dispatch(toggleReceiveModal())); - Analytics.trackEventWithParameters( - MetaMetricsEvents.RECEIVE_BUTTON_CLICKED, - { - text: 'Receive', - tokenSymbol: '', - location: 'TabBar', - chain_id: getDecimalChainId(chainId), - }, - ); + trackEvent(MetaMetricsEvents.RECEIVE_BUTTON_CLICKED, { + text: 'Receive', + tokenSymbol: '', + location: 'TabBar', + chain_id: getDecimalChainId(chainId), + }); }; const onBuy = () => { sheetRef.current?.onCloseBottomSheet(() => { navigate(Routes.RAMP.BUY); - Analytics.trackEventWithParameters(MetaMetricsEvents.BUY_BUTTON_CLICKED, { + trackEvent(MetaMetricsEvents.BUY_BUTTON_CLICKED, { text: 'Buy', location: 'TabBar', chain_id_destination: getDecimalChainId(chainId), @@ -84,29 +82,23 @@ const WalletActions = () => { const onSell = () => { sheetRef.current?.onCloseBottomSheet(() => { navigate(Routes.RAMP.SELL); - Analytics.trackEventWithParameters( - MetaMetricsEvents.SELL_BUTTON_CLICKED, - { - text: 'Sell', - location: 'TabBar', - chain_id_source: getDecimalChainId(chainId), - }, - ); + trackEvent(MetaMetricsEvents.SELL_BUTTON_CLICKED, { + text: 'Sell', + location: 'TabBar', + chain_id_source: getDecimalChainId(chainId), + }); }); }; const onSend = () => { sheetRef.current?.onCloseBottomSheet(() => { navigate('SendFlowView'); ticker && dispatch(newAssetTransaction(getEther(ticker))); - Analytics.trackEventWithParameters( - MetaMetricsEvents.SEND_BUTTON_CLICKED, - { - text: 'Send', - tokenSymbol: '', - location: 'TabBar', - chain_id: getDecimalChainId(chainId), - }, - ); + trackEvent(MetaMetricsEvents.SEND_BUTTON_CLICKED, { + text: 'Send', + tokenSymbol: '', + location: 'TabBar', + chain_id: getDecimalChainId(chainId), + }); }); }; @@ -118,15 +110,12 @@ const WalletActions = () => { sourceToken: swapsUtils.NATIVE_SWAPS_TOKEN_ADDRESS, }, }); - Analytics.trackEventWithParameters( - MetaMetricsEvents.SWAP_BUTTON_CLICKED, - { - text: 'Swap', - tokenSymbol: '', - location: 'TabBar', - chain_id: getDecimalChainId(chainId), - }, - ); + trackEvent(MetaMetricsEvents.SWAP_BUTTON_CLICKED, { + text: 'Swap', + tokenSymbol: '', + location: 'TabBar', + chain_id: getDecimalChainId(chainId), + }); }); }; diff --git a/app/util/metrics/DeviceAnalyticsMetaData/DeviceAnalyticsMetaData.types.ts b/app/util/metrics/DeviceAnalyticsMetaData/DeviceAnalyticsMetaData.types.ts index c21fe5ecfc1..85869dd424e 100644 --- a/app/util/metrics/DeviceAnalyticsMetaData/DeviceAnalyticsMetaData.types.ts +++ b/app/util/metrics/DeviceAnalyticsMetaData/DeviceAnalyticsMetaData.types.ts @@ -1,4 +1,7 @@ -export interface DeviceMetaData { +interface AnalyticsProperties { + [key: string]: string; +} +export interface DeviceMetaData extends AnalyticsProperties { platform: string; currentBuildNumber: string; applicationVersion: string;