Feat/amplitude linking (#2568)

Author: foodaka

src/components/WalletConnection/ConnectWalletButton.tsx

@@ -1,3 +1,4 @@
+import { Identify, identify, setUserId } from '@amplitude/analytics-browser';
 import { Trans } from '@lingui/macro';
 import { Button } from '@mui/material';
 import { ConnectKitButton } from 'connectkit';
@@ -16,8 +17,8 @@ export interface ConnectWalletProps {
 }
 
 export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel, onClick }) => {
-  const [trackEvent, walletType] = useRootStore(
-    useShallow((store) => [store.trackEvent, store.walletType])
+  const [trackEvent, walletType, account] = useRootStore(
+    useShallow((store) => [store.trackEvent, store.walletType, store.account])
   );
 
   // Track connection attempt duration
@@ -44,6 +45,18 @@ export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel, onCl
     if (!isConnectingRef.current && previousConnectionState.current) {
       // Connection attempt ended
       const duration = connectionStartTime ? Date.now() - connectionStartTime : 0;
+
+      const walletAddress = account;
+      if (walletAddress) {
+        setUserId(walletAddress);
+
+        const identifyObj = new Identify()
+          .set('wallet_connected', true)
+          .set('wallet_type', walletType || 'unknown');
+
+        identify(identifyObj);
+      }
+
       if (isConnectedRef.current) {
         trackEvent(AUTH.WALLET_CONNECT_SUCCESS, {
           funnel,
@@ -62,7 +75,20 @@ export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel, onCl
     }
 
     previousConnectionState.current = isConnectingRef.current;
-  }, [connectionStartTime, funnel, trackEvent, walletType]);
+  }, [connectionStartTime, funnel, trackEvent, walletType, account]);
+
+  useEffect(() => {
+    if (!account && walletType === undefined) {
+      // Wallet disconnected - clear identity
+      const identifyObj = new Identify().set('wallet_connected', false).unset('wallet_type');
+
+      identify(identifyObj);
+
+      trackEvent(AUTH.DISCONNECT_WALLET, {
+        funnel,
+      });
+    }
+  }, [account, walletType, funnel, trackEvent]);
 
   return (
     <>

src/store/analyticsSlice.ts

@@ -1,8 +1,24 @@
-import { init, setOptOut, track } from '@amplitude/analytics-browser';
+import { add, init, setOptOut, track } from '@amplitude/analytics-browser';
 import { StateCreator } from 'zustand';
 
 import { RootStore } from './root';
 
+// Plugin to ensure all events have app_context
+const createAppContextPlugin = (context: string) => ({
+  name: 'app-context-plugin',
+  type: 'enrichment' as const,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  execute: async (event: any) => {
+    return {
+      ...event,
+      event_properties: {
+        ...event.event_properties,
+        app_context: context,
+      },
+    };
+  },
+});
+
 const AMPLITUDE_API_KEY = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY || '';
 
 export type TrackEventProperties = {
@@ -45,6 +61,7 @@ export const createAnalyticsSlice: StateCreator<
         walletAddress: get().account,
         market: properties.market ?? get().currentMarket,
         walletType: get().walletType,
+        app_context: 'app', // Fallback in case plugin doesn't apply
       };
 
       try {
@@ -77,6 +94,7 @@ export const createAnalyticsSlice: StateCreator<
               platform: true,
             },
           });
+          add(createAppContextPlugin('app'));
           set({ eventsTrackingInitialized: true });
         }
 
@@ -93,6 +111,7 @@ export const createAnalyticsSlice: StateCreator<
               platform: false,
             },
           });
+          add(createAppContextPlugin('app'));
           set({ eventsTrackingInitialized: true });
         }