Lesson 10. Updating recentWinner address in UI without refreshing the page

[Mericbey167]

Hey! I've been struggling with updating recent winner part on UI. There is a section in lesson 10 which says "challenge for you". Those who finished the lesson will remember that Patrick said "when random word request is done we pick a winner and recent winner has been picked. fulfillRandomWords function fires an event called WinnerPicked. You set a listener in order to listen that event and update the UI without us refreshing the website manually". I've been tried a lot but didn't find a solution. I'll put my code here so maybe we can brainstorming together. I do have an error though. Any help will be appreciated :)

LotteryEntrance.jsx

const listenForWinnerPickedEvent = async () => {
    const provider = new ethers.providers.JsonRpcProvider(process.env.HARDHAT_RPC_URL)
    const raffle = new ethers.Contract(raffleAddress, abi, provider)
    await new Promise(async (resolve, reject) => {
      // once event has been fired, i want to listen for this event and update the UI without even refresh
      raffle.once("WinnerPicked", async () => {
        console.log("WinnerPicked event fired!!")
        try {
          console.log("try block")
          updateUI()
        } catch (error) {
          console.log(error)
          reject(error)
        }
        resolve()
      })
    })
  }

useEffect(() => {
    listenForWinnerPickedEvent()
    console.log("Recent winner has changed! Updating UI without refresh")
  }, [recentWinner])

This throws an error that says :

Uncaught (in promise) Error: invalid contract address or ENS name (argument="addressOrName", value=null, code=INVALID_ARGUMENT, version=contracts/5.6.0)

[MohammadRokib]

Check this #5673