feat: adding TransactionTimeToConfirmation event for confirmations

Signed-off-by: ryanml <[email protected]>

Author: ryanml

src/background/services/wallet/handlers/eth_sendTransaction/models.ts

@@ -21,6 +21,7 @@ export enum TransactionType {
   SWAP = 'swap',
   ADD_LIQUIDITY = 'add_liquidity',
   CALL = 'call',
+  BRIDGE = 'bridge',
 }
 
 export interface TransactionToken {

src/contexts/AnalyticsProvider.tsx

@@ -15,6 +15,12 @@ import { filter, first, from, merge } from 'rxjs';
 import { useConnectionContext } from './ConnectionProvider';
 import { useSettingsContext } from './SettingsProvider';
 import { AnalyticsConsent } from '@src/background/services/settings/models';
+import { TransactionType } from '@src/background/services/wallet/handlers/eth_sendTransaction/models';
+
+export enum TimeMeasureEventNames {
+  TRANSACTION_SUCCEEDED = 'transaction-succeeded',
+  TRANSACTION_APPROVED = 'transaction-approved',
+}
 
 type CaptureFn = (
   eventName: string,
@@ -29,6 +35,13 @@ const AnalyticsContext = createContext<{
   stopDataCollection: () => Promise<void>;
   capture: CaptureFn;
   captureEncrypted: CaptureFn;
+  captureTime: ({
+    txType,
+    chainId,
+  }: {
+    txType: TransactionType;
+    chainId: number | undefined;
+  }) => void;
 }>({} as any);
 
 const windowId = crypto.randomUUID();
@@ -99,6 +112,31 @@ export function AnalyticsContextProvider({ children }: { children: any }) {
     });
   }, [request]);
 
+  const captureTime = useCallback(
+    ({
+      txType,
+      chainId,
+    }: {
+      txType: TransactionType;
+      chainId: number | undefined;
+    }) => {
+      try {
+        const measurement = performance.measure(
+          TimeMeasureEventNames.TRANSACTION_SUCCEEDED,
+          TimeMeasureEventNames.TRANSACTION_APPROVED
+        );
+        capture('TransactionTimeToConfirmation', {
+          chainId: chainId,
+          time: measurement.duration,
+          txOrigin: txType,
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    [capture]
+  );
+
   useEffect(() => {
     const subscription = merge(
       from(
@@ -131,6 +169,7 @@ export function AnalyticsContextProvider({ children }: { children: any }) {
         isInitialized,
         initAnalyticsIds,
         stopDataCollection,
+        captureTime,
       }}
     >
       {children}

src/pages/Bridge/Bridge.tsx

@@ -80,6 +80,7 @@ import { CustomFees, GasFeeModifier } from '@src/components/common/CustomFees';
 import { CustomGasSettings } from '@src/background/services/bridge/models';
 import { isBitcoinNetwork } from '@src/background/services/network/utils/isBitcoinNetwork';
 import { useNetworkFeeContext } from '@src/contexts/NetworkFeeProvider';
+import { TransactionType } from '@src/background/services/wallet/handlers/eth_sendTransaction/models';
 
 function formatBalance(balance: Big | undefined) {
   return balance ? formatTokenAmount(balance, 6) : '-';
@@ -143,7 +144,7 @@ export function Bridge() {
   const history = useHistory();
   const [isTokenSelectOpen, setIsTokenSelectOpen] = useState(false);
   const [isSwitched, setIsSwitched] = useState(false);
-  const { capture, captureEncrypted } = useAnalyticsContext();
+  const { capture, captureEncrypted, captureTime } = useAnalyticsContext();
   const { getPageHistoryData, setNavigationHistoryData } = usePageHistory();
   const { sendTokenSelectedAnalytics, sendAmountEnteredAnalytics } =
     useSendAnalyticsData();
@@ -605,12 +606,22 @@ export function Bridge() {
       return;
     }
 
+    const blockChainNetwork = blockchainToNetwork(
+      currentBlockchain,
+      networks,
+      bridgeConfig
+    );
+
     captureEncrypted('BridgeTransferRequestSucceeded', {
       address: activeAddress,
       txHash: hash,
       sourceBlockchain: currentBlockchain,
       targetBlockchain,
     });
+    captureTime({
+      txType: TransactionType.BRIDGE,
+      chainId: blockChainNetwork?.chainId,
+    });
 
     const timestamp = Date.now();
 
@@ -623,7 +634,10 @@ export function Bridge() {
     bridgeFee,
     gasSettings,
     captureEncrypted,
+    captureTime,
     currentBlockchain,
+    networks,
+    bridgeConfig,
     targetBlockchain,
     activeAddress,
     transfer,

src/pages/Collectibles/CollectibleSend.tsx

@@ -30,6 +30,7 @@ import { useNetworkFeeContext } from '@src/contexts/NetworkFeeProvider';
 import { LoadingSendForm } from '../Send/components/LoadingSendForm';
 import { useCollectibleFromParams } from './hooks/useCollectibleFromParams';
 import { SendEVMCollectible } from './SendEVMCollectible';
+import { TransactionType } from '@src/background/services/wallet/handlers/eth_sendTransaction/models';
 
 export function CollectibleSend() {
   const { t } = useTranslation();
@@ -39,7 +40,7 @@ export function CollectibleSend() {
   const {
     accounts: { active },
   } = useAccountsContext();
-  const { captureEncrypted } = useAnalyticsContext();
+  const { captureEncrypted, captureTime } = useAnalyticsContext();
   const tokens = useTokensWithBalances();
   const { nft } = useCollectibleFromParams();
 
@@ -69,7 +70,10 @@ export function CollectibleSend() {
         chainId: network?.chainId,
         type: nft?.type,
       });
-
+      captureTime({
+        txType: TransactionType.SEND_NFT,
+        chainId: network?.chainId,
+      });
       toastCardWithLink({
         title: t('Send Successful'),
         url: getExplorerAddressByNetwork(network as Network, txHash),
@@ -78,7 +82,7 @@ export function CollectibleSend() {
 
       history.push('/home');
     },
-    [fromAddress, network, captureEncrypted, history, t, nft?.type]
+    [fromAddress, network, captureEncrypted, captureTime, history, t, nft?.type]
   );
 
   const onFailure = useCallback(() => {

src/pages/Send/Send.tsx

@@ -43,6 +43,7 @@ import {
   isAvmCapableAccount,
   isPvmCapableAccount,
 } from './hooks/useSend/models';
+import { TransactionType } from '@src/background/services/wallet/handlers/eth_sendTransaction/models';
 
 export function SendPage() {
   const { t } = useTranslation();
@@ -52,7 +53,7 @@ export function SendPage() {
   const {
     accounts: { active },
   } = useAccountsContext();
-  const { captureEncrypted } = useAnalyticsContext();
+  const { captureEncrypted, captureTime } = useAnalyticsContext();
   const tokens = useTokensWithBalances();
 
   const { isFunctionAvailable, isFunctionSupported } = useIsFunctionAvailable(
@@ -92,6 +93,10 @@ export function SendPage() {
         txHash,
         chainId: network?.chainId,
       });
+      captureTime({
+        txType: TransactionType.SEND_TOKEN,
+        chainId: network?.chainId,
+      });
 
       toastCardWithLink({
         title: t('Send Successful'),
@@ -101,7 +106,7 @@ export function SendPage() {
 
       history.push('/home');
     },
-    [fromAddress, network, captureEncrypted, history, t]
+    [captureEncrypted, fromAddress, network, captureTime, t, history]
   );
 
   const onFailure = useCallback(() => {

src/pages/SignTransaction/SignTransaction.tsx

@@ -47,6 +47,7 @@ import { SpendLimitInfo } from './components/SpendLimitInfo/SpendLimitInfo';
 import { ActionStatus } from '@src/background/services/actions/models';
 import { MaliciousTxAlert } from '@src/components/common/MaliciousTxAlert';
 import { TxWarningBox } from '@src/components/common/TxWarningBox';
+import { TimeMeasureEventNames } from '@src/contexts/AnalyticsProvider';
 
 export function SignTransactionPage() {
   const { t } = useTranslation();
@@ -120,6 +121,7 @@ export function SignTransactionPage() {
 
   const submit = useCallback(async () => {
     setTransactionProgressState(TransactionProgressState.PENDING);
+    performance.mark(TimeMeasureEventNames.TRANSACTION_APPROVED);
     await updateTransaction(
       {
         status: ActionStatus.SUBMITTING,

src/pages/Swap/Swap.tsx

@@ -37,6 +37,7 @@ import { useAccountsContext } from '@src/contexts/AccountsProvider';
 import { isBitcoinNetwork } from '@src/background/services/network/utils/isBitcoinNetwork';
 import { isUserRejectionError } from '@src/utils/errors';
 import { DISALLOWED_SWAP_ASSETS } from '@src/contexts/SwapProvider/models';
+import { TransactionType } from '@src/background/services/wallet/handlers/eth_sendTransaction/models';
 
 const ReviewOrderButtonContainer = styled('div')<{
   isTransactionDetailsOpen: boolean;
@@ -50,7 +51,7 @@ const ReviewOrderButtonContainer = styled('div')<{
 
 export function Swap() {
   const { t } = useTranslation();
-  const { capture, captureEncrypted } = useAnalyticsContext();
+  const { capture, captureEncrypted, captureTime } = useAnalyticsContext();
   const { network } = useNetworkContext();
   const { swap } = useSwapContext();
   const { networkFee } = useNetworkFeeContext();
@@ -180,6 +181,10 @@ export function Swap() {
         address: activeAddress,
         chainId: network?.chainId,
       });
+      captureTime({
+        txType: TransactionType.SWAP,
+        chainId: network?.chainId,
+      });
     }
 
     if (error && !isUserRejectionError(error)) {