How To Develop a dApp on vechain (II): Setup & Walk Around
Sync: Desktop vechain DApp environment.
Great! I see you have survived the last tutorial, now it is time to start programming. The first thing we need is a Sync environment.
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 [[email protected]](mailto:[email protected]):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
Okay, now let us put aside the terminal and focus more on the GUI window. Sync is a browser-like wallet that embedded with Connex.js library which can offer the web page running inside it the ability to communicate with VechainThor blockchain.
First, Let us set up a testing wallet for ourselves:
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
Follow the instructions on Sync now I have a wallet with a public address, it currently contains 0 VET and 0 VTHO：
0xa7a609b928c4eac077d0e5640f3fa650746c4fcf
Next, we fill up the newly created wallet by adding some VTHO funds to it. VTHO is used as the fee fuelling the transactions and on test net. Where to get it? The vechain core team’s dApp demo: VET/VTHO faucet!
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. 😉
Now that we have money on test net, let's move on to explore the blockchain functionalities provided by Sync, the connex.js library. Let us open up a new blank tab, then toggle the developer tools to see what is connex used for:
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:
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.
In vechain network, we don’t know exactly when a new block is produced, but we surely want to be notified when it is produced. ticker gives us this peek hole to get notified. We still use the debug console in Sync:
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!
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!
Enough for today’s study!
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!
