Devop/amplitude for new network UI

packages/extension/src/libs/metrics/index.ts

@@ -7,6 +7,7 @@ import {
   GenericEvents,
   NFTEventType,
   NetworkChangeEvents,
+  NetworkType,
   SendEventType,
   SettingEventType,
   SwapEventType,
@@ -18,9 +19,24 @@ const trackGenericEvents = (event: GenericEvents) => {
   metrics.track('generic', { event });
 };
 
-const trackNetworkSelected = (
+const trackNetwork = (
   event: NetworkChangeEvents,
-  options: { provider: ProviderName; network: NetworkNames },
+  options: {
+    provider?: ProviderName;
+    network?: NetworkNames,
+    networkTab?: string,
+    networkType?: NetworkType,
+    isPinned?: boolean,
+    sortOption?: string,
+    customRpcUrl?: string,
+    customNetworkName?: string,
+    customNetworkNameLong?: string,
+    customNetworkCurrency?: string,
+    customNetworkCurrencyLong?: string,
+    customChainId?: string,
+    customBlockExplorerUrlTx?: string
+    customBlockExplorerUrlAddr?: string
+  },
 ) => {
   metrics.track('network', { event, ...options });
 };
@@ -87,7 +103,7 @@ const optOutofMetrics = (optOut: boolean) => {
 };
 
 export {
-  trackNetworkSelected,
+  trackNetwork,
   trackSwapEvents,
   trackBuyEvents,
   trackSendEvents,

packages/extension/src/libs/metrics/types.ts

@@ -13,9 +13,23 @@ export enum GenericEvents {
   login_error = 'login_error',
 }
 
+export enum NetworkType {
+  Regular = 'regular',
+  Custom = 'custom',
+  Testnet = 'testnet',
+}
+
 export enum NetworkChangeEvents {
   NetworkChangePopup = 'network_change_popup',
   NetworkChangeAPI = 'network_change_api',
+  NetworkTabsClicked = 'network_tabs_clicked',
+  NetworkPinnedStatusChanged = 'network_pinned_status_changed',
+  NetworkActiveChanged = 'network_active_changed',
+  NetworkSortOptionChanged = 'network_sort_option_changed',
+  NetworkAddCustomClicked = 'network_add_custom_clicked',
+  NetworkCustomNetworkAdded = 'network_custom_network_added',
+  NetworkDeleteCustomNetwork = 'network_delete_custom_network',
+  NetworkCustomBackButton = 'network_custom_back_button',
 }
 
 export enum BuyEventType {

packages/extension/src/providers/bitcoin/methods/btc_switchNetwork.ts

@@ -7,7 +7,7 @@ import BTCNetworks from '../networks';
 import DomainState from '@/libs/domain-state';
 import BitcoinProvider from '..';
 import { BitcoinNetworks } from '../types';
-import { trackNetworkSelected } from '@/libs/metrics';
+import { trackNetwork } from '@/libs/metrics';
 import { NetworkChangeEvents } from '@/libs/metrics/types';
 const method: MiddlewareFunction = function (
   this: BitcoinProvider,
@@ -29,7 +29,7 @@ const method: MiddlewareFunction = function (
     const allNetworks = Object.values(BTCNetworks);
     const validNetwork = allNetworks.find(net => net.name === internalName);
     if (validNetwork) {
-      trackNetworkSelected(NetworkChangeEvents.NetworkChangeAPI, {
+      trackNetwork(NetworkChangeEvents.NetworkChangeAPI, {
         provider: validNetwork.provider,
         network: validNetwork.name,
       });
@@ -49,8 +49,7 @@ const method: MiddlewareFunction = function (
     } else {
       return res(
         getCustomError(
-          `btc_switchNetwork: porvided network ${
-            payload.params![0]
+          `btc_switchNetwork: porvided network ${payload.params![0]
           } not supported`,
         ),
       );

packages/extension/src/providers/ethereum/methods/wallet_addEthereumChain.ts

@@ -18,7 +18,7 @@ import { getAllNetworks } from '@/libs/utils/networks';
 import CustomNetworksState from '@/libs/custom-networks-state';
 import NetworksState from '@/libs/networks-state';
 import { EvmNetwork } from '../types/evm-network';
-import { trackNetworkSelected } from '@/libs/metrics';
+import { trackNetwork } from '@/libs/metrics';
 import { NetworkChangeEvents } from '@/libs/metrics/types';
 
 interface AddEthereumChainPayload {
@@ -128,7 +128,7 @@ const setExistingCustomNetwork = async (
     ) as EvmNetwork | undefined;
   }
   if (existingNetwork) {
-    trackNetworkSelected(NetworkChangeEvents.NetworkChangeAPI, {
+    trackNetwork(NetworkChangeEvents.NetworkChangeAPI, {
       provider: ProviderName.ethereum,
       network: existingNetwork.name as NetworkNames,
     });

packages/extension/src/providers/ethereum/methods/wallet_switchEthereumChain.ts

@@ -9,7 +9,7 @@ import DomainState from '@/libs/domain-state';
 import { getAllNetworks } from '@/libs/utils/networks';
 import { EvmNetwork } from '../types/evm-network';
 import NetworksState from '@/libs/networks-state';
-import { trackNetworkSelected } from '@/libs/metrics';
+import { trackNetwork } from '@/libs/metrics';
 import { NetworkChangeEvents } from '@/libs/metrics/types';
 
 const method: MiddlewareFunction = function (
@@ -33,7 +33,7 @@ const method: MiddlewareFunction = function (
         net => (net as EvmNetwork).chainID === payload.params![0].chainId,
       ) as EvmNetwork | undefined;
       if (validNetwork) {
-        trackNetworkSelected(NetworkChangeEvents.NetworkChangeAPI, {
+        trackNetwork(NetworkChangeEvents.NetworkChangeAPI, {
           provider: validNetwork.provider,
           network: validNetwork.name,
         });
@@ -68,8 +68,7 @@ const method: MiddlewareFunction = function (
       } else {
         return res(
           getCustomError(
-            `wallet_switchEthereumChain: provided network ${
-              payload.params![0].chainId
+            `wallet_switchEthereumChain: provided network ${payload.params![0].chainId
             } not supported`,
           ),
         );

packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue

@@ -151,7 +151,7 @@ import { u8aToHex } from '@polkadot/util';
 import ActivityState from '@/libs/activity-state';
 import Polkadot from '@/providers/polkadot/networks/polkadot';
 import { getAllNetworks } from '@/libs/utils/networks';
-import { trackNetworkSelected, trackSendEvents } from '@/libs/metrics';
+import { trackNetwork, trackSendEvents } from '@/libs/metrics';
 import { NetworkChangeEvents, SendEventType } from '@/libs/metrics/types';
 
 const windowPromise = WindowPromiseHandler(2);
@@ -194,7 +194,7 @@ onBeforeMount(async () => {
 
   if (targetNetwork) {
     network.value = targetNetwork;
-    trackNetworkSelected(NetworkChangeEvents.NetworkChangeAPI, {
+    trackNetwork(NetworkChangeEvents.NetworkChangeAPI, {
       provider: targetNetwork.provider,
       network: targetNetwork.name,
     });

packages/extension/src/ui/action/App.vue

@@ -148,7 +148,7 @@ import { EnkryptProviderEventMethods, ProviderName } from '@/types/provider';
 import { onClickOutside } from '@vueuse/core';
 import RateState from '@/libs/rate-state';
 import SwapLookingAnimation from '@action/icons/swap/swap-looking-animation.vue';
-import { trackBuyEvents, trackNetworkSelected } from '@/libs/metrics';
+import { trackBuyEvents, trackNetwork } from '@/libs/metrics';
 import { getLatestEnkryptVersion } from '@action/utils/browser';
 import { gt as semverGT } from 'semver';
 import { BuyEventType, NetworkChangeEvents } from '@/libs/metrics/types';
@@ -301,7 +301,7 @@ const updateGradient = (newGradient: string) => {
       `radial-gradient(137.35% 97% at 100% 50%, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.96) 28.91%, rgba(250, 250, 250, 0.98) 100%), linear-gradient(180deg, ${newGradient} 80%, #684CFF 100%)`;
 };
 const setNetwork = async (network: BaseNetwork) => {
-  trackNetworkSelected(NetworkChangeEvents.NetworkChangePopup, {
+  trackNetwork(NetworkChangeEvents.NetworkChangePopup, {
     provider: network.provider,
     network: network.name,
   });

packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue

@@ -58,6 +58,9 @@ import SwapAddedIcon from '@/ui/action/icons/asset/swap-added-icon.vue';
 import PinIcon from '@action/icons/actions/pin.vue';
 import DragIcon from '@action/icons/common/drag-icon.vue';
 
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents, NetworkType } from '@/libs/metrics/types';
+
 const props = defineProps({
   network: {
     type: Object as PropType<NodeType>,
@@ -177,6 +180,16 @@ watch(
  * ------------------------*/
 
 const setPinned = async () => {
+  const networkType = props.network.isTestNetwork
+    ? NetworkType.Testnet
+    : props.network.isCustomNetwork
+      ? NetworkType.Custom
+      : NetworkType.Regular;
+  trackNetwork(NetworkChangeEvents.NetworkPinnedStatusChanged, {
+    network: props.network.name,
+    networkType: networkType,
+    isPinned: !props.isPinned,
+  });
   emit('update:pinNetwork', props.network.name, !props.isPinned);
 };
 

packages/extension/src/ui/action/components/app-menu/components/app-menu-sort.vue

@@ -63,6 +63,8 @@ import {
   NetworkSortDirection,
 } from '@action/types/network-sort';
 import SortDirectionIcon from '@/ui/action/icons/actions/sort/sort-direction-icon.vue';
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents } from '@/libs/metrics/types';
 
 // Next Release Version:
 // import { onClickOutside } from '@vueuse/core';
@@ -90,6 +92,9 @@ const setActiveSort = (_sort: NetworkSortOption) => {
     // Next Release Version: update this function
     newSortBy.name = _sort;
   }
+  trackNetwork(NetworkChangeEvents.NetworkSortOptionChanged, {
+    sortOption: newSortBy.name,
+  });
   emit('update:sort', newSortBy);
 };
 

packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue

@@ -40,6 +40,8 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { NetworksCategory } from '@action/types/network-category';
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents } from '@/libs/metrics/types';
 
 defineProps({
   activeCategory: {
@@ -51,6 +53,9 @@ const emit = defineEmits<{
   (e: 'update:category', category: NetworksCategory): void;
 }>();
 const setActiveCategory = (category: NetworksCategory) => {
+  trackNetwork(NetworkChangeEvents.NetworkTabsClicked, {
+    networkTab: category,
+  });
   emit('update:category', category);
 };
 </script>

packages/extension/src/ui/action/components/app-menu/index.vue

@@ -66,6 +66,8 @@ import {
 } from '@action/types/network-sort';
 import { useScroll } from '@vueuse/core';
 import { newNetworks, newSwaps } from '@/providers/common/libs/new-features';
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents, NetworkType } from '@/libs/metrics/types';
 
 const networksState = new NetworksState();
 const props = defineProps({
@@ -114,6 +116,16 @@ const setNetwork = async (network: BaseNetwork) => {
       net => net !== network.name,
     );
   }
+
+  const networkType = network.isTestNetwork
+    ? NetworkType.Testnet
+    : network.isCustomNetwork
+      ? NetworkType.Custom
+      : NetworkType.Regular;
+  trackNetwork(NetworkChangeEvents.NetworkActiveChanged, {
+    network: network.name,
+    networkType,
+  });
   emit('update:network', network);
 };
 

packages/extension/src/ui/action/views/add-network/components/add-network-item.vue

@@ -46,6 +46,9 @@ import customNetworkIcon from '@/ui/action/icons/common/custom-network-icon.vue'
 import { NetworkNames } from '@enkryptcom/types';
 import Tooltip from '@/ui/action/components/tooltip/index.vue';
 
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents } from '@/libs/metrics/types';
+
 const emit = defineEmits<{
   (e: 'networkToggled', name: string, isActive: boolean): void;
   (e: 'networkDeleted', chainId: string): void;
@@ -85,6 +88,9 @@ const setPinned = async () => {
 const deleteNetwork = async () => {
   const chainId = (props.network as unknown as CustomEvmNetwork).chainID;
   if (chainId !== undefined) {
+    trackNetwork(NetworkChangeEvents.NetworkDeleteCustomNetwork, {
+      customChainId: chainId,
+    });
     emit('networkDeleted', chainId);
   }
 };

packages/extension/src/ui/action/views/add-network/index.vue

@@ -24,6 +24,9 @@ import { ref } from 'vue';
 import AddNetworkList from './views/add-network-list.vue';
 import AddCustomNetwork from './views/add-custom-network.vue';
 
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents } from '@/libs/metrics/types';
+
 const isNetworkList = ref(true);
 
 const emit = defineEmits<{
@@ -43,9 +46,11 @@ const closePopup = () => {
 
 const toCustomNetwork = () => {
   isNetworkList.value = false;
+  trackNetwork(NetworkChangeEvents.NetworkAddCustomClicked, {});
 };
 
 const toNetworkList = () => {
+  trackNetwork(NetworkChangeEvents.NetworkCustomBackButton, {});
   isNetworkList.value = true;
 };
 </script>

packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue

@@ -91,6 +91,9 @@ import { toHex } from 'web3-utils';
 import CustomNetworksState from '@/libs/custom-networks-state';
 import NetworksState from '@/libs/networks-state';
 
+import { trackNetwork } from '@/libs/metrics';
+import { NetworkChangeEvents } from '@/libs/metrics/types';
+
 interface NetworkConfigItem {
   name: string;
   chain: string;
@@ -263,6 +266,18 @@ const sendAction = async () => {
 
   await customNetworksState.addCustomNetwork(customNetworkOptions);
   await networksState.setNetworkStatus(customNetworkOptions.name, true);
+
+  trackNetwork(NetworkChangeEvents.NetworkCustomNetworkAdded, {
+    customRpcUrl: customNetworkOptions.node,
+    customNetworkName: customNetworkOptions.name,
+    customNetworkNameLong: customNetworkOptions.name_long,
+    customChainId: customNetworkOptions.chainID,
+    customNetworkCurrency: customNetworkOptions.currencyName,
+    customNetworkCurrencyLong: customNetworkOptions.currencyNameLong,
+    customBlockExplorerUrlTx: customNetworkOptions.blockExplorerTX,
+    customBlockExplorerUrlAddr: customNetworkOptions.blockExplorerAddr,
+  });
+
   emit('update:pinNetwork', customNetworkOptions.name, true);
   nameValue.value = '';
   symbolValue.value = '';

packages/extension/src/ui/action/views/network-assets/index.vue

@@ -21,7 +21,7 @@
             :token="item"
             :network="network"
             @update:tokens="updateAssets"
-          ></network-assets-item>
+          />
           <div
             v-show="network.customTokens && assets.length !== 0"
             class="network-assets__add-token"
@@ -37,7 +37,7 @@
         </div>
       </custom-scrollbar>
 
-      <network-assets-loading v-if="isLoading"></network-assets-loading>
+      <network-assets-loading v-if="isLoading" />
 
       <deposit
         v-if="!!props.accountInfo.selectedAccount"