feat: wallet connect details (#2532)

Author: foodaka

src/components/WalletConnection/ConnectWalletButton.tsx

@@ -1,8 +1,10 @@
 import { Trans } from '@lingui/macro';
 import { Button } from '@mui/material';
 import { ConnectKitButton } from 'connectkit';
+import { useEffect, useRef, useState } from 'react';
 import { useRootStore } from 'src/store/root';
 import { AUTH } from 'src/utils/events';
+import { useShallow } from 'zustand/shallow';
 
 import { AvatarSize } from '../Avatar';
 import { UserDisplay } from '../UserDisplay';
@@ -14,19 +16,75 @@ export interface ConnectWalletProps {
 }
 
 export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel, onClick }) => {
-  const trackEvent = useRootStore((store) => store.trackEvent);
+  const [trackEvent, walletType] = useRootStore(
+    useShallow((store) => [store.trackEvent, store.walletType])
+  );
+
+  // Track connection attempt duration
+  const [connectionStartTime, setConnectionStartTime] = useState<number | null>(null);
+  const previousConnectionState = useRef<boolean>(false);
+  const isConnectingRef = useRef<boolean>(false);
+  const isConnectedRef = useRef<boolean>(false);
+
+  const connectionAttempts = useRef<number>(0);
+
+  // Track connection state changes
+  useEffect(() => {
+    if (isConnectingRef.current && !previousConnectionState.current) {
+      // Connection attempt started
+      setConnectionStartTime(Date.now());
+      connectionAttempts.current += 1;
+      trackEvent(AUTH.WALLET_CONNECT_START, {
+        funnel,
+        attempt_number: connectionAttempts.current,
+        previous_wallet_type: walletType,
+      });
+    }
+
+    if (!isConnectingRef.current && previousConnectionState.current) {
+      // Connection attempt ended
+      const duration = connectionStartTime ? Date.now() - connectionStartTime : 0;
+      if (isConnectedRef.current) {
+        trackEvent(AUTH.WALLET_CONNECT_SUCCESS, {
+          funnel,
+          wallet_type: walletType,
+          connection_duration_ms: duration,
+          attempts_until_success: connectionAttempts.current,
+        });
+      } else {
+        trackEvent(AUTH.WALLET_CONNECT_ABORT, {
+          funnel,
+          connection_duration_ms: duration,
+          attempt_number: connectionAttempts.current,
+        });
+      }
+      setConnectionStartTime(null);
+    }
+
+    previousConnectionState.current = isConnectingRef.current;
+  }, [connectionStartTime, funnel, trackEvent, walletType]);
 
   return (
     <>
       <ConnectKitButton.Custom>
-        {({ isConnected, show }) => {
+        {({ isConnected, show, isConnecting }) => {
+          // Update refs for tracking
+          isConnectingRef.current = isConnecting;
+          isConnectedRef.current = isConnected;
+
           return (
             <Button
               variant={isConnected ? 'surface' : 'gradient'}
               onClick={() => {
+                // Track initial button click
+                trackEvent(AUTH.CONNECT_WALLET, {
+                  funnel,
+                  current_url: window.location.pathname,
+                  is_reconnect_attempt: connectionAttempts.current > 0,
+                });
+
                 onClick && onClick();
                 show && show();
-                trackEvent(AUTH.CONNECT_WALLET, { funnel: funnel });
               }}
             >
               {isConnected ? (

src/utils/events.ts

@@ -1,12 +1,15 @@
 export const AUTH = {
-  CONNECT_WALLET: 'Connect wallet', //done
-  SWITCH_WALLET: 'Switch wallet', //done
-  MOCK_WALLET: 'Mock wallet', //done
-  DISCONNECT_WALLET: 'Disconnect wallet', //done
-  COPY_ADDRESS: 'Copy address', // done
-  VIEW_EXPLORER: 'View explorer', // done
-  VIEW_TX_HISTORY: 'View Tx History',
-};
+  CONNECT_WALLET: 'Connect Wallet',
+  SWITCH_WALLET: 'Switch Wallet',
+  MOCK_WALLET: 'Mock Wallet',
+  DISCONNECT_WALLET: 'Disconnect Wallet',
+  COPY_ADDRESS: 'Copy Address',
+  VIEW_EXPLORER: 'View Explorer',
+  VIEW_TX_HISTORY: 'View Transaction History',
+  WALLET_CONNECT_START: 'Wallet Connect Start',
+  WALLET_CONNECT_SUCCESS: 'Wallet Connect Success',
+  WALLET_CONNECT_ABORT: 'Wallet Connect Abort',
+} as const;
 
 export const GENERAL = {
   SWITCH_NETWORK: 'Switch network',