Lesson 10: getEntranceFee is returning undefined.

[Tosinkoa]

I'm getting all the values in useWeb3Contract hook, but getEntranceFee function is returning undefined

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

const LotteryEntrance = () => {
  const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
  const [entranceFee, setEntranceFee] = useState("0");

  const chainId = parseInt(chainIdHex);

  const raffleAdress = chainId in contractAddresses ? contractAddresses[chainId][0] : null;
  const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAdress, //specify the networkId
    functionName: "getEntranceFee",
    params: {},
  });

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

  return (
    <div>
      <p>Entrance Fee:</p>
    </div>
  );
};

export default LotteryEntrance;

This is what am getting from my backend contract console whenever I run getEntranceFee function

[alwayscommit]

same here

[Vibesx]

Had same problem. Remove start and end quotes from abi.json. If that doesn't work, take the abi from the Raffle.json in the hardhat-smartcontract-lottery-fcc project, in the deployments folder. The idea is to come up with a solution to save the abi.json without quotes.

EDIT: I'm following up on the previous solution, as I was in a hurry when I was writing it. The issue is that when we generate the abi.json in the update-front-end script as Patrick does in the tutorial, with JSON.stringify, it turns it into a string, which is not correctly recognized by our useWeb3Contract method. (he might change it later, don't know, I'm only at 17:46:00 :) )

If you take a look in the git repo at the 02-update-front-end.js file, the JSON.stringify is removed:
https://github.com/PatrickAlphaC/hardhat-smartcontract-lottery-fcc/blob/235e5a45473c0f8530461c59eb8aac6284e98465/deploy/02-update-front-end.js#L16

[Avelous]

@Tosinkoa @alwayscommit were you able to fix this? i have similar issue

[jeetb]

helper-hardhat-config.js
`const { ethers } = require("hardhat");

const networkConfig = {
4: {
name: "rinkeby",
vrfCoordinatorV2: "0x6168499c0cFfCaCD319c818142124B7A15E857ab",
entranceFee: ethers.utils.parseEther("0.01"),
gasLane:
"0xd89b2bf150e3b9e13446986e571fb9cab24b13cea0a43ea20a6049a85cc807cc",
subscriptionId: "8219",
callbackGasLimit: "5000000",
interval: "30",
},
31337: {
name: "hardhat",
entranceFee: ethers.utils.parseEther("0.01"),
gasLane:
"0xd89b2bf150e3b9e13446986e571fb9cab24b13cea0a43ea20a6049a85cc807cc",
callbackGasLimit: "500000",
interval: "30",
},
};

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

module.exports = { networkConfig, developmentChains };`

hardhat-config.js
`/** @type import('hardhat/config').HardhatUserConfig */
require("@nomiclabs/hardhat-waffle");
require("@nomiclabs/hardhat-etherscan");
require("hardhat-deploy");
require("solidity-coverage");
require("hardhat-gas-reporter");
require("hardhat-contract-sizer");
require("dotenv").config();

const RINKEBY_RPC_URL = process.env.RINKEBY_RPC_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;
const COINMARKETCAP_API_KEY = process.env.COINMARKETCAP_API_KEY;
const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY;

module.exports = {
defaultNetwork: "hardhat",
networks: {
hardhat: {
chainId: 31337,
blockConfirmations: 1,
},
rinkeby: {
chainId: 4,
blockConfirmations: 6,
url: RINKEBY_RPC_URL,
accounts: [PRIVATE_KEY],
},
},
etherscan: {
// yarn hardhat verify --network <CONTRACT_ADDRESS> <CONSTRUCTOR_PARAMETERS>
apiKey: {
rinkeby: ETHERSCAN_API_KEY,
kovan: ETHERSCAN_API_KEY,
},
},
gasReporter: {
enabled: false,
currency: "USD",
outputFile: "gas-report.txt",
noColors: true,
// coinmarketcap: process.env.COINMARKETCAP_API_KEY,
},
contractSizer: {
runOnCompile: false,
only: ["Raffle"],
},
solidity: {
compilers: [
{
version: "0.8.7",
},
{
version: "0.4.24",
},
],
},
namedAccounts: {
deployer: {
default: 0,
},
player: {
default: 1,
},
},
mocha: {
timeout: 500000, //500 seconds
},
};
`

[mauro1972]

look in the contractAddress.json file if the chainId is 31337 or 1337, I also replace hardhhat for localhost in helper-hardhat-config

        interval: "30",
    },
    1337: {
        name: "localhost",
        entranceFee: ethers.utils.parseEther("0.01"),
        gasLane: "0xd89b2bf150e3b9e13446986e571fb9cab24b13cea0a43ea20a6049a85cc807cc",
        callbackGasLimit: "500000", // 500.000
        interval: "30",
    },

this is the content of my contractAddresses.json

{"1337":["0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9"]}

[jeetb]

Hi, so your suggestions didn't work but I found the core reason why this error happens and the simple solution. The error happens because the contract is deployed on a different chainId and your metamask wallet is trying to access the contract on a different chainId. If you've been following along with the course, then you should have these 2 local testnets:

1. Hardhat-Localhost with chainId 31337
2. Localhost 8545 with chainId 1337

So, in your case, you were getting the error earlier because your hardhat config and hardhat config helper had the chainId set to 31337 but your metamask was on Localhost 8545 with chainId 1337 which didn't match. After you changed your config files to 1337, it matched and your deployment worked, but you didn't have to do that. You could've switched your metamask from Localhost 8545 to Hardhat-Localhost and it would've worked anyway. In my case, I was stupidly trying to access the contract from Rinkeby testnet, so neither of those chainIds worked for me. But, now I've set the wallet to a network with chain ID 31337 and it's working for me. Thanks for taking the time to help me and I hope it helps others.

[PatrickAlphaC]

Can you make this a new answer so we can mark it as such? Thank you!

[jeetb]

Done! #685 (comment)

[jeetb]

The error happens because the contract is deployed on a different chainId and your metamask wallet is trying to access the contract on a different chainId. If you've been following along with the course, then you should have these 2 local testnets:

1. Hardhat-Localhost with chainId 31337
2. Localhost 8545 with chainId 1337

So, check your hardhat-config and helper-hardhat-config files to check your chainId. If it is 31337, then set your metamask network to Hardhat-Localhost (or whatever you decided to name it) and if it is 1337, set your metamask to Localhost 8545. Bottom line, make sure that the chainId in your config files matches with the chainId of the network your metamask is on. In my case, I was trying to connect through the Rinkeby testnets without realizing, so neither 1337 nor 31337 in my config files worked, and you might be making the same mistake. Hope this helps!

[imartin25]

Hey! I'm having the same issue where getEntranceFee() returns undefined. I checked and tried both connecting with Hardhat-Localhost and Localhost 8545 but the result is the same.

In both hardhat-config and helper-hardhat-config the chain id is 31337, this is what my LotteryEntrance.js looks like:

import { useWeb3Contract } from "react-moralis"
import { abi, contractAddresses } from "../constants"
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)
    const raffleAddress = chainIdHex in contractAddresses ? contractAddresses[chainId] : null
    //const [entranceFee, setEntranceFee] = useState("0")
    let entranceFee = ""
    /*const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        params: {},
    })*/

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

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

    return <div> Hi from Lottery Entrance</div>
}

Any idea what can be the problem?

[jeetb]

Can you check if the ChainId in your Metamask is set properly?

Open metamask > Click on top right circular button to open "My Accounts" > Open Settings > Networks.

There open the networks to make sure which network has the chainId 31337 and check if there is any mistake. I think you might've set the chainId in both the networks to 1337.

[imartin25]

I did! I have Hardhat network chain id set to 31337 and localhost chain id set to 1337.

Any other thing you think it might be causing the problem? In the meantime I will keep going with the next section of the course but I would like to be able to finish Lesson 10 :C

[jeetb]

Ok, so I did not check your lotteryEntrance code yesterday, but now that I'm seeing it, it seems like some stuff is missing. eHere's my lotteryEntrance.js:

`import { useEffect, useState } from "react";
import { useMoralis, useWeb3Contract } from "react-moralis";
import { abi, contractAddresses } from "../constants";
import { ethers } from "ethers";
import { useNotification } from "web3uikit";

export default function LotteryEntrance() {
const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
const chainId = parseInt(chainIdHex);
const raffleAddress =
chainId in contractAddresses ? contractAddresses[chainId][0] : null;
const [entranceFee, setEntranceFee] = useState("0");
const [numberOfPlayers, setNumberOfPlayers] = useState("0");
const [recentWinner, setRecentWinner] = useState("0");
const dispatch = useNotification();

const {
runContractFunction: enterRaffle,
isLoading,
isFetching,
} = useWeb3Contract({
abi: abi,
contractAddress: raffleAddress,
functionName: "enterRaffle",
params: {},
msgValue: entranceFee,
});
const { runContractFunction: getEntranceFee } = useWeb3Contract({
abi: abi,
contractAddress: raffleAddress,
functionName: "getEntranceFee",
params: {},
});

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

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

async function updateUI() {
const entranceFeeFromCall = (await getEntranceFee()).toString();
const numberOfPlayersFromCall = (await getNumberOfPlayers()).toString();
const recentWinnerFromCall = (await getRecentWinner()).toString();
setEntranceFee(entranceFeeFromCall);
setNumberOfPlayers(numberOfPlayersFromCall);
setRecentWinner(recentWinnerFromCall);
}

useEffect(() => {
if (isWeb3Enabled) {
updateUI();
//console.log(entranceFee);
}
}, [isWeb3Enabled]);
const handleSuccess = async function (tx) {
await tx.wait(1);
handleNotification(tx);
updateUI();
};
const handleNotification = function () {
dispatch({
type: "info",
message: "Transaction Completed!",
title: "tx notification",
position: "topR",
icon: "bell",
});
};

return (

Hi from Lottery!
{raffleAddress ? (

<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-auto"
onClick={async function () {
await enterRaffle({
onSuccess: handleSuccess,
onError: (error) => console.log(error),
});
}}
disabled={isLoading || isFetching}
>
{isLoading || isFetching ? (

) : (

Enter Raffle

)}

Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")}ETH

Number of Players: {numberOfPlayers}

Recent Winner: {recentWinner}

) : (

No Raffle address detected

)}

);
}
`

[Blockchain-Oracle]

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

change this line of code to

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

you left the araryy [0]

@imartin25

[Ugwumsi]

Hi!
I am having the same error message and after trying all that was suggested here, I still can't find a way to fix it
I even copied the code from the course's GitHub repo, all to no avail.

Here is my code;

import { useWeb3Contract } from "react-moralis"
import {abi, contractAddresses} from "../constants"
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>

[Rampalamp]

Hey, not sure if this was your issue, but I was running into the same error. The issue for me was really quite annoyingly silly, especially since I had spent a good chunk of time checking absolutely everything else, and playing with different dependencies even... For me, in the './constants/index.js' file, my require statement for my abi constant was pointing to the contractAddresses.json so my abi was really just a duplicate of the contractAddresses variable.

Silly silly me, this very well may not be your issue, but it was indeed mine.

Best of luck.

[kashifkhan2022]

hi everyone !
I am unable to connect to Localhost 8545 having RPC URL (http://localhost:8545) in metamask, and the chainId 1337 shows Could not fetch chain ID. Is your RPC URL correct? is there any solution for this.

[Rampalamp]

hardhat chainId is 31337 I believe.

[kashifkhan2022]

I have tried by 31337 chainId but still facing error "Could not fetch chain ID. Is your RPC URL correct?"

[kashifkhan2022]

[kashifkhan2022]

is there any mistake that I am doing ?

[Rampalamp]

I am going to guess the issue at the Chain ID input is stemming from the issue at New RPC URL, it says you already have one pointing to localhost, so I would first try editing your existing localhost network (this comes default with metamask I believe) to have the chain ID of 31337

[kashifkhan2022]

but I deleted that one because when I was switching at default hardhat network facing issue unable to connect, then I deleted that one and again trying to add hardhat network but facing same issue related to chainID.

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

[same871]

Guys l'm facing a small challenge here, the line of code
network.config.chainId which is in mockOffchain.js is returning unidentified. what might be the issue. i am trying to pic the random winner for the Lottery

[CubikRuubik]

For those who've tried everything here but still, nothing worked. I've faced the same problem, for me the issue was in the raffleAddress, somehow the value that was assigned to it was 31337.
What I've changed was the import:
import { contractAddresses, abi } from "../constants/index.js"
Idk, but it felt correct
,and variable definition of raffleAddress:
const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
Hope this helps.

[xfcstunluo]

just change the account you use to connect your wallet to "hardhat-localhost" is ok

[danielvichinyan]

My solution was to:

1. Right-click on the Metamask extension icon
2. Manage extension
3. Toggle on "Developer mode" in the top-right corner
4. Manually update Metamask
5. Disconnect all accounts from the local network.
6. Restart the hh node and hh deploy once again.
7. Connect just the account you use with the 10000ETH.