add posthog to builder

gitcoinco · Jun 11, 2024 · b40433f · b40433f
1 parent 352d617
commit b40433f
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 36 deletions.
diff --git a/packages/builder/.env.test b/packages/builder/.env.test
@@ -10,3 +10,6 @@ REACT_APP_PASSPORT_API_KEY="test-key"
 REACT_APP_PASSPORT_AVALANCHE_API_KEY="test-key"
 REACT_APP_PASSPORT_API_COMMUNITY_ID="0000"
 REACT_APP_PASSPORT_API_COMMUNITY_ID_AVALANCHE="0000"
+
+REACT_APP_POSTHOG_KEY=""
+REACT_APP_POSTHOG_HOST=""
diff --git a/packages/builder/package.json b/packages/builder/package.json
@@ -64,6 +64,7 @@
     "os-browserify": "^0.3.0",
     "pnpm": "7",
     "postcss": "^8.4.14",
+    "posthog-js": "^1.132.0",
     "process": "^0.11.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/packages/builder/src/index.tsx b/packages/builder/src/index.tsx
@@ -1,5 +1,7 @@
 import "./browserPatches";
 
+import { PostHogProvider } from "posthog-js/react";
+
 import { ChakraProvider } from "@chakra-ui/react";
 import { datadogRum } from "@datadog/browser-rum";
 import { ReduxRouter } from "@lagunovsky/redux-react-router";
@@ -29,6 +31,7 @@ import setupStore from "./store";
 import "./styles/index.css";
 import initDatadog from "./utils/datadog";
 import wagmiClient, { chains } from "./utils/wagmi";
+import { initPosthog } from "./utils/posthog";
 import initTagmanager from "./tagmanager";
 
 const dataLayerConfig = new DataLayer({
@@ -59,6 +62,9 @@ initTagmanager();
 
 datadogRum.addAction("Init");
 
+// Initialize posthog
+const posthog = initPosthog();
+
 const queryString = new URLSearchParams(window?.location?.search);
 
 // Twitter oauth will attach code & state in oauth procedure
@@ -105,42 +111,44 @@ if (pathname && pathname !== window.location.pathname) {
 
 root.render(
   <ErrorBoundary>
-    <WagmiConfig client={wagmiClient}>
-      <RainbowKitProvider chains={chains} theme={gtcLightTheme} coolMode>
-        <ChakraProvider resetCSS={false}>
-          <Provider store={store}>
-            <AlloWrapper>
-              <DataLayerProvider client={dataLayerConfig}>
-                <ReduxRouter history={history} store={store}>
-                  <Layout>
-                    <Routes>
-                      <Route
-                        path={slugs.root}
-                        element={<Navigate to={slugs.grants} />}
-                      />
-                      <Route path={slugs.grants} element={<ProjectsList />} />
-                      <Route path={slugs.project} element={<Project />} />
-                      <Route path={slugs.newGrant} element={<NewProject />} />
-                      <Route path={slugs.edit} element={<EditProject />} />
-                      <Route path={slugs.round} element={<RoundShow />} />
-                      <Route
-                        path={slugs.roundApplication}
-                        element={<RoundApply />}
-                      />
-                      <Route
-                        path={slugs.roundApplicationView}
-                        element={<ViewApplication />}
-                      />
-                      <Route path="*" element={<PageNotFound />} />
-                    </Routes>
-                  </Layout>
-                </ReduxRouter>
-              </DataLayerProvider>
-            </AlloWrapper>
-          </Provider>
-        </ChakraProvider>
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <PostHogProvider client={posthog}>
+      <WagmiConfig client={wagmiClient}>
+        <RainbowKitProvider chains={chains} theme={gtcLightTheme} coolMode>
+          <ChakraProvider resetCSS={false}>
+            <Provider store={store}>
+              <AlloWrapper>
+                <DataLayerProvider client={dataLayerConfig}>
+                  <ReduxRouter history={history} store={store}>
+                    <Layout>
+                      <Routes>
+                        <Route
+                          path={slugs.root}
+                          element={<Navigate to={slugs.grants} />}
+                        />
+                        <Route path={slugs.grants} element={<ProjectsList />} />
+                        <Route path={slugs.project} element={<Project />} />
+                        <Route path={slugs.newGrant} element={<NewProject />} />
+                        <Route path={slugs.edit} element={<EditProject />} />
+                        <Route path={slugs.round} element={<RoundShow />} />
+                        <Route
+                          path={slugs.roundApplication}
+                          element={<RoundApply />}
+                        />
+                        <Route
+                          path={slugs.roundApplicationView}
+                          element={<ViewApplication />}
+                        />
+                        <Route path="*" element={<PageNotFound />} />
+                      </Routes>
+                    </Layout>
+                  </ReduxRouter>
+                </DataLayerProvider>
+              </AlloWrapper>
+            </Provider>
+          </ChakraProvider>
+        </RainbowKitProvider>
+      </WagmiConfig>
+    </PostHogProvider>
   </ErrorBoundary>
 );
 

diff --git a/packages/builder/src/utils/posthog.ts b/packages/builder/src/utils/posthog.ts
@@ -0,0 +1,21 @@
+import posthog from "posthog-js";
+
+export const initPosthog = () => {
+  console.log("Initializing Posthog");
+  if (process.env.REACT_APP_POSTHOG_KEY && process.env.REACT_APP_POSTHOG_HOST) {
+    posthog.init(process.env.REACT_APP_POSTHOG_KEY, {
+      api_host: process.env.REACT_APP_POSTHOG_HOST,
+      session_recording: {
+        maskTextSelector: '[data-testid="rk-account-button"]',
+      },
+    });
+
+    console.log("Posthog initialized");
+
+    return posthog;
+  }
+
+  console.log("Posthog not initialized");
+
+  return undefined;
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml