Lesson 10: Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'wait')

[MeghMax]

I have tried almost all solutions that I could find on github, stackoverflow and stackexchange and am still stuck with this error for a couple of days. If anyone can see what I have done wrong, I would really really appreciate it if you could help me out

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

const LotteryEntrance = () => {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    const [entranceFee, setEntranceFee] = useState("0")
    const dispatch = useNotification()

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

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

    useEffect(() => {
        if (isWeb3Enabled) {
            //try to read raffle entrance fee
            async function updateUI() {
                const entranceFeeFromCall = (await getEntranceFee()).toString()
                setEntranceFee(ethers.utils.formatUnits(entranceFeeFromCall, "ether"))
                console.log(entranceFee)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    const handleSuccess = async (tx) => {
        {
            await tx.wait(1)
        }
        handleNewNotification(tx)
    }

    const handleNewNotification = function () {
        dispatch({
            type: "info",
            message: "Transaction Complete",
            title: "Tx Notification",
            position: "topR",
            icon: "Bell",
        })
    }

    return (
        <div>
            LotteryEntrance
            {raffleAddress ? (
                <div>
                    <button
                        onClick={async function () {
                            await enterRaffle({
                                onComplete: handleSuccess,
                            })
                        }}
                    >
                        Enter Raffle
                    </button>
                    Entrance Fee: {entranceFee} ETH
                </div>
            ) : (
                <div>No Raffle Address Detected</div>
            )}
        </div>
    )
}

export default LotteryEntrance

[krakxn]

Push to GitHub. I will look into it.

[MeghMax]

Thank you so much for your help man ! Here is the link to my repository:

https://github.com/MeghMax/nextjs-smartcontract-lottery

[krakxn]

Check Ali's solution and see if that fixes the problem.

[alymurtazamemon]

@MeghMax You are getting this error because you are specifying the parameter tx on handleSuccess function, which is getting the result from onComplete, here you have to specify onSuccess because onComplete do not return the result.

await enterRaffle({
    // onComplete:
    // onError:
    onSuccess: handleSuccess,
    onError: (error) => console.log(error),
})

[MeghMax]

@alymurtazamemon I had initially used onSuccess inplace of onComplete, but for some reason that I could not figure out, my Enter Raffle button was not working with onSuccess which is why I had to change it to onComplete which may have resulted in the error but made my button work

[alymurtazamemon]

@MeghMax If your button is not working then It could be any other issue, onSuccess and onComplete are just callbacks that get triggered when enterRaffle completes