20000 Lieues Sous les Mers

What does Blockchain mean for front-end developers? [DevBlog]

Let’s talk a little bit about blockchain technology. Yes, yes, I know, I am a front-end engineer, but we may also tell you a little about this hyped technology.

In the Internet you can already find job advertisements — “Front-End Blockchain Developer”. It looks promising. What do you think about this?

I don't know what sense do employers put into this description, but I can tell you for sure that keyword “blockchain” in the project description for the front-end engineers, layout developers and designers means only one thing— display a lot of hashes on the UI.

Of course, the most important things are implemented on back-end side — transaction processing, communication with the blockchain node. Smart contracts logic is implemented on solidity language (in this case I mean Ethereum).

But blockchain and cryptocurrency world is a world of hashes. You identify transaction by hash as well as you identify account or smart contract also by hash. You are trying to find and compare transaction details in network scanners also by hash. So, hashes are everywhere.

Lition — Direct Trading Page

The Lition project has a lot of hashes on UI. User should have a possibility to identify transactions or addresses and be able to do it by hashes. Usually, user copies the hash value, for example, to check transaction additional details in the blockchain network scanner. It means that it’s very important to make the hash string not disruptive when we divide text into parts containing hashes — I mean tabs and spaces of course.

Producer Page

Anyway, it’s better to protect user from awkward copying at all. In our interface, we turned hashes into links leading to the scanner site.

Overview Page
Ropsten Network Scanner (Etherium)

Sometime displaying hashes on UI is not a great idea from UX perspective. For example that’s why we made this information collapsible in Recent Transactions table.

Mobile Layout for Overview Page
Mobile Layout for Overview Page

So, blockchain UI is new subtype of interfaces. And I can share most useful CSS properties for displaying hashes:

  • word-break — property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box. Property is useful with the value break-all for displaying hashes in most cases.
  • overflow-wrap (old notation is word-wrap) — property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. Property can be useful with the value break-word in cases when you display hashes in the middle of some text.
  • text-overflow — property determines how overflowed content that is not displayed is signaled to users. Property is useful with the value ellipsis when you want to hide a tail of hash for example.

Probably, I downplay the importance of the blockchain term on front-end side. If your client’s application should provide possibility to communicate with blockchain network directly, you certainly need to deal with a couple of APIs of the corresponding libraries. It means that this is not only about layout or CSS properties.

In our client application there is such an opportunity to interact with the blocking network directly. It is called Direct Trading or Advanced Trading — functionality for advanced users. With the help of special plug-in for browser — MetaMask, user can get information about open trading positions and perform transactions by passing the API of our server side, i.e. using the MetaMask account.

MetaMask in Brave browser

What does this mean for us? Actually nothing new, you need to learn the new JavaScript library for that. It’s our usual job.

In case with Ethereum, this is Web3.js library. In the rest, everything is within our concept. The functionality of Web3 lives in the corresponding service, interaction with the service occurs through the React.js and Dispatcher with Action Performers. In tests all this is covered by the same principles as the rest system components.

File path /src/services/web3/service.js
File path /src/action_performers/transactions.js
Direct Trading Page in Google Chrome (without MetaMask)

Thanks for your attention and in the next article let’s talk about testing on front-end side.

P.S. If you have any ideas, feedback's or thoughts please feel free to share with me.

2018, Artur Basak, Lition Tech Team

Previous article:

Next article: