Bugfix/revert and tsd 4337 unexpected major service overuse release

.changeset/strong-bobcats-marry.md

@@ -0,0 +1,9 @@
+---
+"@ledgerhq/types-live": minor
+"ledger-live-desktop": minor
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+"@ledgerhq/live-nft-react": minor
+---
+
+Revery useNFTCOllections

apps/ledger-live-desktop/src/newArch/features/Collectibles/Nfts/BreadCrumb/useBreadCrumbModel.tsx

@@ -2,27 +2,40 @@ import { useSelector } from "react-redux";
 import { useHistory, useParams } from "react-router-dom";
 import { State } from "~/renderer/reducers";
 import { accountSelector } from "~/renderer/reducers/accounts";
+import { nftsByCollections } from "@ledgerhq/live-nft";
 import { useCallback, useMemo } from "react";
 import { ProtoNFT } from "@ledgerhq/types-live";
 import { DropDownItemType } from "~/renderer/components/DropDownSelector";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
-import { useNftCollections } from "~/renderer/hooks/nfts/useNftCollections";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { isThresholdValid, useNftGalleryFilter } from "@ledgerhq/live-nft-react";
 
 const useBreadCrumbModel = () => {
   const history = useHistory();
   const { id, collectionAddress } = useParams<{ id?: string; collectionAddress?: string }>();
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const thresold = nftsFromSimplehashFeature?.params?.threshold;
 
   const account = useSelector((state: State) =>
-    id ? accountSelector(state, { accountId: id }) : undefined,
+    id ? accountSelector(state, { accountId: id }) : null,
   );
 
-  const { collections } = useNftCollections({
-    account,
+  const { nfts } = useNftGalleryFilter({
+    nftsOwned: account?.nfts || [],
+    addresses: String(account?.freshAddress),
+    chains: [String(account?.currency.id)],
+    threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
+    enabled: nftsFromSimplehashFeature?.enabled || false,
+    staleTime: nftsFromSimplehashFeature?.params?.staleTime,
   });
 
+  const collections = useMemo(
+    () => nftsByCollections(nftsFromSimplehashFeature?.enabled ? nfts : account?.nfts),
+    [account?.nfts, nfts, nftsFromSimplehashFeature],
+  );
   const items: DropDownItemType<ProtoNFT>[] = useMemo(
     () =>
-      collections.map(([contract, nfts]: [string, ProtoNFT[]]) => ({
+      Object.entries(collections).map(([contract, nfts]: [string, ProtoNFT[]]) => ({
         key: contract,
         label: contract,
         content: nfts[0],

apps/ledger-live-desktop/src/newArch/features/Collectibles/Nfts/Collections/useNftCollectionsModel.tsx

@@ -3,8 +3,14 @@ import { Account, ProtoNFT } from "@ledgerhq/types-live";
 import { useDispatch } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { openModal } from "~/renderer/actions/modals";
-import { mapCollectionsToStructure } from "LLD/features/Collectibles/utils/collectionUtils";
-import { useNftCollections } from "~/renderer/hooks/nfts/useNftCollections";
+import { nftsByCollections } from "@ledgerhq/live-nft/index";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { isThresholdValid, useNftGalleryFilter } from "@ledgerhq/live-nft-react";
+import {
+  filterHiddenCollections,
+  mapCollectionsToStructure,
+} from "LLD/features/Collectibles/utils/collectionUtils";
+import { useNftCollectionsStatus } from "~/renderer/hooks/nfts/useNftCollectionsStatus";
 
 type NftsInTheCollections = {
   contract: string;
@@ -21,6 +27,9 @@ const INCREMENT = 5;
 export const useNftCollectionsModel = ({ account }: Props) => {
   const history = useHistory();
   const dispatch = useDispatch();
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const thresold = nftsFromSimplehashFeature?.params?.threshold;
+  const { hiddenNftCollections } = useNftCollectionsStatus();
   const [numberOfVisibleCollections, setNumberOfVisibleCollections] = useState(INCREMENT);
   const [displayShowMore, setDisplayShowMore] = useState(false);
 
@@ -44,26 +53,49 @@ export const useNftCollectionsModel = ({ account }: Props) => {
     history.push(`/account/${account.id}/nft-collection`);
   }, [account.id, history]);
 
-  const { fetchNextPage, hasNextPage, collections, collectionsLength } = useNftCollections({
-    account,
+  const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+    nftsOwned: account.nfts || [],
+    addresses: account.freshAddress,
+    chains: [account.currency.id],
+    threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
+    enabled: nftsFromSimplehashFeature?.enabled || false,
+    staleTime: nftsFromSimplehashFeature?.params?.staleTime,
   });
 
+  const collections = useMemo(
+    () => nftsByCollections(nftsFromSimplehashFeature?.enabled ? nfts : account.nfts),
+    [account.nfts, nfts, nftsFromSimplehashFeature],
+  );
+
   const onShowMore = useCallback(() => {
-    setNumberOfVisibleCollections(numberOfVisibleCollections =>
-      Math.min(numberOfVisibleCollections + INCREMENT, collectionsLength),
+    setNumberOfVisibleCollections(
+      numberOfVisibleCollections => numberOfVisibleCollections + INCREMENT,
     );
     if (hasNextPage) fetchNextPage();
-  }, [collectionsLength, fetchNextPage, hasNextPage]);
+  }, [fetchNextPage, hasNextPage]);
 
+  const filteredCollections = useMemo(
+    () => filterHiddenCollections(collections, hiddenNftCollections, account.id),
+    [account.id, collections, hiddenNftCollections],
+  );
   const nftsInTheCollection: NftsInTheCollections[] = useMemo(
-    () => mapCollectionsToStructure(collections, numberOfVisibleCollections, onOpenCollection),
-    [collections, numberOfVisibleCollections, onOpenCollection],
+    () =>
+      mapCollectionsToStructure(filteredCollections, numberOfVisibleCollections, onOpenCollection),
+    [filteredCollections, numberOfVisibleCollections, onOpenCollection],
   );
 
   useEffect(() => {
-    const moreToShow = numberOfVisibleCollections < collections.length;
+    const moreToShow = nftsFromSimplehashFeature?.enabled
+      ? filteredCollections.length <= numberOfVisibleCollections && hasNextPage
+      : numberOfVisibleCollections < filteredCollections.length;
+
     setDisplayShowMore(moreToShow);
-  }, [numberOfVisibleCollections, collections.length]);
+  }, [
+    numberOfVisibleCollections,
+    filteredCollections.length,
+    nftsFromSimplehashFeature?.enabled,
+    hasNextPage,
+  ]);
 
   return {
     nftsInTheCollection,

apps/ledger-live-desktop/src/newArch/features/Collectibles/Nfts/screens/Gallery/useNftGalleryModel.tsx

@@ -2,10 +2,14 @@ import { useHistory, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { State } from "~/renderer/reducers";
 import { accountSelector } from "~/renderer/reducers/accounts";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useNftGalleryFilter, isThresholdValid } from "@ledgerhq/live-nft-react";
+import { nftsByCollections } from "@ledgerhq/live-nft";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { openModal } from "~/renderer/actions/modals";
 import { useOnScreen } from "LLD/hooks/useOnScreen";
-import { useNftCollections } from "~/renderer/hooks/nfts/useNftCollections";
+import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
+import { ChainsEnum } from "LLD/features/Collectibles/types/enum/Chains";
+import { useNftCollectionsStatus } from "~/renderer/hooks/nfts/useNftCollectionsStatus";
 
 const defaultNumberOfVisibleNfts = 10;
 
@@ -14,17 +18,40 @@ const useNftGalleryModel = () => {
   const history = useHistory();
   const { id } = useParams<{ id: string }>();
 
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const threshold = nftsFromSimplehashFeature?.params?.threshold;
+
   const listFooterRef = useRef<HTMLDivElement>(null);
   const [maxVisibleNFTs, setMaxVisibleNFTs] = useState(defaultNumberOfVisibleNfts);
 
   const { account } = useSelector((state: State) => ({
     account: accountSelector(state, { accountId: id }),
   }));
 
-  const { fetchNextPage, hasNextPage, collections, allNfts } = useNftCollections({
-    account,
+  const { hiddenNftCollections } = useNftCollectionsStatus();
+
+  const INITIAL_INCREMENT = nftsFromSimplehashFeature?.enabled ? 50 : 5;
+
+  const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+    nftsOwned: account?.nfts || [],
+    addresses: account?.freshAddress || "",
+    chains: [account?.currency.id ?? ChainsEnum.ETHEREUM],
+    threshold: isThresholdValid(threshold) ? Number(threshold) : 75,
+    enabled: nftsFromSimplehashFeature?.enabled || false,
+    staleTime: nftsFromSimplehashFeature?.params?.staleTime,
   });
 
+  const allNfts = useMemo(
+    () => (nftsFromSimplehashFeature?.enabled ? nfts : account?.nfts || []),
+    [account?.nfts, nfts, nftsFromSimplehashFeature?.enabled],
+  );
+
+  const collections = useMemo(() => {
+    return Object.entries(nftsByCollections(allNfts)).filter(
+      ([contract]) => !hiddenNftCollections.includes(`${account?.id}|${contract}`),
+    );
+  }, [account?.id, allNfts, hiddenNftCollections]);
+
   useEffect(() => {
     if (collections.length < 1) {
       history.push(`/account/${account?.id}/`);
@@ -45,11 +72,11 @@ const useNftGalleryModel = () => {
   );
 
   const updateMaxVisibleNtfs = useCallback(() => {
-    setMaxVisibleNFTs(prevMaxVisibleNFTs => prevMaxVisibleNFTs + 5);
+    setMaxVisibleNFTs(prevMaxVisibleNFTs => prevMaxVisibleNFTs + INITIAL_INCREMENT);
     if (hasNextPage) {
       fetchNextPage();
     }
-  }, [hasNextPage, fetchNextPage]);
+  }, [hasNextPage, INITIAL_INCREMENT, fetchNextPage]);
 
   useOnScreen({
     enabled: maxVisibleNFTs < allNfts?.length,
@@ -72,6 +99,7 @@ const useNftGalleryModel = () => {
 
   return {
     account,
+    hiddenNftCollections,
     nftsByCollection,
     listFooterRef,
     collections,

apps/ledger-live-desktop/src/renderer/components/Breadcrumb/NFTCrumb.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, memo } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { nftsByCollections } from "@ledgerhq/live-nft";
 import { accountSelector } from "~/renderer/reducers/accounts";
 import DropDownSelector, { DropDownItemType } from "~/renderer/components/DropDownSelector";
 import Button from "~/renderer/components/Button";
@@ -13,7 +14,8 @@ import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import CollectionName from "~/renderer/components/Nft/CollectionName";
 import { ProtoNFT } from "@ledgerhq/types-live";
 import { State } from "~/renderer/reducers";
-import { useNftCollections } from "~/renderer/hooks/nfts/useNftCollections";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { isThresholdValid, useNftGalleryFilter } from "@ledgerhq/live-nft-react";
 
 const LabelWithMeta = ({
   item,
@@ -36,6 +38,8 @@ const LabelWithMeta = ({
 
 const NFTCrumb = () => {
   const history = useHistory();
+  const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const thresold = nftsFromSimplehashFeature?.params?.threshold;
   const { id, collectionAddress } = useParams<{ id?: string; collectionAddress?: string }>();
   const account = useSelector((state: State) =>
     id
@@ -45,20 +49,28 @@ const NFTCrumb = () => {
       : undefined,
   );
 
-  const { collections } = useNftCollections({
-    account,
+  const { nfts } = useNftGalleryFilter({
+    nftsOwned: account?.nfts || [],
+    addresses: String(account?.freshAddress),
+    chains: [String(account?.currency.id)],
+    threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
+    enabled: nftsFromSimplehashFeature?.enabled || false,
+    staleTime: nftsFromSimplehashFeature?.params?.staleTime,
   });
 
+  const collections = useMemo(
+    () => nftsByCollections(nftsFromSimplehashFeature?.enabled ? nfts : account?.nfts),
+    [account?.nfts, nfts, nftsFromSimplehashFeature],
+  );
   const items: DropDownItemType<ProtoNFT>[] = useMemo(
     () =>
-      collections.map(([contract, nfts]: [string, ProtoNFT[]]) => ({
+      Object.entries(collections).map(([contract, nfts]: [string, ProtoNFT[]]) => ({
         key: contract,
         label: contract,
         content: nfts[0],
       })),
     [collections],
   );
-
   const activeItem: DropDownItemType<ProtoNFT> | undefined | null = useMemo(
     () => items.find(item => item.key === collectionAddress) || items[0],
     [collectionAddress, items],

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

@@ -9,10 +9,10 @@ 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";
 import { getEnv } from "@ledgerhq/live-env";
-import { useNftCollections } from "~/renderer/hooks/nfts/useNftCollections";
 import { State } from "~/renderer/reducers";
-import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 const ScrollContainer = styled(Flex).attrs({
   flexDirection: "column",
@@ -34,12 +34,14 @@ type Props = {
 const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
   const SUPPORTED_NFT_CURRENCIES = getEnv("NFT_CURRENCIES");
   const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+  const threshold = nftsFromSimplehashFeature?.params?.threshold;
   const accounts = useSelector(accountsSelector);
   const nftsOrdered = useSelector(
     (state: State) =>
       orderedVisibleNftsSelector(state, Boolean(nftsFromSimplehashFeature?.enabled)),
     isEqual,
   );
+
   const addresses = useMemo(
     () =>
       [
@@ -50,19 +52,26 @@ const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
     [accounts],
   );
 
-  const { fetchNextPage, hasNextPage, allNfts } = useNftCollections({
-    nftsOwned: nftsOrdered,
+  const {
+    nfts: nftsFiltered,
+    fetchNextPage,
+    hasNextPage,
+  } = useNftGalleryFilter({
+    nftsOwned: nftsOrdered || [],
     addresses: addresses,
     chains: SUPPORTED_NFT_CURRENCIES,
+    threshold: isThresholdValid(threshold) ? Number(threshold) : 75,
+    enabled: nftsFromSimplehashFeature?.enabled || false,
   });
 
+  const nfts = nftsFromSimplehashFeature?.enabled ? nftsFiltered : nftsOrdered;
   const { t } = useTranslation();
 
   const [displayedCount, setDisplayedCount] = useState(10);
 
   const content = useMemo(
     () =>
-      allNfts.slice(0, displayedCount).map((nft, index) => {
+      nfts.slice(0, displayedCount).map((nft, index) => {
         const { id } = nft;
         return (
           <NFTItem
@@ -75,7 +84,7 @@ const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
           />
         );
       }),
-    [allNfts, displayedCount, selectedNftId, handlePickNft],
+    [nfts, displayedCount, selectedNftId, handlePickNft],
   );
 
   const loaderContainerRef = useRef<HTMLDivElement>(null);
@@ -87,13 +96,13 @@ const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
   };
 
   useOnScreen({
-    enabled: displayedCount < allNfts.length,
+    enabled: displayedCount < nfts.length,
     onIntersect: updateDisplayable,
     target: loaderContainerRef,
     threshold: 0.5,
   });
 
-  if (allNfts.length <= 0) return <NftGalleryEmptyState />;
+  if (nfts.length <= 0) return <NftGalleryEmptyState />;
 
   return (
     <Flex flex={1} flexDirection="column" overflowY="hidden">
@@ -104,7 +113,7 @@ const NFTGallerySelector = ({ handlePickNft, selectedNftId }: Props) => {
         <Grid flex={1} columns={2} rowGap={6} columnGap={6}>
           {content}
         </Grid>
-        {displayedCount < allNfts.length ? (
+        {displayedCount < nfts.length ? (
           <Flex ref={loaderContainerRef} flex={1} m={6} justifyContent="center">
             <InfiniteLoader size={20} />
           </Flex>

apps/ledger-live-desktop/src/renderer/hooks/nfts/useHideSpamCollection.ts

@@ -28,6 +28,6 @@ export function useHideSpamCollection() {
 
   return {
     hideSpamCollection,
-    enabled: spamFilteringTxFeature?.enabled && nftsFromSimplehashFeature?.enabled,
+    enabled: (spamFilteringTxFeature?.enabled && nftsFromSimplehashFeature?.enabled) || false,
   };
 }