LESSON 8 : When connectButton and fundButton clicked nothing happens #5725

pirqqs · 2023-06-22T16:24:31Z

pirqqs
Jun 22, 2023

Hello I am stuck in this error that I can't seem to understand. I have the index.js setup with the ethers, abi and contract address imports and I have the connect function and the fund function.And in my index.html file i have the connectButton and the fundButton. But when I try to interact with them in my local port nothing happens...
Here is my index.js:

//in nodejs
//require()

//in front-end javascript you can't use require
//import

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

const connectButton = document.getElementById("connectButton")
const fundButton = document.getElementById("fundButton")

connectButton.onclick = connect
fundButton.onclick = fund

async function connect() {
    if (typeof window.ethereum !== "undefined") {
        try {
            await window.ethereum.request({
                method: "eth_requestAccounts",
            })
        } catch (error) {
            console.log(error)
        }
        connectButton.innerHTML = "Connected!"
    } else {
        connectButton.innerHTML = "Please Install Metamask!"
    }
}
//fund fuction
async function fund() {
    const ethAmmount = "0.1"
    console.log(`Funding with: ${ethAmmount}`)
    if (typeof window.ethereum !== "undefined") {
        // What are the things we 100% need for sending a transaction:
        // provider / connection to the blockchain
        // signer /waller / someone with some gas
        // contract that we are interacting with
        // ^ABI & Address
        const provider = new ethers.providers.Web3Provider(window.ethereum)
        const signer = provider.getSigner()

        const contract = new ethers.Contract(contractAddress, abi, signer)
        const transctionResponse = await contract.fund({
            value: ethers.utils.parseEther(ethAmmount),
        })
    }
}

And here is my index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Fund Me App</title>
    </head>

    <body>
        <script src="./index.js" type="module"></script>

        <button id="connectButton">Connect</button>

        <button id="fundButton">Fund</button>
    </body>
</html>

Any help would be highly appreciated, please let me know if you need me to provide any more information.

alfaqi · 2023-06-22T20:49:55Z

alfaqi
Jun 22, 2023

Make sure the capitalization abi to ABI
this
import { abi, contractAddress } from "./constants"
to this
import { ABI, contractAddress } from "./constants"

1 reply

pirqqs Jun 23, 2023
Author

Hello my friend,
I changed abi to ABI but in this lines

import { ABI, contractAddress } from "./constants"

const contract = new ethers.Contract(contractAddress, ABI, signer)

As well as in my constant.js, unfortunatly nothing seems to have changed...
It is like my index.html doesn't execute the javascript code in my index.js. Maybe is there a problem with the .onclick lines in the index.js?

pirqqs · 2023-06-23T08:30:13Z

pirqqs
Jun 23, 2023
Author

I have tried to identify where the bug comes from and it seems that when I import { ABI, contractAddress } from "./constants" the connectButton in my local port stop doing its job. If I comment that line, the code works perfectly.

I hope this helps to understand why this is happening.

Here is the constants.js if it can be helpfull

export const contractAddress = "0xe7f1725e7734ce288f8367e1bb143e90bb3f0512"
export const ABI = [
    {
        inputs: [
            {
                internalType: "address",
                name: "priceFeedAddress",
                type: "address",
            },
        ],
        stateMutability: "nonpayable",
        type: "constructor",
    },
    {
        inputs: [],
        name: "FundMe__NotOwner",
        type: "error",
    },
    {
        inputs: [],
        name: "MINIMUM_USD",
        outputs: [
            {
                internalType: "uint256",
                name: "",
                type: "uint256",
            },
        ],
        stateMutability: "view",
        type: "function",
    },
    {
        inputs: [],
        name: "cheaperWithdraw",
        outputs: [],
        stateMutability: "nonpayable",
        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: "getFunders",
        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: "s_priceFeed",
        outputs: [
            {
                internalType: "contract AggregatorV3Interface",
                name: "",
                type: "address",
            },
        ],
        stateMutability: "view",
        type: "function",
    },
]

2 replies

pirqqs Jun 23, 2023
Author

Well nervermind it seems that I was just innatentive. I got this bug because in this line I wrote import { ABI, contractAddress } from "./constants" instead of import { ABI, contractAddress } from "./constants.js" That is my bad...
Thank you very much for the help my friend!

alfaqi Jun 23, 2023

I forgot to add .js to constants

LESSON 8 : When connectButton and fundButton clicked nothing happens #5725

Uh oh!

Uh oh!

pirqqs Jun 22, 2023

Replies: 2 comments · 3 replies

Uh oh!

alfaqi Jun 22, 2023

Uh oh!

Uh oh!

pirqqs Jun 23, 2023 Author

Uh oh!

Uh oh!

pirqqs Jun 23, 2023 Author

Uh oh!

Uh oh!

pirqqs Jun 23, 2023 Author

Uh oh!

alfaqi Jun 23, 2023

pirqqs
Jun 22, 2023

Replies: 2 comments 3 replies

alfaqi
Jun 22, 2023

pirqqs Jun 23, 2023
Author

pirqqs
Jun 23, 2023
Author

pirqqs Jun 23, 2023
Author