diff --git a/src/common/lib/hooks/usePrevious.ts b/src/common/lib/hooks/usePrevious.ts index 3db0bce3..fde5af6e 100644 --- a/src/common/lib/hooks/usePrevious.ts +++ b/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; diff --git a/src/common/lib/hooks/useValueHistory.ts b/src/common/lib/hooks/useValueHistory.ts new file mode 100644 index 00000000..944181d1 --- /dev/null +++ b/src/common/lib/hooks/useValueHistory.ts @@ -0,0 +1,20 @@ +import { useState } from "react"; + +export const useValueHistory = ( + value: T, + limit: number, +): [T, ...Array] => { + 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]; +}; + +export default useValueHistory; diff --git a/src/common/providers/AnalyticsProvider.tsx b/src/common/providers/AnalyticsProvider.tsx index be0f9257..0ea45f13 100644 --- a/src/common/providers/AnalyticsProvider.tsx +++ b/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; [AnalyticsEvent.LINK_FID]: { fid: number }; [AnalyticsEvent.SAVE_SPACE_THEME]: Record; diff --git a/src/common/providers/LoggedInStateProvider.tsx b/src/common/providers/LoggedInStateProvider.tsx index 5fcc6f5a..121d4bd2 100644 --- a/src/common/providers/LoggedInStateProvider.tsx +++ b/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 = ({ children }) => { const { signMessage, ready: walletsReady } = useSignMessage(); const authenticatorManager = useAuthenticatorManager(); const logout = useLogout(); + const previousSteps = useValueHistory(currentStep, 4); async function loadWallet() { if (walletsReady && ready && authenticated && user) { @@ -106,6 +112,18 @@ const LoggedInStateProvider: React.FC = ({ 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())) {