[TOOL-3569] Dashboard: Add acount.id to posthog identify calls (#6377)

Author: MananTank

apps/dashboard/src/app/layout.tsx

@@ -8,6 +8,7 @@ import NextTopLoader from "nextjs-toploader";
 import { Suspense } from "react";
 import { OrganizeContractsToProjectsBanner } from "../components/notices/AnnouncementBanner";
 import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
+import { PosthogIdentifierServer } from "../components/wallets/PosthogIdentifierServer";
 import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
 import { PostHogProvider } from "./components/root-providers";
 import { AppRouterProviders } from "./providers";
@@ -80,6 +81,9 @@ export default function RootLayout({
             <Suspense fallback={null}>
               <EnsureValidConnectedWalletLoginServer />
             </Suspense>
+            <Suspense fallback={null}>
+              <PosthogIdentifierServer />
+            </Suspense>
           </AppRouterProviders>
           <DashboardRouterTopProgressBar />
           <NextTopLoader

apps/dashboard/src/app/providers.tsx

@@ -11,7 +11,6 @@ import {
   useConnectionManager,
 } from "thirdweb/react";
 import { CustomConnectWallet } from "../@3rdweb-sdk/react/components/connect-wallet";
-import { PosthogIdentifier } from "../components/wallets/PosthogIdentifier";
 import { isSanctionedAddress } from "../data/eth-sanctioned-addresses";
 import { useAllChainsData } from "../hooks/chains/allChains";
 import { SyncChainStores } from "../stores/chainStores";
@@ -27,7 +26,6 @@ export function AppRouterProviders(props: { children: React.ReactNode }) {
         <ThirdwebProvider>
           <SyncChainDefinitionsToConnectionManager />
           <TWAutoConnect />
-          <PosthogIdentifier />
           <ThemeProvider
             attribute="class"
             disableTransitionOnChange

apps/dashboard/src/components/wallets/PosthogIdentifier.tsx

@@ -19,7 +19,10 @@ const walletIdToPHName: Record<string, string> = {
   injected: "Injected",
 };
 
-export const PosthogIdentifier: React.FC = () => {
+export const PosthogIdentifierClient: React.FC<{
+  accountId: string | undefined;
+  accountAddress: string | undefined;
+}> = ({ accountId, accountAddress }) => {
   const client = useThirdwebClient();
   const account = useActiveAccount();
   const chain = useActiveWalletChain();
@@ -43,10 +46,17 @@ export const PosthogIdentifier: React.FC = () => {
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (account?.address) {
-      posthog.identify(account.address);
+    if (accountAddress) {
+      posthog.identify(accountAddress);
     }
-  }, [account?.address]);
+  }, [accountAddress]);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (accountId) {
+      posthog.identify(accountId);
+    }
+  }, [accountId]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax

apps/dashboard/src/components/wallets/PosthogIdentifierServer.tsx

@@ -0,0 +1,17 @@
+import { getRawAccount } from "../../app/account/settings/getAccount";
+import { getAuthTokenWalletAddress } from "../../app/api/lib/getAuthToken";
+import { PosthogIdentifierClient } from "./PosthogIdentifier";
+
+export async function PosthogIdentifierServer() {
+  const [account, accountAddress] = await Promise.all([
+    getRawAccount(),
+    getAuthTokenWalletAddress(),
+  ]);
+
+  return (
+    <PosthogIdentifierClient
+      accountId={account?.id}
+      accountAddress={accountAddress || undefined}
+    />
+  );
+}