lesson 10: MetaMask - RPC Error: "message":"Nonce too high. Expected nonce to be 4 but got 12

[ghost]

i am getting this error when i am passing my enterRaffle button

import {useWeb3Contract} from "react-moralis"
import abi from "../constants/abi.json"
import contractAddress from "../constants/contractAddress.json"
import {useMoralis} from "react-moralis"
import React from "react"
import {useEffect, useState} from "react"
import {ethers} from "ethers"
import {useNotification} from "web3uikit"

function LotteryEntrance(){
const {chainId: chainIdHex, isWeb3Enabled} = useMoralis()
const chainId = parseInt(chainIdHex)
const raffleAddress = chainId in contractAddress ? contractAddress[chainId][0] : null
const [entranceFee, setEntranceFee] =useState("0")
const [numPLayer, setNumPlayer] =useState("0")
const [recentWinner, setRecentWinner] =useState("0")

const dispatch = useNotification()

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: getNumber0fPlayers} = useWeb3Contract({
abi:abi,
contractAddress: raffleAddress,
functionName:"getNumberOfPlayers",
params:{},
})

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

useEffect(() => {
if(isWeb3Enabled){
async function updateUI(){
const entranceFeeFromCall = (await getEntranceFee()).toString()
const numPlayerFromCall = (await getNumber0fPlayers()).toString()
const recentWinnerFromCall = await getRecentWinner()
setEntranceFee(entranceFeeFromCall)
setNumPlayer(numPlayerFromCall)
setRecentWinner(recentWinnerFromCall)
}
updateUI()
}
},[isWeb3Enabled])

const handleSuccess = async function(transaction){
await transaction.wait(1)
handleNotification(transaction)
}
const handleNotification = function(){
dispatch({
type: "info",
message:"transaction completed",
title:"transaction notification",
position:"topR",
icon:"bell",
})
}

return(

hello

{raffleAddress ? (

<button
onClick = {async function(){await enterRaffle({
onSuccess: handleSuccess,
onError: (error) => console.log(error),
})
}}>Enter Raffle

Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH

Players: {numPLayer}

Winner: {recentWinner}

):(

no raffle address detected

)}

) }

export default LotteryEntrance;

[othaime-en]

Hey @DANIA001 checkout this discussion with a similar issue and tell me if solves your issue

[ghost]

@othaime-en heyyy friend it worked thank you soooo much

[othaime-en]

Great! All the best!

[krakxn]

@alymurtazamemon