feat: ga4

package.json

@@ -122,7 +122,6 @@
     "react": "17.0.2",
     "react-countup": "6.5.0",
     "react-dom": "17.0.2",
-    "react-ga": "3.3.0",
     "react-idle-timer": "5.7.2",
     "react-markdown": "7.1.0",
     "react-redux": "8.0.1",

src/background/controller/wallet.ts

@@ -133,6 +133,7 @@ import Browser from 'webextension-polyfill';
 import { hashSafeMessage } from '@safe-global/protocol-kit';
 import { userGuideService } from '../service/userGuide';
 import { metamaskModeService } from '../service/metamaskModeService';
+import { ga4 } from '@/utils/ga4';
 
 const stashKeyrings: Record<string | number, any> = {};
 
@@ -4874,6 +4875,10 @@ export class WalletController extends BaseController {
         action: 'Success Add Network',
         label: `${source}_${String(chain.id)}`,
       });
+
+      ga4.fireEvent('Add_CustomNetwork', {
+        event_category: 'Custom Network',
+      });
     }
     return res;
   };

src/background/index.ts

@@ -54,6 +54,8 @@ import { isSameAddress } from './utils';
 import rpcCache from './utils/rpcCache';
 import { storage } from './webapi';
 import { metamaskModeService } from './service/metamaskModeService';
+import { ga4 } from '@/utils/ga4';
+import { ALARMS_USER_ENABLE } from './utils/alarms';
 
 Safe.adapter = fetchAdapter as any;
 
@@ -116,9 +118,14 @@ async function restoreAppState() {
   syncChainService.roll();
   transactionWatchService.roll();
   transactionBroadcastWatchService.roll();
-  startEnableUser();
   walletController.syncMainnetChainList();
 
+  // check if user has enabled the extension
+  chrome.alarms.create(ALARMS_USER_ENABLE, {
+    when: Date.now(),
+    periodInMinutes: 60,
+  });
+
   if (!keyringService.isBooted()) {
     userGuideService.init();
   }
@@ -171,6 +178,10 @@ restoreAppState();
           action: 'Custom Network Status',
           value: customTestnetLength,
         });
+
+        ga4.fireEvent('Has Custom Network', {
+          event_category: 'Custom Network',
+        });
       }
       const chains = preferenceService.getSavedChains();
       matomoRequestEvent({
@@ -201,6 +212,10 @@ restoreAppState();
           label: [group[0].action, group[0].label, group.length].join('|'),
           value: group.length,
         });
+
+        ga4.fireEvent(`${group[0].category}_${group[0].label}`, {
+          event_category: 'UserAddress',
+        });
       });
       preferenceService.updateSendLogTime(Date.now());
     };
@@ -422,6 +437,10 @@ function startEnableUser() {
     category: 'User',
     action: 'enable',
   });
+
+  ga4.fireEvent('User_Enable', {
+    event_category: 'User Enable',
+  });
   preferenceService.updateSendEnableTime(Date.now());
 }
 
@@ -434,3 +453,9 @@ async function onInstall() {
     await userGuideService.openUserGuide();
   }
 }
+
+browser.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === ALARMS_USER_ENABLE) {
+    startEnableUser();
+  }
+});

src/background/service/customTestnet.ts

@@ -20,6 +20,7 @@ import { http as axios } from '../utils/http';
 import { matomoRequestEvent } from '@/utils/matomo-request';
 import RPCService, { RPCServiceStore } from './rpc';
 import { storage } from '../webapi';
+import { ga4 } from '@/utils/ga4';
 
 const MAX_READ_CONTRACT_TIME = 8000;
 
@@ -194,6 +195,10 @@ class CustomTestnetService {
         action: 'Custom Network Status',
         value: this.getList().length,
       });
+
+      ga4.fireEvent('Has_CustomNetwork', {
+        event_category: 'Custom Network',
+      });
     }
     return this.store.customTestnet[chain.id];
   };
@@ -211,6 +216,10 @@ class CustomTestnetService {
         action: 'Custom Network Status',
         value: this.getList().length,
       });
+
+      ga4.fireEvent('Has_CustomNetwork', {
+        event_category: 'Custom Network',
+      });
     }
   };
 

src/background/utils/alarms.ts

@@ -1,2 +1,3 @@
 export const ALARMS_SYNC_CHAINS = 'ALARMS_SYNC_CHAINS';
 export const ALARMS_SYNC_METAMASK_DAPPS = 'ALARMS_SYNC_METAMASK_DAPPS';
+export const ALARMS_USER_ENABLE = 'ALARMS_USER_ENABLE';

src/ui/utils/sendPersonalMessage.ts

@@ -3,6 +3,7 @@ import { WalletControllerType } from '@/ui/utils';
 import { getKRCategoryByType } from '@/utils/transaction';
 import eventBus from '@/eventBus';
 import { matomoRequestEvent } from '@/utils/matomo-request';
+import { ga4 } from '@/utils/ga4';
 
 // fail code
 export enum FailedCode {
@@ -37,6 +38,17 @@ const report = async ({
     ].join('|'),
     transport: 'beacon',
   });
+
+  if (action === 'createSignText') {
+    ga4.fireEvent('Init_SignText', {
+      event_category: 'SignText',
+    });
+  } else if (action === 'startSignText') {
+    ga4.fireEvent('Submit_SignText', {
+      event_category: 'SignText',
+    });
+  }
+
   await wallet.reportStats(action, {
     type: currentAccount.brandName,
     category: getKRCategoryByType(currentAccount.type),

src/ui/views/Approval/components/CoinbaseWaiting/index.tsx

@@ -17,6 +17,7 @@ import { useSessionStatus } from '@/ui/component/WalletConnect/useSessionStatus'
 import { adjustV } from '@/ui/utils/gnosis';
 import { findChain, findChainByEnum } from '@/utils/chain';
 import { emitSignComponentAmounted } from '@/utils/signEvent';
+import { ga4 } from '@/utils/ga4';
 
 interface ApprovalParams {
   address: string;
@@ -175,6 +176,14 @@ const CoinbaseWaiting = ({ params }: { params: ApprovalParams }) => {
         action: 'Submit',
         label: chainInfo?.isTestnet ? 'Custom Network' : 'Integrated Network',
       });
+
+      ga4.fireEvent(
+        `Submit_${chainInfo?.isTestnet ? 'Custom' : 'Integrated'}`,
+        {
+          event_category: 'Transaction',
+        }
+      );
+
       isSignTriggered = true;
     }
     if (isText && !isSignTriggered) {

src/ui/views/Approval/components/CommonWaiting.tsx

@@ -22,6 +22,7 @@ import { adjustV } from '@/ui/utils/gnosis';
 import { message } from 'antd';
 import { findChain } from '@/utils/chain';
 import { emitSignComponentAmounted } from '@/utils/signEvent';
+import { ga4 } from '@/utils/ga4';
 
 interface ApprovalParams {
   address: string;
@@ -191,6 +192,11 @@ export const CommonWaiting = ({ params }: { params: ApprovalParams }) => {
           action: 'Submit',
           label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
         });
+
+        ga4.fireEvent(`Submit_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+          event_category: 'Transaction',
+        });
+
         setSignFinishedData({
           data: sig,
           approvalId: approval.id,

src/ui/views/Approval/components/ImKeyHardwareWaiting.tsx

@@ -29,6 +29,7 @@ import { useImKeyStatus } from '@/ui/component/ConnectStatus/useImKeyStatus';
 import * as Sentry from '@sentry/browser';
 import { findChain } from '@/utils/chain';
 import { emitSignComponentAmounted } from '@/utils/signEvent';
+import { ga4 } from '@/utils/ga4';
 
 interface ApprovalParams {
   address: string;
@@ -208,6 +209,10 @@ export const ImKeyHardwareWaiting = ({
           label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
         });
 
+        ga4.fireEvent(`Submit_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+          event_category: 'Transaction',
+        });
+
         setSignFinishedData({
           data: sig,
           approvalId: approval.id,

src/ui/views/Approval/components/LedgerHardwareWaiting.tsx

@@ -23,6 +23,7 @@ import {
   Props as ApprovalPopupContainerProps,
 } from './Popup/ApprovalPopupContainer';
 import { isLedgerLockError } from '@/ui/utils/ledger';
+import { ga4 } from '@/utils/ga4';
 
 interface ApprovalParams {
   address: string;
@@ -198,6 +199,10 @@ const LedgerHardwareWaiting = ({ params }: { params: ApprovalParams }) => {
           label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
         });
 
+        ga4.fireEvent(`Submit_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+          event_category: 'Transaction',
+        });
+
         setSignFinishedData({
           data: sig,
           approvalId: approval.id,

src/ui/views/Approval/components/PrivatekeyWaiting.tsx

@@ -30,6 +30,7 @@ import { id } from 'ethers/lib/utils';
 import { findChain } from '@/utils/chain';
 import { emitSignComponentAmounted } from '@/utils/signEvent';
 import { SafeClientTxStatus } from '@safe-global/sdk-starter-kit/dist/src/constants';
+import { ga4 } from '@/utils/ga4';
 
 interface ApprovalParams {
   address: string;
@@ -204,6 +205,11 @@ export const PrivatekeyWaiting = ({ params }: { params: ApprovalParams }) => {
           action: 'Submit',
           label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
         });
+
+        ga4.fireEvent(`Submit_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+          event_category: 'Transaction',
+        });
+
         setSignFinishedData({
           data: sig,
           approvalId: approval.id,

src/ui/views/Approval/components/SignTestnetTx/index.tsx

@@ -41,6 +41,7 @@ import { SignAdvancedSettings } from '../SignAdvancedSettings';
 import clsx from 'clsx';
 import { useGasAccountSign } from '@/ui/views/GasAccount/hooks';
 import { Modal } from 'antd';
+import { ga4 } from '@/utils/ga4';
 
 const checkGasAndNonce = ({
   recommendGasLimitRatio,
@@ -385,6 +386,10 @@ export const SignTestnetTx = ({ params, origin }: SignTxProps) => {
         action: 'init',
         label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
       });
+      ga4.fireEvent(`Init_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+        event_category: 'Transaction',
+      });
+
       if (currentAccount.type === KEYRING_TYPE.GnosisKeyring) {
         setIsGnosisAccount(true);
       }
@@ -677,6 +682,11 @@ export const SignTestnetTx = ({ params, origin }: SignTxProps) => {
       action: 'Submit',
       label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
     });
+
+    ga4.fireEvent(`Submit_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+      event_category: 'Transaction',
+    });
+
     resolveApproval({
       ...transaction,
       nonce: realNonce || tx.nonce,

src/ui/views/Approval/components/SignText.tsx

@@ -49,6 +49,7 @@ import { generateTypedData } from '@safe-global/protocol-kit';
 import { useGetCurrentSafeInfo } from '../hooks/useGetCurrentSafeInfo';
 import { useGetMessageHash } from '../hooks/useGetCurrentMessageHash';
 import { useCheckCurrentSafeMessage } from '../hooks/useCheckCurrentSafeMessage';
+import { ga4 } from '@/utils/ga4';
 
 interface SignTextProps {
   data: string[];
@@ -195,6 +196,17 @@ const SignText = ({ params }: { params: SignTextProps }) => {
       ].join('|'),
       transport: 'beacon',
     });
+
+    if (action === 'createSignText') {
+      ga4.fireEvent('Init_SignText', {
+        event_category: 'SignText',
+      });
+    } else if (action === 'startSignText') {
+      ga4.fireEvent('Submit_SignText', {
+        event_category: 'SignText',
+      });
+    }
+
     await wallet.reportStats(action, {
       type: currentAccount.brandName,
       category: getKRCategoryByType(currentAccount.type),

src/ui/views/Approval/components/SignTx.tsx

@@ -86,6 +86,7 @@ import {
   ActionRequireData,
   ParsedTransactionActionData,
 } from '@rabby-wallet/rabby-action';
+import { ga4 } from '@/utils/ga4';
 
 interface BasicCoboArgusInfo {
   address: string;
@@ -1217,6 +1218,11 @@ const SignTx = ({ params, origin }: SignTxProps) => {
       action: 'Submit',
       label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
     });
+
+    ga4.fireEvent(`Submit_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+      event_category: 'Transaction',
+    });
+
     resolveApproval({
       ...transaction,
       nonce: realNonce || tx.nonce,
@@ -1606,6 +1612,10 @@ const SignTx = ({ params, origin }: SignTxProps) => {
         label: chain?.isTestnet ? 'Custom Network' : 'Integrated Network',
       });
 
+      ga4.fireEvent(`Init_${chain?.isTestnet ? 'Custom' : 'Integrated'}`, {
+        event_category: 'Transaction',
+      });
+
       if (currentAccount.type === KEYRING_TYPE.GnosisKeyring) {
         setIsGnosisAccount(true);
         await getSafeInfo();

src/ui/views/Approval/components/SignTypedData.tsx

@@ -56,6 +56,7 @@ import { useGetMessageHash } from '../hooks/useGetCurrentMessageHash';
 import { useCheckCurrentSafeMessage } from '../hooks/useCheckCurrentSafeMessage';
 import GnosisDrawer from './TxComponents/GnosisDrawer';
 import { generateTypedData } from '@safe-global/protocol-kit';
+import { ga4 } from '@/utils/ga4';
 
 interface SignTypedDataProps {
   method: string;
@@ -340,6 +341,17 @@ const SignTypedData = ({ params }: { params: SignTypedDataProps }) => {
         ].join('|'),
         transport: 'beacon',
       });
+
+      if (action === 'createSignText') {
+        ga4.fireEvent('Init_SignText', {
+          event_category: 'SignText',
+        });
+      } else if (action === 'startSignText') {
+        ga4.fireEvent('Submit_SignText', {
+          event_category: 'SignText',
+        });
+      }
+
       await wallet.reportStats(action, {
         type: currentAccount.brandName,
         category: getKRCategoryByType(currentAccount.type),

src/ui/views/Approval/components/WatchAddressWaiting/index.tsx

@@ -18,6 +18,7 @@ import { useSessionStatus } from '@/ui/component/WalletConnect/useSessionStatus'
 import { adjustV } from '@/ui/utils/gnosis';
 import { findChain, findChainByEnum } from '@/utils/chain';
 import { emitSignComponentAmounted } from '@/utils/signEvent';
+import { ga4 } from '@/utils/ga4';
 
 interface ApprovalParams {
   address: string;
@@ -255,6 +256,14 @@ const WatchAddressWaiting = ({ params }: { params: ApprovalParams }) => {
                 ? 'Custom Network'
                 : 'Integrated Network',
             });
+
+            ga4.fireEvent(
+              `Submit_${chainInfo?.isTestnet ? 'Custom' : 'Integrated'}`,
+              {
+                event_category: 'Transaction',
+              }
+            );
+
             isSignTriggered = true;
           }
           if (isText && !isSignTriggered) {