From fe2be534e6be9d136278b491f57ad110f6844799 Mon Sep 17 00:00:00 2001 From: Abhinav0909 Date: Tue, 8 Mar 2022 20:42:18 +0530 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20Change=20classs=20to=20class?= =?UTF-8?q?Name=20,use=20alt=20property=20in=20img,change=20old=20tailwind?= =?UTF-8?q?=20config=20to=20new=20tailwind=20config=20and=20set=20some=20e?= =?UTF-8?q?slint=20rules=20to=20avoid=20warnings.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/.eslintrc.json | 9 +- client/pages/create-certificate.js | 340 ++++++++++++++++++----------- client/public/assests/img.jpg | Bin 0 -> 122900 bytes client/public/assests/img2.jpg | Bin 0 -> 124923 bytes client/styles/globals.css | 5 +- client/tailwind.config.js | 4 +- 6 files changed, 231 insertions(+), 127 deletions(-) create mode 100644 client/public/assests/img.jpg create mode 100644 client/public/assests/img2.jpg diff --git a/client/.eslintrc.json b/client/.eslintrc.json index 3af52d7..10f71dd 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -1,3 +1,10 @@ { - "extends": ["next/babel"] + "extends": ["next/babel"], + "rules": { + //You can remove this after removing warnings + "@next/next/no-img-element": "off",//This is used to remove the warnings of img tag.We have to use next image for that + "jsx-a11y/alt-text":"off"//we have to write alt tag for every img } +} + + \ No newline at end of file diff --git a/client/pages/create-certificate.js b/client/pages/create-certificate.js index f3ce410..1fa93a8 100644 --- a/client/pages/create-certificate.js +++ b/client/pages/create-certificate.js @@ -3,7 +3,7 @@ import { ethers } from "ethers"; import { create as ipfsHttpClient } from "ipfs-http-client"; import { useRouter } from "next/router"; import Web3Modal from "web3modal"; - +import Image from "next/image"; const client = ipfsHttpClient("https://ipfs.infura.io:5001/api/v0"); import { nftAddress, nftTransferAddress } from "../../CONTRACT/config"; @@ -13,132 +13,226 @@ import NFTTransfer from "../abi/NFTTransfer.json"; import { isCommunityResourcable } from "@ethersproject/providers"; export default function CreateItem() { - const [fileUrl, setFileUrl] = useState(null); - const [formInput, updateFormInput] = useState({ name: '', description: '' }); - - const router = useRouter(); - - /** - * On nft file change - * @param {event} e event - */ - async function onChange(e) { - //selecting the first file, which is uploaded - const file = e.target.files[0]; - try { - //uploading it to ipfs - const added = await client.add( - file, - { - progress: (prog) => console.log(`received: ${prog}`) - } - ); - //creating the url to fetch the uploaded file - const url = `https://ipfs.infura.io/ipfs/${added.path}`; - - setFileUrl(url); - } catch (error) { - console.log(error); - } + const [fileUrl, setFileUrl] = useState(null); + const [formInput, updateFormInput] = useState({ name: "", description: "" }); + const [checkBox, setCheckBox] = useState(false); + const [dropdown, setDropdown] = useState(false); + const router = useRouter(); + + /** + * On nft file change + * @param {event} e event + */ + async function onChange(e) { + //selecting the first file, which is uploaded + const file = e.target.files[0]; + try { + //uploading it to ipfs + const added = await client.add(file, { + progress: (prog) => console.log(`received: ${prog}`), + }); + //creating the url to fetch the uploaded file + const url = `https://ipfs.infura.io/ipfs/${added.path}`; + + setFileUrl(url); + } catch (error) { + console.log(error); } - - /** - * Create a new creatificate. - */ - async function createCertificate() { - //getting name, description from the formInput dictionary - const { name, description } = formInput; - - //If any of them is not present then it will not create the Item - if (!name || !description || !fileUrl) return; - - const data = JSON.stringify({ - name, description, image: fileUrl, - }); - - try { - //uploading the certificate to ipfs - const added = await client.add(data); - //creating url to fetch the uploaded certificate - const url = `https://ipfs.infura.io/ipfs/${added.path}`; - console.log(url) - //listing the certificate or marking it as sale - putCertificate(url); - } catch (error) { - console.log("Error in Uploading File:", error); - } + } + + /** + * Create a new creatificate. + */ + async function createCertificate() { + //getting name, description from the formInput dictionary + const { name, description } = formInput; + + //If any of them is not present then it will not create the Item + if (!name || !description || !fileUrl) return; + + const data = JSON.stringify({ + name, + description, + image: fileUrl, + }); + + try { + //uploading the certificate to ipfs + const added = await client.add(data); + //creating url to fetch the uploaded certificate + const url = `https://ipfs.infura.io/ipfs/${added.path}`; + console.log(url); + //listing the certificate or marking it as sale + putCertificate(url); + } catch (error) { + console.log("Error in Uploading File:", error); } - - /** - * Creating the NFT and Making it to sale. Calling the web 3.0 contracts here. - * @param {string} url ipfs url where certificate is uploaded - */ - async function putCertificate(url) { - const web3Modal = new Web3Modal(); - const connection = await web3Modal.connect(); - const provider = new ethers.providers.Web3Provider(connection); - const signer = provider.getSigner(); - - //NFT Contract - let contract = new ethers.Contract(nftAddress, NFT.abi, signer); - //minting the certificate - let transaction = await contract.createToken(url); - //waiting for the minting transaction to finish - let tx = await transaction.wait(); - - let event = tx.events[0]; - let value = event.args[2]; - let tokenId = value.toNumber(); //Token Id Of the NFT - - - //NFT Market Contract - contract = new ethers.Contract(nftTransferAddress, NFTTransfer.abi, signer); - - //fetching listing price from the contract - let listingPrice = await contract.getListingPrice(); - listingPrice = listingPrice.toString(); - - //listing the certificate. - transaction = await contract.createCertificate( - nftAddress, - tokenId, - { value: listingPrice } - ); - //waiting for the transaction to complete - await transaction.wait(); - console.log("completed") - //navigate back to home page - router.push('/'); - } - - return ( -
-
- updateFormInput({ ...formInput, name: e.target.value })} - /> + } + + /** + * Creating the NFT and Making it to sale. Calling the web 3.0 contracts here. + * @param {string} url ipfs url where certificate is uploaded + */ + async function putCertificate(url) { + const web3Modal = new Web3Modal(); + const connection = await web3Modal.connect(); + const provider = new ethers.providers.Web3Provider(connection); + const signer = provider.getSigner(); + + //NFT Contract + let contract = new ethers.Contract(nftAddress, NFT.abi, signer); + //minting the certificate + let transaction = await contract.createToken(url); + //waiting for the minting transaction to finish + let tx = await transaction.wait(); + + let event = tx.events[0]; + let value = event.args[2]; + let tokenId = value.toNumber(); //Token Id Of the NFT + + //NFT Market Contract + contract = new ethers.Contract(nftTransferAddress, NFTTransfer.abi, signer); + + //fetching listing price from the contract + let listingPrice = await contract.getListingPrice(); + listingPrice = listingPrice.toString(); + + //listing the certificate. + transaction = await contract.createCertificate(nftAddress, tokenId, { + value: listingPrice, + }); + //waiting for the transaction to complete + await transaction.wait(); + console.log("completed"); + //navigate back to home page + router.push("/"); + } + + async function ClickedCheckbox() { + setCheckBox(!checkBox); + } + async function ShowDropdown() { + setDropdown(!dropdown); + } + return ( +
+
+
+
+ + updateFormInput({ ...formInput, name: e.target.value }) + } + /> +