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

[cipher222]

I am running into an issue where when I try to convert get entrance fee to a string I get this error

I am assuming that this is because I am not actually calling getEntranceFee and this is confirmed by my local blockchain log

I have tried all of the solutions suggested in similar discussion threads but have still not solved my issue. I have also made sure that my meta mask is on Hardhat-Localhost and its chain id is 31337 (which it was not originally). In addition, my meta mask is most definitely on that network so I don't think that is the issue (but I could be wrong). I have also tried copying/pasting other people's code from the discussions where they were having trouble but I am still getting the same error. Any suggestions would be appreciated because I have been trying to troubleshoot for a while now. Thanks!!

Here is my code so far:

1. abi.json (which includes the getEntranceFee function)

[
    {
        "type": "constructor",
        "payable": false,
        "inputs": [
            { "type": "address", "name": "vrfCoordinatorV2" },
            { "type": "uint64", "name": "subscriptionId" },
            { "type": "bytes32", "name": "gasLane" },
            { "type": "uint256", "name": "interval" },
            { "type": "uint256", "name": "entranceFee" },
            { "type": "uint32", "name": "callbackGasLimit" }
        ]
    },
    {
        "type": "error",
        "name": "OnlyCoordinatorCanFulfill",
        "inputs": [
            { "type": "address", "name": "have" },
            { "type": "address", "name": "want" }
        ]
    },
    {
        "type": "error",
        "name": "Raffke__UpkeepNotNeeded",
        "inputs": [
            { "type": "uint256", "name": "currentBalance" },
            { "type": "uint256", "name": "numPlayers" },
            { "type": "uint256", "name": "raffleState" }
        ]
    },
    { "type": "error", "name": "Raffle__NotEnoughETHEntered", "inputs": [] },
    { "type": "error", "name": "Raffle__NotOpen", "inputs": [] },
    { "type": "error", "name": "Raffle__TransferFailed", "inputs": [] },
    {
        "type": "event",
        "anonymous": false,
        "name": "RaffleEnter",
        "inputs": [{ "type": "address", "name": "player", "indexed": true }]
    },
    {
        "type": "event",
        "anonymous": false,
        "name": "RequestedRaffleWinner",
        "inputs": [{ "type": "uint256", "name": "requestId", "indexed": true }]
    },
    {
        "type": "event",
        "anonymous": false,
        "name": "WinnerPicked",
        "inputs": [{ "type": "address", "name": "winner", "indexed": true }]
    },
    {
        "type": "function",
        "name": "checkUpkeep",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [{ "type": "bytes" }],
        "outputs": [{ "type": "bool", "name": "upkeepNeeded" }, { "type": "bytes" }]
    },
    {
        "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": "getLatestTimeStamp",
        "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": "uint256" }]
    },
    {
        "type": "function",
        "name": "getNumberOfPlayers",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint256" }]
    },
    {
        "type": "function",
        "name": "getPlayers",
        "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": "uint256" }]
    },
    {
        "type": "function",
        "name": "performUpkeep",
        "constant": false,
        "payable": false,
        "gas": 29000000,
        "inputs": [{ "type": "bytes" }],
        "outputs": []
    },
    {
        "type": "function",
        "name": "rawFulfillRandomWords",
        "constant": false,
        "payable": false,
        "gas": 29000000,
        "inputs": [
            { "type": "uint256", "name": "requestId" },
            { "type": "uint256[]", "name": "randomWords" }
        ],
        "outputs": []
    }
]

2. contractAddresses.json

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

3. index.js

const contractAddresses = require("./contractAddresses.json")
const abi = require("./abi.json")
module.exports = {
    abi,
    contractAddresses,
}

4. LotteryEntrance.js

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

export default function LotteryEntrance() {
    const { chaindId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chaindId = parseInt(chainIdHex)
    const raffleAddress = chaindId in contractAddresses ? contractAddresses[chaindId][0] : null
    const [entranceFee, setEntranceFee] = useState("0") //entranceFee= variable we call to see the get the entrancefee, set entrance fee is the
    //function we call to update/set that entrance fee. Its parameter is the return value from our getEntranceFee function

    // const {runContractFunction: enterRaffle} = useWeb3Contract({
    //     abi: abi,
    //     contractAddress: contractAddress[],
    //     functionName: "enterRaffle",
    //     params:{},
    //     msgValue://,
    // })

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

    //here we are using useEffect to get the entrancefee from the contract. Because getEntranceFee is an async function we need to make a async function
    //that is called when web3 is enable/we have access to our contract. Gets entrance as soon as the web loads
    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                const entranceFeeFromCall = (await getEntranceFee()).toString()
                setEntranceFee(entranceFeeFromCall)
                console.log(entrancefee)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    return (
        <div>
            Hi from lottery entrance <div>{entranceFee}</div>
        </div>
    )
}

5. Header.js

import { ConnectButton } from "web3uikit"

export default function Header() {
    return (
        <div>
            <ConnectButton moralisAuth={false} />
        </div>
    )
}

[krakxn]

Can you make a repo and link it here? I will look into it -- and make PRs if necessary

[alymurtazamemon]

@cipher222 Push your both projects (lottery and frontend) codes to GitHub and leave link here.

[WillyEth]

got the same issue

[alymurtazamemon]

@WillyEth Create a discussion and leave both projects' repo links there.

[cipher222]

I solved the issue by redoing that section of the course. Here is the code that is working for me. I have no idea what caused the issue.

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

export default function LotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis() //pull out chainId obj and rename it as chainIdHex
    const chainId = parseInt(chainIdHex) //create new var called chainId
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null

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

    // const { runContractFunction: enterRaffle } = useWe3Contract({
    //     abi: abi,
    //     contractAddress: raffleAddress,
    //     functionName: "enterRaffle",
    //     params: {},
    //     msgValue:
    // })

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

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

    msgValue: return (
        <div>
            Hi from lottery entrance<div>{entranceFee}</div>
        </div>
    )
}

[youneshrz]

go to contractAddresses.json
then go edit your chainId from 31337 to 1337 this will solve your problem

[DEFIdaniel1]

Tried this and thought it worked, but it's not the best solution. It will work to get/fetch data from the blockchain, but you can't run functions.

What I found was that metamask changed the localhost chainId to 1337 (this is a metamask default). What you need to do is edit the metamask local chainId to 31337 and SAVE QUICKLY! If you let it sit too long, it reverts to 1337.

Hope that helps others!