dApp: PostHog integration

dapp/.env

@@ -18,6 +18,10 @@ VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_"  # this
 # Get the API key from: https://thegraph.com/studio/apikeys/.
 VITE_SUBGRAPH_API_KEY=""
 
+# Posthog
+VITE_POSTHOG_API_HOST="https://us.i.posthog.com"
+VITE_POSTHOG_API_KEY=""
+
 # Feature flags
 VITE_FEATURE_FLAG_GAMIFICATION_ENABLED="false"
 VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false"
@@ -26,4 +30,5 @@ VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED="true"
 VITE_FEATURE_FLAG_TVL_ENABLED="true"
 VITE_FEATURE_GATING_DAPP_ENABLED="true"
+VITE_FEATURE_POSTHOG_ENABLED="true"
 

dapp/package.json

@@ -40,6 +40,7 @@
     "framer-motion": "^10.16.5",
     "luxon": "^3.5.0",
     "mustache": "^4.2.0",
+    "posthog-js": "^1.186.1",
     "react": "^18.2.0",
     "react-confetti-explosion": "^2.1.2",
     "react-dom": "^18.2.0",

dapp/src/DApp.tsx

@@ -19,6 +19,7 @@ import getWagmiConfig from "./wagmiConfig"
 import queryClient from "./queryClient"
 import { delay, logPromiseFailure } from "./utils"
 import { AcreLogo } from "./assets/icons"
+import PostHogProvider from "./posthog/PostHogProvider"
 
 function SplashPage() {
   return (
@@ -69,7 +70,9 @@ function DAppProviders() {
               <SidebarContextProvider>
                 <WalletConnectionErrorContextProvider>
                   <ReduxProvider store={store}>
-                    <DApp />
+                    <PostHogProvider>
+                      <DApp />
+                    </PostHogProvider>
                   </ReduxProvider>
                 </WalletConnectionErrorContextProvider>
               </SidebarContextProvider>

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -24,6 +24,7 @@ import {
 } from "@chakra-ui/react"
 import { IconArrowNarrowRight } from "@tabler/icons-react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
+import { usePostHogIdentity } from "#/hooks/posthog"
 import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
 import { TextLg, TextMd } from "../shared/Typography"
 import ConnectWalletStatusLabel from "./ConnectWalletStatusLabel"
@@ -71,6 +72,7 @@ export default function ConnectWalletButton({
   const { closeModal } = useModal()
   const dispatch = useAppDispatch()
   const isMounted = useRef(false)
+  const { handleIdentification } = usePostHogIdentity()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -117,8 +119,11 @@ export default function ConnectWalletButton({
       if (!btcAddress) return
 
       await handleSignMessageAndCreateSession(connector, btcAddress)
+      handleIdentification(btcAddress, {
+        connector: connectedConnector.id,
+      })
     },
-    [connector, handleSignMessageAndCreateSession],
+    [connector, handleSignMessageAndCreateSession, handleIdentification],
   )
 
   const handleConnection = useCallback(() => {

dapp/src/components/Header/ConnectWallet.tsx

@@ -24,6 +24,7 @@ import {
   IconUserCode,
 } from "@tabler/icons-react"
 import { useMatch } from "react-router-dom"
+import { usePostHogIdentity } from "#/hooks/posthog"
 
 function isChangeAccountFeatureSupported(embeddedApp: string | undefined) {
   return referralProgram.isEmbedApp(embeddedApp)
@@ -39,11 +40,17 @@ export default function ConnectWallet() {
     size: "lg",
   })
   const isDashboardPage = useMatch("/dashboard")
+  const { resetIdentity } = usePostHogIdentity()
 
   const handleConnectWallet = (isReconnecting: boolean = false) => {
     openModal(MODAL_TYPES.CONNECT_WALLET, { isReconnecting })
   }
 
+  const handleDisconnectWallet = () => {
+    onDisconnect()
+    resetIdentity()
+  }
+
   if (!address) {
     return (
       <Button
@@ -135,7 +142,7 @@ export default function ConnectWallet() {
               icon={<Icon as={IconLogout} boxSize={5} />}
               px={2}
               boxSize={5}
-              onClick={onDisconnect}
+              onClick={handleDisconnectWallet}
             />
           </Tooltip>
         </HStack>

dapp/src/components/Layout.tsx

@@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom"
 import { Flex, VStack } from "@chakra-ui/react"
 import { useIsEmbed, useMobileMode } from "#/hooks"
 import { DappMode } from "#/types"
+import { usePostHogPageViewCapture } from "#/hooks/posthog"
 import DocsDrawer from "./DocsDrawer"
 import Header from "./Header"
 import ModalRoot from "./ModalRoot"
@@ -20,6 +21,10 @@ function Layout() {
   const isMobileMode = useMobileMode()
   const { embeddedApp } = useIsEmbed()
 
+  // It needs to be called here because the scope of `RouterProvider` is
+  // required to get `location` from `useLocation` hook.
+  usePostHogPageViewCapture()
+
   if (isMobileMode) return <MobileModeBanner forceOpen />
 
   const maxWidth = embeddedApp

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -14,6 +14,8 @@ import { setStatus, setTxHash } from "#/store/action-flow"
 import { ONE_SEC_IN_MILLISECONDS, queryKeysFactory } from "#/constants"
 import { useTimeout } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
+import { PostHogEvent } from "#/posthog/events"
+import { usePostHogCapture } from "#/hooks/posthog/usePostHogCapture"
 import WalletInteractionModal from "../WalletInteractionModal"
 
 const { userKeys } = queryKeysFactory
@@ -27,6 +29,7 @@ export default function DepositBTCModal() {
   const handleBitcoinBalanceInvalidation = useInvalidateQueries({
     queryKey: userKeys.balance(),
   })
+  const handleCapture = usePostHogCapture()
 
   const onStakeBTCSuccess = useCallback(() => {
     handleBitcoinBalanceInvalidation()
@@ -52,8 +55,11 @@ export default function DepositBTCModal() {
     (transactionHash: string) => {
       dispatch(setTxHash(transactionHash))
       handleStake()
+      handleCapture(PostHogEvent.DepositSuccess, {
+        transactionHash,
+      })
     },
-    [dispatch, handleStake],
+    [dispatch, handleStake, handleCapture],
   )
 
   const onDepositBTCError = useCallback(
@@ -63,8 +69,16 @@ export default function DepositBTCModal() {
       } else {
         onError(error)
       }
+
+      const captureParameters =
+        error instanceof Error
+          ? {
+              cause: error.message,
+            }
+          : undefined
+      handleCapture(PostHogEvent.DepositFailure, captureParameters)
     },
-    [onError, handlePause],
+    [onError, handlePause, handleCapture],
   )
 
   const { mutate: sendBitcoinTransaction, status } = useDepositBTCTransaction({

dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx

@@ -15,6 +15,8 @@ import { useInitializeWithdraw } from "#/acre-react/hooks"
 import { ONE_SEC_IN_MILLISECONDS, queryKeysFactory } from "#/constants"
 import { activityInitialized } from "#/store/wallet"
 import { useMutation } from "@tanstack/react-query"
+import { PostHogEvent } from "#/posthog/events"
+import { usePostHogCapture } from "#/hooks/posthog/usePostHogCapture"
 import BuildTransactionModal from "./BuildTransactionModal"
 import WalletInteractionModal from "../WalletInteractionModal"
 
@@ -48,6 +50,7 @@ export default function SignMessageModal() {
     amount,
     ACTION_FLOW_TYPES.UNSTAKE,
   )
+  const handleCapture = usePostHogCapture()
 
   useEffect(() => {
     let cancel = (_: Error) => {}
@@ -78,7 +81,8 @@ export default function SignMessageModal() {
   const onSignMessageSuccess = useCallback(() => {
     handleBitcoinPositionInvalidation()
     dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED))
-  }, [dispatch, handleBitcoinPositionInvalidation])
+    handleCapture(PostHogEvent.WithdrawalSuccess)
+  }, [dispatch, handleBitcoinPositionInvalidation, handleCapture])
 
   const onSignMessageError = useCallback(
     (error: unknown) => {
@@ -97,8 +101,16 @@ export default function SignMessageModal() {
       } else {
         onSignMessageError(error)
       }
+
+      const captureParameters =
+        error instanceof Error
+          ? {
+              cause: error.message,
+            }
+          : undefined
+      handleCapture(PostHogEvent.WithdrawalFailure, captureParameters)
     },
-    [onSignMessageError, handlePause],
+    [onSignMessageError, handlePause, handleCapture],
   )
 
   const { mutate: handleSignMessage } = useMutation({

dapp/src/constants/env.ts

@@ -22,6 +22,10 @@ const LATEST_COMMIT_HASH = import.meta.env.VITE_LATEST_COMMIT_HASH
 
 const ACRE_API_ENDPOINT = import.meta.env.VITE_ACRE_API_ENDPOINT
 
+const POSTHOG_API_HOST = import.meta.env.VITE_POSTHOG_API_HOST
+
+const POSTHOG_API_KEY = import.meta.env.VITE_POSTHOG_API_KEY
+
 export default {
   PROD,
   USE_TESTNET,
@@ -35,4 +39,6 @@ export default {
   NETWORK_TYPE,
   LATEST_COMMIT_HASH,
   ACRE_API_ENDPOINT,
+  POSTHOG_API_HOST,
+  POSTHOG_API_KEY,
 }

dapp/src/constants/featureFlags.ts

@@ -18,6 +18,8 @@ const TVL_ENABLED = import.meta.env.VITE_FEATURE_FLAG_TVL_ENABLED === "true"
 const GATING_DAPP_ENABLED =
   import.meta.env.VITE_FEATURE_GATING_DAPP_ENABLED === "true"
 
+const POSTHOG_ENABLED = import.meta.env.VITE_FEATURE_POSTHOG_ENABLED === "true"
+
 const featureFlags = {
   GAMIFICATION_ENABLED,
   OKX_WALLET_ENABLED,
@@ -26,6 +28,7 @@ const featureFlags = {
   ACRE_POINTS_ENABLED,
   TVL_ENABLED,
   GATING_DAPP_ENABLED,
+  POSTHOG_ENABLED,
 }
 
 export default featureFlags

dapp/src/hooks/posthog/index.ts

@@ -0,0 +1,3 @@
+export * from "./usePostHogIdentity"
+export * from "./usePostHogCapture"
+export * from "./usePostHogPageViewCapture"

dapp/src/hooks/posthog/usePostHogCapture.ts

@@ -0,0 +1,23 @@
+import { PostHogEvent } from "#/posthog/events"
+import { PostHog, usePostHog } from "posthog-js/react"
+import { useCallback } from "react"
+
+type CaptureArgs = [
+  eventName: PostHogEvent,
+  ...rest: Parameters<PostHog["capture"]> extends [unknown, ...infer R]
+    ? R
+    : never,
+]
+
+export const usePostHogCapture = () => {
+  const posthog = usePostHog()
+
+  const handleCapture = useCallback(
+    (...captureArgs: CaptureArgs) => {
+      posthog.capture(...captureArgs)
+    },
+    [posthog],
+  )
+
+  return handleCapture
+}

dapp/src/hooks/posthog/usePostHogIdentity.ts

@@ -0,0 +1,21 @@
+import { PostHog, usePostHog } from "posthog-js/react"
+import { useCallback } from "react"
+
+type IdentifyArgs = Parameters<PostHog["identify"]>
+
+export const usePostHogIdentity = () => {
+  const posthog = usePostHog()
+
+  const handleIdentification = useCallback(
+    (...identifyArgs: IdentifyArgs) => {
+      posthog.identify(...identifyArgs)
+    },
+    [posthog],
+  )
+
+  const resetIdentity = useCallback(() => {
+    posthog.reset()
+  }, [posthog])
+
+  return { handleIdentification, resetIdentity }
+}

dapp/src/hooks/posthog/usePostHogPageViewCapture.ts

@@ -0,0 +1,15 @@
+import { PostHogEvent } from "#/posthog/events"
+import { useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import { usePostHogCapture } from "./usePostHogCapture"
+
+export const usePostHogPageViewCapture = () => {
+  const handleCapture = usePostHogCapture()
+  const location = useLocation()
+
+  useEffect(() => {
+    handleCapture(PostHogEvent.PageView)
+  }, [location, handleCapture])
+
+  return handleCapture
+}

dapp/src/hooks/useAcrePoints.ts

@@ -2,8 +2,10 @@ import { useMutation, useQuery } from "@tanstack/react-query"
 import { acreApi } from "#/utils"
 import { queryKeysFactory, REFETCH_INTERVAL_IN_MILLISECONDS } from "#/constants"
 import { MODAL_TYPES } from "#/types"
+import { PostHogEvent } from "#/posthog/events"
 import { useWallet } from "./useWallet"
 import { useModal } from "./useModal"
+import { usePostHogCapture } from "./posthog/usePostHogCapture"
 
 const { userKeys, acreKeys } = queryKeysFactory
 
@@ -21,6 +23,7 @@ type UseAcrePointsReturnType = {
 export default function useAcrePoints(): UseAcrePointsReturnType {
   const { ethAddress = "" } = useWallet()
   const { openModal } = useModal()
+  const handleCapture = usePostHogCapture()
 
   const userPointsDataQuery = useQuery({
     queryKey: [...userKeys.pointsData(), ethAddress],
@@ -47,6 +50,11 @@ export default function useAcrePoints(): UseAcrePointsReturnType {
         claimedAmount,
         totalAmount,
       })
+
+      handleCapture(PostHogEvent.PointsClaim, {
+        claimedAmount,
+        totalAmount,
+      })
     },
     // TODO: Add the case when something goes wrong
     // onError: (error) => {},

dapp/src/posthog/PostHogProvider.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/posthog/events.ts

@@ -0,0 +1,8 @@
+export enum PostHogEvent {
+  PageView = "$pageview",
+  DepositSuccess = "deposit_success",
+  DepositFailure = "deposit_failure",
+  WithdrawalSuccess = "withdrawal_success",
+  WithdrawalFailure = "withdrawal_failure",
+  PointsClaim = "points_claim",
+}