fix: 🐞 analytics and warning page close process (instead of back) (#9224

)
LedgerHQ · Feb 14, 2025 · 53c4e0b · 53c4e0b
1 parent 279ec44
commit 53c4e0b
Show file tree

Hide file tree

Showing 20 changed files with 107 additions and 30 deletions.
diff --git a/.changeset/smart-lizards-remember.md b/.changeset/smart-lizards-remember.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Fix/add some analytics metadata and some quick fixes (close the warning screen rather than back)
diff --git a/apps/ledger-live-mobile/src/components/SelectableAccountsList.tsx b/apps/ledger-live-mobile/src/components/SelectableAccountsList.tsx
@@ -45,7 +45,7 @@ const selectAllHitSlop = {
 type Props = FlexBoxProps & {
   accounts: Account[];
   onPressAccount?: (_: Account) => void;
-  onSelectAll?: (_: Account[]) => void;
+  onSelectAll?: (_: Account[], autoSelect?: boolean) => void;
   onUnselectAll?: (_: Account[]) => void;
   selectedIds: string[];
   isDisabled?: boolean;

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx
@@ -22,7 +22,6 @@ import {
   StackNavigatorNavigation,
   StackNavigatorProps,
 } from "~/components/RootNavigator/types/helpers";
-import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
 
 import useAnalytics from "LLM/hooks/useAnalytics";
 import { AddAccountsNavigatorParamList } from "~/components/RootNavigator/types/AddAccountsNavigator";
@@ -136,7 +135,6 @@ export default function Navigator() {
           headerTitle: "",
           headerLeft: () => null,
           headerTransparent: true,
-          headerRight: () => <NavigationHeaderCloseButtonAdvanced />,
         }}
         initialParams={{
           onCloseNavigation: onClose,

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AccountListDrawer/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AccountListDrawer/index.tsx
@@ -18,12 +18,19 @@ type AccountListDrawerProps = {
   onClose: () => void;
   data: (Account | TokenAccount)[];
   onPressAccount: (account: Account | TokenAccount) => void;
+  sourceScreenName?: string;
 };
 
-const AccountListDrawer = ({ isOpen, onClose, data, onPressAccount }: AccountListDrawerProps) => {
+const AccountListDrawer = ({
+  isOpen,
+  onClose,
+  data,
+  onPressAccount,
+  sourceScreenName,
+}: AccountListDrawerProps) => {
   const { colors } = useTheme();
   const { t } = useTranslation();
-  const { analyticsMetadata } = useAnalytics(AnalyticContexts.AddAccounts);
+  const { analyticsMetadata } = useAnalytics(AnalyticContexts.AddAccounts, sourceScreenName);
 
   const renderItem = useCallback(
     ({ item: account }: ListRenderItemInfo<Account | TokenAccount>) => {

diff --git a/...-live-mobile/src/newArch/features/Accounts/components/AccountQuickActionsDrawer/index.tsx b/...-live-mobile/src/newArch/features/Accounts/components/AccountQuickActionsDrawer/index.tsx
@@ -17,20 +17,22 @@ type AccountListDrawerProps = {
   onClose: () => void;
   account: Account | TokenAccount | null;
   currency: CryptoOrTokenCurrency;
+  sourceScreenName?: string;
 };
 
 const AccountQuickActionsDrawer = ({
   isOpen,
   onClose,
   account,
   currency,
+  sourceScreenName,
 }: AccountListDrawerProps) => {
   const { actions } = useAccountQuickActionDrawerViewModel({
     accounts: account ? [account as Account] : [],
     currency,
   });
   const { colors, space } = useTheme();
-  const { analyticsMetadata } = useAnalytics(AnalyticContexts.AddAccounts);
+  const { analyticsMetadata } = useAnalytics(AnalyticContexts.AddAccounts, sourceScreenName);
   const pageTrackingEvent = analyticsMetadata.AddFunds?.onQuickActionOpen;
 
   return (

diff --git a/...ile/src/newArch/features/Accounts/components/AccountsListView/useAccountsListViewModel.ts b/...ile/src/newArch/features/Accounts/components/AccountsListView/useAccountsListViewModel.ts
@@ -19,6 +19,7 @@ import isEqual from "lodash/isEqual";
 import { orderAccountsByFiatValue } from "@ledgerhq/live-countervalues/portfolio";
 import { useCountervaluesState } from "@ledgerhq/live-countervalues-react/index";
 import { counterValueCurrencySelector } from "~/reducers/settings";
+import { TrackingEvent } from "../../enums";
 
 export interface Props {
   sourceScreenName?: ScreenName;
@@ -51,6 +52,10 @@ const useAccountsListViewModel = ({
 
   const accountsToDisplay = orderedAccountsByValue.slice(0, limitNumberOfAccounts);
 
+  const pageTrackingEvent = specificAccounts
+    ? TrackingEvent.AccountListSummary
+    : TrackingEvent.AccountsList;
+
   const refreshAccountsOrdering = useRefreshAccountsOrdering();
   useFocusEffect(refreshAccountsOrdering);
 
@@ -64,7 +69,7 @@ const useAccountsListViewModel = ({
         track("account_clicked", {
           currency: account.currency.name,
           account: defaultAccountName,
-          page: "Accounts",
+          page: pageTrackingEvent,
         });
         navigation.navigate(ScreenName.Account, {
           accountId: account.id,
@@ -73,7 +78,7 @@ const useAccountsListViewModel = ({
         track("account_clicked", {
           currency: account.token.parentCurrency.name,
           account: defaultAccountName,
-          page: "Accounts",
+          page: pageTrackingEvent,
         });
         navigation.navigate(NavigatorName.Accounts, {
           screen: ScreenName.Account,
@@ -85,7 +90,7 @@ const useAccountsListViewModel = ({
         });
       }
     },
-    [navigation, sourceScreenName, startNavigationTTITimer, walletState],
+    [navigation, sourceScreenName, startNavigationTTITimer, walletState, pageTrackingEvent],
   );
 
   return {

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddFundsButton/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddFundsButton/index.tsx
@@ -17,6 +17,7 @@ function View({
   closeAccountListDrawer,
   handleOnSelectAccount,
   handleOnCloseQuickActions,
+  sourceScreenName,
 }: ViewProps) {
   const { t } = useTranslation();
 
@@ -35,12 +36,14 @@ function View({
         onClose={closeAccountListDrawer}
         data={accounts}
         onPressAccount={handleOnSelectAccount}
+        sourceScreenName={sourceScreenName}
       />
       <AccountQuickActionsDrawer
         isOpen={isAccountQuickActionsDrawerOpen}
         onClose={handleOnCloseQuickActions}
         account={selectedAccount}
         currency={currency}
+        sourceScreenName={sourceScreenName}
       />
     </>
   );

diff --git a/...ile/src/newArch/features/Accounts/components/AddFundsButton/useAddFundsButtonViewModel.ts b/...ile/src/newArch/features/Accounts/components/AddFundsButton/useAddFundsButtonViewModel.ts
@@ -4,6 +4,7 @@ import { Account, AccountLike } from "@ledgerhq/types-live";
 import { useState, useCallback } from "react";
 import { track } from "~/analytics";
 import useAnalytics from "LLM/hooks/useAnalytics";
+import { AnalyticContexts } from "LLM/hooks/useAnalytics/enums";
 
 export type Props = {
   accounts: Account[];
@@ -22,7 +23,7 @@ export default function useAddFundsButtonViewModel({
   const [selectedAccount, setSelectedAccount] = useState<AccountLike | null>(
     accounts.length === 1 ? accounts[0] : null,
   );
-  const { analyticsMetadata } = useAnalytics("addAccounts", sourceScreenName);
+  const { analyticsMetadata } = useAnalytics(AnalyticContexts.AddAccounts);
 
   const openFundOrAccountListDrawer = useCallback(() => {
     let clickMetadata;
@@ -76,5 +77,6 @@ export default function useAddFundsButtonViewModel({
     closeAccountListDrawer,
     handleOnSelectAccount,
     handleOnCloseQuickActions,
+    sourceScreenName,
   };
 }
diff --git a/...creens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts b/...creens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts
@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 import { BaseNavigation } from "~/components/RootNavigator/types/helpers";
 import { readOnlyModeEnabledSelector } from "~/reducers/settings";
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, useRoute } from "@react-navigation/native";
 import { NavigatorName } from "~/const";
 import { useCallback, useMemo } from "react";
 import { track } from "~/analytics";
@@ -25,6 +25,7 @@ const useSelectAddAccountMethodViewModel = ({
   const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
   const isReadOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector);
   const isWalletSyncEnabled = walletSyncFeatureFlag?.enabled;
+  const route = useRoute();
   const hasCurrency = !!currency;
 
   const navigationParams = useMemo(() => {
@@ -46,10 +47,10 @@ const useSelectAddAccountMethodViewModel = ({
       }
     } else {
       return llmNetworkBasedAddAccountFlow?.enabled
-        ? { context: AddAccountContexts.AddAccounts }
+        ? { context: AddAccountContexts.AddAccounts, sourceScreenName: route.name }
         : {};
     }
-  }, [hasCurrency, currency, llmNetworkBasedAddAccountFlow?.enabled]);
+  }, [hasCurrency, currency, llmNetworkBasedAddAccountFlow?.enabled, route.name]);
 
   const trackButtonClick = useCallback((button: string) => {
     track("button_clicked", {

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccountSuccess/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccountSuccess/index.tsx
@@ -2,7 +2,6 @@ import { Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { FlatList, ListRenderItemInfo, StyleSheet, View as RNView } from "react-native";
-import { ScreenName } from "~/const";
 import { TrackScreen } from "~/analytics";
 import { AccountLikeEnhanced } from "../ScanDeviceAccounts/types";
 import SafeAreaView from "~/components/SafeAreaView";
@@ -13,6 +12,7 @@ import AddFundsButton from "../../components/AddFundsButton";
 import CloseWithConfirmation from "LLM/components/CloseWithConfirmation";
 import AnimatedAccountItem from "../../components/AccountsListView/components/AnimatedAccountItem";
 import useAddAccountSuccessViewModel, { type Props } from "./useAddAccountSuccessViewModel";
+import { AnalyticPages } from "LLM/hooks/useAnalytics/enums";
 
 type ViewProps = ReturnType<typeof useAddAccountSuccessViewModel>;
 
@@ -37,7 +37,7 @@ function View({
 
   return (
     <SafeAreaView edges={["left", "right", "bottom", "top"]} isFlex>
-      <TrackScreen category="AddAccounts" name="Success" currencyName={currency?.name} />
+      <TrackScreen category="AddAccounts" name="Success" currency={currency?.name} />
       <VerticalGradientBackground stopColor={getCurrencyColor(currency)} />
       <Flex alignItems="center" style={styles.root} pt={space[10]}>
         <RNView style={[styles.iconWrapper, { backgroundColor: rgba(statusColor, 0.1) }]}>
@@ -64,7 +64,7 @@ function View({
         <AddFundsButton
           accounts={accountsToAdd}
           currency={currency}
-          sourceScreenName={ScreenName.AddAccountsSuccess}
+          sourceScreenName={AnalyticPages.AddAccountSuccess}
         />
         <CloseWithConfirmation
           showButton

diff --git a/.../src/newArch/features/Accounts/screens/AddAccountSuccess/useAddAccountSuccessViewModel.ts b/.../src/newArch/features/Accounts/screens/AddAccountSuccess/useAddAccountSuccessViewModel.ts
@@ -6,6 +6,8 @@ import { NavigatorName, ScreenName } from "~/const";
 import { NetworkBasedAddAccountNavigator } from "../AddAccount/types";
 import { AddAccountContexts } from "../AddAccount/enums";
 import { AccountLikeEnhanced } from "../ScanDeviceAccounts/types";
+import useAnalytics from "~/newArch/hooks/useAnalytics";
+import { track } from "~/analytics";
 
 export type Props = BaseComposite<
   StackNavigatorProps<NetworkBasedAddAccountNavigator, ScreenName.AddAccountsSuccess>
@@ -14,27 +16,32 @@ export default function useAddAccountSuccessViewModel({ route }: Props) {
   const { currency, accountsToAdd, context, onCloseNavigation } = route.params || {};
   const { colors, space } = useTheme();
   const navigation = useNavigation();
+  const { analyticsMetadata } = useAnalytics(context);
 
   const keyExtractor = useCallback((item: AccountLikeEnhanced) => item?.id, []);
 
   const statusColor = colors.neutral.c100;
 
   const goToAccounts = useCallback(
     (accountId: string) => () => {
-      if (context === AddAccountContexts.AddAccounts)
+      if (context === AddAccountContexts.AddAccounts) {
         navigation.navigate(ScreenName.Account, {
           accountId,
         });
-      else
+      } else {
         navigation.navigate(NavigatorName.ReceiveFunds, {
           screen: ScreenName.ReceiveConfirmation,
           params: {
             ...route.params,
             accountId,
           },
         });
+      }
+
+      const clickMetadata = analyticsMetadata[ScreenName.AddAccountsSuccess]?.onSelectAccount;
+      if (clickMetadata) track(clickMetadata.eventName, clickMetadata.payload);
     },
-    [navigation, route.params, context],
+    [navigation, route.params, context, analyticsMetadata],
   );
 
   return {

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccountWarning/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccountWarning/index.tsx
@@ -3,14 +3,14 @@ import { StyleSheet } from "react-native";
 import { Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
 import { useTranslation } from "react-i18next";
 import { Account } from "@ledgerhq/types-live";
-import { ScreenName } from "~/const";
 import SafeAreaView from "~/components/SafeAreaView";
 import Circle from "~/components/Circle";
 import CloseWithConfirmation from "LLM/components/CloseWithConfirmation";
 import VerticalGradientBackground from "../../components/VerticalGradientBackground";
 import AddFundsButton from "../../components/AddFundsButton";
 import useAddAccountWarningViewModel, { type Props } from "./useAddAccountWarningViewModel";
 import AnimatedAccountItem from "../../components/AccountsListView/components/AnimatedAccountItem";
+import { AnalyticPages } from "LLM/hooks/useAnalytics/enums";
 
 type ViewProps = ReturnType<typeof useAddAccountWarningViewModel>;
 
@@ -55,7 +55,7 @@ const View = ({
         <AddFundsButton
           accounts={[emptyAccount as Account]}
           currency={currency}
-          sourceScreenName={ScreenName.AddAccountsWarning}
+          sourceScreenName={AnalyticPages.AddAccountWarning}
         />
         <CloseWithConfirmation
           showButton

diff --git a/.../src/newArch/features/Accounts/screens/AddAccountWarning/useAddAccountWarningViewModel.ts b/.../src/newArch/features/Accounts/screens/AddAccountWarning/useAddAccountWarningViewModel.ts
@@ -5,6 +5,8 @@ import { useTheme } from "styled-components/native";
 import { useNavigation } from "@react-navigation/core";
 import { useCallback } from "react";
 import { AddAccountContexts } from "../AddAccount/enums";
+import { track } from "~/analytics";
+import useAnalytics from "~/newArch/hooks/useAnalytics";
 
 export type Props = BaseComposite<
   StackNavigatorProps<NetworkBasedAddAccountNavigator, ScreenName.AddAccountsWarning>
@@ -14,6 +16,7 @@ export default function useAddAccountWarningViewModel({ route }: Props) {
   const { emptyAccount, emptyAccountName, currency, context } = route.params || {};
   const { colors, space } = useTheme();
   const navigation = useNavigation();
+  const { analyticsMetadata } = useAnalytics(context);
 
   const statusColor = colors.warning.c70;
 
@@ -32,8 +35,11 @@ export default function useAddAccountWarningViewModel({ route }: Props) {
           },
         });
       }
+
+      const clickMetadata = analyticsMetadata[ScreenName.AddAccountsWarning]?.onSelectAccount;
+      if (clickMetadata) track(clickMetadata.eventName, clickMetadata.payload);
     },
-    [navigation, route.params, context],
+    [navigation, route.params, context, analyticsMetadata],
   );
 
   const handleOnCloseWarningScreen = useCallback(() => {

diff --git a/.../features/Accounts/screens/ScanDeviceAccounts/components/ScannedAccountsSection/index.tsx b/.../features/Accounts/screens/ScanDeviceAccounts/components/ScannedAccountsSection/index.tsx
@@ -16,7 +16,7 @@ const ScannedAccountsSection = ({
   const hasCalledOnSelectAll = useRef(false);
   useEffect(() => {
     if (defaultSelected && onSelectAll && !hasCalledOnSelectAll.current) {
-      onSelectAll(accounts);
+      onSelectAll(accounts, true);
       hasCalledOnSelectAll.current = true; // to prevent maximum update depth error
     }
   }, [defaultSelected, accounts, onSelectAll]);

diff --git a/...rc/newArch/features/Accounts/screens/ScanDeviceAccounts/useScanDeviceAccountsViewModel.ts b/...rc/newArch/features/Accounts/screens/ScanDeviceAccounts/useScanDeviceAccountsViewModel.ts
@@ -46,6 +46,7 @@ export default function useScanDeviceAccountsViewModel({
     inline,
     returnToSwap,
     onCloseNavigation,
+    context,
   } = route.params || {};
 
   const newAccountSchemes = useMemo(() => {
@@ -131,10 +132,10 @@ export default function useScanDeviceAccountsViewModel({
     [selectedIds],
   );
   const selectAll = useCallback(
-    (accounts: Account[]) => {
+    (accounts: Account[], autoSelect?: boolean) => {
       setSelectedIds(uniq([...selectedIds, ...accounts.map(a => a.id)]));
       const selectAllMetadata = analyticsMetadata?.AccountsFound?.onSelectAll;
-      if (selectAllMetadata)
+      if (selectAllMetadata && !autoSelect)
         track(selectAllMetadata.eventName, {
           ...selectAllMetadata.payload,
         });
@@ -285,6 +286,7 @@ export default function useScanDeviceAccountsViewModel({
           emptyAccount: alreadyEmptyAccount,
           emptyAccountName: alreadyEmptyAccountName,
           currency,
+          context,
         });
       } else if (CustomNoAssociatedAccounts) {
         navigation.replace(ScreenName.NoAssociatedAccounts, {
@@ -303,6 +305,7 @@ export default function useScanDeviceAccountsViewModel({
     currency,
     CustomNoAssociatedAccounts,
     scannedAccounts,
+    context,
   ]);
   return {
     alreadyEmptyAccount,

diff --git a/apps/ledger-live-mobile/src/newArch/features/AssetSelection/screens/SelectCrypto/index.tsx b/apps/ledger-live-mobile/src/newArch/features/AssetSelection/screens/SelectCrypto/index.tsx
@@ -99,7 +99,11 @@ export default function SelectCrypto({
 
   return (
     <SafeAreaView edges={["left", "right"]} isFlex testID="select-crypto-view-area">
-      <TrackScreen name={pageTrackingEvent?.eventName} {...pageTrackingEvent?.payload} />
+      <TrackScreen
+        name={pageTrackingEvent?.eventName}
+        {...pageTrackingEvent?.payload}
+        source={sourceScreenName}
+      />
       <Text variant="h4" fontWeight="semiBold" mx={6} testID={titleTestId}>
         {titleText}
       </Text>