improve overlay, portfolio, and marketplace metrics (#1173)

Author: BrettCleary

src/backend/metrics/types.ts

@@ -416,6 +416,12 @@ export interface ClientUpdateDownloaded {
   sensitiveProperties?: never
 }
 
+export interface AccountDropdownPortfolioClicked {
+  event: 'Portfolio Clicked in Account Dropdown'
+  properties?: never
+  sensitiveProperties?: never
+}
+
 export type PossibleMetricPayloads =
   | MetricsOptIn
   | MetricsOptOut
@@ -458,5 +464,6 @@ export type PossibleMetricPayloads =
   | PatchingSuccess
   | PatchingFailed
   | PatchingTooSlow
+  | AccountDropdownPortfolioClicked
 
 export type PossibleMetricEventNames = PossibleMetricPayloads['event']

src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import {
   NavBarOverlay,
@@ -15,12 +15,22 @@ import { useFlags } from 'launchdarkly-react-client-sdk'
 
 export function NavBarOverlayWrapper({ appName, runner }: BrowserGameProps) {
   const location = useLocation()
-  const { pathname } = location
+  const { pathname, search } = location
   const [collapsed, setCollapsed] = useState(false)
   const { t } = useTranslation()
   const comingSoonText = t('overlay.comingSoon', 'Coming Soon')
   const flags = useFlags()
 
+  const searchParams = new URLSearchParams(search)
+  const urlQueryParam = searchParams.get('url')
+
+  useEffect(() => {
+    window.api.trackScreen('Overlay Page', {
+      pathname: pathname === '/' ? '/quests' : pathname,
+      url: urlQueryParam ?? undefined
+    })
+  }, [pathname])
+
   const linkItems: NavBarOverlayProps['linkItems'] = [
     <NavItem
       title={'Quests'}

src/frontend/components/UI/AccountDropdown/index.tsx

@@ -114,6 +114,11 @@ const WalletDropdown: React.FC = observer(() => {
                   ? 'topElementWalletDropdown'
                   : undefined
               }
+              onClick={async () =>
+                window.api.trackEvent({
+                  event: 'Portfolio Clicked in Account Dropdown'
+                })
+              }
             >
               <div className={`body ${styles.itemContents}`}>
                 {t('hyperplay.viewPortfolio', `View portfolio`)}

src/frontend/screens/MetaMaskPortfolio/index.tsx

@@ -1,12 +1,32 @@
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import MetaMaskPortfolioStyles from './index.module.scss'
 import { useParams } from 'react-router-dom'
 import { getMetaMaskPortfolioPageUrl } from 'common/constants'
+import { DidNavigateInPageEvent, WebviewTag } from 'electron'
 
 const MetaMaskPortfolio = function () {
   const trueAsStr = 'true' as unknown as boolean | undefined
   const { page = '' } = useParams() as { page: string }
-  const webviewRef = useRef<HTMLWebViewElement>(null)
+  const webviewRef = useRef<WebviewTag>(null)
+
+  useEffect(() => {
+    const handleNavigation = (e: DidNavigateInPageEvent) => {
+      const url = new URL(e.url)
+      window.api.trackScreen('MetaMask Portfolio', {
+        pathname: url.pathname
+      })
+    }
+    webviewRef.current?.addEventListener(
+      'did-navigate-in-page',
+      handleNavigation
+    )
+    return () => {
+      webviewRef.current?.removeEventListener(
+        'did-navigate-in-page',
+        handleNavigation
+      )
+    }
+  }, [webviewRef])
 
   return (
     <>