Merge pull request #260 from threshold-network/posthog

Posthog

This PR adds posthog data tracker. Posthog captures product's usage data
to see which users are doing what in your application. We want to run the
posthog only in production.

.env

@@ -5,3 +5,4 @@ REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=false
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
+REACT_APP_FEATURE_FLAG_POSTHOG=false

.env.production

@@ -4,3 +4,6 @@ REACT_APP_ETH_HOSTNAME_WS=$ETH_HOSTNAME_WS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=false
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
+REACT_APP_FEATURE_FLAG_POSTHOG=$POSTHOG_SUPPORT
+REACT_APP_POSTHOG_API_KEY=$POSTHOG_API_KEY
+REACT_APP_POSTHOG_HOSTNAME_HTTP=$POSTHOG_HOSTNAME_HTTP

.github/workflows/dashboard-mainnet.yml

@@ -57,6 +57,9 @@ jobs:
           CHAIN_ID: 1
           ETH_HOSTNAME_HTTP: ${{ secrets.MAINNET_ETH_HOSTNAME_HTTP }}
           ETH_HOSTNAME_WS: ${{ secrets.MAINNET_ETH_HOSTNAME_WS }}
+          POSTHOG_SUPPORT: true
+          POSTHOG_API_KEY: ${{ secrets.MAINNET_POSTHOG_API_KEY }}
+          POSTHOG_HOSTNAME_HTTP: ${{ secrets.MAINNET_POSTHOG_HOSTNAME_HTTP }}
 
       - uses: actions/upload-artifact@v3
         with:

package.json

@@ -59,6 +59,7 @@
     "formik": "^2.2.9",
     "framer-motion": "^4",
     "numeral": "^2.0.6",
+    "posthog-js": "^1.32.2",
     "random-gradient": "^0.0.2",
     "react": "^17.0.2",
     "react-confetti": "^6.0.1",

src/App.tsx

@@ -46,6 +46,7 @@ import {
   useSubscribeToOperatorRegisteredEvent,
 } from "./hooks/staking-applications"
 import { useSaveConnectedAddressToStore } from "./hooks/useSaveConnectedAddressToStore"
+import { usePosthog } from "./hooks/posthog"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToVendingMachineContractEvents()
@@ -137,6 +138,7 @@ const AppBody = () => {
     dispatch(fetchETHPriceUSD())
   }, [dispatch])
 
+  usePosthog()
   useCheckBonusEligibility()
   useFetchStakingRewards()
   useSaveConnectedAddressToStore()

src/constants/featureFlags.ts

@@ -1,7 +1,10 @@
-import { EnvVariable } from "../enums"
-import { getEnvVariable } from "../utils/getEnvVariable"
+import { ChainID, EnvVariable } from "../enums"
+import { getEnvVariable, supportedChainId } from "../utils/getEnvVariable"
 
 export const TBTC_V2 =
   getEnvVariable(EnvVariable.FEATURE_FLAG_TBTC_V2) === "true"
 export const MULTI_APP_STAKING =
   getEnvVariable(EnvVariable.FEATURE_FLAG_MULTI_APP_STAKING) === "true"
+export const POSTHOG =
+  getEnvVariable(EnvVariable.FEATURE_FLAG_POSTHOG) === "true" &&
+  supportedChainId === ChainID.Ethereum.toString()

src/enums/env.ts

@@ -4,4 +4,7 @@ export enum EnvVariable {
   ETH_HOSTNAME_WS = "ETH_HOSTNAME_WS",
   FEATURE_FLAG_TBTC_V2 = "FEATURE_FLAG_TBTC_V2",
   FEATURE_FLAG_MULTI_APP_STAKING = "FEATURE_FLAG_MULTI_APP_STAKING",
+  FEATURE_FLAG_POSTHOG = "FEATURE_FLAG_POSTHOG",
+  POSTHOG_HOSTNAME_HTTP = "POSTHOG_HOSTNAME_HTTP",
+  POSTHOG_API_KEY = "POSTHOH_API_KEY",
 }

src/hooks/posthog/index.ts

@@ -0,0 +1 @@
+export * from "./usePosthog"

src/hooks/posthog/useCapturePageview.ts

@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import * as posthog from "../../posthog"
+import { featureFlags } from "../../constants"
+
+export const useCapturePageview = () => {
+  const location = useLocation()
+
+  useEffect(() => {
+    if (featureFlags.POSTHOG) posthog.capturePageview()
+  }, [location])
+}

src/hooks/posthog/useIdentify.ts

@@ -0,0 +1,50 @@
+import { useEffect } from "react"
+import { useWeb3React } from "@web3-react/core"
+import { ConnectorEvent, ConnectorUpdate } from "@web3-react/types"
+import * as posthog from "../../posthog"
+import { getAddress, isSameETHAddress } from "../../web3/utils"
+import { featureFlags } from "../../constants"
+
+export const useIdentify = () => {
+  const { connector, account } = useWeb3React()
+
+  useEffect(() => {
+    if (!featureFlags.POSTHOG) return
+
+    const onLogin = async () => {
+      const account = await connector?.getAccount()
+      if (account) {
+        posthog.identify(getAddress(account))
+      }
+    }
+    onLogin()
+  }, [connector])
+
+  useEffect(() => {
+    if (!featureFlags.POSTHOG) return
+
+    const updateHandler = (update: ConnectorUpdate) => {
+      if (!update.account) {
+        posthog.reset()
+      } else if (
+        update.account &&
+        account &&
+        !isSameETHAddress(update.account, account)
+      ) {
+        posthog.reset()
+        posthog.identify(getAddress(update.account))
+      }
+    }
+
+    const deactivateHandler = () => {
+      posthog.reset()
+    }
+
+    connector?.on(ConnectorEvent.Update, updateHandler)
+    connector?.on(ConnectorEvent.Deactivate, deactivateHandler)
+    return () => {
+      connector?.removeListener(ConnectorEvent.Update, updateHandler)
+      connector?.removeListener(ConnectorEvent.Deactivate, deactivateHandler)
+    }
+  }, [connector, account])
+}

src/hooks/posthog/usePosthog.ts

@@ -0,0 +1,14 @@
+import { useEffect } from "react"
+import { featureFlags } from "../../constants"
+import * as posthog from "../../posthog"
+import { useCapturePageview } from "./useCapturePageview"
+import { useIdentify } from "./useIdentify"
+
+export const usePosthog = () => {
+  useEffect(() => {
+    if (featureFlags.POSTHOG) posthog.init()
+  }, [])
+
+  useCapturePageview()
+  useIdentify()
+}

src/posthog/index.ts

@@ -0,0 +1,37 @@
+import posthog from "posthog-js"
+import { EnvVariable } from "../enums"
+import { getEnvVariable } from "../utils/getEnvVariable"
+
+export const init = () => {
+  const apiKey = getEnvVariable(EnvVariable.POSTHOG_API_KEY)
+  const apiHost = getEnvVariable(EnvVariable.POSTHOG_HOSTNAME_HTTP)
+
+  if (!apiKey || !apiHost) {
+    throw new Error("Could not initilize posthog.")
+  }
+
+  posthog.init(apiKey, {
+    api_host: apiHost,
+    // T dapp is a single page app so we need to make a `pageview` call
+    // manually. It also prevents sending the `pageview` event on postohog
+    // initialization.
+    capture_pageview: false,
+    persistence: "memory",
+  })
+}
+
+export const identify = (ethAddress: string) => {
+  posthog.identify(ethAddress)
+}
+
+// Posthog automatically sends pageview events whenever it gets loaded. For a
+// one-page app, this means it will only send a `pageview` once, when the app
+// loads. To make sure any navigating a user does within your app gets captured,
+// you must make a `pageview` call manually.
+export const capturePageview = () => {
+  posthog.capture("$pageview")
+}
+
+export const reset = () => {
+  posthog.reset()
+}

src/utils/getEnvVariable.ts

@@ -16,6 +16,15 @@ const envMap: { [key in EnvVariable]: string } = {
   [EnvVariable.FEATURE_FLAG_MULTI_APP_STAKING]: process.env[
     "REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING"
   ] as string,
+  [EnvVariable.FEATURE_FLAG_POSTHOG]: process.env[
+    "REACT_APP_FEATURE_FLAG_POSTHOG"
+  ] as string,
+  [EnvVariable.POSTHOG_HOSTNAME_HTTP]: process.env[
+    "REACT_APP_POSTHOG_HOSTNAME_HTTP"
+  ] as string,
+  [EnvVariable.POSTHOG_API_KEY]: process.env[
+    "REACT_APP_POSTHOG_API_KEY"
+  ] as string,
 }
 
 export const getEnvVariable = (envVar: EnvVariable) => {

yarn.lock

@@ -3836,6 +3836,11 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@sentry/types@^7.2.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@sentry/types/-/types-7.14.0.tgz#8069e58a0104190e328647963036c7597e2e5fa8"
+  integrity sha512-9iFZS9Hr5hAoL+M9oUH2dY9burOaQh+CHGH66fortuTp++YDWKdbPEeKcz8hRJaUyBBn53rdxiBmAyHsrlE6KA==
+
 "@sinclair/typebox@^0.23.3":
   version "0.23.5"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
@@ -12193,6 +12198,11 @@ fetch-retry@^5.0.2:
   resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.2.tgz#4c55663a7c056cb45f182394e479464f0ff8f3e3"
   integrity sha512-57Hmu+1kc6pKFUGVIobT7qw3NeAzY/uNN26bSevERLVvf6VGFR/ooDCOFBHMNDgAxBiU2YJq1D0vFzc6U1DcPw==
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -18496,6 +18506,15 @@ postcss@^8.1.0:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthog-js@^1.32.2:
+  version "1.32.2"
+  resolved "https://registry.npmjs.org/posthog-js/-/posthog-js-1.32.2.tgz#faf8e88946e448ccfd6f673d1cce4512dd7568d9"
+  integrity sha512-1jepbvxUCGJW7pxsiPeioct9+JZJKPur6j0M2+pe2WFmNnkBGlV7qbK/evv1k6jjYpG8SxDZqwU0RAseRyh7rA==
+  dependencies:
+    "@sentry/types" "^7.2.0"
+    fflate "^0.4.1"
+    rrweb-snapshot "^1.1.14"
+
 [email protected]:
   version "10.4.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@@ -20004,6 +20023,11 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
+rrweb-snapshot@^1.1.14:
+  version "1.1.14"
+  resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
+  integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"