Lesson 10: isWeb3Enabled getEntranceFee() undefined #4864

EEXstnce · 2023-02-18T20:40:14Z

EEXstnce
Feb 18, 2023

Hi All,

Been searching for hours now to no avail. Working on lesson 10 and I cannot get updateUI() to return my getEntranceFee(), it just keeps coming up as undefined.

LotteryEntrance.js

// have a function to call the lottery
import { useWeb3Contract } from "react-moralis"
import {contractAddresses, abi} from "../constants"
import { useMoralis } from "react-moralis"
import { useEffect } from "react"

export default function LotteryEntrance() {
    const {chainId: chainIdHex, isWeb3Enabled} = useMoralis()
    const chainId = parseInt(chainIdHex)

    // console.log(parseInt(chainIdHex))
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    // const {runContractFunction: enterRaffle} = useWeb3Contract({
    //     abi: abi,
    //     contractAddresses: raffleAddress, //specify the networkId
    //     functionName: "enterRaffle",
    //     params: {},
    //     msgValue: //

    // })

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

    })

    

    useEffect(() => {
        if (isWeb3Enabled) {
            // try to read the raffle entrance fee
            async function updateUI() {
                const something = (await getEntranceFee())
                console.log(something)
            }
            updateUI()
        }
    }, [isWeb3Enabled])
    
    return(<div>Hi from Lottery!</div>)
}

index.js

import Image from 'next/image'
import styles from '@/styles/Home.module.css'
// import ManualHeader from '@/components/ManualHeader'
import Header from "../components/Header"
import { useMoralis } from "react-moralis"
import LotteryEntrance from '@/components/LotteryEntrance'


export default function Home() {
  const {isWeb3Enabled, chainId} = useMoralis()

  return (
    <>
      <Head>
        <title>Smart Contract Lottery App</title>
        <meta name="description" content="Smart Contract Lottery Project" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      {/* <ManualHeader/> */}
      <Header />
      {/* header / connect button / nav bar */}
      <LotteryEntrance/>
    </>
  )
}

Backend 99-update-front-end.js:

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

const FRONT_END_ADDRESSES_FILE =
    "../nextjs-smartcontract-lottery-fcc/constants/contractAddresses.json"
const FRONT_END_ABI_FILE = "../nextjs-smartcontract-lottery-fcc/constants/abi.json"

module.exports = async function () {
    if (process.env.UPDATE_FRONT_END) {
        console.log("Updating front end...")
        updateContractAddresses()
        updateAbi()
    }
}

async function updateAbi() {
    const raffle = await ethers.getContract("Raffle")
    fs.writeFileSync(FRONT_END_ABI_FILE, raffle.interface.format(ethers.utils.FormatTypes.json))
}

async function updateContractAddresses() {
    const raffle = await ethers.getContract("Raffle")
    const chainId = network.config.chainId.toString()
    const currentAddresses = JSON.parse(fs.readFileSync(FRONT_END_ADDRESSES_FILE, "utf8"))
    if (chainId in currentAddresses) {
        if (!currentAddresses[chainId].includes(raffle.address)) {
            currentAddresses[chainId].push(raffle.address)
        }
    }
    {
        currentAddresses[chainId] = [raffle.address]
    }
    fs.writeFileSync(FRONT_END_ADDRESSES_FILE, JSON.stringify(currentAddresses))
}

module.exports.tags = ("all", "frontend")

Have looked through every discussion so far, searched stackoverflow and ethereumstackexchange, tried to trouble shoot by running my own moralis server. Nada. @PatrickAlphaC is there anyone you can tag who might be able to help?

alymurtazamemon · 2023-02-19T06:30:07Z

alymurtazamemon
Feb 19, 2023

@EEXstnce Make sure to clean the artifacts folder first run this command npx hardhat compile and then recompile contracts. And then again push your updated abi to the frontend side and restart the frontend. If this does not work, try to copy/paste the whole file to the constant folder (for example, if your contract name is Lottery, then your abi file name will be Lottery.json).

Import the file;

import Lottery from "../constants/Lottery.json";

and then update this;

const {runContractFunction: getEntranceFee } = useWeb3Contract({
  abi: Lottery.abi,
  contractAddresses: raffleAddress, //specify the networkId
  functionName: "getEntranceFee",
  params: {},

})

And now restart the frontend and try again. If it still does not work then leave both your repos I will check.

1 reply

EEXstnce Feb 19, 2023
Author

Hi, I've tried this now a few times, even just taking the contents of the 99 deploy script from the fcc repo, to no avail.

Here are my repos:
Hardhat-smart-contract-lottery-fcc
NextJs-smartcontract-lottery-fcc

Sosiaalinen · 2023-03-16T08:55:24Z

Sosiaalinen
Mar 16, 2023

I have the exact same problems. Did you find any solution?

1 reply

Mohit20Kumar Apr 6, 2023

did you find any solution? I am stuck at the same problem.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lesson 10: isWeb3Enabled getEntranceFee() undefined #4864

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Lesson 10: isWeb3Enabled getEntranceFee() undefined #4864

EEXstnce Feb 18, 2023

Replies: 2 comments · 2 replies

alymurtazamemon Feb 19, 2023

EEXstnce Feb 19, 2023 Author

Sosiaalinen Mar 16, 2023

Mohit20Kumar Apr 6, 2023

EEXstnce
Feb 18, 2023

Replies: 2 comments 2 replies

alymurtazamemon
Feb 19, 2023

EEXstnce Feb 19, 2023
Author

Sosiaalinen
Mar 16, 2023