This content is password protected. To view it please enter your password below:

This content is password protected. To view it please enter your password below:

Cryptonomic NYC Hackathon part 2

The idea

It was the first time I’d ever taken part in a hackathon. I hadn’t been to any of these events before because I was very skeptical about them. I thought: how can we make anything useful in only two days? Well, it turns out that small, but handy tools can be created, even without sacrificing code quality. The key is to choose the right project; not too big or too complicated so you can complete it within a weekend. In our case, it was a Micheline Michelson translator that I’m going to tell you more about in this article.

The hackathon

Our hackathon took place on the first weekend of August (03-04.08). Cryptonomic is a startup which provides tools and smart contracts for decentralized and consortium applications. We had to use the Cryptonomic technology stack, tools such as ConceilJS (https://github.com/Cryptonomic/ConseilJS) during the hackathon. We decided to create a Google-like translator between Michelson and Micheline; two formats of source files used in Tezos software development. 

What are Tezos and Michelson?

According to the Tezos website:

“Tezos is a new decentralized blockchain that governs itself by establishing a true digital commonwealth.”

“Tezos addresses key barriers facing blockchain adoption to date: smart contract safety, long-term upgradability, and open participation”

Michelson is a domain-specific language that we use to write smart contracts on the Tezos blockchain. Unlike Solidity or Viper which must be compiled to EVM (Ethereum Virtual Machine) byte code to be executed on EVM, Michelson code itself gets to run in the Tezos VM.

Micheline vs. Michelson

First of all, Michelson is the specification and Micheline is the concrete language syntax of Michelson encoded in JSON. Before deployment to Tezos VM, Michelson is transformed into Micheline. 

For example, here is the same program in Michelson and Micheline representation:

Micheline

parameter int;
storage int;
code {CAR;                      # Get the parameter
      PUSH int 1;               # We're adding 1, so we need to put 1 on the stack
      ADD;                      # Add the two numbers
      NIL operation;            # We put an empty list of operations on the stack
      PAIR}

Michelson

[
    {
      "prim": "parameter",
      "args": [
        {
          "prim": "int"
        }
      ]
    },
    {
      "prim": "storage",
      "args": [
        {
          "prim": "int"
        }
      ]
    },
    {
      "prim": "code",
      "args": [
        [
          {
            "prim": "CAR"
          },
          {
            "prim": "PUSH",
            "args": [
              {
                "prim": "int"
              },
              {
                "int": "1"
              }
            ]
          },
          {
            "prim": "ADD"
          },
          {
            "prim": "NIL",
            "args": [
              {
                "prim": "operation"
              }
            ]
          },
          {
            "prim": "PAIR"
          }
        ]
      ]
    }
]

As you can see, there is a clear correspondence between Michelson and Micheline representation. Despite this, many people still find it challenging to understand the difference between Michelson and Micheline. That’s why our team decided to create this translator. Above all, we hope it is going to help other developers to learn smart contracts development in Tezos.

The Technology stack

To create our Micheline Michelson translator, we agreed to use Scala and Akka http for the backend side. At the frontend side, we used React, Redux, and Typescript.

The Coding

A conversion between the two formats is already a part of Cryptonomic tools. So, we needed to extract it from the base source code. After that, we decided to create a separate module for conversion which, we could then import into other projects, so as not to duplicate code.

A Micheline to Michelson translation has already been implemented in Scala using Circe, so it was quite easy to integrate it into our Scala-based project. However, the Michelson to Micheline conversion code is JavaScript. We tried to come up with our own Scala parser for Michelson. Unfortunately, it was too time-consuming, and we finally decided to use a parser from ConceilJS. We also chose Node.js for running the JavaScript code.

Michelin Michelson Translator

The Solution

In short, our solution consists of one frontend and two backend modules. 

Frontend module:

https://github.com/ScalaConsultants/Tezos-Micheline-Michelson-Translator-Frontend

Translation module:

https://github.com/ScalaConsultants/Tezos-FullStack-Console-Translation-Module

Console backend:

https://github.com/ScalaConsultants/Tezos-FullStack-Console

(There’s more detailed information about the modules in the Readme files, so there’s no point in duplicating the text)

Also, our team selected Heroku as the deployment platform.

Final application

You can try out our solution here: http://smart-contracts-micheline-michelson-translator-for-tezos.scalac.io/

On the left side, you paste the Micheline code and click translate to see the result. That simple!

The experience

In conclusion, it turns out that over only two days, it’s possible to create a small yet beneficial application. It was also an excellent opportunity to learn about some Tezos development tools. 

The Micheline Michelson translator was one of two projects that by Scalac. Check out the Frontend data visualization app that the other team made. 

Cryptonomic NYC Hackathon part 1

The Idea

We live in an era of cryptocurrencies, and there’s no escaping it. It’s already happening, and if there’s one thing that represents well what’s going to happen next, it’s blockchain. That’s why during the Cryptonomic NYC Hackathon we decided to try and visualize tezos transactions by creating a frontend data visualization app. What is tezos, you ask? As I’ve mentioned before, it’s definitely part of our future. Here’s why. Tezos is a decentralized platform based on blockchain technology with its cryptocurrency (XTZ). It launched in June 2018 and uses the Proof of Stake algorithm. Too much information? Yeah, the cryptocurrencies topic may seem a little bit complicated at first and needs some time to get into but don’t worry, let’s go over it together. 

Frontend data visualization app – Time of day chart
Frontend data visualisation

What exactly did we build?

tAs I’ve already mentioned, we’ve built a frontend data visualization app. We wanted to visualize tezos transactions on the frontend/client-side. We’ve split the application into several sections such as Home, Transactions, Charts, and Live Chart. The Home section presents general information about our project, such as the tech stack, project description, etc. We used the Charts section to display the tezos transactions in charts. Users can choose the date that they want to see from the charts as well as the type of data (Transactions, Currency, Buyers, Sellers). There is also a second chart which presents the time of day when the transaction was committed, such as morning, afternoon, evening, night. The transactions section shows a list of the last 100 operations, including all connected data such as Source, Destination, and Timestamp. The previous section is the Live Chart which displays transactions and updates them every 10 seconds. We’ve built the chart in the form of colorful circles, with size depending on the number of transactions completed by each of the tezos.

Frontend data visualization app – List of transactions
Frontend data visualisation
Frontend data visualization app – Transactions charts

Frontend data visualisation

The Project

The tech stack we chose was React with Hooks, Redux-Saga, TypeScript, and React Chart.js for data visualization. We picked this stack because our teammates were familiar with the React library. For the communication between our frontend application and the server, we used ConseilJS RESTFUL API. Storing 100000 transactions on the frontend side was quite challenging, but we finally decided to store the data in LocalStorage and redux state. We wanted to focus on the UX/UI side to make sure our application is eye-catching and user-friendly, so no-one would have to run away, screaming, “my eyes are bleeding!”.

You can check out our project here: http://tezos-data-analytics-dashboard.scalac.io/

Live charts
Fronted Data visualization Live Charts

The Hackathon

Happy Hack Fest ! And may the odds be ever in your favor. 

We started at 9 AM on both Sunday and Saturday in our office. On day one, we split our work into roles. Damian was responsible for the Live Chart visualization, managing the redux state and request optimization, I was responsible for the Charts data visualization and Mariusz our leader was responsible for making the base of the application, transactions, server communication and making sure everything worked properly. We also joined the Cryptonomic channel via riot application so we could chat with other participants. 

The Experience

The hackathon was an enjoyable experience, one that I would recommend to everyone. It was a real pleasure to meet and work with such talented people. Sure, there was pressure and moments that we thought we wouldn’t make it, but we never gave up! Things I’ve learned from this experience are the experience itself, but also some new development knowledge as well as some blockchain stuff that might be very important and useful in the future. Thanks Cryptonomic for a great adventure!


During the hackathon, Scalac had two teams to develop their solutions. See how we made a Micheline Michelson translator.