Skip to content

Creating a frontend for users to interact with a previously built smart contract using React framework to build the frontend, Hardhat as our development framework and the Ethers.js library to interact with the deployed smart contract.

Notifications You must be signed in to change notification settings

Swap-Nova/Decentralized-Applications

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hardhat

  • Hardhat (like most Ethereum libraries and tools) is written in Javascript.
  • One feature of Hardhat is that it comes with its own built-in Ethereum network called the Hardhat Network.
  • You can think of this as your private testnet that runs on your local machine. By default, it will mine a block with each transaction that it receives, in order and without any delays.
  • It is backed by the @ethereumjs/vm EVM implementation, the same one used by Ganache and Remix.

Adding Hardhat to MetaMask Wallet:

  • Network name - Hardhat Network
  • New RPC URL - http://127.0.0.1:8545/
  • Chain ID - 31337
  • Currency symbol - ETH
  • Block explorer URL (Optional) - leave it empty

Screenshot 2023-02-27 at 12 46 52 AM

Hardhat Network Terminal

npx hardhat node

Deploying a Smart Contract to Hardhat Network:

npx hardhat run scripts/deploy.js --network localhost

Screenshot 2023-02-27 at 12 52 16 AM

Screenshot 2023-02-27 at 12 49 02 AM

Connecting Wallet with React to display Contact Address & Application Binary Interface (ABI):

C59_Q2_Swap-Nova

Get User Quest Status

C59_Q3_Swap-Nova

Outcome:

  • Run Hardhat Network and deploy smart contracts to it.
  • Initialise a Hardhat project directory.
  • Import Hardhat Network as well as Hardhat Network accounts into MetaMask.
  • Connect a MetaMask wallet to a webpage.
  • Use Ethers.js to read values from a deployed smart contract.
  • Use Ethers.js to modify state of a blockchain.
  • Use React to build a frontend that allows users to interact with your deployed smart contract.

About

Creating a frontend for users to interact with a previously built smart contract using React framework to build the frontend, Hardhat as our development framework and the Ethers.js library to interact with the deployed smart contract.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published