Cloning OpenSea NFT Boilerplate Questions

i did it still does not seem to like the network… and there by i am unable to create the smart contract… let me send you a video shortly

is there a max limit of 20 for useMoralisWeb3ApiCall in the free tier? I am asking because I am trying to fetch 200 NFTs but I am only getting 20 NFTs

as you can see i am signing into metamask

here is the network setting for the polygon network … i feel it does not like it

I am not 100% sure this will work but try adding the mumbai testnet using the chainlist.org and then reconnect with remix

1 Like

Does this happen on another network?

Here’s a few things you can try and then try deploying again, if it doesn’t work move onto the next one:

  • try a different Mumbai RPC like https://matic-mumbai.chainstacklabs.com
  • clear browser cache
  • reset your MetaMask account - Settings > Advanced > Reset Account
1 Like

No, the limit of 20 is just hardcoded by default with this boilerplate. You can change it from two files:

\src\hooks\useNFTTokenIds.js

chain: chainId,
address: addr,
// change the limit
limit: 100,

\src\components\NFTTokenIds.jsx

// get rid of the slice so just map NFTTokenIds directly
{inputValue !== "explore" &&
            NFTTokenIds.slice(0, 20).map((nft, index) => (

Thanks, it worked. I wasn’t changing the number inside the slice :slight_smile:

1 Like

Is there a way to add the ability for users (not me the contract deployer) to create their own NFT collection or launch their already created collection and list that collection directly on the marketplace? Like automatically add it into the collections.js file or some other method? I want to allow people to create or add their own NFT collections uncensored & with no need for me to approve or add their collection to the collections.js manually.

thanks will give this a go

could you show proper syntax for adding an image as the background as well? not just a color

launch their already created collection and list that collection directly on the marketplace? Like automatically add it into the collections.js file or some other method

You could save collections e.g. through a form that a user submits which is saved to your Moralis server in a Class, and then pull the list from your server instead of collections.js.

Is there a way to add the ability for users (not me the contract deployer) to create their own NFT collection

You would need a premade contract in place where the user could deploy it with their own wallet e.g. using a name, or IPFS link for ERC1155), and then maybe have another page for minting to it, uploading to IPFS.

1 Like

Saving collections through a form that the user submits & saves to the moralis server is a great solution & exactly what im looking for, thank you for the recommendation. Is there somewhere I could read more about this process? Or is it simple enough for you to explain here? Im not familiar with saving to the moralis server in a class or how to pull the list from the server instead of the collections.js.

This is more a CSS question but here’s an example:

backgroundImage: "url('https://picsum.photos/1920/1080')", // set background image
backgroundSize: 'cover', // set size to cover

You can read more here: CSS Backgrounds (w3schools.com)

1 Like

same issue as before, running that in the css does nothing to the background. I just need to know the proper way to insert an image in the app.js file. Editing this “Layout style={{ height: ‘100vh’, overflow: ‘auto’, background: ‘red’ }}>” in line 65/116 makes the red background show up perfectly, but what do I have to type to make that background to display an image from my public images folder instead of just a red color? This has seriously taken me 50+ hours of research & trial & error & I can not figure it out at all. Feel like a complete idiot, know this must be a simple command that Im just not figuring out

I should have specified that the example I posted is still using style within React (following on the background: red example), which has different syntax from straight CSS, so the way you’ve done it won’t work.

You also have to select the right component/element.

index.css

body .ant-layout {
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
}

Inspecting page elements is your best friend here; you can also add styles directly within your browser to test things.

1 Like

Very frustrating man, this does not work. Can you just treat me like im a 12 year old who is doing this for the first time & lay it all out with nothing to the imagination? Everything I do doesnt work. Transfered the image to the src directory & nothing. Do I have to create a new app.css & app.js instead of using the app.jsx or insex.css? I cant not believe this is happening man, no one can help me & its mind blowing bc this is the most simple thing in my entire project, yet I can not find a solution anywhere!

doesnt work sbljasbsa

all that needs to happen is the background: element in app.jsx needs to point to the image. It worked fine point to a color, I jst need help with the proper syntax. The images are in my public folder inside an images folder & the image file is titled skinny.jpg. Please just tell me how to put that into the background, no need for a detailed explanation.

You can do:

src\images\skinny.jpg

index.css

body .ant-layout {
  background-image: url('/src/images/skinny.jpg');
  background-size: cover;
}

If you want to use public folder, you have to do a few other things.

1 Like

thank you so much this finally worked!! I am so grateful!! YOU ARE THE MAN!