[FEAT]: use simpleHash for LLD Gallery (#6042)

apps/ledger-live-desktop/package.json

@@ -75,6 +75,7 @@
  "@sentry/electron": "^4.15.1",
  "@sentry/node": "7.84.0",
  "@sentry/tracing": "7.84.0",
+ "@tanstack/react-query": "^5.17.19",
  "@tippyjs/react": "^4.2.6",
  "@trust/keyto": "^1.0.1",
  "@types/qrcode": "^1.5.0",

apps/ledger-live-desktop/src/renderer/App.tsx

@@ -29,6 +29,8 @@ import PostOnboardingProviderWrapped from "~/renderer/components/PostOnboardingH
 import { useBraze } from "./hooks/useBraze";
 import { StorylyProvider } from "~/storyly/StorylyProvider";
 import { CounterValuesStateRaw } from "@ledgerhq/live-countervalues/types";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+
 const reloadApp = (event: KeyboardEvent) => {
  if ((event.ctrlKey || event.metaKey) && event.key === "r") {
  window.api?.reloadRenderer();
@@ -40,6 +42,8 @@ type Props = {
  initialCountervalues: CounterValuesStateRaw;
 };
 
+const queryClient = new QueryClient();
+
 const InnerApp = ({ initialCountervalues }: { initialCountervalues: CounterValuesStateRaw }) => {
  const [reloadEnabled, setReloadEnabled] = useState(true);
 
@@ -80,7 +84,9 @@ const InnerApp = ({ initialCountervalues }: { initialCountervalues: CounterValue
  <NftMetadataProvider getCurrencyBridge={getCurrencyBridge}>
  <MarketDataProvider>
  <StorylyProvider>
- <Default />
+ <QueryClientProvider client={queryClient}>
+ <Default />
+ </QueryClientProvider>
  </StorylyProvider>
  </MarketDataProvider>
  </NftMetadataProvider>

apps/ledger-live-desktop/src/renderer/screens/nft/Collections/Collections.tsx

@@ -19,6 +19,9 @@ import Text from "~/renderer/components/Text";
 import { openURL } from "~/renderer/linking";
 import Box from "~/renderer/components/Box";
 import Row from "./Row";
+import { useNftGalleryFilter } from "@ledgerhq/live-nft-react";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+
 const INCREMENT = 5;
 const EmptyState = styled.div`
  padding: 15px 20px;
@@ -42,6 +45,8 @@ type Props = {
  account: Account;
 };
 const Collections = ({ account }: Props) => {
+ const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const history = useHistory();
@@ -64,13 +69,25 @@ const Collections = ({ account }: Props) => {
  history.push(`/account/${account.id}/nft-collection/${collectionAddress}`),
  [account.id, history],
  );
- const collections = useMemo(() => nftsByCollections(account.nfts), [account.nfts]);
+
+ const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+ nftsOwned: account.nfts || [],
+ addresses: account.freshAddress,
+ chains: [account.currency.id],
+ });
+ const collections = useMemo(
+ () => nftsByCollections(nftsFromSimplehashFeature?.enabled ? nfts : account.nfts),
+ [account.nfts, nfts, nftsFromSimplehashFeature],
+ );
  const collectionsLength = Object.keys(collections).length;
  const onShowMore = useCallback(() => {
  setNumberOfVisibleCollections(numberOfVisibleCollections =>
  Math.min(numberOfVisibleCollections + INCREMENT, collectionsLength),
  );
- }, [collectionsLength]);
+ if (hasNextPage) {
+ fetchNextPage();
+ }
+ }, [collectionsLength, fetchNextPage, hasNextPage]);
  const hiddenNftCollections = useSelector(hiddenNftCollectionsSelector);
  const filteredCollections = useMemo(
  () =>
@@ -94,6 +111,7 @@ const Collections = ({ account }: Props) => {
  )),
  [account, filteredCollections, numberOfVisibleCollections, onOpenCollection],
  );
+
  useEffect(() => {
  track("View NFT Collections (Account Page)");
  }, []);

apps/ledger-live-desktop/src/renderer/screens/nft/Gallery/Gallery.tsx

@@ -20,6 +20,8 @@ import { State } from "~/renderer/reducers";
 import { ProtoNFT } from "@ledgerhq/types-live";
 import theme from "@ledgerhq/react-ui/styles/theme";
 import { useOnScreen } from "../useOnScreen";
+import { useNftGalleryFilter } from "@ledgerhq/live-nft-react";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 const SpinnerContainer = styled.div`
  display: flex;
@@ -50,6 +52,8 @@ const Footer = styled.footer`
 `;
 
 const Gallery = () => {
+ const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
+
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const { id } = useParams<{ id: string }>();
@@ -60,12 +64,19 @@ const Gallery = () => {
  );
  const history = useHistory();
  const hiddenNftCollections = useSelector(hiddenNftCollectionsSelector);
+
+ const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
+ nftsOwned: account?.nfts || [],
+ addresses: account?.freshAddress || "",
+ chains: [account?.currency.id ?? "ethereum"],
+ });
+
  const collections = useMemo(
  () =>
- Object.entries(nftsByCollections(account?.nfts)).filter(
- ([contract]) => !hiddenNftCollections.includes(`${account?.id}|${contract}`),
- ),
- [account?.id, account?.nfts, hiddenNftCollections],
+ Object.entries(
+ nftsByCollections(nftsFromSimplehashFeature?.enabled ? nfts : account?.nfts),
+ ).filter(([contract]) => !hiddenNftCollections.includes(`${account?.id}|${contract}`)),
+ [account?.id, account?.nfts, hiddenNftCollections, nfts, nftsFromSimplehashFeature?.enabled],
  );
 
  // Should redirect to the account page if there is not NFT anymore in the page.
@@ -92,7 +103,12 @@ const Gallery = () => {
  );
  const listFooterRef = useRef<HTMLDivElement>(null);
  const [maxVisibleNFTs, setMaxVisibleNFTs] = useState(1);
- const updateMaxVisibleNtfs = () => setMaxVisibleNFTs(maxVisibleNFTs => maxVisibleNFTs + 5);
+ const updateMaxVisibleNtfs = () => {
+ setMaxVisibleNFTs(maxVisibleNFTs => maxVisibleNFTs + 5);
+ if (hasNextPage) {
+ fetchNextPage();
+ }
+ };
 
  useOnScreen({
  enabled: maxVisibleNFTs < (account?.nfts?.length ?? 0),