Merge pull request #6637 from LedgerHQ/feat/LIVE-11842

[LLD] - [LIVE-11842] - Remove the spams NFT in custom lock screen on LLD

.changeset/moody-adults-roll.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Remove the spams NFT in custom lock screen on LLD

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

@@ -2,13 +2,15 @@ import React, { useMemo, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { Flex, Grid, InfiniteLoader, Text } from "@ledgerhq/react-ui";
 import { NFTMetadata } from "@ledgerhq/types-live";
-import { orderedVisibleNftsSelector } from "../../reducers/accounts";
+import { accountsSelector, orderedVisibleNftsSelector } from "../../reducers/accounts";
 import NftGalleryEmptyState from "./NftGalleryEmptyState";
 import isEqual from "lodash/isEqual";
 import NFTItem from "./NFTItem";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { useOnScreen } from "~/renderer/screens/nft/useOnScreen";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { isThresholdValid, useNftGalleryFilter } from "@ledgerhq/live-nft-react";
 
 const ScrollContainer = styled(Flex).attrs({
   flexDirection: "column",
@@ -28,40 +30,68 @@ type Props = {
 };
 
 const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const threshold = nftsFromSimplehashFeature?.params?.threshold;
+  const accounts = useSelector(accountsSelector);
   const nftsOrdered = useSelector(orderedVisibleNftsSelector, isEqual);
+
+  const addresses = useMemo(
+    () =>
+      [
+        ...new Set(
+          accounts.map(account => account.freshAddress).filter(addr => addr.startsWith("0x")),
+        ),
+      ].join(","),
+    [accounts],
+  );
+
+  const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+    nftsOwned: nftsOrdered || [],
+    addresses: addresses,
+    chains: ["ethereum", "polygon"],
+    threshold: isThresholdValid(threshold) ? Number(threshold) : 75,
+  });
+
   const { t } = useTranslation();
 
   const [displayedCount, setDisplayedCount] = useState(10);
 
   const content = useMemo(
     () =>
-      nftsOrdered.slice(0, displayedCount).map((nft, index) => {
-        const { id } = nft;
-        return (
-          <NFTItem
-            key={id}
-            id={id}
-            selected={selectedNftId === id}
-            onItemClick={handlePickNft}
-            testId={`custom-image-nft-card-${index}`}
-            index={index}
-          />
-        );
-      }),
-    [nftsOrdered, displayedCount, selectedNftId, handlePickNft],
+      (nftsFromSimplehashFeature?.enabled ? nfts : nftsOrdered)
+        .slice(0, displayedCount)
+        .map((nft, index) => {
+          const { id } = nft;
+          return (
+            <NFTItem
+              key={id}
+              id={id}
+              selected={selectedNftId === id}
+              onItemClick={handlePickNft}
+              testId={`custom-image-nft-card-${index}`}
+              index={index}
+            />
+          );
+        }),
+    [nfts, nftsFromSimplehashFeature, nftsOrdered, displayedCount, selectedNftId, handlePickNft],
   );
 
   const loaderContainerRef = useRef<HTMLDivElement>(null);
-  const updateDisplayable = () => setDisplayedCount(displayedCount => displayedCount + 10);
+  const updateDisplayable = () => {
+    setDisplayedCount(displayedCount => displayedCount + 10);
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  };
 
   useOnScreen({
-    enabled: displayedCount < nftsOrdered.length,
+    enabled: displayedCount < nfts.length,
     onIntersect: updateDisplayable,
     target: loaderContainerRef,
     threshold: 0.5,
   });
 
-  if (nftsOrdered.length <= 0) return <NftGalleryEmptyState />;
+  if (nfts.length <= 0) return <NftGalleryEmptyState />;
 
   return (
     <Flex flex={1} flexDirection="column" overflowY="hidden">
@@ -72,7 +102,7 @@ const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
         <Grid flex={1} columns={2} rowGap={6} columnGap={6}>
           {content}
         </Grid>
-        {displayedCount < nftsOrdered.length ? (
+        {displayedCount < nfts.length ? (
           <Flex ref={loaderContainerRef} flex={1} m={6} justifyContent="center">
             <InfiniteLoader size={20} />
           </Flex>