🍱 (llm): CLS assets

apps/ledger-live-mobile/src/components/CustomImage/FramedLottie.tsx

@@ -3,6 +3,7 @@ import React, { useContext, useMemo } from "react";
 import FramedPicture, { Props as FramedImageProps, ImageSourceContext } from "./FramedPicture";
 import { CLSSupportedDeviceModelId } from "@ledgerhq/live-common/device/use-cases/isCustomLockScreenSupported";
 import { getFramedPictureConfig } from "./framedPictureConfigs";
+import { useTheme } from "styled-components/native";
 
 export type Props = {
   lottieSource: React.ComponentProps<typeof AnimatedLottieView>["source"];
@@ -18,7 +19,12 @@ const FramedLottie: React.FC<Props> = ({
   loadingProgress,
   deviceModelId,
 }) => {
-  const framedPictureConfig = getFramedPictureConfig("transfer", deviceModelId);
+  const { colors } = useTheme();
+  const framedPictureConfig = getFramedPictureConfig(
+    "transfer",
+    deviceModelId,
+    colors.type as "light" | "dark",
+  );
   const lottiesStyle = useMemo(
     () => ({
       width: framedPictureConfig.frameWidth,
@@ -28,7 +34,11 @@ const FramedLottie: React.FC<Props> = ({
   );
   return (
     <FramedPicture
-      framedPictureConfig={getFramedPictureConfig("transfer", deviceModelId)}
+      framedPictureConfig={getFramedPictureConfig(
+        "transfer",
+        deviceModelId,
+        colors.type as "light" | "dark",
+      )}
       source={source}
       loadingProgress={loadingProgress}
       background={<AnimatedLottieView autoPlay loop style={lottiesStyle} source={lottieSource} />}

apps/ledger-live-mobile/src/components/CustomImage/FramedPicture.tsx

@@ -68,6 +68,7 @@ export type FramedPictureConfig = {
    * (the screen border is curved on the top right and bottom right corner)
    */
   borderRightRadius: number;
+  borderLeftRadius?: number;
   /**
    * Source of the background picture representing a Ledger Stax
    * */

apps/ledger-live-mobile/src/components/CustomImage/framedPictureConfigs.tsx

@@ -1,9 +1,11 @@
-import staxTransferBackground from "./assets/transferBackground.png";
-import staxPreviewBackground from "./assets/previewBackground.png";
+import staxTransferBackground from "./assets/staxTransferBackground.png";
+import staxPreviewBackground from "./assets/staxPreviewBackground.png";
+import europaBackgroundLight from "./assets/europaBackgroundLight.png";
+import europaBackgroundDark from "./assets/europaBackgroundDark.png";
 import { FramedPictureConfig } from "./FramedPicture";
 import { CLSSupportedDeviceModelId } from "@ledgerhq/live-common/device/use-cases/isCustomLockScreenSupported";
 
-const staxTransferConfig: FramedPictureConfig = {
+const staxTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   // NB: measures in px taken directly on the .png
   frameHeight: 888,
   frameWidth: 564,
@@ -13,11 +15,10 @@ const staxTransferConfig: FramedPictureConfig = {
   innerTop: 24,
   borderRightRadius: 24,
   resizeMode: "cover",
-  backgroundSource: staxTransferBackground,
   leftPaddingColor: "#272727",
 };
 
-const europaTransferConfig: FramedPictureConfig = {
+const europaTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   // NB: measures in px taken directly on the .png
   frameHeight: 888, // TODO: TBD
   frameWidth: 564, // TODO: TBD
@@ -27,11 +28,10 @@ const europaTransferConfig: FramedPictureConfig = {
   innerTop: 24, // TODO: TBD
   borderRightRadius: 24, // TODO: TBD
   resizeMode: "cover", // TODO: TBD
-  backgroundSource: staxTransferBackground, // TODO: replace by europaTransferBackground
   leftPaddingColor: "#272727", // TBD
 };
 
-const staxPreviewConfig: FramedPictureConfig = {
+const staxPreviewConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   // NB: measures in px taken directly on the .png
   frameHeight: 1283,
   frameWidth: 810,
@@ -40,11 +40,10 @@ const staxPreviewConfig: FramedPictureConfig = {
   innerRight: 35,
   innerTop: 38,
   borderRightRadius: 57,
-  backgroundSource: staxPreviewBackground,
   resizeMode: "cover",
 };
 
-const europaPreviewConfig: FramedPictureConfig = {
+const europaPreviewConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   // NB: measures in px taken directly on the .png
   frameHeight: 1283, // TODO: TBD
   frameWidth: 810, // TODO: TBD
@@ -53,24 +52,60 @@ const europaPreviewConfig: FramedPictureConfig = {
   innerRight: 35, // TODO: TBD
   innerTop: 38, // TODO: TBD
   borderRightRadius: 57, // TODO: TBD
-  backgroundSource: staxPreviewBackground, // TODO: replace by europaPreviewBackground
   resizeMode: "cover",
 };
 
 const configs = {
   transfer: {
-    stax: staxTransferConfig,
-    europa: europaTransferConfig,
+    stax: {
+      light: {
+        ...staxTransferConfig,
+        backgroundSource: staxTransferBackground,
+      },
+      dark: {
+        ...staxTransferConfig,
+        backgroundSource: staxTransferBackground,
+      },
+    },
+    europa: {
+      light: {
+        ...europaTransferConfig,
+        backgroundSource: europaBackgroundLight,
+      },
+      dark: {
+        ...europaTransferConfig,
+        backgroundSource: europaBackgroundDark,
+      },
+    },
   },
   preview: {
-    stax: staxPreviewConfig,
-    europa: europaPreviewConfig,
+    stax: {
+      light: {
+        ...staxPreviewConfig,
+        backgroundSource: staxPreviewBackground,
+      },
+      dark: {
+        ...staxPreviewConfig,
+        backgroundSource: staxPreviewBackground,
+      },
+    },
+    europa: {
+      light: {
+        ...europaPreviewConfig,
+        backgroundSource: europaBackgroundLight,
+      },
+      dark: {
+        ...europaPreviewConfig,
+        backgroundSource: europaBackgroundDark,
+      },
+    },
   },
 };
 
 export function getFramedPictureConfig(
   type: "preview" | "transfer",
   deviceModelId: CLSSupportedDeviceModelId,
+  theme:"light"|"dark"
 ): FramedPictureConfig {
-  return configs[type][deviceModelId];
+  return configs[type][deviceModelId][theme];
 }

apps/ledger-live-mobile/src/components/CustomLockScreenDeviceAction/stepsRendering.tsx

@@ -23,6 +23,7 @@ const ImageLoadingGeneric: React.FC<{
   lottieSource?: FramedImageWithLottieProps["lottieSource"];
   deviceModelId: CLSSupportedDeviceModelId;
 }> = ({ title, fullScreen = true, children, progress, lottieSource, deviceModelId }) => {
+  const { colors } = useTheme();
   return (
     <Flex
       flexDirection="column"
@@ -48,7 +49,11 @@ const ImageLoadingGeneric: React.FC<{
         ) : (
           <FramedImageWithContext
             loadingProgress={progress}
-            framedPictureConfig={getFramedPictureConfig("transfer", deviceModelId)}
+            framedPictureConfig={getFramedPictureConfig(
+              "transfer",
+              deviceModelId,
+              colors.type as "light" | "dark",
+            )}
           >
             {children}
           </FramedImageWithContext>

apps/ledger-live-mobile/src/screens/CustomImage/PreviewPostEdit.tsx

@@ -13,6 +13,7 @@ import FramedPicture from "~/components/CustomImage/FramedPicture";
 import { getFramedPictureConfig } from "~/components/CustomImage/framedPictureConfigs";
 import { TrackScreen } from "~/analytics";
 import Link from "~/components/wrappedUi/Link";
+import { useTheme } from "styled-components/native";
 
 type NavigationProps = BaseComposite<
   StackNavigatorProps<CustomImageNavigatorParamList, ScreenName.CustomImagePreviewPostEdit>
@@ -30,6 +31,8 @@ const PreviewPostEdit = ({ navigation, route }: NavigationProps) => {
   const { t } = useTranslation();
   const { params } = route;
   const { baseImageFile, imagePreview, imageData, device, imageType, deviceModelId } = params;
+  const { colors } = useTheme();
+  const theme = colors.type as "light" | "dark";
 
   const handleError = useCallback(
     (error: Error) => {
@@ -91,7 +94,7 @@ const PreviewPostEdit = ({ navigation, route }: NavigationProps) => {
               onError={handlePreviewImageError}
               fadeDuration={0}
               source={{ uri: imagePreview?.imageBase64DataUri }}
-              framedPictureConfig={getFramedPictureConfig("preview", deviceModelId)}
+              framedPictureConfig={getFramedPictureConfig("preview", deviceModelId, theme)}
             />
           </Flex>
         </Flex>

apps/ledger-live-mobile/src/screens/CustomImage/PreviewPreEdit.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import styled from "styled-components/native";
+import styled, { useTheme } from "styled-components/native";
 import { Flex, InfiniteLoader, Text } from "@ledgerhq/native-ui";
 import {
   NFTMetadataLoadingError,
@@ -123,6 +123,8 @@ const PreviewPreEdit = ({ navigation, route }: NavigationProps) => {
     () => getScreenVisibleAreaDimensions(deviceModelId),
     [deviceModelId],
   );
+  const { colors } = useTheme();
+  const theme = colors.type as "light" | "dark";
 
   const isNftMetadata = "nftMetadataParams" in params;
   const isImageUrl = "imageUrl" in params;
@@ -409,7 +411,7 @@ const PreviewPreEdit = ({ navigation, route }: NavigationProps) => {
                 onError={handlePreviewImageError}
                 fadeDuration={0}
                 source={{ uri: processorPreviewImage?.imageBase64DataUri }}
-                framedPictureConfig={getFramedPictureConfig("preview", deviceModelId)}
+                framedPictureConfig={getFramedPictureConfig("preview", deviceModelId, theme)}
               />
             </Flex>
           </Flex>

apps/ledger-live-mobile/src/screens/Settings/Debug/Features/CustomImageGraphics.tsx

@@ -21,6 +21,7 @@ import {
 import imageSource from "~/components/CustomImage/assets/examplePicture2.webp";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { getFramedPictureConfig } from "~/components/CustomImage/framedPictureConfigs";
+import { useTheme } from "styled-components/native";
 
 const aStaxDevice: Device = {
   deviceId: "",
@@ -43,6 +44,8 @@ export default function DebugCustomImageGraphics() {
   const [showAllAssets, setShowAllAssets] = useState(false);
   const [deviceActionStep, setDeviceActionStep] = useState<DeviceActionStep>("confirmLoad");
   const [progress, setProgress] = useState(0);
+  const { colors } = useTheme();
+  const theme = colors.type as "light" | "dark";
 
   const [deviceModelId, setDeviceModelId] = useState<CLSSupportedDeviceModelId>(DeviceModelId.stax);
   const device = {
@@ -62,8 +65,8 @@ export default function DebugCustomImageGraphics() {
     />
   );
 
-  const framedPreviewConfig = getFramedPictureConfig("preview", deviceModelId);
-  const framedTransferConfig = getFramedPictureConfig("transfer", deviceModelId);
+  const framedPreviewConfig = getFramedPictureConfig("preview", deviceModelId, theme);
+  const framedTransferConfig = getFramedPictureConfig("transfer", deviceModelId, theme);
 
   return (
     <ImageSourceContext.Provider value={{ source: imageSource }}>
@@ -108,7 +111,7 @@ export default function DebugCustomImageGraphics() {
             <RenderImageCommitRequested device={device} deviceModelId={deviceModelId} />
           ) : deviceActionStep === "preview" ? (
             <FramedImageWithContext
-              framedPictureConfig={getFramedPictureConfig("preview", deviceModelId)}
+              framedPictureConfig={getFramedPictureConfig("preview", deviceModelId, theme)}
             />
           ) : null}
         </Flex>

apps/ledger-live-mobile/src/screens/Settings/Debug/Features/FetchCustomImage.tsx

@@ -29,7 +29,7 @@ export const debugFetchCustomImageHeaderOptions: ReactNavigationHeaderOptions =
 
 export default function DebugFetchCustomImage() {
   const deviceAction = useStaxFetchImageDeviceAction();
-  const { colors } = useTheme();
+  const { colors, dark } = useTheme();
   const navigation = useNavigation();
 
   const [device, setDevice] = useState<Device | null>(null);
@@ -179,7 +179,11 @@ export default function DebugFetchCustomImage() {
             {imageSource ? (
               <Flex flexDirection="row" flexGrow={0}>
                 <FramedPicture
-                  framedPictureConfig={getFramedPictureConfig("transfer", deviceModelId)}
+                  framedPictureConfig={getFramedPictureConfig(
+                    "transfer",
+                    deviceModelId,
+                    dark ? "dark" : "light",
+                  )}
                   source={imageSource}
                 />
               </Flex>