From 438ba0d6afc98707a63aca9c68b65caffa2974d0 Mon Sep 17 00:00:00 2001 From: Lucas Werey Date: Mon, 6 Jan 2025 16:41:23 +0100 Subject: [PATCH] :chart_with_upwards_trend: (llm): add analytics for new accounts list --- .changeset/hot-taxis-explain.md | 5 +++ .../components/NavigationHeaderBackButton.tsx | 10 ++++-- .../RootNavigator/AccountsNavigator.tsx | 33 ++++++++++++++++++- .../newArch/features/Accounts/Navigator.tsx | 13 +++++++- .../components/AddAccountButton/index.tsx | 5 +-- .../src/newArch/features/Accounts/enums.ts | 4 +++ .../Accounts/screens/AccountsList/index.tsx | 12 ++++--- .../Assets/screens/AssetsList/index.tsx | 2 +- 8 files changed, 72 insertions(+), 12 deletions(-) create mode 100644 .changeset/hot-taxis-explain.md create mode 100644 apps/ledger-live-mobile/src/newArch/features/Accounts/enums.ts diff --git a/.changeset/hot-taxis-explain.md b/.changeset/hot-taxis-explain.md new file mode 100644 index 000000000000..d160517a46ec --- /dev/null +++ b/.changeset/hot-taxis-explain.md @@ -0,0 +1,5 @@ +--- +"live-mobile": minor +--- + +Add analytics for llm new account list ui diff --git a/apps/ledger-live-mobile/src/components/NavigationHeaderBackButton.tsx b/apps/ledger-live-mobile/src/components/NavigationHeaderBackButton.tsx index de40970c9c6c..61fa1932fccd 100644 --- a/apps/ledger-live-mobile/src/components/NavigationHeaderBackButton.tsx +++ b/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, "getState"> & { + getState(): NavigationState | undefined; + }, + ) => void; }; export const NavigationHeaderBackImage = () => ( @@ -25,7 +29,7 @@ export const NavigationHeaderBackButton: React.FC = React.memo(({ onPress return ( (onPress ? onPress() : navigation.goBack())} + onPress={() => (onPress ? onPress(navigation) : navigation.goBack())} > diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/AccountsNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/AccountsNavigator.tsx index 32e2abe0ff27..c616ee4c0c89 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/AccountsNavigator.tsx +++ b/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(); +type NavType = Omit, "getState"> & { + getState(): NavigationState | undefined; +}; + +type ParamsType = { + 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.specificAccounts + ? TrackingEvent.AccountListSummary + : TrackingEvent.AccountsList; + track("button_clicked", { + button: "Back", + page: screenName || route.name, + }); + nav.goBack(); + }, + [navigation, route.name], + ); + return ( , }} /> )} diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx index 7323190f4406..9d748dd1499d 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx +++ b/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 ( , }} /> )} diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddAccountButton/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddAccountButton/index.tsx index 7c012be1978c..336982c9700c 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddAccountButton/index.tsx +++ b/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 = ({ sourceScreenName, disabled, onClick }) => { +const AddAccountButton: React.FC = ({ sourceScreenName, disabled, currency, onClick }) => { const { t } = useTranslation(); const [isAddModalOpened, setAddModalOpened] = useState(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; diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/enums.ts b/apps/ledger-live-mobile/src/newArch/features/Accounts/enums.ts new file mode 100644 index 000000000000..5868bb40a9af --- /dev/null +++ b/apps/ledger-live-mobile/src/newArch/features/Accounts/enums.ts @@ -0,0 +1,4 @@ +export enum TrackingEvent { + AccountListSummary = "Account List Summary", + AccountsList = "Accounts", +} diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AccountsList/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AccountsList/index.tsx index d2303fe3d86f..7bd7edee5953 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AccountsList/index.tsx +++ b/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; 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 ( <> - + {showHeader && ( @@ -129,7 +132,8 @@ export default function AccountsList({ route }: Props) { {canAddAccount && ( )} diff --git a/apps/ledger-live-mobile/src/newArch/features/Assets/screens/AssetsList/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Assets/screens/AssetsList/index.tsx index 65501b25a989..bdd895bcbb8e 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Assets/screens/AssetsList/index.tsx +++ b/apps/ledger-live-mobile/src/newArch/features/Assets/screens/AssetsList/index.tsx @@ -29,7 +29,7 @@ export default function AssetsList({ route }: Props) { return ( <> - + {showHeader && (