Git Product home page Git Product logo

html-fund-me-fcc's Introduction

html-fund-me-fcc

โŒจ๏ธ (12:32:57) Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)

This is a minimalistic example what you can find in the metamask docs.

Requirements

  • git
    • You'll know you've installed it right if you can run:
      • git --version
  • Metamask
    • This is a browser extension that lets you interact with the blockchain.
  • Nodejs
    • You'll know you've installed nodejs right if you can run:
      • node --version And get an ouput like: vx.x.x
  • Yarn instead of npm
    • You'll know you've installed yarn right if you can run:
      • yarn --version And get an output like: x.x.x
      • You might need to install it with npm

Confused? You can run git checkout nodejs-edition if you'd like to see this with nodejs.

Typescript

For this demo project, we do not have a typescript edition. Please see the NextJS projects for a professional typescript front end.

Optional Gitpod

If you can't or don't want to run and install locally, you can work with this repo in Gitpod. If you do this, you can skip the clone this repo part.

Open in Gitpod

Quickstart

  1. Clone the repo
git clone https://github.com/PatrickAlphaC/html-fund-me-fcc
cd html-fund-me-fcc
  1. Run the file.

You can usually just double click the file to "run it in the browser". Or you can right click the file in your VSCode and run "open with live server".

Optionally:

If you'd like to run with prettier formatting, or don't have a way to run your file in the browser, run:

yarn
yarn http-server

And you should see a small button that says "connect".

Connect

Hit it, and you should see metamask pop up.

Execute a transaction

If you want to execute a transaction follow this:

Make sure you have the following installed:

  1. You'll need to open up a second terminal and run:
git clone https://github.com/PatrickAlphaC/hardhat-fund-me-fcc
cd hardhat-fund-me-fcc
yarn
yarn hardhat node

This will deploy a sample contract and start a local hardhat blockchain.

  1. Update your constants.js with the new contract address.

In your constants.js file, update the variable contractAddress with the address of the deployed "FundMe" contract. You'll see it near the top of the hardhat output.

  1. Connect your metamask to your local hardhat blockchain.

PLEASE USE A METAMASK ACCOUNT THAT ISNT ASSOCIATED WITH ANY REAL MONEY. I usually use a few different browser profiles to separate my metamasks easily.

In the output of the above command, take one of the private key accounts and import it into your metamask.

Additionally, add your localhost with chainid 31337 to your metamask.

  1. Reserve the front end with yarn http-server, input an amount in the text box, and hit fund button after connecting

Thank you!

If you appreciated this, feel free to follow me or donate!

ETH/Polygon/Avalanche/etc Address: 0x9680201d9c93d65a3603d2088d125e955c73BD65

Patrick Collins Twitter Patrick Collins YouTube Patrick Collins Linkedin Patrick Collins Medium

html-fund-me-fcc's People

Contributors

alymurtazamemon avatar csituma avatar divyanshudeoli avatar dynamitetechdev avatar joonakauranen avatar nubshark avatar patrickalphac avatar robocrypter avatar uday03meh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

html-fund-me-fcc's Issues

Metamask Error: Nonce too high.

Issue Description:
If hardhat node is re-executed, when you trying call the fund() function the console will throw a this error:

Nonce too high. Expected nonce to be 2 but got 3. Note that transactions can't be queued when automining.

Solution:
Patrick share a solution for his metamask version on 13:19:00, but in my version (10.28.3) the solution is:
Go to Metamask > My Accounts (top-right circle) > Settings > Advanced > Press the button "clear activity tab data" in the "Clear activity and nonce data" section.

window.ethereum "undefined"

Hi everybody! ๐Ÿ‘‹
I just started with lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
At the beginning of the lesson, i tried to check window.ethereum on the Chrome browser console and it showed me undefined ๐Ÿ˜• although i have MetaMask installed and i was using it along with the course with no problems.
I'll keep following along with coding tho, and if any of you can help me with this, i'd really appreciate it.

provider.once returns text instead of numbers

In this section, following the tutorial should return the number 1, but I got the wrong text instead

CODE

function listenForTransactionMine(transactionResponse, provider) {
    console.log(`Mining ${transactionResponse.hash}...`)
    // create a listener for the blockchain
    return new Promise((resolve, reject) => {
        provider.once(transactionResponse.hash, (transactionReceipt) => {
            console.log(
                `Completed with ${transactionReceipt.confirmations} confirmations..`
            )
            resolve()
        })
    })
}

ERROR

Completed with async confirmations() {
        return (await this.provider.getBlockNumber()) - this.blockNumber + 1
    } confirmations..

metamask issue.

after connecting metamask to local host as shown in tutorail. i am unable to fund my contract
snippet of fund function

async function fund() {
    const ethAmount = "0.01"
    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)
        console.log(contract)
        const transactionResponse = await contract.fund({
            value: ethers.utils.parseEther(ethAmount),
        })
    }
}

i revcieved two errors s in console of live server is

inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error
Uncaught (in promise) 

Error: Transaction reverted: function selector was not recognized and there's no fallback function (BUT contract calls still work?!)

Hi! I keep getting the following error when i call the fund contract. And it also seems that when i call it once, it runs multiple times in my hardhat node (with the same errors coming out several times)

eth_call
  Contract call:       FundMe#<unrecognized-selector>
  From:                0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
  To:                  0xe7f1725e7734ce288f8367e1bb143e90bb3f0512

  Error: Transaction reverted: function selector was not recognized and there's no fallback function

But when i check the console in my webpage, it seems to have worked (and i also got the transaction confirmations in metamask)

Screenshot 2023-06-07 at 1 08 27 PM

Is this normal? even though the contract calls are working properly with getBalance and withdraw

metamask not connecting to local network

Hello Sir! @PatrickAlphaC and everyone I have an issue Kindly help me !

when I try to add a new network in metamask and add my RPC URL and ChainId it gives an error

Could not fetch chain ID. Is your RPC URL correct?

Screenshot 2022-10-02 52154165

and when I try to save it shows

Screenshot 2022-10-02 023512

my hardhat localhost is running in the background

dksfjal

what should i do I'm stuck...

js issues helpz

when we test the fund function in index.js

i checked my code there is no differenet with example code

but my chrome gave me this error plz help

image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.