Lesson 10. Make a Winner Picked notification

[NickoMenty]

I want to make a notification once winner is picked and updateUI.

to do so I eddited onClick button like this:

<button
                        onClick={
                            new Promise(async (resolve, reject) => {
                                raffle.once("WinnerPicked", async () => {
                                    WinnerPickedSuccess()
                                    resolve()
                                })
                                await enterRaffle({
                                    onSuccess: handleSuccess(),
                                    onError: (error) => console.log(error),
                                })
                            })
                        }
                    >
          Enter Raffle
</button>

And added notification:

const WinnerPickedSuccess = async function (tx) {
        WinnerPickedNotification()
        updateUI()
    }

    const WinnerPickedNotification = function () {
        dispatch({
            type: "info",
            message: "Winner Picked",
            title: `Winner is ${recentWinner}`,
            position: "topR",
            icon: "bell",
        })
    }

HOWEVER, to trigger raffle.once I need add Raffle Contract Instance, so I did this:

    /*MY  CODE */ let provider
    /*MY  CODE */ provider = new ethers.providers.Web3Provider(window.ethereum)

   
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    console.log(chainId)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    /*MY  CODE */ const raffle = new ethers.Contract(raffleAddress, abi, player)
    const [entranceFee, setEntranceFee] = useState("0")
    const [numPlayer, setNumPlayers] = useState("0")
    const [recentWinner, setRecentWinner] = useState("0")

But I ran into this error, and do not understand why window is undefined

[shikhar229169]

The error "ReferenceError: window is not defined" typically occurs when you're trying to access the window object in a Node.js environment. The window object is part of the browser's JavaScript API and is not available in Node.js.

If you're trying to connect to an Ethereum provider like MetaMask, this code needs to be run in a browser environment, not in a Node.js environment. MetaMask injects the Ethereum provider into the window object of the browser, which is why you're trying to access window.ethereum.

[NickoMenty]

Okay, thank you, i will asap

[NickoMenty]

@shikhar229169 I am still strugling to push updated code to my repo :_)
This is the same code but from FCC, mine is identical, so you can read from this one:
https://github.com/PatrickAlphaC/nextjs-smartcontract-lottery-fcc

[NickoMenty]

nvm here is mine: https://github.com/NickoMenty/nextjs-raffle-toolbox-try

[theirrationalone]

You was executing handleSuccess function, not passing future reference of it... Try to implement only one of these two...

1. Either...

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

2. Or....

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

[NickoMenty]

Hi, yes, I will try this. But my main concern is that I can’t use raffle.once to make a website listen, when the “Winnerpicked” event is emitted to launch a new notification.