Lesson 10: Able to pick a winner, but the UI is not updating

[jjlintol1]

I am currently working on Lesson 10. When I run the mockOffchain.js script, I am seeing the proper logs that a winner is being selected. However, when I refresh on the frontend, the recent winner still shows a zero address, even though the winner is being logged in my console.

I copied the mockOffchain.js from the Github repo:

const { ethers, network } = require("hardhat")

async function mockKeepers() {
    const raffle = await ethers.getContract("Raffle")
    const checkData = ethers.utils.keccak256(ethers.utils.toUtf8Bytes(""))
    const { upkeepNeeded } = await raffle.callStatic.checkUpkeep(checkData)
    console.log(upkeepNeeded);
    if (upkeepNeeded) {
        const tx = await raffle.performUpkeep(checkData)
        const txReceipt = await tx.wait(1)
        const requestId = txReceipt.events[1].args.requestId
        console.log(`Performed upkeep with RequestId: ${requestId}`)
        if (network.config.chainId == 31337) {
            await mockVrf(requestId, raffle)
        }
    } else {
        console.log("No upkeep needed!")
    }
}

async function mockVrf(requestId, raffle) {
    console.log("We on a local network? Ok let's pretend...")
    const vrfCoordinatorV2Mock = await ethers.getContract("VRFCoordinatorV2Mock")
    await vrfCoordinatorV2Mock.fulfillRandomWords(requestId, raffle.address)
    console.log("Responded!")
    const recentWinner = await raffle.getRecentWinner()
    console.log(`The winner is: ${recentWinner}`)
}

mockKeepers()
    .then(() => process.exit(0))
    .catch((error) => {
        console.error(error)
        process.exit(1)
    })

And here is my LotteryEntrance.jsx on the frontend.

import {useEffect, useState} from "react";
import { useWeb3Contract, useMoralis } from "react-moralis";
import { contractAddresses, abi } from "@/constants";
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 dispatch = useNotification();

    const [entranceFee, setEntranceFee] = useState("0");
    const [numPlayers, setNumPlayers] = useState("0");
    const [recentWinner, setRecentWinner] = useState("0");
    
    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        params: {},
        msgValue: entranceFee
    })

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

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

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

    async function updateUi() {
        const newEntranceFee = (await getEntranceFee()).toString();
        const newNumPlayers = (await getNumberOfPlayers()).toString();
        const newRecentWinner = (await getRecentWinner()).toString();
        setEntranceFee(newEntranceFee);
        setNumPlayers(newNumPlayers);
        setRecentWinner(newRecentWinner);
    }

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

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

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

  return (
    <>
      {raffleAddress ? (
        <div>
            <button
            onClick={async () => await enterRaffle({
                onSuccess: handleSuccess,
                onError: (error) => console.error(error)
            })}
            >Enter Raffle</button>
            Entrance fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH
            Number of Players: {numPlayers}
            Recent Winner: {recentWinner}
        </div>
        ) : (
            <div></div>
        )}
    </>
  );
};

export default LotteryEntrance;

[ugur17]

Hi, could you resolve your issue?