Cloning OpenSea NFT Boilerplate Questions

Hello!! I have a doubt… Ethereum Nft market place boiler plate will only see the Nft that are added in collections.js? Thanks

Hi, where do i host this to serve it online so others can use it and give feedback? What server hosting environment do i need to run it? Heroku and Vercel give too many errors much like on my computer.

What environment do i need on my computer (as localhost) to run this app? There seems to be things missing even though i’ve installed dependencies multiple times.

You’ve obviously run it somewhere …

Thanks

Managed to get it working in gitpod by adding the server details in .env file (they were missing even though it was in the files). However, nothing else happens.

How do i create this same gitpod environment on my pc to run and modify in localhost?

Says “this NFT is not for sale” on every one.

How and where do I create my own contracts to run the marketplace?

Thanks

@ivan @cryptokid
Is the useWeb3ExecuteFunction() compatible with walletconnect? I’ve used the Moralis.executeFunction() before with success.

Just curious if they operate the same as it was provided in the boilerplate

Thanks guys

Hi @Fitz

useWeb3ExecuteFunction() underhood is the same Moralis.executeFunction() so it should work correctly with WC too. Do you have any problems with it?

@Tuxzdev

Yep, you as the marketplace owner can add as many collections as you wish to be visible/“verified”.

@latok,

Good to see you got it running! In the MoralisDappProvider.js file you can add your own marketplace smart contract details (address and abi). To deploy the contract you could use Remix or Hardhat, what ever you are more comfortable with. I would also make sure you have a couple of NFTs on the Mumbai testnet and add the collection details of these NFTs to the helpers/collections.js file so you can try out the listing and purchasing functionality :+1:

Thanks for the reply.

I’m looking to understand the concept of smart contracts and NFTs within the marketplace. This is intended to be a clone of opensea so i’d like to add the same functionality such as categories, collections, users being able to add their NFTs for sale and other users being able to buy them and users being able to see their own NFTs for sale on the marketplace. It might be asking a lot but I thought that’s what the boilerplate can become.

From what i can see, the marketplace has 1 smart contract and all NFTs are linked to that and which gives certain info and carries out functions. Is this wrong or right? With the dabit3 boilerplate sample NFTs were minted from metamask but the images were not stored anywhere. This was done from the form.

On the test app (which only runs on gitpod) only 6 images for Testmages and 5 images for Pixelshow as collections. There’s nothing in ‘Your collection’ tab. There’s a lot more images in the hel[pers/collections.js file but these are not showing?

This draws inspiration from ‘dabit3 NFT marketplace’ as acknowledged and that includes a form to upload NFTs. There’s no upload form in this. I’d like users to be able to upload their NFTs to IPFS or Storj and these then be minted on polygon and available in the marketplace.

Would i be able to integrate bootstrap into this for the UI? I’m not sure what it uses. The app isn’t responsive and items don’t show on mobile.

(I come from a background of web development but not apps such as this so mainly front end and html/css).

Thanks

Ohh great thanks!!! And could you explain to me how to add a small commission for selling collections that are sold in my market place?, please!! :pray::pray:

Hi, where is the styling (css, js etc) for the front end? I’ve got the style code in src > and src > uikit. Is that it?

Can i add bootstrap for the front end?

Can i use wordpress for the front end and this boilerplate and code in the backend? I presume through REST API.

Thanks

This works really well - thank you! :smiley:

1 Like

Build failed on netlify too … just a lot of errors :worried:

It’s failing to build on any online platform such as heroku, vercel, netlify, etc. And they all can run a react app.

I’m using the nft marketplace boilerplate and having some issues. I was able to get it up and running and deploy the marketplace contract but some of the web3 API calls are having issues. I’ve tried on Ropsten and Rinkeby testnet.

I get error 400 for getAllTokenIds and getNativeBalance.

When I checked the payload for getAllTokenIds it it sending explore as the address.

address: "explore"
chain: "0x3"
limit: 10

Here’s the code in src/hooks/useNFTTokenIds.js

export const useNFTTokenIds = (addr) => {
  const { token } = useMoralisWeb3Api();
  const { chainId } = useMoralisDapp();
  const { resolveLink } = useIPFS();
  const [NFTTokenIds, setNFTTokenIds] = useState([]);
  const [totalNFTs, setTotalNFTs] = useState();
  const [fetchSuccess, setFetchSuccess] = useState(true);
  const {
    fetch: getNFTTokenIds,
    data,
    error,
    isLoading,
  } = useMoralisWeb3ApiCall(token.getAllTokenIds, {
    chain: chainId,
    address: addr,
    limit: 10,
  });

I don’t understand where “explore” is coming from. I tried replacing addr with account set by const { account } = useMoralisWeb3Api(); but I realized that’s probably not the right address. Should it be using the ERC1155 Token Contract address here or the user’s wallet?

For getNativeBalance the payload is just chain: "eth" and the code

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 });
  const [fetchSuccess, setFetchSuccess] = useState(true);

I appreciate any guidance you can provide. I’m new to JS/React/Moralis but have a decent background in Python and IaC.

Thanks!

Thanks so much for the response! I was wondering whether the suggestions you have made (minting a collection or obtaining NFTs on a testnet) require and cost/payment?

I need to cancel the function of selling, what should I do?
thank you @YosephKS @cryptokid @ivan

In the NFT Marketplace you mention deploying the smart contract at the beginning of the video, but i can’t seem to find where you cover that. Could you provide more info on how to configure and deploy a contract for this site? Also, where do i find the existing truffle project contract used in the video? I couldn’t find it on GitHub. Thanks

Hi @hooks ,

You could have a look at a solution Skanus, provided earlier in this thread :slight_smile:

1 Like

Hi @joejohnson,

You can find the contract used in this tutorial in src/contracts/marketplaceBoilerplate.sol. This can be deployed on Remix, by compiling it and using Inject Web 3 to deploy also if you’re comfortable you can use hardhat :slight_smile:

@ZeusExMachina
No payment for testing out on testnet, you can use for example https://faucet.polygon.technology/ to get some MATIC on the Mumbai testnet and use this to mint some NFTs on the network!

Hey @Charliemc,

The explore is probably coming all the way from src/App.jsx where:

const [inputValue, setInputValue] = useState("explore");

This is done to identify whether to show a collection or the explore page on the “Explore Market” tab. But addr should be set to the Tokens Contract address yes.

1 Like

Hi, it’s been several days since I tried to make this project working with my contracts deployed on rinkeby network.

I have some issues either when i paste the ABI on the provider file and also when I try to get the NFTs from useNFTTokenIds.js file. In the second case, it seems that token.getAllTokenIds works only within the async function (like I’ve found in the docs) and not within useMoralisWeb3ApiCall (outside of useEffect call).

I checkout also to the suggested commit but both the issues are still there.

Any help?

Thank you!