Fix "Wallet Connected" Telemetry (#276)

components/Discovery.tsx

@@ -78,11 +78,11 @@ export default function Discovery() {
     } else if (service.method === FCL_SERVICE_METHODS.EXT && rpcEnabled) {
       setCurrentView(VIEWS.CONNECT_EXTENSION)
     } else {
+      telemetry.trackWalletConnected({
+        walletUid: wallet.uid,
+        serviceMethod: service.method as FCL_SERVICE_METHODS,
+      })
       fcl.WalletUtils.redirect(service)
-      telemetry.trackWalletConnected(
-        wallet.uid,
-        service.method as FCL_SERVICE_METHODS,
-      )
     }
 
     setSelectedWallet(wallet)

components/views/ConnectExtension.tsx

@@ -29,7 +29,10 @@ export default function ConnectExtension({ wallet }: ConnectExtensionProps) {
         rpc
           .request(FclRequest.EXEC_SERVICE, { service })
           .then(() => {
-            telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.EXT)
+            telemetry.trackWalletConnected({
+              walletUid: wallet.uid,
+              serviceMethod: FCL_SERVICE_METHODS.WC,
+            })
             setLastUsed(wallet)
             handleCancel()
           })

components/views/ScanConnect/ScanConnectDesktop.tsx

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

components/views/ScanConnect/ScanConnectMobile.tsx

@@ -24,7 +24,10 @@ export default function ScanConnectMobile({
   const { setLastUsed } = useWalletHistory()
   const telemetry = useTelemetry()
   const { uri, connecting, error, isLoading } = useWcUri(() => {
-    telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.WC)
+    telemetry.trackWalletConnected({
+      walletUid: wallet.uid,
+      serviceMethod: FCL_SERVICE_METHODS.WC,
+    })
     setLastUsed(wallet)
     handleCancel()
   })

helpers/telemetry/telemetry.client.ts

@@ -1,19 +1,25 @@
-import Mixpanel from 'mixpanel-browser'
-import { trackWalletConnected, trackWalletDiscoveryRequest } from './telemetry'
+import mixpanel from 'mixpanel-browser'
 import { TelemetryDataClient } from './types'
+import { FCL_SERVICE_METHODS } from '../constants'
 
-let mixpanel: any = null
-
-export function getTelemetryClient(baseData: TelemetryDataClient) {
-  if (process.env.NEXT_PUBLIC_MIXPANEL_ID && !mixpanel) {
-    mixpanel = Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
-  }
+if (process.env.NEXT_PUBLIC_MIXPANEL_ID) {
+  mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
+}
 
+export function clientTelemetry(baseData: TelemetryDataClient) {
   return {
-    trackWalletDiscoveryRequest: trackWalletDiscoveryRequest(
-      mixpanel,
-      baseData,
-    ),
-    trackWalletConnected: trackWalletConnected(mixpanel, baseData),
+    trackWalletConnected: ({
+      walletUid,
+      serviceMethod,
+    }: {
+      walletUid: string
+      serviceMethod: FCL_SERVICE_METHODS
+    }) => {
+      mixpanel.track('Wallet Connected', {
+        walletUid: walletUid,
+        method: serviceMethod,
+        ...baseData,
+      })
+    },
   }
 }

helpers/telemetry/telemetry.server.ts

@@ -1,19 +1,14 @@
 import Mixpanel from 'mixpanel'
 import { TelemetryDataServer } from './types'
-import { trackWalletConnected, trackWalletDiscoveryRequest } from './telemetry'
 
 let mixpanel: Mixpanel.Mixpanel | null = null
+if (process.env.NEXT_PUBLIC_MIXPANEL_ID) {
+  Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
+}
 
-export function getTelemetryServer(baseData: TelemetryDataServer) {
-  if (process.env.NEXT_PUBLIC_MIXPANEL_ID && !mixpanel) {
-    mixpanel = Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID)
-  }
-
+export function serverTelemetry(baseData: TelemetryDataServer) {
   return {
-    trackWalletDiscoveryRequest: trackWalletDiscoveryRequest(
-      mixpanel,
-      baseData,
-    ),
-    trackWalletConnected: trackWalletConnected(mixpanel, baseData),
+    trackWalletDiscoveryRequest: () =>
+      mixpanel?.track('Wallet Discovery Request', baseData),
   }
 }

hooks/useTelemetry.ts

@@ -1,9 +1,9 @@
 import { useConfig } from '../contexts/FclContext'
-import { getTelemetryClient } from '../helpers/telemetry/telemetry.client'
+import { clientTelemetry } from '../helpers/telemetry/telemetry.client'
 
 export function useTelemetry() {
   const cfg = useConfig()
-  return getTelemetryClient({
+  return clientTelemetry({
     network: cfg.network,
     type: 'UI',
     fclVersion: cfg.appVersion,

pages/api/[network]/_common.ts

@@ -5,7 +5,7 @@ import { findMatchingPipeVersion } from '../../../helpers/version'
 import { NETWORKS } from '../../../helpers/constants'
 import { getWalletPipes } from '../../../helpers/wallet-pipes'
 import { NextApiRequest } from 'next'
-import { getTelemetryServer } from '../../../helpers/telemetry/telemetry.server'
+import { serverTelemetry } from '../../../helpers/telemetry/telemetry.server'
 
 // Initializing the cors middleware
 export const cors = Cors({
@@ -41,7 +41,7 @@ export async function getWalletsFromRequest(
   const discoveryRequestType = discoveryType || 'API'
   const services = clientServices || extensions || []
 
-  getTelemetryServer({
+  serverTelemetry({
     type: discoveryRequestType as 'UI' | 'API',
     network,
     fclVersion,