💄 (llm/lld): Flex assets

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

@@ -5,9 +5,12 @@ import europaTransferBackgroundLight from "./assets/europaTransferBackgroundLigh
 import europaTransferBackgroundDark from "./assets/europaTransferBackgroundDark.png";
 import { FramedPictureConfig } from "./FramedPicture";
 
+const STAX_FRAME_HEIGHT = 944;
+const STAX_FRAME_WIDTH = 600;
+
 export const staxTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
-  frameHeight: 236,
-  frameWidth: 150,
+  frameHeight: STAX_FRAME_HEIGHT / 4,
+  frameWidth: STAX_FRAME_WIDTH / 4,
   innerHeight: 223,
   innerWidth: 140.5,
   innerRight: 8,
@@ -17,28 +20,36 @@ export const staxTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> =
   borderRightRadius: 6.5,
 };
 
+const EUROPA_FRAME_WIDTH = 572;
+const EUROPA_FRAME_HEIGHT = 784;
+
 export const europaTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
-  frameHeight: 236, // TODO:TBD
-  frameWidth: 150, // TODO:TBD
-  innerHeight: 223, // TODO:TBD
-  innerWidth: 140.5, // TODO:TBD
-  innerRight: 8, // TODO:TBD
-  innerTop: 7, // TODO:TBD
-  innerLeft: 1.5, // TODO:TBD
-  innerBottomHeight: 27, // TODO:TBD
-  borderRightRadius: 6.5, // TODO:TBD
+  frameWidth: EUROPA_FRAME_WIDTH / 2,
+  frameHeight: EUROPA_FRAME_HEIGHT / 2,
+  innerWidth: 224,
+  innerHeight: 282,
+  innerRight: 40,
+  innerTop: 30,
+  innerLeft: 29,
+  innerBottomHeight: 40,
+  borderRightRadius: 4,
+  borderLeftRadius: 4,
 };
 
-type FrameConfigMap = {
-  [key in "transfer" | "preview"]: {
-    [modelId in CLSSupportedDeviceModelId]: {
-      light: FramedPictureConfig;
-      dark: FramedPictureConfig;
-    };
-  };
+export const europaPreviewConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
+  frameWidth: EUROPA_FRAME_WIDTH / 4,
+  frameHeight: EUROPA_FRAME_HEIGHT / 4,
+  innerWidth: 90.5,
+  innerHeight: 136.5,
+  innerRight: 21,
+  innerTop: 27.5,
+  innerLeft: 28,
+  innerBottomHeight: 20,
+  borderRightRadius: 5,
+  borderLeftRadius: 5,
 };
 
-const configs: FrameConfigMap = {
+const configs = {
   transfer: {
     stax: {
       light: {
@@ -74,11 +85,11 @@ const configs: FrameConfigMap = {
     },
     europa: {
       light: {
-        ...europaTransferConfig,
+        ...europaPreviewConfig,
         backgroundSource: europaTransferBackgroundLight,
       },
       dark: {
-        ...europaTransferConfig,
+        ...europaPreviewConfig,
         backgroundSource: europaTransferBackgroundDark,
       },
     },

apps/ledger-live-desktop/src/renderer/components/DeviceIllustration.tsx

@@ -1,49 +1,38 @@
 import React from "react";
-import styled, { DefaultTheme, StyledComponent, ThemeProps } from "styled-components";
+import styled, { DefaultTheme, StyledComponent } from "styled-components";
 import stax from "~/renderer/images/stax.svg";
-import staxDark from "~/renderer/images/staxDark.svg";
 import europa from "~/renderer/images/europa.svg";
-import europaDark from "~/renderer/images/europaDark.svg";
-import nanoX from "~/renderer/images/nanoX.v3.svg";
-import nanoS from "~/renderer/images/nanoS.v3.svg";
-import nanoS2 from "~/renderer/images/nanoS2.v3.svg";
-import nanoXDark from "~/renderer/images/nanoXDark.v3.svg";
-import nanoSDark from "~/renderer/images/nanoSDark.v3.svg";
-import nanoS2Dark from "~/renderer/images/nanoS2Dark.v3.svg";
+import nanoX from "~/renderer/images/nanoX.svg";
+import nanoS from "~/renderer/images/nanoS.svg";
+import nanoSP from "~/renderer/images/nanoSP.svg";
 import { registerAssets } from "~/renderer/components/Onboarding/preloadAssets";
 import { DeviceModelId } from "@ledgerhq/devices";
 
-registerAssets([nanoX, nanoS, nanoS2, nanoXDark, nanoSDark, nanoS2Dark, stax, staxDark]);
-
-const makeAssetSelector =
-  (lightAsset: string, darkAsset: string) => (p: ThemeProps<DefaultTheme>) =>
-    p.theme.colors.palette.type === "light" ? lightAsset : darkAsset;
+registerAssets([nanoX, nanoS, nanoSP, stax, europa]);
 
 const NanoS = styled.div`
-  // TODO: rendering issue in the SVG in the "hole"
   // prettier-ignore
-  background: url('${p => makeAssetSelector(nanoS, nanoSDark)(p)}') no-repeat center;
+  background: url('${nanoS}') no-repeat center;
 `;
 
 const NanoSP = styled.div`
-  // TODO: rendering issue in the SVG in the "hole"
   // prettier-ignore
-  background: url('${p => makeAssetSelector(nanoS2, nanoS2Dark)(p)}') no-repeat center;
+  background: url('${nanoSP}') no-repeat center;
 `;
 
 const NanoX = styled.div`
   // prettier-ignore
-  background: url('${p => makeAssetSelector(nanoX, nanoXDark)(p)}') no-repeat center;
+  background: url('${nanoX}') no-repeat center;
 `;
 
 const Stax = styled.div`
   // prettier-ignore
-  background: url('${p => makeAssetSelector(stax, staxDark)(p)}') no-repeat center;
+  background: url('${stax}') no-repeat center;
 `;
 
 const Europa = styled.div`
   // prettier-ignore
-  background: url('${p => makeAssetSelector(europa, europaDark)(p)}') no-repeat center;
+  background: url('${europa}') no-repeat center;
 `;
 
 type Illustration = {
@@ -55,33 +44,33 @@ type Illustration = {
 const illustrations: { [key in DeviceModelId]: Illustration } = {
   nanoS: {
     Illustration: NanoS,
-    width: 49.2,
-    height: 250.1,
+    width: 200,
+    height: 200,
   },
   nanoSP: {
     Illustration: NanoSP,
-    width: 49.93,
-    height: 250.33,
+    width: 200,
+    height: 200,
   },
   nanoX: {
     Illustration: NanoX,
-    width: 53.83,
-    height: 250.87,
+    width: 200,
+    height: 200,
   },
   stax: {
     Illustration: Stax,
-    width: 240,
-    height: 240,
+    width: 200,
+    height: 200,
   },
   europa: {
     Illustration: Europa,
-    width: 240,
-    height: 240,
+    width: 200,
+    height: 200,
   },
   blue: {
     Illustration: NanoS,
-    width: 49.2,
-    height: 250.1,
+    width: 200,
+    height: 200,
   },
 };
 

apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/EuropaBannerIllustration.tsx

@@ -1,3 +1,13 @@
-import StaxBannerIllustration from "./StaxBannerIllustration";
+import Illustration from "~/renderer/components/Illustration";
+import bannerEuropa from "./assets/bannerEuropa.png";
+import React from "react";
+import styled from "styled-components";
 
-export default StaxBannerIllustration;
+const StyledIllustration = styled(Illustration)`
+  border-radius: 15px;
+`;
+
+const EuropaBannerIllustration = () => (
+  <StyledIllustration lightSource={bannerEuropa} darkSource={bannerEuropa} size={30} />
+);
+export default EuropaBannerIllustration;

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

@@ -1,2 +1,44 @@
-import StaxCompletionView from "./StaxCompletionView";
-export default StaxCompletionView;
+import Animation from "~/renderer/animations";
+import { getDeviceAnimation } from "~/renderer/components/DeviceAction/animations";
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { Flex } from "@ledgerhq/react-ui";
+import { Device } from "@ledgerhq/types-devices";
+import Europa from "./assets/europa-success.png";
+
+type Props = {
+  device: Device;
+};
+
+const Container = styled(Flex)`
+  position: relative;
+`;
+
+const StyledAnimation = styled(Animation)`
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+const EuropaCompletionView: React.FC<Props> = ({ device }) => {
+  const { colors } = useTheme();
+  const palette = colors.palette.type;
+
+  return (
+    <Container height="100vh" width="100vw">
+      <StyledAnimation
+        animation={getDeviceAnimation(device.modelId, palette, "onboardingSuccess")}
+        height="100vh"
+        width="100vw"
+      />
+      <Flex alignItems="center" justifyContent="center" style={{ zIndex: 1 }} flex={1}>
+        <img src={Europa} alt="Europa" />
+      </Flex>
+    </Container>
+  );
+};
+
+export default EuropaCompletionView;

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

@@ -18,19 +18,6 @@ const staxTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   leftPaddingColor: "#272727",
 };
 
-const europaTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
-  // NB: measures in px taken directly on the .png
-  frameHeight: 888, // TODO: TBD
-  frameWidth: 564, // TODO: TBD
-  innerHeight: 840, // TODO: TBD
-  innerWidth: (840 * 400) / 670, // TODO: TBD
-  innerRight: 30, // TODO: TBD
-  innerTop: 24, // TODO: TBD
-  borderRightRadius: 24, // TODO: TBD
-  resizeMode: "cover", // TODO: TBD
-  leftPaddingColor: "#272727", // TBD
-};
-
 const staxPreviewConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   // NB: measures in px taken directly on the .png
   frameHeight: 1283,
@@ -43,15 +30,30 @@ const staxPreviewConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
   resizeMode: "cover",
 };
 
+const EUROPA_FRAME_WIDTH = 572;
+const EUROPA_FRAME_HEIGHT = 784;
+
+const europaTransferConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
+  frameWidth: EUROPA_FRAME_WIDTH,
+  frameHeight: EUROPA_FRAME_HEIGHT,
+  innerWidth: 448,
+  innerHeight: 575,
+  innerRight: 65,
+  innerTop: 60,
+  borderRightRadius: 4,
+  borderLeftRadius: 4,
+  resizeMode: "cover",
+};
+
 const europaPreviewConfig: Omit<FramedPictureConfig, "backgroundSource"> = {
-  // NB: measures in px taken directly on the .png
-  frameHeight: 1283, // TODO: TBD
-  frameWidth: 810, // TODO: TBD
-  innerHeight: 1211, // TODO: TBD
-  innerWidth: 1211 * (400 / 670), // TODO: TBD
-  innerRight: 35, // TODO: TBD
-  innerTop: 38, // TODO: TBD
-  borderRightRadius: 57, // TODO: TBD
+  frameWidth: EUROPA_FRAME_WIDTH,
+  frameHeight: EUROPA_FRAME_HEIGHT,
+  innerWidth: 448,
+  innerHeight: 575,
+  innerRight: 65,
+  innerTop: 60,
+  borderRightRadius: 4,
+  borderLeftRadius: 4,
   resizeMode: "cover",
 };