Added metrics for adding a new network (#15176)

* Added metrics for adding a new network

* Applied requested changes

* Added missed changes

app/scripts/lib/rpc-method-middleware/handlers/add-ethereum-chain.js

@@ -267,9 +267,8 @@ async function addEthereumChainHandler(
       referrer: {
         url: origin,
       },
-      sensitiveProperties: {
+      properties: {
         chain_id: _chainId,
-        rpc_url: firstValidRPCUrl,
         network_name: _chainName,
         // Including network to override the default network
         // property included in all events. For RPC type networks
@@ -280,6 +279,9 @@ async function addEthereumChainHandler(
         block_explorer_url: firstValidBlockExplorerUrl,
         source: EVENT.SOURCE.TRANSACTION.DAPP,
       },
+      sensitiveProperties: {
+        rpc_url: firstValidRPCUrl,
+      },
     });
 
     // Once the network has been added, the requested is considered successful

app/scripts/metamask-controller.js

@@ -2064,6 +2064,25 @@ export default class MetamaskController extends EventEmitter {
         blockExplorerUrl,
       },
     );
+
+    this.metaMetricsController.trackEvent({
+      event: 'Custom Network Added',
+      category: EVENT.CATEGORIES.NETWORK,
+      referrer: {
+        url: rpcUrl,
+      },
+      properties: {
+        chain_id: chainId,
+        network_name: chainName,
+        network: rpcUrl,
+        symbol: ticker,
+        block_explorer_url: blockExplorerUrl,
+        source: EVENT.SOURCE.NETWORK.POPULAR_NETWORK_LIST,
+      },
+      sensitiveProperties: {
+        rpc_url: rpcUrl,
+      },
+    });
   }
 
   /**

shared/constants/metametrics.js

@@ -305,6 +305,10 @@ export const EVENT = {
     WALLET: 'Wallet',
   },
   SOURCE: {
+    NETWORK: {
+      POPULAR_NETWORK_LIST: 'popular_network_list',
+      CUSTOM_NETWORK_FORM: 'custom_network_form',
+    },
     SWAPS: {
       MAIN_VIEW: 'Main View',
       TOKEN_VIEW: 'Token View',

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -28,6 +34,8 @@ import {
 } from '../../../../helpers/constants/routes';
 import fetchWithCache from '../../../../helpers/utils/fetch-with-cache';
 import { usePrevious } from '../../../../hooks/usePrevious';
+import { MetaMetricsContext } from '../../../../contexts/metametrics';
+import { EVENT } from '../../../../../shared/constants/metametrics';
 
 /**
  * Attempts to convert the given chainId to a decimal string, for display
@@ -73,6 +81,7 @@ const NetworksForm = ({
   selectedNetwork,
 }) => {
   const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
   const history = useHistory();
   const dispatch = useDispatch();
   const { label, labelKey, viewOnly, rpcPrefs } = selectedNetwork;
@@ -496,6 +505,24 @@ const NetworksForm = ({
       }
 
       if (addNewNetwork) {
+        trackEvent({
+          event: 'Custom Network Added',
+          category: EVENT.CATEGORIES.NETWORK,
+          referrer: {
+            url: rpcUrl,
+          },
+          properties: {
+            chain_id: chainId,
+            network_name: networkName,
+            network: rpcUrl,
+            symbol: ticker,
+            block_explorer_url: blockExplorerUrl,
+            source: EVENT.SOURCE.NETWORK.CUSTOM_NETWORK_FORM,
+          },
+          sensitiveProperties: {
+            rpc_url: rpcUrl,
+          },
+        });
         dispatch(setNewNetworkAdded(networkName));
         history.push(DEFAULT_ROUTE);
       }