Cloning OpenSea NFT Boilerplate Questions

mikeze · December 9, 2021, 6:55pm

IAmJaysWay:

const [contractABI, setContractABI] = useState('[ { “inputs”: [], “stateMutability”: “nonpayable”, “type”: “constructor” }, { “anonymous”: false, “inputs”: [ { “indexed”: true, “internalType”: “uint256”, “name”: “itemId”, “type”: “uint256” }, { “indexed”: true, “internalType”: “address”, “name”: “nftContract”, “type”: “address” }, { “indexed”: true, “internalType”: “uint256”, “name”: “tokenId”, “type”: “uint256” }, { “indexed”: false, “internalType”: “address”, “name”: “seller”, “type”: “address” }, { “indexed”: false, “internalType”: “address”, “name”: “owner”, “type”: “address” }, { “indexed”: false, “internalType”: “uint256”, “name”: “price”, “type”: “uint256” }, { “indexed”: false, “internalType”: “bool”, “name”: “sold”, “type”: “bool” } ], “name”: “MarketItemCreated”, “type”: “event” }, { “anonymous”: false, “inputs”: [ { “indexed”: true, “internalType”: “uint256”, “name”: “itemId”, “type”: “uint256” }, { “indexed”: false, “internalType”: “address”, “name”: “owner”, “type”: “address” } ], “name”: “MarketItemSold”, “type”: “event” }, { “inputs”: [ { “internalType”: “address”, “name”: “nftContract”, “type”: “address” }, { “internalType”: “uint256”, “name”: “tokenId”, “type”: “uint256” }, { “internalType”: “uint256”, “name”: “price”, “type”: “uint256” } ], “name”: “createMarketItem”, “outputs”: [], “stateMutability”: “payable”, “type”: “function” }, { “inputs”: [ { “internalType”: “address”, “name”: “nftContract”, “type”: “address” }, { “internalType”: “uint256”, “name”: “itemId”, “type”: “uint256” } ], “name”: “createMarketSale”, “outputs”: [], “stateMutability”: “payable”, “type”: “function” }, { “inputs”: [], “name”: “fetchMarketItems”, “outputs”: [ { “components”: [ { “internalType”: “uint256”, “name”: “itemId”, “type”: “uint256” }, { “internalType”: “address”, “name”: “nftContract”, “type”: “address” }, { “internalType”: “uint256”, “name”: “tokenId”, “type”: “uint256” }, { “internalType”: “address payable”, “name”: “seller”, “type”: “address” }, { “internalType”: “address payable”, “name”: “owner”, “type”: “address” }, { “internalType”: “uint256”, “name”: “price”, “type”: “uint256” }, { “internalType”: “bool”, “name”: “sold”, “type”: “bool” } ], “internalType”: “struct OHMarketplace.MarketItem[]”, “name”: “”, “type”: “tuple[]” } ], “stateMutability”: “view”, “type”: “function” }, { “inputs”: [], “name”: “owner”, “outputs”: [ { “internalType”: “address”, “name”: “”, “type”: “address” } ], “stateMutability”: “view”, “type”: “function”}]');

i seem to be getting the same error, maybe there is something else im missing

mikeze · December 9, 2021, 6:56pm

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

IAmJaysWay · December 9, 2021, 7:04pm

Could you try one more thing, it seems that when I paste the code in the forum it changes my quotation marks as seen in the image below. I get the same error as you, with the wrong quotation marks: so if you could try change them otherwise Im a bit stumped sorry…

Ioulaum · December 9, 2021, 7:08pm

Look at the video tutorial itself for example:

https://youtu.be/WZWCzsB1xUE?t=581 (9:41)

There are several NFTs that for some reason don’t have any images showing. And I’m seeing the same kind of thing when I run the site myself… Not all of my NFTs show.

I could see that being a problem related to IPFS, but Opensea managed to pick up my NFTs fine, so I’m not sure what exactly is causing this.

mikeze · December 9, 2021, 7:08pm

nope same error

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

along with plenty of stack frames

IAmJaysWay · December 9, 2021, 7:21pm

Yes @ifelse, you could build such functionality yourself. You could store offer data on your Moralis server and send notifications to users if someone makes an offer on an NFT, to a user that is registered to the marketplace and holds that NFT. Your imagination is the limit to what you can build

and @mikeze Im Sorry I can have a look deeper and ask forward, but if it isn’t an error with the contractABI and you cant get it to work with even setting the contractABI to a simple string like in the image below, Im out of ideas as I cant replicate the error.

IAmJaysWay · December 9, 2021, 7:16pm

@Ioulaum sometimes there may be some errors indexing NFT images, but the Team are working on fixing these issues :), in the mean while you can manually fetch the images from the metadata as I have updated on the boilerplate repo:

github.com

ethereum-boilerplate/ethereum-nft-marketplace-boilerplate/blob/main/src/hooks/useNFTBalance.js

import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";
import { useEffect, useState } from "react";
import { useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis";
import { useIPFS } from "./useIPFS";

export const useNFTBalance = (options) => {
  const { account } = useMoralisWeb3Api();
  const { chainId } = useMoralisDapp();
  const { resolveLink } = useIPFS();
  const [NFTBalance, setNFTBalance] = useState([]);
  const {
    fetch: getNFTBalance,
    data,
    error,
    isLoading,
  } = useMoralisWeb3ApiCall(account.getNFTs, { chain: chainId, ...options });

  useEffect(async () => {
    if (data?.result) {
      const NFTs = data.result;

This file has been truncated. show original

mikeze · December 9, 2021, 7:41pm

okay what about this issue, when i click on the a any of my added collections it gives this image

then after a minute it times out and gives me this

DevWill · December 9, 2021, 7:55pm

I’m getting this same issue too. Yours says Collection 0 but I do have 103 in mine and I get the same fetch error.

mikeze · December 9, 2021, 7:57pm

It happens on all 3 collections even though they all have a few hundred of items.

bataurus · December 9, 2021, 7:58pm

When working through the tutorial and I believe I completed everything buts synching the table, I get the following:

Any thoughts on this?

DevWill · December 9, 2021, 7:58pm

Yeah, i’m sure we will get an answer here in a few minutes. Moralis team is the best forsure.

mikeze · December 9, 2021, 8:00pm

it also happens in the your collection page

Aditya · December 9, 2021, 10:42pm

Hello, I sucessfully run the code but on Every NFT it shows me

If anybody know what I did wrong then let me know

IAmJaysWay · December 9, 2021, 10:49pm

This is most likely due to the indexing of NFTs still being fixed, so the dApp is resorting to the manual metadata fetch which can timeout! You can try limiting the fetch initially to fewer NFTs not the complete 100+ collection (this can be done in the token.getAllTokenIds() web3 API call.

I’ll go ahead and modify the boilerplate to combat for the “Failed to Fetch()” error for now, but this should all get fixed when we get an update for indexing of NFTs on Moralis side

IAmJaysWay · December 9, 2021, 10:51pm

hi @bataurus,

Looks like your line 7 in the MoralisDappProvider.js should be updated to:

const { web3, Moralis, user } = useMoralis();

Hope this helps!

Ioulaum · December 10, 2021, 12:10am

I tried that and it didn’t work. So I investigated it a little further, and even tried axios instead of fetch…

So, for the token_uri https://creatures-api.opensea.io/api/creature/7 (for example), the problem seems to be that access to the URL is being blocked by the CORS policy. Because they haven’t set the header [Access-Control-Allow-Origin: *]

What that likely means is that for consistency in getting NFT metadata, you’d likely need a proxy server that can fetch the information even if the domain that the information is on, doesn’t have a suitable CORS policy.

I assume Opensea itself doesn’t have this problem because they pull the data on the server side rather than on the client.

Edit #1: On further testing… There’s some inconsistency. Some of the Opensea URLs succeed and the other ones don’t.

It’s also possible that there’s a rate limiting issue of some kind happening here.

If it’s on the browser level, then I wonder if it’s the limit of total simultaneous connections to a domain.

Edit #2: So, I tested the page with your modifications, while also using a Chrome Extension to override the CORS policy, and now it succeeded… So it does look like it’s a CORS issue.

Moesif Origin & CORS Changer: https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc/related?hl=en-US

Edit #3: cors-anywhere on GitHub can create a basic proxy for APIs:

I commented out line 26 in its server.js to remove a restriction that was getting in the way of it working for me.

Could also use something like Apigee I assume, but that’s more work than I’m trying to put in right now.

mikeze · December 9, 2021, 11:07pm

alright ill try to figure that out lol

Ioulaum · December 9, 2021, 11:34pm

FYI, I get this error intermittently while working on a Testnet Moralis server:

Failed to load resource: the server responded with a status of 400 () https://my id.usemoralis.com:2053/server/functions/getNFTs

So sometimes the data is loaded fine and sometimes it isn’t.

Edit: I think it may be happening more often when interacting with Rinkeby rather than the Mainnet.

It’s also a little surprising that an app that’s configured for Testnet works fine if I switch to Mainnet… Although I think that’s a good thing, as far as this testing experience goes, since the Opensea course uses collections that are on the Mainnet.

Ioulaum · December 10, 2021, 12:24pm

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.