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

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

  • 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

> 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

The Appearance

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

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

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

123.456 * (10 ^ 18) and then send to EVM. And vice versa.

So we need some utilities as a broker to help us with number formatting. Create a new file utils.js and place the following content inside:

Great! All is done, now we put things together and make our app alive!

Put Things Together

Firstly, let’s call the VTHO contract and display our VTHO balance, here is what I did in code:

  • Fix in the VTHO smart contract address.
  • Fix in my account address. (Generated from the previous episode of tutorials)
  • Initialization the VTHO balance query before the component is mounted.

Note: you can always use ticker() instead of setTimeout() to recursively query the balance of your account. 😉

Secondly, we add the function of sending VTHO token transactions to the button, so we can get alert whenever it succeeds or fails.

Great! Now update our template to bind to those data:

Now all the code is finished, make sure you have saved the same:

GitHub repo of all the source code: [GitHub Link]

Test the App

On Sync browser, visit http://localhost:8080, then do the following:

  1. Input a receiver: 0x422D582C08d7965cD5Fefef1572faaA15783f473
  2. Input the amount: 10 VTHO
  3. Clicking the little “Transfer” blue button.

Then wait for it…. the magic time! Sync prompts me to unlock my account to send the transaction:

Of course, I input the password correctly, and you can see the transaction details on test net here:

Finally, our example has finished! Thanks for hard working!

One More Thing

https://github.com/laalaguer/token-transfer-demo

The full VeChain token transfer is more complicated, the GitHub is below:

https://github.com/laalaguer/vechain-token-transfer

All episodes of tutorials:

Like my tutorials? Waiting for you to donate using Sync by clicking below:

Passion in computer science.