Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Create NFT Form UI inconsistency (#52) #58

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: Create NFT Form UI inconsistency (#52) #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 118 additions & 125 deletions frontend/src/pages/CreateNFTPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,146 +1,139 @@
// src/pages/CreateNFT.jsx
import { React, useState } from 'react'
import PropTypes from 'prop-types'
import { useState } from 'react'
import { connectWallet, createNFT, getNFTContract } from '../utils/ethereum'
import { ethers } from 'ethers'

const nftAddress = import.meta.env.VITE_NFT_ADDRESS
const marketplaceAddress = import.meta.env.VITE_MARKET_ADDRESS

const PRIVATE_KEY = import.meta.env.VITE_PRIVATE_KEY
export default function CreateNFT({ wallet }) {

const CreateNFT = ({ wallet }) => {
const [formData, setFormData] = useState({
name: '',
description: '',
price: '',
file: null,
})
const [formData, setFormData] = useState({
name: '',
description: '',
price: '',
file: null ,
})

const handleChange = (e) => {
const { name, value, files } = e.target
setFormData((prevState) => ({
...prevState,
[name]: files ? files[0] : value,
}))
}
const handleChange = () => {
const { name, value, files } = e.target
setFormData((prevState) => ({
...prevState,
[name]: files ? files[0] : value,
}))
}

const handleSubmit = async (e) => {
e.preventDefault()
const handleSubmit = async (e) => {
e.preventDefault()

try {
const { name, description, price, file } = formData
try {
const { name, description, price, file } = formData

// Ensure all required fields are filled
if (!name || !description || !price || !file) {
throw new Error('All fields are required')
}
// Ensure all required fields are filled
if (!name || !description || !price || !file) {
throw new Error('All fields are required')
}

const signer = await connectWallet()
const signer = await connectWallet()

try {
const tokenId = await createNFT(
signer,
name,
description,
price,
file,
nftAddress,
marketplaceAddress
)
console.log('NFT created and listed with token ID:', tokenId)
} catch (error) {
console.error('Failed to create and list NFT:', error)
}
} catch (error) {
console.error('Error creating NFT:', error)
}
try {
const tokenId = await createNFT(
signer,
name,
description,
price,
file,
nftAddress,
marketplaceAddress
)
console.log('NFT created and listed with token ID:', tokenId)
} catch (error) {
console.error('Failed to create and list NFT:', error)
}
} catch (error) {
console.error('Error creating NFT:', error)
}
}

return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8">Create NFT</h1>
<form onSubmit={handleSubmit} className="max-w-lg">
<div className="mb-4">
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700"
>
Name
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-sm font-medium text-gray-700"
>
Description
</label>
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="price"
className="block text-sm font-medium text-gray-700"
>
Price (ETH)
</label>
<input
type="number"
id="price"
name="price"
value={formData.price}
onChange={handleChange}
required
step="0.01"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
<div className="mb-4">
<label
htmlFor="file"
className="block text-sm font-medium text-gray-700"
>
File
</label>
<input
type="file"
id="file"
name="file"
onChange={handleChange}
required
className="mt-1 block w-full"
/>
</div>
return (
<div className="min-h-screen bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div className="md:flex">
<div className="p-8 w-full">
<h1 className="text-3xl font-extrabold text-gray-900 mb-6" >Create your NFT</h1>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Name
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div>
<label htmlFor="description" className="block text-sm font-medium text-gray-700">
Description
</label>
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
required
rows={3}
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
></textarea>
</div>
<div>
<label htmlFor="price" className="block text-sm font-medium text-gray-700">
Price (ETH)
</label>
<input
type="number"
id="price"
name="price"
value={formData.price}
onChange={handleChange}
required
step="0.01"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div>
<label htmlFor="file" className="block text-sm font-medium text-gray-700">
File
</label>
<input
type="file"
id="file"
name="file"
onChange={handleChange}
required
className="mt-1 block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-violet-50 file:text-violet-700
hover:file:bg-violet-100"
/>
</div>
<div>
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
type="submit"
className="connect-wallet-button w-full"
>
Create NFT
Create NFT
</button>
</div>
</form>
</div>
</div>
)
}
CreateNFT.propTypes = {
wallet: PropTypes.object.isRequired,
// wallet: PropTypes.object,
</div>
</div>
)
}

export default CreateNFT
Loading