Cloning OpenSea NFT Boilerplate Questions

Tuxzdev · December 20, 2021, 12:22pm

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

latok · December 20, 2021, 5:26pm

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

latok · December 20, 2021, 6:53pm

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

Fitz · December 21, 2021, 3:46am

@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

Yomoo · December 21, 2021, 8:52am

Hi @Fitz

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

IAmJaysWay · December 21, 2021, 9:11am

@Tuxzdev

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

IAmJaysWay · December 21, 2021, 9:19am

@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

latok · December 21, 2021, 10:40am

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

Tuxzdev · December 21, 2021, 12:37pm

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!!

latok · December 21, 2021, 2:54pm

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

itsybitsycyber · December 21, 2021, 4:19pm

This works really well - thank you!

latok · December 21, 2021, 6:27pm

Build failed on netlify too … just a lot of errors

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

Charliemc · December 22, 2021, 12:44am

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!

ZeusExMachina · December 22, 2021, 2:36am

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?

hooks · December 22, 2021, 4:47am

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

joejohnson · December 22, 2021, 5:12am

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

IAmJaysWay · December 22, 2021, 10:04am

Hi @hooks ,

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

Skanus:

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];
        }

IAmJaysWay · December 22, 2021, 10:14am

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

IAmJaysWay · December 22, 2021, 10:28am

@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.

orbite · December 23, 2021, 9:44pm

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!