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

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.

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.

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:

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:

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:

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:

Put Things Together

Time to go back to App.vue to fill up the Javascript section.

  • 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.

Test the App

Now let us view our first triumph on the VeChain DApp journey!

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

One More Thing

If you are interested, this source code also is available at the GitHub below:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store