Lesson 10 getEntranceFee() returns 'undefined'

[lausannel]

I've been working on Lesson 10 Nextjs course. When writing the code of LotteryEntrance, I got getEntranceFee() returns 'undefined' and it is very confusing. I've read all relative issues about this. One of the most possible problem is that I haven't connected to the right network. But it seems I've connected to it. Can anybody offer some help?
here is the relative files
LotteryEntrance.tsx

// have a function to enter the lottery
import { useWeb3Contract } from "react-moralis";
import { abi, contractAddresses } from "../constants";
import { useMoralis } from "react-moralis";
import { useEffect } from "react";
import { ethers, BigNumber } from "ethers";
import Moralis from "moralis";
import { assert } from "console";

export default function LotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
    // console.log(parseInt(chainIdHex!));
    const chainId = parseInt(chainIdHex!).toString();
    console.log("chainId", chainId);
    const raffleAddress = chainId in contractAddresses ? (contractAddresses as any)[chainId][0] : null;
    // console.log("RaffleAddress", raffleAddress);
    // console.log(abi);
    // const chainIdM = Moralis.;
    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        params: {},
        // msgValue:
    });
    const testAddress = "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9";
    // console.assert(raffleAddress === testAddress);
    const { runContractFunction: getEntranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: testAddress, // specify the networkId
        functionName: "getEntranceFee",
        params: {},
    });
    const { runContractFunction: getRaffleState } = useWeb3Contract({
        abi: abi,
        contractAddress: testAddress, // specify the networkId
        functionName: "getRaffleState",
        params: {},
    });
    Moralis.EvmApi.utils.runContractFunction;
    async function updateUI() {
        console.log("Raffle address: ", raffleAddress);
        const entranceFeeFromContract = (await getEntranceFee());
        // check wether the getraffle state is executed
        console.log("Entrance fee from contract: ", entranceFeeFromContract);
        const raffleState = await getRaffleState();
        console.log("Raffle state: ", raffleState);
        // console.log(entranceFee);
        // console.log(entranceFeeFromContract);
    }
    useEffect(() => {
        console.log("isWeb3Enabled", isWeb3Enabled);
        if (isWeb3Enabled) {
            // try to read the entrance fee
            updateUI().then(() => {
                console.log("updateUI done");
            });
        }
    }, [isWeb3Enabled]);
    return <div>Hi from Lottery Entrance</div>;
}

hardhat.config.ts

import "@typechain/hardhat";
import "@nomiclabs/hardhat-waffle";
import "@nomiclabs/hardhat-etherscan";
import "@nomiclabs/hardhat-ethers";
import "hardhat-gas-reporter";
import "dotenv/config";
import "solidity-coverage";
import "hardhat-deploy";
import "solidity-coverage";
import { HardhatUserConfig } from "hardhat/config";

const GOERLI_RPC_URL = process.env.GOERLI_RPC_URL || "";
const PRIVATE_KEY = process.env.PRIVATE_KEY || "";
const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY || "";
const config: HardhatUserConfig = {
    solidity: "0.8.7",
    defaultNetwork: "hardhat",
    networks: {
        hardhat: {
            chainId: 31337,
        },
        goerli: {
            chainId: 5,
            url: GOERLI_RPC_URL,
            accounts: [PRIVATE_KEY],
        },
    },
    namedAccounts: {
        deployer: {
            default: 0,
        },
        player: {
            default: 1,
        },
    },
    etherscan: {
        apiKey: {
            goerli: ETHERSCAN_API_KEY,
        },
    },
    mocha: {
        timeout: 3000000, // 超时 3000s
    },
};

export default config;

helper.hardhat.config.ts

import { ethers } from "hardhat";
const networkConfig = {
    5: {
        name: "goerli",
        vrfCoordinatorV2: "0x2Ca8E0C643bDe4C2E08ab1fA0da3401AdAD7734D",
        entranceFee: ethers.utils.parseEther("0.01"),
        gasLane: "0x79d3d8832d904592c0bf9818b621522c988bb8b0c05cdc3b15aea1b6e8db0c15",
        subscriptionId: "1670",
        callbackGasLimit: "500000",
        interval: "30",
    },
    31337: {
        name: "localhost",
        entranceFee: ethers.utils.parseEther("0.01"),
        gasLane: "0x79d3d8832d904592c0bf9818b621522c988bb8b0c05cdc3b15aea1b6e8db0c15", // 没用
        callbackGasLimit: "500000",
        interval: "30",
    },
};

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

export { networkConfig, developmentChains };

abi.json

[
    {
        "type": "constructor",
        "payable": false,
        "inputs": [
            { "type": "address", "name": "vrfCoordinatorV2" },
            { "type": "uint256", "name": "_entranceFee" },
            { "type": "bytes32", "name": "keyHash" },
            { "type": "uint64", "name": "subscription_Id" },
            { "type": "uint32", "name": "callbackGasLimit" },
            { "type": "uint256", "name": "interval" }
        ]
    },
    {
        "type": "error",
        "name": "OnlyCoordinatorCanFulfill",
        "inputs": [
            { "type": "address", "name": "have" },
            { "type": "address", "name": "want" }
        ]
    },
    { "type": "error", "name": "Raffle__NotEnoughETHEntered", "inputs": [] },
    { "type": "error", "name": "Raffle__NotOpen", "inputs": [] },
    { "type": "error", "name": "Raffle__TransferFailed", "inputs": [] },
    {
        "type": "error",
        "name": "Raffle__UpkeepNotNeeded",
        "inputs": [
            { "type": "uint256", "name": "currentBalance" },
            { "type": "uint256", "name": "numPlayers" },
            { "type": "uint256", "name": "raffleState" }
        ]
    },
    {
        "type": "event",
        "anonymous": false,
        "name": "RaffleEnter",
        "inputs": [{ "type": "address", "name": "player", "indexed": true }]
    },
    {
        "type": "event",
        "anonymous": false,
        "name": "RequestRaffleWinner",
        "inputs": [{ "type": "uint256", "name": "requestId", "indexed": false }]
    },
    {
        "type": "event",
        "anonymous": false,
        "name": "WinnerPicked",
        "inputs": [{ "type": "address", "name": "winner", "indexed": true }]
    },
    {
        "type": "function",
        "name": "checkUpkeep",
        "constant": false,
        "payable": false,
        "gas": 29000000,
        "inputs": [{ "type": "bytes", "name": "checkData" }],
        "outputs": [
            { "type": "bool", "name": "upkeepNeeded" },
            { "type": "bytes", "name": "performData" }
        ]
    },
    {
        "type": "function",
        "name": "enterRaffle",
        "constant": false,
        "stateMutability": "payable",
        "payable": true,
        "gas": 29000000,
        "inputs": [],
        "outputs": []
    },
    {
        "type": "function",
        "name": "getEntranceFee",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint256" }]
    },
    {
        "type": "function",
        "name": "getInterval",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint256" }]
    },
    {
        "type": "function",
        "name": "getLastestTimestamp",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint256" }]
    },
    {
        "type": "function",
        "name": "getNumWords",
        "constant": true,
        "stateMutability": "pure",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint32" }]
    },
    {
        "type": "function",
        "name": "getNumberOfPlayers",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint256" }]
    },
    {
        "type": "function",
        "name": "getPlayer",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [{ "type": "uint256", "name": "index" }],
        "outputs": [{ "type": "address" }]
    },
    {
        "type": "function",
        "name": "getRaffleState",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint8" }]
    },
    {
        "type": "function",
        "name": "getRecentWinner",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "address" }]
    },
    {
        "type": "function",
        "name": "getRequestConfirmations",
        "constant": true,
        "stateMutability": "pure",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint16" }]
    },
    {
        "type": "function",
        "name": "performUpkeep",
        "constant": false,
        "payable": false,
        "gas": 29000000,
        "inputs": [{ "type": "bytes", "name": "performData" }],
        "outputs": []
    },
    {
        "type": "function",
        "name": "rawFulfillRandomWords",
        "constant": false,
        "payable": false,
        "gas": 29000000,
        "inputs": [
            { "type": "uint256", "name": "requestId" },
            { "type": "uint256[]", "name": "randomWords" }
        ],
        "outputs": []
    }
]

contractAddress.json

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

This is the result in Browser. we can see the entrance fee and raffle state are both undefined.


This is the relative metamask state.

This is my local hardhat-localhost node.

[alymurtazamemon]

@lausannel Make sure to do these changes

1. const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null;
2. const entranceFeeFromCall = (await getEntranceFee()).toString();
3. const raffleState = (await getRaffleState()).toString();

[lausannel]

I'll push it asap.

[lausannel]

@alymurtazamemon
The front end code https://github.com/lausannel/nextjs-smartcontract-lottery
The back end code https://github.com/lausannel/hardhat-smartcontract-lottery
Thanks for helping!

[alymurtazamemon]

@lausannel Ok, I will let you know once done.

[lausannel]

OKay, pls inform me if there is any problem when runing the code.

[lausannel]

hello,is there any clue?

[krakxn]

Push to GitHub; I will look into it.

[lausannel]

The front end code https://github.com/lausannel/nextjs-smartcontract-lottery
The back end code https://github.com/lausannel/hardhat-smartcontract-lottery
Already pushed, thanks for helping!

[lausannel]

While trying to get more information, I wrote the callback function in getEntranceFee()
And I got this

[lausannel]

The backend seems to be OK, because I use the sample front end code of this course to access, it works well.

[lausannel]

OKay, I found the reason here, and I am really confusing...
In constants/index.ts
Original

import * as contractAddresses from "./contractAddress.json";
import * as abi from "./abi.json";

export { contractAddresses, abi };

After Change

export { default as contractAddresses } from "./contractAddress.json";
export { default as abi } from "./abi.json";

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