Create useTrackEvents hook (#656)

Ref #654 

Transform `TrackEvents` component into `useTrackEvents` hook

package.json

@@ -38,6 +38,7 @@
     "os-browserify": "^0.3.0",
     "patch-package": "^8.0.0",
     "path-browserify": "^1.0.1",
+    "posthog-js": "^1.88.2",
     "postinstall-postinstall": "^2.1.0",
     "process": "^0.11.10",
     "raf-schd": "^4.0.3",
@@ -77,7 +78,6 @@
     "eslint-plugin-import": "^2.28.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
-    "posthog-js": "^1.85.3",
     "prettier": "^2.8.1",
     "typescript": "^5.0.2",
     "webpack": "^5.88.1",

src/index.tsx

@@ -3,10 +3,8 @@ import ReactDOM from "react-dom/client"
 import { Web3OnboardProvider } from "@web3-onboard/react"
 import { Provider } from "react-redux"
 import web3Onboard from "shared/utils/web3Onboard"
-// Unfortunately the PostHog React package structure does not play nice with
-// no-extraneous-dependencies.
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { PostHogProvider } from "posthog-js/react"
+import { BrowserRouter as Router } from "react-router-dom"
 import DApp from "ui/DApps"
 import reduxStore from "./redux-state"
 
@@ -31,7 +29,9 @@ function DAppProviders() {
             },
           }}
         >
-          <DApp />
+          <Router>
+            <DApp />
+          </Router>
         </PostHogProvider>
       </Web3OnboardProvider>
     </Provider>

src/shared/hooks/helpers.ts

@@ -4,6 +4,8 @@ import { debounce } from "lodash"
 import { useSpring } from "@react-spring/web"
 import { getWindowDimensions } from "shared/utils"
 import { MOBILE_BREAKPOINT } from "shared/constants"
+import { usePostHog } from "posthog-js/react"
+import { useLocation } from "react-router-dom"
 
 type VoidFn = () => unknown
 
@@ -233,3 +235,17 @@ export function useMobileScreen() {
 
   return width < MOBILE_BREAKPOINT
 }
+
+export function useTrackEvents() {
+  const location = useLocation()
+  const posthog = usePostHog()
+  const isMobile = useMobileScreen()
+
+  useEffect(() => {
+    posthog?.capture("$pageview", {
+      url: location.pathname,
+      data: { isMobile },
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

src/ui/DApps/DesktopDApp.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from "react"
-import { BrowserRouter as Router, useLocation } from "react-router-dom"
+import React from "react"
 
 import {
   useBalanceFetch,
@@ -12,24 +11,9 @@ import {
   useWalletOnboarding,
 } from "shared/hooks"
 import Onboarding from "ui/Onboarding"
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { usePostHog } from "posthog-js/react"
 import PrivacyPolicy from "../../shared/components/PrivacyPolicy"
 import IslandView from "./IslandView"
 
-function TrackEvents({ children }: { children: ReactNode[] }) {
-  const location = useLocation()
-  const posthog = usePostHog()
-
-  useEffect(() => {
-    posthog?.capture("$pageview", { url: location.pathname })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return children
-}
-
 export default function DesktopDApp() {
   const { walletOnboarded } = useWalletOnboarding()
   const { isConnected } = useConnect()
@@ -42,12 +26,10 @@ export default function DesktopDApp() {
   useWalletChange()
 
   return (
-    <Router>
-      <TrackEvents>
-        {!walletOnboarded && <Onboarding />}
-        {walletOnboarded && isConnected && <IslandView />}
-        <PrivacyPolicy />
-      </TrackEvents>
-    </Router>
+    <>
+      {!walletOnboarded && <Onboarding />}
+      {walletOnboarded && isConnected && <IslandView />}
+      <PrivacyPolicy />
+    </>
   )
 }

src/ui/DApps/index.tsx

@@ -1,11 +1,12 @@
 import React from "react"
-import { useMobileScreen } from "shared/hooks"
+import { useMobileScreen, useTrackEvents } from "shared/hooks"
 import GlobalStyles from "ui/GlobalStyles"
 import MobileDApp from "./MobileDApp"
 import DesktopDApp from "./DesktopDApp"
 
 export default function DApp() {
   const isMobileScreen = useMobileScreen()
+  useTrackEvents()
 
   return (
     <>

yarn.lock

@@ -8072,10 +8072,10 @@ pngjs@^5.0.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
   integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
 
-posthog-js@^1.85.3:
-  version "1.85.3"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.85.3.tgz#540f26d224b1a345a226d8f105f442bbeb5eb91a"
-  integrity sha512-RHWLDamFU1k4SjolS/DWr8tYbuWQaJUJywxlKTUJp/ESIe9bJz9SkWuDNqgTV58fJnxdjCCtD89o+gMimfOSGw==
+posthog-js@^1.88.2:
+  version "1.88.2"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.88.2.tgz#be1f0a9df6cf462886a8168b7d957e72a8df4986"
+  integrity sha512-lwYQMIvOmC1K+Y+8lMF+QnGIPMZsVvtZ28YxZrRlDrTlwVGt+/Is5BtD/25AUuU7KE1zNIBxmrXSEiNJrN1OiA==
   dependencies:
     fflate "^0.4.1"