Lesson 8: TypeError when getBalance

[mskhno]

I pressed "Go Live", made anvil and deployed a contract. Connected to website. But when i press getBalance i get this in console:

I did not change any code that i git cloned.

[EngrPips]

Hello @maxsakhno, Did you check if you have installed all the necessary libraries?

[mskhno]

Hi @EngrPips, yes i have everything installed. Solved this after tinkering around in chatgpt for some time.

The problem was with index.js. It suggested that the issue is that in ethers v6 they changed some names or something. It said they renamed Web3Provider to BrowserProvider. There was also a problem with ethers.utils, so i changed the code there as well. Now everything works fine.

This is the final code of index.js:

import { ethers } from "./ethers-6.7.esm.min.js"
import { abi, contractAddress } from "./constants.js"

const connectButton = document.getElementById("connectButton")
const withdrawButton = document.getElementById("withdrawButton")
const fundButton = document.getElementById("fundButton")
const balanceButton = document.getElementById("balanceButton")
connectButton.onclick = connect
withdrawButton.onclick = withdraw
fundButton.onclick = fund
balanceButton.onclick = getBalance

async function connect() {
  if (typeof window.ethereum !== "undefined") {
    try {
      await ethereum.request({ method: "eth_requestAccounts" })
    } catch (error) {
      console.log(error)
    }
    connectButton.innerHTML = "Connected"
    const accounts = await ethereum.request({ method: "eth_accounts" })
    console.log(accounts)
  } else {
    connectButton.innerHTML = "Please install MetaMask"
  }
}

async function withdraw() {
  console.log(`Withdrawing...`)
  if (typeof window.ethereum !== "undefined") {
    const provider = new ethers.BrowserProvider(window.ethereum)
    await provider.send('eth_requestAccounts', [])
    const signer = await provider.getSigner()
    const contract = new ethers.Contract(contractAddress, abi, signer)
    try {
      console.log("Processing transaction...")
      const transactionResponse = await contract.withdraw()
      await transactionResponse.wait(1)
      console.log("Done!")
    } catch (error) {
      console.log(error)
    }
  } else {
    withdrawButton.innerHTML = "Please install MetaMask"
  }
}

async function fund() {
  const ethAmount = document.getElementById("ethAmount").value
  console.log(`Funding with ${ethAmount}...`)
  if (typeof window.ethereum !== "undefined") {
    const provider = new ethers.BrowserProvider(window.ethereum)
    await provider.send('eth_requestAccounts', [])
    const signer = await provider.getSigner()
    const contract = new ethers.Contract(contractAddress, abi, signer)
    try {
      const transactionResponse = await contract.fund(2, "0x0000000000000000000000000000000000000000", {
        value: ethers.parseEther(ethAmount), // Use ethers.parseEther instead of ethers.utils.parseEther
      })
      await transactionResponse.wait(1)
    } catch (error) {
      console.log(error)
    }
  } else {
    fundButton.innerHTML = "Please install MetaMask"
  }
}

async function getBalance() {
  if (typeof window.ethereum !== "undefined") {
    const provider = new ethers.BrowserProvider(window.ethereum) // Use BrowserProvider instead of Web3Provider
    try {
      const balance = await provider.getBalance(contractAddress)
      console.log(ethers.formatEther(balance)) // Use ethers.formatEther instead of ethers.utils.formatEther
    } catch (error) {
      console.log(error)
    }
  } else {
    balanceButton.innerHTML = "Please install MetaMask"
  }
}

Thank you for getting involved!

[EngrPips]

Awesome. I am glad you unblock yourself. Keep crushing it.