track wallet connection

web/src/app/layout.tsx

@@ -18,6 +18,7 @@ import { superpositionTestnet } from "@/config/chains";
 import CookieBanner from "@/components/CookieBanner";
 import GoogleAnalytics from "@/components/GoogleAnalytics";
 import Points from "@/components/Points";
+import { WalletConnectionStatus } from "@/components/WalletConnectionStatus";
 
 export const metadata: Metadata = {
   title: "Longtail",
@@ -65,6 +66,7 @@ export default async function RootLayout({
         className={cn("flex min-h-screen flex-col bg-white", inter.className)}
       >
         <Provider>
+          <WalletConnectionStatus />
           <PopulateQueryCache featuresData={featuresData} />
           <div className="iridescent-blur absolute left-1/2 top-[180px] size-full max-h-[305px] max-w-[557px] -translate-x-1/2" />
 

web/src/components/WalletConnectionStatus.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { EVENTS, track } from "@/lib/analytics";
+import { useEffect, useState } from "react";
+import { useAccount, useChainId } from "wagmi";
+
+export const WalletConnectionStatus = () => {
+  const chainId = useChainId();
+  const { status, connector } = useAccount();
+  const [previous, setPrevious] = useState(status);
+  useEffect(() => {
+    if (previous === "connecting" && status === "connected") {
+      track(EVENTS.WALLET_CONNECTED, {
+        wallet_name: connector?.name ?? "Unknown",
+        chain_id: chainId,
+      });
+    }
+    setPrevious(status);
+  }, [previous, status, connector, chainId]);
+  return <></>;
+};

web/src/lib/analytics.ts

@@ -12,6 +12,7 @@ export const EVENTS = {
 type EventKeys = (typeof EVENTS)[keyof typeof EVENTS];
 type EventTypes = {
   wallet_connected: {
+    wallet_name: string;
     chain_id: number;
   };
   tokens_changed: {