analytics: add statsig

Author: debater-coder

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.9.6-beta",
+  "version": "1.9.7-beta",
   "scripts": {
     "dev": "npm-run-all --parallel dev:*",
     "dev:run": "FORCE_COLOR=1 vite",
@@ -52,6 +52,7 @@
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.20.1",
     "rollup-plugin-workbox": "^6.2.0",
+    "statsig-react": "^1.33.0",
     "typescript": "^5.1.6",
     "web-vitals": "^3.0.1",
     "workbox-precaching": "^6.5.3",

apps/client/src/components/Nav/Nav.tsx

@@ -17,6 +17,7 @@ import {
 import React, { useState } from "react";
 import { FaGithub, FaMoon, FaSun, MdLogout, MdSettings } from "react-icons/all";
 import { Link as RouterLink, useLocation } from "react-router-dom";
+import { Statsig } from "statsig-react";
 
 export const TimetablLogo = ({
   color,
@@ -145,6 +146,11 @@ export const SettingsBTN = ({
     <RouterLink
       to={pathname.startsWith("/app/settings") ? "/app" : "/app/settings"}
       unstable_viewTransition
+      onClick={() => {
+        if (localStorage.getItem("consentedToWelcomeMessage")) {
+          Statsig.logEvent("settings_opened");
+        }
+      }}
     >
       <IconButton
         variant="outline"

apps/client/src/services/UserInterface/UserInterface.tsx

@@ -12,6 +12,7 @@ import {
 } from "@tanstack/react-query-persist-client";
 import { StrictMode, createContext, useContext } from "react";
 import ReactDOM from "react-dom/client";
+import { StatsigProvider } from "statsig-react";
 
 const AuthActionsContext = createContext<OAuth2Actions | null>(null);
 
@@ -32,6 +33,22 @@ const ChakraWrapper = ({ children }: { children: React.ReactNode }) => {
   return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
 };
 
+const StatsigWrapper = ({ children }: { children: React.ReactNode }) => {
+  const consented = localStorage.getItem("consentedToWelcomeMessage");
+
+  if (!consented) return <>{children}</>;
+
+  return (
+    <StatsigProvider
+      sdkKey="client-l2xQg1ZmyZxdQROd01wYZRipYaxpHkR83Ms6gCpJaA6"
+      waitForInitialization={true}
+      user={{}}
+    >
+      {children}
+    </StatsigProvider>
+  );
+};
+
 class UserInterface {
   constructor(
     private queryClient: QueryClient,
@@ -47,25 +64,29 @@ class UserInterface {
 
     ReactDOM.createRoot(this.rootElement).render(
       <StrictMode>
-        <PersistQueryClientProvider
-          client={this.queryClient}
-          persistOptions={{
-            persister: this.persister,
-            maxAge: Infinity,
-            dehydrateOptions: {
-              shouldDehydrateQuery: () => true,
-            },
-          }}
-        >
-          <ChakraWrapper>
-            <ColorModeScript initialColorMode={themeConfig.initialColorMode} />
-            <AuthActionsContext.Provider value={this.actions}>
-              {this.router.getElement()}
-            </AuthActionsContext.Provider>
-            <NotifyContainer />
-            <ReactQueryDevtools initialIsOpen={false} />
-          </ChakraWrapper>
-        </PersistQueryClientProvider>
+        <StatsigWrapper>
+          <PersistQueryClientProvider
+            client={this.queryClient}
+            persistOptions={{
+              persister: this.persister,
+              maxAge: Infinity,
+              dehydrateOptions: {
+                shouldDehydrateQuery: () => true,
+              },
+            }}
+          >
+            <ChakraWrapper>
+              <ColorModeScript
+                initialColorMode={themeConfig.initialColorMode}
+              />
+              <AuthActionsContext.Provider value={this.actions}>
+                {this.router.getElement()}
+              </AuthActionsContext.Provider>
+              <NotifyContainer />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </ChakraWrapper>
+          </PersistQueryClientProvider>
+        </StatsigWrapper>
       </StrictMode>
     );
   };