Simple user interface for Elrond Smart Contract
This part of the series on learning Elrond 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 Elrond'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 Elrond 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.
Overall the app is a React app scaffolded using a couple of excellent tools from the Elrond dev team. Using React will be the fastest way to put together a dapp using Elrond 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.
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.