NFT Minter does not work

does not work when a ch

ick mint button then comes to this error how to solve!

can you share your mint function?


Here is

can you try using executeFunction to call the mint function along with your contract parameters?

This is an example code.

const Options = {
  contractAddress: "0xe...56",
  functionName: "setMessage",
  abi: ABI,
  params: {
    Name: "value",
  },
};
const transaction = await Moralis.executeFunction(Options);
await transaction.wait();

this code is not solved i am trying this type

Does the ABI that you are using has the function named mint?

Hereโ€™s a similar example

import { useEffect, useState } from "react";
import { useMoralis, useMoralisFile, useWeb3Contract } from "react-moralis";
import abi from "./abi.json";

function App() {
  const [fileTarget, setFileTarget] = useState("");
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const { saveFile } = useMoralisFile();
  const { authenticate, isAuthenticated, logout, isWeb3Enabled, enableWeb3 } =
    useMoralis();
  const { runContractFunction } = useWeb3Contract();
  const contractAddress = "0x5ef1b46a6cf9416bb3e2b95eade5c5f10534dd41";

  useEffect(() => {
    if (!isWeb3Enabled && isAuthenticated) enableWeb3();
  }, [isAuthenticated]);

  const fileUploader = async () => {
    try {
      let fileUpload = await saveFile("photo.jpg", fileTarget, {
        type: "image/png",
        saveIPFS: true,
      });
      return fileUpload;
    } catch (error) {
      console.log(error);
    }
  };

  const uploadMetadataToIpfs = async (image, name, description) => {
    let metadata = {
      name,
      description,
      image,
    };

    try {
      let fileUpload = await saveFile(
        `${name}-metadata.json`,
        {
          base64: btoa(JSON.stringify(metadata)),
        },
        {
          type: "base64",
          saveIPFS: true,
        }
      );
      return fileUpload;
    } catch (error) {
      console.log(error);
    }
  };

  const uploadFile = async () => {
    let fileUrl = (await fileUploader()).ipfs();
    let metadataUrl = (
      await uploadMetadataToIpfs(fileUrl, name, description)
    ).ipfs();

    let options = {
      contractAddress,
      functionName: "mintToken",
      abi,
      params: {
        tokenURI: metadataUrl,
      },
    };

    runContractFunction({
      params: options,
      onSuccess: (tx) => {
        return tx.wait().then((txn) => {
          clearInput();
          console.log(txn);
          console.log("Minted here: " + txn.transactionHash);
        });
      },
      onError: (error) => {
        console.log(error);
      },
    });
  };

  const clearInput = () => {
    setName("");
    setFileTarget("");
    setDescription("");
  };

  const setNameHandler = (e) => setName(e.target.value);
  const setDescriptionHandler = (e) => setDescription(e.target.value);
  const setFileTargetHandler = (e) => setFileTarget(e.target.files[0]);

  const inputStyles = { display: "block", margin: ".5em 0" };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        width: "500px",
        margin: "auto",
      }}
    >
      {isAuthenticated ? (
        <button style={inputStyles} onClick={() => logout()}>
          Logout
        </button>
      ) : (
        <button style={inputStyles} onClick={() => authenticate()}>
          Login
        </button>
      )}
      {isAuthenticated ? (
        <>
          <input
            style={inputStyles}
            placeholder="Name"
            onChange={setNameHandler}
          />
          <input
            style={inputStyles}
            placeholder="Description"
            onChange={setDescriptionHandler}
          />
          <input
            style={inputStyles}
            type="file"
            onChange={setFileTargetHandler}
          />
          <button style={inputStyles} onClick={uploadFile}>
            Mint Now!
          </button>
        </>
      ) : null}
    </div>
  );
}

export default App;

You can fix the the abi and the contract address and the function name and also make sure the account is on the proper network the contract is deployed to

You can add console.log(metadata, fileUpload); before return fileUpload; on line 49 to know more about the file uploaded. Seemed the file failed to upload


how can fix

Youโ€™re trying to apply filter on an undefined element. You need to fix the element rather and find a way to make it defined.

Might be helpful If you can show what youโ€™re trying to do there.