posthog migration: part 2 (#7364)

# Add PostHog Analytics Identification for Accounts and Teams

This PR adds analytics tracking capabilities to identify users and teams in PostHog:

- Created two new hooks:
  - `useIdentifyAccount`: Identifies users by their account ID and optional email
  - `useIdentifyTeam`: Identifies teams by their team ID using PostHog's group functionality

- Implemented these hooks in the `TeamHeaderLoggedIn` component to track both the current user and team

Both hooks include safety checks to ensure PostHog is properly loaded before attempting to identify users or teams.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on integrating `posthog-js` analytics functionalities into various components of the application, specifically for resetting analytics on logout and identifying users and teams.

### Detailed summary
- Added `resetAnalytics` function in `reset.ts` to reset analytics.
- Implemented `useIdentifyTeam` hook in `identify-team.ts` for team identification.
- Implemented `useIdentifyAccount` hook in `identify-account.ts` for account identification.
- Integrated `resetAnalytics` in logout processes across multiple components:
  - `CustomConnectWallet`
  - `AccountHeader`
  - `AccountSettingsPage`
  - `LoginPage`
  - `TeamHeaderLoggedIn`
- Updated ESLint rules to allow direct imports of `posthog-js` within analytics helpers.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Introduced automatic analytics identification for user accounts and teams within the dashboard.
	- Added a function to reset analytics data, now triggered on logout, wallet disconnection, and account deletion.

- **Chores**
	- Updated internal configuration to ensure analytics tracking is consistently managed and restricted to designated areas.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jnsdls

apps/dashboard/.eslintrc.js

@@ -110,6 +110,11 @@ module.exports = {
             message:
               'This is likely a mistake. If you really want to import this - postfix the imported name with Icon. Example - "LinkIcon"',
           },
+          {
+            name: "posthog-js",
+            message:
+              'Import "posthog-js" directly only within the analytics helpers ("src/@/analytics/*"). Use the exported helpers from "@/analytics/track" elsewhere.',
+          },
         ],
       },
     ],
@@ -139,6 +144,13 @@ module.exports = {
         "no-restricted-imports": ["off"],
       },
     },
+    // allow direct PostHog imports inside analytics helpers
+    {
+      files: "src/@/analytics/**/*",
+      rules: {
+        "no-restricted-imports": ["off"],
+      },
+    },
     // enable rule specifically for TypeScript files
     {
       files: ["*.ts", "*.tsx"],

apps/dashboard/src/@/analytics/hooks/identify-account.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import posthog from "posthog-js";
+import { useEffect } from "react";
+
+export function useIdentifyAccount(opts?: {
+  accountId: string;
+  email?: string;
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // if no accountId, don't identify
+    if (!opts?.accountId) {
+      return;
+    }
+
+    // if email is provided, add it to the identify
+    posthog.identify(opts.accountId, opts.email ? { email: opts.email } : {});
+  }, [opts?.accountId, opts?.email]);
+}

apps/dashboard/src/@/analytics/hooks/identify-team.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import posthog from "posthog-js";
+import { useEffect } from "react";
+
+export function useIdentifyTeam(opts?: {
+  teamId: string;
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // if no teamId, don't identify
+    if (!opts?.teamId) {
+      return;
+    }
+
+    // identify the team
+    posthog.group("team", opts.teamId);
+  }, [opts?.teamId]);
+}

apps/dashboard/src/@/analytics/reset.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import posthog from "posthog-js";
+
+export function resetAnalytics() {
+  posthog.reset();
+}

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { resetAnalytics } from "@/analytics/reset";
 import { Button } from "@/components/ui/button";
 import { useStore } from "@/lib/reactive";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
@@ -156,6 +157,7 @@ export const CustomConnectWallet = (props: {
         onDisconnect={async () => {
           try {
             await doLogout();
+            resetAnalytics();
           } catch (err) {
             console.error("Failed to log out", err);
           }

apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { createTeam } from "@/actions/createTeam";
+import { resetAnalytics } from "@/analytics/reset";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -35,6 +36,7 @@ export function AccountHeader(props: {
   const logout = useCallback(async () => {
     try {
       await doLogout();
+      resetAnalytics();
       if (wallet) {
         disconnect(wallet);
       }

apps/dashboard/src/app/(app)/account/settings/AccountSettingsPage.tsx

@@ -2,6 +2,7 @@
 import { confirmEmailWithOTP } from "@/actions/confirmEmail";
 import { apiServerProxy } from "@/actions/proxies";
 import { updateAccount } from "@/actions/updateAccount";
+import { resetAnalytics } from "@/analytics/reset";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebClient } from "thirdweb";
@@ -46,6 +47,7 @@ export function AccountSettingsPage(props: {
           }}
           onAccountDeleted={async () => {
             await doLogout();
+            resetAnalytics();
             if (activeWallet) {
               disconnect(activeWallet);
             }

apps/dashboard/src/app/(app)/login/LoginPage.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { getRawAccountAction } from "@/actions/getAccount";
+import { resetAnalytics } from "@/analytics/reset";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
@@ -313,7 +314,10 @@ function CustomConnectEmbed(props: {
                 throw e;
               }
             },
-            doLogout,
+            doLogout: async () => {
+              await doLogout();
+              resetAnalytics();
+            },
             isLoggedIn: async (x) => {
               const isLoggedInResult = await isLoggedIn(x);
               if (isLoggedInResult) {

apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx

@@ -1,6 +1,9 @@
 "use client";
 
 import { createTeam } from "@/actions/createTeam";
+import { useIdentifyAccount } from "@/analytics/hooks/identify-account";
+import { useIdentifyTeam } from "@/analytics/hooks/identify-team";
+import { resetAnalytics } from "@/analytics/reset";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -12,7 +15,6 @@ import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { doLogout } from "../../../login/auth-actions";
-
 import {
   type TeamHeaderCompProps,
   TeamHeaderDesktopUI,
@@ -27,6 +29,16 @@ export function TeamHeaderLoggedIn(props: {
   accountAddress: string;
   client: ThirdwebClient;
 }) {
+  // identify the account
+  useIdentifyAccount({
+    accountId: props.account.id,
+    email: props.account.email,
+  });
+
+  // identify the team
+  useIdentifyTeam({
+    teamId: props.currentTeam.id,
+  });
   const [createProjectDialogState, setCreateProjectDialogState] = useState<
     { team: Team; isOpen: true } | { isOpen: false }
   >({ isOpen: false });
@@ -38,6 +50,7 @@ export function TeamHeaderLoggedIn(props: {
     // log out the user
     try {
       await doLogout();
+      resetAnalytics();
       if (activeWallet) {
         disconnect(activeWallet);
       }

apps/dashboard/src/instrumentation-client.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import posthog from "posthog-js";
 
 const NEXT_PUBLIC_POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;