Hi,
I have an error trying to mint my NFT.
It keeps mentioning “Something went wrong”.
Please see my code per below:
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import Moralis from "moralis";
import Web3 from "web3";
import { contractABI, contractAddress } from "../../contract";
const web3 = new Web3(Web3.givenProvider);
function Dashboard() {
const { isAuthenticated, logout, user } = useMoralis();
const router = useRouter();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [file, setFile] = useState(null);
useEffect(() => {
if (!isAuthenticated) router.push("/");
}, [isAuthenticated]);
const onSubmit = async (e) => {
e.preventDefault();
try {
// save image to IPFS
const file1 = new Moralis.File(file.name, file);
await file1.saveIPFS();
const file1url = file1.ipfs();
// generate metadata and save to ipfs
const metadata = {
name,
description,
image: file1url,
};
const file2 = new Moralis.File(`${name}metadata.json`, {
base64: Buffer.from(JSON.stringify(metadata)).toString("base64"),
});
await file2.saveIPFS();
const metadataurl = file2.ipfs();
console.log(metadataurl);
// interact with smart contract
const contract = new web3.eth.Contract(contractABI, contractAddress);
const response = await contract.methods
.mint(metadataurl)
.send({ from: user.get("ethAddress") });
const tokenId = response.events.Transfer.returnValues.tokenId;
alert(
`NFT successfully minted. Contract address - ${contractAddress} and Token ID - ${tokenId}`
);
} catch (err) {
console.error(err);
alert("Something went wrong!");
}
};
return (
<div className="flex w-screen h-screen items-center justify-center">
<form onSubmit={onSubmit}>
<div>
<input
type="text"
className="border-[1px] p-2 text-lg border-black w-full"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mt-3">
<input
type="text"
className="border-[1px] p-2 text-lg border-black w-full"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
<div className="mt-3">
<input
type="file"
className="border-[1px] p-2 text-lg border-black w-full"
onChange={(e) => setFile(e.target.files[0])}
/>
</div>
<button
type="submit"
className="mt-5 w-full p-5 bg-green-400 text-black text-lg rounded-xl animate-pulse"
>
Mint
</button>
<button
onClick={logout}
className="mt-5 w-full p-5 bg-red-400 text-black text-lg rounded-xl"
>
Logout
</button>
</form>
</div>
);
}
export default Dashboard;
Please see the error per below:
TypeError: Cannot read properties of undefined (reading 'returnValues')
at _callee$ (index.js?6d8e:45:48)
at tryCatch (runtime.js?ecd4:45:16)
at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
at asyncGeneratorStep (index.js?6d8e:1:1)
at _next (index.js?6d8e:1:1)
MetaMask - RPC Error: Non-200 status code: '404' {code: -32603, message: "Non-200 status code: '404'", data: {…}}
Do you have any suggestions to resolving the error from Metamask?
I am unable to mint the NFT.
Thank you.