Skip to content

Instantly share code, notes, and snippets.

@KBPsystem777
Created February 14, 2022 18:10
Show Gist options
  • Save KBPsystem777/c29808efd5e85e741c6e4fd701f0a175 to your computer and use it in GitHub Desktop.
Save KBPsystem777/c29808efd5e85e741c6e4fd701f0a175 to your computer and use it in GitHub Desktop.
Minting Sample
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 { nftaddress, nftmarketaddress } from "../config"
import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
import Market from "../artifacts/contracts/NFTMarket.sol/NFTMarket.json"
export default function CreateItem() {
// Step 1: Uploading first the image asset to IPFS
// Save the returned URL from IPFS
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 createMarket() {
const { name, description, price } = formInput
if (!name || !description || !price || !fileUrl) return
// Minting process
// Create a JSON data with "name", "description" and "image" properties. -- You can add up some properties like tags, etc.
const data = JSON.stringify({
name,
description,
image: fileUrl,
})
try {
// Upload the json data to IPFS again
const added = await client.add(data)
const url = `https://ipfs.infura.io/ipfs/${added.path}`
/* after file is uploaded to IPFS, pass the URL to save it on BSC/Polygon network */
createSale(url)
} catch (error) {
console.log("Error uploading file: ", error)
}
}
async function createSale(url) {
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
let contract = new ethers.Contract(nftaddress, NFT.abi, signer)
let transaction = await contract.createToken(url)
let tx = await transaction.wait()
let event = tx.events[0]
let value = event.args[2]
let tokenId = value.toNumber()
const price = ethers.utils.parseUnits(formInput.price, "ether")
// On this part, we are enrolling or listing the asset to the marketplace
contract = new ethers.Contract(nftmarketaddress, Market.abi, signer)
let listingPrice = await contract.getListingPrice()
listingPrice = listingPrice.toString()
transaction = await contract.createMarketItem(nftaddress, tokenId, 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 Eth"
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={createMarket}
className="font-bold mt-4 bg-red-500 text-white rounded p-4 shadow-lg"
>
Create NFT
</button>
</div>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment