MetaMask - RPC Error: Internal JSON-RPC error - error-handling

Question

I am developing a NFT Minting Website on CELO. My mint function looks like this:
function safeMint(address to) public payable {
require(msg.value >= mintPrice, "Not enough ETH sent; check price!");
uint256 tokenId = _tokenIdCounter.current();
_safeMint(to, tokenId);
_tokenIdCounter.increment();
// string memory token_uri=tokenURI(tokenId);
}
My react front end looks like this:
async function mintNFT() {
if (typeof window.ethereum !== 'undefined') {
await requestAccount()
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(t_tokenAddress, Token.abi, signer);
try{
await window.ethereum.enable();
const transation = await contract.safeMint(userAccount);
await transation.wait();
fetchNFTIndex();
}
catch(e){
console.log(e.data.message);
}
}
}
I get the following error when I run the transaction with mintPrice =1 wei or ether:
Error
When I run the transaction with mintPrice=0 ether or wei it works fine. I dont know what is the problem here. I have 5 celos in my account so I have enough funds, I assume that ethers are converted and paid in CELO.
Can anyone understand the problem here!

Answer 1

The linked error contains the custom message "Not enough ETH sent", which means the error originates from the require() condition.
require(msg.value >= mintPrice, "Not enough ETH sent; check price!");
Your JS snippet executes the function, but doesn't send any ETH value with the transaction.
In order to send ETH value, you need to define it in the overrides parameter.
const transation = await contract.safeMint(userAccount, {
// send along 1 wei
value: 1
});