feat: [lw-11532] add analytics for shared wallet (#1462)

* feat: [lw-11532] add analytics for shared wallet

* feat: [lw-11532] resolve pr comments

* feat: [lw-11532] resolve pr comments

* feat: [lw-11532] resolve pr comments

* fix: resolve sdet comments

* fix: resolve sdet comments

* chore: resolve sonarcloud issues

* fix: improve beta optin and optout analytics

---------

Co-authored-by: John Oshalusi <[email protected]>
Co-authored-by: Michael Chappell <[email protected]>

Author: 3 people

apps/browser-extension-wallet/src/views/browser-view/components/TransactionCTAsBox/TransactionCTAsBox.tsx

@@ -27,18 +27,25 @@ export const TransactionCTAsBox = (): React.ReactElement => {
   };
 
   const openSend = () => {
-    // eslint-disable-next-line camelcase
-    analytics.sendEventToPostHog(PostHogAction.SendClick, { trigger_point: SendFlowTriggerPoints.SEND_BUTTON });
+    isSharedWallet
+      ? analytics.sendEventToPostHog(PostHogAction.SharedWalletsSendClick)
+      : // eslint-disable-next-line camelcase
+        analytics.sendEventToPostHog(PostHogAction.SendClick, { trigger_point: SendFlowTriggerPoints.SEND_BUTTON });
     openSendTransactionDrawer();
     setTriggerPoint(SendFlowTriggerPoints.SEND_BUTTON);
   };
 
+  const onCoSignClick = () => {
+    analytics.sendEventToPostHog(PostHogAction.SharedWalletsCosignClick);
+    openCoSignTransactionDrawer();
+  };
+
   return (
     <TransactionCTAs
       buttonClassName={styles.btn}
       onSendClick={openSend}
       onReceiveClick={openReceive}
-      onCoSignClick={isSharedWallet ? openCoSignTransactionDrawer : undefined}
+      onCoSignClick={isSharedWallet ? onCoSignClick : undefined}
     />
   );
 };

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/ImportSharedWalletTransaction.tsx

@@ -5,14 +5,18 @@ import { useBuiltTxState } from '../store';
 import { Serialization } from '@cardano-sdk/core';
 import { Wallet } from '@lace/cardano';
 import { useWalletState } from '@hooks/useWalletState';
+import { useAnalyticsContext } from '@providers';
+import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 
 export const ImportSharedWalletTransaction = (): JSX.Element => {
   const [config] = useDrawer();
   const { setBuiltTxData } = useBuiltTxState();
   const walletState = useWalletState();
+  const analytics = useAnalyticsContext();
 
   return (
     <CoSignEntry
+      onImportError={() => analytics.sendEventToPostHog(PostHogAction.SharedWalletsCosignTxImportJsonError)}
       // eslint-disable-next-line react/jsx-handler-names
       onCancel={config.onClose}
       onContinue={async (txData) => {

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/Footer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-magic-numbers */
 /* eslint-disable camelcase */
 /* eslint-disable max-statements */
 /* eslint-disable unicorn/no-null */
@@ -102,29 +103,48 @@ export const Footer = withAddressBookContext(
     const sendAnalytics = useCallback(() => {
       switch (currentSection.currentSection) {
         case Sections.FORM: {
-          sendEventToPostHog(PostHogAction.SendTransactionDataReviewTransactionClick);
+          const event = isSharedWallet
+            ? 'SharedWalletsSendTxDataReviewTxClick'
+            : 'SendTransactionDataReviewTransactionClick';
+          sendEventToPostHog(PostHogAction[event]);
           break;
         }
         case Sections.SUMMARY: {
-          sendEventToPostHog(PostHogAction.SendTransactionSummaryConfirmClick);
+          const event = isSharedWallet
+            ? 'SharedWalletsSendTxSummaryConfirmClick'
+            : 'SendTransactionSummaryConfirmClick';
+          builtTxData.importedSharedWalletTx
+            ? sendEventToPostHog(PostHogAction.SharedWalletsCosignTxSummaryConfirmClick)
+            : sendEventToPostHog(PostHogAction[event]);
           break;
         }
         case Sections.CONFIRMATION: {
-          sendEventToPostHog(PostHogAction.SendTransactionConfirmationConfirmClick);
+          const event = isSharedWallet
+            ? 'SharedWalletsSendTxConfirmationConfirmClick'
+            : 'SendTransactionConfirmationConfirmClick';
+          sendEventToPostHog(PostHogAction[event]);
           break;
         }
         case Sections.SUCCESS_TX: {
-          sendEventToPostHog(PostHogAction.SendAllDoneViewTransactionClick);
+          const event = isSharedWallet ? 'SharedWalletsSendAllDoneViewTxClick' : 'SendAllDoneViewTransactionClick';
+          sendEventToPostHog(PostHogAction[event]);
           break;
         }
         case Sections.UNAUTHORIZED_TX:
         case Sections.FAIL_TX: {
-          sendEventToPostHog(PostHogAction.SendSomethingWentWrongBackClick);
+          const event = isSharedWallet
+            ? 'SharedWalletsSendSomethingWentWrongBackClick'
+            : 'SendSomethingWentWrongBackClick';
+          sendEventToPostHog(PostHogAction[event]);
+          break;
+        }
+        case Sections.IMPORT_SHARED_WALLET_TRANSACTION_JSON: {
+          sendEventToPostHog(PostHogAction.SharedWalletsCosignTxContinueClick);
           break;
         }
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentSection.currentSection, isPopupView]);
+    }, [currentSection.currentSection, isPopupView, isSharedWallet]);
 
     const handleReviewAddress = useCallback(
       (result: keyof typeof ACTIONS) => {
@@ -301,7 +321,8 @@ export const Footer = withAddressBookContext(
           return handleVerifyPass();
         }
         case txHasSucceeded: {
-          return onCloseSubmitedTransaction();
+          // Tab is closed sooner than analytics are sent
+          return setTimeout(() => onCloseSubmitedTransaction(), 300);
         }
         case txHasFailed: {
           setSubmitingTxState({ isPasswordValid: true });
@@ -327,13 +348,33 @@ export const Footer = withAddressBookContext(
     ]);
 
     const handleClose = () => {
-      if (currentSection.currentSection === Sections.SUCCESS_TX) {
-        sendEventToPostHog(PostHogAction.SendAllDoneCloseClick);
-      } else if (currentSection.currentSection === Sections.FAIL_TX) {
-        sendEventToPostHog(PostHogAction.SendSomethingWentWrongCancelClick);
+      switch (currentSection.currentSection) {
+        case Sections.SUCCESS_TX: {
+          const event = isSharedWallet ? 'SharedWalletsSendAllDoneCloseClick' : 'SendAllDoneCloseClick';
+          sendEventToPostHog(PostHogAction[event]);
+          break;
+        }
+        case Sections.FAIL_TX: {
+          const event = isSharedWallet
+            ? 'SharedWalletsSendSomethingWentWrongCancelClick'
+            : 'SendSomethingWentWrongCancelClick';
+          sendEventToPostHog(PostHogAction[event]);
+          break;
+        }
+        case Sections.IMPORT_SHARED_WALLET_TRANSACTION_JSON: {
+          sendEventToPostHog(PostHogAction.SharedWalletsCosignTxCancelClick);
+          break;
+        }
+        case Sections.SUMMARY: {
+          sendEventToPostHog(PostHogAction.SharedWalletsCosignTxSummaryCancelClick);
+          break;
+        }
+        // No default
       }
 
-      onClose();
+      setTimeout(() => {
+        onClose();
+      }, 300);
     };
 
     const confirmDisable = useMemo(

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/HeaderView.tsx

@@ -136,6 +136,7 @@ export const HeaderNavigation = ({
   const [isMultipleSelectionAvailable, setMultipleSelection] = useMultipleSelection();
   const { selectedTokenList, resetTokenList } = useSelectedTokenList();
   const { triggerPoint } = useAnalyticsSendFlowTriggerPoint();
+  const { isSharedWallet } = useWalletStore();
 
   const shouldRenderArrow = isPopupView
     ? [...sectionsWithArrowIcon, Sections.FORM].includes(section.currentSection)
@@ -169,17 +170,26 @@ export const HeaderNavigation = ({
 
   const onCrossIconClick = () => {
     if (section.currentSection === Sections.SUCCESS_TX) {
-      analytics.sendEventToPostHog(PostHogAction.SendAllDoneXClick, {
-        trigger_point: triggerPoint,
-        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
-      });
+      analytics.sendEventToPostHog(
+        PostHogAction[isSharedWallet ? 'SharedWalletsSendAllDoneXClick' : 'SendAllDoneXClick'],
+        {
+          trigger_point: triggerPoint,
+          [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+        }
+      );
     } else if (section.currentSection === Sections.FAIL_TX || section.currentSection === Sections.UNAUTHORIZED_TX) {
-      analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongXClick, {
-        trigger_point: triggerPoint,
-        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
-      });
+      analytics.sendEventToPostHog(
+        PostHogAction[isSharedWallet ? 'SharedWalletsSendSomethingWentWrongXClick' : 'SendSomethingWentWrongXClick'],
+        {
+          trigger_point: triggerPoint,
+          [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+        }
+      );
     }
-    onClose();
+    setTimeout(() => {
+      onClose();
+      // eslint-disable-next-line no-magic-numbers
+    }, 300);
   };
 
   const { uiOutputs } = useCoinStateSelector(FIRST_ROW);

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionFail.tsx

@@ -6,6 +6,7 @@ import { PostHogAction, TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/
 import styles from './TransactionSuccessView.module.scss';
 import { useAnalyticsSendFlowTriggerPoint } from '../store';
 import { WarningBanner } from '@lace/common';
+import { useWalletStore } from '@src/stores';
 
 interface TransactionFailProps {
   showCustomApiBanner?: boolean;
@@ -15,13 +16,17 @@ export const TransactionFail = ({ showCustomApiBanner = false }: TransactionFail
   const { t } = useTranslation();
   const analytics = useAnalyticsContext();
   const { triggerPoint } = useAnalyticsSendFlowTriggerPoint();
+  const { isSharedWallet } = useWalletStore();
 
   useEffect(() => {
-    analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongView, {
-      // eslint-disable-next-line camelcase
-      trigger_point: triggerPoint,
-      [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
-    });
+    analytics.sendEventToPostHog(
+      PostHogAction[isSharedWallet ? 'SharedWalletsSendSomethingWentWrongView' : 'SendSomethingWentWrongView'],
+      {
+        // eslint-disable-next-line camelcase
+        trigger_point: triggerPoint,
+        [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+      }
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.tsx

@@ -65,7 +65,7 @@ export const TransactionSuccessView = ({ footerSlot }: { footerSlot?: React.Reac
       );
       const recipientTypesUnique = uniq(recipientTypes);
       const recipientSourceUnique = uniq(recipientSources);
-      analytics.sendEventToPostHog(PostHogAction.SendAllDoneView, {
+      analytics.sendEventToPostHog(PostHogAction[isSharedWallet ? 'SharedWalletsSendAllDoneView' : 'SendAllDoneView'], {
         // eslint-disable-next-line camelcase
         trigger_point: triggerPoint,
         tokens: customAnalyticsProperties,

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsPreferences/SettingsPreferences.tsx

@@ -52,7 +52,9 @@ export const SettingsPreferences = ({ popupView = false }: SettingsPreferencesPr
     await posthog.setOptedInBeta(isOptedIn);
     setIsOptInBeta(isOptedIn);
 
-    await analytics.sendEventToPostHog(PostHogAction.SettingsBetaProgramClick, { isOptedIn });
+    await analytics.sendEventToPostHog(
+      isOptedIn ? PostHogAction.SettingsBetaProgramOptInClick : PostHogAction.SettingsBetaProgramOptOutClick
+    );
   };
 
   return (

apps/browser-extension-wallet/src/views/browser-view/features/shared-wallet/SharedWallet.tsx

@@ -18,6 +18,8 @@ import { useWalletStore } from '@stores';
 import { WalletType } from '@cardano-sdk/web-extension';
 import { config } from '@src/config';
 import { Wallet } from '@lace/cardano';
+import { useAnalyticsContext } from '@providers';
+import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 
 const { CHAIN } = config();
 const DEFAULT_CHAIN_ID = Wallet.Cardano.ChainIds[CHAIN];
@@ -29,6 +31,7 @@ type CreateWalletParams = {
 };
 
 export const SharedWallet = (): JSX.Element => {
+  const analytics = useAnalyticsContext();
   const history = useHistory();
   const { walletRepository, generateSharedWalletKey, saveSharedWalletKey, createInMemorySharedWallet } =
     useWalletManager();
@@ -89,6 +92,9 @@ export const SharedWallet = (): JSX.Element => {
               activeWalletName={walletInfo?.name || ''}
               activeWalletType={activeWalletType}
               generateKey={generateKey}
+              onGenerateKeys={() => analytics.sendEventToPostHog(PostHogAction.SharedWalletsGenerateKeyClick)}
+              onCopyKeys={() => analytics.sendEventToPostHog(PostHogAction.SharedWalletsGenerateCopyKeyClick)}
+              onClose={async () => await analytics.sendEventToPostHog(PostHogAction.SharedWalletsGenerateCloseClick)}
               navigateToParentFlow={() => history.push(walletRoutePaths.sharedWallet.root)}
             />
           )}
@@ -105,6 +111,29 @@ export const SharedWallet = (): JSX.Element => {
                 exitTheFlow={() => history.push(walletRoutePaths.sharedWallet.root)}
                 sharedWalletKey={sharedWalletKey}
                 onCreateSharedWallet={handleCreateWallet}
+                onWalletNameNextClick={() => {
+                  analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateWalletNameNextClick);
+                }}
+                onAddCosignersNextClick={() => {
+                  analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateAddCosignersNextClick);
+                }}
+                onImportantInfoNextClick={() => {
+                  analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateImportantInfoContinueClick);
+                }}
+                onImportantInfoBackClick={() => {
+                  analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateImportantInfoBackClick);
+                }}
+                onDefineQuorumNextClick={() => {
+                  analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateDefineQuorumNextClick);
+                }}
+                onDefineQuorumDownloadClick={() => {
+                  analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateDefineQuorumDownloadClick);
+                }}
+                onOpenSharedWalletClick={() => {
+                  analytics.sendEventToPostHog(
+                    PostHogAction.SharedWalletsCreateShareWalletDetailsOpenSharedWalletClick
+                  );
+                }}
               />
             )}
           />
@@ -115,10 +144,16 @@ export const SharedWallet = (): JSX.Element => {
             path={walletRoutePaths.sharedWallet.import}
             render={() => (
               <SharedWalletRestorationFlow
-                onRestoreSharedWallet={handleCreateWallet}
+                onRestoreSharedWallet={async (data: CreateWalletParams) => {
+                  await analytics.sendEventToPostHog(PostHogAction.SharedWalletsLocateWalletOpenWalletClick);
+                  await handleCreateWallet(data);
+                }}
                 sharedKeys={sharedWalletKey}
                 exitTheFlow={() => history.push(walletRoutePaths.sharedWallet.root)}
                 navigateToAppHome={() => setBackgroundPage()}
+                onImportJsonError={async () =>
+                  await analytics.sendEventToPostHog(PostHogAction.SharedWalletsLocateWalletImportJsonError)
+                }
               />
             )}
           />
@@ -128,9 +163,18 @@ export const SharedWallet = (): JSX.Element => {
           path={walletRoutePaths.sharedWallet.root}
           render={() => (
             <AddSharedWalletMainPageFlow
-              onCreateSharedWalletClick={() => history.push(walletRoutePaths.sharedWallet.create)}
-              onImportSharedWalletClick={() => history.push(walletRoutePaths.sharedWallet.import)}
-              onKeysGenerateClick={() => history.push(walletRoutePaths.sharedWallet.generateKeys)}
+              onCreateSharedWalletClick={async () => {
+                await analytics.sendEventToPostHog(PostHogAction.SharedWalletsCreateClick);
+                history.push(walletRoutePaths.sharedWallet.create);
+              }}
+              onImportSharedWalletClick={async () => {
+                await analytics.sendEventToPostHog(PostHogAction.SharedWalletsConnectClick);
+                history.push(walletRoutePaths.sharedWallet.import);
+              }}
+              onKeysGenerateClick={async () => {
+                await analytics.sendEventToPostHog(PostHogAction.SharedWalletsGenerateClick);
+                history.push(walletRoutePaths.sharedWallet.generateKeys);
+              }}
               sharedWalletKey={sharedWalletKey}
             />
           )}