How To Develop a DApp on VeChain (III): Components & Coding

5 min readMar 6, 2019

Congratulations! You have made to the last episode of this tutorial. Here we will put everything we know together and make a useful program: a VTHO token transfer tool. The official Sync only provides the VET transfer functionality, our VTHO tools is a very good supplement to the status quo.

Preparation

Make sure you have the following things ready:

Sync set up and running on your computer.
A testing account, which is already presented in Sync.
Some VET and VTHO in your testing account.
Sync running on test net.

If you don’t know how above requirements are done, check the previous episode: https://medium.com/@laalaguer/how-to-develop-a-dapp-on-vechain-ii-setup-walk-around-109a01bf7ae9

Setup in 3 minutes

Great! Now we start to build the real web page DApp. Let us set up the project and necessities first. We will use Vue.js and BootstrapVue as our foundation.

> mkdir vtho-transfer
> cd vtho-transfer/> npm install -g @vue/cli # Install vue-cli.

> vue create -b -n my-project # Create a clean Vue project.> cd my-project # Now you are in a Vue workspace!> npm install vue bootstrap-vue bootstrap # Install BootstrapVue.> npm install bignumber.js # Math library.> npm run serve # Start development server on background.

We are all set! Now let us view our precious project in Sync. Open a tab and navigate to http://localhost:8080. It should be like this:

Coding

Due to the length of this tutorial, we write one core component and demo the key functions. The rest of the code and a more complicated example can be found at the bottom of this tutorial.

The Appearance

The app must be stylish! Clean up the default main.js and add a BootstrapVue library, quite simple:

Put the component on the radar screen by editing the App.vue:

Great! Now save both the files and refresh the Sync tab, the dummy web page pretty much looks like this now:

Now that we have the skeleton, let’s move on to make the functions to make the app alive. Create a separate empty file alongside the main.js, name it operations.js, then put several functions into it.

Query the VTHO Balance

Okay, let us first create a function queries the VTHO balance from the VTHO contract on test net, actually, it can be used to query any contract that is VIP180 compatible. It should be like this:

Quite self-explanatory, this getTokenBalance function queries the contract about how much token the user holds, when we call it, we feed it with the actual contract address and user’s account address. Notice that we used the call() function of connex.js, which we introduced in the previous episode.

Sign Transaction and Send VTHO

How to sign the transaction and send it to the other person? Simple, we just use the sign-and-send API embedded in the connex.js. Let’s create a function for that, too. Still, in the operation.js, append this code:

The above snippet is mainly abouttransferToken , which is a general purpose transfer action. It takes the contract address, sender address, receiver address, amount of transfer, then asks the connex to sign the transaction and send out!

Now finish the operations.js file with the export section as usual:

Formatting Numbers

In the smart contract, the decimals don’t exist. All numbers are integers. To present the numbers right to the decimal, we power it with 10 times precision. So when we say: 123.456 in human language, it should be presented in: