Merge branch 'fix/DSDK-13125-llm-europa' into hotfix

.changeset/tender-doors-move.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Update LLM restore apps assets

.github/workflows/release-final.yml

@@ -129,7 +129,7 @@ jobs:
             github.rest.actions.createWorkflowDispatch({
               owner: "ledgerhq",
               repo: "ledger-live-build",
-              ref: "main",
+              ref: "feat/DSDK-13125-live-assets",
               workflow_id: "release-desktop.yml",
               inputs: {
                 branch: "main"
@@ -144,7 +144,7 @@ jobs:
             github.rest.actions.createWorkflowDispatch({
               owner: "ledgerhq",
               repo: "ledger-live-build",
-              ref: "main",
+              ref: "feat/DSDK-13125-live-assets",
               workflow_id: "release-mobile.yml",
               inputs: {
                 ref: "main"

.github/workflows/release-prerelease.yml

@@ -116,7 +116,7 @@ jobs:
             github.rest.actions.createWorkflowDispatch({
               owner: "ledgerhq",
               repo: "ledger-live-build",
-              ref: "main",
+              ref: "feat/DSDK-13125-live-assets",
               workflow_id: "pre-desktop.yml",
               inputs: {
                 ref: "${{ github.event_name == 'workflow_dispatch' && inputs.ref || github.ref_name }}",
@@ -131,7 +131,7 @@ jobs:
             github.rest.actions.createWorkflowDispatch({
               owner: "ledgerhq",
               repo: "ledger-live-build",
-              ref: "main",
+              ref: "feat/DSDK-13125-live-assets",
               workflow_id: "pre-mobile.yml",
               inputs: {
                 ref: "${{ github.event_name == 'workflow_dispatch' && inputs.ref || github.ref_name }}",

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/screens/DeviceHowTo.tsx

@@ -4,6 +4,7 @@ import { Bullet, Title, Column, AnimationContainer, AsideFooter } from "../share
 import Animation from "~/renderer/animations";
 import { getDeviceAnimation } from "~/renderer/components/DeviceAction/animations";
 import { OnboardingContext } from "../../../index";
+import useTheme from "~/renderer/hooks/useTheme";
 
 const steps = [
   {
@@ -39,12 +40,13 @@ export function DeviceHowTo() {
 
 const DeviceHowToAnimation = () => {
   const { deviceModelId } = useContext(OnboardingContext);
+  const { theme } = useTheme();
 
   return (
     <AnimationContainer>
       {deviceModelId && (
         <Animation
-          animation={getDeviceAnimation(deviceModelId, "light", "plugAndPinCode") as object}
+          animation={getDeviceAnimation(deviceModelId, theme, "plugAndPinCode") as object}
         />
       )}
     </AnimationContainer>

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/screens/DeviceHowTo2.tsx

@@ -4,6 +4,7 @@ import { Bullet, Title, Column, AnimationContainer, AsideFooter } from "../share
 import Animation from "~/renderer/animations";
 import { getDeviceAnimation } from "~/renderer/components/DeviceAction/animations";
 import { OnboardingContext } from "../../../index";
+import { useTheme } from "styled-components";
 
 const steps = [
   {
@@ -39,12 +40,13 @@ export function DeviceHowTo2() {
 
 const DeviceHowTo2Animation = () => {
   const { deviceModelId } = useContext(OnboardingContext);
+  const { theme } = useTheme();
 
   return (
     <AnimationContainer>
       {deviceModelId && (
         <Animation
-          animation={getDeviceAnimation(deviceModelId, "light", "plugAndPinCode") as object}
+          animation={getDeviceAnimation(deviceModelId, theme, "plugAndPinCode") as object}
         />
       )}
     </AnimationContainer>

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/screens/PinCodeHowTo.tsx

@@ -41,12 +41,13 @@ export function PinCodeHowTo() {
 
 const PinCodeHowToAnimation = () => {
   const { deviceModelId } = useContext(OnboardingContext);
+  const { theme } = useTheme();
 
   return (
     deviceModelId && (
       <AnimationContainer>
         <Animation
-          animation={getDeviceAnimation(deviceModelId, "light", "plugAndPinCode") as object}
+          animation={getDeviceAnimation(deviceModelId, theme, "plugAndPinCode") as object}
         />
       </AnimationContainer>
     )

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/screens/RecoveryHowTo3.tsx

@@ -4,6 +4,7 @@ import { Title, AsideFooter, Column, Bullet, AnimationContainer } from "../share
 import Animation from "~/renderer/animations";
 import { getDeviceAnimation } from "~/renderer/components/DeviceAction/animations";
 import { OnboardingContext } from "../../../index";
+import { useTheme } from "styled-components";
 
 const steps = [
   {
@@ -36,11 +37,12 @@ export function RecoveryHowTo3() {
 
 const RecoveryHowTo3Animation = () => {
   const { deviceModelId } = useContext(OnboardingContext);
+  const { theme } = useTheme();
 
   return (
     <AnimationContainer>
       <Animation
-        animation={getDeviceAnimation(deviceModelId!, "light", "plugAndPinCode") as object}
+        animation={getDeviceAnimation(deviceModelId!, theme, "plugAndPinCode") as object}
       />
     </AnimationContainer>
   );

apps/ledger-live-desktop/src/renderer/components/SyncOnboarding/Manual/CompletionScreen.tsx

@@ -5,17 +5,20 @@ import { useHistory } from "react-router-dom";
 import { DeviceModelId } from "@ledgerhq/devices";
 import { useStartPostOnboardingCallback } from "@ledgerhq/live-common/postOnboarding/hooks/index";
 import { saveSettings } from "~/renderer/actions/settings";
-import { getCurrentDevice } from "~/renderer/reducers/devices";
 
 import StaxCompletionView from "./StaxCompletionView";
 import EuropaCompletionView from "./EuropaCompletionView";
+import { lastSeenDeviceSelector } from "~/renderer/reducers/settings";
+import { getCurrentDevice } from "~/renderer/reducers/devices";
 
 const GO_TO_POSTONBOARDING_TIMEOUT = 6000;
 
 const CompletionScreen = () => {
   const dispatch = useDispatch();
   const history = useHistory();
-  const device = useSelector(getCurrentDevice);
+  const currentDevice = useSelector(getCurrentDevice);
+  const lastSeenDevice = useSelector(lastSeenDeviceSelector);
+  const device = currentDevice || lastSeenDevice;
 
   const handleInitPostOnboarding = useStartPostOnboardingCallback();
 
@@ -38,9 +41,9 @@ const CompletionScreen = () => {
     <Flex alignItems="center" width="100%" justifyContent="center">
       {device?.modelId === DeviceModelId.stax ? (
         <StaxCompletionView />
-      ) : (
+      ) : device ? (
         <EuropaCompletionView device={device} />
-      )}
+      ) : null}
     </Flex>
   );
 };

apps/ledger-live-desktop/src/renderer/screens/USBTroubleshooting/ConnectionTester.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { getCurrentDevice } from "~/renderer/reducers/devices";
@@ -31,6 +31,7 @@ const ConnectionTester = ({ onExit, onDone }: { onExit: () => void; onDone: () =
   const { t } = useTranslation();
   const [connectionStatus, setConnectionStatus] = useState(0);
   const currentDevice = useSelector(getCurrentDevice);
+  const { theme } = useTheme();
   const lastSeenDevice = useSelector(lastSeenDeviceSelector);
   useEffect(() => {
     let sub: Subscription | undefined;
@@ -53,7 +54,7 @@ const ConnectionTester = ({ onExit, onDone }: { onExit: () => void; onDone: () =
         height={"140px"}
         animation={getDeviceAnimation(
           lastSeenDevice?.modelId ?? DeviceModelId.nanoS,
-          "light",
+          theme,
           "plugAndPinCode",
         )}
         loop={connectionStatus !== 1}

apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/CustomLockScreenAssets.tsx

@@ -45,9 +45,7 @@ const CustomLockScreenAssets = () => {
             source={source}
             loadingProgress={0}
             background={
-              <Animation
-                animation={getDeviceAnimation(DeviceModelId.stax, "light", "allowManager")}
-              />
+              <Animation animation={getDeviceAnimation(DeviceModelId.stax, type, "allowManager")} />
             }
           />
         </Flex>
@@ -58,7 +56,7 @@ const CustomLockScreenAssets = () => {
             loadingProgress={1}
             background={
               <Animation
-                animation={getDeviceAnimation(DeviceModelId.stax, "light", "confirmLockscreen")}
+                animation={getDeviceAnimation(DeviceModelId.stax, type, "confirmLockscreen")}
               />
             }
           />

apps/ledger-live-mobile/src/components/DeviceAction/InstallSetOfApps/Restore.tsx

@@ -1,32 +1,20 @@
 import React from "react";
 import { Button, Flex, Text } from "@ledgerhq/native-ui";
 import { Trans } from "react-i18next";
-import { DeviceModelId } from "@ledgerhq/types-devices";
 
 import RestoreIllustrations from "./RestoreIllustrations";
 
 type Props = {
   onConfirm: () => void;
   onReject: () => void;
   deviceName?: string;
-  deviceModelId?: DeviceModelId;
-  lastSeenDeviceModelId?: DeviceModelId;
 };
 
-const Restore = ({
-  onConfirm,
-  onReject,
-  deviceName,
-  deviceModelId,
-  lastSeenDeviceModelId,
-}: Props) => {
+const Restore = ({ onConfirm, onReject, deviceName }: Props) => {
   return (
     <Flex>
       <Flex alignItems="center" mb={7} mt={3}>
-        <RestoreIllustrations
-          lastSeenDeviceModelId={lastSeenDeviceModelId}
-          deviceModelId={deviceModelId}
-        />
+        <RestoreIllustrations />
       </Flex>
       <Text variant="h5" fontWeight="bold" textAlign="center">
         {deviceName ? (

apps/ledger-live-mobile/src/components/DeviceAction/InstallSetOfApps/RestoreIllustrations.tsx

@@ -1,57 +1,57 @@
-import { DeviceModelId } from "@ledgerhq/types-devices";
-import { useTheme } from "@react-navigation/native";
-
-import NanoToNanoDark from "./assets/dark/NanoToNano";
-import NanoToStaxDark from "./assets/dark/NanoToStax";
-import StaxToNanoDark from "./assets/dark/StaxToNano";
-import StaxToStaxDark from "./assets/dark/StaxToStax";
-
-import NanoToNanoLight from "./assets/light/NanoToNano";
-import NanoToStaxLight from "./assets/light/NanoToStax";
-import StaxToNanoLight from "./assets/light/StaxToNano";
-import StaxToStaxLight from "./assets/light/StaxToStax";
-
-const restoreIllustrations = {
-  nanoToNano: {
-    dark: NanoToNanoDark,
-    light: NanoToNanoLight,
-  },
-  nanoToStax: {
-    dark: NanoToStaxDark,
-    light: NanoToStaxLight,
-  },
-  staxToNano: {
-    dark: StaxToNanoDark,
-    light: StaxToNanoLight,
-  },
-  staxToStax: {
-    dark: StaxToStaxDark,
-    light: StaxToStaxLight,
-  },
-};
-
-type Props = {
-  deviceModelId?: DeviceModelId;
-  lastSeenDeviceModelId?: DeviceModelId;
-};
-
-const RestoreIllustrations = ({ deviceModelId, lastSeenDeviceModelId }: Props) => {
-  const isFromStax = lastSeenDeviceModelId === DeviceModelId.stax;
-  const isToStax = deviceModelId === DeviceModelId.stax;
-
-  const { dark } = useTheme();
-  const selectedTheme = dark ? "dark" : "light";
-
-  if (isFromStax) {
-    if (isToStax) {
-      return restoreIllustrations.staxToStax[selectedTheme];
-    }
-    return restoreIllustrations.staxToNano[selectedTheme];
-  }
-  if (!isFromStax && !isToStax) {
-    return restoreIllustrations.nanoToNano[selectedTheme];
-  }
-  return restoreIllustrations.nanoToStax[selectedTheme];
-};
+import React from "react";
+import Svg, { ClipPath, Defs, G, Path, Rect } from "react-native-svg";
+
+const RestoreIllustrations = () => (
+  <Svg width={168} height={132} viewBox="0 0 168 132" fill="none">
+    <Rect x={125} y={83.5} width={40} height={40} rx={12} fill="#F5BC00" />
+    <Path
+      d="M139.167 95.8698L145 92.5L150.833 95.8698L148.688 97.1146L145 94.9898L141.312 97.1146L139.167 95.8698ZM150.833 100.12L148.688 98.8746L145 101L141.312 98.8746L139.167 100.12V102.609L142.856 104.734V108.984L145 110.229L147.144 108.984V104.734L150.833 102.609V100.12ZM150.833 106.859V104.369L148.688 105.614V108.104L150.833 106.859ZM152.356 107.739L148.667 109.864V112.354L154.5 108.984V102.244L152.356 103.489V107.739ZM150.211 97.9946L152.356 99.2395V101.729L154.5 100.484V97.9946L152.356 96.7498L150.211 97.9946ZM142.856 110.765V113.255L145 114.5L147.144 113.255V110.765L145 112.01L142.856 110.765ZM139.167 106.859L141.312 108.104V105.614L139.167 104.369V106.859ZM142.856 97.9946L145 99.2395L147.144 97.9946L145 96.7498L142.856 97.9946ZM137.644 99.2395L139.789 97.9946L137.644 96.7498L135.5 97.9946V100.484L137.644 101.729V99.2395ZM137.644 103.489L135.5 102.244V108.984L141.333 112.354V109.864L137.644 107.739V103.489Z"
+      fill="white"
+    />
+    <Rect x={5} y={83.5} width={40} height={40} rx={12} fill="#454A75" />
+    <Path d="M25 92.5L18 103.5L25 100.491V92.5Z" fill="white" fillOpacity={0.5} />
+    <Path d="M25 100.5L18 103.527L25 107.5V100.5Z" fill="white" fillOpacity={0.7} />
+    <Path d="M32 103.5L25 92.5V100.491L32 103.5Z" fill="white" fillOpacity={0.7} />
+    <Path d="M25 107.5L32 103.527L25 100.5V107.5Z" fill="white" fillOpacity={0.9} />
+    <Path d="M18 105.5L25 114.5V109.272L18 105.5Z" fill="white" fillOpacity={0.5} />
+    <Path d="M25 109.272V114.5L32 105.5L25 109.272Z" fill="white" fillOpacity={0.7} />
+    <Rect x={64} y={83.5} width={40} height={40} rx={12} fill="#F7931A" />
+    <Path
+      d="M91.0704 101.541C91.3852 99.4391 89.7842 98.3093 87.5966 97.5553L88.3064 94.7081L86.574 94.277L85.8822 97.0491C85.427 96.9348 84.9598 96.8285 84.4937 96.7222L85.1904 93.9321L83.458 93.5L82.7482 96.3463C82.3712 96.26 82.0003 96.1758 81.6414 96.0856L81.6434 96.0766L79.2533 95.48L78.7921 97.3308C78.7921 97.3308 80.0784 97.6255 80.0513 97.6436C80.7531 97.819 80.8794 98.2832 80.8584 98.6521L80.0503 101.895C80.0985 101.907 80.1606 101.925 80.2308 101.953L80.0473 101.907L78.9144 106.451C78.8282 106.664 78.6107 106.983 78.1194 106.862C78.1375 106.887 76.8602 106.548 76.8602 106.548L76 108.531L78.2558 109.094C78.6748 109.199 79.0859 109.309 79.4899 109.413L78.7731 112.292L80.5045 112.723L81.2143 109.876C81.6875 110.003 82.1467 110.121 82.5958 110.234L81.888 113.069L83.6204 113.5L84.3373 110.627C87.2928 111.186 89.5145 110.961 90.4498 108.288C91.2038 106.136 90.4128 104.894 88.8578 104.085C89.9907 103.824 90.8428 103.079 91.0704 101.541ZM87.1103 107.093C86.576 109.245 82.9517 108.081 81.7767 107.789L82.7292 103.975C83.9042 104.268 87.6708 104.849 87.1103 107.093ZM87.6467 101.509C87.1585 103.467 84.1428 102.472 83.1653 102.228L84.0275 98.7694C85.005 99.0131 88.156 99.4672 87.6467 101.509Z"
+      fill="white"
+    />
+    <Rect x={60} width={48} height={48} rx={24} fill="#BBB0FF" fillOpacity={0.2} />
+    <G clipPath="url(#clip0_15098_6375)">
+      <Path
+        d="M83.9997 13.3334C78.1063 13.3334 73.333 18.1054 73.333 23.9987C73.333 29.8787 78.1063 34.652 83.9997 34.652C89.8797 34.6387 94.653 29.8654 94.653 23.972C94.6397 20.0654 92.5063 16.4654 89.0797 14.5987"
+        stroke="#BBB0FF"
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M89.0996 18.72V14H93.8063"
+        stroke="#BBB0FF"
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Path
+      d="M85 56V60C85 63.3137 82.3137 66 79 66H31.5C28.1863 66 25.5 68.6863 25.5 72V75.5"
+      stroke="#7F7F7F"
+    />
+    <Path
+      d="M85 56V59.7436C85 63.0573 87.6863 65.7436 91 65.7436H138C141.314 65.7436 144 68.4299 144 71.7436V75"
+      stroke="#7F7F7F"
+    />
+    <Path d="M85 56V75" stroke="#808080" />
+    <Defs>
+      <ClipPath id="clip0_15098_6375">
+        <Rect width={32} height={32} fill="white" transform="translate(68 8)" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
 
 export default RestoreIllustrations;