[FEAT]: User scans instance with same backup or different backup (#7712)

.changeset/giant-beans-wait.md

@@ -0,0 +1,7 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+"@ledgerhq/trustchain": patch
+---
+
+Handle TrustchainAlreadyInitialized & TrustchainAlreadyInitializedWithOtherSeed on Scan QR

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

@@ -4,6 +4,7 @@ import {
   InvalidDigitsError,
   NoTrustchainInitialized,
   QRCodeWSClosed,
+  TrustchainAlreadyInitialized,
 } from "@ledgerhq/trustchain/errors";
 import { MemberCredentials } from "@ledgerhq/trustchain/types";
 import { useDispatch, useSelector } from "react-redux";
@@ -60,7 +61,7 @@ export function useQRCode() {
         },
         memberCredentials,
         memberName,
-        alreadyHasATrustchain: !!trustchain,
+        initialTrustchainId: trustchain?.rootId,
       }),
 
     // Don't use retry here because it always uses a delay despite setting it to 0
@@ -75,6 +76,9 @@ export function useQRCode() {
       if (e instanceof NoTrustchainInitialized) {
         dispatch(setFlow({ flow: Flow.Synchronize, step: Step.UnbackedError }));
       }
+      if (e instanceof TrustchainAlreadyInitialized) {
+        dispatch(setFlow({ flow: Flow.Synchronize, step: Step.SynchronizeWithQRCode }));
+      }
     },
 
     onSuccess(newTrustchain) {

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

@@ -6869,8 +6869,17 @@
         },
         "unbacked": {
           "title": "You need to create your encryption key first",
-          "desc": "Please make sure you’ve created an encryption key on one of your Ledger Live apps before continuing your synchronization.",
+          "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"
+        },
+        "backedWithDifferentSeeds": {
+          "title": "These apps have different backups",
+          "description": "Delete your encryption key from one of the apps and try again",
+          "cta": "I understand"
+        },
+        "alreadyBacked": {
+          "title": "These apps are already secured by a Ledger",
+          "cta": "I understand"
         }
       },
       "alreadySecureError": {

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/StepFlow.tsx

@@ -11,7 +11,8 @@ import PinCodeDisplay from "LLM/features/WalletSync/screens/Synchronize/PinCodeD
 import PinCodeInput from "LLM/features/WalletSync/screens/Synchronize/PinCodeInput";
 import { useInitMemberCredentials } from "LLM/features/WalletSync/hooks/useInitMemberCredentials";
 import { useSyncWithQrCode } from "LLM/features/WalletSync/hooks/useSyncWithQrCode";
-import UnbackedError from "~/newArch/features/WalletSync/screens/Synchronize/UnbackedError";
+import { SpecificError } from "~/newArch/features/WalletSync/components/Error/SpecificError";
+import { ErrorReason } from "~/newArch/features/WalletSync/hooks/useSpecificError";
 
 type Props = {
   currentStep: Steps;
@@ -99,8 +100,23 @@ const StepFlow = ({
         return <SyncError tryAgain={navigateToQrCodeMethod} />;
 
       case Steps.UnbackedError:
-        return <UnbackedError create={onCreateKey} />;
+        return <SpecificError primaryAction={onCreateKey} error={ErrorReason.NO_BACKUP} />;
 
+      case Steps.AlreadyBacked:
+        return (
+          <SpecificError
+            primaryAction={() => setCurrentStep(Steps.QrCodeMethod)}
+            error={ErrorReason.ALREADY_BACKED_SCAN}
+          />
+        );
+
+      case Steps.BackedWithDifferentSeeds:
+        return (
+          <SpecificError
+            primaryAction={() => setCurrentStep(Steps.QrCodeMethod)}
+            error={ErrorReason.DIFFERENT_BACKUPS}
+          />
+        );
       default:
         return null;
     }

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/useAddAccountViewModel.ts

@@ -3,11 +3,6 @@ import { track } from "~/analytics";
 import { useQRCodeHost } from "LLM/features/WalletSync/hooks/useQRCodeHost";
 import { Options, Steps } from "LLM/features/WalletSync/types/Activation";
 import { NavigatorName, ScreenName } from "~/const";
-import {
-  AnalyticsButton,
-  AnalyticsPage,
-  useLedgerSyncAnalytics,
-} from "~/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics";
 import { useNavigation } from "@react-navigation/native";
 import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
@@ -26,7 +21,6 @@ const startingStep = Steps.AddAccountMethod;
 const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) => {
   const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
   const [currentOption, setCurrentOption] = useState<Options>(Options.SCAN);
-  const { onClickTrack } = useLedgerSyncAnalytics();
   const navigateToChooseSyncMethod = () => setCurrentStep(Steps.ChooseSyncMethod);
   const navigateToQrCodeMethod = () => setCurrentStep(Steps.QrCodeMethod);
   const navigation = useNavigation<NavigationProps["navigation"]>();
@@ -68,7 +62,6 @@ const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) =>
   });
 
   const onCreateKey = () => {
-    onClickTrack({ button: AnalyticsButton.CreateYourKey, page: AnalyticsPage.Unbacked });
     navigation.navigate(NavigatorName.WalletSync, {
       screen: ScreenName.WalletSyncActivationProcess,
     });

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

@@ -10,7 +10,8 @@ import PinCodeInput from "../../screens/Synchronize/PinCodeInput";
 import SyncError from "../../screens/Synchronize/SyncError";
 import { useInitMemberCredentials } from "../../hooks/useInitMemberCredentials";
 import { useSyncWithQrCode } from "../../hooks/useSyncWithQrCode";
-import UnbackedError from "../../screens/Synchronize/UnbackedError";
+import { SpecificError } from "../Error/SpecificError";
+import { ErrorReason } from "../../hooks/useSpecificError";
 
 type Props = {
   currentStep: Steps;
@@ -91,7 +92,23 @@ const ActivationFlow = ({
         return <SyncError tryAgain={navigateToQrCodeMethod} />;
 
       case Steps.UnbackedError:
-        return <UnbackedError create={onCreateKey} />;
+        return <SpecificError primaryAction={onCreateKey} error={ErrorReason.NO_BACKUP} />;
+
+      case Steps.AlreadyBacked:
+        return (
+          <SpecificError
+            primaryAction={() => setCurrentStep(Steps.QrCodeMethod)}
+            error={ErrorReason.ALREADY_BACKED_SCAN}
+          />
+        );
+
+      case Steps.BackedWithDifferentSeeds:
+        return (
+          <SpecificError
+            primaryAction={() => setCurrentStep(Steps.QrCodeMethod)}
+            error={ErrorReason.DIFFERENT_BACKUPS}
+          />
+        );
       default:
         return null;
     }

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

@@ -8,7 +8,7 @@ import styled from "styled-components/native";
 interface Props {
   icon: React.ReactNode;
   title: string;
-  description: string;
+  description?: string;
   info?: string;
   cta: string;
   ctaSecondary?: string;
@@ -42,24 +42,29 @@ export function DetailedError(props: Props) {
       </Text>
 
       <Flex flexDirection="column" mb={8} rowGap={16}>
-        <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center">
-          {description}
-        </Text>
-        <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center">
-          {info}
-        </Text>
+        {description && (
+          <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center">
+            {description}
+          </Text>
+        )}
+        {info && (
+          <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center">
+            {info}
+          </Text>
+        )}
       </Flex>
 
       <Flex flexDirection="column" rowGap={24} mb={6} width={"100%"} px={"16px"}>
         <Button type={buttonType} outline={outline} onPress={primaryAction}>
           {cta}
         </Button>
-
-        <Link onPress={secondaryAction}>
-          <Text variant="paragraph" fontWeight="semiBold" color="neutral.c70">
-            {ctaSecondary}
-          </Text>
-        </Link>
+        {ctaSecondary && secondaryAction && (
+          <Link onPress={secondaryAction}>
+            <Text variant="paragraph" fontWeight="semiBold" color="neutral.c70">
+              {ctaSecondary}
+            </Text>
+          </Link>
+        )}
       </Flex>
     </Flex>
   );

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

@@ -3,7 +3,7 @@ import React from "react";
 import styled, { useTheme } from "styled-components/native";
 type Props = {
   title: string;
-  desc: string;
+  desc?: string;
   mainButton: {
     label: string;
     onPress: () => void;
@@ -22,9 +22,11 @@ export function ErrorComponent({ title, desc, mainButton }: Props) {
         <Text variant="h4" color="neutral.c100" textAlign="center" fontWeight="semiBold" mt={7}>
           {title}
         </Text>
-        <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center" mt={6}>
-          {desc}
-        </Text>
+        {desc && (
+          <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center" mt={6}>
+            {desc}
+          </Text>
+        )}
       </Flex>
       <Flex mt={8}>
         <Button type="main" outline={mainButton.outline} onPress={mainButton.onPress}>

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

@@ -1,17 +1,15 @@
 import React from "react";
-import { ErrorReason, useSpecificError } from "../../hooks/useSpecificError";
+import { ErrorReason, SpecificProps, useSpecificError } from "../../hooks/useSpecificError";
 import { DetailedError } from "./Detailed";
 
-type Props = {
+export const SpecificError = ({
+  error,
+  primaryAction,
+  secondaryAction,
+}: SpecificProps & {
   error: ErrorReason;
-  cancel?: () => void;
-  understood?: () => void;
-  goToDelete?: () => void;
-  tryAgain?: () => void;
-};
-
-export const SpecificError = ({ error, cancel, goToDelete, understood, tryAgain }: Props) => {
-  const { getErrorConfig } = useSpecificError({ cancel, goToDelete, understood, tryAgain });
+}) => {
+  const { getErrorConfig } = useSpecificError({ primaryAction, secondaryAction });
   const config = getErrorConfig(error);
 
   return <DetailedError {...config} />;

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/DeletionError.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import { ErrorReason } from "../../hooks/useSpecificError";
+import { ErrorReason, SpecificProps } from "../../hooks/useSpecificError";
 import { SpecificError } from "../Error/SpecificError";
 
-type Props = {
+type Props = SpecificProps & {
   error: ErrorReason;
-  tryAgain?: () => void;
-  understood?: () => void;
-  goToDelete?: () => void;
 };
 
 export const DeletionError = (props: Props) => {

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts

@@ -22,6 +22,8 @@ export enum AnalyticsPage {
   Unbacked = "Unbacked",
   OtherSeed = "Other seed",
   SameSeed = "Same seed",
+  ScanAttemptWithSameBackup = "Scan attempt with same backup",
+  ScanAttemptWithDifferentBackups = "Scan attempt with different backups",
 }
 
 export enum AnalyticsFlow {

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts

@@ -68,7 +68,7 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
         },
         memberCredentials,
         memberName,
-        alreadyHasATrustchain: !!trustchain,
+        initialTrustchainId: trustchain?.rootId,
       }),
 
     onSuccess: newTrustchain => {