How to use Connex2 to build a dApp on VeChain

When it comes to building Decentralized Applications (dApps), things can seem a bit intimidating at first, especially if you are a new developer that is aiming to build on top of the VeChain (VET) blockchain network for the very first time.

However, this does not always need to be the case, as with Connex2, things can be a lot simpler to execute than ever before.

Today, we are going to go over just about everything you need to know when it comes to utilizing Connex2 as a means of building a dApp on top of VeChain, so let’s dive in.

Key Points:

  • Connex is the standard interface between VeChainThor and the end-user.
  • Users can utilize Connex2 as a means of building a dApp on top of the network with ease. 
  • A decentralized application (dApp) is an application backed by a distributed blockchain service and relies partially on blockchain bata whilst still being a web application or a webpage. 
  • You can easily connect to a VeChain (VET) node or a block explorer through the utilization of a blockchain-as-a-service provider such as NOWNodes.
Table of Contents

    What is Connex2?

    Connex is essentially a standard interface through which developers can connect their decentralized applications (dApps) with the VeChain (VET) blockchain and the users and aims to aid developers when it comes to building them.

    It is important to note that Connex2 was published as a JavaScript library as Sync2, which makes dApps and Sync2 more independent from each other.

    Why use it?

    Connex1 is a built-in API within Sync1, and the dApps that are built on Connext1 are independent of Sync1.

    Connex2, on the other hand, is a JavaScript Library, and the dApp needs to manually import Connex2 and create the instance of it.

    In Connex2, the new APIs only work in non-compatible mode, for example:

    const address: string
    const abi: Object
    const kind: ‘event’ | ‘transfer’
    const criteria: Thor.Filter<T extends ‘event’ | ‘transfer’>.Criteria<T>[]
    const clauses: Thor.Clause[]

    thor.account(address).method(abi).gasPayer(address)


    thor.account(address).method(abi).transact(…args) // …args => abi inputs


    thor.account(address).event(abi).cache()


    thor.filter(kind, criteria).cache()


    thor.explain(clauses).cache()


    thor.explain(clauses).gasPayer(address)


    vendor.sign.accepted(callback)

    How to build a dApp on VeChain using Connex2

    If you are interested in building a decentralized application on VeChain through the usage of Connex2, here is everything that you need to know in order to accomplish this goal.

    • Step 1: Install all of the required prerequisites and get testnet VET and VTHO

    You will need to create a testnet wallet. To do so, you can download Sync2, Launch Sync2, set up Sync2, and create a Sync2 testnet wallet. Furthermore, you will also need to claim testnet tokens by visiting the testnet faucet

    Connex1 is a built-in API within Sync1
    • Step 2: Install Connex 2

    Include in <script>tag:

    <!– install the latest v2 –>
    <script src=”https://unpkg.com/@vechain/connex@2″ />

    Then use NPM:

    npm i @vechain/connex
    • Step 3: Begin the programming process

    connex.thor.ticker – the ticker describes the chain increment, and when a new block gets added to the chain, this will be triggered. This is an API that will create a ticker, one that creates a Promise that it will resolve when a new block gets added.

    const connex = new Connex({    

    node: ‘https://testnet.veblocks.net/’, 
       
    network: ‘test’
    })
    const ticker = connex.thor.ticker();

    void (async () => {  

    for (;;) {    

    await ticker.next();    

    document.getElementById(“status”).innerText = JSON.stringify(      

    connex.thor.status,      

    null,      
    4   

     ); document.getElementById(“blockNumber”).innerText = ‘Block# ‘
    +connex.thor.status.head.number  
    }
    })();

    connex.thor.account – this features APIs that will allow you to get account details and interact with account methods.

    const connex = new Connex({   

    node: ‘https://testnet.veblocks.net/’,    

    network: ‘test’

    })

    const ticker = connex.thor.ticker();

    void (async () => {  

    for (;;) {    await ticker.next();     

    document.getElementById(“status”).innerText = ‘Latest block#

    ‘+connex.thor.status.head.number  

    }

    })();

    function checkBalance(){

    const queryAcc=document.getElementById(“address”).value

    const acc = connex.thor.account(queryAcc)

    acc.get().then(accInfo=>{

    document.getElementById(“blockNumber”).innerText = ‘@Block#
    ‘+connex.thor.status.head.number + ‘ testnet’;  

    document.getElementById(“vet”).innerText=BigNumber(accInfo.balance/1e18) +” VET” 

    document.getElementById(“vtho”).innerText=BigNumber(accInfo.energy/1e18) +” VTHO”  document.getElementById(“hasCode”).innerText= “hasCode: ” + accInfo.hasCode 

    })
    }

    Note that these are just some examples of how all of it works, and you will need to play around to truly build the dApp that you are interested in. 

    Conclusion

    Hopefully, now you know how to upgrade to Connex2 and use it to build a decentralized application (dApp) on top of VeChain (VET). Remember that you can easily establish a connection to a VeChain (VET) node or block explorer through the utilization of the blockchain-as-a-service provider NOWNodes, so you can keep track of all blockchain data on the network throughout your development process.