🐛(lld): update LS entry point from accounts

.changeset/loud-birds-jam.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Update sync account entry point from accounts

apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts

@@ -33,6 +33,9 @@ export enum AnalyticsPage {
 
   SettingsGeneral = "Settings General",
   LedgerSyncSettings = "Ledger Sync Settings",
+
+  Accounts = "Accounts",
+  LedgerSyncAccounts = "Ledger Sync Accounts",
 }
 
 export type AnalyticsFlow = "Ledger Sync";

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/01-CreateOrSynchronizeStep.tsx

@@ -16,9 +16,10 @@ import { openURL } from "~/renderer/linking";
 type Props = {
   goToCreateBackup: () => void;
   goToSync: () => void;
+  sourcePage: AnalyticsPage;
 };
 
-export default function CreateOrSynchronizeStep({ goToCreateBackup, goToSync }: Props) {
+export default function CreateOrSynchronizeStep({ goToCreateBackup, goToSync, sourcePage }: Props) {
   const { colors } = useTheme();
   const { t } = useTranslation();
   const ledgerSyncFF = useFeature("lldWalletSync");
@@ -40,7 +41,7 @@ export default function CreateOrSynchronizeStep({ goToCreateBackup, goToSync }:
 
   return (
     <Flex flexDirection="column" alignSelf="center" justifyContent="center" rowGap="24px">
-      <TrackPage category={AnalyticsPage.Activation} source={AnalyticsPage.SettingsGeneral} />
+      <TrackPage category={AnalyticsPage.Activation} source={sourcePage} />
       <Flex justifyContent="center" alignItems="center">
         <LogoWrapper>
           <Icons.Mobile color={colors.constant.purple} />

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/index.tsx

@@ -17,9 +17,13 @@ import {
   useLedgerSyncAnalytics,
   AnalyticsFlow,
 } from "../../hooks/useLedgerSyncAnalytics";
-import { BackRef, BackProps } from "../router";
+import { BackRef } from "../router";
 
-const WalletSyncActivation = forwardRef<BackRef, BackProps>((_props, ref) => {
+type Props = {
+  sourcePage: AnalyticsPage;
+};
+
+const WalletSyncActivation = forwardRef<BackRef, Props>(({ sourcePage }, ref) => {
   const dispatch = useDispatch();
   const [device, setDevice] = useState<Device | null>(null);
 
@@ -66,7 +70,13 @@ const WalletSyncActivation = forwardRef<BackRef, BackProps>((_props, ref) => {
     switch (currentStep) {
       default:
       case Step.CreateOrSynchronize:
-        return <CreateOrSynchronizeStep goToCreateBackup={goToCreateBackup} goToSync={goToSync} />;
+        return (
+          <CreateOrSynchronizeStep
+            sourcePage={sourcePage}
+            goToCreateBackup={goToCreateBackup}
+            goToSync={goToSync}
+          />
+        );
       case Step.DeviceAction:
         return <DeviceActionStep goNext={goToActivationOrSynchroWithTrustchain} />;
       case Step.CreateOrSynchronizeTrustChain:

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Manage/index.tsx

@@ -20,7 +20,11 @@ const Separator = () => {
   return <Box height="1px" width="100%" backgroundColor={colors.opacityDefault.c05} />;
 };
 
-const WalletSyncManage = () => {
+type Props = {
+  currentPage: AnalyticsPage;
+};
+
+const WalletSyncManage = ({ currentPage }: Props) => {
   const { t } = useTranslation();
   useLifeCycle();
 
@@ -38,18 +42,18 @@ const WalletSyncManage = () => {
 
     onClickTrack({
       button: "Synchronize with another app",
-      page: AnalyticsPage.LedgerSyncSettings,
+      page: currentPage,
     });
   };
 
   const goToManageBackup = () => {
     dispatch(setFlow({ flow: Flow.ManageBackup, step: Step.DeleteBackup }));
-    onClickTrack({ button: "Delete sync", page: AnalyticsPage.LedgerSyncSettings });
+    onClickTrack({ button: "Delete sync", page: currentPage });
   };
 
   const goToManageInstances = () => {
     dispatch(setFlow({ flow: Flow.ManageInstances, step: Step.SynchronizedInstances }));
-    onClickTrack({ button: "Manage Instances", page: AnalyticsPage.LedgerSyncSettings });
+    onClickTrack({ button: "Manage Instances", page: currentPage });
   };
 
   const Options: OptionProps[] = [
@@ -83,7 +87,7 @@ const WalletSyncManage = () => {
 
   return (
     <Box height="100%" paddingX="40px">
-      <TrackPage category={AnalyticsPage.LedgerSyncSettings} />
+      <TrackPage category={currentPage} />
       <Box marginBottom={"24px"}>
         <Text fontSize={23} variant="large">
           {t("walletSync.title")}

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/router.tsx

@@ -7,23 +7,28 @@ import WalletSyncManageInstances from "./ManageInstances";
 import WalletSyncActivation from "./Activation";
 import WalletSyncManage from "./Manage";
 import { useInitMemberCredentials } from "../hooks/useInitMemberCredentials";
+import { AnalyticsPage } from "../hooks/useLedgerSyncAnalytics";
 
 export interface BackRef {
   goBack: () => void;
 }
 
+export interface Props {
+  currentPage: AnalyticsPage;
+}
+
 export interface BackProps {}
 
-export const WalletSyncRouter = forwardRef<BackRef, BackProps>((_props, ref) => {
+export const WalletSyncRouter = forwardRef<BackRef, Props>(({ currentPage }, ref) => {
   useInitMemberCredentials();
   const walletSyncFlow = useSelector(walletSyncFlowSelector);
 
   switch (walletSyncFlow) {
     default:
     case Flow.Activation:
-      return <WalletSyncActivation ref={ref} />;
+      return <WalletSyncActivation ref={ref} sourcePage={currentPage} />;
     case Flow.LedgerSyncActivated:
-      return <WalletSyncManage />;
+      return <WalletSyncManage currentPage={currentPage} />;
     case Flow.Synchronize:
       return <SynchronizeWallet ref={ref} />;
     case Flow.ManageBackup:

apps/ledger-live-desktop/src/renderer/screens/accounts/LedgerSyncDrawer.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo, useRef } from "react";
+import { SideDrawer } from "~/renderer/components/SideDrawer";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  walletSyncDrawerVisibilitySelector,
+  walletSyncStepSelector,
+} from "~/renderer/reducers/walletSync";
+import { setDrawerVisibility } from "~/renderer/actions/walletSync";
+
+import {
+  useLedgerSyncAnalytics,
+  AnalyticsFlow,
+  StepsOutsideFlow,
+  AnalyticsPage,
+} from "LLD/features/WalletSync/hooks/useLedgerSyncAnalytics";
+import { BackRef, WalletSyncRouter } from "LLD/features/WalletSync/screens/router";
+import { STEPS_WITH_BACK } from "LLD/features/WalletSync/hooks/useFlows";
+
+const WalletSyncRow = () => {
+  const childRef = useRef<BackRef>(null);
+  const dispatch = useDispatch();
+
+  const isOpen = useSelector(walletSyncDrawerVisibilitySelector);
+
+  const currentStep = useSelector(walletSyncStepSelector);
+  const hasBack = useMemo(() => STEPS_WITH_BACK.includes(currentStep), [currentStep]);
+
+  const hasFlowEvent = useMemo(() => !StepsOutsideFlow.includes(currentStep), [currentStep]);
+
+  const { onActionTrack } = useLedgerSyncAnalytics();
+
+  const handleBack = () => {
+    if (childRef.current && hasBack) {
+      childRef.current.goBack();
+      onActionTrack({
+        button: "Back",
+        step: currentStep,
+        flow: hasFlowEvent ? AnalyticsFlow : undefined,
+      });
+    }
+  };
+
+  const closeDrawer = () => {
+    onActionTrack({
+      button: "Close",
+      step: currentStep,
+      flow: hasFlowEvent ? AnalyticsFlow : undefined,
+    });
+    dispatch(setDrawerVisibility(false));
+  };
+
+  return (
+    <SideDrawer
+      isOpen={isOpen}
+      onRequestClose={closeDrawer}
+      onRequestBack={hasBack ? handleBack : undefined}
+      direction="left"
+      forceDisableFocusTrap
+    >
+      <WalletSyncRouter currentPage={AnalyticsPage.LedgerSyncAccounts} ref={childRef} />
+    </SideDrawer>
+  );
+};
+export default WalletSyncRow;

apps/ledger-live-desktop/src/renderer/screens/accounts/OptionsButton.tsx

@@ -15,7 +15,14 @@ import IconDownloadCloud from "~/renderer/icons/DownloadCloud";
 import IconSend from "~/renderer/icons/Send";
 import { openModal } from "~/renderer/actions/modals";
 import { useHideEmptyTokenAccounts } from "~/renderer/actions/settings";
-import { IconsLegacy } from "@ledgerhq/react-ui";
+import { Icons, IconsLegacy } from "@ledgerhq/react-ui";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { setDrawerVisibility as setLedgerSyncDrawerVisibility } from "~/renderer/actions/walletSync";
+import { useFlows } from "LLD/features/WalletSync/hooks/useFlows";
+import {
+  AnalyticsPage,
+  useLedgerSyncAnalytics,
+} from "LLD/features/WalletSync/hooks/useLedgerSyncAnalytics";
 
 const Separator = styled.div`
   background-color: ${p => p.theme.colors.palette.divider};
@@ -45,19 +52,42 @@ const OptionsButton = () => {
     [dispatch],
   );
   const { t } = useTranslation();
+
+  const lldLedgerSyncFF = useFeature("lldWalletSync");
+  const isLedgerSyncEnabled = lldLedgerSyncFF?.enabled;
+  const { goToWelcomeScreenWalletSync } = useFlows();
+
+  const { onClickTrack } = useLedgerSyncAnalytics();
+
+  const openLedgerSyncDrawer = () => {
+    goToWelcomeScreenWalletSync();
+    onClickTrack({ button: "Access Ledger Sync", page: AnalyticsPage.Accounts });
+    dispatch(setLedgerSyncDrawerVisibility(true));
+  };
   const items: ItemType[] = [
     {
       key: "exportOperations",
       label: t("accounts.optionsMenu.exportOperations"),
       icon: <IconDownloadCloud size={16} />,
       onClick: () => onOpenModal("MODAL_EXPORT_OPERATIONS"),
     },
-    {
-      key: "exportAccounts",
-      label: t("accounts.optionsMenu.exportToMobile"),
-      icon: <IconSend size={16} />,
-      onClick: () => onOpenModal("MODAL_EXPORT_ACCOUNTS"),
-    },
+    ...(isLedgerSyncEnabled
+      ? [
+          {
+            key: "exportAccounts",
+            label: t("accounts.optionsMenu.ledgerSync"),
+            icon: <Icons.Refresh size="S" />,
+            onClick: openLedgerSyncDrawer,
+          },
+        ]
+      : [
+          {
+            key: "exportAccounts",
+            label: t("accounts.optionsMenu.exportToMobile"),
+            icon: <IconSend size={16} />,
+            onClick: () => onOpenModal("MODAL_EXPORT_ACCOUNTS"),
+          },
+        ]),
     {
       key: "sep1",
       type: "separator",

apps/ledger-live-desktop/src/renderer/screens/accounts/index.tsx

@@ -11,6 +11,7 @@ import { accountsSelector, starredAccountsSelector } from "~/renderer/reducers/a
 import { accountsViewModeSelector, selectedTimeRangeSelector } from "~/renderer/reducers/settings";
 import AccountList from "./AccountList";
 import AccountsHeader from "./AccountsHeader";
+import LedgerSyncDrawer from "./LedgerSyncDrawer";
 
 export default function AccountsPage() {
   const mode = useSelector(accountsViewModeSelector);
@@ -50,6 +51,7 @@ export default function AccountsPage() {
       />
       <AccountsHeader />
       <AccountList onAccountClick={onAccountClick} accounts={accounts} range={range} mode={mode} />
+      <LedgerSyncDrawer />
     </Box>
   );
 }

apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/WalletSync.tsx

@@ -85,7 +85,7 @@ const WalletSyncRow = () => {
         direction="left"
         forceDisableFocusTrap
       >
-        <WalletSyncRouter ref={childRef} />
+        <WalletSyncRouter ref={childRef} currentPage={AnalyticsPage.SettingsGeneral} />
       </SideDrawer>
 
       <Button small event="Manage WalletSync" primary onClick={openDrawer}>

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -1118,7 +1118,8 @@
     "optionsMenu": {
       "title": "Options",
       "exportOperations": "Export operation history",
-      "exportToMobile": "Export to mobile"
+      "exportToMobile": "Export to mobile",
+      "ledgerSync": "Sync accounts"
     },
     "contextMenu": {
       "star": "Star",