Posthog Analytics

.env.bartio

@@ -138,3 +138,8 @@ NEXT_PUBLIC_POL_SUBGRAPH_URL="https://api.goldsky.com/api/public/project_clq1h5c
 
 # in seconds
 NEXT_PUBLIC_FALLBACK_BLOCKTIME="1.9"
+
+
+# Posthog ===================================================================
+NEXT_PUBLIC_POSTHOG_KEY=phc_waPF31wbuiBwbfIeiV0z3GPfg3KAHE1WPMk6UMn8Kax
+NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

.env.local.example

@@ -9,8 +9,7 @@ NEXT_PUBLIC_SENTRY_DSN=""
 SENTRY_AUTH_TOKEN=""
 SENTRY_ORG=""
 SENTRY_PROJECT=""
-NEXT_PUBLIC_MIXPANEL_PROJECT_NAME=""
-# this one is deprecated in favor of NEXT_PUBLIC_MIXPANEL_PROJECT_NAME
+
 NEXT_PUBLIC_PROJECT_NAME=""
 
 
@@ -22,4 +21,4 @@ NEXT_PUBLIC_PROJECT_NAME=""
 
 # IPFS ===================================================================
 # Uncomment the following line to build for IPFS
-# NEXT_PUBLIC_HOST="ipfs"
+# NEXT_PUBLIC_HOST="ipfs"

.github/workflows/ipfs-static-build-test.yml

@@ -25,7 +25,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: 18.18.2
+        node-version: 20.11.1
         cache: 'pnpm'
 
     - name: Install

apps/hub/package.json

@@ -32,6 +32,7 @@
     "next": "^14.2.11",
     "next-auth": "^4.24.5",
     "next-themes": "^0.2.1",
+    "posthog-js": "^1.189.0",
     "react": "18.2.0",
     "react-datepicker": "^4.16.0",
     "react-day-picker": "^8.7.1",

apps/hub/src/app/PostHogPageView.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { usePostHog } from "posthog-js/react";
+
+export default function PostHogPageView(): null {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+  useEffect(() => {
+    // Track pageviews
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+      posthog.capture("$pageview", {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}

apps/hub/src/app/Providers.tsx

@@ -1,24 +1,40 @@
 "use client";
-import React, { type PropsWithChildren } from "react";
+
+import React, { useEffect, type PropsWithChildren } from "react";
+import { BeraJsProvider, BlockTimeProvider } from "@bera/berajs";
 import { BeraWagmi } from "@bera/wagmi";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+
 import { ThemeProvider } from "~/components/theme-provider";
-import { BeraJsProvider, BlockTimeProvider } from "@bera/berajs";
 
 export default function Providers({ children }: PropsWithChildren<any>) {
+  useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+      return;
+    }
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: "identified_only",
+      capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+    });
+  }, []);
   return (
-    <BeraWagmi>
-      <BeraJsProvider configOverride={undefined}>
-        <BlockTimeProvider>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            forcedTheme="dark"
-            themes={["dark"]}
-          >
-            {children}
-          </ThemeProvider>
-        </BlockTimeProvider>
-      </BeraJsProvider>
-    </BeraWagmi>
+    <PostHogProvider client={posthog}>
+      <BeraWagmi>
+        <BeraJsProvider configOverride={undefined}>
+          <BlockTimeProvider>
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="dark"
+              forcedTheme="dark"
+              themes={["dark"]}
+            >
+              {children}
+            </ThemeProvider>
+          </BlockTimeProvider>
+        </BeraJsProvider>
+      </BeraWagmi>
+    </PostHogProvider>
   );
 }

apps/hub/src/app/layout.tsx

@@ -1,4 +1,6 @@
 import "../styles/globals.css";
+import { Metadata } from "next";
+import dynamic from "next/dynamic";
 import { IBM_Plex_Sans } from "next/font/google";
 import Script from "next/script";
 import { hubName, hubUrl } from "@bera/config";
@@ -15,7 +17,6 @@ import { Toaster } from "react-hot-toast";
 
 import Providers from "./Providers";
 import { navItems } from "./config";
-import { Metadata } from "next";
 
 const fontSans = IBM_Plex_Sans({
   weight: ["400", "500", "600", "700"],
@@ -30,6 +31,9 @@ export const metadata: Metadata = {
     default: hubName,
   },
 };
+const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
+  ssr: false,
+});
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
@@ -48,11 +52,16 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
         }}
       />
-      <body
-        className={cn("min-h-screen font-sans antialiased", fontSans.variable)}
-      >
-        <TermOfUseModal />
-        <Providers>
+      <Providers>
+        <body
+          className={cn(
+            "min-h-screen font-sans antialiased",
+            fontSans.variable,
+          )}
+        >
+          <TermOfUseModal />
+
+          <PostHogPageView />
           {/* Note: This div previously had overflow-hidden, but it was removed as it interferes with sticky elements */}
           <div className="relative flex min-h-screen w-full flex-col ">
             <div className="z-[100]">
@@ -74,8 +83,8 @@ export default function RootLayout(props: { children: React.ReactNode }) {
           </div>
           <TailwindIndicator />
           <Analytics />
-        </Providers>
-      </body>
+        </body>
+      </Providers>
     </html>
   );
 }

apps/hub/src/app/pools/[poolId]/deposit/AddLiquidityContent.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
+import Link from "next/link";
 import { notFound, useRouter } from "next/navigation";
 import {
   ADDRESS_ZERO,
@@ -15,6 +16,7 @@ import {
 import { balancerVaultAddress, cloudinaryUrl } from "@bera/config";
 import {
   ActionButton,
+  AddLiquiditySuccess,
   ApproveButton,
   PreviewToken,
   Spinner,
@@ -23,31 +25,30 @@ import {
   TokenList,
   TxnPreview,
   getRewardsVaultUrl,
+  useAnalytics,
   useSlippage,
   useTxn,
 } from "@bera/shared-ui";
 import { cn } from "@bera/ui";
 import { Button } from "@bera/ui/button";
-import { Switch } from "@bera/ui/switch";
 import { Card, CardContent, CardHeader, CardTitle } from "@bera/ui/card";
 import { Icons } from "@bera/ui/icons";
-import { Address, formatEther } from "viem";
-
-import { SettingsPopover } from "~/components/settings-popover";
 import { Skeleton } from "@bera/ui/skeleton";
-import { AddLiquiditySuccess } from "@bera/shared-ui";
-import Link from "next/link";
-import useMultipleTokenApprovalsWithSlippage from "~/hooks/useMultipleTokenApprovalsWithSlippage";
+import { Switch } from "@bera/ui/switch";
+import { beraToken, wBeraToken } from "@bera/wagmi";
 import {
   AddLiquidityKind,
   vaultV2Abi,
 } from "@berachain-foundation/berancer-sdk";
-import { AddLiquidityDetails } from "./AddLiquidiyDetails";
+import { Address, formatEther, formatUnits } from "viem";
+
+import { SettingsPopover } from "~/components/settings-popover";
+import { usePool } from "~/b-sdk/usePool";
+import useMultipleTokenApprovalsWithSlippage from "~/hooks/useMultipleTokenApprovalsWithSlippage";
 import { getPoolUrl } from "../../fetchPools";
-import { beraToken, wBeraToken } from "@bera/wagmi";
-import { useAddLiquidity } from "./useAddLiquidity";
 import AddLiquidityError from "./AddLiquidityError";
-import { usePool } from "~/b-sdk/usePool";
+import { AddLiquidityDetails } from "./AddLiquidiyDetails";
+import { useAddLiquidity } from "./useAddLiquidity";
 
 interface IAddLiquidityContent {
   poolId: string;
@@ -128,12 +129,36 @@ export default function AddLiquidityContent({ poolId }: IAddLiquidityContent) {
     setInput([]);
   };
   const { refresh } = usePollWalletBalances();
+  const { captureException, track } = useAnalytics();
   const { write, ModalPortal } = useTxn({
     message: `Add liquidity to ${pool?.name}`,
     onSuccess: async () => {
+      try {
+        track("pool_deposit", {
+          poolId: pool?.id,
+          poolName: pool?.name,
+          tokensIn: queryOutput?.amountsIn.map((a) =>
+            pool?.tokens
+              ? pool.tokens.find(
+                  (t) =>
+                    t.address.toLowerCase() === a.token.address.toLowerCase(),
+                )?.symbol
+              : a.token.address,
+          ),
+          amountsIn: queryOutput?.amountsIn.map((a) =>
+            formatUnits(a.amount, a.token.decimals),
+          ),
+        });
+      } catch (e) {
+        captureException(e);
+      }
       reset();
       refresh();
     },
+    onError: (e) => {
+      track("pool_deposit_failed");
+      captureException(e);
+    },
     CustomSuccessModal: pool?.address ? AddLiquiditySuccess : undefined,
     customSuccessModalProps: pool?.address
       ? {
@@ -165,7 +190,7 @@ export default function AddLiquidityContent({ poolId }: IAddLiquidityContent) {
   return (
     <div className="mt-16 flex w-full flex-col items-center justify-center gap-4">
       {ModalPortal}
-      <Card className="mx-6 w-full items-center bg-background p-4 sm:mx-0 sm:w-[480px] flex flex-col">
+      <Card className="mx-6 flex w-full flex-col items-center bg-background p-4 sm:mx-0 sm:w-[480px]">
         {!pool && isLoading ? (
           <Skeleton className="h-8 w-40 self-center" />
         ) : (