html-js-ethers-connect

A small html file to show how to connect with metamask from the front-end. This is a minimalistic example what you can find in the metamask docs.

You can also check out the following editions for working with es6 syntax:

git checkout raw-js
git checkout vitejs

Requirements

• git
  • You'll know you've installed it right if you can run:
    • git --version
• Nodejs & npm
  • You'll know you've installed nodejs right if you can run:
    • node --version And get an ouput like: vx.x.x
  • You'll know you've installed npm right if you can run:
    • npm --version And get an ouput like x.x.x
    • You might need to install it with npm
• 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
• Metamask
  • This is a browser extension that lets you interact with the blockchain.

Quickstart

1. Clone the repo, install dependencies, and create the build.

git clone https://github.com/PatrickAlphaC/front-end-metamask-button
cd front-end-metamask-button
yarn
yarn build

2. Serve the file

yarn http-server

And you'll see an output like:

Available on:
  http://127.0.0.1:8080
  http://x.x.x.x:8080
Hit CTRL-C to stop the server

Copy paste the first link into your browser, 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:

git clone https://github.com/PatrickAlphaC/hardhat-simple-storage
cd hardhat-simple-storage
yarn
yarn hardhat node

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

2. Update your index.js with the new contract address.

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

3. Rebuild

yarn build

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

5. Reserve the front end with yarn http-server, and then hit the Execute button after connecting

Thank you!

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

ETH/Polygon/Avalanche/etc Address: 0x9680201d9c93d65a3603d2088d125e955c73BD65