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

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.

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.

Coding

The Appearance

Query the VTHO Balance

Sign Transaction and Send VTHO

Formatting Numbers

Put Things Together

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

Test the App

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

One More Thing

--

--

--

Passion in computer science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why Composition is Harder with Classes

Kickstarting your Node application — RESTful APIs, Authentication, Security

A designer’s guide to the Figma API

Openwhisk Web actions with path parameters

Kickstart Round G 2020 Combination Lock

Week 6 was an introduction to javascript. Here are some of the things I learned…

Building a blog using Strapi, React and Apollo

Objects and its internal representation in JavaScript

Get the Medium app

A Byte Ahead

A Byte Ahead

Passion in computer science.

More from Medium

The Most Powerful Optimized MegaNode Archive Service is now LIVE on Ethereum

Devs Do Something!!! — Daedalyst Dynamic Mint Pricing in Turbulent Markets

Sherbet Integrates Chainlink VRF to Help Power Its PVP Gaming Platform

Lessons learned running an ethereum node