LESSON 10: "No Rafffle Address Detected" - ContractAddresses not read #1532

DorianDaSilva · 2022-08-04T17:33:03Z

DorianDaSilva
Aug 4, 2022

PROBLEMS:

Browser displaying followign error: TypeError: Cannot read properties of undefined (reading 'toString') referencing this line:
const entranceFeeFromCall = (await getEntranceFee()).toString()

I did continue the lesson and added the code supposed to fix this error as seen below:

        <div>
            Enter the Lottery
            {RaffleAddress ? (
                <div>
                    <button
                        onClick={async function () {
                            await enterRaffle()
                        }}
                    >
                        Enter Raffle
                    </button>
                    Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH
                </div>
            ) : (
                <div>No Raffle Address Detected</div>
            )}
        </div>

Instead of displaying the button with the entrance fee, it prints No Raffle Address Detected despite being present in contractAddresses.json file as seen below

This means that the line below is returning null despite being properly imported (See image below).
const RaffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null

imports:

===============================================================================

CODE:

../constants/index.js

const contractAddresses = require("./contractAddresses.json")
const abi = require("./abi.json")

module.exports = {
    abi,
    contractAddresses,
}

../pages/_app.js

import '../styles/globals.css'
import {MoralisProvider} from "react-moralis"

function MyApp({ Component, pageProps }) {
  return (
   <MoralisProvider initializeOnMount={false}>
  <Component {...pageProps} />
  </MoralisProvider>
  )
}

export default MyApp

../pages/index.js

import Head from "next/head"
import styles from "../styles/Home.module.css"
//import ManualHeader from "../components/ManualHeader"
import Header from "../components/Header"
import LotteryEntrance from "../components/LotteryEntrance"

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Smart Contract Raffle</title>
                <meta name="description" content="Generated by Our Smart Contract Raffle" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            {/*<ManualHeader></ManualHeader>*/}
            <br />
            <Header />
            <LotteryEntrance />
            {/*header/connect/navbar*/}
            <br />
            Let's get started...
        </div>
    )
}

Header.js

import { ConnectButton } from "web3uikit"

export default function Header() {
    return (
        <div>
            <br />
            Welcome to the decentralized Raffle!!! 
            <br />
            <br />
            <ConnectButton moralisAuth={false} />
        </div>
    )
}

LotteryEntrance.js

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()
    //console.log(parseInt(chainIdHex))
    const chainId = parseInt(chainIdHex)
    const RaffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    const [entranceFee, setEntranceFee] = useState("0")

    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: RaffleAddress, //Specify network Id
        functionName: "enterRaffle",
        msgValue: entranceFee,
        params: {},
    })

    //if there is a chainIdHex we do this if not we do something else
    const { runContractFunction: getEntranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: RaffleAddress, //Specify network Id
        functionName: "getEntranceFee",
        params: {},
    })

    useEffect(() => {
        if (isWeb3Enabled) {
            //try to read raffle entrance fee
            async function updateUI() {
                const entranceFeeFromCall = (await getEntranceFee()).toString()
                setEntranceFee(entranceFeeFromCall)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    return (
        <div>
            Enter the Lottery
            {RaffleAddress ? (
                <div>
                    <button
                        onClick={async function () {
                            await enterRaffle()
                        }}
                    >
                        Enter Raffle
                    </button>
                    Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH
                </div>
            ) : (
                <div>No Raffle Address Detected</div>
            )}
        </div>
    )
}

===============================================================================

Screenshots

===============================================================================

Can anyone explain to me what is wrong with this code since none of the material from docs, forums & google have a solution for it.

Thank you!

Answered by DorianDaSilva

Aug 5, 2022

The issue wasn't related to the code but with Metamask account.

I deleted all test accounts for hardhat-localhost
Created a new account
Imported new key from new hh node from Raffle contract

Now it displays properly. Something so silly took almost 2 days to figure out.

View full answer

technophile-04 · 2022-08-05T10:58:41Z

technophile-04
Aug 5, 2022

Hey try logging your RaffleAddress in LotteryEntrance.js and check that its not null and matching with the address from you hardhat chain...Also if possible please make a GitHub repo of your project and share it

3 replies

DorianDaSilva Aug 5, 2022
Author

@technophile-04 Thank you for the input.

It is returning null on console which makes sense since the UI is displaying "No Raffle Address Found".

NextJs github: https://github.com/DorianDaSilva/NextJs-SmartContractLottery-DeBug
Raffle github: https://github.com/DorianDaSilva/Raffle-SmartContract-Lottery

Thank you!

technophile-04 Aug 5, 2022

If we are getting RaffleAddress to be null this means that chainId is not present in contractAddresses.

Try logging chinId and see if you are getting it correct and also make sure you have selected hardhat network in metamask

could please share screenshots after logging this three :

In LotteryEntrance.js

const RaffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
console.log("ChainId converted to int ",parseInt(chainIdHex))
console.log("Chain ID : ",chainId);
console.log("Array of address",contractAddresses[chainId])

DorianDaSilva Aug 5, 2022
Author

@technophile-04 All logs return "NaN" however I found the solution.

Will post it below

DorianDaSilva · 2022-08-05T13:59:39Z

DorianDaSilva
Aug 5, 2022
Author

The issue wasn't related to the code but with Metamask account.

I deleted all test accounts for hardhat-localhost
Created a new account
Imported new key from new hh node from Raffle contract

Now it displays properly. Something so silly took almost 2 days to figure out.

1 reply

adityabhattad2021 Aug 7, 2022

Not working for me...Any different solution?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

LESSON 10: "No Rafffle Address Detected" - ContractAddresses not read #1532

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

LESSON 10: "No Rafffle Address Detected" - ContractAddresses not read #1532

Uh oh!

DorianDaSilva Aug 4, 2022

Replies: 2 comments · 4 replies

Uh oh!

technophile-04 Aug 5, 2022

Uh oh!

DorianDaSilva Aug 5, 2022 Author

Uh oh!

Uh oh!

technophile-04 Aug 5, 2022

Uh oh!

DorianDaSilva Aug 5, 2022 Author

Uh oh!

DorianDaSilva Aug 5, 2022 Author

Uh oh!

adityabhattad2021 Aug 7, 2022

DorianDaSilva
Aug 4, 2022

Replies: 2 comments 4 replies

technophile-04
Aug 5, 2022

DorianDaSilva Aug 5, 2022
Author

DorianDaSilva Aug 5, 2022
Author

DorianDaSilva
Aug 5, 2022
Author