Simple user interface for MultiversX Smart Contract

This part of the series on learning MultiversX blockchain is about their tooling on the front-end side of every dapp. It is more familiar to me than writing Smart Contracts in Rust, which of course, was enjoyable, and I learned a lot.

I thought it would be good to write the article about the front-end part of the interaction with the Smart Contract, which I built previously. I also created my own React App template that uses MultiversX's excellent tools. Let's see how it all works.

First of all, you can check the real dapp here: elven-piggy-bank.netlify.app. It is a simple dapp that interacts with PiggyBank Smart Contract. You can unlock the app using one of the authentication methods there. The simplest will be the MultiversX web wallet or browser extension. Then you can use the devnet faucet to get some of the xEGLD tokens and start playing with the PiggyBank. You will find the faucet in the devnet web wallet. If you want to dig through the code, it is published here: elrond-simple-sc-frontend-app.

Also, check out quick walkthrough videos where I used web wallet and also the extension.

Ok, so let's take a look at how it is put together.

Update This app was built with the older and the only available - back then - library for Create React App. New ones are more decoupled and better suited for usage in different frameworks based on React. Please check them out: sdk-dapp.

Overall the app is a React app scaffolded using a couple of excellent tools from the MultiversX dev team. Using React will be the fastest way to put together a dapp using MultiversX tooling, so it will be good if you have some knowledge about it. It is the most popular front-end framework, so the decision was probably obvious. I'm sure that there will be more tools very soon.

Let's start from the dapp library. It is a set of React helpers responsible for providing predefined UI components, state management, and other more minor helpers. The primary purpose is to provide tools that allow us to implement a couple of authentication flows. Also, we are getting one unified abstraction to make transaction calls without worrying about which type of authentication we took. This and UI components for routing are the core of the library. You can check some examples of usage in the README.md.

Next one will be dapp-utils. It is a set of additional tools like denomination helper. The process is quite problematic because it operates on big numbers, so such a helper is a must-have. From what I saw, the library is getting more and more tools, so I think this will be a handy helper library in the future.

The last one included in my dapp is the whole MultiversX JavaScript SDK. Of course, I use only a tiny part of it, but it is required, for example, to prepare transactions. You can see it in action here.

So, to sum up, the PiggyBank dapp example is built using all mentioned above excellent tools. It is a lot easier if you use them when you want to scaffold something very quickly. It is even more convenient to use the dapp-template, or if you wish, you can also try my custom Create React App template then it is as simple as to initiate CRA project by yarn create react-app my-app --template elrond-dapp.

Also, check out the newest official article and video on the topic. Perfect intro for beginners: Build a dApp in 15 minutes.

Play with it, check the code and videos. Check out all the tools, and let me know what you think. Have you built something on the MultiversX network already? You'll find me here and here.