Lesson 10: Challenge - Listen for 'WinnerPicked' events and auto update UI

[holmesec]

Hi there!👋
In lesson 10 Patrick challenges us to set up a listener to auto update the UI once a winner is picked from the lottery (https://www.youtube.com/watch?v=gyMwXuJrbJQ&t=65003s). I've been trying to do so, but without luck so far.

Looking at Moralis, the way to tackle this seems to be to setup a Moralis server which syncs with the contract's events and then subscribe to the server from the frontend (https://docs.moralis.io/moralis-dapp/automatic-transaction-sync/smart-contract-events). This feels a bit 'over the top' and I was wondering if anyone found a simpler way to solve this challenge. Maybe just using ethers.js?

[holmesec]

I've found the following way to solve this, but I'm still very interested in other/better solutions:

const [provider, setProvider] = useState()
useEffect(() => {
        if (isWeb3Enabled) {
            updateUI()
            const raffleContract = new ethers.Contract(raffleAddress, abi, provider.web3)
            raffleContract.on("WinnerPicked", async () => {
                console.log("Winner picked!")
                updateUI()
            })
        }
        Moralis.onWeb3Enabled((provider) => {
            setProvider(provider)
        })
    }, [isWeb3Enabled])

[aryanraj60]

I've found the following way to solve this, but I'm still very interested in other/better solutions:

const [provider, setProvider] = useState()
useEffect(() => {
        if (isWeb3Enabled) {
            updateUI()
            const raffleContract = new ethers.Contract(raffleAddress, abi, provider.web3)
            raffleContract.on("WinnerPicked", async () => {
                console.log("Winner picked!")
                updateUI()
            })
        }
        Moralis.onWeb3Enabled((provider) => {
            setProvider(provider)
        })
    }, [isWeb3Enabled])

It is just my suggestion, What i think is that you can declare an another useEffect just for events which will run only one time when the dapp loads for the first time. To avoid triggering the event code everytime "isWeb3Enabled" Changes.

[krakxn]

You can simplify it further: whenever our dependency array changes it updates the UI.

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

Hope this helps!

[holmesec]

Hi @krakxn,
I think you've misunderstood my question. As Patrick also explains in the video at the timestamp I've provided the link to, with your solution (which is identical to the one we code in the tutorial) we would have to reload the page to see the "Recent winner" address. The challenge was to add new code to listen for the "WinnerPicked" event to be emitted to auto update this info without the need of reloading the page.

[krakxn]

I see; so, if you want it to retain its value/state, there are two ways to go about it: one would be to use Window.localStorage and the other would be useState() via React. Hope this helps!

[holmesec]

I appreciate that you're taking time looking at my question, however I still don't think you've understood it. Maybe I've not explained it clearly enough. Have you seen the clip I linked to: https://www.youtube.com/watch?v=gyMwXuJrbJQ&t=65003s ? I dont want to retain it's value.

The challenge given by Patrick is to see if we can have the "Recent winner" address shown on our page auto-update without the need of refreshing the page (ctrl + f5). This can be done by creating a listener for the WinnerPicked event, which will be emitted in the fulfillRandomWords function on our Raffle contract when Chainlink VRF will call and execute the function. By listening for this event, we'll know when a new winner has been picked. When this happens we can the call updateUI(), which will fetch the new recent winner with a call to the getRecentWinner view function on our contract. You can test the code I provided to see that the recent winner address will be updated without the needed of hitting refresh.

I'm still interested in seeing if anyone came up with a better solution than the one I've provided.

[krakxn]

Ah, I understand now. As far as I can recall, there are two ways to listen for events to update the UI: one would be an EventEmitter API (lower level - as it supports complex objects too) and the other one being the one you are using via Contract. There isn't much difference between the two besides EventEmitters supporting filter logs (not relevant for the course - the basic functionality is essentially an EventListener).

[0xCardiE]

@holmesec I am trying to do the same thing and was trying similar solutions but yours is slicker. I just tried it with local hardhat so far so I used this kind of config

    const webSocketProvider = new ethers.providers.WebSocketProvider("ws://127.0.0.1:8545/");

    useEffect(() => {
        if (isWeb3Enabled) {
            updateUIValues();

            const raffleContract = new ethers.Contract(raffleAddress, abi, webSocketProvider);
            raffleContract.on("WinnerPicked", async () => {
                console.log("Winner picked!");
                updateUIValues();
            });
        }
    }, [isWeb3Enabled]);

and event triggers like it should, with one caveat and that is that actual value of winner is not updated, everything is triggered as it should be but when I logg what is happening in updateUI, value I get is still old. So
this below will output 0 even if mock script picks winner and it is added, so it looks like nothing is updated. Maybe some trx delay is needed for that? Wondering how it goes with your config?

        setRecentWinner(recentWinnerFromCall);
        console.log(recentWinnerFromCall);

Anyway, I dont have something smart to add at this point but I am also trying to figure this out and working on it. So hoping we somehow get to bottom of it :)

[Piwo96]

Hallo guys,

I think I have got a suitable solution, which neither requires to set the provider manually nor forces you to set up a moralis server.
The useMoralis hook also provides a property called web3 which basically works as a provider. It took me a whole day to figure that out. I was also wondering, If it is really necessary to set up a server, since moralis detects a wallet, which further should deliver a property which either should be a signer or a provider.

The following code should give you a solution.

const { chainId: chainIdHex, isWeb3Enabled, web3 } = useMoralis();

useEffect(() => {
        if(isWeb3Enabled){
            updateUI();
            listenForWinnerToBePicked();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isWeb3Enabled, numOfPlayers])

async function listenForWinnerToBePicked(){
        const lottery = new ethers.Contract(lotteryAddress!, ABI, web3)
        console.log("Waiting for a winner ...");
        await new Promise<void>((resolve, reject) => {
            lottery.once("WinnerPicked", async() => {
                console.log("We got a winner!");
                try {
                    await updateUI();
                    resolve();
                } catch (error) {
                    console.log(error);
                    reject(error);
                }
            });
        });
    }

This useEffect allows to remove the updateUI call from the handleSuccess function shown in the tutorial.

I hope this solution satisfies your needs... :)

if you want to see my solution, see my repo: https://github.com/Piwo96/nextjs-smartcontract-lottery.git
I also added a listener for the raffle entrance, with a little pending indicator.

Have a nice day and happy coding!

[JayeshJain25]

Its not working for me i still need to refresh to make it work

[Piwo96]

Well as far as I see, your code is not really the same. You should make sure to wrap your lottery.once() statement in a promise. The way you coded it can not work.

[Piwo96]

Its not working for me i still need to refresh to make it work

Okay sorry. Just checked again. You are doing it completely different😄. It's not possible to work what you are doing.

[aungmyokhant2465]

It works without numOfPlayers in useEffect and I changed lottery.on instead of lottery.once.

[r-bytes]

I basically used the same code as the staging test from lesson 9, deleted the asserts and added the address, abi and provider as you guys suggested in this discussion, worked perfectly for me thanks!

[lightrao]

very useful

[emilianolch]

Hi guys, here is my solution.

  useEffect(() => {
    if (isWeb3Enabled) {
      updateUI();
      if (contractAddress) {
        const contract = new ethers.Contract(contractAddress, abi, provider);
        contract.on("WinnerPick", () => {
          updateUI();
          console.log("We've got a winner!");
        });
      }
    }
  }, [isWeb3Enabled, chainId]);

I first tried using once method, as @Piwo96 did, but it only updated the content for the first winner, so I used on method instead.
The code works well but there's one thing I don't understand: when I reload the page the listener is executed one time for each winner previously picked. Why is that happening?

[ugur17]

Hey guys, i am not sure is it stupid solution but i did an easy way to solve it.
` let checkForWinner = async function () {
return await getMostRecentWinner();
}

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

I only defined a new variable and added to the useEffect dependency array. It's working fine for now. If somebody sees a mistake, i am waiting to hear about it. Thanks.