Enable posthog for profile

package.json

@@ -22,7 +22,7 @@
     "book": "pnpm --filter @cartridge/documentation",
     "ui": "pnpm --filter @cartridge/ui",
     "ui:next": "pnpm --filter @cartridge/ui-next",
-    "profil": "pnpm --filter @cartridge/profile",
+    "profile": "pnpm --filter @cartridge/profile",
     "utils": "pnpm --filter @cartridge/utils",
     "example:next": "pnpm --filter @cartridge/controller-example-next",
     "example:svelte": "pnpm --filter @cartridge/controller-example-svelte",
@@ -39,4 +39,4 @@
     "vercel": "^37.4.2",
     "@types/react": "^18.3.12"
   }
-}
+}

packages/profile/.env.development

@@ -1,3 +1,5 @@
 VITE_CARTRIDGE_API_URL="http://localhost:8000"
 VITE_KEYCHAIN_URL="http://localhost:3001"
 VITE_RPC_SEPOLIA="http://localhost:8001/x/starknet/sepolia"
+NEXT_PUBLIC_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ
+NEXT_PUBLIC_POSTHOG_HOST=https://x.cartridge.gg/ingest

packages/profile/.env.production

@@ -1,3 +1,5 @@
 VITE_CARTRIDGE_API_URL="https://api.cartridge.gg"
 VITE_KEYCHAIN_URL="https://x.cartridge.gg"
 VITE_RPC_SEPOLIA="https://api.cartridge.gg/x/starknet/sepolia"
+NEXT_PUBLIC_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ
+NEXT_PUBLIC_POSTHOG_HOST=https://x.cartridge.gg/ingest

packages/profile/package.json

@@ -16,6 +16,7 @@
     "@cartridge/penpal": "^6.2.3",
     "@cartridge/ui-next": "workspace:^",
     "@cartridge/utils": "workspace:^",
+    "posthog-js": "^1.181.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-query": "^3.39.2",
@@ -26,6 +27,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@types/node": "^20.6.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

packages/profile/src/components/context/provider.tsx

@@ -6,25 +6,39 @@ import { BrowserRouter } from "react-router-dom";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { IndexerAPIProvider } from "@cartridge/utils/api/indexer";
 import { DataProvider } from "./data";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+
+if (typeof window !== "undefined") {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    person_profiles: "always",
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === "development") posthog.debug();
+    },
+  });
+}
 
 export function Provider({ children }: PropsWithChildren) {
   const queryClient = new QueryClient();
 
   return (
-    <BrowserRouter>
-      <ThemeProvider defaultScheme="system">
-        <CartridgeAPIProvider
-          url={`${import.meta.env.VITE_CARTRIDGE_API_URL!}/query`}
-        >
-          <IndexerAPIProvider credentials="omit">
-            <QueryClientProvider client={queryClient}>
-              <ConnectionProvider>
-                <DataProvider>{children}</DataProvider>
-              </ConnectionProvider>
-            </QueryClientProvider>
-          </IndexerAPIProvider>
-        </CartridgeAPIProvider>
-      </ThemeProvider>
-    </BrowserRouter>
+    <PostHogProvider client={posthog}>
+      <BrowserRouter>
+        <ThemeProvider defaultScheme="system">
+          <CartridgeAPIProvider
+            url={`${import.meta.env.VITE_CARTRIDGE_API_URL!}/query`}
+          >
+            <IndexerAPIProvider credentials="omit">
+              <QueryClientProvider client={queryClient}>
+                <ConnectionProvider>
+                  <DataProvider>{children}</DataProvider>
+                </ConnectionProvider>
+              </QueryClientProvider>
+            </IndexerAPIProvider>
+          </CartridgeAPIProvider>
+        </ThemeProvider>
+      </BrowserRouter>
+    </PostHogProvider>
   );
 }