UX: Add event tracking for empty banner displays (#22654)

darkwing · web-flow · commit 6db80f1b0d2a · 2024-02-08T16:04:13.000-06:00
## **Description** Adds event tracking for the new "Buy", "Receive", and "NFT" banners. ## **Related issues** Fixes: https://github.com/MetaMask/MetaMask-planning/issues/1949 ## **Manual testing steps** 1. Create a new wallet (will have 0 balance, 0 NFTs) 2. Open `ui/contexts/metametrics.js` and in the `trackEvent` function, add a `console.log` to see the events get recorded (or use Logpoints in the debugger) ## **Screenshots/Recordings** ### **Before** N/A ### **After** N/A ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] 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-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.
diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
@@ -514,6 +514,12 @@ export enum MetaMetricsEventName {
   DecryptionApproved = 'Decryption Approved',
   DecryptionRejected = 'Decryption Rejected',
   DecryptionRequested = 'Decryption Requested',
+  EmptyBuyBannerDisplayed = 'Empty Buy Banner Displayed',
+  EmptyBuyBannerClicked = 'Empty Buy Banner Clicked',
+  EmptyReceiveBannerDisplayed = 'Empty Receive Banner Displayed',
+  EmptyReceiveBannerClicked = 'Empty Receive Banner Clicked',
+  EmptyNftsBannerDisplayed = 'Empty NFTs Banner Displayed',
+  EmptyNftsBannerClicked = 'Empty NFTs Banner Clicked',
   EncryptionPublicKeyApproved = 'Encryption Approved',
   EncryptionPublicKeyRejected = 'Encryption Rejected',
   EncryptionPublicKeyRequested = 'Encryption Requested',
diff --git a/ui/components/app/asset-list/asset-list.buy-receive.test.js b/ui/components/app/asset-list/asset-list.buy-receive.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
+import { CHAIN_IDS, NETWORK_TYPES } from '../../../../shared/constants/network';
 import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
 import AssetList from './asset-list';
 
@@ -24,7 +24,7 @@ const render = (
     ...mockState,
     metamask: {
       ...mockState.metamask,
-      providerConfig: { chainId, ticker: 'ETH' },
+      providerConfig: { chainId, ticker: 'ETH', type: NETWORK_TYPES.MAINNET },
       accountsByChainId: {
         [CHAIN_IDS.MAINNET]: {
           [selectedAddress]: { balance },
@@ -44,7 +44,6 @@ describe('AssetList Buy/Receive', () => {
   useIsOriginalNativeTokenSymbol.mockReturnValue(true);
 
   it('shows Buy and Receive when the account is empty', () => {
-    process.env.MULTICHAIN = 1;
     const { queryByText } = render(
       '0xc42edfcc21ed14dda456aa0756c153f7985d8813',
       '0x0',
@@ -54,7 +53,6 @@ describe('AssetList Buy/Receive', () => {
   });
 
   it('shows only Receive when chainId is not buyable', () => {
-    process.env.MULTICHAIN = 1;
     const { queryByText } = render(
       '0xc42edfcc21ed14dda456aa0756c153f7985d8813',
       '0x0',
@@ -65,7 +63,6 @@ describe('AssetList Buy/Receive', () => {
   });
 
   it('shows neither when the account has a balance', () => {
-    process.env.MULTICHAIN = 1;
     const { queryByText } = render();
     expect(queryByText('Buy')).not.toBeInTheDocument();
     expect(queryByText('Receive')).not.toBeInTheDocument();
diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import TokenList from '../token-list';
@@ -12,7 +12,7 @@ import {
   getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
   getShouldHideZeroBalanceTokens,
   getIsBuyableChain,
-  getCurrentChainId,
+  getCurrentNetwork,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getSwapsDefaultToken,
   ///: END:ONLY_INCLUDE_IF
@@ -55,17 +55,20 @@ import {
   showSecondaryCurrency,
 } from '../../../../shared/modules/currency-display.utils';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../helpers/utils/util';
+import { ORIGIN_METAMASK } from '../../../../shared/constants/app';
+import { getCurrentLocale } from '../../../ducks/locale/locale';
 
 const AssetList = ({ onClickAsset }) => {
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const selectedAccountBalance = useSelector(getSelectedAccountCachedBalance);
   const nativeCurrency = useSelector(getNativeCurrency);
   const showFiat = useSelector(getShouldShowFiat);
-  const chainId = useSelector(getCurrentChainId);
+  const currentNetwork = useSelector(getCurrentNetwork);
+  const currentLocale = useSelector(getCurrentLocale);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const { ticker, type } = useSelector(getProviderConfig);
   const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
-    chainId,
+    currentNetwork.chainId,
     ticker,
     type,
   );
@@ -123,6 +126,39 @@ const AssetList = ({ onClickAsset }) => {
   const defaultSwapsToken = useSelector(getSwapsDefaultToken);
   ///: END:ONLY_INCLUDE_IF
 
+  useEffect(() => {
+    if (shouldShowBuy) {
+      trackEvent({
+        event: MetaMetricsEventName.EmptyBuyBannerDisplayed,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          chain_id: currentNetwork.chainId,
+          locale: currentLocale,
+          network: currentNetwork.nickname,
+          referrer: ORIGIN_METAMASK,
+        },
+      });
+    }
+    if (shouldShowReceive) {
+      trackEvent({
+        event: MetaMetricsEventName.EmptyReceiveBannerDisplayed,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          chain_id: currentNetwork.chainId,
+          locale: currentLocale,
+          network: currentNetwork.nickname,
+          referrer: ORIGIN_METAMASK,
+        },
+      });
+    }
+  }, [
+    shouldShowBuy,
+    shouldShowReceive,
+    trackEvent,
+    currentNetwork,
+    currentLocale,
+  ]);
+
   return (
     <>
       {detectedTokens.length > 0 &&
@@ -152,7 +188,7 @@ const AssetList = ({ onClickAsset }) => {
                     properties: {
                       location: 'Home',
                       text: 'Buy',
-                      chain_id: chainId,
+                      chain_id: currentNetwork.chainId,
                       token_symbol: defaultSwapsToken,
                     },
                   });
diff --git a/ui/components/app/asset-list/asset-list.test.js b/ui/components/app/asset-list/asset-list.test.js
@@ -3,7 +3,7 @@ import { screen, act, waitFor } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
+import { CHAIN_IDS, NETWORK_TYPES } from '../../../../shared/constants/network';
 import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
 import { getTokenSymbol } from '../../../store/actions';
 import AssetList from './asset-list';
@@ -72,7 +72,7 @@ const render = (
     ...mockState,
     metamask: {
       ...mockState.metamask,
-      providerConfig: { chainId, ticker: 'ETH' },
+      providerConfig: { chainId, ticker: 'ETH', type: NETWORK_TYPES.MAINNET },
       currencyRates: {
         ETH: {
           conversionRate: CONVERSION_RATE,
diff --git a/ui/components/app/nfts-tab/nfts-tab.js b/ui/components/app/nfts-tab/nfts-tab.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
@@ -15,7 +15,11 @@ import { SECURITY_ROUTE } from '../../../helpers/constants/routes';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useNftsCollections } from '../../../hooks/useNftsCollections';
-import { getIsMainnet, getUseNftDetection } from '../../../selectors';
+import {
+  getCurrentNetwork,
+  getIsMainnet,
+  getUseNftDetection,
+} from '../../../selectors';
 import {
   checkAndUpdateAllNftsOwnershipStatus,
   detectNfts,
@@ -26,13 +30,21 @@ import NFTsDetectionNoticeNFTsTab from '../nfts-detection-notice-nfts-tab/nfts-d
 import NftsItems from '../nfts-items';
 import { AssetListConversionButton } from '../../multichain';
 import { ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES } from '../../multichain/asset-list-conversion-button/asset-list-conversion-button';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { ORIGIN_METAMASK } from '../../../../shared/constants/app';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import { getCurrentLocale } from '../../../ducks/locale/locale';
 
 export default function NftsTab() {
   const useNftDetection = useSelector(getUseNftDetection);
   const isMainnet = useSelector(getIsMainnet);
   const history = useHistory();
   const t = useI18nContext();
   const dispatch = useDispatch();
+  const trackEvent = useContext(MetaMetricsContext);
 
   const { nftsLoading, collections, previouslyOwnedCollection } =
     useNftsCollections();
@@ -50,6 +62,23 @@ export default function NftsTab() {
 
   const hasAnyNfts = Object.keys(collections).length > 0;
   const showNftBanner = hasAnyNfts === false;
+  const currentNetwork = useSelector(getCurrentNetwork);
+  const currentLocale = useSelector(getCurrentLocale);
+  useEffect(() => {
+    if (!showNftBanner) {
+      return;
+    }
+    trackEvent({
+      event: MetaMetricsEventName.EmptyNftsBannerDisplayed,
+      category: MetaMetricsEventCategory.Navigation,
+      properties: {
+        chain_id: currentNetwork.chainId,
+        locale: currentLocale,
+        network: currentNetwork.nickname,
+        referrer: ORIGIN_METAMASK,
+      },
+    });
+  }, [showNftBanner, trackEvent, currentNetwork, currentLocale]);
 
   if (nftsLoading) {
     return <div className="nfts-tab__loading">{t('loadingNFTs')}</div>;
@@ -78,9 +107,18 @@ export default function NftsTab() {
             >
               <AssetListConversionButton
                 variant={ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES.NFT}
-                onClick={() =>
-                  global.platform.openTab({ url: ZENDESK_URLS.NFT_TOKENS })
-                }
+                onClick={() => {
+                  global.platform.openTab({ url: ZENDESK_URLS.NFT_TOKENS });
+                  trackEvent({
+                    event: MetaMetricsEventName.EmptyNftsBannerClicked,
+                    properties: {
+                      chain_id: currentNetwork.chainId,
+                      locale: currentLocale,
+                      network: currentNetwork.nickname,
+                      referrer: ORIGIN_METAMASK,
+                    },
+                  });
+                }}
               />
             </Box>
           ) : null}
diff --git a/ui/components/app/nfts-tab/nfts-tab.test.js b/ui/components/app/nfts-tab/nfts-tab.test.js
@@ -6,6 +6,7 @@ import configureStore from '../../../store/store';
 import { renderWithProvider } from '../../../../test/jest';
 import { SECURITY_ROUTE } from '../../../helpers/constants/routes';
 import { setBackgroundConnection } from '../../../store/background-connection';
+import { NETWORK_TYPES } from '../../../../shared/constants/network';
 import NftsTab from '.';
 
 const NFTS = [
@@ -164,7 +165,7 @@ const render = ({
           [chainId]: nftContracts,
         },
       },
-      providerConfig: { chainId },
+      providerConfig: { chainId, type: NETWORK_TYPES.MAINNET },
       selectedAddress,
       internalAccounts: {
         accounts: {
@@ -317,7 +318,6 @@ describe('NFT Items', () => {
 
   describe('nft conversion banner', () => {
     it('shows the NFT conversion banner when there are no NFTs', () => {
-      process.env.MULTICHAIN = 1;
       const { queryByText } = render({
         selectedAddress: ACCOUNT_1,
         nfts: [],
@@ -327,7 +327,6 @@ describe('NFT Items', () => {
     });
 
     it('does not show the NFT conversion banner when there are NFTs', () => {
-      process.env.MULTICHAIN = 1;
       const { queryByText } = render({
         selectedAddress: ACCOUNT_1,
         nfts: NFTS,
diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js
@@ -138,11 +138,19 @@ describe('Routes Component', () => {
           pendingApprovals: {},
           approvalFlows: [],
           announcements: {},
+          providerConfig: {
+            chainId: CHAIN_IDS.MAINNET,
+            ticker: 'ETH',
+            type: NETWORK_TYPES.MAINNET,
+          },
         },
         send: {
           ...mockSendState.send,
           stage: SEND_STAGES.INACTIVE,
         },
+        localeMessages: {
+          currentLocale: 'en',
+        },
       });
       const { getByTestId } = renderWithProvider(<Routes />, store);
       expect(getByTestId('account-menu-icon')).not.toBeDisabled();
