Lesson 8, "Contract is not defined" called by web console

[philiplorber]

Around 13:14:36 of the tutorial, Patrick attempts to click on the fund button to get prompted about an intentional error related to the ethAmount, meanwhile I'm getting this error by the web console.

index.js:26 Uncaught (in promise) ReferenceError: contract is not defined
at HTMLButtonElement.fund

html-fund-me-fcc code

index.js

import { ethers } from "./ethers-5.1.esm.min.js"
import { abi, contractAddress } from "./constants.js"

const connectButton = document.getElementById("connectButton")
const fundButton = document.getElementById("fundButton")
connectButton.onclick = connect
fundButton.onclick = fund

console.log(ethers)

async function connect() {
    if (typeof window.ethereum !== "undefined") {
        await window.ethereum.request({ method: "eth_requestAccounts" })
        connectButton.innerHTML = "Connected"
    } else {
        connectButton.innerHTML = "Please install MetaMask"
    }
}

async function fund(ethAmount) {
    console.log(`Funding with ${ethAmount}...`)
    if (typeof window.ethereum !== "undefined") {
        const provider = new ethers.providers.Web3Provider(window.ethereum)
        const signer = provider.getSigner()
        const contract = new ethers.Contract(contractAddress, abi, signer)    }
        const transactionResponse = await contract.fund({
            value: ethers.utils.parseEther(ethAmount),
        })
}

Hovering on the "contract" line 25 check that it is a variable and is not being called, eventhough at the next line 26 I attempt to call it. I believe it has something to do with the abi or maybe the contract address but already tried check them and hasn't fixed it.

constant.js

export const contractAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"
export const abi = [
  {
    inputs: [
      {
        internalType: "address",
        name: "priceFeed",
        type: "address",
      },
    ],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  {
    inputs: [],
    name: "MINIMUM_USD",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "cheaperWithdraw",
    outputs: [],
    stateMutability: "payable",
    type: "function",
  },
  {
    inputs: [],
    name: "fund",
    outputs: [],
    stateMutability: "payable",
    type: "function",
  },
  {
    inputs: [
      {
        internalType: "address",
        name: "fundingAddress",
        type: "address",
      },
    ],
    name: "getAddressToAmountFunded",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [
      {
        internalType: "uint256",
        name: "index",
        type: "uint256",
      },
    ],
    name: "getFunder",
    outputs: [
      {
        internalType: "address",
        name: "",
        type: "address",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "getOwner",
    outputs: [
      {
        internalType: "address",
        name: "",
        type: "address",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "getPriceFeed",
    outputs: [
      {
        internalType: "contract AggregatorV3Interface",
        name: "",
        type: "address",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "getVersion",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "withdraw",
    outputs: [],
    stateMutability: "payable",
    type: "function",
  },
]

[paulcoffee85]

@philipo0
Can you post your html file as well.
Possibly your script tag is not inside body tag.

[philiplorber]

Yeah sure, looks like I messed up with the indentation.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fund Me App</title>
</head>
<body>
    What's good!
    <script src= "./index.js" type="module">
    </script>
    <button id="connectButton" >Connect</button>
    <button id="fundButton" >Fund</button>
</body>
</html>

[paulcoffee85]

Just testing it now.

Looks like your const transactionResponse should be inside the if(). Move first '}' to end of transactionResponse statement

if (typeof window.ethereum !== "undefined") {
		const provider = new ethers.providers.Web3Provider(window.ethereum)
		const signer = provider.getSigner()
		const contract = new ethers.Contract(contractAddress, abi, signer)
	}
	const transactionResponse = await contract.fund({
		value: ethers.utils.parseEther(ethAmount)
	})