hardhat-gui-baker

A simple plugin that automatically generates GUI for smartcontracts

What

This plugin will help you quickly test smartcontracts by locally creating a website in viteJs so you can interact with it. You will have access to all your functions and a toolkit to impersonate accounts on the go or receive ERC20.

Installation

pnpm i hardhat-gui-baker

yarn add hardhat-gui-baker

npm install hardhat-gui-baker

Import the plugin in your hardhat.config.js:

require("hardhat-gui-baker");

Or if you are using TypeScript, in your hardhat.config.ts:

import "hardhat-gui-baker";

Tasks

This plugin adds the gui-baker task to Hardhat:

Usage: hardhat [GLOBAL OPTIONS] gui-baker [--opt-port <STRING>] [--show-logs]

OPTIONS:

  --opt-port    Optional : Wich port will be used to expose the GUI
  --show-logs   Show logs

gui-baker: Create a simple Gui to test your smartcontracts

Usage

(Remember to log the deployed contract address in your deployment script, you will need to provide it in the GUI)

lanch your node :

npm hardhat node

deploy your smartcontract :

npm hardhat run pathToYourDeployementScript.ts

bake your GUI :

npm hardhat gui-baker

enjoy your bakery on (defalut) : https://localhost:4157

You will need to connect your wallet and be able to interact with your contract, that's it!

Whats next ?

• A configuration page will soon be added so that you will have to possibility to add all contract addresses only once.

• Switch from ethers to viem.sh.

• Basic rpc tools to change the BlockTime, BlockNumber...

• Integration of Hardhat network tools like impersonating accounts, resetting the node...

Contribution

Thanks to gdupont and Solal Dunckel