🍱 (lld): europa postonboardingbanner icon & onboarding restore apps

LedgerHQ · Jul 22, 2024 · c728657 · c728657
1 parent f9730da
commit c728657
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 123 deletions.
diff --git a/...ger-live-desktop/src/renderer/components/OnboardingAppInstall/RestoreAppsIllustration.tsx b/...ger-live-desktop/src/renderer/components/OnboardingAppInstall/RestoreAppsIllustration.tsx
@@ -1,114 +1,61 @@
 import React, { SVGProps } from "react";
 
 const RestoreAppsIllustration = (props: SVGProps<SVGSVGElement>) => (
-  <svg width={185} height={126} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <g clipPath="url(#a)">
-      <path
-        d="M179.853 38.459v14.235a1.205 1.205 0 0 1-.777 1.109c-.15.058-.309.085-.469.081V37.271a1.255 1.255 0 0 1 1.148.729c.063.145.097.3.098.459Z"
-        fill="url(#b)"
-      />
-      <path
-        d="M173.299 117.234h-55.284L118 19.652h55.299a5.318 5.318 0 0 1 4.919 3.278c.268.645.405 1.337.405 2.036v86.947a5.314 5.314 0 0 1-5.324 5.321Z"
-        fill="url(#c)"
-      />
+  <svg
+    width="168"
+    height="132"
+    viewBox="0 0 168 132"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <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="M118.011 114.742v-92.6h55.628a2.825 2.825 0 0 1 2.825 2.822v86.95a2.825 2.825 0 0 1-2.825 2.826l-55.628.002Z"
-        fill="url(#d)"
+        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"
       />
-    </g>
-    <rect x={2.58} y={50.606} width={74.577} height={21.606} rx={2.091} fill="#3D3D3D" />
-    <g filter="url(#e)">
       <path
-        d="M15.656 94.078a1.729 1.729 0 0 1 .15-2.44l43.726-38.635c4.472-3.95 11.299-3.529 15.25.943 3.95 4.47 3.528 11.298-.943 15.248L30.113 107.83a1.729 1.729 0 0 1-2.44-.151l-12.017-13.6Z"
-        fill="silver"
+        d="M89.0996 18.72V14H93.8063"
+        stroke="#BBB0FF"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </g>
-    <circle cx={66.354} cy={61.408} r={6.273} fill="silver" stroke="url(#f)" strokeWidth={0.697} />
     <path
-      d="M143.096 62.408a.5.5 0 0 1-.706 0l-3.176-3.176a.499.499 0 1 1 .706-.706l2.823 2.824 2.824-2.824a.498.498 0 1 1 .705.706l-3.176 3.176Zm-.852-.353c0-.936-.026-1.867-.077-2.79l.997-.056c.052.942.078 1.891.078 2.846h-.998Zm-.695-8.337a49.715 49.715 0 0 0-1.237-5.44l.959-.275c.521 1.81.943 3.662 1.262 5.55l-.984.165Zm-3.079-10.704a49.607 49.607 0 0 0-2.424-5.024l.873-.484a50.516 50.516 0 0 1 2.473 5.126l-.922.382Zm-5.397-9.745a49.898 49.898 0 0 0-3.481-4.36l.744-.666a50.93 50.93 0 0 1 3.551 4.447l-.814.579Zm-7.426-8.305a49.994 49.994 0 0 0-4.36-3.481l.579-.814a50.942 50.942 0 0 1 4.446 3.55l-.665.745Zm-9.081-6.454a49.57 49.57 0 0 0-5.025-2.424l.383-.922a50.613 50.613 0 0 1 5.126 2.473l-.484.873Zm-10.289-4.266a49.413 49.413 0 0 0-5.44-1.237l.166-.984a50.39 50.39 0 0 1 5.55 1.262l-.276.959Zm-10.986-1.855a50.532 50.532 0 0 0-2.79-.077v-.999c.954 0 1.903.027 2.846.079l-.056.997Zm-2.79-.077c-.937 0-1.868.026-2.792.077l-.055-.997a51.55 51.55 0 0 1 2.846-.079v.999Zm-8.338.695c-1.85.312-3.665.726-5.44 1.237l-.275-.96c1.81-.52 3.662-.943 5.55-1.261l.165.984ZM73.46 16.086a49.51 49.51 0 0 0-5.024 2.424l-.484-.873a50.536 50.536 0 0 1 5.126-2.473l.382.922Zm-9.746 5.397a49.989 49.989 0 0 0-4.36 3.48l-.665-.743a50.982 50.982 0 0 1 4.447-3.551l.578.814Zm-8.305 7.426a49.974 49.974 0 0 0-3.48 4.36l-.814-.579a50.963 50.963 0 0 1 3.55-4.447l.744.666Zm-6.453 9.08a49.521 49.521 0 0 0-2.424 5.025l-.922-.382a50.515 50.515 0 0 1 2.473-5.126l.873.484Zm-4.266 10.29a49.414 49.414 0 0 0-1.237 5.44l-.984-.167a50.419 50.419 0 0 1 1.261-5.55l.96.277Zm-1.856 10.985a50.63 50.63 0 0 0-.076 2.791h-.999c0-.955.027-1.904.079-2.846l.996.055Zm100.616 3.497a.998.998 0 0 1-1.412 0l-6.352-6.352a.998.998 0 1 1 1.411-1.412l5.647 5.647 5.647-5.647a.999.999 0 0 1 1.412 1.412l-6.353 6.352Zm-1.704-.706c0-.927-.026-1.849-.076-2.763l1.993-.11c.053.95.079 1.91.079 2.873h-1.996Zm-.689-8.254a48.973 48.973 0 0 0-1.224-5.384l1.919-.552a50.991 50.991 0 0 1 1.274 5.604l-1.969.332Zm-3.047-10.596a49.161 49.161 0 0 0-2.4-4.974l1.747-.967a51.176 51.176 0 0 1 2.497 5.177l-1.844.764Zm-5.343-9.647a49.31 49.31 0 0 0-3.446-4.317l1.488-1.33a51.548 51.548 0 0 1 3.586 4.49l-1.628 1.157Zm-7.352-8.222a49.59 49.59 0 0 0-4.316-3.447l1.157-1.627a51.497 51.497 0 0 1 4.49 3.586l-1.331 1.488Zm-8.99-6.39a48.97 48.97 0 0 0-4.974-2.399l.765-1.844a50.99 50.99 0 0 1 5.176 2.497l-.967 1.747Zm-10.185-4.222a48.902 48.902 0 0 0-5.385-1.225l.332-1.968a50.93 50.93 0 0 1 5.605 1.274l-.552 1.919Zm-10.875-1.837a50.024 50.024 0 0 0-2.764-.076v-1.997c.965 0 1.923.027 2.874.08l-.11 1.993ZM92.5 12.81c-.927 0-1.849.025-2.763.076l-.11-1.993c.95-.053 1.909-.08 2.873-.08v1.997Zm-8.254.688a48.907 48.907 0 0 0-5.384 1.225l-.552-1.92a50.944 50.944 0 0 1 5.604-1.273l.332 1.968ZM73.65 16.547a49.04 49.04 0 0 0-4.974 2.4L67.71 17.2a51.016 51.016 0 0 1 5.176-2.497l.765 1.844Zm-9.648 5.342a49.502 49.502 0 0 0-4.316 3.447l-1.33-1.488a51.47 51.47 0 0 1 4.49-3.586l1.157 1.627Zm-8.221 7.352a49.483 49.483 0 0 0-3.447 4.317L50.707 32.4a51.485 51.485 0 0 1 3.585-4.49l1.489 1.33Zm-6.39 8.99a49.051 49.051 0 0 0-2.4 4.974l-1.843-.764a51.007 51.007 0 0 1 2.497-5.177l1.746.967Zm-4.223 10.186a48.928 48.928 0 0 0-1.224 5.384l-1.968-.332a50.895 50.895 0 0 1 1.274-5.604l1.918.552Zm-1.836 10.875a50.03 50.03 0 0 0-.076 2.763h-1.997c0-.964.027-1.922.08-2.873l1.993.11Z"
-      fill="#BBB0FF"
+      d="M85 56V60C85 63.3137 82.3137 66 79 66H31.5C28.1863 66 25.5 68.6863 25.5 72V75.5"
+      stroke="#7F7F7F"
     />
-    <circle cx={92.5} cy={13.642} r={10.315} fill="#8B80DB" />
     <path
-      d="m94.725 13.736 1.928-1.938-1.928-1.928-.521.533.468.468c.17.17.362.352.554.522h-6.452v.81h6.473c-.202.18-.394.35-.575.532l-.468.479.522.521Zm-6.377 1.66 1.927 1.928.522-.533-.469-.468c-.17-.17-.362-.351-.554-.522h6.453v-.81h-6.474c.202-.18.394-.35.575-.531l.469-.48-.522-.521-1.927 1.938Z"
-      fill="#000"
+      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>
-      <linearGradient
-        id="b"
-        x1={179.232}
-        y1={37.084}
-        x2={179.232}
-        y2={53.758}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#8C8D8D" />
-        <stop offset={0.27} stopColor="#7F7F80" />
-        <stop offset={0.62} stopColor="#747475" />
-        <stop offset={1} stopColor="#707071" />
-      </linearGradient>
-      <linearGradient
-        id="c"
-        x1={118}
-        y1={68.442}
-        x2={178.613}
-        y2={68.442}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#626060" />
-        <stop offset={0.18} stopColor="#888887" />
-        <stop offset={0.4} stopColor="#5E5D5E" />
-        <stop offset={0.59} stopColor="#616161" />
-        <stop offset={0.76} stopColor="#6C6B6C" />
-        <stop offset={0.86} stopColor="#767676" />
-        <stop offset={0.99} stopColor="#8D8D8D" />
-      </linearGradient>
-      <linearGradient
-        id="d"
-        x1={175.805}
-        y1={68.442}
-        x2={118.719}
-        y2={68.442}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset={0.92} stopColor="#19191A" />
-        <stop offset={1} stopColor="#353536" />
-      </linearGradient>
-      <linearGradient
-        id="f"
-        x1={71.233}
-        y1={57.227}
-        x2={61.127}
-        y2={65.242}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#9E9E9E" />
-        <stop offset={1} stopColor="#B4B4B4" />
-      </linearGradient>
-      <clipPath id="a">
-        <path fill="#fff" transform="translate(118 19.65)" d="M0 0h61.85v97.584H0z" />
+      <clipPath id="clip0_15098_6375">
+        <rect width="32" height="32" fill="white" transform="translate(68 8)" />
       </clipPath>
-      <filter
-        id="e"
-        x={15.222}
-        y={50.295}
-        width={62.963}
-        height={60.058}
-        filterUnits="userSpaceOnUse"
-        colorInterpolationFilters="sRGB"
-      >
-        <feFlood floodOpacity={0} result="BackgroundImageFix" />
-        <feColorMatrix
-          in="SourceAlpha"
-          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-          result="hardAlpha"
-        />
-        <feOffset dx={0.697} dy={2.091} />
-        <feComposite in2="hardAlpha" operator="out" />
-        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_624_60340" />
-        <feBlend in="SourceGraphic" in2="effect1_dropShadow_624_60340" result="shape" />
-      </filter>
     </defs>
   </svg>
 );

diff --git a/...edger-live-desktop/src/renderer/components/PostOnboardingHub/EuropaBannerIllustration.tsx b/...edger-live-desktop/src/renderer/components/PostOnboardingHub/EuropaBannerIllustration.tsx
@@ -0,0 +1,3 @@
+import StaxBannerIllustration from "./StaxBannerIllustration";
+
+export default StaxBannerIllustration;
diff --git a/...ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingHubBanner.tsx b/...ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingHubBanner.tsx
@@ -2,33 +2,25 @@ import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
-import { Flex, Theme } from "@ledgerhq/react-ui";
 import { hidePostOnboardingWalletEntryPoint } from "@ledgerhq/live-common/postOnboarding/actions";
 import { getDeviceModel } from "@ledgerhq/devices";
 import { DeviceModelId } from "@ledgerhq/types-devices";
 import { usePostOnboardingHubState } from "@ledgerhq/live-common/postOnboarding/hooks/index";
 import { useNavigateToPostOnboardingHubCallback } from "./logic/useNavigateToPostOnboardingHubCallback";
-import Illustration from "~/renderer/components/Illustration";
-import bannerStaxLight from "./assets/bannerStaxLight.svg";
-import bannerStaxDark from "./assets/bannerStaxDark.svg";
 import { track } from "~/renderer/analytics/segment";
 import { Card } from "../Box";
 import ActionCard from "../ContentCards/ActionCard";
+import StaxBannerIllustration from "./StaxBannerIllustration";
+import EuropaBannerIllustration from "./EuropaBannerIllustration";
 
 const Wrapper = styled(Card)`
   background-color: ${p => p.theme.colors.opacityPurple.c10};
   margin: 20px 0px;
 `;
 
-const illustrations: { [key in DeviceModelId]: Record<Theme["theme"], unknown> | undefined } = {
-  stax: {
-    light: bannerStaxLight,
-    dark: bannerStaxDark,
-  },
-  europa: {
-    light: bannerStaxLight,
-    dark: bannerStaxDark,
-  },
+const illustrations = {
+  stax: <StaxBannerIllustration />,
+  europa: <EuropaBannerIllustration />,
   nanoS: undefined,
   nanoSP: undefined,
   nanoX: undefined,
@@ -54,19 +46,7 @@ const PostOnboardingHubBanner = () => {
   return (
     <Wrapper>
       <ActionCard
-        leftContent={
-          deviceModelId && illustrations[deviceModelId] ? (
-            <Flex
-              alignItems="center"
-              justifyContent="center"
-              bg="neutral.c100"
-              borderRadius="100%"
-              p={1}
-            >
-              <Illustration lightSource={bannerStaxLight} darkSource={bannerStaxDark} size={30} />
-            </Flex>
-          ) : null
-        }
+        leftContent={deviceModelId ? illustrations[deviceModelId] : undefined}
         title={t("postOnboarding.postOnboardingBanner.title", {
           productName: getDeviceModel(deviceModelId ?? DeviceModelId.stax).productName,
         })}

diff --git a/.../ledger-live-desktop/src/renderer/components/PostOnboardingHub/StaxBannerIllustration.tsx b/.../ledger-live-desktop/src/renderer/components/PostOnboardingHub/StaxBannerIllustration.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import Illustration from "~/renderer/components/Illustration";
+import { Flex } from "@ledgerhq/react-ui";
+
+import bannerStaxLight from "./assets/bannerStaxLight.svg";
+import bannerStaxDark from "./assets/bannerStaxDark.svg";
+
+const StaxBannerIllustration = () => (
+  <Flex alignItems="center" justifyContent="center" bg="neutral.c100" borderRadius="100%" p={1}>
+    <Illustration lightSource={bannerStaxLight} darkSource={bannerStaxDark} size={30} />
+  </Flex>
+);
+
+export default StaxBannerIllustration;