Hackernoon logoNew web tool for interacting with Ethereum smart contracts by@olekon86

New web tool for interacting with Ethereum smart contracts

JustSmartContracts is a front-end development tool for smart contracts developers. It uses Metamask to sign transactions and test contracts on the Ropsten testnet. It is still in its early stage of development so some minor bugs could possibly occur. The tool uses the browser to store contracts' address and Ether balance. Users can easily search contract's events and search contract events using the browser. You can download any transaction to sign it and sign it using whatever you want. The contract's data is split into four categories: Properties, view functions, calls and operations.
Oleg Hacker Noon profile picture


Software developer, Ethereum and beyond

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
-repeat. However, the interaction with already deployed contract and the deployment procedure itself always seemed a kind of annoying (especially if you need to sign transactions on a secure cold machine). I felt lack of user-oriented services and didn't quite like those already existing.

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.


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.


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.


Join Hacker Noon

Create your free account to unlock your custom reading experience.