diff --git a/dapp/.env b/dapp/.env index fd447e796..977362387 100644 --- a/dapp/.env +++ b/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_WITHDRAWALS_ENABLED="false" VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false" @@ -25,5 +29,6 @@ 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" VITE_FEATURE_MOBILE_MODE_ENABLED="true" diff --git a/dapp/package.json b/dapp/package.json index b384d7b43..3e094674f 100644 --- a/dapp/package.json +++ b/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", diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 587d248ef..1fd0809c7 100644 --- a/dapp/src/DApp.tsx +++ b/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() { - + + + diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx index 182314521..b950b2b2c 100644 --- a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx +++ b/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" @@ -72,6 +73,7 @@ export default function ConnectWalletButton({ const { closeModal } = useModal() const dispatch = useAppDispatch() const isMounted = useRef(false) + const { handleIdentification } = usePostHogIdentity() const [isLoading, setIsLoading] = useState(false) @@ -118,8 +120,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(() => { diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index fad9aa380..248b31b8c 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -29,6 +29,7 @@ import { IconChevronUp, } from "@tabler/icons-react" import { useMatch } from "react-router-dom" +import { usePostHogIdentity } from "#/hooks/posthog" import Tooltip from "../shared/Tooltip" function isChangeAccountFeatureSupported(embeddedApp: string | undefined) { @@ -45,12 +46,18 @@ export default function ConnectWallet() { size: "lg", }) const isDashboardPage = useMatch("/dashboard") + const { resetIdentity } = usePostHogIdentity() const isMobile = useMobileMode() const handleConnectWallet = (isReconnecting: boolean = false) => { openModal(MODAL_TYPES.CONNECT_WALLET, { isReconnecting }) } + const handleDisconnectWallet = () => { + onDisconnect() + resetIdentity() + } + if (!address) { return (