feat: add connect wallet analytics event (#231)

src/common/lib/hooks/usePrevious.ts

@@ -1,11 +1,15 @@
-import { useEffect, useRef } from "react";
+import { useState } from "react";
 
 export const usePrevious = (value: any) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
+  const [current, setCurrent] = useState(value);
+  const [previous, setPrevious] = useState(null);
+
+  if (value !== current) {
+    setPrevious(current);
+    setCurrent(value);
+  }
+
+  return previous;
 };
 
 export default usePrevious;

src/common/lib/hooks/useValueHistory.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+export const useValueHistory = <T>(
+  value: T,
+  limit: number,
+): [T, ...Array<T | undefined>] => {
+  const [values, setValues] = useState([
+    value,
+    ...Array(limit - 1).map((v) => undefined),
+  ]);
+  const current = values[0];
+
+  if (value !== current) {
+    setValues([value, ...values.slice(0, -1)]);
+  }
+
+  return values as [T, ...Array<T | undefined>];
+};
+
+export default useValueHistory;

src/common/providers/AnalyticsProvider.tsx

@@ -6,6 +6,7 @@ import { useCurrentSpaceIdentityPublicKey } from "@/common/lib/hooks/useCurrentS
 import { useCurrentFid } from "@/common/lib/hooks/useCurrentFid";
 
 export enum AnalyticsEvent {
+  CONNECT_WALLET = "Connect Wallet",
   SIGN_UP = "Sign Up",
   LINK_FID = "Link FID",
   SAVE_SPACE_THEME = "Save Space Theme",
@@ -16,6 +17,7 @@ export enum AnalyticsEvent {
 }
 
 type AnalyticsEventProperties = {
+  [AnalyticsEvent.CONNECT_WALLET]: { hasNogs: boolean };
   [AnalyticsEvent.SIGN_UP]: Record<string, never>;
   [AnalyticsEvent.LINK_FID]: { fid: number };
   [AnalyticsEvent.SAVE_SPACE_THEME]: Record<string, never>;

src/common/providers/LoggedInStateProvider.tsx

@@ -15,6 +15,11 @@ import { ALCHEMY_API } from "@/constants/urls";
 import { AlchemyIsHolderOfContract } from "@/pages/api/signerRequests";
 import axios from "axios";
 import { NOGS_CONTRACT_ADDR } from "@/constants/nogs";
+import useValueHistory from "@/common/lib/hooks/useValueHistory";
+import {
+  analytics,
+  AnalyticsEvent,
+} from "@/common/providers/AnalyticsProvider";
 
 type LoggedInLayoutProps = { children: React.ReactNode };
 
@@ -91,6 +96,7 @@ const LoggedInStateProvider: React.FC<LoggedInLayoutProps> = ({ children }) => {
   const { signMessage, ready: walletsReady } = useSignMessage();
   const authenticatorManager = useAuthenticatorManager();
   const logout = useLogout();
+  const previousSteps = useValueHistory<SetupStep>(currentStep, 4);
 
   async function loadWallet() {
     if (walletsReady && ready && authenticated && user) {
@@ -106,6 +112,18 @@ const LoggedInStateProvider: React.FC<LoggedInLayoutProps> = ({ children }) => {
     }
   }
 
+  useEffect(() => {
+    if (
+      previousSteps[1] === SetupStep.WALLET_CONNECTED &&
+      previousSteps[2] === SetupStep.SIGNED_IN &&
+      previousSteps[3] === SetupStep.NOT_SIGNED_IN
+    ) {
+      analytics.track(AnalyticsEvent.CONNECT_WALLET, {
+        hasNogs: previousSteps[0] === SetupStep.TOKENS_FOUND,
+      });
+    }
+  }, [previousSteps]);
+
   async function loadIdentity() {
     if (walletsReady && ready && authenticated && user) {
       if (isUndefined(getCurrentIdentity())) {