New web tool for interacting with Ethereum smart contracts

Here I'd like to introduce a website developed by me and my friend in order to provide a better experience for Ethereum smart contracts developers and blockchain enthusiasts - https://justsmartcontracts.dev/. But first I'm going to explain the reasons lead to creating of this website.

Why did we need it?

For the last two years, I've been closely working on a project based on the Ethereum blockchain. That job includes both developing smart contracts and performing various off-chain interactions.

The process of developing a smart contract itself is pretty straightforward. Write code-

truffle compile

truffle test

Besides, I wanted to try front-end development myself, and Ethereum-oriented website seemed to be a perfect scenario for this.

Initially, we planned to implement this set of features to be simple yet useful:

1. Store ABI+address records in the browser. No mandatory registration or something like this.
2. Quickly switch between networks: Mainnet/Ropsten/etc or your own localhost testnet. Just like good old MyEtherWallet.
3. Group similar contract parts together: view functions that can be called without transaction, common functions that should be called via transaction, events.
4. User-friendly search within contract events.
5. User-friendly deploy interface.

How to use JustSmartContracts

For the demonstration, I'll use special test contract deployed on the Ropsten testnet. Its source code is available here. This contract contains everything we need for tests and demonstrations: public data, view functions, payable functions, transaction functions, several events and constructor with parameters. It has no other real purpose except tests.

Deploy

For now, JustSmartContracts uses only Metamask to sign transactions. Alternatively, you have an option to download any transaction and sign it using whatever you want.

Let's first select Deploy tab ...

...and specify the byte-code and the ABI. You can copy/paste this information from the truffle build file or just drag-n-drop that file onto the page.

After ABI is entered, we can specify constructor parameters

Pressing Generate button reveals the transaction interface. Then you only need to enter the From address. You can do it manually or use the Metamask button that copies an address from your active Metamask account. Sign the transaction and wait until it is confirmed.

Interact with contract

Let's find deployed contract address using any blockchain explorer you like. Then we select the Browser tab and Add contract. Don't forget to keep current network set to Ropsten.

It is important to enter the correct network id. For Mainnet it is 1, for Ropsten it is 3, etc

All the contract's data is split into four categories:

1. Properties. This includes basic information like the contract's address and its Ether balance along with public data variables and view functions with no parameters. In other words, everything that can be queried without additional user input.

2. Calls. This includes view functions with parameters. In other words, functions that can be called without sending a transaction but requiring additional user input.

3. Operations. These are functions of contract that require executing the transaction. Let's look at the contract's payable method, for instance.

Pressing the Generate button opens the same transaction interface we used earlier to deploy the contract. Only this time it is also populated with To address (the contract) and Ether value to send.

Let's Sign and send the transaction and after it is confirmed we'll inspect the contract's events.

4. Events. Obviously, all contract's events fall into this category. Let's find the one that reflects the operation we've just performed - EtherPaid. We can use a filter for an indexed parameter to narrow the search down.

Other features

JustSmartContracts uses the browser's local storage to store your contracts and custom network information. So, if you or your browser clears the storage, your contracts will be lost.

Also, it is worth mentioning that JustSmartContracts is still in its early stage of development so some minor bugs could possibly occur.

Conclusion

We hope https://justsmartcontracts.dev will show itself as a useful and convenient tool for Ethereum and Solidity developers. We also definitely can see room for improvements and new features and try to implement them soon.