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://eu.i.posthog.com',
+  'https://eu-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://eu-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://eu-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

@@ -1,6 +1,7 @@
 'use server';
 
 import { eq, sql } from 'drizzle-orm';
+import { unstable_cache } from 'next/cache';
 import database from 'src/config/database';
 import { analyticsEventsTable } from 'src/db/schema';
 import {
@@ -89,19 +90,60 @@ 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;
+}
+
+const getBridgeClickedCountsFromPostHog = unstable_cache(
+  async (): Promise<BridgeClickCount[]> => {
+    const res = await fetch(
+      `https://eu.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(distinct properties.$session_id) AS cnt
+              FROM events
+              WHERE event = 'bridge_clicked'
+              GROUP BY properties.bridgeId
+              ORDER BY cnt DESC
+            `,
+          },
+        }),
+      },
+    );
+
+    if (!res.ok) throw new Error(`PostHog API error: ${res.status}`);
+
+    const data = await res.json();
+    return data.results.map(([bridgeId, count]: [string, number]) => ({ bridgeId, count }));
+  },
+  ['bridge-clicked-counts'],
+  { revalidate: 300 },
+);
+
 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 { MiniPayNoCeloBanner } from 'src/components/banner/MiniPayNoCeloBanner';
@@ -11,32 +13,90 @@ import { Header } from 'src/components/nav/Header';
 import { LegalRestrict } from 'src/components/police';
 import { WagmiContext } from 'src/config/wagmi';
 import { TransactionModal } from 'src/features/transactions/TransactionModal';
+import { scrubEventUrlProperties } from 'src/utils/posthog';
 import { useIsSsr } from 'src/utils/ssr';
 import ENSProvider from 'src/utils/useAddressToLabel';
 import HistoryProvider from 'src/utils/useHistory';
 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,
+      mask_all_text: true,
+      mask_all_element_attributes: true,
+
+      capture_pageview: true,
+      capture_pageleave: true,
+      persistence: 'sessionStorage',
+      defaults: '2026-01-30',
+      internal_or_test_user_hostname: null,
+      debug: false,
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') {
+          posthog.debug();
+        }
+      },
+      before_send: (event) => {
+        if (event !== null) {
+          delete event.properties['$ip'];
+          scrubEventUrlProperties(event.properties);
+        }
+
+        return event;
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    const markNoCapture = (mutations: MutationRecord[]) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (!(node instanceof Element)) continue;
+          if (node.matches('[data-rk] [role="dialog"]')) {
+            node.classList.add('ph-no-capture');
+          }
+          node.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>