How to fix ERROR : invalid address (argument="address", value=undefined, code=INVALID_ARGUMENT, version=address/5.5.0)

Question

I have completed the CryptoZombies's chapter6 tutorial, so I am challenged to work the front in my environment.

When I try to connect to the contract from the frontend I get an error message.

var cryptoZombies;
var userAccount;

function startApp() {
    var cryptoZombiesAddress = "0x8b87e80e2b76b4445a869b3dd0640e37c51def50";
    cryptoZombies = new web3js.eth.Contract(cryptoZombiesABI, cryptoZombiesAddress);
    
    async function getCurrentAccount(){
      const web3 = new Web3(window.ethereum);
      const userAccount = await web3.eth.getAccounts();
      return userAccount;
    }
    getCurrentAccount();
}

function displayZombies(ids) {
    $("#zombies").empty();
    for (id of ids) {
      // Look up zombie details from our contract. Returns a `zombie` object
      getZombieDetails(id)
      .then(function(zombie) {
        // Using ES6's "template literals" to inject variables into the HTML.
        // Append each one to our #zombies div
        $("#zombies").append(`<div class="zombie">
          <ul>
            <li>Name: ${zombie.name}</li>
            <li>DNA: ${zombie.dna}</li>
            <li>Level: ${zombie.level}</li>
            <li>Wins: ${zombie.winCount}</li>
            <li>Losses: ${zombie.lossCount}</li>
            <li>Ready Time: ${zombie.readyTime}</li>
          </ul>
        </div>`);
      });
    }

}
function getZombiesByOwner(owner) {
    return cryptoZombies.methods.getZombiesByOwner(owner).call();
}

window.addEventListener('load', function() {
    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof web3 !== 'undefined') {
      // Use Mist/MetaMask's provider
      web3js = new Web3(window.ethereum);
      alert("launch");
    } else {
      // Handle the case where the user doesn't have Metamask installed
      // Probably show them a message prompting them to install Metamask
      alert("please install metamask");
    }
    // Now you can start your app & access web3 freely:
    startApp()
    getZombiesByOwner(userAccount).then(displayZombies);
})

I can get the current metamask account. However, When I try to run

getZombiesByOwner(userAccount).then(displayZombies);

it return an error.

invalid address (argument="address", value=undefined, code=INVALID_ARGUMENT, version=address/5.5.0) (argument="_owner", value=undefined, code=INVALID_ARGUMENT, version=abi/5.0.7)

Answer 1

You need to use a checksummed address.

Web3 has a function that does that -

    var cryptoZombiesAddress = "0x8b87e80e2b76b4445a869b3dd0640e37c51def50";
    cryptoZombies = new web3js.eth.Contract(cryptoZombiesABI, web3js.utils.toChecksumAddress(cryptoZombiesAddress));