Lesson 10: Using 'useWeb3Contract' to get entrance fee returns 'undefined'.

[Ugwumsi]

On lesson 10 now and I keep getting 'undefined' when I try to get the entrance fee of my raffle contract.
here is the code snippet;

import { useWeb3Contract } from "react-moralis"
import {abi, contractAddresses} from "../constants/index.js"
import {useMoralis} from "react-moralis"
import { useEffect, useState } from "react"
import { ethers } from "ethers"

export default function LotteryEntrance(){

    const {chainId: chainIdHex, isWeb3Enabled} = useMoralis()
    const chainId = parseInt(chainIdHex)
    console.log(chainId)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    console.log(raffleAddress)

    // const {chainId: chainIdHex, isWeb3Enabled} = useMoralis()
    // const chainId = parseInt(chainIdHex)
    // console.log(chainId)
    // const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    //console.log(raffleAddress)

    // const [entranceFee, setEntranceFee] = useState("0")
    // const{runContractFunction: enterRaffle} = useWeb3Contract({ 
    //     abi: abi,
    //     contractAddress: raffleAddress,
    //     fucntionName: "enterRaffle",
    //     msgvalue: entranceFee,
    //     params: {},
    // })

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

    })
    

    useEffect(() => {
        if(isWeb3Enabled){
            async function updateUI() {
                const something = await getEntranceFee()
                console.log(something)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    // useEffect(() => {
    //     if (isWeb3Enabled){
            
    //         async function updateUI() {
    //             const something = await getEntranceFee()
    //             console.log(something)
    //         //     const entranceFeeFromCall = (await getEntranceFee())//.toString()
    //         //     console.log(entranceFeeFromCall)
    //         //     // setEntranceFee(ethers.utils.formatUnits(entranceFeeFromCall), "ether")
                

    //         }
    //         updateUI()
    //     }
            
    // }, [isWeb3Enabled]) 


    //<div>Entrance Fee: {entranceFee} ETH</div>
    return <div>
        Hello from the other side
    </div>
}

Here is where I try to get the entrance fee;

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

    })
    

    useEffect(() => {
        if(isWeb3Enabled){
            async function updateUI() {
                const something = await getEntranceFee()
                console.log(something)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

and here is what gets logged on my console;

[Ugwumsi]

[alymurtazamemon]

@Ugwumsi Leave your both contract and frontend repos.

[Ugwumsi]

@alymurtazamemon
Here is my contract repo;
https://github.com/Ugwumsi/blockchain-projects/tree/master/hardhat-lottery

and here is my frontend repo;
https://github.com/Ugwumsi/blockchain-fronted

Thank you.

[alymurtazamemon]

@Ugwumsi here you have misspelled functionName. functionName:

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

[Ugwumsi]

Wow!!!
I can't believe I searched for days and couldn't find this typo.

@alymurtazamemon Thanks a lot, man.
I appreciate your assistance.

[nooruddin]

I could not fix this error for a long time and figured out that there was no need to JSON.stringify the abi in your update front end deploy script.
Changing fs.writeFileSync(FRONT_END_ABI_FILE, JSON.stringify(raffle.interface.format(ethers.utils.FormatTypes.json))) to fs.writeFileSync(FRONT_END_ABI_FILE, raffle.interface.format(ethers.utils.FormatTypes.json)) fixed the issue for me.

It was adding a stringified version of json in my abi.json file when I just need the json as is.