Lesson 8: withdraw function calling fund? #891

bensacc · 2022-07-11T19:55:31Z

bensacc
Jul 11, 2022

Hello! Having a bit of an odd error here I wonder if anyone else encountered. First there are no actual erors thrown, everything appears to be "working", but just not behaving as expected, Specifically, when I click the withdraw button, and confirm, nothing happens. Further, in Metamask, the txn I'm confirming looks a lot like a fund transaction, but with zero ETH (yet, somehow this does not throw an error...even if I DO sent a 0 ETH fund txn)

here is my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fund Me App</title>
</head>
<body>
    <p>let's do this!</p>
    <script src="./index.js" type="module">
    </script>
    <button id="connectButton">Connect</button>
    <button id="balanceButton">Get Balance</button>
    <button id="withdrawButton">Withdraw Balance</button>

    <!--form-->
    <label for="fund">ETH Amount</label>
    <input id="ethAmount" placeholder="0.1"/>
    <button id="fundButton">Fund</button>
</body>
</html>

and corresponding index.js:

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

const connectBTN = document.getElementById("connectButton")
const fundBTN = document.getElementById("fundButton")
const balanceBTN = document.getElementById("balanceButton")
const withdrawBTN = document.getElementById("withdrawButton")

const ethAmountIPT = document.getElementById("ethAmount")

connectBTN.addEventListener("click", connect)
fundBTN.addEventListener("click", fund)
balanceBTN.addEventListener("click", getBalance)
withdrawBTN.addEventListener("click", withdraw)

console.log(ethers)

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

// fund function
async function fund() {
    let ethAmount = ethAmountIPT.value
    console.log(`Funding with ${ethAmount}...`)
    if (typeof window.ethereum != "undefined") {
        const provider = new ethers.providers.Web3Provider(window.ethereum)
        // returns the wallet connected (metamask)
        const signer = provider.getSigner()
        console.log(`funding signer: ${signer}`)
        console.log(`funding contractAddress: ${contractAddress}`)
        const contract = new ethers.Contract(contractAddress, abi, signer)

        // now can run txns
        try {
            const txnResponse = await contract.fund({
                value: ethers.utils.parseEther(ethAmount),
            })
            await listenForTransactionMine(txnResponse, provider)
        } catch (error) {
            console.log(error)
        }
        console.log("done!")
    }
}

function listenForTransactionMine(txnResponse, provider) {
    console.log(`mining ${txnResponse.hash}...`)

    // listen for tranasaction to finish
    return new Promise((resolve, reject) => {
        provider.once(txnResponse.hash, (transactionReciept) => {
            console.log(
                `Completed with ${transactionReciept.confirmations} confirmations`
            )
            resolve()
        })
    })
}

async function getBalance() {
    if (typeof window.ethereum !== "undefined") {
        const provider = new ethers.providers.Web3Provider(window.ethereum)
        try {
            const balance = await provider.getBalance(contractAddress)
            console.log(ethers.utils.formatEther(balance))
        } catch (error) {
            console.log(error)
        }
    } else {
        balanceButton.innerHTML = "Please install MetaMask"
    }
}

async function withdraw() {
    console.log(`Withdrawing...`)
    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)
        try {
            const transactionResponse = await contract.withdraw()
            await listenForTransactionMine(transactionResponse, provider)
        } catch (error) {
            console.log(error)
        }
    } else {
        withdrawButton.innerHTML = "Please install MetaMask"
    }
}

here is what the confirmation looks like in Metamask...a whole lot like the fund txn!
("account 5" was just me messing in around in metamask and I ended up naming the contract address)

no errors are thrown, and getBalance just continues to return the amount I've funded so far...

Answered by bensacc

Jul 12, 2022

I just cloned the ethers-5.6.esm.min.js file from the repo and everything seems to work as expected. must have just been something screwy in mine

View full answer

bensacc · 2022-07-12T00:40:18Z

bensacc
Jul 12, 2022
Author

I just cloned the ethers-5.6.esm.min.js file from the repo and everything seems to work as expected. must have just been something screwy in mine

1 reply

CoinAdopter Aug 8, 2022

I'm going to try this today. Thanks so much!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Lesson 8: withdraw function calling fund? #891

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Lesson 8: withdraw function calling fund? #891

Uh oh!

Uh oh!

bensacc Jul 11, 2022

Replies: 1 comment · 1 reply

Uh oh!

bensacc Jul 12, 2022 Author

Uh oh!

CoinAdopter Aug 8, 2022

bensacc
Jul 11, 2022

Replies: 1 comment 1 reply

bensacc
Jul 12, 2022
Author