Implement basic hooks

Based on Threshold Dashboard implementation (WIP)

dapp/src/hooks/posthog/index.ts

@@ -0,0 +1,4 @@
+export * from "./usePostHogIdentify"
+export * from "./usePostHog"
+export * from "./usePostHogCapture"
+export * from "./usePostHogCapturePageView"

dapp/src/hooks/posthog/usePostHog.ts

@@ -0,0 +1,7 @@
+import { usePostHogCapturePageView } from "./usePostHogCapturePageView"
+import { usePostHogIdentify } from "./usePostHogIdentify"
+
+export const usePostHog = () => {
+  usePostHogCapturePageView()
+  usePostHogIdentify()
+}

dapp/src/hooks/posthog/usePostHogCapture.ts

@@ -0,0 +1,15 @@
+import { featureFlags } from "#/constants"
+import { PostHog } from "posthog-js"
+import { usePostHog as usePostHogClient } from "posthog-js/react"
+import { useEffect } from "react"
+
+export const usePostHogCapture = (
+  ...captureArgs: Parameters<PostHog["capture"]>
+) => {
+  const postHog = usePostHogClient()
+
+  useEffect(() => {
+    if (!featureFlags.POSTHOG_ENABLED) return
+    postHog.capture(...captureArgs)
+  }, [postHog, captureArgs])
+}

dapp/src/hooks/posthog/usePostHogCapturePageView.ts

@@ -0,0 +1,7 @@
+import { usePostHogCapture } from "./usePostHogCapture"
+
+export const usePostHogCapturePageView = () => {
+  const { pathname } = window.location
+
+  usePostHogCapture("$pageview", { pathname })
+}

dapp/src/hooks/posthog/usePostHogIdentify.ts

@@ -0,0 +1,70 @@
+import { featureFlags } from "#/constants"
+import { usePostHog } from "posthog-js/react"
+import { useCallback, useEffect } from "react"
+import { hashString, isSameETHAddress, logPromiseFailure } from "#/utils"
+import { EventCallback, useSubscribeToConnectorEvent } from "@orangekit/react"
+import { getAddress } from "ethers"
+import { useConfig } from "wagmi"
+import { useWallet } from "../useWallet"
+import { useConnector } from "../orangeKit"
+
+export const usePostHogIdentify = () => {
+  const postHog = usePostHog()
+  const connector = useConnector()
+  const { address } = useWallet()
+  const wagmiConfig = useConfig()
+
+  useEffect(() => {
+    if (!featureFlags.POSTHOG_ENABLED || !address) return
+
+    const handleIdentify = async () => {
+      const hashedAccountAddress = await hashString({
+        value: address.toUpperCase(),
+      })
+
+      postHog.identify(hashedAccountAddress)
+    }
+
+    logPromiseFailure(handleIdentify())
+  }, [postHog, address])
+
+  const handleConnectorChange = useCallback<EventCallback<"change">>(
+    (updated) => {
+      const [updatedAddress] = updated.accounts || []
+
+      if (!updatedAddress) {
+        postHog.reset()
+        return
+      }
+
+      const isChanged =
+        updatedAddress && address && !isSameETHAddress(updatedAddress, address)
+
+      if (isChanged) {
+        postHog.reset()
+        postHog.identify(getAddress(updatedAddress))
+      }
+    },
+    [postHog, address],
+  )
+
+  const handleConnectorDisconnect = useCallback<
+    EventCallback<"disconnect">
+  >(() => {
+    postHog.reset()
+  }, [postHog])
+
+  useSubscribeToConnectorEvent(
+    wagmiConfig,
+    connector!.name,
+    "change",
+    handleConnectorChange,
+  )
+
+  useSubscribeToConnectorEvent(
+    wagmiConfig,
+    connector!.name,
+    "disconnect",
+    handleConnectorDisconnect,
+  )
+}

dapp/src/posthog.tsx

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren } from "react"
+import { PostHogProvider as Provider } from "posthog-js/react"
+import { PostHogConfig } from "posthog-js"
+import { featureFlags, env } from "./constants"
+
+const options: Partial<PostHogConfig> = {
+  api_host: env.POSTHOG_API_HOST,
+  capture_pageview: false,
+  persistence: "memory",
+}
+
+function PostHogProvider(props: PropsWithChildren) {
+  const { children } = props
+
+  if (!featureFlags.POSTHOG_ENABLED) {
+    return children
+  }
+
+  return (
+    <Provider apiKey={env.POSTHOG_API_KEY} options={options}>
+      {children}
+    </Provider>
+  )
+}
+
+export default PostHogProvider

dapp/src/utils/hash.ts

@@ -0,0 +1,17 @@
+type HashAlgorithm = "SHA-1" | "SHA-256" | "SHA-384" | "SHA-512"
+
+export const hashString = async ({
+  algorithm = "SHA-256",
+  value,
+}: {
+  algorithm?: HashAlgorithm
+  value: string
+}) =>
+  Array.prototype.map
+    .call(
+      new Uint8Array(
+        await crypto.subtle.digest(algorithm, new TextEncoder().encode(value)),
+      ),
+      (x: number) => `0${x.toString(16)}`.slice(-2),
+    )
+    .join("")