feat: add posthog action to select blockchain (#2076)

Author: iccicci

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/multi-wallet.ts

@@ -16,6 +16,7 @@ const makePaperWalletOnboardingRestoreEvent = <E extends string>(eventSuffix: E)
 
 const multiWalletActions = {
   create: {
+    CHOSE_BLOCKCHAIN_CLICK: makeMultiWalletCreateEvent('select a blockchain | next | click'),
     CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK: makePaperWalletOnboardingCreateEvent('choose mode | recovery phrase | click'),
     CHOOSE_RECOVERY_MODE_PAPER_CLICK: makePaperWalletOnboardingCreateEvent('choose mode | paper wallet | click'),
     CHOOSE_RECOVERY_MODE_NEXT_CLICK: makePaperWalletOnboardingCreateEvent('choose mode | next | click'),
@@ -52,6 +53,7 @@ const multiWalletActions = {
   },
   restore: {
     WALLET_SETUP_PAGEVIEW: makePaperWalletOnboardingCreateEvent('step: wallet info | pageview'),
+    CHOSE_BLOCKCHAIN_CLICK: makeMultiWalletRestoreEvent('select a blockchain | next | click'),
     CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK: makePaperWalletOnboardingRestoreEvent('choose mode | recovery phrase | click'),
     CHOOSE_RECOVERY_MODE_PAPER_CLICK: makePaperWalletOnboardingRestoreEvent('choose mode | paper wallet | click'),
     CHOOSE_RECOVERY_MODE_NEXT_CLICK: makePaperWalletOnboardingRestoreEvent('choose mode | next | click'),

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts

@@ -27,6 +27,7 @@ const onboardingActions = {
     PIN_EXTENSION_CLICK: makeOnboardingEvent('lace main view | pin the wallet extension | click')
   },
   create: {
+    CHOSE_BLOCKCHAIN_CLICK: makeOnboardingCreateEvent('select a blockchain | next | click'),
     CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK: makePaperWalletOnboardingCreateEvent('choose mode | recovery phrase | click'),
     CHOOSE_RECOVERY_MODE_PAPER_CLICK: makePaperWalletOnboardingCreateEvent('choose mode | paper wallet | click'),
     CHOOSE_RECOVERY_MODE_NEXT_CLICK: makePaperWalletOnboardingCreateEvent('choose mode | next | click'),
@@ -63,6 +64,7 @@ const onboardingActions = {
   },
   restore: {
     WALLET_SETUP_PAGEVIEW: makePaperWalletOnboardingCreateEvent('step: wallet info | pageview'),
+    CHOSE_BLOCKCHAIN_CLICK: makeOnboardingRestoreEvent('select a blockchain | next | click'),
     CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK: makePaperWalletOnboardingRestoreEvent('choose mode | recovery phrase | click'),
     CHOOSE_RECOVERY_MODE_PAPER_CLICK: makePaperWalletOnboardingRestoreEvent('choose mode | paper wallet | click'),
     CHOOSE_RECOVERY_MODE_NEXT_CLICK: makePaperWalletOnboardingRestoreEvent('choose mode | next | click'),

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts

@@ -10,6 +10,7 @@ export type CreateFlowActions = Record<
   | 'RECOVERY_PHRASE_COPY_READ_MORE_CLICK'
   | 'RECOVERY_PHRASE_PASTE_READ_MORE_CLICK'
   | 'WALLET_ADDED'
+  | 'CHOSE_BLOCKCHAIN_CLICK'
   | 'CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK'
   | 'CHOOSE_RECOVERY_MODE_PAPER_CLICK'
   | 'CHOOSE_RECOVERY_MODE_NEXT_CLICK'
@@ -24,6 +25,7 @@ export type CreateFlowActions = Record<
 >;
 export type RestoreFlowActions = Record<
   | 'WALLET_SETUP_PAGEVIEW'
+  | 'CHOSE_BLOCKCHAIN_CLICK'
   | 'CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK'
   | 'CHOOSE_RECOVERY_MODE_PAPER_CLICK'
   | 'CHOOSE_RECOVERY_MODE_NEXT_CLICK'

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/SelectBlockchain.tsx

@@ -3,27 +3,46 @@ import { WalletSetupSelectBlockchain } from '@lace/core';
 import { useCreateWallet } from '../context';
 import { BitcoinImportMessageDialog } from '../../../wallet-setup/components/BitcoinImportMessageDialog';
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { logger } from '@lace/common';
+import { useWalletOnboarding } from '../../walletOnboardingContext';
+import { useAnalyticsContext } from '@providers/AnalyticsProvider';
 
 export const SelectBlockchain = (): ReactElement => {
   const posthog = usePostHogClientContext();
   const { back, next, selectedBlockchain, setSelectedBlockchain } = useCreateWallet();
   const [isBitcoinDialogOpen, setIsBitcoinDialogOpen] = useState(false);
   const bitcoinWalletsEnabled = posthog?.isFeatureFlagEnabled('bitcoin-wallets');
+  const analytics = useAnalyticsContext();
+  const { postHogActions } = useWalletOnboarding();
+
+  // eslint-disable-next-line consistent-return
+  const handleNext = () => {
+    const doNext = async () => {
+      await next();
+      await analytics.sendEventToPostHog(postHogActions.create.CHOSE_BLOCKCHAIN_CLICK, {
+        blockchain: selectedBlockchain
+      });
+    };
+
+    if (selectedBlockchain === 'Bitcoin') {
+      if (isBitcoinDialogOpen) setIsBitcoinDialogOpen(false);
+      else return setIsBitcoinDialogOpen(true);
+    }
+
+    doNext().catch((error) => logger.error('Error in next selecting blockchain', error));
+  };
 
   return (
     <>
       <WalletSetupSelectBlockchain
         back={back}
-        next={selectedBlockchain === 'Bitcoin' ? () => setIsBitcoinDialogOpen(true) : next}
+        next={handleNext}
         selectedBlockchain={selectedBlockchain}
         setSelectedBlockchain={setSelectedBlockchain}
         showBitcoinOption={bitcoinWalletsEnabled}
       />
       <BitcoinImportMessageDialog
-        onConfirm={() => {
-          setIsBitcoinDialogOpen(false);
-          void next();
-        }}
+        onConfirm={handleNext}
         onCancel={() => setIsBitcoinDialogOpen(false)}
         open={isBitcoinDialogOpen}
         setOpen={setIsBitcoinDialogOpen}

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/SelectBlockchain.tsx

@@ -3,27 +3,46 @@ import { WalletSetupSelectBlockchain } from '@lace/core';
 import { useRestoreWallet } from '../context';
 import { BitcoinImportMessageDialog } from '../../../wallet-setup/components/BitcoinImportMessageDialog';
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { logger } from '@lace/common';
+import { useWalletOnboarding } from '../../walletOnboardingContext';
+import { useAnalyticsContext } from '@providers/AnalyticsProvider';
 
 export const SelectBlockchain = (): ReactElement => {
   const posthog = usePostHogClientContext();
   const { back, next, selectedBlockchain, setSelectedBlockchain } = useRestoreWallet();
   const [isBitcoinDialogOpen, setIsBitcoinDialogOpen] = useState(false);
   const bitcoinWalletsEnabled = posthog?.isFeatureFlagEnabled('bitcoin-wallets');
+  const analytics = useAnalyticsContext();
+  const { postHogActions } = useWalletOnboarding();
+
+  // eslint-disable-next-line consistent-return
+  const handleNext = () => {
+    const doNext = async () => {
+      await next();
+      await analytics.sendEventToPostHog(postHogActions.restore.CHOSE_BLOCKCHAIN_CLICK, {
+        blockchain: selectedBlockchain
+      });
+    };
+
+    if (selectedBlockchain === 'Bitcoin') {
+      if (isBitcoinDialogOpen) setIsBitcoinDialogOpen(false);
+      else return setIsBitcoinDialogOpen(true);
+    }
+
+    doNext().catch((error) => logger.error('Error in next selecting blockchain', error));
+  };
 
   return (
     <>
       <WalletSetupSelectBlockchain
         back={back}
-        next={selectedBlockchain === 'Bitcoin' ? () => setIsBitcoinDialogOpen(true) : next}
+        next={handleNext}
         selectedBlockchain={selectedBlockchain}
         setSelectedBlockchain={setSelectedBlockchain}
         showBitcoinOption={bitcoinWalletsEnabled}
       />
       <BitcoinImportMessageDialog
-        onConfirm={() => {
-          setIsBitcoinDialogOpen(false);
-          void next();
-        }}
+        onConfirm={handleNext}
         onCancel={() => setIsBitcoinDialogOpen(false)}
         open={isBitcoinDialogOpen}
         setOpen={setIsBitcoinDialogOpen}