Lesson 10: TypeError: Cannot read properties of undefined (reading 'formatUnits')

[Holger-ap]

Hello, im getting an error when i'm on the frontend, it does not seem to want to format, it's the same issue when i tried to do .tostring on the useffect, getEntrance fee, but i just removed that.

Besides that i can't seem to get the enterance fee, i've made sure that i run a hardhat node, and that the ABI and Contractaddresses.json constants works probably.. I've tried to reset the the hardhat node, and to check if the contract address matches the one that had been deployed.. I've also made sure that metamask is on the hardhat network.
Ethers is also installed.
Any help is appreciated, Thanks :-)

repository: here
Error:

  39 | Hi from LotteryEntrance!
  40 | {raffleAddress ? (
> 41 |     <div>Enterance Fee: {ethers.utils.formatUnits(EntranceFee, "ether")} ETH</div>
     |                         ^
  42 | ) : (
  43 |     <div></div>
  44 | )}

Here is my lotteryEntrance.js as well

import { useWeb3Contract } from "react-moralis"
import { contractAddresses, abi } from "../constants/" //when we have thhe index file we just need to specify the folder.
import { useMoralis } from "react-moralis"
import { useEffect, useState } from "react"
import { ethers } from "ethers"
import { useNotification } from "web3uikit"
export default function LotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis() //takes it from the header, moralis, returns the hex. ouyll out the chain id from moralis, and rename it ChainIDHex
    const chainId = parseInt(chainIdHex) //convert it from hex to normal number.
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    const [EntranceFee, setEntranceFee] = useState("0") //entrance fee will print out the entrance fee(get), setEntranceFee will be the function we call to set the entranceFee. 0 is starign value

    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRafffle",
        params: {},
        msgValue: EntranceFee,
    })

    const { runContractFunction: getEntranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        params: {},
    })

    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                const entranceFeeFromCall = await getEntranceFee()
                setEntranceFee(entranceFeeFromCall)
                console.log(`the enterance fee is ${EntranceFee}`)
            }
            updateUI()
        }
    }, [isWeb3Enabled])
    return (
        <div>
            Hi from LotteryEntrance!
            {raffleAddress ? (
                <div>Enterance Fee: {ethers.utils.formatUnits(EntranceFee, "ether")} ETH</div>
            ) : (
                <div></div>
            )}
        </div>
    )
}

[kulkarni-sharvari]

You seem to have missed "functionName" in useWeb3Contract({})

const { runContractFunction: getEntranceFee } = useWeb3Contract({ abi: abi, contractAddress: raffleAddress, params: {}, **functionName: "getEntraceFees"** //nameof the function in the contract })

Also, kindly check if your metamask is connected to the correct network.

[alymurtazamemon]

@Holger-ap Which version of ethers.js are you using? and Please leave your repo together so we can test and see.