feat(extension): [LW-8998] Add missing tracking points around dApp connector submission in Lace (#701)

Lucas · DominikGuzei · web-flow · commit a5ed2a7f4fbc · 2023-11-06T15:17:47.000-03:00
---------

Co-authored-by: Dominik Guzei &lt;dominik.guzei@gmail.com&gt;
diff --git a/apps/browser-extension-wallet/src/features/dapp/components/ConfirmData.tsx b/apps/browser-extension-wallet/src/features/dapp/components/ConfirmData.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { Wallet } from '@lace/cardano';
-import { Button } from '@lace/common';
+import { Button, PostHogAction } from '@lace/common';
 import { useTranslation } from 'react-i18next';
 import { Layout } from './Layout';
 import { sectionTitle, DAPP_VIEWS } from '../config';
@@ -19,6 +19,8 @@ import { useRedirection } from '@hooks';
 import { dAppRoutePaths } from '@routes';
 import { useWalletStore } from '@stores';
 import * as HardwareLedger from '../../../../../../node_modules/@cardano-sdk/hardware-ledger/dist/cjs';
+import { useAnalyticsContext } from '@providers';
+import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 
 const INDENT_SPACING = 2;
 const DAPP_TOAST_DURATION = 50;
@@ -46,6 +48,7 @@ export const DappConfirmData = (): React.ReactElement => {
   const redirectToSignSuccess = useRedirection(dAppRoutePaths.dappTxSignSuccess);
   const [isConfirmingTx, setIsConfirmingTx] = useState<boolean>();
   const [dappInfo, setDappInfo] = useState<Wallet.DappInfo>();
+  const analytics = useAnalyticsContext();
   const isUsingHardwareWallet = useMemo(
     () => getKeyAgentType() !== Wallet.KeyManagement.KeyAgentType.InMemory,
     [getKeyAgentType]
@@ -130,10 +133,12 @@ export const DappConfirmData = (): React.ReactElement => {
     }
   }, [setIsConfirmingTx, redirectToSignFailure, redirectToSignSuccess]);
 
-  const confirmationCallback = useCallback(
-    () => (isUsingHardwareWallet ? signWithHardwareWallet() : setNextView()),
-    [isUsingHardwareWallet, signWithHardwareWallet, setNextView]
-  );
+  const confirmationCallback = useCallback(() => {
+    analytics?.sendEventToPostHog(PostHogAction.SendTransactionDataReviewTransactionClick, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+    isUsingHardwareWallet ? signWithHardwareWallet() : setNextView();
+  }, [isUsingHardwareWallet, signWithHardwareWallet, setNextView, analytics]);
 
   return (
     <Layout pageClassname={styles.spaceBetween} title={t(sectionTitle[DAPP_VIEWS.CONFIRM_DATA])}>
diff --git a/apps/browser-extension-wallet/src/features/dapp/components/ConfirmTransaction.tsx b/apps/browser-extension-wallet/src/features/dapp/components/ConfirmTransaction.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { Button, useObservable } from '@lace/common';
+import { Button, PostHogAction, useObservable } from '@lace/common';
 import { useTranslation } from 'react-i18next';
 import { DappTransaction } from '@lace/core';
 import { Layout } from './Layout';
@@ -23,6 +23,8 @@ import { of } from 'rxjs';
 import { CardanoTxOut } from '@src/types';
 import { getAssetsInformation, TokenInfo } from '@src/utils/get-assets-information';
 import * as HardwareLedger from '../../../../../../node_modules/@cardano-sdk/hardware-ledger/dist/cjs';
+import { useAnalyticsContext } from '@providers';
+import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 
 const DAPP_TOAST_DURATION = 50;
 
@@ -49,6 +51,7 @@ export const ConfirmTransaction = withAddressBookContext((): React.ReactElement
     blockchainProvider: { assetProvider }
   } = useWalletStore();
   const { list: addressList } = useAddressBookContext();
+  const analytics = useAnalyticsContext();
 
   const [tx, setTx] = useState<Wallet.Cardano.Tx>();
   const assets = useObservable<TokenInfo | null>(inMemoryWallet.assetInfo$);
@@ -231,6 +234,14 @@ export const ConfirmTransaction = withAddressBookContext((): React.ReactElement
     adaFollowingNumericValue: t('general.adaFollowingNumericValue')
   };
 
+  const onConfirm = () => {
+    analytics.sendEventToPostHog(PostHogAction.SendTransactionSummaryConfirmClick, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+
+    isUsingHardwareWallet ? signWithHardwareWallet() : setNextView();
+  };
+
   return (
     <Layout pageClassname={styles.spaceBetween} title={t(sectionTitle[DAPP_VIEWS.CONFIRM_TX])}>
       {tx && txSummary ? (
@@ -245,9 +256,7 @@ export const ConfirmTransaction = withAddressBookContext((): React.ReactElement
       )}
       <div className={styles.actions}>
         <Button
-          onClick={async () => {
-            isUsingHardwareWallet ? signWithHardwareWallet() : setNextView();
-          }}
+          onClick={onConfirm}
           disabled={!!errorMessage}
           loading={isUsingHardwareWallet && isConfirmingTx}
           data-testid="dapp-transaction-confirm"
diff --git a/apps/browser-extension-wallet/src/features/dapp/components/DappTransactionFail.tsx b/apps/browser-extension-wallet/src/features/dapp/components/DappTransactionFail.tsx
@@ -1,12 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@lace/common';
+import { Button, PostHogAction } from '@lace/common';
 import Fail from '../../../assets/icons/exclamation-circle.svg';
 import styles from './Layout.module.scss';
 import { Image } from 'antd';
+import { useAnalyticsContext } from '@providers';
+import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 
 export const DappTransactionFail = (): React.ReactElement => {
   const { t } = useTranslation();
+  const analytics = useAnalyticsContext();
+  const onClose = async () => {
+    await analytics?.sendEventToPostHog(PostHogAction.SendSomethingWentWrongCancelClick, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+    window.close();
+  };
+
+  useEffect(() => {
+    analytics?.sendEventToPostHog(PostHogAction.SendSomethingWentWrongView, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+  }, [analytics]);
 
   return (
     <div data-testid="dapp-sign-tx-fail" className={styles.noWalletContainer}>
@@ -16,7 +31,7 @@ export const DappTransactionFail = (): React.ReactElement => {
         <div className={styles.description}>{t('dapp.sign.failure.description')}</div>
       </div>
       <div className={styles.footer}>
-        <Button onClick={() => window.close()} color="secondary" className={styles.footerBtn}>
+        <Button onClick={onClose} color="secondary" className={styles.footerBtn}>
           {t('general.button.cancel')}
         </Button>
       </div>
diff --git a/apps/browser-extension-wallet/src/features/dapp/components/DappTransactionSuccess.tsx b/apps/browser-extension-wallet/src/features/dapp/components/DappTransactionSuccess.tsx
@@ -1,13 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@lace/common';
+import { Button, PostHogAction } from '@lace/common';
 import { Image } from 'antd';
 import Success from '../../../assets/icons/success-staking.svg';
 import styles from './Layout.module.scss';
+import { useAnalyticsContext } from '@providers';
+import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 
 export const DappTransactionSuccess = (): React.ReactElement => {
+  const analytics = useAnalyticsContext();
   const { t } = useTranslation();
 
+  const onClose = async () => {
+    await analytics?.sendEventToPostHog(PostHogAction.SendAllDoneCloseClick, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+    window.close();
+  };
+
+  useEffect(() => {
+    analytics?.sendEventToPostHog(PostHogAction.SendAllDoneView, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+  }, [analytics]);
+
   return (
     <div data-testid="dapp-sign-tx-success" className={styles.noWalletContainer}>
       <div className={styles.noWalletContent}>
@@ -20,11 +36,7 @@ export const DappTransactionSuccess = (): React.ReactElement => {
         </div>
       </div>
       <div className={styles.footer}>
-        <Button
-          data-testid="dapp-sign-tx-success-close-button"
-          className={styles.footerBtn}
-          onClick={() => window.close()}
-        >
+        <Button data-testid="dapp-sign-tx-success-close-button" className={styles.footerBtn} onClick={onClose}>
           {t('general.button.close')}
         </Button>
       </div>
diff --git a/apps/browser-extension-wallet/src/features/dapp/components/SignTransaction.tsx b/apps/browser-extension-wallet/src/features/dapp/components/SignTransaction.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useMemo } from 'react';
 import { Spin } from 'antd';
 import { Wallet } from '@lace/cardano';
 import { useTranslation } from 'react-i18next';
-import { Button, inputProps, Password } from '@lace/common';
+import { Button, inputProps, Password, PostHogAction } from '@lace/common';
 import { useWalletStore } from '@stores';
 import { useRedirection, useWalletManager } from '@hooks';
 import { dAppRoutePaths } from '@routes';
@@ -14,6 +14,8 @@ import { DAPP_CHANNELS } from '@src/utils/constants';
 import { runtime } from 'webextension-polyfill';
 import { UserPromptService } from '@lib/scripts/background/services';
 import { of } from 'rxjs';
+import { useAnalyticsContext } from '@providers';
+import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 
 export const SignTransaction = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -26,6 +28,7 @@ export const SignTransaction = (): React.ReactElement => {
   const [password, setPassword] = useState<string>();
   const [validPassword, setValidPassword] = useState<boolean>();
   const { keyAgentData } = useWalletStore();
+  const analytics = useAnalyticsContext();
 
   const handleVerifyPass = useCallback(async () => {
     setIsLoading(true);
@@ -52,10 +55,12 @@ export const SignTransaction = (): React.ReactElement => {
     }
   }, [password, redirectToSignFailure, keyAgentData]);
 
-  const onConfirm = useCallback(
-    () => executeWithPassword(password, handleVerifyPass, false),
-    [executeWithPassword, handleVerifyPass, password]
-  );
+  const onConfirm = useCallback(() => {
+    analytics.sendEventToPostHog(PostHogAction.SendTransactionConfirmationConfirmClick, {
+      [TX_CREATION_TYPE_KEY]: TxCreationType.External
+    });
+    executeWithPassword(password, handleVerifyPass, false);
+  }, [executeWithPassword, handleVerifyPass, password, analytics]);
 
   const handleChange: inputProps['onChange'] = ({ target: { value } }) => setPassword(value);
 
diff --git a/apps/browser-extension-wallet/src/features/dapp/components/__tests__/ConfirmTransaction.test.tsx b/apps/browser-extension-wallet/src/features/dapp/components/__tests__/ConfirmTransaction.test.tsx
@@ -13,12 +13,21 @@ import { ConfirmTransaction } from '../ConfirmTransaction';
 import '@testing-library/jest-dom';
 import { I18nextProvider } from 'react-i18next';
 import { StoreProvider } from '@src/stores';
-import { AppSettingsProvider, DatabaseProvider, ViewFlowProvider } from '@src/providers';
+import {
+  AnalyticsProvider,
+  AppSettingsProvider,
+  BackgroundServiceAPIProvider,
+  BackgroundServiceAPIProviderProps,
+  DatabaseProvider,
+  ViewFlowProvider
+} from '@src/providers';
 import { APP_MODE_BROWSER } from '@src/utils/constants';
 import i18n from '@lib/i18n';
 import { BehaviorSubject } from 'rxjs';
 import { act } from 'react-dom/test-utils';
 import { sendViewsFlowState } from '../../config';
+import { PostHogClientProvider } from '@providers/PostHogClientProvider';
+import { postHogClientMocks } from '@src/utils/mocks/test-helpers';
 
 const assetInfo$ = new BehaviorSubject(new Map());
 const available$ = new BehaviorSubject([]);
@@ -63,19 +72,30 @@ const testIds = {
   dappTransactionConfirm: 'dapp-transaction-confirm'
 };
 
+const backgroundService = {
+  getBackgroundStorage: jest.fn(),
+  setBackgroundStorage: jest.fn()
+} as unknown as BackgroundServiceAPIProviderProps['value'];
+
 const getWrapper =
   () =>
   ({ children }: { children: React.ReactNode }) =>
     (
-      <AppSettingsProvider>
-        <DatabaseProvider>
-          <StoreProvider appMode={APP_MODE_BROWSER}>
-            <I18nextProvider i18n={i18n}>
-              <ViewFlowProvider viewStates={sendViewsFlowState}>{children}</ViewFlowProvider>
-            </I18nextProvider>
-          </StoreProvider>
-        </DatabaseProvider>
-      </AppSettingsProvider>
+      <BackgroundServiceAPIProvider value={backgroundService}>
+        <AppSettingsProvider>
+          <DatabaseProvider>
+            <StoreProvider appMode={APP_MODE_BROWSER}>
+              <PostHogClientProvider postHogCustomClient={postHogClientMocks as any}>
+                <AnalyticsProvider analyticsDisabled>
+                  <I18nextProvider i18n={i18n}>
+                    <ViewFlowProvider viewStates={sendViewsFlowState}>{children}</ViewFlowProvider>
+                  </I18nextProvider>
+                </AnalyticsProvider>
+              </PostHogClientProvider>
+            </StoreProvider>
+          </DatabaseProvider>
+        </AppSettingsProvider>
+      </BackgroundServiceAPIProvider>
     );
 
 describe('Testing ConfirmTransaction component', () => {
diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts
@@ -54,6 +54,13 @@ export enum TxRecipientType {
   RegularAddress = 'regular address'
 }
 
+export const TX_CREATION_TYPE_KEY = 'tx_creation_type';
+
+export enum TxCreationType {
+  Internal = 'internal',
+  External = 'external'
+}
+
 export type OnboardingFlows = 'create' | 'restore' | 'hw' | 'forgot_password';
 export type PostHogActionsKeys =
   | 'SETUP_OPTION_CLICK'
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/Footer.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/Footer.tsx
@@ -30,7 +30,9 @@ import {
   MatomoEventActions,
   MatomoEventCategories,
   AnalyticsEventNames,
-  PostHogAction
+  PostHogAction,
+  TxCreationType,
+  TX_CREATION_TYPE_KEY
 } from '@providers/AnalyticsProvider/analyticsTracker';
 import { buttonIds } from '@hooks/useEnterKeyPress';
 import { AssetPickerFooter } from './AssetPickerFooter';
@@ -105,7 +107,10 @@ export const Footer = withAddressBookContext(
     const isSummaryStep = currentSection.currentSection === Sections.SUMMARY;
 
     const sendEventToPostHog = (evtAction: PostHogAction) =>
-      analytics.sendEventToPostHog(evtAction, { trigger_point: triggerPoint });
+      analytics.sendEventToPostHog(evtAction, {
+        trigger_point: triggerPoint,
+        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+      });
 
     const sendAnalytics = useCallback(() => {
       switch (currentSection.currentSection) {
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/HeaderView.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/HeaderView.tsx
@@ -33,7 +33,9 @@ import {
   MatomoEventActions,
   MatomoEventCategories,
   AnalyticsEventNames,
-  PostHogAction
+  PostHogAction,
+  TX_CREATION_TYPE_KEY,
+  TxCreationType
 } from '@providers/AnalyticsProvider/analyticsTracker';
 
 import { useWalletStore } from '@src/stores';
@@ -182,9 +184,15 @@ export const HeaderNavigation = ({ isPopupView }: HeaderNavigationProps): React.
 
   const onCrossIconClick = () => {
     if (section.currentSection === Sections.SUCCESS_TX) {
-      analytics.sendEventToPostHog(PostHogAction.SendAllDoneXClick, { trigger_point: triggerPoint });
+      analytics.sendEventToPostHog(PostHogAction.SendAllDoneXClick, {
+        trigger_point: triggerPoint,
+        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+      });
     } else if (section.currentSection === Sections.FAIL_TX) {
-      analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongXClick, { trigger_point: triggerPoint });
+      analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongXClick, {
+        trigger_point: triggerPoint,
+        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+      });
     }
     onClose();
   };
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionFail.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionFail.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ResultMessage } from '@components/ResultMessage';
 import { useAnalyticsContext } from '@providers';
-import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { PostHogAction, TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 import styles from './TransactionSuccessView.module.scss';
 import { useAnalyticsSendFlowTriggerPoint } from '../store';
 
@@ -12,8 +12,11 @@ export const TransactionFail = (): React.ReactElement => {
   const { triggerPoint } = useAnalyticsSendFlowTriggerPoint();
 
   useEffect(() => {
-    // eslint-disable-next-line camelcase
-    analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongView, { trigger_point: triggerPoint });
+    analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongView, {
+      // eslint-disable-next-line camelcase
+      trigger_point: triggerPoint,
+      [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.tsx
@@ -3,7 +3,12 @@ import uniq from 'lodash/uniq';
 import { ResultMessage } from '@components/ResultMessage';
 import { TransactionHashBox } from '@components/TransactionHashBox';
 import { useAnalyticsContext } from '@providers';
-import { PostHogAction, TxRecipientType } from '@providers/AnalyticsProvider/analyticsTracker';
+import {
+  PostHogAction,
+  TX_CREATION_TYPE_KEY,
+  TxCreationType,
+  TxRecipientType
+} from '@providers/AnalyticsProvider/analyticsTracker';
 import {
   useBuiltTxState,
   useAnalyticsSendFlowTriggerPoint,
@@ -75,7 +80,8 @@ export const TransactionSuccessView = ({ footerSlot }: { footerSlot?: React.Reac
         // eslint-disable-next-line camelcase
         recipient_type: recipientTypesUnique,
         // eslint-disable-next-line camelcase
-        recipient_source: recipientSourceUnique
+        recipient_source: recipientSourceUnique,
+        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
