feat(llm): add wallet sync entry point during onboarding

.changeset/thin-books-marry.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Add onboarding entry point for wallet sync

apps/ledger-live-mobile/src/locales/en/common.json

@@ -1335,7 +1335,8 @@
       "title": "Welcome back",
       "subtitle": "Select how you’d like to access your wallet:",
       "connect": "Connect your Ledger",
-      "sync": "Sync with Ledger Live desktop"
+      "sync": "Sync with Ledger Live desktop",
+      "walletSync": "Sync with another Ledger Live"
     },
     "discoverLive": {
       "exploreWithoutADevice": "Explore without a device",

apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/DummyDrawer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Text } from "@ledgerhq/native-ui";
+import QueuedDrawer from "LLM/components/QueuedDrawer";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+const DummyDrawer = ({ isOpen, handleClose }: Props) => {
+  return (
+    <QueuedDrawer isRequestingToBeOpened={isOpen} onClose={handleClose}>
+      <Text>{"Dummy Drawer"}</Text>
+    </QueuedDrawer>
+  );
+};
+
+export default DummyDrawer;

apps/ledger-live-mobile/src/screens/Onboarding/steps/Cards/SelectionCard.tsx

@@ -51,6 +51,7 @@ export const SelectionCard = ({
     <Touchable onPress={pressAndTrack} testID={testID}>
       <Flex
         flexDirection="row"
+        alignItems={"center"}
         bg={colors.opacityDefault.c05}
         py={space[7]}
         pr={space[7]}

apps/ledger-live-mobile/src/screens/Onboarding/steps/accessExistingWallet.tsx

@@ -1,6 +1,6 @@
 import { Icons } from "@ledgerhq/native-ui";
 import { useNavigation } from "@react-navigation/native";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { useTheme } from "styled-components/native";
@@ -12,6 +12,9 @@ import { ScreenName } from "~/const/navigation";
 import { OnboardingType } from "~/reducers/types";
 import { SelectionCards } from "./Cards/SelectionCard";
 import OnboardingView from "./OnboardingView";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import DummyDrawer from "LLM/features/WalletSync/drawers/DummyDrawer";
+import { logDrawer } from "LLM/components/QueuedDrawer/utils/logDrawer";
 
 type NavigationProps = StackNavigatorProps<
   OnboardingNavigatorParamList & BaseNavigatorStackParamList,
@@ -23,6 +26,10 @@ function AccessExistingWallet() {
   const { colors } = useTheme();
   const dispatch = useDispatch();
   const navigation = useNavigation<NavigationProps["navigation"]>();
+  const walletSyncFeatureFlag = useFeature("llmWalletSync");
+
+  const isWalletSyncEnabled = walletSyncFeatureFlag?.enabled;
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
 
   const connect = useCallback(() => {
     dispatch(setOnboardingType(OnboardingType.connect));
@@ -37,6 +44,16 @@ function AccessExistingWallet() {
     navigation.navigate(ScreenName.OnboardingImportAccounts);
   }, [navigation]);
 
+  const openDrawer = useCallback(() => {
+    setIsDrawerVisible(true);
+    logDrawer("Wallet Sync Welcome back", "open");
+  }, []);
+
+  const closeDrawer = useCallback(() => {
+    setIsDrawerVisible(false);
+    logDrawer("Wallet Sync Welcome back", "close");
+  }, []);
+
   return (
     <OnboardingView
       title={t("onboarding.welcomeBackStep.title")}
@@ -60,18 +77,34 @@ function AccessExistingWallet() {
             onPress: connect,
             icon: <Icons.Bluetooth color={colors.primary.c80} />,
           },
-          {
-            title: t("onboarding.welcomeBackStep.sync"),
-            event: "button_clicked",
-            eventProperties: {
-              button: "Sync with Desktop",
-            },
-            testID: "Existing Wallet | Sync",
-            onPress: sync,
-            icon: <Icons.QrCodeScanner color={colors.primary.c80} />,
-          },
+          ...(isWalletSyncEnabled
+            ? [
+                {
+                  title: t("onboarding.welcomeBackStep.walletSync"),
+                  event: "button_clicked",
+                  eventProperties: {
+                    button: "Sync with WalletSync",
+                  },
+                  testID: "Existing Wallet | Wallet Sync",
+                  onPress: openDrawer,
+                  icon: <Icons.QrCode color={colors.primary.c80} />,
+                },
+              ]
+            : [
+                {
+                  title: t("onboarding.welcomeBackStep.sync"),
+                  event: "button_clicked",
+                  eventProperties: {
+                    button: "Sync with Desktop",
+                  },
+                  testID: "Existing Wallet | Sync",
+                  onPress: sync,
+                  icon: <Icons.QrCodeScanner color={colors.primary.c80} />,
+                },
+              ]),
         ]}
       />
+      <DummyDrawer isOpen={isDrawerVisible} handleClose={closeDrawer} />
     </OnboardingView>
   );
 }