react-app: Add analytics for wallet connect and disconnect

refs oursky#349
hochiw · Aug 2, 2022 · d6350da · d6350da
1 parent c3296d0
commit d6350da
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/react-app/src/clients/baseWallet.ts b/react-app/src/clients/baseWallet.ts
@@ -13,15 +13,17 @@ export interface ArbitrarySigner {
 
 export class BaseWallet {
   protected chainInfo: ChainInfo;
-
+  public type: string;
   public offlineSigner: OfflineSigner;
   public provider: WalletProvider;
 
   constructor(
+    type: string,
     chainInfo: ChainInfo,
     offlineSigner: OfflineSigner,
     provider: WalletProvider
   ) {
+    this.type = type;
     this.offlineSigner = offlineSigner;
     this.chainInfo = chainInfo;
     this.provider = provider;

diff --git a/react-app/src/clients/keplrClient.ts b/react-app/src/clients/keplrClient.ts
@@ -5,9 +5,17 @@ import {
   newSignDataMessage,
   SignDataMessageResponse,
 } from "../models/cosmos/tx";
-import { ArbitrarySigner, BaseWallet } from "./baseWallet";
+import { ArbitrarySigner, BaseWallet, WalletProvider } from "./baseWallet";
 
 export class KeplrWallet extends BaseWallet {
+  private constructor(
+    chainInfo: ChainInfo,
+    offlineSigner: OfflineSigner,
+    provider: WalletProvider
+  ) {
+    super("keplr", chainInfo, offlineSigner, provider);
+  }
+
   static async connect(chainInfo: ChainInfo): Promise<KeplrWallet> {
     const keplrClient = window.keplr;
 

diff --git a/react-app/src/clients/walletConnectClient.ts b/react-app/src/clients/walletConnectClient.ts
@@ -32,7 +32,7 @@ export class WalletConnectWallet extends BaseWallet {
     provider: WalletProvider,
     connector: WalletConnect
   ) {
-    super(chainInfo, offlineSigner, provider);
+    super("walletConnect", chainInfo, offlineSigner, provider);
     this.connector = connector;
   }
 

diff --git a/react-app/src/providers/WalletProvider.tsx b/react-app/src/providers/WalletProvider.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { AccountData } from "@cosmjs/proto-signing";
 import { toast } from "react-toastify";
+import * as ReactGA from "react-ga";
 import { KeplrWallet } from "../clients/keplrClient";
 import {
   BaseWallet,
@@ -118,6 +119,11 @@ const WalletProvider: React.FC<WalletProviderProps> = (props) => {
           );
         })
         .finally(() => {
+          ReactGA.event({
+            category: "Wallet",
+            action: "Disconnect",
+            label: activeWallet.type,
+          });
           setActiveWallet(null);
           setAutoConnectWalletType(null);
         });
@@ -148,6 +154,12 @@ const WalletProvider: React.FC<WalletProviderProps> = (props) => {
       setAccountBalance(accountBalance);
       setAutoConnectWalletType(AutoConnectWalletType.Keplr);
       setWalletStatus(ConnectionStatus.Connected);
+
+      ReactGA.event({
+        category: "Wallet",
+        action: "Connect",
+        label: wallet.type,
+      });
       // Validate the token in case the logged in wallet has a different account than the authenticated address
       await authAPI.validate(account.address);
     } catch (err: unknown) {
@@ -190,6 +202,12 @@ const WalletProvider: React.FC<WalletProviderProps> = (props) => {
       setAccountBalance(accountBalance);
       setAutoConnectWalletType(AutoConnectWalletType.WalletConnect);
       setWalletStatus(ConnectionStatus.Connected);
+
+      ReactGA.event({
+        category: "Wallet",
+        action: "Connect",
+        label: wallet.type,
+      });
       // Validate the token in case the logged in wallet has a different account than the authenticated address
       await authAPI.validate(account.address);
     } catch (err: unknown) {