From eada60ca6bb48212b95c821dd4ebec8e84530dd2 Mon Sep 17 00:00:00 2001 From: EtherWizard33 <165834542+EtherWizard33@users.noreply.github.com> Date: Wed, 25 Sep 2024 15:39:00 -0400 Subject: [PATCH] feat(3299): add tracking to network switching and confirmation (#11386) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Adds tracking to the user requesting network switching as well as his press of the confirmation button. ## **Related issues** Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3299 ## **Manual testing steps** 1. Go to the in app browser and open have a connected dapp for example to ethereum main net 2. In the dapp select to change network, the modal will come up, thats when the tracking event if fire for user requesting a network change 3. Confirm the network change by pressing the button, this corresponds to the confirm pressed tracked event ## **Screenshots/Recordings** #### Mixpanel logs for the two events Mixpanel logs for the two events #### Network Switch Requested and Modal Shown | Interaction | Tracked event | |--------------|--------------| | Screenshot 2024-04-18 at 3 56 43 PM |Screenshot 2024-04-18 at 3 56 43 PM | #### Network Switch Confirm Pressed | **Interaction** | **Tracked event** | |--------------|--------------| | Screenshot 2024-04-18 at 3 56 43 PM |Screenshot 2024-04-18 at 3 56 43 PM | ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../UI/SwitchCustomNetwork/index.js | 32 +++++++++++++++++-- .../UI/SwitchCustomNetwork/index.test.tsx | 16 ++++++++++ app/core/Analytics/MetaMetrics.events.ts | 8 +++++ 3 files changed, 54 insertions(+), 2 deletions(-) diff --git a/app/components/UI/SwitchCustomNetwork/index.js b/app/components/UI/SwitchCustomNetwork/index.js index 1a3bf3eaea2..f6f63cf3e87 100644 --- a/app/components/UI/SwitchCustomNetwork/index.js +++ b/app/components/UI/SwitchCustomNetwork/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; import PropTypes from 'prop-types'; import StyledButton from '../StyledButton'; import { StyleSheet, View } from 'react-native'; @@ -8,8 +8,14 @@ import Device from '../../../util/device'; import Text from '../../Base/Text'; import { useTheme } from '../../../util/theme'; import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors'; -import { isMultichainVersion1Enabled } from '../../../util/networks'; +import { + isMultichainVersion1Enabled, + getDecimalChainId, +} from '../../../util/networks'; import PermissionSummary from '../PermissionsSummary'; +import { MetaMetricsEvents } from '../../../core/Analytics'; +import { useNetworkInfo } from '../../../selectors/selectedNetworkController'; +import { useMetrics } from '../../../components/hooks/useMetrics'; const createStyles = (colors) => StyleSheet.create({ @@ -90,11 +96,33 @@ const SwitchCustomNetwork = ({ }) => { const { colors } = useTheme(); const styles = createStyles(colors); + const { trackEvent } = useMetrics(); + + const { networkName } = useNetworkInfo( + new URL(currentPageInformation.url).hostname, + ); + + const trackingData = useMemo( + () => ({ + chain_id: getDecimalChainId(customNetworkInformation.chainId), + from_network: networkName, + to_network: customNetworkInformation.chainName, + }), + [customNetworkInformation, networkName], + ); + + useEffect(() => { + trackEvent( + MetaMetricsEvents.NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN, + trackingData, + ); + }, [trackEvent, trackingData]); /** * Calls onConfirm callback and analytics to track connect confirmed event */ const confirm = () => { + trackEvent(MetaMetricsEvents.NETWORK_SWITCH_CONFIRM_PRESSED, trackingData); onConfirm && onConfirm(); }; diff --git a/app/components/UI/SwitchCustomNetwork/index.test.tsx b/app/components/UI/SwitchCustomNetwork/index.test.tsx index daec075e1e3..4a338b39b96 100644 --- a/app/components/UI/SwitchCustomNetwork/index.test.tsx +++ b/app/components/UI/SwitchCustomNetwork/index.test.tsx @@ -1,13 +1,29 @@ import React from 'react'; import SwitchCustomNetwork from './'; import renderWithProvider from '../../../util/test/renderWithProvider'; +import { backgroundState } from '../../../util/test/initial-root-state'; +import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils'; + +const mockInitialState = { + wizard: { + step: 1, + }, + engine: { + backgroundState: { + ...backgroundState, + AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE, + }, + }, +}; describe('SwitchCustomNetwork', () => { it('should render correctly', () => { const { toJSON } = renderWithProvider( , + { state: mockInitialState }, ); expect(toJSON()).toMatchSnapshot(); }); diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts index 0a61dbc6f16..5b972ea1130 100644 --- a/app/core/Analytics/MetaMetrics.events.ts +++ b/app/core/Analytics/MetaMetrics.events.ts @@ -80,6 +80,8 @@ enum EVENT_NAME { // Network NETWORK_SWITCHED = 'Network Switched', + NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN = 'Network Switch Requested and Modal Shown', + NETWORK_SWITCH_CONFIRM_PRESSED = 'Network Switch Confirm Pressed', NETWORK_ADDED = 'Network Added', NETWORK_REQUESTED = 'Network Requested', NETWORK_REQUEST_REJECTED = 'Network Request Rejected', @@ -482,6 +484,12 @@ const events = { COLLECTIBLE_REMOVED: generateOpt(EVENT_NAME.COLLECTIBLE_REMOVED), CURRENCY_CHANGED: generateOpt(EVENT_NAME.CURRENCY_CHANGED), NETWORK_SWITCHED: generateOpt(EVENT_NAME.NETWORK_SWITCHED), + NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN: generateOpt( + EVENT_NAME.NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN, + ), + NETWORK_SWITCH_CONFIRM_PRESSED: generateOpt( + EVENT_NAME.NETWORK_SWITCH_CONFIRM_PRESSED, + ), NETWORK_ADDED: generateOpt(EVENT_NAME.NETWORK_ADDED), NETWORK_REQUESTED: generateOpt(EVENT_NAME.NETWORK_REQUESTED), NETWORK_REQUEST_REJECTED: generateOpt(EVENT_NAME.NETWORK_REQUEST_REJECTED),