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.
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.
npx hardhat run scripts/deploy.js --network localhost
Connecting Wallet with React to display Contact Address & Application Binary Interface (ABI):
Get User Quest Status
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.
