feat 📈 (llm): add analytics for new accounts list (#8818)

📈 (llm): add analytics for new accounts list

Author: LucasWerey

.changeset/hot-taxis-explain.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Add analytics for llm new account list ui

apps/ledger-live-mobile/src/components/NavigationHeaderBackButton.tsx

@@ -1,5 +1,5 @@
 import { Flex, Icons } from "@ledgerhq/native-ui";
-import { useNavigation } from "@react-navigation/native";
+import { NavigationProp, NavigationState, useNavigation } from "@react-navigation/native";
 import React from "react";
 import Touchable from "./Touchable";
 
@@ -8,7 +8,11 @@ type Props = {
    * Function called when user presses on the back arrow.
    * If undefined: default `navigation.goBack` is used.
    */
-  onPress?: () => void;
+  onPress?: (
+    nav: Omit<NavigationProp<ReactNavigation.RootParamList>, "getState"> & {
+      getState(): NavigationState | undefined;
+    },
+  ) => void;
 };
 
 export const NavigationHeaderBackImage = () => (
@@ -25,7 +29,7 @@ export const NavigationHeaderBackButton: React.FC<Props> = React.memo(({ onPress
   return (
     <Touchable
       testID="navigation-header-back-button"
-      onPress={() => (onPress ? onPress() : navigation.goBack())}
+      onPress={() => (onPress ? onPress(navigation) : navigation.goBack())}
     >
       <NavigationHeaderBackImage />
     </Touchable>

apps/ledger-live-mobile/src/components/RootNavigator/AccountsNavigator.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useTheme } from "styled-components/native";
 import { useSelector } from "react-redux";
@@ -25,17 +25,47 @@ import type { AccountsNavigatorParamList } from "./types/AccountsNavigator";
 import { hasNoAccountsSelector } from "~/reducers/accounts";
 import AccountsList from "LLM/features/Accounts/screens/AccountsList";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { NavigationHeaderBackButton } from "../NavigationHeaderBackButton";
+import { track } from "~/analytics";
+import { NavigationProp, NavigationState, useNavigation, useRoute } from "@react-navigation/native";
+import { TrackingEvent } from "LLM/features/Accounts/enums";
 
 const Stack = createStackNavigator<AccountsNavigatorParamList>();
 
+type NavType = Omit<NavigationProp<ReactNavigation.RootParamList>, "getState"> & {
+  getState(): NavigationState | undefined;
+};
+
+type ParamsType = {
+  params?: { specificAccounts?: object[] };
+};
+
 export default function AccountsNavigator() {
   const { colors } = useTheme();
   const stackNavConfig = useMemo(() => getStackNavigatorConfig(colors), [colors]);
   const accountListUIFF = useFeature("llmAccountListUI");
+  const route = useRoute();
+  const navigation = useNavigation();
 
   const hasNoAccounts = useSelector(hasNoAccountsSelector);
   const readOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector) && hasNoAccounts;
 
+  const onPressBack = useCallback(
+    (nav: NavType) => {
+      // Needed since we use the same screen for different purposes
+      const params: ParamsType = navigation.getState()?.routes[1].params || {};
+      const screenName = params?.params?.specificAccounts
+        ? TrackingEvent.AccountListSummary
+        : TrackingEvent.AccountsList;
+      track("button_clicked", {
+        button: "Back",
+        page: screenName || route.name,
+      });
+      nav.goBack();
+    },
+    [navigation, route.name],
+  );
+
   return (
     <Stack.Navigator screenOptions={stackNavConfig}>
       <Stack.Screen
@@ -84,6 +114,7 @@ export default function AccountsNavigator() {
           component={AccountsList}
           options={{
             headerTitle: "",
+            headerLeft: () => <NavigationHeaderBackButton onPress={onPressBack} />,
           }}
         />
       )}

apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from "react";
 import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useTheme } from "styled-components/native";
-import { useRoute } from "@react-navigation/native";
+import { useNavigation, useRoute } from "@react-navigation/native";
 import { ScreenName } from "~/const";
 import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
 import { track } from "~/analytics";
@@ -13,11 +13,13 @@ import ScanDeviceAccounts from "LLM/features/Accounts/screens/ScanDeviceAccounts
 import { AccountsListNavigator } from "./screens/AccountsList/types";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import AccountsList from "LLM/features/Accounts/screens/AccountsList";
+import { NavigationHeaderBackButton } from "~/components/NavigationHeaderBackButton";
 
 export default function Navigator() {
   const { colors } = useTheme();
   const route = useRoute();
   const accountListUIFF = useFeature("llmAccountListUI");
+  const navigation = useNavigation();
 
   const onClose = useCallback(() => {
     track("button_clicked", {
@@ -34,6 +36,14 @@ export default function Navigator() {
     [colors, onClose],
   );
 
+  const onPressBack = useCallback(() => {
+    track("button_clicked", {
+      button: "Back",
+      page: route.name,
+    });
+    navigation.goBack();
+  }, [route, navigation]);
+
   return (
     <Stack.Navigator
       screenOptions={{
@@ -65,6 +75,7 @@ export default function Navigator() {
           component={AccountsList}
           options={{
             headerTitle: "",
+            headerLeft: () => <NavigationHeaderBackButton onPress={onPressBack} />,
           }}
         />
       )}

apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddAccountButton/index.tsx

@@ -24,14 +24,15 @@ type Props = {
   sourceScreenName: string;
   onClick?: () => void;
   disabled?: boolean;
+  currency?: string;
 };
 
-const AddAccountButton: React.FC<Props> = ({ sourceScreenName, disabled, onClick }) => {
+const AddAccountButton: React.FC<Props> = ({ sourceScreenName, disabled, currency, onClick }) => {
   const { t } = useTranslation();
   const [isAddModalOpened, setAddModalOpened] = useState<boolean>(false);
 
   const openAddModal = () => {
-    track("button_clicked", { button: "Add a new account", page: sourceScreenName });
+    track("button_clicked", { button: "Add a new account", page: sourceScreenName, currency });
     if (onClick) {
       onClick();
       return;

apps/ledger-live-mobile/src/newArch/features/Accounts/enums.ts

@@ -0,0 +1,4 @@
+export enum TrackingEvent {
+  AccountListSummary = "Account List Summary",
+  AccountsList = "Accounts",
+}

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AccountsList/index.tsx

@@ -24,7 +24,7 @@ import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { useGroupedCurrenciesByProvider } from "@ledgerhq/live-common/deposit/index";
 import { LoadingBasedGroupedCurrencies, LoadingStatus } from "@ledgerhq/live-common/deposit/type";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
-
+import { TrackingEvent } from "../../enums";
 type Props = StackNavigatorProps<AccountsListNavigator, ScreenName.AccountsList>;
 
 export default function AccountsList({ route }: Props) {
@@ -103,10 +103,13 @@ export default function AccountsList({ route }: Props) {
   }, [currency, llmNetworkBasedAddAccountFlow?.enabled, navigation, provider, specificAccounts]);
 
   const onClick = specificAccounts ? onAddAccount : undefined;
-
+  const pageTrackingEvent = specificAccounts
+    ? TrackingEvent.AccountListSummary
+    : TrackingEvent.AccountsList;
+  const currencyToTrack = specificAccounts ? currency?.name : undefined;
   return (
     <>
-      <TrackScreen event="Accounts" />
+      <TrackScreen name={pageTrackingEvent} source={sourceScreenName} currency={currencyToTrack} />
       <ReactNavigationPerformanceView screenName={ScreenName.AccountsList} interactive>
         <SafeAreaView edges={["left", "right", "bottom"]} isFlex style={{ marginHorizontal: 16 }}>
           {showHeader && (
@@ -129,7 +132,8 @@ export default function AccountsList({ route }: Props) {
           {canAddAccount && (
             <AddAccountButton
               disabled={isAddAccountCtaDisabled}
-              sourceScreenName="Accounts"
+              sourceScreenName={pageTrackingEvent}
+              currency={currencyToTrack}
               onClick={onClick}
             />
           )}

apps/ledger-live-mobile/src/newArch/features/Assets/screens/AssetsList/index.tsx

@@ -29,7 +29,7 @@ export default function AssetsList({ route }: Props) {
 
   return (
     <>
-      <TrackScreen event="Accounts" />
+      <TrackScreen name="Assets" source={sourceScreenName} />
       <ReactNavigationPerformanceView screenName={ScreenName.AssetsList} interactive>
         <SafeAreaView edges={["left", "right", "bottom"]} isFlex style={{ marginHorizontal: 16 }}>
           {showHeader && (

apps/ledger-live-mobile/src/screens/WalletCentricAsset/index.tsx

@@ -109,9 +109,6 @@ const AssetScreen = ({ route }: NavigationProps) => {
   );
 
   const onAddAccount = useCallback(() => {
-    track("button_clicked", {
-      button: "Add new",
-    });
     if (llmNetworkBasedAddAccountFlow?.enabled && currency) {
       if (provider && provider?.currenciesByNetwork.length > 1) {
         navigation.navigate(NavigatorName.AssetSelection, {
@@ -131,6 +128,9 @@ const AssetScreen = ({ route }: NavigationProps) => {
         });
       }
     } else {
+      track("button_clicked", {
+        button: "Add new",
+      });
       navigation.navigate(NavigatorName.AddAccounts, {
         screen: undefined,
         currency,