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 
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!
You can read about interacting with your server (creating, updating, querying) here: Database - Moralis
So start with some examples there and then work on saving input data.
1 Like
Hi @alex , I double checked it. Market Item Created does show a entry for listing , but it’s not showing a buy badge or on sale badge on the NFT market. The 1 june 2022 shows the entry for new item listed on the market, yet there’s not a buy option
no luck still the same issue
Can you try a different wallet and browser? Does it happen if you try deploying to another testnet?
import { useState } from 'react'
import { ethers } from 'ethers'
import { create as ipfsHttpClient } from 'ipfs-http-client'
import { useRouter } from 'next/router'
import Web3Modal from 'web3modal'
const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0')
import {
marketplaceAddress
} from '../config'
import NFTMarketplace from '../artifacts/contracts/NFTMarketplace.sol/NFTMarketplace.json'
export default function CreateItem() {
const [fileUrl, setFileUrl] = useState(null)
const [formInput, updateFormInput] = useState({ price: '', name: '', description: '' })
const router = useRouter()
async function onChange(e) {
const file = e.target.files[0]
try {
const added = await client.add(
file,
{
progress: (prog) => console.log(`received: ${prog}`)
}
)
const url = `https://ipfs.infura.io/ipfs/${added.path}`
setFileUrl(url)
} catch (error) {
console.log('Error uploading file: ', error)
}
}
async function uploadToIPFS() {
const { name, description, price } = formInput
if (!name || !description || !price || !fileUrl) return
/* first, upload to IPFS */
const data = JSON.stringify({
name, description, image: fileUrl
})
try {
const added = await client.add(data)
const url = `https://ipfs.infura.io/ipfs/${added.path}`
/* after file is uploaded to IPFS, return the URL to use it in the transaction */
return url
} catch (error) {
console.log('Error uploading file: ', error)
}
}
async function listNFTForSale() {
const url = await uploadToIPFS()
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
/* next, create the item */
const price = ethers.utils.parseUnits(formInput.price, 'ether')
let contract = new ethers.Contract(marketplaceAddress, NFTMarketplace.abi, signer)
let listingPrice = await contract.getListingPrice()
listingPrice = listingPrice.toString()
let transaction = await contract.createToken(url, price, { value: listingPrice })
await transaction.wait()
router.push('/')
}
return (
<div className="flex justify-center">
<div className="w-1/2 flex flex-col pb-12">
<input
placeholder="Asset Name"
className="mt-8 border rounded p-4"
onChange={e => updateFormInput({ ...formInput, name: e.target.value })}
/>
<textarea
placeholder="Asset Description"
className="mt-2 border rounded p-4"
onChange={e => updateFormInput({ ...formInput, description: e.target.value })}
/>
<input
placeholder="Asset Price in Bnb"
className="mt-2 border rounded p-4"
onChange={e => updateFormInput({ ...formInput, price: e.target.value })}
/>
<input
type="file"
name="Asset"
className="my-4"
onChange={onChange}
/>
{
fileUrl && (
<img className="rounded mt-4" width="350" src={fileUrl} />
)
}
<button onClick={listNFTForSale} className="font-bold mt-4 bg-pink-500 text-white rounded p-4 shadow-lg">
Create NFT
</button>
</div>
</div>
)
}
So I found this, which looks like a great concept & code for a create-item page for users. But, its using hardhat & imports like ethers & use router, which arent used in this moralis build. Is there a way to make this concept compatible with this boilerplate? I know it may be a bit to ask but im sure a lot of people could benefit from this. Im making this marketplace completely free to use for all users so any help is much appreciated & will be paid forward.
https://www.youtube.com/watch?v=GKJBEEXUha0 (covers this page starting around 1:37:00)
Yes it’s possible. You just implement the Moralis specific functions where they need to be e.g. saving data to the DB using the data. In that example, it’s from the useState of formInput.
Break down what needs to be done into steps:
- Create a form with inputs for adding a collection
- Have the form’s data be used
- Save this data
Start simple so things are working first e.g. create one input that saves a simple string into the DB and query it back.
For populating the collections like the boilerplate
- Query the DB for the collections list
- Format the data if needed so it’s in the right structure for the component to use
- Change the code (component, hook(s)) so it uses this data source instead of collections.js
1 Like
i caned the RPC to the Mumbai speedy node and it worked!
Have you changed your NFTTokenIds.jsx in any way? Also sold needs to be false and confirmed needs to be true for the specific NFT MarketItems object in your server, can you check this?
okay so my server got deleted due to some reason , i made a new server and add a sync to it , i named the table “MarketItems”. I listed some NFT’s on the marketplace , other classes are updated except for “MarketItems” and there’s not even a single entry in it. Help it’s urgent. thank you
Try restarting your server. What is your contract address? Are you using the same sync settings from last time?
hello @alex , so I fixed the error but a new one popped up. I am getting an error when i try to re-list the items i bought from the marketplace. For example - i listed NFT from account 1 and i bought it again from account 2. now when i log in with account 2, in “Your Collection” page the NFT is there but when i try to re-list it , it throws me an error.
