Cloning OpenSea NFT Boilerplate Questions

[Ioulaum]

I thought I’d share my current workaround code for getting all the NFT images to work…

I’m using an API web proxy that I set up (https://workaround-proxy.herokuapp.com/) for when the initial load fails and that works. So, now we have a proof of concept.

Pastebin for the code: https://pastebin.com/wVyzCvH0

useEffect(() => {
    async function fetchNFTs() {
      if (data?.result) {
      const NFTs = data.result;
      for (let NFT of NFTs) {
        if (NFT?.metadata) {
          NFT.metadata = JSON.parse(NFT.metadata);
          // metadata is a string type
          NFT.image = resolveLink(NFT.metadata?.image);
        } else if (NFT?.token_uri){
          try {
            await fetch(`https://workaround-proxy.herokuapp.com/${NFT.token_uri}`)
          .then(response => response.json())
          .then(data => {
            NFT.image = resolveLink(data.image);
          });
          } catch (error) {
            console.log(error);
            console.log(NFT.token_uri);
          }
        }
      }
      setNFTBalance(NFTs);
    }
    }
    fetchNFTs();
    
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

… I’ll probably disable the proxy after a while, but you can test it out for now if you want to.

**

I don’t know the username of the person who did the YouTube video, but they should have some NFTs with this problem in their account since it was showing up in the video.

So they should be able to test this fix.

[itsybitsycyber]

Hello, thank you for the video - I appreciate all the resources Moralis provides.

I am just having an issue with the code. At first I tried to user the starter code and follow along in the tutorial but I see the repo has changed a bit since then.

I have now decided to use the completed code but I am having a few issues when trying to run it. (I’ve pulled the latest version).

I made sure to enter the details if the server I created correctly and my deployed contract and ABI. I’m using the Polygon Mumbai testnet.

It throws an error when trying to fetch my NFTs. I will attach an image of the console. Not sure what I am doing wrong.

Thank you!

[IAmJaysWay]

@Ioulaum you’ve done some great debugging! Will try this fix and the indexing of NFTs on Moralis side should be resolved soon as well so we can move forward from the workaround!

@itsybitsycyber this is a common issue and should be updated soon, thanks for your interest and patience. In the mean while if you would like to clone the starter code used in the video you can checkout the commit like so:

git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git
cd ethereum-boilerplate
git checkout cfffb45755287226ab01f560343a5442cd9ec313

[itsybitsycyber]

@IAmJaysWay

it clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git
cd ethereum-boilerplate
git checkout cfffb45755287226ab01f560343a5442cd9ec313

Awesome - thank you so much!

[Ioulaum]

Is there an estimate on when the indexing of NFTs will be completed on Moralis?

Also, I found for collections like Cryptopunks that if you’re loading hundreds directly from their server, some of those can fail also.

Whereas if you do it via a proxy / CDN, that they all load fine… Until you hit the rate limit of too many requests to their server.

But I expect that that could be fixed with lazy loading, coupled with a proxy / CDN that can cache the images… Since you can’t be sure that all NFTs are set up on sites that can handle a lot of requests.

**

btw, did you read my other question about periodically getting 400 Bad Request from the Moralis API? Any ideas on how to deal with it or when it might be fixed?

I would assume that you’re running those on top of Google Cloud Functions so it shouldn’t be a load issue… But I could be wrong.

If it is a load issue (like, because of too many database queries)… Then you could use CDNs there too (lol) … Fastly has good API caching features, where you can cache API responses, and then purge them when the underlying data changes (like if there is a related update on the Blockchain)… That’d reduce load on your servers.

[Ioulaum]

btw, regarding the 400 Bad Requests I’ve been seeing, I opened a separate troubleshooting thread:

OpenSea Clone Tutorial - 400 errors

I was doing the Opensea Clone course, and quite often, some of the API calls to Moralis will fail. Sometimes it’s the one that gets the balance, sometimes it’s the one that gets your NFTs… So different aspects of the UI end up not having the data they need, at different times. Could be a load issue. Does the paid version of Moralis work better?

And it looks like the reason for it may be that the account.getNFTs call can end up called before the account object is fully initialized.

So it can end up sending the request without adding the address for which values are required.

Which means that we need to ensure that the account variable is fully initialized with the address before making the call to getNFTs (or getNativeBalance, etc.)

Edit: Another possible issue is that because the /getNFTs method ends up getting called multiple times (likely in response to page mutations), the different web requests might at times end up in an order that the failed response comes after the successful one.

[Ioulaum]

I notice that if I look at Cryptopunks on the final version of the Opensea clone, it is currently saying that the total NFTs in the collection is 9994. And previously I saw it saying 9995.

Whereas on Opensea, it says that the collection has 9999 items.

Is there something that’s causing a few of them to not be picked up for some reason?

[lion33]

Please anyone help me !!.
I tried to do a createdmarketsale on remix to test this contract works first as you can see in the picture , but i got that error saying “execution reverted: ERC721: operator query for nonexistent token”

(this smart contract source is from “marketplaceBoilerplate.sol” you uploaded from https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate )

Please help me!!

[Skanus]

Everything seems to work correctly, but have you tried selling an nft, buying it with another address, and then reselling that same nft? I have problems with that like “ERC721: transfer caller is not owner nor approved”.

[IAmJaysWay]

@Skanus, you will probably need to write setApprovalForAll from the NFT collections smart contract which gives an operator (i.e. your marketplace smart contract) permission to transfer tokens of the senders (i.e. you) behalf. See open zeppelin docs if you want more info

ERC 721 - OpenZeppelin Docs

This is also something you may add to the boilerplate, if you notice the marketplace smart contract not having approval for a specific users NFTs, you could prompt them to setApproval in the dApp.

[IAmJaysWay]

Hey @lion33,

You have to make sure that the NFT has been put up for sale on the marketplace first and currently it seems you are attempting to purchase the 3rd item put up for sale (itemId) on the marketplace, so make sure that that the NFT contract address is correct/same as the 3rd item you put up for sale

[IAmJaysWay]

@Ioulaum Really like your passion to the project!! This is probably due to some of the indexing issues still, which are being worked don’t worry can’t give an ETA, but solutions are being considered.

[Fitz]

Can anyone help me out with a deployment issue? I’m working with a web dev to get everything setup with github and we are getting a provider error. The app works fine in localhost and also if i manually drop the build folder onto my server.

Is there anything needed to be installed on the actual server? (VPS)

seems to be an issue with pushing it to github/server? Any help would be great! Thanks

[itsybitsycyber]

Hello, does anyone maybe have a solution or tips to approve the market contract to transfer a user’s NFTs?

I have tried using
IERC721(nftContract).setApprovalForAll(address(this), true);

It does not allow the caller to set approval (for obvious reasons). In this case, it recognises the marketplace contract as the caller and not the user trying to list the item. When using Remix it works because as the user, I can manually call the function.

Any help would be appreciated

[lion33]

i am really curious about smartcontract you uploaded works like the picture?
(https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate/blob/main/src/contracts/marketplaceBoilerplate.sol)

anyone can do it with the code???

i have struggled since 2 weeks ago. please help me!!!
when i tried to resell nfts from my collection and pay for fee and then Metamask said
“# Revert ERC721: transfer caller is not owner nor approved”

[IAmJaysWay]

@lion33 I’ll check if there is some other problem, but the boilerplate should work fine as long as you have approved to marketplace to transfer the users NFTs.

In addition to that and as a note to you @itsybitsycyber, will try and get back to you shortly with a way to set the approval in a more automated fashion

[lion33]

what do you mean that i approve to marketplace to transfer users’ NFTs?
and how??

[Code_shinobi]

I’m having issues here.

"Cannot read property ‘toString’ of undefined

Help!

[IAmJaysWay]

See the Open Zeppelin Docs: https://docs.openzeppelin.com/contracts/2.x/api/token/erc721#IERC721-setApprovalForAll-address-bool-

But you can try this out by finding the NFT collection on the networks block explorer, then choosing to write the contract and finding setApprovalForAll as shown in the images below. Ofc you may integrate this functionality into the dApp itself as mentioned in a couple of posts earlier, but will give you updates in the coming days.

[IAmJaysWay]

Hey @Code_shinobi, you will have to be a bit more specific
When do you get this error?