Merge pull request #7291 from LedgerHQ/feat/dsdk-13125-live-assets

💄 [LLD/LLM]: Europa assets

.changeset/blue-fireants-change.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/devices": patch
+---
+
+Rename Ledger Europa

.changeset/old-vans-fry.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/icons-ui": patch
+---
+
+Update Europa icon

.changeset/strange-oranges-bake.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/device-core": patch
+---
+
+shouldForceFirmwareUpdate: add <1.1.1 condition for europa

.changeset/strong-bats-walk.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+Upadate Europa assets

.github/workflows/build-desktop.yml

@@ -57,10 +57,15 @@ jobs:
     env:
       NODE_OPTIONS: "--max-old-space-size=7168"
     steps:
+      - name: generate token
+        id: generate-token
+        uses: tibdex/github-app-token@v1
+        with:
+          app_id: ${{ secrets.GH_BOT_APP_ID }}
+          private_key: ${{ secrets.GH_BOT_PRIVATE_KEY }}
       - uses: actions/checkout@v4
         with:
           ref: ${{ inputs.ref || github.sha }}
-
       - name: Setup git user
         uses: LedgerHQ/ledger-live/tools/actions/composites/setup-git-user@develop
 
@@ -92,6 +97,17 @@ jobs:
         uses: LedgerHQ/ledger-live/tools/actions/composites/setup-build-desktop@develop
         with:
           os: ${{ matrix.config.name }}
+      - name: Retrieving internal assets
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          repository: LedgerHQ/ledger-live-internal-assets
+          token: ${{ steps.generate-token.outputs.token }}
+          path: ledger-live-internal-assets
+
+      - name: Replace assets
+        id: assets
+        run: pnpm desktop assets:replace
 
       - name: Build the app
         id: build-app

.github/workflows/build-mobile.yml

@@ -41,6 +41,12 @@ jobs:
     env:
       NODE_OPTIONS: "--max-old-space-size=7168"
     steps:
+      - name: generate token
+        id: generate-token
+        uses: tibdex/github-app-token@v1
+        with:
+          app_id: ${{ secrets.GH_BOT_APP_ID }}
+          private_key: ${{ secrets.GH_BOT_PRIVATE_KEY }}
       - uses: actions/checkout@v4
         with:
           ref: ${{ inputs.ref || github.sha }}
@@ -68,10 +74,19 @@ jobs:
       - name: Get short SHA
         id: slug
         run: echo "sha8=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+      - name: Retrieving internal assets
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          repository: LedgerHQ/ledger-live-internal-assets
+          token: ${{ steps.generate-token.outputs.token }}
+          path: ledger-live-internal-assets
       - name: make local version
         env:
           VERSION: ${{ steps.version.outputs.clean }}-sha.${{ steps.slug.outputs.sha8 }}
         run: cd apps/ledger-live-mobile && npm version $VERSION
+      - name: Replace assets
+        run: pnpm mobile assets:replace
       - name: build the app
         env:
           ANDROID_KEYSTORE_PASS: staging
@@ -96,6 +111,12 @@ jobs:
     env:
       NODE_OPTIONS: "--max-old-space-size=7168"
     steps:
+      - name: generate token
+        id: generate-token
+        uses: tibdex/github-app-token@v1
+        with:
+          app_id: ${{ secrets.GH_BOT_APP_ID }}
+          private_key: ${{ secrets.GH_BOT_PRIVATE_KEY }}
       - uses: actions/checkout@v4
         with:
           ref: ${{ inputs.ref || github.sha }}
@@ -113,6 +134,15 @@ jobs:
           turbo-server-token: ${{ secrets.TURBOREPO_SERVER_TOKEN }}
       - name: install dependencies
         run: pnpm i --filter="live-mobile..." --filter="ledger-live" --no-frozen-lockfile --unsafe-perm
+      - name: Retrieving internal assets
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          repository: LedgerHQ/ledger-live-internal-assets
+          token: ${{ steps.generate-token.outputs.token }}
+          path: ledger-live-internal-assets
+      - name: Replace assets
+        run: pnpm mobile assets:replace
       - name: bundle ios and android js
         run: |
           pnpm build:llm:deps --api="http://127.0.0.1:${{ steps.caches.outputs.port }}" --token="${{ secrets.TURBOREPO_SERVER_TOKEN }}" --team="foo"

apps/ledger-live-desktop/package.json

@@ -47,7 +47,8 @@
     "test:playwright:clean": "git clean -fdX tests/artifacts",
     "typecheck": "node scripts/typecheck.js",
     "check": "pnpm lint; pnpm typecheck",
-    "unimported": "unimported"
+    "unimported": "unimported",
+    "assets:replace": "zx ./scripts/replace-assets.mjs"
   },
   "dependencies": {
     "@braze/web-sdk": "^4.6.3",

apps/ledger-live-desktop/scripts/replace-assets.mjs

@@ -0,0 +1,14 @@
+#!/usr/bin/env zx
+import "zx/globals";
+import fs from "fs";
+import path from "path";
+
+const basePath = path.join(__dirname, "..", "..", "..");
+const srcPath = path.join(__dirname, "..", "src");
+const replaceAssetsPath = path.join(basePath, "ledger-live-internal-assets", "apps", "ledger-live-desktop", "src");
+
+async function replaceAssets(){
+  await fs.promises.cp(replaceAssetsPath, srcPath, { recursive: true, force: true});
+}
+
+await replaceAssets();

apps/ledger-live-desktop/src/renderer/components/CustomImage/CustomLockScreenDeviceAction/index.tsx

@@ -128,6 +128,7 @@ const CustomImageDeviceAction: React.FC<Props> = withRemountableWrapper(props =>
           deviceModelId={deviceModelId}
           progress={progress}
           source={source}
+          type={type}
         />
       ) : imageCommitRequested && device ? (
         <RenderImageCommitRequested

apps/ledger-live-desktop/src/renderer/components/CustomImage/CustomLockScreenDeviceAction/stepsRendering.tsx

@@ -51,11 +51,13 @@ export const RenderLoadingImage = ({
   progress,
   source,
   deviceModelId,
+  type,
 }: {
   deviceModelId: CLSSupportedDeviceModelId;
   device: Device;
   progress: number | undefined;
   source?: string;
+  type: Theme["theme"];
 }) => {
   const { t } = useTranslation();
   return (
@@ -68,7 +70,7 @@ export const RenderLoadingImage = ({
     >
       <AnimationWrapper>
         <FramedPicture
-          frameConfig={getFramedPictureConfig("transfer", deviceModelId)}
+          frameConfig={getFramedPictureConfig("transfer", deviceModelId, type)}
           source={source}
           loadingProgress={progress}
         />
@@ -114,7 +116,7 @@ export const RenderImageCommitRequested = ({
       <DeviceBlocker />
       <AnimationWrapper>
         <FramedPicture
-          frameConfig={getFramedPictureConfig("transfer", deviceModelId)}
+          frameConfig={getFramedPictureConfig("preview", deviceModelId, type)}
           source={source}
           background={
             <Animation animation={getDeviceAnimation(device.modelId, type, "confirmLockscreen")} />

apps/ledger-live-desktop/src/renderer/components/CustomImage/FramedPicture.tsx

@@ -48,6 +48,7 @@ export type FramedPictureConfig = {
   innerTop: number;
   innerBottomHeight: number;
   borderRightRadius: number;
+  borderLeftRadius?: number;
   /** source of the background image */
   backgroundSource?: string;
 };
@@ -86,6 +87,7 @@ const FramedPicture: React.FC<Props> = ({
     innerTop,
     innerLeft,
     borderRightRadius,
+    borderLeftRadius,
     innerBottomHeight,
     backgroundSource,
   } = scaleFrameConfig(frameConfig, scale || 1);
@@ -129,6 +131,8 @@ const FramedPicture: React.FC<Props> = ({
                   objectFit: "fill",
                   borderTopRightRadius: borderRightRadius,
                   borderBottomRightRadius: borderRightRadius,
+                  borderTopLeftRadius: borderLeftRadius,
+                  borderBottomLeftRadius: borderLeftRadius,
                 }}
               />
             ) : null}

apps/ledger-live-desktop/src/renderer/components/CustomImage/ImageGrayscalePreview.tsx

@@ -229,7 +229,7 @@ const ImageGrayscalePreview: React.FC<Props> = props => {
       />
       {previewResult ? (
         <FramedPicture
-          frameConfig={getFramedPictureConfig("transfer", deviceModelId)}
+          frameConfig={getFramedPictureConfig("transfer", deviceModelId, theme.colors.palette.type)}
           source={previewResult?.imageBase64DataUri}
         />
       ) : null}

apps/ledger-live-desktop/src/renderer/components/CustomImage/framedPictureConfigs.tsx

@@ -1,8 +1,11 @@
 import { CLSSupportedDeviceModelId } from "@ledgerhq/live-common/device/use-cases/isCustomLockScreenSupported";
-import staxTransferBackground from "./assets/transferBackground.png";
+import staxTransferBackgroundLight from "./assets/staxTransferBackgroundLight.png";
+import staxTransferBackgroundDark from "./assets/staxTransferBackgroundDark.png";
+import europaTransferBackgroundLight from "./assets/europaTransferBackgroundLight.png";
+import europaTransferBackgroundDark from "./assets/europaTransferBackgroundDark.png";
 import { FramedPictureConfig } from "./FramedPicture";
 
-export const staxTransferConfig: FramedPictureConfig = {
+export const staxTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   frameHeight: 236,
   frameWidth: 150,
   innerHeight: 223,
@@ -12,10 +15,9 @@ export const staxTransferConfig: FramedPictureConfig = {
   innerLeft: 1.5,
   innerBottomHeight: 27,
   borderRightRadius: 6.5,
-  backgroundSource: staxTransferBackground,
 };
 
-export const europaTransferConfig: FramedPictureConfig = {
+export const europaTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   frameHeight: 236, // TODO:TBD
   frameWidth: 150, // TODO:TBD
   innerHeight: 223, // TODO:TBD
@@ -25,19 +27,68 @@ export const europaTransferConfig: FramedPictureConfig = {
   innerLeft: 1.5, // TODO:TBD
   innerBottomHeight: 27, // TODO:TBD
   borderRightRadius: 6.5, // TODO:TBD
-  backgroundSource: staxTransferBackground, // TODO: replace by europaTransferBackground when it exists
 };
 
-const configs = {
+type FrameConfigMap = {
+  [key in "transfer" | "preview"]: {
+    [modelId in CLSSupportedDeviceModelId]: {
+      light: FramedPictureConfig;
+      dark: FramedPictureConfig;
+    };
+  };
+};
+
+const configs: FrameConfigMap = {
   transfer: {
-    stax: staxTransferConfig,
-    europa: europaTransferConfig,
+    stax: {
+      light: {
+        ...staxTransferConfig,
+        backgroundSource: staxTransferBackgroundLight,
+      },
+      dark: {
+        ...staxTransferConfig,
+        backgroundSource: staxTransferBackgroundDark,
+      },
+    },
+    europa: {
+      light: {
+        ...europaTransferConfig,
+        backgroundSource: europaTransferBackgroundLight,
+      },
+      dark: {
+        ...europaTransferConfig,
+        backgroundSource: europaTransferBackgroundDark,
+      },
+    },
+  },
+  preview: {
+    stax: {
+      light: {
+        ...staxTransferConfig,
+        backgroundSource: staxTransferBackgroundLight,
+      },
+      dark: {
+        ...staxTransferConfig,
+        backgroundSource: staxTransferBackgroundDark,
+      },
+    },
+    europa: {
+      light: {
+        ...europaTransferConfig,
+        backgroundSource: europaTransferBackgroundLight,
+      },
+      dark: {
+        ...europaTransferConfig,
+        backgroundSource: europaTransferBackgroundDark,
+      },
+    },
   },
 };
 
 export function getFramedPictureConfig(
-  type: "transfer", // later on, there will be more types (like "preview" on LLM)
+  type: "transfer" | "preview", // later on, there will be more types (like "preview" on LLM)
   deviceModelId: CLSSupportedDeviceModelId,
+  theme: "dark" | "light",
 ): FramedPictureConfig {
-  return configs[type][deviceModelId];
+  return configs[type][deviceModelId][theme];
 }