fix: add desktop related events

MetaMask · Feb 24, 2023 · e396ade · e396ade
1 parent 07d5c07
commit e396ade
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/ui/components/app/desktop-enable-button/desktop-enable-button.component.js b/ui/components/app/desktop-enable-button/desktop-enable-button.component.js
@@ -19,6 +19,8 @@ import {
   disableDesktop,
 } from '../../../store/actions';
 import { SECOND } from '../../../../shared/constants/time';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { EVENT } from '../../../../shared/constants/metametrics';
 
 const DESKTOP_ERROR_DESKTOP_OUTDATED_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.DESKTOP_OUTDATED}`;
 const DESKTOP_ERROR_EXTENSION_OUTDATED_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.EXTENSION_OUTDATED}`;
@@ -30,6 +32,7 @@ export default function DesktopEnableButton() {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
   const history = useHistory();
+  const trackEvent = useContext(MetaMetricsContext);
   const showLoader = () => dispatch(showLoadingIndication());
   const hideLoader = () => dispatch(hideLoadingIndication());
   const desktopEnabled = useSelector(getIsDesktopEnabled);
@@ -81,16 +84,23 @@ export default function DesktopEnableButton() {
     history.push(DESKTOP_PAIRING_ROUTE);
   };
 
+  const getButtonText = (isDesktopEnabled) =>
+    isDesktopEnabled ? 'Disable Desktop App' : 'Enable Desktop App';
+
   return (
     <Button
       type="primary"
       large
       onClick={(event) => {
+        trackEvent({
+          category: EVENT.CATEGORIES.DESKTOP,
+          event: `${getButtonText(desktopEnabled)} Button Clicked`,
+        });
         event.preventDefault();
         onClick();
       }}
     >
-      {desktopEnabled ? t('desktopDisableButton') : t('desktopEnableButton')}
+      {getButtonText(desktopEnabled)}
     </Button>
   );
 }
diff --git a/ui/pages/desktop-error/desktop-error.component.js b/ui/pages/desktop-error/desktop-error.component.js
@@ -1,17 +1,20 @@
 import { useParams, useHistory } from 'react-router-dom';
+import { useContext } from 'react';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import {
   downloadDesktopApp,
   downloadExtension,
   restartExtension,
 } from '../../../shared/lib/error-utils';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
+import { MetaMetricsContext } from '../../contexts/metametrics';
 import { renderDesktopError } from './render-desktop-error';
 
 export default function DesktopError({ forceDisableDesktop }) {
   const t = useI18nContext();
   const { errorType } = useParams();
   const history = useHistory();
+  const trackEvent = useContext(MetaMetricsContext);
 
   return renderDesktopError({
     type: errorType,
@@ -25,5 +28,6 @@ export default function DesktopError({ forceDisableDesktop }) {
     downloadDesktopApp,
     downloadExtension,
     restartExtension,
+    trackEvent,
   });
 }
diff --git a/ui/pages/desktop-error/render-desktop-error.js b/ui/pages/desktop-error/render-desktop-error.js
@@ -16,6 +16,7 @@ import Typography from '../../components/ui/typography';
 import Button from '../../components/ui/button';
 import Box from '../../components/ui/box';
 import { openCustomProtocol } from '../../../shared/lib/deep-linking';
+import { EVENT } from '../../../shared/constants/metametrics';
 
 export function renderDesktopError({
   type,
@@ -27,6 +28,7 @@ export function renderDesktopError({
   downloadDesktopApp,
   restartExtension,
   openOrDownloadDesktopApp,
+  trackEvent,
 }) {
   let content;
 
@@ -43,6 +45,12 @@ export function renderDesktopError({
   };
 
   const renderHeader = (text) => {
+    if (typeof trackEvent === 'function') {
+      trackEvent({
+        category: EVENT.CATEGORIES.ERROR,
+        event: `Error: ${text}`,
+      });
+    }
     return (
       <Typography
         variant={TypographyVariant.H4}
@@ -64,7 +72,23 @@ export function renderDesktopError({
   const renderCTA = (id, text, onClick) => {
     return (
       <Box marginTop={6}>
-        <Button type="primary" onClick={onClick ?? noop} id={id}>
+        <Button
+          type="primary"
+          onClick={() => {
+            if (onClick) {
+              onClick();
+              if (typeof trackEvent === 'function') {
+                trackEvent({
+                  category: EVENT.CATEGORIES.DESKTOP,
+                  event: `${text} Button Clicked`,
+                });
+              }
+            } else {
+              noop();
+            }
+          }}
+          id={id}
+        >
           {text}
         </Button>
       </Box>