feat: wallet sync synchronize via qr code from mobile to desktop

apps/ledger-live-desktop/src/newArch/features/WalletSync/components/Error.tsx

@@ -11,6 +11,7 @@ type Props = {
   cta?: string;
   onClick?: () => void;
   analyticsPage?: AnalyticsPage;
+  outline?: boolean;
 };
 
 const Container = styled(Box)`
@@ -23,7 +24,14 @@ const Container = styled(Box)`
   justify-content: center;
 `;
 
-export const Error = ({ title, description, cta, onClick, analyticsPage }: Props) => {
+export const Error = ({
+  title,
+  description,
+  cta,
+  onClick,
+  analyticsPage,
+  outline = true,
+}: Props) => {
   const { colors } = useTheme();
   return (
     <Flex flexDirection="column" alignItems="center" justifyContent="center" rowGap="24px">
@@ -38,7 +46,7 @@ export const Error = ({ title, description, cta, onClick, analyticsPage }: Props
         {description}
       </Text>
       {cta && onClick && (
-        <ButtonV3 variant="shade" onClick={onClick}>
+        <ButtonV3 variant={outline ? "shade" : "main"} onClick={onClick}>
           {cta}
         </ButtonV3>
       )}

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

@@ -63,6 +63,8 @@ export function useQRCode() {
       .catch(e => {
         if (e instanceof InvalidDigitsError) {
           dispatch(setFlow({ flow: Flow.Synchronize, step: Step.PinCodeError }));
+        } else if (e instanceof NoTrustchainInitialized) {
+          dispatch(setFlow({ flow: Flow.Synchronize, step: Step.UnbackedError }));
         }
         setError(e);
         throw e;

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

@@ -27,6 +27,7 @@ export enum AnalyticsPage {
   SyncWithQR = "Sync with QR code",
   PinCode = "Pin code",
   PinCodeError = "Pin code error",
+  UnbackedError = "No trustchain initialized error",
 
   SettingsGeneral = "Settings General",
   WalletSyncSettings = "Wallet Sync Settings",

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/05-UnbackedError.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Error } from "../../components/Error";
+import { useTranslation } from "react-i18next";
+import { AnalyticsPage } from "../../hooks/useWalletSyncAnalytics";
+import { useDispatch } from "react-redux";
+import { setFlow } from "~/renderer/actions/walletSync";
+import { Flow, Step } from "~/renderer/reducers/walletSync";
+
+export default function UnbackedError() {
+  const { t } = useTranslation();
+
+  const dispatch = useDispatch();
+
+  return (
+    <Error
+      title={t("walletSync.synchronize.unbackedError.title")}
+      description={t("walletSync.synchronize.unbackedError.description")}
+      analyticsPage={AnalyticsPage.UnbackedError}
+      cta={t("walletSync.synchronize.unbackedError.cta")}
+      onClick={() => dispatch(setFlow({ flow: Flow.Activation, step: Step.DeviceAction }))}
+      outline={false}
+    />
+  );
+}

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

@@ -10,6 +10,7 @@ import PinCodeStep from "./03-PinCodeStep";
 import SyncFinalStep from "./04-SyncFinalStep";
 import { AnalyticsPage, useWalletSyncAnalytics } from "../../hooks/useWalletSyncAnalytics";
 import PinCodeErrorStep from "./05-PinCodeError";
+import UnbackedErrorStep from "./05-UnbackedError";
 import { BackProps, BackRef } from "../router";
 
 const SynchronizeWallet = forwardRef<BackRef, BackProps>((_props, ref) => {
@@ -66,23 +67,24 @@ const SynchronizeWallet = forwardRef<BackRef, BackProps>((_props, ref) => {
       case Step.PinCodeError:
         return <PinCodeErrorStep />;
 
+      case Step.UnbackedError:
+        return <UnbackedErrorStep />;
+
       case Step.Synchronized:
         return <SyncFinalStep />;
     }
   };
 
+  const centeredItems = [Step.Synchronized, Step.PinCodeError, Step.UnbackedError];
+
   return (
     <Flex
       flexDirection="column"
       height="100%"
       paddingX="40px"
       rowGap="48px"
-      alignItems={
-        [Step.Synchronized, Step.PinCodeError].includes(currentStep) ? "center" : undefined
-      }
-      justifyContent={
-        [Step.Synchronized, Step.PinCodeError].includes(currentStep) ? "center" : undefined
-      }
+      alignItems={centeredItems.includes(currentStep) ? "center" : undefined}
+      justifyContent={centeredItems.includes(currentStep) ? "center" : undefined}
     >
       {getStep()}
     </Flex>

apps/ledger-live-desktop/src/renderer/reducers/walletSync.ts

@@ -30,6 +30,7 @@ export enum Step {
   SynchronizeWithQRCode = "SynchronizeWithQRCode",
   PinCode = "PinCode",
   PinCodeError = "PinCodeError",
+  UnbackedError = "UnbackedError",
   Synchronized = "Synchronized",
 
   //ManageInstances

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

@@ -6508,6 +6508,11 @@
           }
         }
       },
+      "unbackedError": {
+        "title": "You need to create your encryption key first",
+        "description": "Please make sure you’ve created an encryption key on one of your Ledger Live apps before continuing your synchronization.",
+        "cta": "Create your encryption key"
+      },
       "pinCode": {
         "title": "Enter the code",
         "description": "Type the code displayed on the other Ledger Live you want to sync with.",

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Synchronize/QrCode.tsx

@@ -12,7 +12,7 @@ const Italic = styled(Text)`
 // Won't work since we don't have inter italic font
 
 type Props = {
-  qrCodeValue?: string;
+  qrCodeValue?: string | null;
 };
 
 const QrCode = ({ qrCodeValue }: Props) => {

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Synchronize/QrCodeMethod.tsx

@@ -15,7 +15,7 @@ interface Props {
   setSelectedOption: (option: OptionsType) => void;
   onQrCodeScanned: (data: string) => void;
   currentOption: Options;
-  qrCodeValue?: string;
+  qrCodeValue?: string | null;
 }
 
 const QrCodeMethod = ({