436 reads

Building A Tezos's Smart Contract Dashboard Using ReactJS, TezBridge and Netlify [A How-To Guide]

by Zhi ZhanJune 17th, 2020

Too Long; Didn't Read

TezosKT is the name that I have given to my product. There are a total of 4 dimensions that I'm concern about my product: security and ease of use. My product achieve the best of both worlds in terms of security. It also supports my needs which are being able to easily and securely deploy and interact with Tezos's Smart Contract. The information below are screenshots and explanation to my solution. These are the technology that I used to develop my product. It will be a minimum viable product (MVP)

Company Mentioned

Coin Mentioned

featured image - Building A Tezos's Smart Contract Dashboard Using ReactJS, TezBridge and Netlify [A How-To Guide]

I always find it troublesome for me to deploy and interact with Tezos’s Smart Contract at my job as a Software Engineer in my company. So, I decided to build a tool (web app) to solve my problem.

Ideation

The idea to solve my problem is to build a web app so that I can access it anywhere easily and allow me to securely deploy and interact with my Tezos‘s Smart Contract.

As I don't want to spend too much time, effort or $$ building a full fledged solution, I decided to just build the features that I need. Therefore, my solution will be a minimum viable product (MVP).

Market Research

Before I even start building my solution, I decided to perform some market research to find out if there are any existing solutions to my problem. It turns out, there are a few solutions available. There are

SmartPy Contract Explorer - A web app that only allows me to interact with Tezos' Smart Contract

Tezsure-GUI - A desktop app that allows me to deploy and interact with Tezos's Smart Contract

Feature Table

A feature table is a comparison table that I use to compare my product to my competitor's product on a list of dimensions that I care about. (Based on total points' count of 10 with 10 being the best and 1 being the worst).

TezosKT is the name that I have given to my product. There are a total of 4 dimensions that I'm concern about my product.

Security

I gave my product a score of 8 as my Tezos's account is handled by TezBridge, a Tezos's DApp wallet. The score is lower than Tezsure-GUI as I think that my Tezos's account locally on my PC is more secure as compared to storing it on my browser.

As of SmartPy Contract Explorer, it requires me to paste my Tezoz's account private key into their explorer, which is totally not secure. It also does not support interaction with a mainnet Smart Contract.

Ease Of Use

I gave my product a score of 7, which is slightly lower than SmartPy Contract Explorer as my product will not be providing auto generating of Smart Contract operation code.

This feature will require more time and effort for me to build. I feel that is not worth it for me to do that as I can rely on Better Call Dev, a Tezos's Smart Contract Explorer to generate it for me.

As for Tezsure-GUI, I am required to install and build the desktop application locally myself which I think is troublesome.

Contract Origination and Operation

Both TezosKT and Tezsure-GUI supports these two types of transaction. SmartPy Smart Contract Explorer doesn't support deployment of external Smart Contract Code.

Findings and Conclusion

So based on the analysis above, I think that my product achieve the best of both worlds in terms of security and ease of use. It also supports my needs which are being able to easily and securely deploy and interact with Tezos's Smart Contract.

Development

These are the key features for my MVP.

Origination of Tezos's Smart Contract
Interaction with Tezos's Smart Contract
Perform Smart Contract Operation on both mainnet and testnet
TezBridge DApp wallet integration

There will be a landing page that explains what my product does to my users as well.

These are the technology that I used to develop my product.

ReactJS (Website)
TezBridge (Tezos's DApp Wallet)
Netlify (Web Hosting)

Results

The information below are screenshots and explanation to my solution.

(1) Landing Page

(2) Dashboard (Select Host)

This feature allows me to select the Tezos's network host that I would like to use.

(3) Dashboard (Origination)

The feature allows me to originate (deploy) my Smart Contract. I am able to set the amount of tez (Tezos coin), Micheline Code and storage's Micheline code of my Smart Contract

(4) Dashboard (Transaction)

The feature allows me to make a transaction to (interact with) my Smart Contract. I am able to set the amount of tez (Tezos coin), Smart Contract address and Micheline parameters of my transaction.

(5) TezBridge