[FEAT] - [LLM] - Remove Spams NFT in Accounts Page (#6648)

* Remove Spams NFT in Accounts

* Chnageset

.changeset/four-yaks-float.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Remove Spams NFTs from Account Page

apps/ledger-live-mobile/src/screens/Account/NftCollectionsList.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 
 import { useSelector } from "react-redux";
-import { Box, Text } from "@ledgerhq/native-ui";
+import { Box, InfiniteLoader, Text } from "@ledgerhq/native-ui";
 import { Trans, useTranslation } from "react-i18next";
 import { StyleSheet, View, FlatList } from "react-native";
 import useEnv from "@ledgerhq/live-common/hooks/useEnv";
@@ -16,6 +16,8 @@ import { NavigatorName, ScreenName } from "~/const";
 import Button from "~/components/wrappedUi/Button";
 import Touchable from "~/components/Touchable";
 import SectionTitle from "../WalletCentricSections/SectionTitle";
+import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
+import { useNftGalleryFilter, isThresholdValid } from "@ledgerhq/live-nft-react";
 
 const MAX_COLLECTIONS_TO_SHOW = 3;
 
@@ -25,19 +27,27 @@ type Props = {
 
 export default function NftCollectionsList({ account }: Props) {
   useEnv("HIDE_EMPTY_TOKEN_ACCOUNTS");
-
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const thresold = nftsFromSimplehashFeature?.params?.threshold;
+  const nftsFromSimplehashEnabled = nftsFromSimplehashFeature?.enabled;
   const { colors } = useTheme();
   const { t } = useTranslation();
   const navigation = useNavigation();
-  const { nfts } = account;
+
+  const { nfts, isLoading } = useNftGalleryFilter({
+    nftsOwned: account.nfts || [],
+    addresses: account.freshAddress,
+    chains: [account.currency.id],
+    threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
+  });
 
   const hiddenNftCollections = useSelector(hiddenNftCollectionsSelector);
   const nftCollections = useMemo(
     () =>
-      Object.entries(nftsByCollections(nfts)).filter(
+      Object.entries(nftsByCollections(nftsFromSimplehashEnabled ? nfts : account.nfts)).filter(
         ([contract]) => !hiddenNftCollections.includes(`${account.id}|${contract}`),
       ),
-    [account.id, hiddenNftCollections, nfts],
+    [account.id, account.nfts, hiddenNftCollections, nfts, nftsFromSimplehashEnabled],
   ) as [string, ProtoNFT[]][];
 
   const [isCollectionMenuOpen, setIsCollectionMenuOpen] = useState(false);
@@ -112,7 +122,9 @@ export default function NftCollectionsList({ account }: Props) {
 
   const renderFooter = useCallback(
     () =>
-      data.length ? (
+      isLoading ? (
+        <InfiniteLoader />
+      ) : data.length ? (
         <Button
           type={"shade"}
           size={"small"}
@@ -153,6 +165,7 @@ export default function NftCollectionsList({ account }: Props) {
       account.currency.family,
       colors.fog,
       data.length,
+      isLoading,
       navigateToGallery,
       navigateToReceiveConnectDevice,
     ],

apps/ledger-live-mobile/src/screens/Nft/NftGallery/index.tsx

@@ -21,6 +21,7 @@ import { AccountsNavigatorParamList } from "~/components/RootNavigator/types/Acc
 import InfoModal from "~/modals/Info";
 import { notAvailableModalInfo } from "../NftInfoNotAvailable";
 import invariant from "invariant";
+import { useNftGalleryFilter, isThresholdValid } from "@ledgerhq/live-nft-react";
 
 const MAX_COLLECTIONS_FIRST_RENDER = 12;
 const COLLECTIONS_TO_ADD_ON_LIST_END_REACHED = 6;
@@ -30,6 +31,9 @@ type NavigationProps = BaseComposite<
 >;
 
 const NftGallery = () => {
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const thresold = nftsFromSimplehashFeature?.params?.threshold;
+  const nftsFromSimplehashEnabled = nftsFromSimplehashFeature?.enabled;
   const navigation = useNavigation<NavigationProps["navigation"]>();
   const { t } = useTranslation();
   const { params } = useRoute<NavigationProps["route"]>();
@@ -47,14 +51,22 @@ const NftGallery = () => {
     setOpen(false);
   }, []);
 
+  const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+    nftsOwned: account.nfts || [],
+    addresses: account.freshAddress,
+    chains: [account.currency.id],
+    threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
+  });
+
   const hiddenNftCollections = useSelector(hiddenNftCollectionsSelector);
   const collections = useMemo(
     () =>
-      Object.entries(nftsByCollections(account.nfts)).filter(
+      Object.entries(nftsByCollections(nftsFromSimplehashEnabled ? nfts : account.nfts)).filter(
         ([contract]) => !hiddenNftCollections.includes(`${account.id}|${contract}`),
       ),
-    [account, hiddenNftCollections],
+    [account.id, account.nfts, hiddenNftCollections, nfts, nftsFromSimplehashEnabled],
   ) as [string, ProtoNFT[]][];
+
   const [collectionsCount, setCollectionsCount] = useState(MAX_COLLECTIONS_FIRST_RENDER);
   const collectionsSlice: Array<ProtoNFT[]> = useMemo(
     () => collections.slice(0, collectionsCount).map(([, collection]) => collection),
@@ -76,7 +88,10 @@ const NftGallery = () => {
 
   const onEndReached = useCallback(() => {
     setCollectionsCount(collectionsCount + COLLECTIONS_TO_ADD_ON_LIST_END_REACHED);
-  }, [collectionsCount]);
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  }, [collectionsCount, fetchNextPage, hasNextPage]);
 
   const goToCollectionSelection = useCallback(
     () =>

apps/ledger-live-mobile/src/screens/SendFunds/01b-SelectCollection.tsx

@@ -2,7 +2,12 @@ import React, { useCallback, useMemo, useState, memo } from "react";
 
 import { View, StyleSheet, FlatList, TouchableOpacity, Platform } from "react-native";
 import { nftsByCollections } from "@ledgerhq/live-nft";
-import { useNftCollectionMetadata, useNftMetadata } from "@ledgerhq/live-nft-react";
+import {
+  isThresholdValid,
+  useNftCollectionMetadata,
+  useNftGalleryFilter,
+  useNftMetadata,
+} from "@ledgerhq/live-nft-react";
 import type { Account, ProtoNFT } from "@ledgerhq/types-live";
 import { useSelector } from "react-redux";
 import { useNavigation, useTheme } from "@react-navigation/native";
@@ -19,6 +24,7 @@ import {
   StackNavigatorProps,
 } from "~/components/RootNavigator/types/helpers";
 import { SendFundsNavigatorStackParamList } from "~/components/RootNavigator/types/SendFundsNavigator";
+import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
 
 const MAX_COLLECTIONS_FIRST_RENDER = 8;
 const COLLECTIONS_TO_ADD_ON_LIST_END_REACHED = 8;
@@ -84,26 +90,38 @@ const SendFundsSelectCollection = ({ route }: Props) => {
   const { params } = route;
   const { account } = params;
   const { colors } = useTheme();
-
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const thresold = nftsFromSimplehashFeature?.params?.threshold;
+  const nftsFromSimplehashEnabled = nftsFromSimplehashFeature?.enabled;
   const hiddenNftCollections = useSelector(hiddenNftCollectionsSelector);
 
+  const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+    nftsOwned: account.nfts || [],
+    addresses: account.freshAddress,
+    chains: [account.currency.id],
+    threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
+  });
+
   const [collectionsCount, setCollectionsCount] = useState(MAX_COLLECTIONS_FIRST_RENDER);
   const collections = useMemo(
     () =>
-      Object.entries(nftsByCollections(account.nfts)).filter(
+      Object.entries(nftsByCollections(nftsFromSimplehashEnabled ? nfts : account.nfts)).filter(
         ([contract]) => !hiddenNftCollections.includes(`${account.id}|${contract}`),
       ),
-    [account.id, account.nfts, hiddenNftCollections],
+    [account.id, account.nfts, hiddenNftCollections, nfts, nftsFromSimplehashEnabled],
   ) as [string, ProtoNFT[]][];
 
   const collectionsSlice: Array<ProtoNFT[]> = useMemo(
     () => collections.slice(0, collectionsCount).map(([, collection]) => collection),
     [collections, collectionsCount],
   );
-  const onEndReached = useCallback(
-    () => setCollectionsCount(collectionsCount + COLLECTIONS_TO_ADD_ON_LIST_END_REACHED),
-    [collectionsCount, setCollectionsCount],
-  );
+  const onEndReached = useCallback(() => {
+    setCollectionsCount(collectionsCount + COLLECTIONS_TO_ADD_ON_LIST_END_REACHED);
+
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  }, [collectionsCount, fetchNextPage, hasNextPage]);
 
   const renderItem = useCallback(
     ({ item }: { item: ProtoNFT[] }) => <CollectionRow account={account} collection={item} />,