bkrem / react-nft-gallery

:framed_picture: React component to display your NFTs as a gallery

Home Page:https://bkrem.github.io/react-nft-gallery

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Showcase mode does not behave correctly

zaventh opened this issue · comments

Version 0.7.0

Consider the following:

<NftGallery darkMode hasExternalLinks={false} showcaseMode
                                showcaseItemIds={[
                                    '0x148d1280a62ef720124537cdf53a084d499607e4/6',
                                    '0x148d1280a62ef720124537cdf53a084d499607e4/7',
                                ]}
                                ownerAddress="knitkins.eth"/>

What I expected to happen was for an XHR to OpenSea to gather the first 20 items from the ownerAddress and then filter those results for the defined showcaseItemIds and display two images.

What actually happens is the component makes 20 XHR requests to OpenSea and each time renders the two items twice. The result is a total of 40 images (20x2) displayed. If I add another showcaseItemIds to have say three total, then 40 requests to OpenSea are made and 90 images (30x3) are displayed.

Screenshot from 2022-04-11 14-38-00

Using the component in non-showcase mode behaves correctly and displays the most recent 20 results from OS (not using an API key currently).

I can provide additional details if necessary.

Two follow-up details

  1. Adding an openseaApiKey resolves this issue
  2. The contract address for showcaseItemIds appears to be case sensitive. That is not immediately intuitive and I think would be better made case insensitive.

I see this behavior even in non-showcase mode, specifically when there are less than 20 NFTs to list. Haven't gone through the code, but I'm guessing the loop has a bug.