Fix telemetry

components/Discovery.tsx

@@ -72,17 +72,20 @@ export default function Discovery() {
     })
   }, [isCollapsed])
 
-  const connectWalletService = (wallet: Wallet, service: Service) => {
+  const connectWalletService = async (wallet: Wallet, service: Service) => {
     if (service.method === FCL_SERVICE_METHODS.WC && rpcEnabled) {
       setCurrentView(VIEWS.SCAN_CONNECT)
     } else if (service.method === FCL_SERVICE_METHODS.EXT && rpcEnabled) {
       setCurrentView(VIEWS.CONNECT_EXTENSION)
     } else {
+      await Promise.race([
+        telemetry.trackWalletConnected({
+          walletUid: wallet.uid,
+          serviceMethod: service.method as FCL_SERVICE_METHODS,
+        }),
+        new Promise(resolve => setTimeout(resolve, 1000)),
+      ])
       fcl.WalletUtils.redirect(service)
-      telemetry.trackWalletConnected(
-        wallet.uid,
-        service.method as FCL_SERVICE_METHODS,
-      )
     }
 
     setSelectedWallet(wallet)

components/views/ConnectExtension.tsx

@@ -22,25 +22,28 @@ export default function ConnectExtension({ wallet }: ConnectExtensionProps) {
   const { setLastUsed } = useWalletHistory()
   const telemetry = useTelemetry()
 
-  const connect = () => {
+  const connect = async () => {
     setIsConnecting(true)
-    wallet.services.forEach(service => {
-      if (service.method === FCL_SERVICE_METHODS.EXT) {
-        rpc
-          .request(FclRequest.EXEC_SERVICE, { service })
-          .then(() => {
-            telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.EXT)
-            setLastUsed(wallet)
-            handleCancel()
-          })
-          .catch(e => {
-            console.error('Failed to connect to extension', e)
-          })
-          .finally(() => {
-            setIsConnecting(false)
-          })
-      }
-    })
+    const service = wallet?.services?.find(
+      service => service.method === FCL_SERVICE_METHODS.WC,
+    )
+    if (!service) {
+      return
+    }
+
+    try {
+      await rpc.request(FclRequest.EXEC_SERVICE, { service })
+      setLastUsed(wallet)
+      await telemetry.trackWalletConnected({
+        walletUid: wallet.uid,
+        serviceMethod: FCL_SERVICE_METHODS.EXT,
+      })
+      handleCancel()
+    } catch (e) {
+      console.error('Failed to connect to extension', e)
+    } finally {
+      setIsConnecting(false)
+    }
   }
 
   useEffect(() => {

components/views/ScanConnect/ScanConnectDesktop.tsx

@@ -21,8 +21,11 @@ export default function ScanConnectDesktop({
 }: ScanConnectDesktopProps) {
   const { setLastUsed } = useWalletHistory()
   const telemetry = useTelemetry()
-  const { uri, connecting, error, isLoading } = useWcUri(() => {
-    telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.WC)
+  const { uri, connecting, error, isLoading } = useWcUri(async () => {
+    telemetry.trackWalletConnected({
+      walletUid: wallet.uid,
+      serviceMethod: FCL_SERVICE_METHODS.WC,
+    })
     setLastUsed(wallet)
     handleCancel()
   })

components/views/ScanConnect/ScanConnectMobile.tsx

@@ -23,9 +23,12 @@ export default function ScanConnectMobile({
 }: ScanConnectMobileProps) {
   const { setLastUsed } = useWalletHistory()
   const telemetry = useTelemetry()
-  const { uri, connecting, error, isLoading } = useWcUri(() => {
-    telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.WC)
+  const { uri, connecting, error, isLoading } = useWcUri(async () => {
     setLastUsed(wallet)
+    await telemetry.trackWalletConnected({
+      walletUid: wallet.uid,
+      serviceMethod: FCL_SERVICE_METHODS.WC,
+    })
     handleCancel()
   })
   const shouldOpenLink = useRef(true)

helpers/telemetry/telemetry.client.ts

@@ -1,19 +1,33 @@
-import Mixpanel from 'mixpanel-browser'
-import { trackWalletConnected, trackWalletDiscoveryRequest } from './telemetry'
+import * as Mixpanel from 'mixpanel-browser'
 import { TelemetryDataClient } from './types'
+import { FCL_SERVICE_METHODS } from '../constants'
 
-let mixpanel: any = null
+let mixpanel: Mixpanel.Mixpanel | null = null
 
 export function getTelemetryClient(baseData: TelemetryDataClient) {
   if (process.env.NEXT_PUBLIC_MIXPANEL_ID && !mixpanel) {
     mixpanel = Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
   }
 
   return {
-    trackWalletDiscoveryRequest: trackWalletDiscoveryRequest(
-      mixpanel,
-      baseData,
-    ),
-    trackWalletConnected: trackWalletConnected(mixpanel, baseData),
+    trackWalletConnected: async ({
+      walletUid,
+      serviceMethod,
+    }: {
+      walletUid: string
+      serviceMethod: FCL_SERVICE_METHODS
+    }) => {
+      return new Promise<void>(resolve => {
+        mixpanel?.track(
+          'Wallet Connected',
+          {
+            walletUid: walletUid,
+            method: serviceMethod,
+            ...baseData,
+          },
+          () => resolve(),
+        )
+      })
+    },
   }
 }

helpers/telemetry/telemetry.server.ts

@@ -1,19 +1,17 @@
 import Mixpanel from 'mixpanel'
 import { TelemetryDataServer } from './types'
-import { trackWalletConnected, trackWalletDiscoveryRequest } from './telemetry'
 
-let mixpanel: Mixpanel.Mixpanel | null = null
+let hasInitialized = false
 
 export function getTelemetryServer(baseData: TelemetryDataServer) {
-  if (process.env.NEXT_PUBLIC_MIXPANEL_ID && !mixpanel) {
-    mixpanel = Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
+  if (process.env.NEXT_PUBLIC_MIXPANEL_ID && !hasInitialized) {
+    Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
   }
 
   return {
-    trackWalletDiscoveryRequest: trackWalletDiscoveryRequest(
-      mixpanel,
-      baseData,
-    ),
-    trackWalletConnected: trackWalletConnected(mixpanel, baseData),
+    trackWalletDiscoveryRequest: async () =>
+      new Promise<void>(resolve => {
+        Mixpanel.track('Wallet Discovery Request', baseData, () => resolve())
+      }),
   }
 }