replace swetrix with openpanel

Author: merlinfuchs

kite-web/package-lock.json

@@ -16,6 +16,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "@hookform/resolvers": "^3.6.0",
     "@lemonsqueezy/lemonsqueezy.js": "^2.2.0",
+    "@openpanel/nextjs": "^1.4.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -75,7 +76,6 @@
     "recharts": "^2.15.0",
     "simple-markdown": "^0.7.3",
     "sonner": "^1.5.0",
-    "swetrix": "^3.7.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.9",

kite-web/package.json

@@ -0,0 +1,32 @@
+import { useUser } from "@/lib/hooks/api";
+import { OpenPanelComponent, useOpenPanel } from "@openpanel/nextjs";
+import { useEffect } from "react";
+
+export default function AnalyticsProvider() {
+  const op = useOpenPanel();
+  const user = useUser();
+
+  useEffect(() => {
+    if (user?.id) {
+      op.identify({
+        profileId: user.id,
+        firstName: user.discord_username,
+        lastName: user.display_name,
+        email: user.email,
+      });
+    }
+  }, [user?.id, op.identify]);
+
+  if (process.env.NODE_ENV !== "production" && typeof window === "undefined") {
+    return null;
+  }
+
+  return (
+    <OpenPanelComponent
+      clientId="3d379370-3ce9-4a92-b7ea-2c663b7fa7dd"
+      apiUrl="https://analytics.vaven.io/api"
+      trackScreenViews={true}
+      trackOutgoingLinks={true}
+    />
+  );
+}

kite-web/src/components/common/AnalyticsProvider.tsx

@@ -8,26 +8,13 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClientProvider } from "@tanstack/react-query";
 import queryClient from "@/lib/api/client";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { Analytics } from "@vercel/analytics/react";
-import * as swetrix from "swetrix";
+import AnalyticsProvider from "@/components/common/AnalyticsProvider";
 
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
 });
 
-if (process.env.NODE_ENV === "production" && typeof window !== "undefined") {
-  document.addEventListener("DOMContentLoaded", () => {
-    swetrix.init("1Lhc9ncbpz6e", {
-      apiURL: "https://swetrix.vaven.io/log",
-    });
-    swetrix.trackViews();
-    swetrix.trackErrors({
-      sampleRate: 1,
-    });
-  });
-}
-
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
@@ -43,7 +30,7 @@ export default function App({ Component, pageProps }: AppProps) {
             <Toaster position="top-right" richColors={true} />
 
             <SpeedInsights />
-            <Analytics />
+            <AnalyticsProvider />
           </TooltipProvider>
         </ThemeProvider>
       </QueryClientProvider>