Merge branch 'develop' into refactor/swap-module

apps/wallet-mobile/src/features/Discover/useDappConnectorManager.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import {InteractionManager} from 'react-native'
 
 import {logger} from '../../kernel/logger/logger'
+import {useMetrics} from '../../kernel/metrics/metricsManager'
 import {useWalletNavigation} from '../../kernel/navigation'
 import {isEmptyString} from '../../kernel/utils'
 import {cip30LedgerExtensionMaker} from '../../yoroi-wallets/cardano/cip30/cip30-ledger'
@@ -27,6 +28,8 @@ export const useDappConnectorManager = () => {
   const {wallet, meta} = useSelectedWallet()
   const {navigateToTxReview} = useWalletNavigation()
   const {tabs, tabActiveIndex} = useBrowser()
+  const {track} = useMetrics()
+
   const activeTab = tabs[tabActiveIndex]
   const activeTabUrl = activeTab?.url
   const activeTabOrigin = activeTabUrl === undefined ? null : new URL(activeTabUrl).origin
@@ -38,6 +41,7 @@ export const useDappConnectorManager = () => {
 
   const handleSignTx = React.useCallback(
     ({cbor, manager}: {cbor: string; manager: DappConnector}) => {
+      track.dappPopupSignTransactionPageViewed()
       return new Promise<string>((resolve, reject) => {
         let shouldResolve = true
         return manager.getDAppList().then(({dapps}) => {
@@ -76,11 +80,12 @@ export const useDappConnectorManager = () => {
         })
       })
     },
-    [activeTabOrigin, navigateToTxReview, navigateTo],
+    [track, activeTabOrigin, navigateToTxReview, navigateTo],
   )
 
   const handleSignTxWithHW = React.useCallback(
     ({cbor, partial, manager}: {cbor: string; partial?: boolean; manager: DappConnector}) => {
+      track.dappPopupSignTransactionPageViewed()
       return new Promise<Transaction>((resolve, reject) => {
         let shouldResolve = true
         return manager.getDAppList().then(({dapps}) => {
@@ -118,7 +123,7 @@ export const useDappConnectorManager = () => {
         })
       })
     },
-    [activeTabOrigin, navigateToTxReview, navigateTo],
+    [track, activeTabOrigin, navigateToTxReview, navigateTo],
   )
 
   return React.useMemo(

apps/wallet-mobile/src/features/Initialization/ChooseBiometricLogin/ChooseBiometricLoginScreen.tsx

@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native'
 import {parseBoolean, useAsyncStorage, useMutationWithInvalidations} from '@yoroi/common'
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
@@ -8,13 +9,22 @@ import {useQuery, UseQueryOptions} from 'react-query'
 
 import {Button, ButtonType} from '../../../components/Button/Button'
 import {Space} from '../../../components/Space/Space'
+import {useMetrics} from '../../../kernel/metrics/metricsManager'
 import {useEnableAuthWithOs} from '../../Auth/common/hooks'
 import {useStrings} from '../common'
 import {Biometric} from '../illustrations/Biometric'
 
 export const ChooseBiometricLoginScreen = () => {
   const {styles} = useStyles()
   const strings = useStrings()
+  const {track} = useMetrics()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      track.onboardingBiometricsPageViewed()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  )
 
   const {setScreenShown, isLoading: isScreenShownLoading} = useSetScreenShown()
 

apps/wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx

@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native'
 import {parseBoolean, useAsyncStorage, useMutationWithInvalidations} from '@yoroi/common'
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
@@ -10,6 +11,7 @@ import {useQuery, UseQueryOptions} from 'react-query'
 import {Button} from '../../../components/Button/Button'
 import {Space} from '../../../components/Space/Space'
 import {Text} from '../../../components/Text'
+import {useMetrics} from '../../../kernel/metrics/metricsManager'
 import {useWalletNavigation} from '../../../kernel/navigation'
 import {DarkThemeIlustration} from '../illustrations/DarkThemeIlustration'
 import {LightThemeIlustration} from '../illustrations/LightThemeIlustration'
@@ -18,10 +20,18 @@ export const DarkThemeAnnouncement = () => {
   const {styles} = useStyles()
   const strings = useStrings()
   const {isDark} = useTheme()
+  const {track} = useMetrics()
   const {setScreenShown, isLoading: isSetScreenShownLoading} = useSetScreenShown()
 
   const scrollViewRef = React.useRef<ScrollView | null>(null)
 
+  useFocusEffect(
+    React.useCallback(() => {
+      track.onboardingThemePageViewed()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  )
+
   React.useEffect(() => {
     const timeout = setTimeout(() => {
       scrollViewRef.current?.flashScrollIndicators()
@@ -67,8 +77,12 @@ export const DarkThemeAnnouncement = () => {
 const Toggle = () => {
   const {styles, color} = useStyles()
   const {isLight, isDark, selectThemeName} = useTheme()
+  const {track} = useMetrics()
 
-  const handleOnValueChange = () => selectThemeName(isLight ? 'default-dark' : 'default-light')
+  const handleOnValueChange = () => {
+    selectThemeName(isLight ? 'default-dark' : 'default-light')
+    track.themeSelected({theme: isLight ? 'dark' : 'light'})
+  }
 
   return (
     <View style={styles.toggle}>

apps/wallet-mobile/src/features/Initialization/InitializationNavigator.tsx

@@ -1,7 +1,9 @@
+import {useFocusEffect} from '@react-navigation/native'
 import {createStackNavigator} from '@react-navigation/stack'
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
 
+import {useMetrics} from '../../kernel/metrics/metricsManager'
 import {defaultStackNavigationOptions, InititalizationRoutes} from '../../kernel/navigation'
 import {useAuth} from '../Auth/AuthProvider'
 import {EnableLoginWithPin} from '../Auth/EnableLoginWithPin'
@@ -60,6 +62,14 @@ export const InitializationNavigator = () => {
 
 const CreatePinScreenWrapper = () => {
   const {login} = useAuth()
+  const {track} = useMetrics()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      track.onboardingPinCodePageViewed()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  )
 
   return <EnableLoginWithPin onDone={login} />
 }

apps/wallet-mobile/src/features/Settings/useCases/changeAppSettings/ChangeTheme/ThemePickerItem.tsx

@@ -6,6 +6,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Icon} from '../../../../../components/Icon'
 import {Text} from '../../../../../components/Text'
 import {themeNames} from '../../../../../kernel/i18n/global-messages'
+import {useMetrics} from '../../../../../kernel/metrics/metricsManager'
 import {useThemeStorageMaker} from '../../../../../yoroi-wallets/hooks'
 
 type Props = {
@@ -18,8 +19,10 @@ export const ThemePickerItem = ({title, selectTheme, setLocalTheme}: Props) => {
   const {colors} = useStyles()
   const strings = useStrings()
   const themeStorage = useThemeStorageMaker()
+  const {track} = useMetrics()
 
   const handleSelectTheme = (theme: SupportedThemes) => {
+    track.themeSelected({theme: theme === 'default-light' ? 'light' : theme === 'default-dark' ? 'dark' : 'auto'})
     setLocalTheme(theme)
     selectTheme(theme)
   }

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreHwWallet/CheckNanoXScreen.tsx

@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useSetupWallet} from '@yoroi/setup-wallet'
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
@@ -11,18 +11,27 @@ import {Button} from '../../../../components/Button/Button'
 import {Space} from '../../../../components/Space/Space'
 import {StepperProgress} from '../../../../components/StepperProgress/StepperProgress'
 import {Text} from '../../../../components/Text'
+import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {SetupWalletRouteNavigation} from '../../../../kernel/navigation'
 import {useStrings} from '../../common/useStrings'
 import {LedgerCheckIllustration} from '../../illustrations/LedgerCheckIllustration'
 
 export const CheckNanoXScreen = () => {
   const strings = useStrings()
   const styles = useStyles()
+  const {track} = useMetrics()
 
   const navigation = useNavigation<SetupWalletRouteNavigation>()
   const onContinue = () => navigation.navigate('setup-wallet-connect-nano-x')
   const {useUSB} = useSetupWallet()
 
+  useFocusEffect(
+    React.useCallback(() => {
+      track.connectWalletCheckPageViewed()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  )
+
   const commonRequirements = [strings.appInstalled, strings.appOpened]
   const usbRequirements = [strings.haveOTGAdapter, strings.usbAlwaysConnected, ...commonRequirements]
   const bleRequirements = [

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreHwWallet/ConnectNanoXScreen.tsx

@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useSetupWallet} from '@yoroi/setup-wallet'
 import {useTheme} from '@yoroi/theme'
 import {HW} from '@yoroi/types'
@@ -12,6 +12,7 @@ import {StepperProgress} from '../../../../components/StepperProgress/StepperPro
 import {showErrorDialog} from '../../../../kernel/dialogs'
 import {errorMessages} from '../../../../kernel/i18n/global-messages'
 import {LocalizableError} from '../../../../kernel/i18n/LocalizableError'
+import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {SetupWalletRouteNavigation} from '../../../../kernel/navigation'
 import {LedgerConnect} from '../../../../legacy/HW'
 import {getHWDeviceInfo} from '../../../../yoroi-wallets/cardano/hw/hw'
@@ -33,11 +34,19 @@ export const ConnectNanoXScreen = ({defaultDevices}: Props) => {
   const {styles} = useStyles()
   const {walletManager} = useWalletManager()
   const {openModal} = useModal()
+  const {track} = useMetrics()
 
   const navigation = useNavigation<SetupWalletRouteNavigation>()
 
   const {hwDeviceInfoChanged, walletImplementation, useUSB} = useSetupWallet()
 
+  useFocusEffect(
+    React.useCallback(() => {
+      track.connectWalletConnectPageViewed()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  )
+
   const onSuccess = (hwDeviceInfo: HW.DeviceInfo) => {
     hwDeviceInfoChanged(hwDeviceInfo)
 

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreHwWallet/SaveNanoXScreen.tsx

@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useAsyncStorage} from '@yoroi/common'
 import {Blockies} from '@yoroi/identicon'
 import {useSetupWallet} from '@yoroi/setup-wallet'
@@ -73,6 +73,13 @@ export const SaveNanoXScreen = () => {
 
   const {walletImplementation, hwDeviceInfo, accountVisual, walletIdChanged} = useSetupWallet()
 
+  useFocusEffect(
+    React.useCallback(() => {
+      track.connectWalletDetailsPageViewed()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  )
+
   if (!hwDeviceInfo) throw new Error('no hwDeviceInfo')
   const {plate, seed} = walletManager.checksum(hwDeviceInfo.bip44AccountPublic)
 
@@ -89,6 +96,7 @@ export const SaveNanoXScreen = () => {
       }
 
       track.restoreWalletDetailsSettled()
+      track.connectWalletDetailsSubmitted()
 
       navigation.navigate('setup-wallet-preparing-wallet')
     },

apps/wallet-mobile/src/kernel/metrics/ampli/index.ts

@@ -498,6 +498,18 @@ export interface SettingsInAppNotificationsStatusUpdatedProperties {
   status?: 'enabled' | 'disabled'
 }
 
+export interface StakingCenterDelegationSubmittedProperties {
+  /**
+   * The amount of ADA that the user will be exchanging.
+   *
+   * | Rule | Value |
+   * |---|---|
+   * | Type | number |
+   */
+  ada_amount?: number
+  staking_pool?: string
+}
+
 export interface SwapAssetFromChangedProperties {
   /**
    * Displaying the asset that the user chose to trade with.
@@ -900,6 +912,10 @@ export class BuyAdaSuccessRedirect implements BaseEvent {
   event_type = 'Buy Ada Success Redirect'
 }
 
+export class ClaimAdaTransactionInitiated implements BaseEvent {
+  event_type = 'Claim Ada Transaction Initiated'
+}
+
 export class ClaimAdaTransactionSettled implements BaseEvent {
   event_type = 'Claim Ada Transaction Settled'
 
@@ -1340,6 +1356,14 @@ export class StakingCenterDelegationInitiated implements BaseEvent {
   event_type = 'Staking Center Delegation Initiated'
 }
 
+export class StakingCenterDelegationSubmitted implements BaseEvent {
+  event_type = 'Staking Center Delegation Submitted'
+
+  constructor(public event_properties?: StakingCenterDelegationSubmittedProperties) {
+    this.event_properties = event_properties
+  }
+}
+
 export class StakingCenterPageViewed implements BaseEvent {
   event_type = 'Staking Center Page Viewed'
 }
@@ -1571,7 +1595,7 @@ export class Ampli {
    *
    * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/Assets%20Page%20Viewed)
    *
-   * This event tracks when a user views the Assets page. 
+   * This event tracks when a user views the Assets page.
    *  On mobile  is available on the wallet page (First item from main menu) in the assets tab.
    *
    * @param options Amplitude event options.
@@ -1597,6 +1621,21 @@ export class Ampli {
     return this.track(new BuyAdaSuccessRedirect(), options);
   }
 
+  /**
+   * Claim Ada Transaction Initiated
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/Claim%20Ada%20Transaction%20Initiated)
+   *
+   * This event tracks when a user starts the funne to claim staking rewards in the delegation center.
+   *
+   * @param options Amplitude event options.
+   */
+  claimAdaTransactionInitiated(
+    options?: EventOptions,
+  ) {
+    return this.track(new ClaimAdaTransactionInitiated(), options);
+  }
+
   /**
    * Claim Ada Transaction Settled
    *
@@ -1788,11 +1827,11 @@ export class Ampli {
    *
    * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/Create%20Wallet%20Select%20Method%20Page%20Viewed)
    *
-   * This event tracks when a user views the page where they can select the method to create a wallet: 
+   * This event tracks when a user views the page where they can select the method to create a wallet:
    *
-   * \* Create new wallet 
+   * \* Create new wallet
    *
-   * \* Restore existing wallet 
+   * \* Restore existing wallet
    *
    * This event tracks when a user views the page where they can select the method to create a wallet\* Connect hardware wallet
    *
@@ -2289,7 +2328,7 @@ export class Ampli {
    *
    * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/Menu%20Page%20Viewed)
    *
-   * This event is triggered when a user views the menu page within the application. Only available on Mobile. 
+   * This event is triggered when a user views the menu page within the application. Only available on Mobile.
    *  The menu page is accesible via the bottom navigation page (last item on the right)
    *
    * @param options Amplitude event options.
@@ -2800,9 +2839,9 @@ export class Ampli {
    *
    * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/Send%20Select%20Asset%20Updated)
    *
-   * When an user update the tokens selection on "amount" step: 
-   *  \- Add 
-   *  \- Remove 
+   * When an user update the tokens selection on "amount" step:
+   *  \- Add
+   *  \- Remove
    *  \- Updated
    *
    * @param properties The event's properties (e.g. asset_count)
@@ -2896,6 +2935,23 @@ export class Ampli {
     return this.track(new StakingCenterDelegationInitiated(), options);
   }
 
+  /**
+   * Staking Center Delegation Submitted
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/Staking%20Center%20Delegation%20Submitted)
+   *
+   * Event indicating that a user has submitted a delegation in the staking center.
+   *
+   * @param properties The event's properties (e.g. ada_amount)
+   * @param options Amplitude event options.
+   */
+  stakingCenterDelegationSubmitted(
+    properties?: StakingCenterDelegationSubmittedProperties,
+    options?: EventOptions,
+  ) {
+    return this.track(new StakingCenterDelegationSubmitted(properties), options);
+  }
+
   /**
    * Staking Center Page Viewed
    *