Set up Amplitude

dapp/.env.example

@@ -21,6 +21,9 @@ VITE_SENTRY_DSN=""
 VITE_POSTHOG_API_HOST="https://us.i.posthog.com"
 VITE_POSTHOG_API_KEY=""
 
+# Amplitude
+VITE_AMPLITUDE_API_KEY="46f4e9953a416bbef532c29dd912700"
+
 # Feature flags
 VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="true"
 VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="true"

dapp/package.json

@@ -18,6 +18,8 @@
   },
   "dependencies": {
     "@acre-btc/sdk": "workspace:*",
+    "@amplitude/analytics-browser": "^2.17.10",
+    "@amplitude/plugin-session-replay-browser": "^1.19.0",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",

dapp/src/amplitude.ts

@@ -0,0 +1,45 @@
+import * as amplitude from "@amplitude/analytics-browser"
+import env from "#/constants/env"
+import bitcoinAddressToUserId from "./utils/bitcoinAddressToUserId"
+
+type WalletType = "okx" | "unisat" | "xverse"
+
+export interface AnalyticsEventData {
+  wallet_connection_clicked: Record<string, never>
+  wallet_connection_started: { wallet_type: WalletType; is_embed: boolean }
+  wallet_connection_completed: { wallet_type: WalletType }
+
+  deposit_btc_started: Record<string, never>
+  deposit_btc_completed: Record<string, never>
+  deposit_btc_failed: Record<string, never>
+
+  withdraw_btc_started: Record<string, never>
+  withdraw_btc_completed: Record<string, never>
+  withdraw_btc_failed: Record<string, never>
+
+  mezo_mats_clicked: Record<string, never>
+  footer_faq_clicked: Record<string, never>
+  footer_docs_clicked: Record<string, never>
+  footer_blog_clicked: Record<string, never>
+}
+
+export type AnalyticsEvent = keyof AnalyticsEventData
+
+export const initializeAmplitude = () => {
+  amplitude.init(env.AMPLITUDE_API_KEY, undefined, {
+    autocapture: true,
+  })
+}
+
+export const trackEvent = <T extends AnalyticsEvent>(
+  eventName: T,
+  eventData?: AnalyticsEventData[T],
+) => {
+  amplitude.track(eventName, eventData)
+}
+
+export const identifyUser = (bitcoinAddress: string | undefined) => {
+  const id = new amplitude.Identify()
+  if (bitcoinAddress) id.set("user_id", bitcoinAddressToUserId(bitcoinAddress))
+  amplitude.identify(id)
+}

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { time } from "#/constants"
 import {
   useAppDispatch,
@@ -12,6 +12,7 @@ import {
 import { setIsSignedMessage } from "#/store/wallet"
 import { OrangeKitConnector, OrangeKitError, OnSuccessCallback } from "#/types"
 import { eip1193, logPromiseFailure, orangeKit } from "#/utils"
+import { trackEvent } from "#/amplitude"
 import {
   Button,
   Card,
@@ -82,14 +83,23 @@ export default function ConnectWalletButton({
   const shouldShowStatuses = isSelected && !hasConnectionError
   const shouldShowRetryButton = address && hasSignMessageErrorStatus
 
+  const walletType = useMemo(
+    () => connector.id.replace("orangekit-", "") as "okx" | "unisat" | "xverse",
+    [connector.id],
+  )
+
   const onSuccessSignMessage = useCallback(() => {
     closeModal()
     dispatch(setIsSignedMessage(true))
 
+    trackEvent("wallet_connection_completed", {
+      wallet_type: walletType,
+    })
+
     if (onSuccess) {
       onSuccess()
     }
-  }, [closeModal, dispatch, onSuccess])
+  }, [closeModal, dispatch, onSuccess, walletType])
 
   const handleSignMessageAndCreateSession = useCallback(
     async (connectedConnector: OrangeKitConnector, btcAddress: string) => {
@@ -169,6 +179,11 @@ export default function ConnectWalletButton({
     // Do not trigger action again when wallet connection is in progress
     if (shouldShowStatuses) return
 
+    trackEvent("wallet_connection_started", {
+      wallet_type: walletType,
+      is_embed: false,
+    })
+
     if (!isReconnecting) onDisconnect()
     resetConnectionAlert()
     resetMessageStatus()
@@ -187,9 +202,13 @@ export default function ConnectWalletButton({
   useEffect(() => {
     if (!isMounted.current && isEmbed && isSelected) {
       isMounted.current = true
+      trackEvent("wallet_connection_started", {
+        wallet_type: walletType,
+        is_embed: true,
+      })
       handleConnection()
     }
-  }, [handleConnection, isEmbed, isSelected])
+  }, [handleConnection, isEmbed, isSelected, walletType])
 
   return (
     <Card

dapp/src/components/Header/ConnectWallet.tsx

@@ -24,6 +24,7 @@ import {
 import CurrencyBalance from "#/components/shared/CurrencyBalance"
 import { BitcoinIcon } from "#/assets/icons"
 import { referralProgram, addressUtils } from "#/utils"
+import { trackEvent } from "#/amplitude"
 import { motion } from "framer-motion"
 import { MODAL_TYPES } from "#/types"
 import {
@@ -55,6 +56,7 @@ export default function ConnectWallet() {
   const isMobile = useMobileMode()
 
   const handleConnectWallet = (isReconnecting: boolean = false) => {
+    trackEvent("wallet_connection_clicked")
     openModal(MODAL_TYPES.CONNECT_WALLET, { isReconnecting })
   }
 
@@ -118,7 +120,7 @@ export default function ConnectWallet() {
             leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="acre.50" />}
             rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
           >
-            <Text size="md" color="acre.50">
+            <Text size="md" color="acre.50" data-sensitive>
               {addressUtils.truncateAddress(address)}
             </Text>
           </MenuButton>
@@ -166,7 +168,7 @@ export default function ConnectWallet() {
           spacing={3}
         >
           <Icon as={BitcoinIcon} boxSize={6} color="acre.50" />
-          <Text size="md" color="acre.50">
+          <Text size="md" color="acre.50" data-sensitive>
             {addressUtils.truncateAddress(address)}
           </Text>
         </HStack>

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

@@ -17,6 +17,7 @@ import { PROCESS_STATUSES } from "#/types"
 import { eip1193, logPromiseFailure } from "#/utils"
 import { useTimeout } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
+import { trackEvent } from "#/amplitude"
 import WalletInteractionModal from "../WalletInteractionModal"
 
 export default function DepositBTCModal() {
@@ -58,6 +59,7 @@ export default function DepositBTCModal() {
     (transactionHash: string) => {
       dispatch(setTxHash(transactionHash))
       handleStake()
+      trackEvent("deposit_btc_completed", {})
       handleCapture(PostHogEvent.DepositSuccess, {
         transactionHash,
       })
@@ -75,6 +77,7 @@ export default function DepositBTCModal() {
         onError(error)
       }
 
+      trackEvent("deposit_btc_failed", {})
       handleCaptureWithCause(error, PostHogEvent.DepositFailure)
     },
     [sessionIdToPromise, handlePause, onError, handleCaptureWithCause],

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

@@ -17,6 +17,7 @@ import { useInitializeWithdraw } from "#/acre-react/hooks"
 import { time, queryKeysFactory } from "#/constants"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import PostHogEvent from "#/posthog/events"
+import { trackEvent } from "#/amplitude"
 import BuildTransactionModal from "./BuildTransactionModal"
 import WalletInteractionModal from "../WalletInteractionModal"
 
@@ -58,6 +59,7 @@ export default function SignMessageModal() {
   const onSignMessageSuccess = useCallback(() => {
     logPromiseFailure(refetchBitcoinPosition())
     dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED))
+    trackEvent("withdraw_btc_completed", {})
     handleCapture(PostHogEvent.WithdrawalSuccess)
   }, [dispatch, refetchBitcoinPosition, handleCapture])
 
@@ -79,6 +81,7 @@ export default function SignMessageModal() {
         onSignMessageError(error)
       }
 
+      trackEvent("withdraw_btc_failed", {})
       handleCaptureWithCause(error, PostHogEvent.WithdrawalFailure)
     },
     [

dapp/src/constants/env.ts

@@ -26,6 +26,8 @@ const POSTHOG_API_HOST = import.meta.env.VITE_POSTHOG_API_HOST
 
 const POSTHOG_API_KEY = import.meta.env.VITE_POSTHOG_API_KEY
 
+const AMPLITUDE_API_KEY = import.meta.env.VITE_AMPLITUDE_API_KEY
+
 export default {
   PROD,
   USE_TESTNET,
@@ -41,4 +43,5 @@ export default {
   ACRE_API_ENDPOINT,
   POSTHOG_API_HOST,
   POSTHOG_API_KEY,
+  AMPLITUDE_API_KEY,
 }

dapp/src/hooks/useAmplitude.ts

@@ -0,0 +1,32 @@
+import { env } from "#/constants"
+import * as amplitude from "@amplitude/analytics-browser"
+import { LogLevel } from "@amplitude/analytics-browser/lib/esm/types"
+import { sessionReplayPlugin } from "@amplitude/plugin-session-replay-browser"
+import { useEffect, useRef } from "react"
+
+const useAmplitude = () => {
+  const inited = useRef(false)
+
+  useEffect(() => {
+    if (inited.current) return // Avoid re-initialization with React Strict Mode
+    inited.current = true
+
+    amplitude.add(
+      sessionReplayPlugin({
+        privacyConfig: {
+          maskSelector: ["[data-sensitive]"],
+        },
+      }),
+    )
+
+    amplitude.init(env.AMPLITUDE_API_KEY, undefined, {
+      autocapture: true,
+
+      // Disable tracking during development, but log events
+      optOut: !env.PROD,
+      logLevel: env.PROD ? undefined : LogLevel.Verbose,
+    })
+  }, [])
+}
+
+export default useAmplitude

dapp/src/hooks/useInitApp.ts

@@ -6,6 +6,7 @@ import useDetectEmbed from "./useDetectEmbed"
 import useFetchBTCPriceUSD from "./useFetchBTCPriceUSD"
 import useDisconnectWallet from "./useDisconnectWallet"
 import useSentry from "./useSentry"
+import useAmplitude from "./useAmplitude"
 
 export default function useInitApp() {
   // TODO: Let's uncomment when dark mode is ready
@@ -19,4 +20,5 @@ export default function useInitApp() {
   useAccountChangedOKX()
   useAccountsChangedOKX()
   useAccountsChangedUnisat()
+  useAmplitude()
 }

dapp/src/hooks/useWallet.ts

@@ -18,6 +18,7 @@ import {
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useDispatch } from "react-redux"
 import { setAddress } from "#/store/wallet"
+import { identifyUser } from "#/amplitude"
 import useResetWalletState from "./useResetWalletState"
 import useLastUsedBtcAddress from "./useLastUsedBtcAddress"
 import useBitcoinBalance from "./useBitcoinBalance"
@@ -78,6 +79,7 @@ export default function useWallet(): UseWalletReturn {
         dispatch(setAddress(bitcoinAddress))
         setAddressInLocalStorage(bitcoinAddress)
         sentry.setUser(bitcoinAddress)
+        identifyUser(bitcoinAddress)
       },
     },
   })
@@ -90,6 +92,7 @@ export default function useWallet(): UseWalletReturn {
         removeAddressFromLocalStorage()
         resetWalletState()
         sentry.setUser(undefined)
+        identifyUser(undefined)
       },
     },
   })
@@ -129,6 +132,7 @@ export default function useWallet(): UseWalletReturn {
         dispatch(setAddress(bitcoinAddress))
         setAddressInLocalStorage(bitcoinAddress)
         sentry.setUser(bitcoinAddress)
+        identifyUser(bitcoinAddress)
       },
     },
     queryClient,

dapp/src/pages/DashboardPage/BeehiveCard.tsx

@@ -6,6 +6,7 @@ import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import { useMats, useModal } from "#/hooks"
 import { MODAL_TYPES } from "#/types"
 import { numbersUtils } from "#/utils"
+import { trackEvent } from "#/amplitude"
 import {
   Box,
   Button,
@@ -25,6 +26,7 @@ export default function BeehiveCard(props: CardProps) {
   const { data } = useMats()
 
   const handleOpenBeehiveModal = () => {
+    trackEvent("mezo_mats_clicked")
     openModal(MODAL_TYPES.MEZO_BEEHIVE)
   }
 

dapp/src/pages/DashboardPage/PositionDetails.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback } from "react"
 import CurrencyBalanceWithConversion from "#/components/shared/CurrencyBalanceWithConversion"
 import {
   useActivitiesCount,
@@ -24,6 +24,7 @@ import { featureFlags } from "#/constants"
 import { IconClockHour5Filled } from "@tabler/icons-react"
 import TooltipIcon from "#/components/shared/TooltipIcon"
 import { activitiesUtils } from "#/utils"
+import { trackEvent } from "#/amplitude"
 import AcreTVLMessage from "./AcreTVLMessage"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
@@ -43,7 +44,17 @@ export default function PositionDetails() {
   const bitcoinAmount = bitcoinPosition?.estimatedBitcoinBalance ?? 0n
 
   const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
+  const handleDeposit = useCallback(() => {
+    openDepositModal()
+    trackEvent("deposit_btc_started")
+  }, [openDepositModal])
+
   const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
+  const handleWithdraw = useCallback(() => {
+    openWithdrawModal()
+    trackEvent("withdraw_btc_started")
+  }, [openWithdrawModal])
+
   const activitiesCount = useActivitiesCount()
   const { data: activities } = useActivities()
   const isMobileMode = useMobileMode()
@@ -97,7 +108,7 @@ export default function PositionDetails() {
           >
             <Button
               {...buttonStyles}
-              onClick={openDepositModal}
+              onClick={handleDeposit}
               isDisabled={
                 (featureFlags.DEPOSIT_CAP_ENABLED && tvl.isCapExceeded) ||
                 isDisabledForMobileMode
@@ -122,7 +133,7 @@ export default function PositionDetails() {
               <Button
                 variant="outline"
                 {...buttonStyles}
-                onClick={openWithdrawModal}
+                onClick={handleWithdraw}
                 isDisabled={!isWithdrawalFlowEnabled || isDisabledForMobileMode}
               >
                 Withdraw