✨feat(llm): add qr code drawer from manage ws

LedgerHQ · Aug 5, 2024 · f5f105d · f5f105d
1 parent 01ad9ab
commit f5f105d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/index.tsx
@@ -4,7 +4,6 @@ import QueuedDrawer from "~/components/QueuedDrawer";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import DrawerHeader from "LLM/features/WalletSync/components/Synchronize/DrawerHeader";
 import { Flex } from "@ledgerhq/native-ui";
-import { useWindowDimensions } from "react-native";
 import StepFlow from "./components/StepFlow";
 import { Steps } from "../../types/enum/addAccount";
 
@@ -26,8 +25,6 @@ function View({
   onCloseAddAccountDrawer,
 }: ViewProps) {
   const [currentStep, setCurrentStep] = useState<Steps>(StartingStep);
-  const { height } = useWindowDimensions();
-  const maxDrawerHeight = height - 180;
 
   const CustomDrawerHeader = () => <DrawerHeader onClose={onCloseAddAccountDrawer} />;
 
@@ -43,7 +40,7 @@ function View({
       hasBackButton={currentStep === Steps.ChooseSyncMethod}
       onBack={() => goBackCallback()}
     >
-      <Flex maxHeight={maxDrawerHeight}>
+      <Flex maxHeight={"90%"}>
         <StepFlow
           startingStep={StartingStep}
           doesNotHaveAccount={doesNotHaveAccount}

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Synchronize/QrCode.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Synchronize/QrCode.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Box, Text, NumberedList } from "@ledgerhq/native-ui";
+import { Flex, Text, NumberedList, ScrollContainer } from "@ledgerhq/native-ui";
 import styled, { useTheme } from "styled-components/native";
 import QRCode from "react-native-qrcode-svg";
 import getWindowDimensions from "~/logic/getWindowDimensions";
@@ -54,7 +54,14 @@ const QrCode = ({ qrCodeValue }: Props) => {
   ];
 
   return (
-    <Flex flexDirection={"column"} rowGap={50} alignItems={"center"} width={"100%"}>
+    <Flex
+      flexDirection={"column"}
+      rowGap={24}
+      alignItems={"center"}
+      marginBottom={20}
+      width={"100%"}
+      height={"100%"}
+    >
       <Flex
         alignItems={"center"}
         width={QRSize}
@@ -72,21 +79,20 @@ const QrCode = ({ qrCodeValue }: Props) => {
           size={QRCodeSize}
         />
       </Flex>
-      <Box
+      <ScrollContainer
         px={16}
-        pt={24}
+        mb={10}
         width={"100%"}
+        maxHeight={280}
         background={colors.opacityDefault.c05}
         borderRadius={24}
-        display={"flex"}
-        flexDirection={"column"}
-        rowGap={24}
+        showsVerticalScrollIndicator={false}
       >
-        <Text variant="h4" fontSize={18} color={colors.neutral.c100}>
+        <Text variant="h4" fontSize={18} color={colors.neutral.c100} my={24}>
           {t("walletSync.synchronize.qrCode.show.explanation.title")}
         </Text>
-        <NumberedList maxHeight={180} items={steps} />
-      </Box>
+        <NumberedList items={steps} />
+      </ScrollContainer>
     </Flex>
   );
 };

diff --git a/...ive-mobile/src/newArch/features/WalletSync/screens/Activation/useActivationDrawerModel.ts b/...ive-mobile/src/newArch/features/WalletSync/screens/Activation/useActivationDrawerModel.ts
@@ -16,7 +16,7 @@ const useActivationDrawerModel = ({ isOpen, startingStep, handleClose }: Props)
   const { onClickTrack } = useLedgerSyncAnalytics();
   const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
 
-  const hasCustomHeader = currentStep === Steps.QrCodeMethod && startingStep === Steps.Activation;
+  const hasCustomHeader = currentStep === Steps.QrCodeMethod;
   const canGoBack = currentStep === Steps.ChooseSyncMethod && startingStep === Steps.Activation;
 
   const getPreviousStep = useCallback(

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Manage/index.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Manage/index.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text, Icons, InfiniteLoader, Alert } from "@ledgerhq/native-ui";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Option, OptionProps } from "./Option";
 import styled from "styled-components";
@@ -15,6 +15,8 @@ import ManageKeyDrawer from "../ManageKey/ManageKeyDrawer";
 import { useManageKeyDrawer } from "../ManageKey/useManageKeyDrawer";
 import ManageInstanceDrawer from "../ManageInstances/ManageInstancesDrawer";
 import { useManageInstancesDrawer } from "../ManageInstances/useManageInstanceDrawer";
+import ActivationDrawer from "../Activation/ActivationDrawer";
+import { Steps } from "../../types/Activation";
 
 const WalletSyncManage = () => {
   const { t } = useTranslation();
@@ -26,12 +28,15 @@ const WalletSyncManage = () => {
 
   const { onClickTrack } = useLedgerSyncAnalytics();
 
-  const goToSync = () => {
-    //dispatch(setFlow({ flow: Flow.Synchronize, step: Step.SynchronizeMode }));
+  const [isSyncDrawerOpen, setIsSyncDrawerOpen] = useState(false);
 
+  const goToSync = () => {
+    setIsSyncDrawerOpen(true);
     onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.LedgerSyncActivated });
   };
 
+  const closeSyncDrawer = () => setIsSyncDrawerOpen(false);
+
   const goToManageBackup = () => {
     manageKeyHook.openDrawer();
     onClickTrack({ button: AnalyticsButton.ManageKey, page: AnalyticsPage.LedgerSyncActivated });
@@ -117,9 +122,11 @@ const WalletSyncManage = () => {
         </Container>
       </InstancesRow>
 
-      {/**
-       * DRAWERS
-       */}
+      <ActivationDrawer
+        startingStep={Steps.QrCodeMethod}
+        isOpen={isSyncDrawerOpen}
+        handleClose={closeSyncDrawer}
+      />
       <ManageKeyDrawer {...manageKeyHook} />
       <ManageInstanceDrawer {...manageInstancesHook} />
     </Box>