errors I got in meta mask !! Help me!!

[shaikasadahmed2k23]

Following are my questions:
I am building the buy me a coffe projct on cyfrin updraft and issue I got are below :

• I used one account address from anvill and imported an account in meta mask using that address of anvil( fake accounts), I am able to see the 10,000 ETH below the acc, i didn't see that in below the balance variable as u can see in the pics i attached
• When I hit Buycoffee button, am getting a pop of meta mask and that's it, am getting the error or issue, This issue's pic is aslo attached.

below is my index-js.js
`
// console.log("Hello");
import {createWalletClient,custom,createPublicClient,parseEther,defineChain} from "https://esm.sh/viem"
import { contractAddress,abi } from "./constants-js.js";

const connectButton = document.getElementById("connectBtn");
const fundBtn = document.getElementById("fundBtn");
const ethAmountInput = document.getElementById("ethAmount");

let walletClient

async function connect() {
if(typeof window.ethereum !== 'undefined') {
walletClient = createWalletClient({
transport: custom(window.ethereum)
})
await walletClient.requestAddresses()
connectButton.innerText = "Connected"
console.log("Connected to Metamask");
}
else{
console.log("Please install Metamask");
}
}

async function fund(){
const amount = ethAmountInput ? ethAmountInput.value : null
console.log(Funding with ${amount} ETH);
if(typeof window.ethereum !== 'undefined') {
walletClient = createWalletClient({
transport: custom(window.ethereum)
})
const [connectedAccount ] = await walletClient.requestAddresses()
const currentChain = await getCurrentChain(walletClient)
if (!amount) {
console.log('Please enter an ETH amount to fund');
return
}

    let value
    try {
      value = parseEther(amount)
    } catch (err) {
      console.error('Invalid ETH amount:', err)
      return
    }

    // ensure MetaMask is on the same chain as the client (add/switch if needed)
    if (window.ethereum && currentChain && currentChain.id) {
      const desiredHex = '0x' + Number(currentChain.id).toString(16)
      try {
        const mmChainId = await window.ethereum.request({ method: 'eth_chainId' })
        if (mmChainId !== desiredHex) {
          try {
            await window.ethereum.request({
              method: 'wallet_switchEthereumChain',
              params: [{ chainId: desiredHex }],
            })
          } catch (switchError) {
            await window.ethereum.request({
              method: 'wallet_addEthereumChain',
              params: [{
                chainId: desiredHex,
                chainName: currentChain.name || 'Localhost',
                nativeCurrency: currentChain.nativeCurrency || { name: 'Ether', symbol: 'ETH', decimals: 18 },
                rpcUrls: (currentChain.rpcUrls && currentChain.rpcUrls.default && currentChain.rpcUrls.default.http) || ['http://localhost:8545'],
              }],
            })
          }
        }
      } catch (err) {
        console.warn('Could not switch/add chain in MetaMask:', err)
      }
    }

    await walletClient.writeContract({
      address: contractAddress,
      abi: abi,
      functionName: "fund",
      account: connectedAccount,
      chain: currentChain,
      value,

    })

}
else{
console.log("Please install Metamask");
}
}
async function getCurrentChain(client) {
const chainId = await client.getChainId()
const currentChain = defineChain({
id: chainId,
name: "Custom Chain",
nativeCurrency: {
name: "Ether",
symbol: "ETH",
decimals: 18,
},
rpcUrls: {
default: {
http: ["http://localhost:8545"],
},
},
})
return currentChain
}

connectButton.onclick = connect
if (fundBtn) fundBtn.onclick = fund
`

[EngrPips]

The image you shared shows that you are running the process on the main Ethereum chain. Please ensure that you have your Anvil chain running and that you switch your MetaMask network to Anvil before running your process.