feat(lld,llm/nft/stax): align custom lock screen entrypoint condition (…

…#4932)

* feat(lld,llm/nft/stax): align custom lock screen entrypoint condition

* fix(llm/NftLinksPanel): text wrapping properly

.changeset/cold-rats-sell.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+NFT screen/Stax: only display "custom lock screen" option if the user has connected a Stax once

apps/ledger-live-desktop/src/renderer/hooks/useNftLinks.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { Account, ProtoNFT, NFTMetadata, NFTMedias } from "@ledgerhq/types-live";
@@ -14,6 +14,8 @@ import { setDrawer } from "../drawers/Provider";
 import CustomImage from "~/renderer/screens/customImage";
 import NFTViewerDrawer from "~/renderer/drawers/NFTViewerDrawer";
 import { ContextMenuItemType } from "../components/ContextMenu/ContextMenuWrapper";
+import { devicesModelListSelector } from "../reducers/settings";
+import { DeviceModelId } from "@ledgerhq/devices";
 
 function safeList(items: (ContextMenuItemType | "" | undefined)[]): ContextMenuItemType[] {
   return items.filter(Boolean) as ContextMenuItemType[];
@@ -166,21 +168,25 @@ export default (
   }, [account, customImageUri, isInsideDrawer, nft.id, t]);
 
   const customImageEnabled = useFeature("customImage")?.enabled;
+  const devicesModelList = useSelector(devicesModelListSelector);
   const links = useMemo(() => {
     const metadataLinks = linksPerCurrency[account.currency.id]?.(t, metadata?.links) || [];
     return [
       ...metadataLinks,
-      ...(customImageEnabled && customImageUri ? [customImage] : []),
+      ...(devicesModelList?.includes(DeviceModelId.stax) && customImageEnabled && customImageUri
+        ? [customImage]
+        : []),
       hideCollection,
     ];
   }, [
     account.currency.id,
-    hideCollection,
+    t,
     metadata?.links,
-    customImageUri,
+    devicesModelList,
     customImageEnabled,
+    customImageUri,
     customImage,
-    t,
+    hideCollection,
   ]);
   return links;
 };

apps/ledger-live-mobile/src/components/Nft/NftLinksPanel.tsx

@@ -15,6 +15,8 @@ import { rgba } from "../../colors";
 import HideNftDrawer from "./HideNftDrawer";
 import { track, TrackScreen } from "../../analytics";
 import { extractImageUrlFromNftMetadata } from "../CustomImage/imageUtils";
+import { knownDeviceModelIdsSelector } from "../../reducers/settings";
+import { useSelector } from "react-redux";
 
 type Props = {
   links?: NFTMetadata["links"] | null;
@@ -51,7 +53,7 @@ const NftLink = ({
   <LinkTouchable style={style} onPress={onPress}>
     <Flex flexDirection="row" alignItems="center">
       <Box mr={16}>{leftIcon}</Box>
-      <Flex flexDirection="column">
+      <Flex flexDirection="column" flexShrink={1}>
         <Text fontWeight="semiBold" fontSize={16} color={primary ? "primary.c90" : "neutral.c100"}>
           {title}
         </Text>
@@ -76,8 +78,10 @@ const NftLinksPanel = ({ nftContract, nftId, links, isOpen, onClose, nftMetadata
     useFeature("disableNftRaribleOpensea")?.enabled && Platform.OS === "ios";
 
   const customImageUri = extractImageUrlFromNftMetadata(nftMetadata);
+  const knownDeviceModelIds = useSelector(knownDeviceModelIdsSelector);
 
-  const showCustomImageButton = customImage?.enabled && !!customImageUri;
+  const showCustomImageButton =
+    knownDeviceModelIds.stax && customImage?.enabled && !!customImageUri;
 
   const handleOpenOpenSea = useCallback(() => {
     track("button_clicked", {