-
-
Save dabit3/20068fb7938f51e1411c8257bfe4fc9d to your computer and use it in GitHub Desktop.
NFT Marketplace V2
This file contains 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
/* pages/create-nft.js */ | |
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 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={listNFTForSale} className="font-bold mt-4 bg-pink-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
Hi @dabit3 , excelent work. Why is createToken here called with 3 parameters, when in the smart contract it only accepts 2?