We were not able to estimate gas. There might be an error in the contract and this transaction may fail

Moralis General
#1

Facing this issue while minting NFT. I’m using moralis. My smart Contract is as below:
// SPDX-License-Identifier: Unlicense

pragma solidity ^0.8.4;

import “@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol”;

import “@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol”;

import “@openzeppelin/contracts/token/ERC721/ERC721.sol”;

import “@openzeppelin/contracts/utils/math/SafeMath.sol”;

contract MinterYT is ERC721, ERC721Enumerable, ERC721URIStorage {

using SafeMath for uint256;

uint public constant mintPrice = 0;

function _beforeTokenTransfer(address from, address to, uint256 tokenId)

    internal

    override(ERC721, ERC721Enumerable)

{

    super._beforeTokenTransfer(from, to, tokenId);

}

function _burn(uint256 tokenId) internal override(ERC721, ERC721URIStorage) {

    super._burn(tokenId);

}

function tokenURI(uint256 tokenId)

    public

    view

    override(ERC721, ERC721URIStorage)

    returns (string memory)

{

    return super.tokenURI(tokenId);

}

function supportsInterface(bytes4 interfaceId)

    public

    view

    override(ERC721, ERC721Enumerable)

    returns (bool)

{

    return super.supportsInterface(interfaceId);

}

constructor() ERC721("YTMinter", "YTM") {}

function mint(string memory _uri) public payable {

    uint256 mintIndex = totalSupply();

    _safeMint(msg.sender, mintIndex);

    _setTokenURI(mintIndex, _uri);

}

}

index,js, from where I’m minting the nft,

import { useRouter } from ‘next/router’

import { useEffect, useState } from ‘react’

import { useMoralis } from ‘react-moralis’

import Moralis from ‘moralis’

import { contractABI, contractAddress } from ‘…/…/contract’

import Web3 from ‘web3’

const web3 = new Web3(Web3.givenProvider)

function Dashboard() {

const { isAuthenticated, logout, user } = useMoralis()

const [name, setName] = useState(’’)

const [description, setDescription] = useState(’’)

const [file, setFile] = useState(null)

const router = useRouter()

const onSubmit = async (e) => {

e.preventDefault()

try {

  // Attempt to 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()

  // Interact with smart contract

  const contract = new web3.eth.Contract(contractABI, contractAddress)

  const response = await contract.methods

    .mint(metadataurl)

    .send({ from: user.get('ethAddress') })

  // Get token id

  const tokenId = response.events.Transfer.returnValues.tokenId

  // Display alert

  alert(

    `NID successfully minted. Contract address - ${contractAddress} and Token ID - ${tokenId}`

  )

} catch (err) {

  console.error(err)

  alert('An error occured!')

}

}

useEffect(() => {

if (!isAuthenticated) router.replace('/')

}, [isAuthenticated])

return (

<div className="flex h-screen w-screen items-center justify-center">

  <form onSubmit={onSubmit}>

    <div>

      <input

        type="text"

        className="w-full border-[1px] border-black p-2 text-lg"

        value={name}

        placeholder="Name"

        onChange={(e) => setName(e.target.value)}

      />

    </div>

    <div className="mt-3">

      <input

        type="text"

        className="w-full border-[1px] border-black p-2 text-lg"

        value={description}

        placeholder="Description"

        onChange={(e) => setDescription(e.target.value)}

      />

    </div>

    <div className="mt-3">

      <input

        type="file"

        className="border-[1px] border-black p-2 text-lg"

        onChange={(e) => setFile(e.target.files[0])}

      />

    </div>

    <button

      type="submit"

      className="mt-5 w-full animate-pulse rounded-xl bg-green-700 p-5 text-lg text-white"

    >

      Mint now!

    </button>

    <button

      onClick={logout}

      className="mt-5 w-full rounded-xl bg-red-700 p-5 text-lg text-white"

    >

      Logout

    </button>

  </form>

</div>

)

}

export default Dashboard

What’s wrong with these?? Please somebody explain. I’ve followed this: