Mint specific nft #67
Conversation
| import { useEffect, useState } from 'react'; | ||
| import { useAddress, useNFTCollection, useMetamask } from '@thirdweb-dev/react'; | ||
|
|
||
| const Nfts = (props: any) => { |
There was a problem hiding this comment.
can we use the correct typing here?
| const [nftMetadata, setNftMetadata] = useState([null]); | ||
|
|
||
| // useEffect hook to get NFTs from API | ||
| useEffect(() => { |
There was a problem hiding this comment.
convert this to try/catch async/await
| const nftCollection = useNFTCollection(nftCollectionAddress); | ||
|
|
||
| // Function which generates signature and mints NFT | ||
| async function onClick(id: number) { |
There was a problem hiding this comment.
can this be an arrow function? rest is good, you did async/await here :D
There was a problem hiding this comment.
also, rename it to mintNft
| connectWithMetamask(); | ||
| setLoading(true); | ||
| // Call API to generate signature and payload for minting | ||
| const response = await fetch('/api/getNfts', { |
There was a problem hiding this comment.
| const response = await fetch('/api/getNfts', { | |
| const response = await fetch('/api/getNfts', { |
can we change the name of the endpoint to get-nfts?
| <SimpleGrid justifyItems='center' columns={3} spacing={10}> | ||
| {nftMetadata?.map((nft: any) => ( | ||
| <Box | ||
| key={nftMetadata.indexOf(nft)} |
There was a problem hiding this comment.
| key={nftMetadata.indexOf(nft)} | |
| key={nftMetadata.indexOf(nft)} |
not recommended to use indexs as keys, you can use the id of the nft itself
| // Function which generates signature and mints NFT | ||
| async function onClick(id: number) { | ||
| try { | ||
| connectWithMetamask(); |
There was a problem hiding this comment.
any reason why we have this on the same function instead of checking first if the user has connected their wallet?
| res: NextApiResponse | ||
| ) { | ||
| // Read and format the NFT data | ||
| const rawData = fs.readFileSync( |
There was a problem hiding this comment.
why do you need to do this? can't you just import the JSON directly in the imports?
|
|
||
| dotenv.config(); | ||
|
|
||
| export interface NFT { |
There was a problem hiding this comment.
you can get this interface from our SDK, feel free to extend it if you need "minted" and "price", its called NFTMetadataInput, create an interface and share it between the frontend and the backend
| // Update the minted status of the NFT to true so that it can't be minted again | ||
| const newNFTs = nfts; | ||
| newNFTs[id].minted = true; | ||
| fs.writeFileSync('pages/api/data/nfts.json', JSON.stringify(newNFTs)); |
There was a problem hiding this comment.
how do you make sure this stays changed? 🤔
No description provided.