Add telemetry for wallet connection events

components/Discovery.tsx

@@ -19,8 +19,8 @@ import { Service } from '../types'
 import { useConfig, useRpc } from '../contexts/FclContext'
 import { handleCancel } from '../helpers/window'
 import { useDevice } from '../contexts/DeviceContext'
-import { DeviceType } from '../helpers/device'
 import { getCompatibleInstallLinks } from '../hooks/useInstallLinks'
+import { useTelemetry } from '../hooks/useTelemetry'
 
 export enum VIEWS {
   WALLET_SELECTION,
@@ -47,6 +47,7 @@ export default function Discovery() {
   const { deviceInfo } = useDevice()
   const { rpcEnabled } = useRpc()
   const { supportedStrategies } = useConfig()
+  const telemetry = useTelemetry()
 
   // Skip the connect page if there is only one service available and no install links
   const shouldSkipConnectPage = (wallet: Wallet) =>
@@ -78,6 +79,10 @@ export default function Discovery() {
       setCurrentView(VIEWS.CONNECT_EXTENSION)
     } else {
       fcl.WalletUtils.redirect(service)
+      telemetry.trackWalletConnected(
+        wallet.uid,
+        service.method as FCL_SERVICE_METHODS,
+      )
     }
 
     setSelectedWallet(wallet)

components/views/ConnectExtension.tsx

@@ -1,13 +1,14 @@
 import { Button, Heading, Spinner, Stack, Text } from '@chakra-ui/react'
 import { Wallet } from '../../data/wallets'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { FCL_SERVICE_METHODS } from '../../helpers/constants'
 import { useRpc } from '../../contexts/FclContext'
 import { FclRequest } from '../../helpers/rpc'
 import WalletIcon from '../icons/WalletIcon'
 import { useWalletHistory } from '../../hooks/useWalletHistory'
 import { handleCancel } from '../../helpers/window'
 import { ViewContainer } from '../layout/ViewContainer'
+import { useTelemetry } from '../../hooks/useTelemetry'
 
 type ConnectExtensionProps = {
   wallet: Wallet
@@ -19,14 +20,16 @@ export default function ConnectExtension({ wallet }: ConnectExtensionProps) {
   const hasAttemptedConnection = useRef(true)
   const showSpinner = !rpc || isConnecting
   const { setLastUsed } = useWalletHistory()
+  const telemetry = useTelemetry()
 
-  function connect() {
+  const connect = useCallback(() => {
     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.WC)
             setLastUsed(wallet)
             handleCancel()
           })
@@ -38,7 +41,7 @@ export default function ConnectExtension({ wallet }: ConnectExtensionProps) {
           })
       }
     })
-  }
+  }, [rpc, wallet, telemetry, setLastUsed])
 
   useEffect(() => {
     if (!hasAttemptedConnection.current) {

components/views/ScanConnect/ScanConnectDesktop.tsx

@@ -7,6 +7,8 @@ import { useWcUri } from '../../../hooks/useWcUri'
 import { useWalletHistory } from '../../../hooks/useWalletHistory'
 import { handleCancel } from '../../../helpers/window'
 import { ViewContainer } from '../../layout/ViewContainer'
+import { FCL_SERVICE_METHODS } from '../../../helpers/constants'
+import { useTelemetry } from '../../../hooks/useTelemetry'
 
 interface ScanConnectDesktopProps {
   wallet: Wallet
@@ -18,7 +20,9 @@ export default function ScanConnectDesktop({
   onGetWallet,
 }: ScanConnectDesktopProps) {
   const { setLastUsed } = useWalletHistory()
+  const telemetry = useTelemetry()
   const { uri, connecting, error, isLoading } = useWcUri(() => {
+    telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.WC)
     setLastUsed(wallet)
     handleCancel()
   })

components/views/ScanConnect/ScanConnectMobile.tsx

@@ -8,6 +8,7 @@ import { useEffect, useRef } from 'react'
 import { FCL_SERVICE_METHODS } from '../../../helpers/constants'
 import WalletIcon from '../../icons/WalletIcon'
 import { ViewContainer } from '../../layout/ViewContainer'
+import { useTelemetry } from '../../../hooks/useTelemetry'
 
 interface ScanConnectMobileProps {
   wallet: Wallet
@@ -21,7 +22,9 @@ export default function ScanConnectMobile({
   noDeepLink,
 }: ScanConnectMobileProps) {
   const { setLastUsed } = useWalletHistory()
+  const telemetry = useTelemetry()
   const { uri, connecting, error, isLoading } = useWcUri(() => {
+    telemetry.trackWalletConnected(wallet.uid, FCL_SERVICE_METHODS.WC)
     setLastUsed(wallet)
     handleCancel()
   })

helpers/telemetry/telemetry.client.ts

@@ -0,0 +1,21 @@
+import Mixpanel from 'mixpanel-browser'
+import { trackWalletConnected, trackWalletDiscoveryRequest } from './telemetry'
+import { TelemetryDataClient } from './types'
+
+let mixpanel: any = null
+
+export function getTelemetryClient(baseData: TelemetryDataClient) {
+  if (process.env.NEXT_PUBLIC_MIXPANEL_ID && !mixpanel) {
+    mixpanel = Mixpanel.init(process.env.MIXPANEL_ID)
+  }
+
+  mixpanel.register(baseData)
+
+  return {
+    trackWalletDiscoveryRequest: trackWalletDiscoveryRequest(
+      mixpanel,
+      baseData,
+    ),
+    trackWalletConnected: trackWalletConnected(mixpanel, baseData),
+  }
+}

helpers/telemetry/telemetry.server.ts

@@ -0,0 +1,19 @@
+import Mixpanel from 'mixpanel'
+import { TelemetryDataServer } from './types'
+import { trackWalletConnected, trackWalletDiscoveryRequest } from './telemetry'
+
+let mixpanel: Mixpanel.Mixpanel | null = null
+
+export function getTelemetryServer(baseData: TelemetryDataServer) {
+  if (process.env.MIXPANEL_ID && !mixpanel) {
+    mixpanel = Mixpanel.init(process.env.MIXPANEL_ID)
+  }
+
+  return {
+    trackWalletDiscoveryRequest: trackWalletDiscoveryRequest(
+      mixpanel,
+      baseData,
+    ),
+    trackWalletConnected: trackWalletConnected(mixpanel, baseData),
+  }
+}

helpers/telemetry/telemetry.ts

@@ -0,0 +1,24 @@
+import Mixpanel from 'mixpanel'
+import { FCL_SERVICE_METHODS } from '../constants'
+
+export function trackWalletDiscoveryRequest(
+  mixpanel: Mixpanel.Mixpanel,
+  baseData: any,
+) {
+  return () => {
+    mixpanel?.track('Wallet Discovery Request', baseData)
+  }
+}
+
+export function trackWalletConnected(
+  mixpanel: Mixpanel.Mixpanel,
+  baseData: any,
+) {
+  return (walletUid: string, serviceMethod: FCL_SERVICE_METHODS) => {
+    mixpanel?.track('Wallet Connected', {
+      walletUid: walletUid,
+      method: serviceMethod,
+      ...baseData,
+    })
+  }
+}

helpers/telemetry/types.ts

@@ -0,0 +1,13 @@
+export type TelemetryData = {
+  fclVersion: string
+  type: 'UI' | 'API'
+  network: string
+}
+
+export type TelemetryDataServer = TelemetryData & {
+  origin?: string
+}
+
+export type TelemetryDataClient = TelemetryData & {
+  parent: string
+}

hooks/useTelemetry.ts

@@ -0,0 +1,12 @@
+import { useConfig } from '../contexts/FclContext'
+import { getTelemetryClient } from '../helpers/telemetry/telemetry.client'
+
+export function useTelemetry() {
+  const cfg = useConfig()
+  return getTelemetryClient({
+    network: cfg.network,
+    type: 'UI',
+    fclVersion: cfg.appVersion,
+    parent: window?.parent?.location?.href,
+  })
+}

hooks/useWallets.ts

@@ -33,7 +33,12 @@ export function useWallets() {
     port,
   } = useConfig()
 
-  const requestUrl = `/api/${network.toLowerCase()}/wallets?discoveryType=UI&enableExperimentalWalletsEndpoint=true`
+  const params = new URLSearchParams()
+  params.append('discoveryType', 'UI')
+  params.append('enableExperimentalWalletsEndpoint', 'true')
+  params.append('origin', window.location.origin)
+
+  const requestUrl = `/api/${network.toLowerCase()}/wallets?${params.toString()}`
   const body = {
     type: ['authn'],
     fclVersion: appVersion,