Skip to content

Generate automatically a customizable interface from ABI to interact with Ethereum smart contracts.

License

Notifications You must be signed in to change notification settings

danielefavi/ethereum-interface-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ethereum Smart Contracts Interface Generator

NPM command that generates an interface from ABIs to interact with the Ethereum smart contracts.

IMPORTANT: this package is still under development!

The generated interface is easily customizable: the GUI is built with bootstrap and vanilla javascript (and of course Web3.js 🙂).

With this NPM command you can export the interface or run the interface automatically on the server.


Installation

npm i ethereum-interface-generator -g

Commands

Serve

The serve command creates the interface for interacting with the smart contract and it starts the server to the default URL http://localhost:5432.

Usage:

eth-ui-gen serve

Options:

  • -c (or --contracts): folder that contains the compiled ABI of the smart contracts. Default: current folder (.);
  • -p (or --port): port of the local server. Default: 5432

Note: if you run eth-ui-gen serve without specifying -c then make sure you run the command in the same folder where the ABIs are stored (on Truffle the folder is build/contracts).

The command below builds the interface using the ABIs found in the folder /../dapp/build/contracts/ and then it starts the local server on the port 7765.

eth-ui-gen serve -c /../dapp/build/contracts/ -p 7765

Export

eth-ui-gen export

Options:

  • -c (or --contracts): folder that contains the compiled ABI of the smart contracts. Default: current folder (.);
  • -t (or --target): destination folder where to export the files. Default: current folder (.).
  • -m (or --minify): minify the Javascript. Default: false.

Note: if you run eth-ui-gen export without specifying -c then make sure you run the command in the same folder where the ABIs are stored (on Truffle the folder is build/contracts).

The command below builds the UI using the smart contract ABIs found in the folder /../dapp/build/contracts/ and it exports the files to the folder /home/dan/Desktop/smart-contracts-ui/.

eth-ui-gen export -c /../dapp/build/contracts/ -t /home/dan/Desktop/smart-contracts-ui/

Smart Contract JSON Format

The JSON files of the compiled and deployed smart contracts (that you give to the command) must contain the following values:

  • contractName: the name of the contract.
  • abi: ABI of the compiled smart contract.
  • networks: list of networks where the contract has been deployed.

Below an example of how the JSON file should look like:

{
    "contractName": "MyAwesomeContract",
    "abi": [
        {
            "inputs": [
                {
                    "internalType": "string",
                    "name": "name",
                    "type": "string"
                }
            ],
            "name": "storeName",
            "outputs": [],
            "stateMutability": "payable",
            "type": "function",
            "payable": true
        },

        ...

    ],
    "networks": {
        "4747": {
            "address": "0xba607E0A4eED20239C4f2237688e660da8262e3E"
        }
    }

More information

Please find more info at https://www.danielefavi.com/blog/ethereum-smart-contracts-gui-generator/


The GUI explained

About

Generate automatically a customizable interface from ABI to interact with Ethereum smart contracts.

Resources

License

Stars

Watchers

Forks

Packages