Lesson 10 | contract.on("WinnerPicked") doesnt work

[AstroUserName]

contract.on("WinnerPicked") doesnt work, nothing happens when i run script with pick winner.
i did
hh node
Then started my front which is connected to it throw metamask, so other req is okay, like entranceFee and winnerPicked, but i can show winner after reloading page. So if i can listen event WinnerPicked, i can make it like state. But it doesnt work

` async function getTransfer() {
const provider = new ethers.providers.JsonRpcProvider()
const contract = new ethers.Contract(contractAddresses, abi, provider)

    contract.on("WinnerPicked", (from, to, value, event) => {
        let transferEvent = {
            from: from,
            to: to,
            value: value,
            eventData: event,
        }
        console.log(JSON.stringify(transferEvent, null, 4))
    })
}`

useEffect(() => { if (isWeb3Enabled) { getTransfer() } }, [isWeb3Enabled])
may be its a problem with ethers version in morales? "5.6.0"

[AstroUserName]

After searching a bit, i didnt find anything but kind people in discord helped me
### const { chainId: chainIdHex, enableWeb3, isWeb3Enabled } = useMoralis()

` const checkEvents = async () => {

    const provider = await enableWeb3()
    const raffle = new ethers.Contract(raffleAddress, abi, provider)

    raffle.on("RaffleEnter", () => {})
    raffle.on("RequestedRaffleWinner",() => {})
    raffle.on("WinnerPicked", () => {})
}`

[AstroUserName]

Hello, property of what you trying to read?

here EnterRaffle

import { useEffect, useState } from "react"
import { useMoralis, useWeb3Contract } from "react-moralis"
import { ethers } from "ethers"
import { abi, contractAddresses } from "../constants"
import Logos from "./Logos"
import RaffleStats from "./RaffleStats"
import enterRaffleStyles from "../src/styles/EnterRaffle.module.css"
import RaffleDescription from "./RaffleDescription"
import { toast } from "react-toastify"

const EnterRaffle = () => {
    const configErrorNotify = {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: false,
        draggable: true,
        progress: undefined,
        theme: "light",
    }
    const [on, setOn] = useState(false)
    const [entranceFee, setEntranceFee] = useState("0")
    const [numberOfPlayers, setNumberOfPlayers] = useState("0")
    const [recentWinner, setRecentWinner] = useState("0")
    const [raffleState, setRaffleState] = useState("0")

    const formattedEntranceFee = ethers.utils.formatUnits(entranceFee, "ether")
    const formattedRecentWinner = `${recentWinner.slice(
        0,
        5
    )}...${recentWinner.slice(recentWinner.length - 3)}`

    const supportedChains = ["5", "31337"]
    const { chainId: chainIdHex, enableWeb3, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    const raffleAddress =
        chainId in contractAddresses ? contractAddresses[chainId][0] : null

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

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

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

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

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

    const updateUI = async () => {
        const entranceFeeFromContractCall = (await getEntranceFee()).toString()
        const numberOfPlayersFromContractCall = (
            await getNumberOfPlayers()
        ).toString()
        const recentWinnerFromContractCall = (
            await getRecentWinner()
        ).toString()
        const raffleStateFromContractCall = (await getRaffleState()).toString()
        console.log(
            `Raffle state from contract: ${raffleStateFromContractCall}`
        )
        setEntranceFee(entranceFeeFromContractCall)
        setNumberOfPlayers(numberOfPlayersFromContractCall)
        setRecentWinner(recentWinnerFromContractCall)
        setRaffleState(raffleStateFromContractCall)
    }

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

    const handleSuccess = async (tx) => {
        try {
            await tx.wait(1)
            updateUI()
            checkEvents()
        } catch (error) {
            toast.error("🦄 Ошибка!", configErrorNotify)
            console.log("inside handleSuccess func")
            console.error(error)
        }
    }

    const checkEvents = async () => {
        const provider = await enableWeb3()
        const raffle = new ethers.Contract(raffleAddress, abi, provider)

        raffle.on("RaffleEnter", () => setOn(true))
        raffle.on("RequestedRaffleWinner", () => updateUI())
        raffle.on("WinnerPicked", () => updateUI())
    }

    return (
        <div>
            {/* <ToastNotification closeNotification={closeNotification} on={on} /> */}
            <div className={enterRaffleStyles.enterRaffleWrapper}>
                {supportedChains.includes(chainId.toString()) ? (
                    <div className={enterRaffleStyles.cta}>
                        <button
                            onClick={async () => {
                                await enterRaffle({
                                    // this onSuccess method doesn't check if the transaction has block confirmations,
                                    // it only checks if the transaction was successfully sent to Metamask. It's in
                                    // handleSuccess where we wait for the transaction to be mined.
                                    onSuccess: handleSuccess,
                                    onError: (error) => {
                                        toast.error(
                                            "🦄 Ошибка!",
                                            configErrorNotify
                                        )

                                        console.log("inside onError func")
                                        console.error(error)
                                    },
                                })
                            }}
                            className={enterRaffleStyles.enterRaffle}
                            disabled={isLoading || isFetching}
                        >
                            Участвовать
                        </button>

                        <a
                            className={enterRaffleStyles.getEth}
                            href="https://goerlifaucet.com/"
                            target="_blank"
                        >
                            Получить тестовые эфиры ETH
                        </a>
                    </div>
                ) : (
                    <div className={enterRaffleStyles.warningContainer}>
                        <p className={enterRaffleStyles.warningMessage}>
                            <span>
                                <img
                                    className={enterRaffleStyles.warning}
                                    src="../warning-icon.png"
                                />
                            </span>
                            Надо кошель подключить. Видишь в правом углу кнопка?
                            Выбери сеть Ethereum Göerli (chainId = 5) или
                            Hardhat-Localhost (chainId = 31337) with{" "}
                            <b>MetaMask</b>.
                        </p>
                    </div>
                )}
            </div>

            <div className={enterRaffleStyles.grid}>
                <RaffleStats
                    entranceFee={formattedEntranceFee}
                    numberOfPlayers={numberOfPlayers}
                    recentWinner={formattedRecentWinner}
                    raffleState={raffleState}
                />
                <RaffleDescription />
                <Logos />
            </div>
        </div>
    )
}

export default EnterRaffle

[Leekkelly]

Thanks for uploaded your file.
I tried to add the

const updateUI = async () => {
const entranceFeeFromContractCall = (await getEntranceFee()).toString()
const numberOfPlayersFromContractCall = (
await getNumberOfPlayers()
).toString()
const recentWinnerFromContractCall = (
await getRecentWinner()
).toString()
const raffleStateFromContractCall = (await getRaffleState()).toString()
console.log(
Raffle state from contract: ${raffleStateFromContractCall}
)
setEntranceFee(entranceFeeFromContractCall)
setNumberOfPlayers(numberOfPlayersFromContractCall)
setRecentWinner(recentWinnerFromContractCall)
setRaffleState(raffleStateFromContractCall)
}

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

then do yarn run dev again, it still show this. Thanks anyway.

[AstroUserName]

it means that your contract doesnt connected well or something with this. Does it worked before? when you tried to call functions from contract? and check the functions name

[Leekkelly]

I followed the step to 17:50:00 in the video, before the error. everything was working fine.

[Leekkelly]

Updated: The TypeError: cannot read properties of undefined(reading 'toString') is because of the connected network was not localhost network, then this Error will show.
Thanks for checking Happy coding