Merge pull request #4214 from LedgerHQ/feat/LLMStaxFinalPolishes

feat(LLM/UILib): LLM Stax final polishes
LedgerHQ · Aug 8, 2023 · cbb8a42 · cbb8a42 · vercel · Aug 8, 2023
2 parents c48fd44 + 5bbcea1
commit cbb8a42
Show file tree

Hide file tree

Showing 32 changed files with 1,405 additions and 524 deletions.
diff --git a/.changeset/cool-months-carry.md b/.changeset/cool-months-carry.md
@@ -0,0 +1,7 @@
+---
+"@ledgerhq/types-live": patch
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+Pixel polishing for stax (LLM) : Error states, My Ledger, CLS, Post Onboarding, Device Selection
diff --git a/.changeset/modern-spiders-wait.md b/.changeset/modern-spiders-wait.md
@@ -0,0 +1,6 @@
+---
+"@ledgerhq/native-ui": patch
+"@ledgerhq/icons-ui": patch
+---
+
+Changes on the new icons to allow for correct rendering in Native environments + types changes in NativeUI
diff --git a/...ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingActionRow.tsx b/...ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingActionRow.tsx
@@ -43,7 +43,7 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
           })}
     >
       <Flex flexDirection="row" alignItems="center" flexShrink={1}>
-        <Icon size={24} color={completed ? "neutral.c70" : "primary.c80"} />
+        <Icon size="M" color={completed ? "neutral.c70" : "primary.c80"} />
         <Flex ml={6} flexDirection="column" justifyContent="center" flex={1}>
           <Text
             variant="largeLineHeight"

diff --git a/apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/logic/index.tsx b/apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/logic/index.tsx
@@ -1,13 +1,13 @@
 import { DeviceModelId, getDeviceModel } from "@ledgerhq/devices";
 import { PostOnboardingAction, PostOnboardingActionId } from "@ledgerhq/types-live";
-import { IconsLegacy } from "@ledgerhq/react-ui";
+import { Icons } from "@ledgerhq/react-ui";
 import { setDrawer } from "~/renderer/drawers/Provider";
 import PostOnboardingMockAction from "~/renderer/components/PostOnboardingHub/PostOnboardingMockAction";
 import CustomImage from "~/renderer/screens/customImage";
 
 const claimMock: PostOnboardingAction = {
   id: PostOnboardingActionId.claimMock,
-  Icon: IconsLegacy.GiftCardMedium,
+  Icon: Icons.Gift,
   title: "Claim my NFT",
   titleCompleted: "Claim my NFT",
   description: "A special NFT for you.",
@@ -18,7 +18,7 @@ const claimMock: PostOnboardingAction = {
 
 const personalizeMock: PostOnboardingAction = {
   id: PostOnboardingActionId.personalizeMock,
-  Icon: IconsLegacy.PhotographMedium,
+  Icon: Icons.PictureImage,
   featureFlagId: "customImage",
   title: `Personalize my ${getDeviceModel(DeviceModelId.stax).productName}`,
   titleCompleted: `Personalize my ${getDeviceModel(DeviceModelId.stax).productName}`,
@@ -30,7 +30,7 @@ const personalizeMock: PostOnboardingAction = {
 
 const migrateAssetsMock: PostOnboardingAction = {
   id: PostOnboardingActionId.migrateAssetsMock,
-  Icon: IconsLegacy.TransferMedium,
+  Icon: Icons.ArrowDown,
   title: "Transfer assets to my Ledger",
   titleCompleted: "Transfer assets to my Ledger",
   description: "Easily secure assets from coinbase or another exchange.",
@@ -41,7 +41,7 @@ const migrateAssetsMock: PostOnboardingAction = {
 
 const customImage: PostOnboardingAction = {
   id: PostOnboardingActionId.customImage,
-  Icon: IconsLegacy.PhotographMedium,
+  Icon: Icons.PictureImage,
   featureFlagId: "customImage",
   title: "customImage.postOnboarding.title",
   titleCompleted: "customImage.postOnboarding.title",

diff --git a/apps/ledger-live-mobile/src/components/BleDevicePairingFlow/BleDevicePairing.tsx b/apps/ledger-live-mobile/src/components/BleDevicePairingFlow/BleDevicePairing.tsx
@@ -5,7 +5,15 @@ import { useBleDevicePairing } from "@ledgerhq/live-common/ble/hooks/useBleDevic
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { Trans, useTranslation } from "react-i18next";
 import { getDeviceModel } from "@ledgerhq/devices";
-import { Flex, InfiniteLoader, Text, Button, IconsLegacy, BoxedIcon } from "@ledgerhq/native-ui";
+import {
+  Flex,
+  InfiniteLoader,
+  Text,
+  Button,
+  IconsLegacy,
+  Icons,
+  BoxedIcon,
+} from "@ledgerhq/native-ui";
 
 import { LockedDeviceError, PeerRemovedPairing } from "@ledgerhq/errors";
 import { getDeviceAnimation } from "../../helpers/getDeviceAnimation";
@@ -59,18 +67,18 @@ const BleDevicePairing = ({ deviceToPair, onPaired, onRetry }: BleDevicePairingP
       <Flex flex={1} alignItems="center">
         <TrackScreen category="BT pairing successful" />
         <Flex width="100%" py={16} alignItems="center">
-          <Flex height={100} justifyContent="center">
+          <Flex height={100} justifyContent="center" mb={7}>
             <BoxedIcon
               Icon={IconsLegacy.CheckTickMedium}
               backgroundColor={colors.opacityDefault.c05}
               size={64}
               variant="circle"
-              borderColor="none"
+              borderColor={colors.opacityDefault.c05}
               iconSize={32}
               iconColor={colors.success.c50}
             />
           </Flex>
-          <Text mb={4} mt={16} textAlign="center" variant="h4" fontWeight="semiBold">
+          <Text mb={6} mt={16} textAlign="center" variant="h4" fontWeight="semiBold">
             {t("blePairingFlow.pairing.success.title", {
               deviceName,
             })}
@@ -141,13 +149,13 @@ const BleDevicePairing = ({ deviceToPair, onPaired, onRetry }: BleDevicePairingP
         <Flex flex={1} alignItems="center" justifyContent="center">
           <Flex height={100} justifyContent="center">
             <BoxedIcon
-              Icon={IconsLegacy.CloseMedium}
-              backgroundColor={colors.opacityDefault.c05}
+              Icon={Icons.InformationFill}
+              backgroundColor={"opacityDefault.c05"}
               size={64}
               variant="circle"
-              borderColor="none"
-              iconSize={32}
-              iconColor={colors.error.c60}
+              borderColor="transparent"
+              iconSize={"L"}
+              iconColor="primary.c80"
             />
           </Flex>
           <Text mt={4} mb={2} textAlign="center" variant="h4" fontWeight="semiBold">
@@ -173,7 +181,7 @@ const BleDevicePairing = ({ deviceToPair, onPaired, onRetry }: BleDevicePairingP
               backgroundColor={colors.opacityDefault.c05}
               size={64}
               variant="circle"
-              borderColor="none"
+              borderColor={colors.opacityDefault.c05}
               iconSize={32}
               iconColor={colors.success.c50}
             />

diff --git a/apps/ledger-live-mobile/src/components/BleDevicePairingFlow/BleDevicesScanning.tsx b/apps/ledger-live-mobile/src/components/BleDevicePairingFlow/BleDevicesScanning.tsx
@@ -151,7 +151,7 @@ const BleDevicesScanning = ({
           <Flex height={100} alignItems="center" justifyContent="center" mb={24}>
             <Animation style={{ width: 250 }} source={lottie} />
           </Flex>
-          <Text mb={1} textAlign="center" variant="h4" fontWeight="semiBold" fontSize={24}>
+          <Text mb={3} textAlign="center" variant="h4" fontWeight="semiBold" fontSize={24}>
             {productName
               ? t("blePairingFlow.scanning.withProductName.title", {
                   productName,

diff --git a/apps/ledger-live-mobile/src/components/DeviceAction/index.tsx b/apps/ledger-live-mobile/src/components/DeviceAction/index.tsx
@@ -270,8 +270,10 @@ export function DeviceActionDefaultRendering<R, H extends Status, P>({
   if (installingLanguage) {
     return (
       <Flex>
-        <DeviceActionProgress progress={progress} />
-        <Flex mt={5}>
+        <Flex my={7}>
+          <DeviceActionProgress progress={progress} />
+        </Flex>
+        <Flex mb={5}>
           <Text variant="h4">{t("deviceLocalization.installingLanguage")}</Text>
         </Flex>
         <ModalLock />

diff --git a/apps/ledger-live-mobile/src/components/DeviceAction/rendering.tsx b/apps/ledger-live-mobile/src/components/DeviceAction/rendering.tsx
@@ -10,8 +10,17 @@ import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { AppRequest } from "@ledgerhq/live-common/hw/actions/app";
 import firmwareUpdateRepair from "@ledgerhq/live-common/hw/firmwareUpdate-repair";
 import { getProviderName, getNoticeType } from "@ledgerhq/live-common/exchange/swap/utils/index";
-import { InfiniteLoader, Text, Flex, Tag, IconsLegacy, BoxedIcon, Log } from "@ledgerhq/native-ui";
-import { LockAltMedium, DownloadMedium } from "@ledgerhq/native-ui/assets/icons";
+import {
+  InfiniteLoader,
+  Text,
+  Flex,
+  Tag,
+  IconsLegacy,
+  BoxedIcon,
+  Log,
+  Icons,
+} from "@ledgerhq/native-ui";
+import { DownloadMedium } from "@ledgerhq/native-ui/assets/icons";
 import BigNumber from "bignumber.js";
 import { ExchangeRate, Exchange } from "@ledgerhq/live-common/exchange/swap/types";
 import {
@@ -420,7 +429,7 @@ export function renderAllowLanguageInstallation({
             deviceName,
           })}
       </Text>
-      <AnimationContainer>
+      <AnimationContainer my={8}>
         <Animation
           source={getDeviceAnimation({ device, key, theme })}
           style={animationStyles(device.modelId)}
@@ -568,8 +577,16 @@ export function renderLockedDeviceError({
   return (
     <Wrapper>
       <Flex flexDirection="column" alignItems="center" alignSelf="stretch">
-        <Flex mb={5}>
-          <BoxedIcon size={64} Icon={LockAltMedium} iconSize={24} iconColor="neutral.c100" />
+        <Flex mb={7}>
+          <BoxedIcon
+            Icon={Icons.InformationFill}
+            backgroundColor={"opacityDefault.c05"}
+            size={64}
+            variant="circle"
+            borderColor="transparent"
+            iconSize={"L"}
+            iconColor="primary.c80"
+          />
         </Flex>
 
         <Text variant="h4" fontWeight="semiBold" textAlign="center" numberOfLines={3} mb={6}>

diff --git a/apps/ledger-live-mobile/src/components/DeviceActionProgress.tsx b/apps/ledger-live-mobile/src/components/DeviceActionProgress.tsx
@@ -11,7 +11,7 @@ function DeviceActionProgress({ progress }: Props) {
       progress={progress}
       infinite={!progress || progress === 1}
       radius={32}
-      strokeWidth={8}
+      strokeWidth={6}
     >
       <Text color="primary.c80" variant="paragraph" fontWeight="semiBold">
         {progress && progress < 1 ? `${Math.round(progress * 100)}%` : ""}

diff --git a/apps/ledger-live-mobile/src/components/DeviceLanguageInstalled.tsx b/apps/ledger-live-mobile/src/components/DeviceLanguageInstalled.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { Language, languageIds } from "@ledgerhq/types-live";
 import { useTranslation } from "react-i18next";
-import { Flex, Text, Button, IconsLegacy } from "@ledgerhq/native-ui";
+import { Flex, Text, Button, Icons, BoxedIcon } from "@ledgerhq/native-ui";
 import { useDispatch } from "react-redux";
 import { setLastSeenDeviceLanguageId } from "../actions/settings";
 
@@ -25,11 +25,19 @@ const DeviceLanguageInstalled: React.FC<{
   const { t } = useTranslation();
 
   return (
-    <Flex alignItems="center">
-      <Flex backgroundColor="neutral.c30" p={4} borderRadius="9999px">
-        <IconsLegacy.CircledCheckSolidMedium color="success.c50" size={32} />
+    <Flex alignItems="center" flex={1}>
+      <Flex pt={10}>
+        <BoxedIcon
+          Icon={Icons.Check}
+          backgroundColor={"opacityDefault.c05"}
+          size={64}
+          variant="circle"
+          borderColor="transparent"
+          iconSize={"L"}
+          iconColor="success.c50"
+        />
       </Flex>
-      <Text variant="h4" textAlign="center" my={7} fontWeight="semiBold">
+      <Text variant="h4" textAlign="center" mt={7} mb={6} fontWeight="semiBold">
         {t("deviceLocalization.languageInstalled", {
           language: t(`deviceLocalization.languages.${installedLanguage}`),
         })}

diff --git a/apps/ledger-live-mobile/src/components/PostOnboarding/PostOnboardingActionRow.tsx b/apps/ledger-live-mobile/src/components/PostOnboarding/PostOnboardingActionRow.tsx
@@ -46,8 +46,8 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
         justifyContent="space-between"
         opacity={disabled ? 0.5 : 1}
       >
-        <Flex flexDirection="row" alignItems="center" flexShrink={1}>
-          <Icon size={24} color={completed || disabled ? "neutral.c70" : "primary.c80"} />
+        <Flex flexDirection="row" alignItems="flex-start" flexShrink={1}>
+          <Icon size={"M"} color={completed || disabled ? "neutral.c70" : "primary.c80"} />
           <Flex ml={6} flexDirection="column" justifyContent="center" flex={1}>
             <Flex flexDirection="row" alignItems="center">
               <Text

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/PostOnboardingNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/PostOnboardingNavigator.tsx
@@ -10,6 +10,7 @@ import PostOnboardingHub from "../../screens/PostOnboarding/PostOnboardingHub";
 import PostOnboardingMockActionScreen from "../../screens/PostOnboarding/PostOnboardingMockActionScreen";
 import { PostOnboardingNavigatorParamList } from "./types/PostOnboardingNavigator";
 import { NavigationHeaderBackButton } from "../NavigationHeaderBackButton";
+import { NavigationHeaderCloseButton } from "../NavigationHeaderCloseButton";
 
 const Stack = createStackNavigator<PostOnboardingNavigatorParamList>();
 
@@ -29,9 +30,9 @@ const PostOnboardingNavigator = () => {
         component={PostOnboardingHub}
         options={{
           headerShown: true,
-          headerLeft: () => <NavigationHeaderBackButton />,
+          headerLeft: () => null,
           headerTitle: () => null,
-          headerRight: () => null,
+          headerRight: () => <NavigationHeaderCloseButton />,
         }}
       />
       <Stack.Screen

diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -6209,7 +6209,7 @@
       "title": "Next up, use your {{productName}} to...",
       "allDoneTitle": "and that’s a wrap!",
       "skip": "I’ll do this later",
-      "done": "You've just secured your future"
+      "viewWallet": "View my wallet"
     },
     "entryPointCard": {
       "title": "What's next for your {{productName}}?",

diff --git a/apps/ledger-live-mobile/src/logic/postOnboarding/actions.ts b/apps/ledger-live-mobile/src/logic/postOnboarding/actions.ts
@@ -1,10 +1,10 @@
 import { PostOnboardingAction, PostOnboardingActionId } from "@ledgerhq/types-live";
-import { IconsLegacy } from "@ledgerhq/native-ui";
+import { Icons } from "@ledgerhq/native-ui";
 import { NavigatorName, ScreenName } from "../../const";
 
 export const customImageAction: PostOnboardingAction = {
   id: PostOnboardingActionId.customImage,
-  Icon: IconsLegacy.PhotographMedium,
+  Icon: Icons.PictureImage,
   featureFlagId: "customImage",
   title: "postOnboarding.actions.customImage.title",
   titleCompleted: "postOnboarding.actions.customImage.titleCompleted",
@@ -25,7 +25,7 @@ export const customImageAction: PostOnboardingAction = {
 export const claimNftAction: PostOnboardingAction = {
   id: PostOnboardingActionId.claimNft,
   disabled: false,
-  Icon: IconsLegacy.GiftCardMedium,
+  Icon: Icons.Gift,
   featureFlagId: "postOnboardingClaimNft",
   title: "postOnboarding.actions.claimNft.title",
   titleCompleted: "postOnboarding.actions.claimNft.titleCompleted",
@@ -45,7 +45,7 @@ export const assetsTransferAction: PostOnboardingAction = {
   id: PostOnboardingActionId.assetsTransfer,
   disabled: true,
   featureFlagId: "postOnboardingAssetsTransfer",
-  Icon: IconsLegacy.LockClosedMedium,
+  Icon: Icons.ArrowDown,
   title: "postOnboarding.actions.assetsTransfer.title",
   titleCompleted: "postOnboarding.actions.assetsTransfer.titleCompleted",
   description: "postOnboarding.actions.assetsTransfer.description",

diff --git a/apps/ledger-live-mobile/src/logic/postOnboarding/mockActions.ts b/apps/ledger-live-mobile/src/logic/postOnboarding/mockActions.ts
@@ -1,11 +1,11 @@
 import { DeviceModelId, getDeviceModel } from "@ledgerhq/devices";
 import { PostOnboardingAction, PostOnboardingActionId } from "@ledgerhq/types-live";
-import { IconsLegacy } from "@ledgerhq/native-ui";
+import { Icons } from "@ledgerhq/native-ui";
 import { NavigatorName, ScreenName } from "../../const";
 
 export const claimMock: PostOnboardingAction = {
   id: PostOnboardingActionId.claimMock,
-  Icon: IconsLegacy.GiftCardMedium,
+  Icon: Icons.Gift,
   title: "Claim my NFT",
   titleCompleted: "NFT Claimed",
   description: "A special NFT for you.",
@@ -25,7 +25,7 @@ export const claimMock: PostOnboardingAction = {
 
 export const personalizeMock: PostOnboardingAction = {
   id: PostOnboardingActionId.personalizeMock,
-  Icon: IconsLegacy.PhotographMedium,
+  Icon: Icons.PictureImage,
   featureFlagId: "customImage",
   title: `Personalize my ${getDeviceModel(DeviceModelId.stax).productName}`,
   titleCompleted: `Device personalized`,
@@ -45,7 +45,7 @@ export const personalizeMock: PostOnboardingAction = {
 
 export const migrateAssetsMock: PostOnboardingAction = {
   id: PostOnboardingActionId.migrateAssetsMock,
-  Icon: IconsLegacy.TransferMedium,
+  Icon: Icons.ArrowDown,
   title: "Transfer assets to my Ledger",
   titleCompleted: "Assets transfered",
   description: "Easily secure assets from coinbase or another exchange.",

diff --git a/apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx b/apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx
@@ -170,6 +170,8 @@ const linkingOptions = (featureFlags: FeatureFlags) => ({
               /**
                * @params ?completed: boolean
                * ie: "ledgerlive://post-onboarding/nft-claimed?completed=true" will open the post onboarding hub and complete the Nft claim action
+               * * @params ?allCompleted: boolean
+               * ie: "ledgerlive://post-onboarding/nft-claimed?allCompleted=true" will open the post onboarding hub with all steps completed
                */
               [ScreenName.PostOnboardingHub]: "post-onboarding/nft-claimed",
             },