How To Develop a DApp on VeChain (II): Setup & Walk Around

Sync: Desktop VeChain DApp environment.

Setup in 3 minutes

Okay now let’s clone the Sync project source code in a terminal and spin it up in dev mode:

> mkdir playgrounds> cd playgrounds/> git clone git@github.com:vechain/thor-sync.electron.git> cd thor-sync.electron/> node -v # Make sure you have node.js >V10.0.0 installed> npm install # Install dependencies> npm run dev # Boot the Sync in dev mode

When you see the Sync electron window popping up, we are all set!

Boot up: npm run dev

Poke around: Familiar with Sync

Create a Testing Wallet

Go to wallet panel to view existing wallets.

Great, now click on the upper-right “wallets” icon, if you are on test net, there are already 3 wallets available for testing: “Foo”, “Baz” and “Bar”. Leave them alone, let us click the “Create” button to create a fresh one.

Create a new wallet for our testing

You can also import your existing wallet of Ethereum into Sync, as well as using a third party generator to create a wallet, like VeChain Address Generator on github.

Follow the instructions on Sync now I have a wallet with a public address, it currently contains 0 VET and 0 VTHO:

0xa7a609b928c4eac077d0e5640f3fa650746c4fcf

Fuel the wallet with VTHO

Go on, visit the web URL: https://faucet.vecha.in in Sync, and you will see an interesting web page that gives out VTHO on test net for free:

Get free VET/VTHO on test net

Follow the “Claim Tokens” button in the middle of the web page and let’s get some free VET/VTHO for testing. Do remember to choose the wallet you created, and input the password accordingly to claim the tokens. I have already claimed 500 VET with 500 VTHO. 😉

Play with Connex.js APIs

Open Developer Tools to visit Connex.

Once on the console of the developer tools (Just like Chrome developer tools), type in following code:

> connex {version: "1.2.0", thor: {…}, vendor: {…}}
thor:{ticker: ƒ, account: ƒ, block: ƒ, …}
vendor:{sign: ƒ, owned: ƒ}
version:"1.2.0"
__proto__:Object

Yep, each and every window has already implanted the connex object in the web page. And this connex object can do a lot of things with VeChain network, Let us explore some simple ones:

Play with account()

> var acc = connex.thor.account('0xa7a609b928c4eac077d0e5640f3fa650746c4fcf')> acc.get().then(info=>{console.log(info)})Promise {<pending>}
{balance: "0x1b1ae4d6e2ef500000", energy: "0x1b1af7398584067000", hasCode: false}
> parseInt('0x1b1ae4d6e2ef500000') 500000000000000000000> parseInt('0x1b1af7398584067000')500005175000000000000

Here I just queried my newly created wallet, which results in a response object of “balance”, “energy” and “hasCode” fields. “balance” is the VET this account holds, and “energy” is the VTHO amount.

Play with ticker()

> var t = connex.thor.ticker()
undefined
> t.next().then(()=>{console.log('new block!')})
new block!

Cool right? After around 3–10 seconds this “new block!” message is printed and we know there is a new block added to the top of the chain.

ticker is a Promise that is never rejected, so we only need to supply a resolve function. We no longer need setTimeout function!

Play with call()

0x0000000000000000000000000000456e65726779

For those who don’t understand ERC20/VIP180, a contract is a long living object on the blockchain. Thinking of it as a set of program instructions and a simple free-form permanent storage that the program controls it. ERC20/VIP180 contracts are simple “virtual bank” program which keeps track on each client and his balance of a specific virtual coin/token.

So, we have the address of a contract, how do we call it? Very simple.

> const balanceOfABI = {
'constant': true,
'inputs': [
{
'name': '_owner',
'type': 'address'
}
],
'name': 'balanceOf',
'outputs': [
{
'name': 'balance',
'type': 'uint256'
}
],
'payable': false,
'stateMutability': 'view',
'type': 'function'
}
> const balanceOfMethod = connex.thor.account('0x0000000000000000000000000000456e65726779').method(balanceOfABI)> const balanceInfo = await balanceOfMethod.call('0xa7a609b928c4eac077d0e5640f3fa650746c4fcf')> console.log(balanceInfo)
{data: "0x00000000000000000000000000000000000000000000001b1b428acf29437000", events: Array(0), transfers: Array(0), gasUsed: 870, reverted: false, …}

We first supply the contract method ABI (function signature) and then create a handler with the contract deploy address. Finally, we call the contract method with call() and supply it with a parameter, an address of the account we are interested. Great! Now we have the result!

Summary

To recap, we have:

  1. Walked you through the installation of Sync.
  2. Run an example DApp in Sync and get some free VET/VTHO.
  3. Play with VeChain blockchain with the pre-implanted connex javascript object.

Starting from the next tutorial, we will use our knowledge learned today and build a web page (front-end) of an existing smart contract, VTHO contract (Yes, some good guy has done it for us, we simply borrow it). Be ready and let’s go!

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

--

--

Passion in computer science.

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