N-dcool / fund-me-UI

HTML / Javascript Fund Me (Full Stack / Front End)

HTML / Javascript Fund Me (Full Stack / Front End)

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

Demo Video 👇 :

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

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.

Quickstart

1. Clone the repo

git clone https://github.com/n-dcool/fund-me-UI
cd fund-me-UI

2. 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".

And you should see a small button that says "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:

cd hardhat-fund-me
yarn
yarn hardhat node

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

2. 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.

3. Connect your metamask to your local hardhat blockchain.

4. 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.

5. Now you are ready to interact with your contract.

Credits !

Learned from @Patrick_Collins in FreeCodeCamp 🥳.