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

[eik-1]

Been stuck with this for 2 days
I can't get the enteranceFee from the contract using the function. Idk why
I've even copy pasted Patrick's abi and contract addresses in the demo code. Still the error persists.
I am using sepolia network on metamask and i've also provided the contract address for sepolia too

UPDATE : It seems that this happens when I start or refresh the app. After I start and edit few code and save the file. The error dissappears and it shows correct entranceFee. But I still don't consider this bug to be solved so if anybody could help I'd really be grateful

NOTE : When I use yarn hardhat node, the frontend files get updated but when I use yarn hardhat deploy --network sepolia then the front end files are not getting updated. So I just pasted the contract address for sepolia in my contract-address file

My component :

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

export default function LotteryEnterance() {
    const { isWeb3Enabled, chainId: chainIdHex, enableWeb3 } = useMoralis()
    const [chainId, setChainId] = useState(null)
    const [fee, setFee] = useState("0")

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

    useEffect(() => {
        if (chainIdHex) {
            const chainIdDecimal = parseInt(chainIdHex, 16)
            setChainId(chainIdDecimal)
            console.log(chainIdDecimal)
        }
    }, [chainIdHex])

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

    //runContractFunction can both send transactions and read states
    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        params: {},
        msgValue: fee,
    })

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

    async function updateUI() {
        const feeFromCall = (await getEnteranceFee()).toString()
        setFee(feeFromCall)
        console.log(fee)
    }

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

    return (
        <div>
            This project was made by Sarthak
            <div>Enterance Fee : {fee} ETH</div>
        </div>
    )
}

My contractAddresses.json file :

{ "11155111": ["0xcD31ECC318Ec7b0Dae58fCFE112cCA6cF2A5E882"] }

My updateFrontend code :

const { ethers, network } = require("hardhat")
const fs = require("fs")

const FRONTEND_PATH = "/home/sarthak/Solidity Codes/nextjs-raffle/constants/contractAddresses.json"
const FRONTEND_ABI_PATH = "/home/sarthak/Solidity Codes/nextjs-raffle/constants/abi.json"

module.exports = async function () {
    if (process.env.UPDATE_FRONTEND) {
        console.log("Updating Front end")
        updateContractAddress()
        updateABI()
    }
    async function updateABI() {
        const raffle = await ethers.getContract("Raffle")
        fs.writeFileSync(FRONTEND_ABI_PATH, raffle.interface.format(ethers.utils.FormatTypes.json))
    }

    async function updateContractAddress() {
        const raffle = await ethers.getContract("Raffle")
        const chainId = network.config.chainId.toString()
        const currentAddress = JSON.parse(fs.readFileSync(FRONTEND_PATH, "utf8"))
        if (chainId in currentAddress) {
            if (!currentAddress[chainId].includes(raffle.address)) {
                currentAddress[chainId].push(raffle.address)
            }
        } else {
            currentAddress[chainId] = [raffle.address]
        }
        fs.writeFileSync(FRONTEND_PATH, JSON.stringify(currentAddress))
    }
}
module.exports.tags = ["all", "frontend"]

[eik-1]

So I've even copy pasted Patrick's abi and contract addresses in the demo code. Still the error persists.

[Blockchain-Oracle]

confirm your network on mata mask make sure your intially connected to a network whose chainId is enabled in constant

you can also add this to your code this fix it

if(raffleAddress){}

    async function updateUI() {
        const feeFromCall = (await getEnteranceFee()).toString()
        setFee(feeFromCall)
        console.log(fee)
    }

in the update ui

async function updateUI() {
if(raffleAddress){
        const feeFromCall = (await getEnteranceFee()).toString()
        setFee(feeFromCall)
        console.log(fee)
}
    }

[eik-1]

Hey bro it is still showing that error since raffleAddress is correct

[Blockchain-Oracle]

After some couple of hours i think i found whats going on. i run your code on my pc heres something intersting

go back to your backend and deploy the contracts again run hh node make sure you also have this changes

async function updateUI() {
if(raffleAddress){
        const feeFromCall = (await getEnteranceFee()).toString()
        setFee(feeFromCall)
        console.log(fee)
}
    }

i strongly advive to use local network like in the video

remeber to mark this as answer phew! @PatrickAlphaC

[Blockchain-Oracle]

if your wondering what fee changes i made to your code here it is

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

export default function LotteryEnterance() {
  const { isWeb3Enabled, chainId: chainIdHex, enableWeb3 } = useMoralis();
  const [chainId, setChainId] = useState(null);
  const [fee, setFee] = useState("0");

  // useEffect(() => {
  //   if (isWeb3Enabled) {
  //     enableWeb3();
  //   }
  // }, [isWeb3Enabled, enableWeb3]);

  useEffect(() => {
    if (isWeb3Enabled) {
      updateUI();
    }
  }, [isWeb3Enabled]); //this starts as false

  useEffect(() => {
    if (chainIdHex) {
      const chainIdDecimal = parseInt(chainIdHex);
      setChainId(chainIdDecimal);
      console.log(chainIdDecimal);
    }
  }, [chainIdHex]);

  const raffleAddress =
    chainId in contractAddress ? contractAddress[chainId][0] : null;

  //runContractFunction can both send transactions and read states
  const { runContractFunction: enterRaffle } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "enterRaffle",
    params: {},
    msgValue: fee,
  });

  const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getEntranceFee",
    params: {},
  });
  async function updateUI() {
    if (raffleAddress) {
      const feeFromCall = (
        await getEntranceFee({ onError: (error) => console.log(error) })
      ).toString();
      setFee(feeFromCall);
      console.log(fee);
    }
  }

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

  return raffleAddress ? (
    <div>
      This project was made by Sarthak
      <div>Enterance Fee : {fee} ETH</div>
    </div>
  ) : (
    <div>no address found</div>
  );
}

[eik-1]

Thank you bro I will try this asap but can't I do it with sepolia network ?

[eik-1]

Bro this is not working

[eik-1]

yo @Blockchain-Oracle please help