now Hardhat
External Plugin
This is a third-party plugin. Please report issues in its Github Repository
Alpha release, interfaces will change.
A Hardhat plugin that generates a React hook component from your smart contracts. Hot reloaded into your React app. Deployed or not deployed. And everything typed and initialized.
If you want to quickly get started with a new hardhat project and a react application. Try this boilerplate.
Yarn: yarn add --dev @symfoni/hardhat-react
NPM: npm install --save-dev @symfoni/hardhat-react
Yarn: yarn add --dev hardhat hardhat-deploy hardhat-deploy-ethers hardhat-typechain hardhat-typechain ts-morph ts-node typescript ts-generator typechain typechain-target-ethers-v5
NPM: npm install --save-dev hardhat hardhat-deploy hardhat-deploy-ethers hardhat-typechain hardhat-typechain ts-morph ts-node typescript ts-generator typechain typechain-target-ethers-v5
To import plugins into your hardhat project.
If javascript project, hardhat.config.js
require("@nomiclabs/hardhat-ethers");
require("hardhat-deploy-ethers");
require("hardhat-deploy");
require("@symfoni/hardhat-react");
require("hardhat-typechain");
require("typechain-target-ethers-v5");
if typescript project, hardhat.config.ts
import "@nomiclabs/hardhat-waffle";
import "@nomiclabs/hardhat-ethers";
import "hardhat-deploy-ethers";
import "hardhat-deploy";
import "@symfoni/hardhat-react";
import "hardhat-typechain";
import "typechain-target-ethers-v5";
The plugin will hooks into hardhat-deploy, which hooks into npx hardhat node --watch
. Therefore, the plugin will run when you are starting up a node or making changes to a solidity file or deploy file.
You can run it manually with npx hardhat react
. You probably need to run npx hardhat typechain
and npx hardhat deploy
first to have artifacts, deployments, and typechain files ready.
The React context uses the output from typechain and deployments. It generates a react context component as a typescript react file (HardhatContext.tsx), which imports both typechain and deployment files. It then uses these files alongside Ethers and Web3Modal to set up a context for your connection and each smart contract (deployed or not deployed).
This plugin assumes that you are building your frontend inside a hardhat project (we later want to go away from this assumption). So we recommend you create a frontend
folder inside your hardhat project where all your frontend code and packages reside. Take a look at https://github.com/symfoni/hardhat-react-boilerplate for a demonstration.
Most frontend projects require all file dependencies to be inside that folder. Therefore we suggest (and default ) your typechain and deployments path to "./frontend/src/hardhat/{deployments | typechain}". The Hardhat context (a react component .tsx) file will also default to this folder. Though you are free to set whatever paths you like, and it should resolve relative to your config.paths.react folder.
You will need to install these dependencies in your frontend.
Yarn: yarn add ethers web3modal
NPM: npm install --save ethers web3modal
You are free to choose whatever React typescript "framework". We have only tested with Create React App for now.
Create React app can be initialized in your Hardhat root folder with:
NPX: npx create-react-app frontend --template typescript
To use the React component in a React application. Import the HardhatContext.tsx file in your app.
import { HardhatContext } from "./hardhat/HardhatContext";
Then wrap everything or the components in this context as a provider.
<HardhatContext>
<SomeComponent></SomeComponent>
<SomeOtherComponent></SomeComponent>
</HardhatContext>
To use a contract, import that context into the component that needs it.
import { GreeterContext } from "./../hardhat/HardhatContext";
Then use it as a state in that component.
const greeter = useContext(GreeterContext);
The contract context gives you two properties.
export interface ContractContext {
instance?: Contract;
factory?: ContractFactory;
}
If the Hardhatcontext successfully connected to a provider in your frontend (web3modal or Hardhat node) and
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { HardhatContext } from "./hardhat/HardhatContext";
import { Greeter } from "./components/Greeter";
function App() {
return (
<div className="App">
<header className="App-header">
<HardhatContext>
<Greeter></Greeter>
</HardhatContext>
</header>
</div>
);
}
export default App;
The contract is named Greeeter.sol
import React, { useContext, useEffect, useState } from "react";
import { GreeterContext } from "./../hardhat/HardhatContext";
interface Props {}
export const Greeter: React.FC<Props> = () => {
const greeter = useContext(GreeterContext);
const [message, setMessage] = useState("");
const [inputGreeting, setInputGreeting] = useState("");
useEffect(() => {
const doAsync = async () => {
if (!greeter.instance) return;
console.log("Greeter is deployed at ", greeter.instance.address);
setMessage(await greeter.instance.greet());
};
doAsync();
}, [greeter]);
const handleSetGreeting = async (
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
e.preventDefault();
if (!greeter.instance) throw Error("Greeter instance not ready");
if (greeter.instance) {
const tx = await greeter.instance.setGreeting(inputGreeting);
console.log("setGreeting tx", tx);
await tx.wait();
console.log(
"New greeting mined, result: ",
await greeter.instance.greet()
);
}
};
return (
<div>
<p>{message}</p>
<input onChange={(e) => setInputGreeting(e.target.value)}></input>
<button onClick={(e) => handleSetGreeting(e)}>Set greeting</button>
</div>
);
};
It gives you a context to your current provider and the ability to change it.
import { ProviderContext } from "./../hardhat/HardhatContext";
...
const [provider, setProvider] = useContext(ProviderContext)
It gives you a context to your current signer and the ability to change it.
import { SignerContext } from "./../hardhat/HardhatContext";
...
const [signer, setSigner] = useContext(SignerContext)
It gives you a context to your current address and the ability to change it.
import { CurrentAddressContext } from "./../hardhat/HardhatContext";
...
const [currentAddress, setCurrentAddress] = useContext(CurrentAddressContext)
Our goal with this plugin was to make it easier for new developers to try out smart-contract development. Therefore we default the most needed configuration.
The React context tries to connect the frontend up with an Ethereum provider. Here you can set that priority. In this scenario, the react context will try to connect with Web3modal(Metamask) first, then if that fails. Try to connect with your Hardhat node.
{
"react": {
"providerPriority": ["web3modal", "hardhat"]
}
}
Later, we will add the possibility to set all config networks providers, URLs, etc. as provider priority.
We stole this concept from Embark. Props to them.
HardhatContext.tsx (the React component) will be written to this path.
{
"paths": {
"react": "./frontend/src/hardhat"
}
}
If you don't set these configurations yourself, the hardhat-react plugin will default to this.
{
"react": {
"providerPriority": ["web3modal", "hardhat"]
},
"paths": {
"react": "./frontend/src/hardhat",
"deployments": "./frontend/src/hardhat/deployments/"
},
"namedAccounts": {
"deployer": {
"default": 0
}
},
"typechain": {
"outDir": "./frontend/src/hardhat/typechain",
"target": "ethers-v5"
}
}
Yea, we know. We have some patterns with a fallback provider that solves this. But for the hackathon, we have not that had time to implement that. Coming
Web3modal supports many wallets. We will soon provide configuration for each of them.
We will also allow you to inject your "whatever" hardhat development node you are using as a fallback provider when developing. We think this is a friendly tool for new Ethereum developers also as then they don't need to wrap their heads around a provider while building a smart-contract and a provider in the frontend.
eth_sendRawTransaction
Invalid nonce. Expected X but got X.
Reset your account in Metamask.
We don't know enough of the react build process to efficiently create a typescript react component which can be consumed by any other React build process. This is something we want to achieve!
It will do so by default, but we will later provide an option to be explicit about which contracts create a context.
Not planned atm.
If you want to develop this plugin in any way, we suggest you fork this Lerna repo; hardhat-plugins.