fix: update notifications events (#26807) (#26924)

This PR updates or corrects the events related to notifications. The events have also been updated in the Segment repository. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26807?quickstart=1) Fixes: To test these new events, you can follow the standard procedure outlined in the README file. N/A N/A N/A - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.  ## **Description**  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26924?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.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.
MetaMask · Sep 4, 2024 · 2c93db9 · 2c93db9
1 parent 947095c
commit 2c93db9
Show file tree

Hide file tree

Showing 28 changed files with 260 additions and 100 deletions.
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -1451,9 +1451,9 @@ export default class MetamaskController extends EventEmitter {
       (notification) => {
         this.metaMetricsController.trackEvent({
           category: MetaMetricsEventCategory.PushNotifications,
-          event: MetaMetricsEventName.NotificationReceived,
+          event: MetaMetricsEventName.PushNotificationReceived,
           properties: {
-            notification_channel: 'push',
+            notification_id: notification.id,
             notification_type: notification.type,
             chain_id: notification?.chain_id,
           },
@@ -1465,13 +1465,11 @@ export default class MetamaskController extends EventEmitter {
       (notification) => {
         this.metaMetricsController.trackEvent({
           category: MetaMetricsEventCategory.PushNotifications,
-          event: MetaMetricsEventName.NotificationClicked,
+          event: MetaMetricsEventName.PushNotificationClicked,
           properties: {
             notification_id: notification.id,
             notification_type: notification.type,
             chain_id: notification?.chain_id,
-            notification_is_read: notification.isRead,
-            click_type: 'push_notification',
           },
         });
       },

diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
@@ -703,10 +703,13 @@ export enum MetaMetricsEventName {
   TurnOnMetaMetrics = 'MetaMetrics Turned On',
   TurnOffMetaMetrics = 'MetaMetrics Turned Off',
   // Notifications
-  NotificationReceived = 'Notification Received',
-  NotificationsSettingsUpdated = 'Notifications Settings Updated',
   NotificationClicked = 'Notification Clicked',
-  NotificationMenuOpened = 'Notification Menu Opened',
+  NotificationDetailClicked = 'Notification Detail Clicked',
+  NotificationsMenuOpened = 'Notifications Menu Opened',
+  NotificationsSettingsUpdated = 'Notifications Settings Updated',
+  NotificationsActivated = 'Notifications Activated',
+  PushNotificationReceived = 'Push Notification Received',
+  PushNotificationClicked = 'Push Notification Clicked',
 
   // Send
   sendAssetSelected = 'Send Asset Selected',
@@ -749,6 +752,7 @@ export enum MetaMetricsEventCategory {
   Network = 'Network',
   Onboarding = 'Onboarding',
   NotificationInteraction = 'Notification Interaction',
+  NotificationsActivationFlow = 'Notifications Activation Flow',
   NotificationSettings = 'Notification Settings',
   Petnames = 'Petnames',
   Phishing = 'Phishing',

diff --git a/test/e2e/tests/metrics/wallet-created.spec.js b/test/e2e/tests/metrics/wallet-created.spec.js
@@ -88,7 +88,6 @@ describe('Wallet Created Events @no-mmi', function () {
           chain_id: '0x539',
           environment_type: 'fullscreen',
           is_profile_syncing_enabled: null,
-          is_signed_in: false,
         });
       },
     );

diff --git a/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx b/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx
@@ -61,24 +61,22 @@ export default function TurnOnMetamaskNotifications() {
     setButtonState(true);
     await createNotifications();
     trackEvent({
-      category: MetaMetricsEventCategory.NotificationInteraction,
-      event: MetaMetricsEventName.NotificationMenuOpened,
+      category: MetaMetricsEventCategory.NotificationsActivationFlow,
+      event: MetaMetricsEventName.NotificationsActivated,
       properties: {
-        is_profile_syncing_enabled: isProfileSyncingEnabled,
-        is_notifications_enabled: isNotificationEnabled,
-        action_type: 'enabled',
+        is_profile_syncing_enabled: true,
+        action_type: 'activated',
       },
     });
   };
 
   const handleHideModal = () => {
     hideModal();
     trackEvent({
-      category: MetaMetricsEventCategory.NotificationInteraction,
-      event: MetaMetricsEventName.NotificationMenuOpened,
+      category: MetaMetricsEventCategory.NotificationsActivationFlow,
+      event: MetaMetricsEventName.NotificationsActivated,
       properties: {
         is_profile_syncing_enabled: isProfileSyncingEnabled,
-        is_notifications_enabled: isNotificationEnabled,
         action_type: 'dismissed',
       },
     });

diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js
@@ -2,7 +2,10 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { useCounter } from '../../../hooks/metamask-notifications/useCounter';
+import {
+  useUnreadNotificationsCounter,
+  useReadNotificationsCounter,
+} from '../../../hooks/metamask-notifications/useCounter';
 import { NotificationsTagCounter } from '../notifications-tag-counter';
 import { NewFeatureTag } from '../../../pages/notifications/NewFeatureTag';
 import {
@@ -80,7 +83,8 @@ export const GlobalMenu = ({ closeMenu, anchorElement, isOpen }) => {
 
   const history = useHistory();
 
-  const { notificationsCount } = useCounter();
+  const { notificationsUnreadCount } = useUnreadNotificationsCounter();
+  const { notificationsReadCount } = useReadNotificationsCounter();
 
   const account = useSelector(getSelectedInternalAccount);
 
@@ -144,11 +148,11 @@ export const GlobalMenu = ({ closeMenu, anchorElement, isOpen }) => {
 
     if (shouldShowEnableModal) {
       trackEvent({
-        category: MetaMetricsEventCategory.NotificationInteraction,
-        event: MetaMetricsEventName.NotificationMenuOpened,
+        category: MetaMetricsEventCategory.NotificationsActivationFlow,
+        event: MetaMetricsEventName.NotificationsActivated,
         properties: {
+          action_type: 'started',
           is_profile_syncing_enabled: isProfileSyncingEnabled,
-          is_notifications_enabled: isMetamaskNotificationsEnabled,
         },
       });
       dispatch(showConfirmTurnOnMetamaskNotifications());
@@ -160,10 +164,10 @@ export const GlobalMenu = ({ closeMenu, anchorElement, isOpen }) => {
     // Otherwise we can navigate to the notifications page
     trackEvent({
       category: MetaMetricsEventCategory.NotificationInteraction,
-      event: MetaMetricsEventName.NotificationMenuOpened,
+      event: MetaMetricsEventName.NotificationsMenuOpened,
       properties: {
-        is_profile_syncing_enabled: isProfileSyncingEnabled,
-        is_notifications_enabled: isMetamaskNotificationsEnabled,
+        unread_count: notificationsUnreadCount,
+        read_count: notificationsReadCount,
       },
     });
     history.push(NOTIFICATIONS_ROUTE);
@@ -198,7 +202,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement, isOpen }) => {
               justifyContent={JustifyContent.spaceBetween}
             >
               {t('notifications')}
-              {notificationsCount === 0 &&
+              {notificationsUnreadCount === 0 &&
                 !isMetamaskNotificationFeatureSeen && <NewFeatureTag />}
               <NotificationsTagCounter />
             </Box>

diff --git a/ui/components/multichain/notification-detail-button/notification-detail-button.tsx b/ui/components/multichain/notification-detail-button/notification-detail-button.tsx
@@ -38,15 +38,14 @@ export const NotificationDetailButton = ({
   const onClick = () => {
     trackEvent({
       category: MetaMetricsEventCategory.NotificationInteraction,
-      event: MetaMetricsEventName.NotificationClicked,
+      event: MetaMetricsEventName.NotificationDetailClicked,
       properties: {
         notification_id: notification.id,
         notification_type: notification.type,
         ...(notification.type !== TRIGGER_TYPES.FEATURES_ANNOUNCEMENT && {
           chain_id: notification?.chain_id,
         }),
-        notification_is_read: notification.isRead,
-        click_type: 'detail',
+        clicked_item: 'block_explorer',
       },
     });
   };

diff --git a/ui/components/multichain/notification-detail-copy-button/notification-detail-copy-button.tsx b/ui/components/multichain/notification-detail-copy-button/notification-detail-copy-button.tsx
@@ -1,5 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import type { FC } from 'react';
+import type { Notification } from '../../../../app/scripts/controllers/metamask-notifications/types/types';
+import { TRIGGER_TYPES } from '../../../../app/scripts/controllers/metamask-notifications/constants/notification-schema';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
 import {
   ButtonBase,
   IconName,
@@ -20,6 +27,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MINUTE } from '../../../../shared/constants/time';
 
 export type NotificationDetailCopyButtonProps = {
+  notification?: Notification;
   text: string;
   displayText: string;
   color?: TextColor;
@@ -30,25 +38,50 @@ export type NotificationDetailCopyButtonProps = {
  * The button includes a tooltip that displays a message based on whether the text has been copied or not.
  *
  * @param props - The component props.
+ * @param props.notification - The notification object.
  * @param props.text - The text to be copied when the button is clicked.
  * @param props.displayText - The text to be displayed on the button.
  * @param [props.color] - The color of the text.
  * @returns The rendered component.
  */
 export const NotificationDetailCopyButton: FC<
   NotificationDetailCopyButtonProps
-> = ({ text, displayText, color = TextColor.textAlternative }): JSX.Element => {
+> = ({
+  notification,
+  text,
+  displayText,
+  color = TextColor.textAlternative,
+}): JSX.Element => {
   const [copied, handleCopy] = useCopyToClipboard(MINUTE);
   const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
 
   const tooltipText = copied ? t('copiedExclamation') : t('copyToClipboard');
   const tooltipTitle = tooltipText;
 
+  const onClick = () => {
+    typeof handleCopy === 'function' && handleCopy(text);
+    if (notification) {
+      trackEvent({
+        category: MetaMetricsEventCategory.NotificationInteraction,
+        event: MetaMetricsEventName.NotificationDetailClicked,
+        properties: {
+          notification_id: notification.id,
+          notification_type: notification.type,
+          ...(notification.type !== TRIGGER_TYPES.FEATURES_ANNOUNCEMENT && {
+            chain_id: notification?.chain_id,
+          }),
+          clicked_item: 'tx_id',
+        },
+      });
+    }
+  };
+
   return (
     <Tooltip position="bottom" title={tooltipTitle}>
       <ButtonBase
         backgroundColor={BackgroundColor.transparent}
-        onClick={() => typeof handleCopy === 'function' && handleCopy(text)}
+        onClick={onClick}
         paddingRight={0}
         paddingLeft={0}
         variant={TextVariant.bodyMd}

diff --git a/ui/components/multichain/notification-detail-network-fee/notification-detail-network-fee.tsx b/ui/components/multichain/notification-detail-network-fee/notification-detail-network-fee.tsx
@@ -1,14 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import type { FC } from 'react';
 import type { OnChainRawNotificationsWithNetworkFields } from '../../../../app/scripts/controllers/metamask-notifications/types/on-chain-notification/on-chain-notification';
 
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   getNetworkFees,
   getNetworkDetailsByChainId,
 } from '../../../helpers/utils/notification.util';
 import { decimalToHex } from '../../../../shared/modules/conversion.utils';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
 
 import { NotificationDetail } from '../notification-detail';
 import {
@@ -83,6 +88,7 @@ export const NotificationDetailNetworkFee: FC<
   NotificationDetailNetworkFeeProps
 > = ({ notification }) => {
   const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [networkFees, setNetworkFees] = useState<NetworkFees>(null);
   const [networkFeesError, setNetworkFeesError] = useState<boolean>(false);
@@ -119,6 +125,18 @@ export const NotificationDetailNetworkFee: FC<
   }, []);
 
   const handleClick = () => {
+    if (!isOpen) {
+      trackEvent({
+        category: MetaMetricsEventCategory.NotificationInteraction,
+        event: MetaMetricsEventName.NotificationDetailClicked,
+        properties: {
+          notification_id: notification.id,
+          notification_type: notification.type,
+          chain_id: notification.chain_id,
+          clicked_item: 'fee_details',
+        },
+      });
+    }
     setIsOpen(!isOpen);
   };
 

diff --git a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx b/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCounter } from '../../../hooks/metamask-notifications/useCounter';
+import { useUnreadNotificationsCounter } from '../../../hooks/metamask-notifications/useCounter';
 import { Box, Text } from '../../component-library';
 import {
   BackgroundColor,
@@ -18,9 +18,9 @@ type NotificationsTagCounterProps = {
 export const NotificationsTagCounter = ({
   noLabel = false,
 }: NotificationsTagCounterProps) => {
-  const { notificationsCount } = useCounter();
+  const { notificationsUnreadCount } = useUnreadNotificationsCounter();
 
-  if (notificationsCount === 0) {
+  if (notificationsUnreadCount === 0) {
     return null;
   }
 
@@ -50,7 +50,7 @@ export const NotificationsTagCounter = ({
           className="notifications-tag-counter__unread-dot"
           textAlign={TextAlign.Center}
         >
-          {notificationsCount > 10 ? '9+' : notificationsCount}
+          {notificationsUnreadCount > 10 ? '9+' : notificationsUnreadCount}
         </Text>
       </Box>
     );
@@ -72,7 +72,7 @@ export const NotificationsTagCounter = ({
         className="notifications-tag-counter__text"
         textAlign={TextAlign.Center}
       >
-        {notificationsCount > 10 ? '9+' : notificationsCount}
+        {notificationsUnreadCount > 10 ? '9+' : notificationsUnreadCount}
       </Text>
     </Box>
   );

diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
@@ -137,8 +137,8 @@ const PATH_NAME_MAP = {
   [CONFIRM_ADD_SUGGESTED_NFT_ROUTE]: 'Confirm Add Suggested NFT Page',
   [CONNECT_HARDWARE_ROUTE]: 'Connect Hardware Wallet Page',
   [NOTIFICATIONS_ROUTE]: 'Notifications Page',
-  [`${NOTIFICATIONS_ROUTE}/:uuid`]: 'Notification Detail Page',
   [NOTIFICATIONS_SETTINGS_ROUTE]: 'Notifications Settings Page',
+  [`${NOTIFICATIONS_ROUTE}/:uuid`]: 'Notification Detail Page',
   [`${CONNECT_ROUTE}/:id${CONNECT_SNAPS_CONNECT_ROUTE}`]: 'Snaps Connect Page',
   [`${CONNECT_ROUTE}/:id${CONNECT_SNAP_INSTALL_ROUTE}`]: 'Snap Install Page',
   [`${CONNECT_ROUTE}/:id${CONNECT_SNAP_UPDATE_ROUTE}`]: 'Snap Update Page',