Trying to call a mint function to a deployed erc20 contract using ethers.js

Question

I'm building a react app which currently is able to connect to a wallet and display some data from a few deployed contracts. Upon connection to a wallet, I want to mint 1000 units of a token which I have deployed to that wallet, and then display that balance (1000 of token) in the react app. It's displaying everything as it should be BUT for some reason the balance showing is zero even after connecting to the wallet, and I can verify that for some reason, the token is not being minted. Here are the functions I've written for this specific purpose in my frontend "interact.js" file that has a bunch of functions that are exported to the main react component.

export const mintToken = async (address, amount) => { await tokenContract.methods.mint(address, amount).call(); }

export const loadTokenBalance = async () => { const wallet = await connectWallet();

await mintToken(wallet.address, 1000);

const newBalance = await tokenContract.methods.balanceOf(wallet.address).call(); return newBalance; }

The loadTokenBalance function is accessed by the react component and rendered the balance returned by this method. But for some reason it keeps returning zero because the tokens are not being minted. Would highly appreciate anyone's assistance.

Answer 1

Here:

export const mintToken = async (address, amount) => { await tokenContract.methods.mint(address, amount).call(); }

This isn't a call function, you are not reading the blockchain, you are updating the state of the contract, thus it's a send(), btw this isn't ethers.js. You should do something like this (sorry i don't work with web3.js for a year ):

const mint = async (address, amount) => {
try{
const signer = new ethers.providers.useWeb3Provider(window.ethereum).getSigner
 const contract = new ethers.Contract(cttAddress, cttABI, signer)
 const tx = await contract.mint(address, amount)
 tx.wait()
 const hash = tx.hash
 return hash
}catch(error){
 return error.message
}
}

For the balance:

const tokenBalance = async (tokenAddress, userAddress) => {
 try{
  const contract = new ethers.Contract(tokenAddress, erc20ABI, 
  provider)
  const balance = await contract.balanceOf(userAddress)
  return balance
}catch(error){
 return error.message
}
}