Merge pull request #7141 from LedgerHQ/feat/LIVE-12149

⛓️feat(llm): add WS activation drawer from onboarding

.changeset/tame-rings-hide.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Add activation drawer from onboarding entry point

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Activation/index.tsx

@@ -7,7 +7,11 @@ import { useTheme } from "styled-components/native";
 import { TrackScreen } from "~/analytics";
 import Drawer from "LLM/components/Dummy/Drawer";
 
-const Activation = () => {
+type Props<T extends boolean> = T extends true
+  ? { isInsideDrawer: T; openSyncMethodDrawer: () => void }
+  : { isInsideDrawer?: T; openSyncMethodDrawer?: undefined };
+
+const Activation: React.FC<Props<boolean>> = ({ isInsideDrawer, openSyncMethodDrawer }) => {
   const { colors } = useTheme();
   const { t } = useTranslation();
 
@@ -18,7 +22,7 @@ const Activation = () => {
   };
 
   const onPressHasAlreadyCreatedAKey = () => {
-    setIsDrawerOpen(true);
+    isInsideDrawer ? openSyncMethodDrawer() : setIsDrawerOpen(true);
   };
 
   const onPressCloseDrawer = () => {
@@ -48,7 +52,7 @@ const Activation = () => {
         onPressHasAlreadyCreatedAKey={onPressHasAlreadyCreatedAKey}
         onPressSyncAccounts={onPressSyncAccounts}
       />
-      <Drawer isOpen={isDrawerOpen} handleClose={onPressCloseDrawer} />
+      {!isInsideDrawer && <Drawer isOpen={isDrawerOpen} handleClose={onPressCloseDrawer} />}
     </Flex>
   );
 };

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationDrawer.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import QueuedDrawer from "LLM/components/QueuedDrawer";
+import Activation from "../../components/Activation";
+import Drawer from "LLM/components/Dummy/Drawer";
+import { TrackScreen } from "~/analytics";
+
+type Props = {
+  isOpen: boolean;
+  reopenDrawer: () => void;
+  handleClose: () => void;
+};
+
+const ActivationDrawer = ({ isOpen, handleClose, reopenDrawer }: Props) => {
+  const [isSyncMethodDrawerOpen, setIsSyncMethodDrawerOpen] = React.useState(false);
+
+  const onPressCloseDrawer = () => {
+    setIsSyncMethodDrawerOpen(false);
+    reopenDrawer();
+  };
+
+  const openSyncMethodDrawer = () => {
+    setIsSyncMethodDrawerOpen(true);
+    handleClose();
+  };
+
+  return (
+    <>
+      <TrackScreen />
+      <QueuedDrawer isRequestingToBeOpened={isOpen} onClose={handleClose}>
+        <Activation isInsideDrawer openSyncMethodDrawer={openSyncMethodDrawer} />
+      </QueuedDrawer>
+
+      <Drawer isOpen={isSyncMethodDrawerOpen} handleClose={onPressCloseDrawer} />
+    </>
+  );
+};
+
+export default ActivationDrawer;

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

@@ -13,8 +13,8 @@ import { OnboardingType } from "~/reducers/types";
 import { SelectionCards } from "./Cards/SelectionCard";
 import OnboardingView from "./OnboardingView";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
-import Drawer from "LLM/components/Dummy/Drawer";
 import { logDrawer } from "LLM/components/QueuedDrawer/utils/logDrawer";
+import ActivationDrawer from "LLM/features/WalletSync/screens/Activation/ActivationDrawer";
 
 type NavigationProps = StackNavigatorProps<
   OnboardingNavigatorParamList & BaseNavigatorStackParamList,
@@ -54,6 +54,11 @@ function AccessExistingWallet() {
     logDrawer("Wallet Sync Welcome back", "close");
   }, []);
 
+  const reopenDrawer = useCallback(() => {
+    setIsDrawerVisible(true);
+    logDrawer("Wallet Sync Welcome back", "reopen");
+  }, []);
+
   return (
     <OnboardingView
       title={t("onboarding.welcomeBackStep.title")}
@@ -104,7 +109,11 @@ function AccessExistingWallet() {
               ]),
         ]}
       />
-      <Drawer isOpen={isDrawerVisible} handleClose={closeDrawer} />
+      <ActivationDrawer
+        isOpen={isDrawerVisible}
+        handleClose={closeDrawer}
+        reopenDrawer={reopenDrawer}
+      />
     </OnboardingView>
   );
 }