Lesson 10 - entrenceFee undefined

[Leonardll]

Hi guys, i am having issues with updateUI function which return entranceFee as undefined.
I have checked previous discussions on same topic but it does not solve my issue.
Can someone help please?

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

const LotteryButton = () => {
    const [recentWinner, setRecentWinner] = useState("0")
    const [numPlayer, setnumPlayer] = useState("0")
    const { chainId: chainIdhex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdhex)
    console.log(chainId)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    console.log(raffleAddress.toString())

    // const { runContractFunction: enterRaffle } = useWeb3Contract({
    //     abi: abi,
    //     contractAddress: contractAddresses,
    //     functionName: "enterRaffle",
    //     params: {},
    //     msgValue: "100000000000000000", //eth
    // })
    const { runContractFunction: getEntranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getEntranceFee",
        params: {},
    })

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

    return (
        <span
            type="button"
            onClick={async () => {
                await enterRaffle()
                console.log("clicked")
            }}
            className="badge badge-pill fs-5 p-2 w-100 badge-success text-white"
        >
            Connect Wallet
        </span>
    )
}

export default LotteryButton

full code is available on https://github.com/LEO-TEAM-CHAINLINK-HACKATHON/NFTLOTTERY1
Thanks in advance.

[RoboCrypter]

@Leonardll : Correct this line :

From this : const something = await getEntranceFee().toString() ---> To this : const something = (await getEntranceFee()).toString()

Let me know, If the issue persists..

[Leonardll]

i did that but get the below error messing on the screenshot

whereas when i do the current one i get [object promise] in the console. as per below

[RoboCrypter]

@Leonardll : Are you running your hardhat node in your back end code ?

[RoboCrypter]

@Leonardll : And also you are not getting your " raffleAddress " in the console!

Make sure your import is correct, and check why it is not logging in the console!

It is quite possibly the cause of the entranceFee error you are having!

[Leonardll]

@abossofmyself I am running hh node in the back end, yes. Everything looks fine, so I don't understand why it behaves this way. After checking my imports I can't see any mistake.

[Leonardll]

@abossofmyself I have done some debugging adding some console.log, as per following snippet.
it seems that these console log are returning the correct value so i don't understand why raffleAddress is returning 0.

const LotteryButton = () => {
    const [recentWinner, setRecentWinner] = useState("0")
    const [numPlayer, setnumPlayer] = useState("0")
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    console.log(chainId)
    console.log(contractAddresses[chainId])
    console.log(contractAddresses)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    console.log(raffleAddress)

    // const { runContractFunction: enterRaffle } = useWeb3Contract({
    //     abi: abi,
    //     contractAddress: contractAddresses,
    //     functionName: "enterRaffle",
    //     params: {},
    //     msgValue: "100000000000000000", //eth
    // })
    const { runContractFunction: getEntranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getEntranceFee",
        params: {},
    })

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

    return (
        <span
            type="button"
            onClick={async () => {
                await enterRaffle()
                console.log("clicked")
            }}
            className="badge badge-pill fs-5 p-2 w-100 badge-success text-white"
        >
            Connect Wallet
        </span>
    )
}

Can you help me with this please?

[lucasiezzi]

Hi, I am getting the exact same error, please share if you solved it :)

[Leonardll]

@lucasiezzi i will do :)

[FrankYChills]

Hey @Leonardll after a hour of debugging i have solved the issues and it works fine now.
Here were some issues:

1. Your update-front-end.js had major issues.
2. You need to reset the constants/abi.json and constants/contractAddress.json to save contract address and abi correctly.
3. You were calling enterRaffle function incorrectly (wrong variable name) and also the msgValue.
   You can see all the changes in the PR i have created.
   Have a great day 😇😇

[lucasiezzi]

Thanks for the collab @FrankYChills !

Apparently mine was another issue, I will leave it here in case its helpful for someone else:

I had a problem with the chain ID, I dont know why I had my chain ID for hardhat on hardhat.config.js and on helper-hardhat-config.js as 33137 and should be 31337.

Also @Leonardll, I dont know if this can bring you any issue but maybe its worth mentioning, in your helper-hardhat-config.js > networkConfig you dont have an stablished ID for hardhat, mine looks like this:

31337: { name: "hardhat", entranceFee: ethers.utils.parseEther("0.01"), gasLane: "0x79d3d8832d904592c0bf9818b621522c988bb8b0c05cdc3b15aea1b6e8db0c15", // anything, doesnt matter callbackGasLimit: "500000", interval: "30", },

Edit after re-reading my comment: Maybe thats because your entranceFee is undefined? you didnt declared it inside your hardhat networkConfig only inside your localhost.

[Leonardll]

@FrankYChills thanks for this. Sorry for the late response, i will pull your pr. Thanks again

[Leonardll]

it works perfectly , thank you @FrankYChills.Glad it worked for you as well @lucasiezzi.

[itsabinashb]

can you do let getEntranceFee = await <contract_name>.getEntranceFee() while declairing variables??

[lucasiezzi]

I dont know but it must be inside an async function, I think you cant use await without async

[engsbergp]

Hey all, I'm in the same situation, saying my const entranceFeefromCall = ((await getEntranceFee()) as BigNumber).toString() is undefined

Here is my LotteryEntrance.tsx component from the frontend

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

interface contractAddressesInterface {
    [key: string]: string[]
}

export default function LotteryEntrance() {
    const addresses: contractAddressesInterface = contractAddresses
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId: string = parseInt(chainIdHex!).toString()
    console.log(`ChainId ${chainId}`)
    const raffleAddress = chainId in addresses ? addresses[chainId][0] : null

    const [entranceFee, setEntranceFee] = useState("0")

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

    async function updateUI() {
        const entranceFeefromCall = ((await getEntranceFee()) as BigNumber).toString()
        setEntranceFee(entranceFeefromCall)
        console.log(`entranceFeefromCall ${entranceFeefromCall}`)
    }

    useEffect(() => {
        if (isWeb3Enabled) {
            updateUI()
        }
    }, [isWeb3Enabled])

    return <div></div>

My contract address.json is passing and returning correctly
However, I'm getting a type error on my abi value (hoping this is what's throwing things?)

I believe I'm setting everything correct in my helper-hardhat-config file

import { ethers } from "hardhat"
import { BigNumber } from "ethers"

export interface networkConfigItem {
    name?: string
    subscriptionId?: string
    gasLane?: string
    keepersUpdateInterval?: string
    raffleEntranceFee?: BigNumber
    callbackGasLimit?: string
    vrfCoordinatorV2?: string
}

export interface networkConfigInfo {
    [key: number]: networkConfigItem
}

export const networkConfig: networkConfigInfo = {
    31337: {
        name: "localhost" || "hardhat",
        subscriptionId: "6544",
        gasLane: "0xd89b2bf150e3b9e13446986e571fb9cab24b13cea0a43ea20a6049a85cc807cc", // 30 gwei
        keepersUpdateInterval: "30",
        raffleEntranceFee: ethers.utils.parseEther("0.01"), // 0.01 ETH
        callbackGasLimit: "500000", // 500,000 gas
    },

And my args from the 01-deploy-raffle file in my backend looks like I should be passing correctly

    const args: any[] = [
        vrfCoordinatorV2Address,
        subscriptionId,
        networkConfig[network.config.chainId!]["gasLane"],
        networkConfig[network.config.chainId!]["keepersUpdateInterval"],
        networkConfig[network.config.chainId!]["raffleEntranceFee"],
        networkConfig[network.config.chainId!]["callbackGasLimit"],
    ]
    const raffle = await deploy("Raffle", {
        from: deployer,
        args: args,
        log: true,
        waitConfirmations: waitBlockConfirmations,
    })

I'm out of ideas where to check.

[lucasiezzi]

Why do you have your helper-hardhat-config file so different than the one showed by patrick?
I have it like this:

const { ethers } = require("hardhat")

const networkConfig = {
    5: {
        name: "goerli",
        vrfCoordinatorV2: "0x2Ca8E0C643bDe4C2E08ab1fA0da3401AdAD7734D",
        entranceFee: ethers.utils.parseEther("0.01"),
        gasLane: "0x79d3d8832d904592c0bf9818b621522c988bb8b0c05cdc3b15aea1b6e8db0c15",
        subscriptionId: "6337",
        callbackGasLimit: "500000",
        interval: "30",
    },
    31337: {
        name: "hardhat",
        entranceFee: ethers.utils.parseEther("0.01"),
        gasLane: "0x79d3d8832d904592c0bf9818b621522c988bb8b0c05cdc3b15aea1b6e8db0c15", // anything, doesnt matter
        callbackGasLimit: "500000",
        interval: "30",
    },
}

const developmentChains = ["hardhat", "localhost"]

module.exports = {
    networkConfig,
    developmentChains,
}

[engsbergp]

Got it! I was passing my abi file to my frontend as a string, but the useWeb3Contract() function takes an object as its abi parameter.

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

[engsbergp]

Patrick also addresses this like 5 minutes farther down the tutorial 😑

[lucasiezzi]

Awesome :)

[Leonardll]

Hi @engsbergp i can see you are using Typescript which i am not too familiar with. You can have look at my repo and check my code. Hope this can help

[lucasiezzi]

Oh thats why I didnt understand anything XD

[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.

[mkhalesi]

Right, in ethers v6 try
raffle.interface.formatJson()

[lordshady1000]

I know this is old. But for users still coming to look for answers here. I solved it by changing this...
const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null

To this

const raffleAddress = chainId in contractAddresses ? null : contractAddresses[chainId][0]