Skip to content

makevoid/hardhat-react-boilerplate

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

hardhat-react-boilerplate + Token

this is a fork of https://github.com/symfoni/hardhat-react-boilerplate.git

In this repo I implemented some changes as I'm playing with the setup, backend pipeline (runs a truffle/ganache-like server, compiles and deploys the contract automatically)

Changes:

  • Enabled Token contract
  • Added a basic UI to this repo (using Bulma.io CSS microframework)

WIP

Adding ERC20 transfers and info (checkBalance()) as UI elements

  • implement balanceOf() (done)
  • implement transfer() method

Enjoy

@makevoid


original readme


Get started

  1. Clone the repo and cd into it git clone https://github.com/symfoni/hardhat-react-boilerplate.git MyProject && cd MyProject
  2. Install deps with yarn yarn or npm npm install
  3. Start hardhat npx hardhat node --watch

It runs up a Hardhat node, compile contracts, generates typescript interfaces, creates React context and instantiates your contract instances and factories with frontend provider.
  1. Open up a new terminal
  2. Enter the frontend directory: cd frontend
  3. Install dependencies: npm install
  4. Import seed phrase in Metamask. The default mnemonic currently used by hardhat is test test test test test test test test test test test junk
  5. Please note that you need to sign out from your current Metamask wallet to import a new one. Instead of logging out, you can use a new browser profile to do your Ethereum development:
  6. Click your profile icon in the top right corner of Chrome (right next to the hamburger menu icon)
  7. Click "Add"
  8. Give the profile a name and click "Add"
  9. In this new browser window, install Metamask and import the keyphrase above
  10. Ensure Metamask RPC is set to http://localhost:8545 and chainID 31337.
  11. Start the React app: npm start

The frontend should open at http://localhost:3000/

Because of this default hardhat.config.ts it will first try to connect with an injected provider like Metamask (web3modal package does this).

If nothing found it will try to connect with your hardhat node. On localhost and hardhat nodes it will inject your mnemonic into the frontend so you have a "browser wallet" that can both call and send transactions. NB! Dont ever put a mnemonic with actual value here.

In hardhat.config.ts there is example on how to instruct your hardhat-network to use mnemonic or privatekey.

const config: HardhatUserConfig = {
  react: {
    providerPriority: ["web3modal", "hardhat"],
  },
};

Ensure you are useing RPC to http://localhost:8545.

You may also need to set the chainID to 31337 if you are useing Hardhat blockchain development node.

Invalid nonce.

eth_sendRawTransaction
  Invalid nonce. Expected X but got X.

Reset your account in Metamask.

We ❤️ these Ethereum projects:

About

Playing with hardhat-react boilerplate - currently adding a ERC20 Token management / wallet sample UI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published