feat(staking): [LW-8110] add analytics (#650)

---------

Co-authored-by: refi93 <rafael.korbas@gmail.com>

Author: przemyslaw-wlodek

apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx

@@ -1,6 +1,12 @@
 import { OutsideHandlesProvider, StakingPopup } from '@lace/staking';
 import React, { useCallback, useEffect } from 'react';
-import { useBackgroundServiceAPIContext, useCurrencyStore, useExternalLinkOpener, useTheme } from '@providers';
+import {
+  useAnalyticsContext,
+  useBackgroundServiceAPIContext,
+  useCurrencyStore,
+  useExternalLinkOpener,
+  useTheme
+} from '@providers';
 import { useBalances, useFetchCoinPrice, useLocalStorage, useStakingRewards, useWalletManager } from '@hooks';
 import { useDelegationStore } from '@src/features/delegation/stores';
 import { usePassword, useSubmitingState } from '@views/browser/features/send-transaction';
@@ -73,6 +79,7 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     true
   );
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
+  const analytics = useAnalyticsContext();
 
   useEffect(() => {
     fetchNetworkInfo();
@@ -81,6 +88,7 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
   return (
     <OutsideHandlesProvider
       {...{
+        analytics,
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
         backgroundServiceAPIContextSetWalletPassword: setWalletPassword,

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

@@ -1,10 +1,11 @@
 import {
   EnhancedAnalyticsOptInStatus,
   ExtensionViews,
-  MatomoSendEventProps,
+  UserTrackingType,
   PostHogAction,
   PostHogProperties,
-  UserTrackingType
+  MatomoSendEventProps,
+  IAnalyticsTracker
 } from './types';
 import { Wallet } from '@lace/cardano';
 import { MatomoClient, MATOMO_OPTED_OUT_EVENTS_DISABLED } from '../matomo';
@@ -24,7 +25,7 @@ interface AnalyticsTrackerArgs {
   isPostHogEnabled?: boolean;
   excludedEvents?: string;
 }
-export class AnalyticsTracker {
+export class AnalyticsTracker implements IAnalyticsTracker {
   protected matomoClient?: MatomoClient;
   protected postHogClient?: PostHogClient;
   protected userIdService?: UserIdService;

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

@@ -1,4 +1,9 @@
 /* eslint-disable camelcase */
+import { PostHogAction } from '@lace/common';
+
+export { PostHogAction } from '@lace/common';
+export type { IAnalyticsTracker } from '@lace/common';
+
 export enum MatomoEventActions {
   CLICK_EVENT = 'click-event',
   HOVER_EVENT = 'hover-event'
@@ -29,184 +34,6 @@ export type Metadata = {
   url: string;
 };
 
-export enum PostHogAction {
-  // Hardware wallet connect
-  OnboardingHWAnalyticsAgreeClick = 'onboarding | hardware wallet | analytics | agree | click',
-  OnboardingHWAnalyticsSkipClick = 'onboarding | hardware wallet | analytics | skip | click',
-  OnboardingHWClick = 'onboarding | hardware wallet | connect | click',
-  OnboardinHWLaceTermsOfUseNextClick = 'onboarding | hardware wallet | lace terms of use | next | click',
-  OnboardingHWConnectNextClick = 'onboarding | hardware wallet | connect hw | next | click',
-  OnboardingHWSelectAccountNextClick = 'onboarding | hardware wallet | select hw account | next | click',
-  OnboardingHWNameNextClick = 'onboarding | hardware wallet | name hw wallet | next | click',
-  OnboardingHWDoneGoToWallet = 'onboarding | hardware wallet | all done | go to my wallet | click',
-  // Restore wallet
-  OnboardingRestoreDoneGoToWallet = 'onboarding | restore wallet | all done | go to my wallet | click',
-  OnboardingRestoreAnalyticsAgreeClick = 'onboarding | restore wallet | analytics | agree | click',
-  OnboardingRestoreAnalyticsSkipClick = 'onboarding | restore wallet | analytics | skip | click',
-  OnboardingRestoreClick = 'onboarding | restore wallet | restore | click',
-  OnboardingRestoreWarningMultiAddressWalletOkClick = 'onboarding | restore wallet | warning multi-address wallet | ok | click',
-  OnboardingRestoreWarningMultiAddressWalletCancelClick = 'onboarding | restore wallet | warning multi-address wallet | cancel | click',
-  OnboardingRestoreLaceTermsOfUseNextClick = 'onboarding | restore wallet | lace terms of use | next | click',
-  OnboardingRestoreWalletNameNextClick = 'onboarding | restore wallet | wallet name | next | click',
-  OnboardingRestoreWalletPasswordNextClick = 'onboarding | restore wallet | wallet password | next | click',
-  OnboardingRestoreRecoveryPhraseLengthNextClick = 'onboarding | restore wallet | recovery phrase length | next | click',
-  OnboardingRestoreEnterPassphrase01NextClick = 'onboarding | restore wallet | enter passphrase #01 | next | click',
-  OnboardingRestoreEnterPassphrase09NextClick = 'onboarding | restore wallet | enter passphrase #09 | next | click',
-  OnboardingRestoreEnterPassphrase17NextClick = 'onboarding | restore wallet | enter passphrase #17 | next | click',
-  OnboardingRestoreWalletNamePasswordNextClick = 'onboarding | restore wallet | wallet name & password | next | click',
-  // Create new wallet
-  OnboardingCreateDoneGoToWallet = 'onboarding | new wallet | all done | go to my wallet | click',
-  OnboardingCreateAnalyticsAgreeClick = 'onboarding | new wallet | analytics | agree | click',
-  OnboardingCreateAnalyticsSkipClick = 'onboarding | new wallet | analytics | skip | click',
-  OnboardingCreateClick = 'onboarding | new wallet | create | click',
-  OnboardingCreateLaceTermsOfUseNextClick = 'onboarding | new wallet | lace terms of use | next | click',
-  OnboardingCreateWalletNameNextClick = 'onboarding | new wallet | wallet name | next | click',
-  OnboardingCreateWalletPasswordNextClick = 'onboarding | new wallet | wallet password | next | click',
-  OnboardingCreatePassphraseIntroNextClick = 'onboarding | new wallet | passphrase intro | next | click',
-  OnboardingCreateWritePassphrase01NextClick = 'onboarding | new wallet | write passphrase #01 | next | click',
-  OnboardingCreateWritePassphrase09NextClick = 'onboarding | new wallet | write passphrase #09 | next | click',
-  OnboardingCreateWritePassphrase17NextClick = 'onboarding | new wallet | write passphrase #17 | next | click',
-  OnboardingCreateEnterPassphrase01NextClick = 'onboarding | new wallet | enter passphrase #01 | next | click',
-  OnboardingCreateEnterPassphrase09NextClick = 'onboarding | new wallet | enter passphrase #09 | next | click',
-  OnboardingCreateEnterPassphrase17NextClick = 'onboarding | new wallet | enter passphrase #17 | next | click',
-  OnboardingCreateWalletNamePasswordNextClick = 'onboarding | new wallet | wallet name & password | next | click',
-  OnboardingCreatePassphraseIntroPlayVideoClick = 'onboarding | new wallet | passphrase intro | play video | click',
-  // Staking
-  StakingClick = 'staking | staking | click',
-  StakingStakePoolClick = 'staking | staking | stake pool | click',
-  StakingStakePoolDetailStakeOnThisPoolClick = 'staking | stake pool detail | stake on this pool | click',
-  StakingSwitchingPoolFineByMeClick = 'staking | switching pool? | fine by me | click',
-  StakingManageDelegationStakePoolConfirmationNextClick = 'staking | manage delegation | stake pool confirmation | next | click',
-  StakingManageDelegationPasswordConfirmationConfirmClick = 'staking | manage delegation | password confirmation | confirm | click',
-  StakingManageDelegationHurrayView = 'staking | manage delegation | hurray! | view',
-  StakingManageDelegationHurrayCloseClick = 'staking | manage delegation | hurray! | close | click',
-  StakingManageDelegationHurrayXClick = 'staking | manage delegation | hurray! | x | click',
-  StakingManageDelegationSomethingWentWrongBackClick = 'staking | manage delegation | something went wrong | back | click',
-  StakingManageDelegationSomethingWentWrongCancelClick = 'staking | manage delegation | something went wrong | cancel | click',
-  StakingManageDelegationSomethingWentWrongXClick = 'staking | manage delegation | something went wrong | x | click',
-  // Send Flow
-  SendClick = 'send | send | click',
-  SendTransactionDataReviewTransactionClick = 'send | transaction data | review transaction | click',
-  SendTransactionSummaryConfirmClick = 'send | transaction summary | confirm | click',
-  SendTransactionConfirmationConfirmClick = 'send | transaction confirmation | confirm | click',
-  SendAllDoneView = 'send | all done | view',
-  SendAllDoneViewTransactionClick = 'send | all done | view transaction | click',
-  SendAllDoneCloseClick = 'send | all done | close | click',
-  SendAllDoneXClick = 'send | all done | x | click',
-  SendSomethingWentWrongView = 'send | something went wrong | view',
-  SendSomethingWentWrongBackClick = 'send | something went wrong | back | click',
-  SendSomethingWentWrongCancelClick = 'send | something went wrong | cancel | click',
-  SendSomethingWentWrongXClick = 'send | something went wrong | x | click',
-  // NFTs Flow
-  NFTsClick = 'nft | nfts | click',
-  NFTsImageClick = 'nft | nfts | nft image | click',
-  NFTsCreateFolderClick = 'nft | nfts | create folder | click',
-  NFTCreateFolderNameYourFolderNextClick = 'nft | create folder | name your folder | next | click',
-  NFTCreateFolderSelectNftsNextClick = 'nft | create folder | select nfts | next | click',
-  // Address book
-  AddressBookAddAddressClick = 'address book | add address | click',
-  AddressBookAddNewAddressSaveAddressClick = 'address book | add new address | save address | click',
-  AddressBookAddNewAddressCancelClick = 'address book | add new address | cancel | click',
-  AddressBookAddressRecordClick = 'address book | address record | click',
-  AddressBookAddressRecordCopyClick = 'address book | address record | copy | click',
-  AddressBookAddressRecordEditClick = 'address book | address record | edit | click',
-  AddressBookAddressRecordDeleteClick = 'address book | address record | delete | click',
-  AddressBookAddressRecordHoldUpDeleteAddressClick = 'address book | address record | hold up! | delete address | click',
-  AddressBookAddressRecordHoldUpCancelClick = 'address book | address record | hold up! | cancel | click',
-  AddressBookAddressRecordEditAddressDoneClick = 'address book | address record | edit address | done | click',
-  AddressBookAddressRecordEditAddressCancelClick = 'address book | address record | edit address | cancel | click',
-  AddressBookAddressRecordEditAddressXClick = 'address book | address record | edit address | x | click',
-  // Settings
-  SettingsHelpClick = 'settings | help | click',
-  SettingsHelpCreateSupportTicketClick = 'settings | help | create a support ticket | click',
-  SettingsHelpXClick = 'settings | help | x | click',
-  SettingsTermsAndConditionsClick = 'settings | terms and conditions | click',
-  SettingsTermsAndConditionsXClick = 'settings | terms and conditions | x | click',
-  SettingsPrivacyPolicyClick = 'settings | privacy policy | click',
-  SettingsPrivacyPolicyXClick = 'settings | privacy policy | x | click',
-  SettingsCookiePolicyClick = 'settings | cookie policy | click',
-  SettingsCookiePolicyXClick = 'settings | cookie policy | x | click',
-  SettingsRemoveWalletClick = 'settings | remove wallet | click',
-  SettingsHoldUpRemoveWalletClick = 'settings | hold up | remove wallet | click',
-  SettingsHoldUpBackClick = 'settings | hold up | back | click',
-  SettingsNetworkClick = 'settings | network | click',
-  SettingsNetworkPreviewClick = 'settings | network | preview | click',
-  SettingsNetworkPreprodClick = 'settings | network | preprod | click',
-  SettingsNetworkMainnetClick = 'settings | network | mainnet | click',
-  SettingsNetworkXClick = 'settings | network | x | click',
-  SettingsAuthorizedDappsClick = 'settings | authorized dapps | click',
-  SettingsAuthorizedDappsTrashBinIconClick = 'settings | authorized dapps | trash bin icon | click',
-  SettingsAuthorizedDappsHoldUpDisconnectDappClick = 'settings | authorized dapps | hold up! | disconnect dapp | click',
-  SettingsAuthorizedDappsHoldUpBackClick = 'settings | authorized dapps | hold up! | back | click',
-  SettingsYourKeysClick = 'settings | your keys | click',
-  SettingsYourKeysShowPublicKeyClick = 'settings | your keys | show public key | click',
-  SettingsYourKeysShowPublicKeyCopyClick = 'settings | your keys | show public key | copy | click',
-  SettingsYourKeysShowPublicKeyXClick = 'settings | your keys | show public key | x | click',
-  SettingsCollateralClick = 'settings | collateral | click',
-  SettingsCollateralConfirmClick = 'settings | collateral | confirm | click',
-  SettingsCollateralReclaimCollateralClick = 'settings | collateral | reclaim collateral | click',
-  SettingsCollateralXClick = 'settings | collateral | x | click',
-  SettingsCurrencyClick = 'settings | currency | click',
-  SettingsCurrencySelectCurrencyClick = 'settings | currency | select currency | click',
-  SettingsCurrencyXClick = 'settings | currency | x | click',
-  SettingsThemeLightModeClick = 'settings | theme | light mode | click',
-  SettingsThemeDarkModeClick = 'settings | theme | dark mode | click',
-  SettingsShowRecoveryPhraseClick = 'settings | show recovery phrase | click',
-  SettingsShowRecoveryPhraseEnterYourPasswordShowRecoveryPhraseClick = 'settings | show recovery phrase | enter your password | show recovery phrase | click',
-  SettingsShowRecoveryPhraseYourRecoveryPhraseHidePassphraseClick = 'settings | show recovery phrase | Your recovery phrase (keep it secret!) | hide passphrase | click',
-  SettingsShowRecoveryPhraseYourRecoveryPhraseXClick = 'settings | show recovery phrase | Your recovery phrase (keep it secret!) | x | click',
-  SettingsAnalyticsAgreeClick = 'settings | analytics | agree | click',
-  SettingsAnalyticsSkipClick = 'settings | analytics | skip | click',
-  SettingsFaqsClick = 'settings | faqs | click',
-  // Recieve section
-  ReceiveClick = 'receive | receive | click',
-  ReceiveCopyAddressIconClick = 'receive | receive | copy address icon | click',
-  ReceiveCopyADAHandleIconClick = 'receive | receive | copy ADA handle icon | click',
-  ReceiveYourWalletAddressXClick = 'receive | Your wallet address | x | click',
-  // Dapp Connector
-  DappConnectorAuthorizeDappAuthorizeClick = 'dapp connector | authorize dapp | authorize | click',
-  DappConnectorAuthorizeDappCancelClick = 'dapp connector | authorize dapp | cancel | click',
-  DappConnectorAuthorizeDappDappConnectorBetaClick = 'dapp connector | authorize dapp | dapp connector beta | click',
-  DappConnectorAuthorizeDappConnectionAlwaysClick = 'dapp connector | authorize dapp | dapp connection | always | click',
-  DappConnectorAuthorizeDappConnectionOnlyOnceClick = 'dapp connector | authorize dapp | dapp connection | only once | click',
-  // User
-  UserWalletProfileIconClick = 'user/wallet profile | profile icon | click',
-  UserWalletProfileWalletAddressClick = 'user/wallet profile | wallet address | click',
-  UserWalletProfileAddressBookClick = 'user/wallet profile | address book | click',
-  UserWalletProfileSettingsClick = 'user/wallet profile | settings | click',
-  UserWalletProfileLightModeClick = 'user/wallet profile | light mode | click',
-  UserWalletProfileDarkModeClick = 'user/wallet profile | dark mode | click',
-  UserWalletProfileNetworkClick = 'user/wallet profile | network | click',
-  UserWalletProfileNetworkPreviewClick = 'user/wallet profile | network | preview | click',
-  UserWalletProfileNetworkPreprodClick = 'user/wallet profile | network | preprod | click',
-  UserWalletProfileNetworkMainnetClick = 'user/wallet profile | network | mainnet | click',
-  UserWalletProfileLockWalletClick = 'user/wallet profile | lock wallet | click',
-  // Lace Logo
-  WalletLaceClick = 'wallet | lace | click',
-  // Tokens
-  TokenTokensClick = 'token | tokens | click',
-  TokenTokensTokenRowClick = 'token | tokens | token row | click',
-  TokenTokenDetailViewAllClick = 'token | token detail | view all | click',
-  TokenTokenDetailXClick = 'token | token detail | x | click',
-  // Activities
-  ActivityActivityClick = 'activity | activity | click',
-  ActivityActivityActivityRowClick = 'activity | activity | activity row | click',
-  ActivityActivityDetailTransactionHashClick = 'activity | activity detail | transaction hash | click',
-  ActivityActivityDetailInputsClick = 'activity | activity detail | inputs | click',
-  ActivityActivityDetailOutputsClick = 'activity | activity detail | outputs | click',
-  ActivityActivityDetailXClick = 'activity | activity detail | x | click',
-  // Unlock Wallet
-  UnlockWalletWelcomeBackUnlockClick = 'unlock wallet | welcome back! | unlock | click',
-  UnlockWalletWelcomeBackForgotPasswordClick = 'unlock wallet | welcome back! | forgot password? | click',
-  UnlockWalletForgotPasswordProceedClick = 'unlock wallet | forgot password? | proceed | click',
-  UnlockWalletForgotPasswordCancelClick = 'unlock wallet | forgot password? | cancel | click',
-  UnlockWalletForgotPasswordNextClick = 'unlock wallet | forgot password? | set up your password | next | click',
-  UnlockWalletForgotPasswordRecoveryPhraseLengthNextClick = 'unlock wallet | forgot password? | recovery phrase length | next | click',
-  UnlockWalletForgotPasswordEnterPassphrase01NextClick = 'unlock wallet | forgot password? | enter passphrase #01 | next | click',
-  UnlockWalletForgotPasswordEnterPassphrase09NextClick = 'unlock wallet | forgot password? | enter passphrase #09 | next | click',
-  UnlockWalletForgotPasswordEnterPassphrase17NextClick = 'unlock wallet | forgot password? | enter passphrase #17 | next | click'
-}
-
 export enum EnhancedAnalyticsOptInStatus {
   OptedIn = 'ACCEPTED',
   OptedOut = 'REJECTED'

apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.ts

@@ -4,10 +4,8 @@ import dayjs from 'dayjs';
 import { Wallet } from '@lace/cardano';
 import {
   ExtensionViews,
-  PostHogAction,
   PostHogMetadata,
   PostHogPersonProperties,
-  PostHogProperties,
   UserTrackingType
 } from '@providers/AnalyticsProvider/analyticsTracker';
 import {
@@ -23,6 +21,7 @@ import { BackgroundService, UserIdService } from '@lib/scripts/types';
 import { experiments, fallbackConfiguration } from '@providers/ExperimentsProvider/config';
 import { ExperimentName } from '@providers/ExperimentsProvider/types';
 import { Subscription, BehaviorSubject } from 'rxjs';
+import { PostHogAction, PostHogProperties } from '@lace/common';
 
 /**
  * PostHog API reference:

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/MultiDelegationStaking.tsx

@@ -1,6 +1,12 @@
 import { OutsideHandlesProvider, Staking } from '@lace/staking';
 import React, { useCallback } from 'react';
-import { useBackgroundServiceAPIContext, useCurrencyStore, useExternalLinkOpener, useTheme } from '@providers';
+import {
+  useAnalyticsContext,
+  useBackgroundServiceAPIContext,
+  useCurrencyStore,
+  useExternalLinkOpener,
+  useTheme
+} from '@providers';
 import { useBalances, useFetchCoinPrice, useLocalStorage, useWalletManager } from '@hooks';
 import { useDelegationStore } from '@src/features/delegation/stores';
 import { usePassword, useSubmitingState } from '@views/browser/features/send-transaction';
@@ -66,10 +72,12 @@ export const MultiDelegationStaking = (): JSX.Element => {
     true
   );
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
+  const analytics = useAnalyticsContext();
 
   return (
     <OutsideHandlesProvider
       {...{
+        analytics,
         backgroundServiceAPIContextSetWalletPassword: setWalletPassword,
         balancesBalance: balance,
         delegationStoreSetDelegationTxBuilder: setDelegationTxBuilder,

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakePoolDetails/TransactionFail.tsx

@@ -82,7 +82,10 @@ export const TransactionFailFooter = ({ popupView }: TransactionFailProps): Reac
   return (
     <div className={styles.footerFail}>
       <Button
-        onClick={() => closeDrawer()}
+        onClick={() => {
+          analytics.sendEventToPostHog(PostHogAction.StakingManageDelegationSomethingWentWrongCancelClick);
+          closeDrawer();
+        }}
         color="secondary"
         className={styles.btn}
         size="large"

packages/common/src/analytics/iAnalyticsTracker.ts

@@ -0,0 +1,7 @@
+import type { PostHogAction, PostHogProperties } from './types';
+
+export interface IAnalyticsTracker {
+  sendPageNavigationEvent: () => Promise<void>;
+  sendAliasEvent: () => Promise<void>;
+  sendEventToPostHog: (action: PostHogAction, properties?: PostHogProperties) => Promise<void>;
+}

packages/common/src/analytics/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './iAnalyticsTracker';