Skip to content

Instantly share code, notes, and snippets.

@olekon

olekon/blog.md Secret

Created July 21, 2019 12:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save olekon/d120ef301067d0a6f0f45d6126c301c6 to your computer and use it in GitHub Desktop.
Save olekon/d120ef301067d0a6f0f45d6126c301c6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
blog.md

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 remain 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 vintage 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 ... Deploy tab in the main menu ...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 Constructor parameters with Generate button 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.
Information message with Etherscan link

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. Browser tab in the main menu and Add button It is important to enter the correct network id. For Mainnet it is 1, for Ropsten it is 3, etc Add contract interface 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 function with no parameters. In other words, everything that can be queried without additional user input.
    Properties tab and its contents
  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. Calls tab and its content
  3. Operations. These are functions of contract that require executing the transaction. Let's look at the contract's payable method, for instance. Operatons tab and its content 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. Transaction details 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. Events tab with EtherPaid event expanded

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment