Merge pull request #7569 from LedgerHQ/bugfix/LIVE-12412-lld-cls-dete…

…ction

[LIVE-12412] fix(lld/MyLedger): custom lock screen not recognized

.changeset/grumpy-deers-develop.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Fix existing custom lock screen not being recognized in My Ledger ("Add" displayed instead of "Change" and no option to delete the current lock screen picture)

CODEOWNERS

@@ -99,8 +99,9 @@ apps/ledger-live-mobile/src/newArch/features/Web3Hub/    @ledgerhq/wallet-api
 # Devices team
 apps/cli/src/commands/devices                                      @ledgerhq/live-devices
 **/src/renderer/screens/manager/                                   @ledgerhq/live-devices
-**/screens/CustomImage                                             @ledgerhq/live-devices
-**/components/CustomImage                                          @ledgerhq/live-devices
+**/screens/customImage 																				 		 @ledgerhq/live-devices
+**/components/CustomImage																		 	 		 @ledgerhq/live-devices
+**/screens/CustomImage 																				 		 @ledgerhq/live-devices
 **/SyncOnboarding/**                                               @ledgerhq/live-devices
 **/OnboardingAppInstall/**																				 @ledgerhq/live-devices
 **/UpdateFirmwareModal/**																					 @ledgerhq/live-devices

apps/ledger-live-desktop/src/renderer/screens/customImage/Step1ChooseImage.tsx

@@ -30,6 +30,7 @@ type Props = StepProps & {
   isShowingNftGallery?: boolean;
   setIsShowingNftGallery: (_: boolean) => void;
   loading?: boolean;
+  hasCustomLockScreen?: boolean;
 };
 
 const defaultMediaTypes = ["original", "big", "preview"];
@@ -47,8 +48,15 @@ const extractNftBase64 = (metadata: NFTMetadata) => {
 };
 
 const StepChooseImage: React.FC<Props> = props => {
-  const { loading, setLoading, onResult, onError, isShowingNftGallery, setIsShowingNftGallery } =
-    props;
+  const {
+    loading,
+    setLoading,
+    onResult,
+    onError,
+    isShowingNftGallery,
+    setIsShowingNftGallery,
+    hasCustomLockScreen,
+  } = props;
   const isMounted = useIsMounted();
   const { t } = useTranslation();
   const track = useTrack();
@@ -158,7 +166,7 @@ const StepChooseImage: React.FC<Props> = props => {
               });
             }}
           />
-          {lastSeenCustomImage?.size ? (
+          {hasCustomLockScreen || lastSeenCustomImage?.size ? (
             <Link
               size="medium"
               color="error.c60"

apps/ledger-live-desktop/src/renderer/screens/customImage/index.tsx

@@ -43,6 +43,7 @@ type Props = {
   isFromPostOnboardingEntryPoint?: boolean;
   reopenPreviousDrawer?: () => void;
   deviceModelId: DeviceModelId | null;
+  hasCustomLockScreen?: boolean;
 };
 
 const orderedSteps: Step[] = [
@@ -55,8 +56,13 @@ const orderedSteps: Step[] = [
 const ErrorDisplayV2 = withV2StyleProvider(ErrorDisplay);
 
 const CustomImage: React.FC<Props> = props => {
-  const { imageUri, isFromNFTEntryPoint, reopenPreviousDrawer, isFromPostOnboardingEntryPoint } =
-    props;
+  const {
+    imageUri,
+    isFromNFTEntryPoint,
+    reopenPreviousDrawer,
+    isFromPostOnboardingEntryPoint,
+    hasCustomLockScreen,
+  } = props;
   const { t } = useTranslation();
   const track = useTrack();
   const { setAnalyticsDrawerName } = useContext(analyticsDrawerContext);
@@ -264,6 +270,7 @@ const CustomImage: React.FC<Props> = props => {
               setLoading={setSourceLoading}
               isShowingNftGallery={isShowingNftGallery}
               setIsShowingNftGallery={setIsShowingNftGallery}
+              hasCustomLockScreen={hasCustomLockScreen}
             />
           </FlowStepper.Indexed.Step>
           <FlowStepper.Indexed.Step

apps/ledger-live-desktop/src/renderer/screens/manager/DeviceDashboard/DeviceInformationSummary/CustomImageManagerButton.tsx

@@ -4,25 +4,22 @@ import { useTranslation } from "react-i18next";
 import { CLSSupportedDeviceModelId } from "@ledgerhq/live-common/device/use-cases/isCustomLockScreenSupported";
 import { setDrawer } from "~/renderer/drawers/Provider";
 import CustomImage from "~/renderer/screens/customImage";
-import { useSelector } from "react-redux";
-import { lastSeenCustomImageSelector } from "~/renderer/reducers/settings";
 import ToolTip from "~/renderer/components/Tooltip";
 import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
 
 type Props = {
   disabled?: boolean;
   deviceModelId: CLSSupportedDeviceModelId;
+  hasCustomLockScreen: boolean;
 };
 
 const CustomImageManagerButton = (props: Props) => {
   const { t } = useTranslation();
-  const { disabled, deviceModelId } = props;
-
-  const lastSeenCustomImage = useSelector(lastSeenCustomImageSelector);
+  const { disabled, deviceModelId, hasCustomLockScreen } = props;
 
   const onAdd = useCallback(() => {
-    setDrawer(CustomImage, { deviceModelId }, { forceDisableFocusTrap: true });
-  }, [deviceModelId]);
+    setDrawer(CustomImage, { deviceModelId, hasCustomLockScreen }, { forceDisableFocusTrap: true });
+  }, [deviceModelId, hasCustomLockScreen]);
 
   return (
     <Flex flexDirection="row" columnGap={3} alignItems="center">
@@ -50,7 +47,7 @@ const CustomImageManagerButton = (props: Props) => {
         disabled={disabled}
         data-testid="manager-custom-image-button"
       >
-        {lastSeenCustomImage.size ? t("changeCustomLockscreen.cta") : t("common.add")}
+        {hasCustomLockScreen ? t("changeCustomLockscreen.cta") : t("common.add")}
       </Link>
     </Flex>
   );

apps/ledger-live-desktop/src/renderer/screens/manager/DeviceDashboard/DeviceInformationSummary/index.tsx

@@ -61,6 +61,7 @@ type Props = {
   isIncomplete: boolean;
   installQueue: string[];
   uninstallQueue: string[];
+  hasCustomLockScreen: boolean;
 };
 
 /**
@@ -79,6 +80,7 @@ const DeviceInformationSummary = ({
   isIncomplete,
   installQueue,
   uninstallQueue,
+  hasCustomLockScreen,
 }: Props) => {
   const navigationLocked = useSelector(isNavigationLocked);
 
@@ -164,6 +166,7 @@ const DeviceInformationSummary = ({
                 <CustomImageManagerButton
                   disabled={navigationLocked}
                   deviceModelId={deviceModel.id}
+                  hasCustomLockScreen={hasCustomLockScreen}
                 />
               </>
             ) : null}

apps/ledger-live-desktop/src/renderer/screens/manager/DeviceDashboard/index.tsx

@@ -90,6 +90,7 @@ const DeviceDashboard = ({
   const [appInstallDep, setAppInstallDep] = useState<{ app: App; dependencies: App[] } | undefined>(
     undefined,
   );
+
   const [appUninstallDep, setAppUninstallDep] = useState<
     { dependents: App[]; app: App } | undefined
   >(undefined);
@@ -165,8 +166,8 @@ const DeviceDashboard = ({
     // Not ideal but we have no concept of device ids so we can consider
     // an empty custom image size an indicator of not having an image set.
     // If this is troublesome we'd have to react by asking the device directly.
-    if (state.customImageBlocks === 0) reduxDispatch(clearLastSeenCustomImage());
-  }, [reduxDispatch, state.customImageBlocks]);
+    if (result.customImageBlocks === 0) reduxDispatch(clearLastSeenCustomImage());
+  }, [reduxDispatch, result.customImageBlocks]);
 
   const disableFirmwareUpdate = state.installQueue.length > 0 || state.uninstallQueue.length > 0;
   return (
@@ -209,6 +210,7 @@ const DeviceDashboard = ({
           device={device}
           deviceName={deviceName}
           isIncomplete={isIncomplete}
+          hasCustomLockScreen={result.customImageBlocks !== 0}
         />
         <ProviderWarning />
         <AppList