Introducing a .Net Core and React Libra Client

Diego Bascans
1950Labs | Crafting excellence
7 min readDec 9, 2019

--

Libra is the new crypto-currency (still in develop phase) created by Facebook and supported by multiple huge companies like Uber and Spotify. Some companies just left the Libra Association until the financial regulation are more clarified (Visa, Stripe), but still is the most promising technology in BlockChain.

This new crypto-currency promises to be stable, cheap and fast in comparison with others like Bitcoin and Ethereum. And probably will have easily integrated with platforms like WhatsApp, Instagram and of course Facebook.

Photo by Stanislaw Zarychta on Unsplash

Ok, but what are we introducing?

Here we are introducing a new Libra Client, developed by 1950Labs, in order to show some practical usages of the Libra Crypto-currency.

Here is the Git repository if anyone wants to check it out -stars are gratefully accepted :) : https://github.com/1950Labs/1950Libra_client

Which technologies are involved in this client?

We use a couple of new technologies in order to implement this client.

Server Application

Net Core was the chosen one, since this has the ability to develop and run on Windows, macOS and Linux. We have created the connection with the Libra Blockchain (that uses gRPC services) using the .proto files provided by the Libra Repository and a Web API that connects with the Web UI Application. Also is pretty simple to integrate it with Firebase

Authentication and Security

Firebase was elected in order to handle the authentication and security, just creating an application in the Firebase google platform and configuring it in our web and server application.

Web UI Application

React is used for the Web UI Application since we don’t need something very complex, just some service calls and React is known because doesn’t require lots of time to learn the basics, easy to connect it with Firebase and very practical in order to re-use components.

1950Labs Libra Client

General aspects

Since the Libra Blockchain is still in a testing phase, out client will connect to the Testnet that is a live demonstration of the Libra Blockchain software, also known as Libra Core.

The Testnet handle the Libra Currency with no real value

In order to inform that to the users the label Testnet is placed in a lot of spots in the application.

From here we will show the different pages and functionalities of the 1950Labs Libra Client, giving a short description of every page or functionality.

Sign in, sign up and change password page

The public part of the client is conformed by three different pages, in order to sign in, sign up and change the password.

As we mentioned, the application is using Firebase Authentication and Authorization to handle the security.

Also the Testnet label is placed, in order to inform the user that the client is connected to test network.

Home page

The home page just have some information regarding the client.

  • A link to the official 1950Labs page
  • A contact e-mail
  • The last update of the application
  • A link to the source code
  • A list with main functionalities.

As an improvement is planned to add some design to this page, since that has a noticeable lack of it.

Accounts page

This page has a couple of functionalities that we will be explaining next.

You can see you can add new accounts (Libra Accounts) that will be saved in the application and also (of course) into the Libra Core.

Also you have a list with all of the accounts related to the user logged in, and some actions that we will be explaining later.

Adding an account

Clicking in the “Add account” button will show a pop-up to add a new account.

The Owner is used to create the Address (adding some other stuff in order to not repeat it) of our new account.

The new account has been created, refreshing the list, and showing the correspondent message.

If you try to add an account with the same name of any of the accounts of the application it will show an error.

Account List Actions

The actions of the account list are:

  • More info
  • Mint
  • Last 10 transactions

More info

The more info action, shows more information of an account, this action retrieve information from the Libra Core and show it in a pop-up

  • AccountId: The identification of the account in the application.
  • Owner: The name assigned by the user at the moment of the creation.
  • Address: The Authentication Key of the account this is stored in the application and also the Libra Core
  • Balance: The amount of Libra Currency of the account
  • Sequence number: The sequence number of the account. This number indicates the number of transactions sent from this account.
  • Sent events: The event number that the account has been sent.
  • Received events: The event number that the account has been received.

Mint

The Mint function allows to add Libra Currency to our accounts using the Faucet Service (https://developers.libra.org/docs/reference/glossary#faucet). This service is created just for a testing purpose.

If we now check the balance of the Account 1 it should be incremented by 100, comparing it with the More Info image.

Last 10 transactions

This action show us the last ten transaction of the account selected, with transaction number, the amount sent and the receiver account.

Create Transaction page

In this page we can perform a transaction in the Libra Blockchain (Testnet). In this case we use one of the Smart Contracts generated by Libra that is called peer_to_peer_transfer.mvir (There are others, and they are adding more in every release).

Basically this Smart Contract allow us to send Libra Currency from one of your accounts to other account.

The process in simple, first you pick one of your own accounts.

Then, you have to write a credit account or pick on of your accounts (you can’t pick the same account)

Set an amount higher than zero, and click the Submit Transaction button.

If everything is fine, you should see a transaction result page, with some information about the transaction.

The data shown in this page:

  • Amount: The transaction amount.
  • Source account: The account where the amount was debited
  • Recipient account: The account where the amount was credited
  • Version ID: Is the transaction identificator
  • Sequence number: The sequence number of the account. This number indicates the number of transactions sent from this account.
  • Max gas amount: The maximum amount that the source account is able to pay for the transaction
  • Gas unit price: The amount the source account is willing to pay for the unit of gas.
  • Expiration date: The expiration date of the transaction.
  • Transaction Type: The type of the transaction that was performed (For the moment is just Peer to peer TX)

There are some times that a transaction can fail, in those cases we show a result page with an error message.

Final comments

So we introduce our Libra Client, but there are some comments that are important to have present.

  • The Libra Testnet is in Beta Phase. Is changing all the time and generally introduce breaking changes.
  • In the close future the plan is to implement the call to another Smart Contract, probably the create_account.mvir.
  • There is not a way to create and deploy custom Smart Contracts into the Libra Testnet yet! Nevertheless you can create and deploy it if you start a validation node by yourself.
  • This is a simple client, don’t be rude with it; the idea is to experiment the Libra Blockchain functionality
  • If you have any idea or you want to improve the our client just create a pull request and we will review it.
  • All the suggestions are welcome!

PUBLIC REPOSITORY: https://github.com/1950Labs/1950Libra_client

Our concept design for the Libra Project

At 1950labs we believe in distributed teams for building high-quality software. If you are looking for an alternative to contractors or traditional US vendors, write us to hello@1950Labs.com to start talking. — We work on your time zone.

--

--