Created
February 14, 2022 18:10
-
-
Save KBPsystem777/c29808efd5e85e741c6e4fd701f0a175 to your computer and use it in GitHub Desktop.
Minting Sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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