✨feat(llm): show WS qr code

LedgerHQ · Jul 31, 2024 · dfc6312 · dfc6312
1 parent c4d6cc7
commit dfc6312
Show file tree

Hide file tree

Showing 16 changed files with 435 additions and 13 deletions.
diff --git a/.changeset/good-students-drop.md b/.changeset/good-students-drop.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Add the show qr code implementation for WS flow
diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts
@@ -9,4 +9,5 @@ export type WalletSyncNavigatorStackParamList = {
 
   [ScreenName.WalletSyncActivationProcess]: undefined;
   [ScreenName.WalletSyncActivated]: undefined;
+  [ScreenName.WalletSyncQrCode]: undefined;
 };
diff --git a/apps/ledger-live-mobile/src/const/navigation.ts b/apps/ledger-live-mobile/src/const/navigation.ts
@@ -515,6 +515,7 @@ export enum ScreenName {
   WalletSyncActivationProcess = "WalletSyncActivationProcess",
   WalletSyncSuccess = "WalletSyncSuccess",
   WalletSyncActivated = "WalletSyncActivated",
+  WalletSyncQrCode = "WalletSyncQrCode",
 
   MockedAddAssetButton = "MockedAddAssetButton",
   GenericLandingPage = "GenericLandingPage",

diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -6759,6 +6759,22 @@
         "connectDevice": {
           "title": "Use your Ledger"
         }
+      },
+      "qrCode": {
+        "show": {
+          "title": "Show QR",
+          "explanation": {
+            "title": "Scan and synchronize your accounts using another Ledger Live app",
+            "steps": {
+              "step1": "Open the Ledger Live app you want to sync",
+              "step2": "Go to <0>Settings</0> <1>></1> <0>General</0> <1>></1> <0>Ledger Sync</0> <1>></1> <0>Synchronize</0>",
+              "step3": "Scan QR code until loader hits 100%."
+            }
+          }
+        },
+        "scan": {
+          "title": "Scan"
+        }
       }
     }
   },

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
@@ -5,6 +5,10 @@ import { TrackScreen } from "~/analytics";
 import SelectAddAccountMethod from "./components/SelectAddAccountMethod";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import ChooseSyncMethod from "LLM/features/WalletSync/screens/Synchronize/ChooseMethod";
+import QrCodeMethod from "LLM/features/WalletSync/screens/Synchronize/QrCodeMethod";
+import DrawerHeader from "LLM/features/WalletSync/components/Synchronize/DrawerHeader";
+import { Flex } from "@ledgerhq/native-ui";
+import { useWindowDimensions } from "react-native";
 
 type ViewProps = {
   isAddAccountDrawerVisible: boolean;
@@ -14,7 +18,7 @@ type ViewProps = {
   onCloseAddAccountDrawer: () => void;
   reopenDrawer: () => void;
   onRequestToOpenWalletSyncDrawer: () => void;
-  onCloseWalletSyncDrawer: () => void;
+  onCloseWalletSyncDrawer: (reopenPrevious?: boolean) => void;
 };
 
 type AddAccountProps = {
@@ -34,6 +38,24 @@ function View({
   onRequestToOpenWalletSyncDrawer,
   onCloseWalletSyncDrawer,
 }: ViewProps) {
+  const [isQrCodeDrawerOpen, setIsQrCodeDrawerOpen] = React.useState(false);
+  const { height } = useWindowDimensions();
+  const maxDrawerHeight = height - 180;
+
+  const onScanMethodPress = () => {
+    onCloseWalletSyncDrawer(false);
+    setIsQrCodeDrawerOpen(true);
+  };
+
+  const onCloseQrCodeDrawer = () => {
+    setIsQrCodeDrawerOpen(false);
+    onRequestToOpenWalletSyncDrawer();
+  };
+
+  const CustomDrawerHeader = () => {
+    return <DrawerHeader onClose={onCloseQrCodeDrawer} />;
+  };
+
   return (
     <>
       <QueuedDrawer
@@ -52,7 +74,17 @@ function View({
         isRequestingToBeOpened={isWalletSyncDrawerVisible}
         onClose={onCloseWalletSyncDrawer}
       >
-        <ChooseSyncMethod />
+        <ChooseSyncMethod onScanMethodPress={onScanMethodPress} />
+      </QueuedDrawer>
+
+      <QueuedDrawer
+        isRequestingToBeOpened={isQrCodeDrawerOpen}
+        onClose={onCloseQrCodeDrawer}
+        CustomHeader={CustomDrawerHeader}
+      >
+        <Flex maxHeight={maxDrawerHeight}>
+          <QrCodeMethod />
+        </Flex>
       </QueuedDrawer>
     </>
   );

diff --git a/...er-live-mobile/src/newArch/features/Accounts/screens/AddAccount/useAddAccountViewModel.ts b/...er-live-mobile/src/newArch/features/Accounts/screens/AddAccount/useAddAccountViewModel.ts
@@ -24,9 +24,9 @@ const useAddAccountViewModel = ({ isOpened, onClose, reopenDrawer }: AddAccountD
     onClose();
   }, [trackButtonClick, onClose]);
 
-  const onCloseWalletSyncDrawer = () => {
+  const onCloseWalletSyncDrawer = (reopenPrevious = true) => {
     setWalletSyncDrawerVisible(false);
-    reopenDrawer();
+    reopenPrevious && reopenDrawer();
   };
 
   const onRequestToOpenWalletSyncDrawer = () => {

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx
@@ -7,6 +7,7 @@ import { WalletSyncNavigatorStackParamList } from "../../../components/RootNavig
 import WalletSyncActivation from "LLM/features/WalletSync/screens/Activation";
 import { ActivationProcess } from "./screens/Activation/ActivationProcess";
 import { ActivationSuccess } from "./screens/Activation/ActivationSuccess";
+import QrCodeMethod from "./screens/Synchronize/QrCodeMethod";
 import { useInitMemberCredentials } from "./hooks/useInitMemberCredentials";
 import WalletSyncManage from "./screens/Manage";
 import { useTranslation } from "react-i18next";
@@ -56,6 +57,14 @@ export default function WalletSyncNavigator() {
           headerRight: () => null,
         }}
       />
+      <Stack.Screen
+        name={ScreenName.WalletSyncQrCode}
+        component={QrCodeMethod}
+        options={{
+          title: t("walletSync.walletSyncActivated.synchronize.title"),
+          headerRight: () => null,
+        }}
+      />
     </Stack.Navigator>
   );
 }
diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Activation/index.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Activation/index.tsx
@@ -8,6 +8,9 @@ import { TrackScreen } from "~/analytics";
 import { useInitMemberCredentials } from "../../hooks/useInitMemberCredentials";
 import QueuedDrawer from "~/components/QueuedDrawer";
 import ChooseSyncMethod from "../../screens/Synchronize/ChooseMethod";
+import QrCodeMethod from "../../screens/Synchronize/QrCodeMethod";
+import { useWindowDimensions } from "react-native";
+import DrawerHeader from "../Synchronize/DrawerHeader";
 
 type Props<T extends boolean> = T extends true
   ? { isInsideDrawer: T; openSyncMethodDrawer: () => void }
@@ -16,8 +19,13 @@ type Props<T extends boolean> = T extends true
 const Activation: React.FC<Props<boolean>> = ({ isInsideDrawer, openSyncMethodDrawer }) => {
   const { colors } = useTheme();
   const { t } = useTranslation();
+  const { height } = useWindowDimensions();
+  const maxDrawerHeight = height - 180;
+
   useInitMemberCredentials();
+
   const [isChooseMethodDrawerOpen, setIsChooseMethodDrawerOpen] = React.useState(false);
+  const [isQrCodeDrawerOpen, setIsQrCodeDrawerOpen] = React.useState(false);
 
   const onPressSyncAccounts = () => {
     isInsideDrawer ? openSyncMethodDrawer() : setIsChooseMethodDrawerOpen(true);
@@ -31,6 +39,20 @@ const Activation: React.FC<Props<boolean>> = ({ isInsideDrawer, openSyncMethodDr
     setIsChooseMethodDrawerOpen(false);
   };
 
+  const onScanMethodPress = () => {
+    setIsChooseMethodDrawerOpen(false);
+    setIsQrCodeDrawerOpen(true);
+  };
+
+  const onPressCloseQrCodeDrawer = () => {
+    setIsQrCodeDrawerOpen(false);
+    setIsChooseMethodDrawerOpen(true);
+  };
+
+  const CustomDrawerHeader = () => {
+    return <DrawerHeader onClose={onPressCloseQrCodeDrawer} />;
+  };
+
   return (
     <Flex flexDirection="column" justifyContent="center" alignItems="center" rowGap={24}>
       <TrackScreen />
@@ -55,12 +77,23 @@ const Activation: React.FC<Props<boolean>> = ({ isInsideDrawer, openSyncMethodDr
         onPressSyncAccounts={onPressSyncAccounts}
       />
       {!isInsideDrawer && (
-        <QueuedDrawer
-          isRequestingToBeOpened={isChooseMethodDrawerOpen}
-          onClose={onPressCloseDrawer}
-        >
-          <ChooseSyncMethod />
-        </QueuedDrawer>
+        <>
+          <QueuedDrawer
+            isRequestingToBeOpened={isChooseMethodDrawerOpen}
+            onClose={onPressCloseDrawer}
+          >
+            <ChooseSyncMethod onScanMethodPress={onScanMethodPress} />
+          </QueuedDrawer>
+          <QueuedDrawer
+            isRequestingToBeOpened={isQrCodeDrawerOpen}
+            onClose={onPressCloseQrCodeDrawer}
+            CustomHeader={CustomDrawerHeader}
+          >
+            <Flex maxHeight={maxDrawerHeight}>
+              <QrCodeMethod />
+            </Flex>
+          </QueuedDrawer>
+        </>
       )}
     </Flex>
   );

diff --git a/...edger-live-mobile/src/newArch/features/WalletSync/components/Synchronize/DrawerHeader.tsx b/...edger-live-mobile/src/newArch/features/WalletSync/components/Synchronize/DrawerHeader.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Flex, Icons, Text } from "@ledgerhq/native-ui";
+import { useTheme } from "styled-components/native";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity } from "react-native";
+
+type Props = {
+  onClose: () => void;
+};
+
+const DrawerHeader: React.FC<Props> = ({ onClose }) => {
+  const { colors } = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <Flex
+      flexDirection="row"
+      justifyContent="space-between"
+      alignItems="center"
+      width="100%"
+      pt={16}
+      pl={16}
+      pr={16}
+    >
+      <Flex flex={1} />
+      <Text fontSize={16} fontWeight="semiBold" color={colors.neutral.c100}>
+        {t("walletSync.walletSyncActivated.synchronize.title")}
+      </Text>
+      <Flex flex={1} alignItems="flex-end">
+        <TouchableOpacity onPress={onClose}>
+          <Flex
+            justifyContent="center"
+            alignItems="center"
+            p={3}
+            borderRadius={32}
+            backgroundColor={colors.opacityDefault.c10}
+          >
+            <Icons.Close size={"XS"} color={colors.neutral.c100} />
+          </Flex>
+        </TouchableOpacity>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DrawerHeader;
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
@@ -0,0 +1,77 @@
+import React from "react";
+import { Flex, Box, Text, NumberedList } from "@ledgerhq/native-ui";
+import styled, { useTheme } from "styled-components/native";
+import QRCode from "react-native-qrcode-svg";
+import getWindowDimensions from "~/logic/getWindowDimensions";
+import { Trans, useTranslation } from "react-i18next";
+
+const Italic = styled(Text)`
+  font-style: italic;
+`;
+// Won't work since we don't have inter italic font
+
+type Props = {
+  qrCodeValue: string;
+};
+
+const QrCode = ({ qrCodeValue }: Props) => {
+  const { colors } = useTheme();
+  const { width } = getWindowDimensions();
+  const { t } = useTranslation();
+
+  const QRSize = Math.round(width - 48);
+  const maxQRCodeSize = 280 - 15.36 * 2;
+  const QRCodeSize = Math.min(QRSize - 15.36, maxQRCodeSize);
+
+  const steps = [
+    { description: t("walletSync.synchronize.qrCode.show.explanation.steps.step1") },
+    {
+      description: (
+        <Text variant="body" flex={1} ml={12} fontSize={14} color={colors.opacityDefault.c70}>
+          <Trans
+            i18nKey="walletSync.synchronize.qrCode.show.explanation.steps.step2"
+            components={[
+              <Italic key={0} color={colors.opacityDefault.c70} />,
+              <Text key={1} color={colors.opacityDefault.c30} />,
+            ]}
+          />
+        </Text>
+      ),
+    },
+    { description: t("walletSync.synchronize.qrCode.show.explanation.steps.step3") },
+  ];
+
+  return (
+    <Flex flexDirection={"column"} rowGap={50} alignItems={"center"} width={"100%"}>
+      <Flex
+        alignItems={"center"}
+        width={QRSize}
+        height={QRSize}
+        maxWidth={280}
+        maxHeight={280}
+        borderRadius={11.52}
+        background={"#fff"}
+        justifyContent={"center"}
+      >
+        <QRCode value={qrCodeValue} logo={require("./logo.png")} logoSize={65} size={QRCodeSize} />
+      </Flex>
+      <Box
+        px={16}
+        pt={24}
+        width={"100%"}
+        background={colors.opacityDefault.c05}
+        borderRadius={24}
+        display={"flex"}
+        flexDirection={"column"}
+        rowGap={24}
+      >
+        <Text variant="h4" fontSize={18} color={colors.neutral.c100}>
+          {t("walletSync.synchronize.qrCode.show.explanation.title")}
+        </Text>
+        <NumberedList maxHeight={180} items={steps} />
+      </Box>
+    </Flex>
+  );
+};
+
+export default QrCode;