Cloning OpenSea NFT Boilerplate Questions

Ioulaum · December 14, 2021, 4:15pm

btw, just for reference, I tested my proxy idea in the current updated version of the boilerplate, and overall it ends up performing faster with all the images showing.

src/components/NFTBalance.jsx

  const handleChange = (e) => {
    setAmount(e.target.value);
  };

  // Start Change
  if (NFTBalances?.result) {
    NFTBalances.result.forEach(element => {
    if (element.token_uri.indexOf('workaround-proxy') < 0) {
      element.token_uri = `https://workaround-proxy.herokuapp.com/${element.token_uri}`
    }
  });
  }
  // End Change
  
  console.log("NFTBalances", NFTBalances);
  return (
    <>
      <div style={styles.NFTs}>

So, some sort of proxy / caching layer may well be a good intermediate solution.

I’m also thinking of routing the NFT images received through a CDN so they’re more stable and don’t run into request limitations on origin server.

IAmJaysWay · December 14, 2021, 9:08pm

@itsybitsycyber,

I added an approval button in the NFT balance tab, which should allow a user to give the market place permission to transfer the users NFTs. It should be updated on the “ethereum-nft-marketplace-boilerplate” repository on GitHub, if you wanna have a look for yourself, but here is the general idea:

const contractProcessor = useWeb3ExecuteFunction();

  async function approveAll(nft) {
    setLoading(true);  
    const ops = {
      contractAddress: nft.token_address,
      functionName: "setApprovalForAll",
      abi: [{"inputs":[{"internalType":"address","name":"operator","type":"address"},{"internalType":"bool","name":"approved","type":"bool"}],"name":"setApprovalForAll","outputs":[],"stateMutability":"nonpayable","type":"function"}],
      params: {
        operator: marketAddress,
        approved: true
      },
    };

    await contractProcessor.fetch({
      params: ops,
      onSuccess: () => {
        console.log("Approval Received");
        setLoading(false);
        setVisibility(false);
        succApprove();
      },
      onError: (error) => {
        setLoading(false);
        failApprove();
      },
    });
  }

I tested it out by authenticating with a new user and it seemed to work good allowing me set approval and after that list the NFT

@lion33, @Skanus you might also find this helpful…

IAmJaysWay · December 14, 2021, 9:17pm

Cool @Ioulaum , I’ll give it a go and maybe add a comment to the boilerplate if people want to use something like this as a solution for now

paultaran · December 14, 2021, 9:23pm

Hi, I followed the video I Cloned OpenSea in 2 Hours - Building a Cross-Chain NFT Marketplace, everything its working fine but on Polygon and Polygon Mumbai Testnet NFTs are not showing:

Polygon:

Mumbai:
Eth Mainnet:

All NFTs are minted on opensea, on Eth they are bought from official collections and on Polygon and Mumbai I minted them myself using testnet.opensea.

How or where can I mint a nft that follows the metadata standards and which are the metadata standards? If you could help me with a link to a tutorial or documentation on how to mint nfts with this specific metadata standards on Moralis I would be so happy.
Any information is helpful.

Thank you for your time!

IAmJaysWay · December 14, 2021, 9:36pm

Great to hear you enjoyed the tutorial @paultaran!

There is most likely no error in the metadata if you have minted the NFTs on OpenSea. There are currently a few kinks Moralis is solving with indexing of the NFTs, that are causing some NFT images to not show. In the meanwhile as a workaround you can look at something like what @Ioulaum has done (see earlier in this thread) with using a proxy to get all images to show:

Skanus · December 15, 2021, 12:14am

yep, you’re right, i did it, cause in another way i cant sell anything, the problem is when i try to re-sell the same nft that i bought before, its weird because if i go to the collection contract nd get the owner of these token i got the correct address, nd if i try to approve these address got the error : “ERC721: approval to current owner”.

edit: i got the issue, when i sell an nft, the aproval for the marketplace is seted to false, so if i try to sell it again, i cant do it, i need to set the approval to true for the marketplace after sell any nft

paultaran · December 14, 2021, 11:40pm

Still its not working, I guess its because of minting using testnet.opensea. This is the token_uri: https://testnets-api.opensea.io/api/v2/metadata/mumbai/0x2953399124F0cBB46d2CbACD8A89cF0599974963/0xaf4d633677a6f00a686edc7cfd7baa64241ac03f000000000000040000000001 and its not working even if you test it in browser, although there are some token_uri that are working but the image doesn’t show on the nft markeptlace. I even tested minting on polygon using main opensea site but it doesn’t work. Do you know any other place to mint an nft or a tutorial of building a mint NFT site on polygon using Moralis or a way to fix it?

Thank you!

IAmJaysWay · December 15, 2021, 12:19am

You can always create your own collection store the metadata on ipfs and deploy a smart contract to mint the NFTs. This tutorial on Moralis youtube channel should have everything you need to get going
https://www.youtube.com/watch?v=VglTdr0n5ZQ

Skanus · December 15, 2021, 12:40am

I have implemented a function to cancel the sale of nft, in case the seller wants to get his nft back

this is the solidity code

function cancelSale(uint itemId) public nonReentrant{
            require(msg.sender == idToMarketItem[itemId].seller, "You not are the owner of this item"); 
            require(idToMarketItem[itemId].sold == false,"The item has been sold");
            IERC721(idToMarketItem[itemId].nftContract).transferFrom(address(this), msg.sender, idToMarketItem[itemId].tokenId);
            delete idToMarketItem[itemId];
        }

was implemented on the boileplate of the marketplace contract
I hope it is well implemented and helpful

lion33 · December 15, 2021, 2:55am

it works !
Thank you!! for helping me !!

lacertus · December 15, 2021, 3:53pm

Having issues with this because the files on github are completely different from the video, what should I do ?

ivan · December 15, 2021, 3:55pm

Fitz · December 15, 2021, 4:12pm

Thank you so much for this!

Is there a simple way to allow for updating the item listing price after it has been placed for sale?

IAmJaysWay · December 15, 2021, 4:20pm

@lacertus

See from slightly above in the thread. You are able to checkout the version of the boilerplate at time of recording

lacertus · December 15, 2021, 5:04pm

this worked for me thanks

Ioulaum · December 16, 2021, 1:01am

As far as it goes, I’ve seen the Opensea API itself fail also for returning metadata… Their Heroku app was down.

Ideally, all the valid metadata for NFTs needs to be cached somewhere so that the origin server being down doesn’t kill it.

Skanus · December 16, 2021, 1:55am

i think with something like this:

function updatePrice(uint itemId, uint256 price) public nonReentrant{
            require(msg.sender == idToMarketItem[itemId].seller, "You not are the owner of this item"); 
            idToMarketItem[itemId].price = price;
        }

test it on remix

latok · December 16, 2021, 9:55pm

Hi, i’ve cloned the repository but cannot get it to work at all. I’m using cmd in windows.

I’ve followed the instructions, i.e. cloned, installed dependencies, added server and app keys in .env, added the deployed market contract (not my own but the one you gave here at the start).

I’ve not been able to "Sync the MarketItemCreated event /src/contracts/marketplaceBoilerplate.sol contract with your Moralis Server, making the tableName MarketItems" because i don’t how to, can anyone help?

I’ve “Run your App” but all i get is a lot of errors below.

Even deployed to vercel and heroku direct from git repository but too too many errors and deployment fails.

Thanks

latok · December 16, 2021, 9:48pm

“You will have to deploy the contract yourself and provide the ABI and marketplace address in string format over in the MoralisDappProvider.js file. Also you will likely want to add NFT collections you hold items in, into the helpers/collections.js if you wish to test out the selling and buying these NFT’s using the marketplace”

How to deploy my own contract within this app demo?

Where would I host this app to run as it should? Where are the NFT assets such as images and metadata saved?

Tests i’m doing on heroku or vercel etc don’t work, the apps don’t run and there’s many errors.

I want to use polygon testnet first then the mainnet.

Thanks

brown2020 · December 16, 2021, 10:28pm

I’m having trouble compiling once I add my ABI. Your example shows adding it as a string, but this wont compile. I added it as a json object and as a const but none of those approaches compile for me either. Everything does compile and run but fails once I add the ABI. What is the correct way? Does it really work as a string for you?

UPDATE: It compiles if you strip the ABI. Cutting and pasting from Remix doesn’t work.