Moralis NFT Minter

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.

Not sure what is causing the error here. You can try using Moralis.executeFunction to run the smart contract function after enabling web3 with await Moralis.enableWeb3()
https://docs.moralis.io/moralis-dapp/web3/web3#example-of-calling-a-write-contract-method