A web3 starter project using Typescript, Hardhat, ethers.js and @web3-react

Overview

Starter React Typescript Ethers.js Hardhat Project

This repo contains a Hardhat and React Dapp starter project. The React Dapp in the frontend dir of this repo interacts with Hardhat's example Greeter.sol smart contract running on a local blockchain. The Hardhat Greeter.sol example contract is the boilerplate contract that Hardhat creates when creating a new Hardhat project via yarn hardhat init.

The React Dapp in this repo looks like this:

React Dapp

The Dapp uses the @web3-react npm package's injected web3 provider to connect to MetaMask and demonstrates the following functionality:

  • Connecting a Dapp to the blockchain
  • Reading account data from the blockchain
  • Cryptographically signing digital messages
  • Deploying new instances of a smart contract
  • Reading and writing data to and from the deployed smart contract

This repo can be useful to anyone looking to get a local Ethereum blockchain running and to get a Dapp up and communicating with the local node quickly.

Additionally, this repo is a companion project to ChainShot's How to Build a React Dapp with Hardhat and MetaMask Medium article. The article and this GitHub repo are recommended for anyone wanting to build up their web3 skills and are helpful resources for anyone interested in joining any of ChainShot's bootcamps.

The smart contract and Hardhat node part of this project were created by installing the Hardhat npm package and bootstrapping a Hardhat project by running: yarn hardhat init. For more details you can read more in the Hardhat README doc. The frontend part of this project was created using Create React App.

Pull this project down from GitHub, cd into the project directory and run the following commands to get setup and running.

yarn
yarn compile
yarn hardhat node

The commands above will install the project dependencies, compile the sample contract and run a local Hardhat node on port 8545, using chain id 31337.

After running the above tasks checkout the frontend README.md to run a React Dapp using ethers.js that will interact with the sample contract on the local Hardhat node.

Some other hardhat tasks to try out are:

yarn hardhat accounts
yarn hardhat clean
yarn hardhat compile
yarn hardhat deploy
yarn hardhat help
yarn hardhat node
yarn hardhat test
You might also like...

Flashbots Ethers TypeScript example for Node.js and browser

Flashbots Ethers Example This project shows how to use Ethers to interact with Flashbots from JavaScript/TypeScript. The examples can be run in Node.j

Jun 28, 2022

Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Aug 25, 2022

A fully-fledged Hardhat project template based on TypeScript.

Fully-Fledged Hardhat Project Template Based on TypeScript Installation It is recommended to install Yarn through the npm package manager, which comes

Dec 21, 2022

GitHub starter project link: https://github.com/buildspace/waveportal-starter-project

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

Jun 5, 2022

Build your zkp app with typescript, hardhat, circom, and snarkjs!

Zk app boilerplate Pre requisites Install rust and circom2 Getting started Clone or fork this template repository. git clone https://github.com/wanseo

Dec 20, 2022

Build your zkp app with typescript, hardhat, circom, and snarkjs!

Zk app boilerplate Pre requisites Install rust and circom2 Getting started Clone or fork this template repository. git clone https://github.com/wanseo

May 18, 2022

Build your zkp app with typescript, hardhat, circom, and snarkjs!

Zk app boilerplate Pre requisites Install rust and circom2 Getting started Clone or fork this template repository. git clone https://github.com/wanseo

May 29, 2022

Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

node-cli-starter Minimal starter kit for building Node CLI applications with TypeScript. Getting Started To get started clone repo locally and run npm

May 17, 2022

A Typescript Hardhat-based template to develop evm-based smart contracts with all the tooling you need.

EVM-based Smart Contract Scaffold A Typescript Hardhat-based template to develop evm-based smart contracts with all the tooling you need. Features Use

Oct 24, 2022
Owner
ChainShot
Ethereum Developer Bootcamp
ChainShot
Introductory fullstack ethereum dapp using: solidity, hardhat, react.js, ethers.js

Intro to Fullstack Ethereum Development Check out deployed dapp here! (Make sure you're connected to the Rinkeby Testnet) This article will help you e

Christian Chiarulli 77 Dec 21, 2022
A Bed and Breakfast dApp run on Ethereum. Includes a token + schedule system (Solidity) and full front-end (React + ethers.js) built with Hardhat.

Hotel ETH - Watch Demo Video Hotel ETH A (fictional) Bed-and-Breakfast run on Ethereum Come Book a Room on Kovan or Rinkeby Networks View the Demo ยป C

Ryan Lambert 20 Aug 20, 2022
Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js

Building a Digital Marketplace on Ethereum The technologies used in this workshop are React, Next.js, Tailwind CSS, HardHat, Solidity, and Ethers. Get

Nader Dabit 114 Nov 15, 2022
This is a fully functional DAO, a Web3 project made using Solidity, Hardhat, JS, Next.js, Openzeppelin, CSS, HTML, using the Rinkerby network!

My First DAO! This is made for a DAO-Tutorial via learnweb3.io This is a DAO, a decentralised autonomous organisation, essentially a more collective a

Kell (K42) 3 Jun 20, 2022
Foundry-Hardhat plugins: Use Foundry for Hardhat projects

This repo contains hardhat plugins to use foundry tools in hardhat environments. Installation See in each plugin anvil forge foundryup Documentation F

Foundry 77 Nov 3, 2022
Decentralized Social Media. Built using Next.js. Web3 integration with Moralis, Metamask and Ethers.js. Also uses Lens Protofcol to get the profile data.

DecentraGram Decentralized Social Media. Built using Next.js. Web3 integration with Moralis, Metamask and Ethers.js. Also uses Lens Protofcol to get t

Didier Peran Ganthier 8 Dec 20, 2022
A guide to showcase use cases for web3.js and ethers.js libraries

Use case using web3.js and ethers.js The purpose of these scripts is to show how to build common cases of interaction with the blockchain using web3.j

ProtoFire 6 Aug 31, 2022
Sample project with: NextJS + Typescript + ReduxToolKit + Tailwind + Ethers

This is a Next.js project bootstrapped with create-next-app. Small app which shows last mined Blocks in real time on BSC and its transactions in backg

MBJ 2 Oct 9, 2022
Solidity starter combining foundry and hardhat because both are great and I can't live without either...

Combination Pizza Hut & Taco Bell Foundry && HardHat starter template. Motivation I like them both. With this set-up we get: Unit tests written in sol

Cache Monet 32 Aug 23, 2022
(๐Ÿ”—, ๐ŸŒฒ) Web3 Link Tree is a free & open-source alternative to Linktree built with React.js, Next.js, Tailwind and Web3-React

Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t

Naut 35 Sep 20, 2022