diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/multi-wallet.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/multi-wallet.ts index b36625cc56..8361da05b2 100644 --- a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/multi-wallet.ts +++ b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/multi-wallet.ts @@ -16,6 +16,7 @@ const makePaperWalletOnboardingRestoreEvent = (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'), diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts index 06d8bf5c46..e0a28120d6 100644 --- a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts +++ b/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'), diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts index 13f5c48e7f..d98fc2de71 100644 --- a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts +++ b/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' diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/SelectBlockchain.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/SelectBlockchain.tsx index a43d3b75f5..45d9a0ee95 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/SelectBlockchain.tsx +++ b/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 ( <> setIsBitcoinDialogOpen(true) : next} + next={handleNext} selectedBlockchain={selectedBlockchain} setSelectedBlockchain={setSelectedBlockchain} showBitcoinOption={bitcoinWalletsEnabled} /> { - setIsBitcoinDialogOpen(false); - void next(); - }} + onConfirm={handleNext} onCancel={() => setIsBitcoinDialogOpen(false)} open={isBitcoinDialogOpen} setOpen={setIsBitcoinDialogOpen} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/SelectBlockchain.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/SelectBlockchain.tsx index 4d58b80a95..00bd0fb72e 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/SelectBlockchain.tsx +++ b/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 ( <> setIsBitcoinDialogOpen(true) : next} + next={handleNext} selectedBlockchain={selectedBlockchain} setSelectedBlockchain={setSelectedBlockchain} showBitcoinOption={bitcoinWalletsEnabled} /> { - setIsBitcoinDialogOpen(false); - void next(); - }} + onConfirm={handleNext} onCancel={() => setIsBitcoinDialogOpen(false)} open={isBitcoinDialogOpen} setOpen={setIsBitcoinDialogOpen}