feat 💄(llm): update LNX drawer in Reborn

.changeset/orange-chicken-cross.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Update LNX drawer in reborn experience to use Flex instead

apps/ledger-live-mobile/assets/videos/index.ts

@@ -10,4 +10,5 @@ export default {
   infinityPassPart02Light: require("./infinityPassLight/infinityPassPart02.mp4"),
   customLockScreenBannerLight: require("./customLockScreenBanner/customLockScreenBannerLight.mp4"),
   customLockScreenBannerDark: require("./customLockScreenBanner/customLockScreenBannerDark.mp4"),
+  flex: require("./flex.mp4"),
 };

apps/ledger-live-mobile/src/locales/en/common.json

@@ -1303,7 +1303,7 @@
       "desc": "Our products are the only hardware wallets certified for their security by national cyber security agencies."
     },
     "title": "You need a Ledger",
-    "desc": "For your security, Ledger Live only works with a device. You need a device in order to continue.",
+    "desc": "For your security,\n Ledger Live only works with a Ledger.",
     "cta": "Buy your Ledger now",
     "footer": "I already have a Ledger, set it up",
     "bannerTitle": "Top-notch security for your crypto and NFTs",

apps/ledger-live-mobile/src/screens/GetDeviceScreen.tsx

@@ -1,22 +1,20 @@
 import React, { useCallback } from "react";
 import {
   Flex,
-  IconsLegacy,
   Text,
   IconBoxList,
-  Link as TextLink,
   ScrollListContainer,
+  Box,
+  Button,
+  Icons,
 } from "@ledgerhq/native-ui";
 import Video from "react-native-video";
 import styled, { useTheme } from "styled-components/native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
 import { useTranslation } from "react-i18next";
 import { Linking, TouchableOpacity } from "react-native";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { useDispatch, useSelector } from "react-redux";
-
-import Button from "~/components/wrappedUi/Button";
 import { urls } from "~/utils/urls";
 import { useNavigationInterceptor } from "./Onboarding/onboardingContext";
 import { NavigatorName, ScreenName } from "~/const";
@@ -31,9 +29,9 @@ import { BuyDeviceNavigatorParamList } from "~/components/RootNavigator/types/Bu
 import { OnboardingNavigatorParamList } from "~/components/RootNavigator/types/OnboardingNavigator";
 import videoSources from "../../assets/videos";
 import { setOnboardingHasDevice } from "~/actions/settings";
+import GradientContainer from "~/components/GradientContainer";
 
-const sourceDark = videoSources.nanoXDark;
-const sourceLight = videoSources.nanoXLight;
+const videoSource = videoSources.flex;
 
 const hitSlop = {
   bottom: 10,
@@ -42,42 +40,43 @@ const hitSlop = {
   top: 10,
 };
 
-const StyledSafeAreaView = styled(SafeAreaView)`
+const StyledSafeAreaView = styled(Box)`
   flex: 1;
-  background-color: ${p => p.theme.colors.background.main};
+  background-color: ${p => p.theme.colors.background.default};
+  padding-top: ${p => p.theme.space[10]}px;
+`;
+
+const CloseButton = styled(TouchableOpacity)`
+  background-color: ${p => p.theme.colors.neutral.c30};
+  padding: 8px;
+  border-radius: 32px;
 `;
 
 const items = [
   {
     title: "buyDevice.0.title",
     desc: "buyDevice.0.desc",
-    Icon: IconsLegacy.CrownMedium,
+    Icon: Icons.Coins,
   },
   {
     title: "buyDevice.1.title",
     desc: "buyDevice.1.desc",
-    Icon: IconsLegacy.LendMedium,
+    Icon: Icons.GraphAsc,
   },
   {
     title: "buyDevice.2.title",
     desc: "buyDevice.2.desc",
-    Icon: IconsLegacy.ClaimRewardsMedium,
+    Icon: Icons.Globe,
   },
   {
     title: "buyDevice.3.title",
     desc: "buyDevice.3.desc",
-    Icon: IconsLegacy.NanoXAltMedium,
+    Icon: Icons.Flex,
   },
 ];
 
 const videoStyle = {
   height: "100%",
-  width: "100%",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
 };
 
 type NavigationProp = BaseNavigationComposite<
@@ -88,7 +87,7 @@ type NavigationProp = BaseNavigationComposite<
 export default function GetDeviceScreen() {
   const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp>();
-  const { theme, colors } = useTheme();
+  const { colors } = useTheme();
   const { setShowWelcome, setFirstTimeOnboarding } = useNavigationInterceptor();
   const buyDeviceFromLive = useFeature("buyDeviceFromLive");
   const hasCompletedOnboarding = useSelector(hasCompletedOnboardingSelector);
@@ -138,7 +137,7 @@ export default function GetDeviceScreen() {
       // @ts-expect-error This seem very impossible to type because ts is right…
       navigation.navigate(ScreenName.PurchaseDevice);
     } else {
-      Linking.openURL(urls.buyNanoX);
+      Linking.openURL(urls.buyFlex);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buyDeviceFromLive?.enabled]);
@@ -148,99 +147,108 @@ export default function GetDeviceScreen() {
   return (
     <StyledSafeAreaView>
       {readOnlyModeEnabled ? <TrackScreen category="ReadOnly" name="Upsell Nano" /> : null}
+
       <Flex
         flexDirection="row"
         alignItems="center"
-        justifyContent="space-between"
+        justifyContent="flex-end"
         width="100%"
-        background={colors.background.main}
-        zIndex={1}
+        position="absolute"
+        zIndex={10}
         p={6}
+        top={50}
       >
         {hasCompletedOnboarding ? (
-          <Flex width={24} />
-        ) : (
-          <TouchableOpacity onPress={handleBack} hitSlop={hitSlop}>
-            <IconsLegacy.ArrowLeftMedium size="24px" />
-          </TouchableOpacity>
-        )}
-        <Text variant="h3" lineHeight="20px" uppercase>
-          {t("buyDevice.title")}
-        </Text>
-        {hasCompletedOnboarding ? (
-          <TouchableOpacity onPress={handleBack} hitSlop={hitSlop}>
-            <IconsLegacy.CloseMedium size="24px" />
-          </TouchableOpacity>
+          <CloseButton onPress={handleBack} hitSlop={hitSlop}>
+            <Icons.Close size="S" />
+          </CloseButton>
         ) : (
           <Flex width={24} />
         )}
       </Flex>
       <ScrollListContainer>
-        <Flex height={240} my={-50} width="100%" position="relative" overflow="hidden">
+        <Flex
+          height={320}
+          borderTopLeftRadius={32}
+          borderTopRightRadius={32}
+          width="100%"
+          overflow="hidden"
+          opacity={videoMounted ? 0.8 : 0}
+        >
           {videoMounted && (
             <Video
               disableFocus
-              source={theme === "light" ? sourceLight : sourceDark}
+              source={videoSource}
               style={{
                 backgroundColor: colors.background.main,
                 transform: [{ scale: 1.4 }],
                 ...(videoStyle as object),
               }}
               muted
-              resizeMode={"cover"}
+              repeat={true}
             />
           )}
-          <Flex
-            style={{
-              opacity: 0.1,
-              ...(videoStyle as object),
+          <GradientContainer
+            color={colors.background.drawer}
+            startOpacity={0}
+            endOpacity={1}
+            direction="top-to-bottom"
+            containerStyle={{
+              position: "absolute",
+              borderRadius: 0,
+              left: 0,
+              bottom: 0,
+              width: "100%",
+              height: "30%",
             }}
-            bg="background.main"
           />
         </Flex>
-        <Flex p={6} pt={6}>
-          <Flex mt={0} mb={8} justifyContent="center" alignItems="stretch">
-            <Text px={6} textAlign="center" variant="large">
+        <Flex p={6}>
+          <Text variant="h4" textAlign="center" lineHeight="32.4px">
+            {t("buyDevice.title")}
+          </Text>
+          <Flex mt={6} mb={8} justifyContent="center" alignItems="stretch">
+            <Text px={6} textAlign="center" variant="body" color="neutral.c70">
               {t("buyDevice.desc")}
             </Text>
           </Flex>
           <IconBoxList
-            iconVariants="plain"
             iconShapes="circle"
+            itemContainerProps={{ pr: 6 }}
             items={items.map(item => ({
-              ...item,
+              Icon: <item.Icon size="S" />,
               title: t(item.title),
-              description: t(item.desc),
+              description: (
+                <Text variant="paragraphLineHeight" color="neutral.c70">
+                  {t(item.desc)}
+                </Text>
+              ),
             }))}
           />
         </Flex>
       </ScrollListContainer>
-      <Flex borderTopColor="neutral.c40" borderTopWidth={1}>
+      <Flex>
         <Button
           mx={6}
           my={6}
           type="main"
           outline={false}
-          event="button_clicked"
           testID="getDevice-buy-button"
-          eventProperties={{
-            button: "Buy your Ledger now",
-            page: ScreenName.GetDevice,
-          }}
           onPress={buyLedger}
           size="large"
         >
           {t("buyDevice.cta")}
         </Button>
-        <Flex px={6} pt={0} pb={5}>
-          <TextLink
-            type="color"
+        <Flex px={6} pt={0} mb={8}>
+          <Button
+            type="default"
+            border={1}
+            borderColor="neutral.c50"
             onPress={setupDevice}
-            Icon={IconsLegacy.ArrowRightMedium}
-            iconPosition="right"
+            size="large"
           >
             {t("buyDevice.footer")}
-          </TextLink>
+          </Button>
         </Flex>
       </Flex>
     </StyledSafeAreaView>

apps/ledger-live-mobile/src/screens/PurchaseDevice/index.tsx

@@ -16,7 +16,7 @@ import WebViewScreen from "~/components/WebViewScreen";
 import { completeOnboarding, setReadOnlyMode } from "~/actions/settings";
 import { urls } from "~/utils/urls";
 
-const defaultURL = urls.buyNanoX;
+const defaultURL = urls.buyFlex;
 
 const PurchaseDevice = () => {
   const { t } = useTranslation();

apps/ledger-live-mobile/src/utils/urls.tsx

@@ -60,6 +60,8 @@ export const urls = {
   ratingsContact: "https://support.ledger.com/article/4423020306705-zd",
   buyNanoX:
     "https://shop.ledger.com/products/ledger-nano-x?utm_source=ledger_live_mobile&utm_medium=self_referral&utm_content=onboarding",
+  buyFlex:
+    "https://shop.ledger.com/products/ledger-flex?utm_source=ledger_live_mobile&utm_medium=self_referral&utm_content=onboarding",
   playstore: "https://play.google.com/store/apps/details?id=com.ledger.live",
   applestoreRate: "https://apps.apple.com/app/id1361671700?action=write-review",
   applestore: