feat: posthog

next.config.ts

@@ -26,6 +26,8 @@ const CONNECT_SRC_HOSTS = [
   'https://pass.celopg.eco',
   'https://*.rainbow.me',
   'https://us-central1-staked-celo-bot.cloudfunctions.net',
+  'https://us.i.posthog.com',
+  'https://us-assets.i.posthog.com',
 ];
 const FRAME_SRC_HOSTS = [
   'https://*.walletconnect.com',
@@ -38,12 +40,12 @@ const IMG_SRC_HOSTS = [
   'https://app.safe.global',
   'https://pass.celopg.eco',
 ];
-const SCRIPTS_SRC_HOSTS = ['https://*.safe.global'];
+const SCRIPTS_SRC_HOSTS = ['https://*.safe.global', 'https://us-assets.i.posthog.com'];
 
 const cspHeader = `
   default-src 'self';
   script-src 'self' ${isDev ? "'unsafe-eval'" : SCRIPTS_SRC_HOSTS.join(' ')};
-  script-src-elem 'self' 'unsafe-inline';
+  script-src-elem 'self' 'unsafe-inline' https://us-assets.i.posthog.com;
   style-src 'self' 'unsafe-inline';
   connect-src 'self' ${CONNECT_SRC_HOSTS.join(' ')};
   img-src 'self' blob: data: ${IMG_SRC_HOSTS.join(' ')};

package.json

@@ -23,6 +23,7 @@
     "@metamask/jazzicon": "^2.0.0",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",
+    "@posthog/react": "^1.8.2",
     "@rainbow-me/rainbowkit": "2.2.9",
     "@slack/socket-mode": "^2.0.5",
     "@slack/web-api": "^7.13.0",
@@ -40,6 +41,7 @@
     "next": "15.5.9",
     "octokit": "^5.0.3",
     "postgres": "^3.4.7",
+    "posthog-js": "^1.363.5",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-minimal-pie-chart": "^8.4.1",

src/app/account/page.tsx

@@ -95,7 +95,7 @@ export default function Page() {
           <Amount valueWei={totalBalance} className="-mt-1 text-3xl md:text-4xl" />
         </div>
         {isVoteSigner ? (
-          <div className="align-right flex flex-col items-end">
+          <div className="ph-no-capture align-right flex flex-col items-end">
             <h2 className="font-medium">Vote Signer For</h2>
             <span className="hidden font-mono text-sm md:flex">{signingFor}</span>
             <span className="font-mono text-sm md:hidden">{shortenAddress(signingFor!)}</span>

src/app/actions.ts

@@ -89,19 +89,56 @@ export interface BridgeClickCount {
   count: number;
 }
 
+async function getBridgeClickedCountsFromDb(): Promise<BridgeClickCount[]> {
+  const bridgeClickCounts = await database
+    .select({
+      bridgeId: sql<string>`properties->>'bridgeId'`,
+      count: sql<number>`count(distinct "sessionId")::int`,
+    })
+    .from(analyticsEventsTable)
+    .where(eq(analyticsEventsTable.eventName, 'bridge_clicked'))
+    .groupBy(sql`properties->>'bridgeId'`)
+    .orderBy(sql`count(distinct "sessionId") desc`);
+
+  return bridgeClickCounts;
+}
+
+async function getBridgeClickedCountsFromPostHog(): Promise<BridgeClickCount[]> {
+  const res = await fetch(
+    `https://us.posthog.com/api/projects/${process.env.POSTHOG_PROJECT_ID}/query`,
+    {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${process.env.POSTHOG_API_KEY}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: {
+          kind: 'HogQLQuery',
+          query: `
+            SELECT properties.bridgeId, count() AS cnt
+            FROM events
+            WHERE event = 'bridge_clicked'
+            GROUP BY properties.bridgeId
+            ORDER BY cnt DESC
+          `,
+        },
+      }),
+      // Cache the response for an hour
+      next: { revalidate: 3600 },
+    },
+  );
+
+  const data = await res.json();
+  return data.results.map(([bridgeId, count]: [string, number]) => ({ bridgeId, count }));
+}
+
 export async function getBridgeClickedCounts(): Promise<BridgeClickCount[]> {
+  const source = process.env.BRIDGE_COUNTS_SOURCE ?? 'database';
   try {
-    const bridgeClickCounts = await database
-      .select({
-        bridgeId: sql<string>`properties->>'bridgeId'`,
-        count: sql<number>`count(distinct "sessionId")::int`,
-      })
-      .from(analyticsEventsTable)
-      .where(eq(analyticsEventsTable.eventName, 'bridge_clicked'))
-      .groupBy(sql`properties->>'bridgeId'`)
-      .orderBy(sql`count(distinct "sessionId") desc`);
-
-    return bridgeClickCounts;
+    return await (source === 'posthog'
+      ? getBridgeClickedCountsFromPostHog()
+      : getBridgeClickedCountsFromDb());
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Error fetching bridge click counts:', error);

src/app/app.tsx

@@ -1,6 +1,8 @@
 'use client';
+import { PostHogProvider } from '@posthog/react';
 import { Analytics } from '@vercel/analytics/react';
-import { PropsWithChildren } from 'react';
+import posthog from 'posthog-js';
+import { PropsWithChildren, useEffect } from 'react';
 import { ToastContainer, Zoom } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ErrorBoundary } from 'src/components/errors/ErrorBoundary';
@@ -17,25 +19,61 @@ import StakingModeProvider from 'src/utils/useStakingMode';
 import 'src/vendor/inpage-metamask.js';
 import 'src/vendor/polyfill';
 
+function PHProvider({ children }: PropsWithChildren) {
+  useEffect(() => {
+    if (posthog.__loaded) return;
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN as string, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: 'never',
+      autocapture: true,
+      capture_pageview: true,
+      capture_pageleave: true,
+      persistence: 'sessionStorage',
+      defaults: '2026-01-30',
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') {
+          posthog.debug();
+        }
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    const markNoCapture = () => {
+      document.querySelectorAll('[data-rk] [role="dialog"]').forEach((el) => {
+        el.classList.add('ph-no-capture');
+      });
+    };
+
+    const observer = new MutationObserver(markNoCapture);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
+
 export function App({ children }: PropsWithChildren<any>) {
   return (
     <ErrorBoundary>
       <SafeHydrate>
-        <WagmiContext>
-          <HistoryProvider>
-            <StakingModeProvider>
-              <ENSProvider>
-                <LegalRestrict>
-                  <BodyLayout>{children}</BodyLayout>
-                </LegalRestrict>
-                <TransactionModal />
-                <ErrorBoundaryInline>
-                  <ToastContainer transition={Zoom} position="bottom-right" limit={12} />
-                </ErrorBoundaryInline>
-              </ENSProvider>
-            </StakingModeProvider>
-          </HistoryProvider>
-        </WagmiContext>
+        <PHProvider>
+          <WagmiContext>
+            <HistoryProvider>
+              <StakingModeProvider>
+                <ENSProvider>
+                  <LegalRestrict>
+                    <BodyLayout>{children}</BodyLayout>
+                  </LegalRestrict>
+                  <TransactionModal />
+                  <ErrorBoundaryInline>
+                    <ToastContainer transition={Zoom} position="bottom-right" limit={12} />
+                  </ErrorBoundaryInline>
+                </ENSProvider>
+              </StakingModeProvider>
+            </HistoryProvider>
+          </WagmiContext>
+        </PHProvider>
       </SafeHydrate>
       <Analytics />
     </ErrorBoundary>

src/features/wallet/WalletDropdown.tsx

@@ -58,7 +58,7 @@ export function WalletDropdown() {
       {address && isConnected ? (
         <DropdownModal
           button={() => (
-            <div className="flex items-center justify-center space-x-1">
+            <div className="ph-no-capture flex items-center justify-center space-x-1">
               <Identicon address={address} size={26} />
               <AddressLabel address={address} />
             </div>
@@ -105,7 +105,7 @@ function DropdownContent({
 
   return (
     <div className="flex min-w-[18rem] flex-col items-center space-y-3">
-      <div className="flex flex-col items-center">
+      <div className="ph-no-capture flex flex-col items-center">
         <Identicon address={address} size={34} />
         <button title="Click to copy" onClick={onClickCopy} className="flex flex-col text-sm">
           <AddressLabel address={address} hiddenIfNoLabel shortener={() => shortAddress} />
@@ -179,7 +179,9 @@ function ValueRow({
       <div className="flex flex-row justify-between">
         <label className="text-sm">{label} </label>
         {address && (
-          <span className="font-mono text-xs text-taupe-600">&hellip;{address?.slice(-4)}</span>
+          <span className="ph-no-capture font-mono text-xs text-taupe-600">
+            &hellip;{address?.slice(-4)}
+          </span>
         )}
       </div>
       <Amount value={value} valueWei={valueWei} className="text-xl" />

src/utils/useTrackEvent.ts

@@ -1,12 +1,13 @@
+import { usePostHog } from '@posthog/react';
 import { useCallback, useEffect, useState } from 'react';
 import { AnalyticsEventMap, AnalyticsEventName } from 'src/types/analytics';
 import { v4 as uuidv4, validate as validateUUID } from 'uuid';
 import { trackEvent } from './analytics';
 
 const SESSION_STORAGE_KEY = 'analytics_session_id';
 
-// React hook for analytics tracking with session management
 export function useTrackEvent() {
+  const posthog = usePostHog();
   const [sessionId, setSessionId] = useState<string>('');
 
   useEffect(() => {
@@ -40,8 +41,9 @@ export function useTrackEvent() {
   const track = useCallback(
     <T extends AnalyticsEventName>(eventName: T, properties: AnalyticsEventMap[T]) => {
       trackEvent(eventName, properties, sessionId);
+      posthog?.capture(eventName, properties);
     },
-    [sessionId],
+    [sessionId, posthog],
   );
 
   return track;