VeChain Docs

# Useful tips for building a dApp by using Connex2

This article is helping you to understand how to use connex2 to build a Dapp and also how it interacts between the user,application, and Sync2.

connex is the standard interface between VeChainThor and the user.

# Something you might ....

# Need

# Know

# Before play around

  1. Create testnet wallet

    1. Download Sync2 here (opens new window)
    2. Launch Sync2
    3. Sync2 - setup
    4. Sync2 - create testnet wallet

  2. Claim testnet token

# Learn & play

# connex.thor.ticker

The ticker is a concept that describes chain increment. when there is a new block added to the chain, the ticker will be triggered. This API will create a ticker that has a function that creates a Promise that will resolve when a new block is truly added, please be advised that it never rejects.


See the Pen Connex env- Get Status by shaohuaiW (@xjwx89) on CodePen.

📖 Tips

  • progress: A number [0-1] indicates the syncing progress of the currently connected node

ref: connex API - create a ticker

# connex.thor.account

Account visitor is a bunch of APIs to get account details and interact with account methods.


See the Pen connex.thor.account - balance by shaohuaiW (@xjwx89) on CodePen.

📖 Tips

  • balance: hex form of VET balance in unit wei
  • energy: hex form of VTHO balance in unit wei
  • hasCode: when it equal to true, it means that its a smart contract

ref: connex API - account visitor

# connex.thor.transaction

Transaction visitor is a bunch of APIs to get transaction details.


See the Pen connex.thor.transaction by shaohuaiW (@xjwx89) on CodePen.

📖 Tips

Transaction receipt

  • reverted: Several reasons can cause the transaction to revert. It means that the transaction data is passed through to a virtual machine(aka. VM) but not able to process. The most common reasons are insufficient balance and smart contract not able to execute data.

  • gasPayer: the address which paid the transaction fee. It is an important factor to determine the transaction is whether using fee delegation or not. If the transaction is paid by another address, the txOrigin and gasPayer will be different..

  • txOrigin: the address which signed the transaction

ref: connex API - transaction visitor

# connex.thor.filter

It allows you to filter transfer and event logs on the blockchain. The filter usually works with Connex.thor.account, either creates a filter from an event or packs criteria and then assembles several criteria and sets them to a filter.

📖 Tips

  • criteria: is a set of an array which contain a event.criteria or transfer.criteria. The items in the criteria array will be combined by OR operator to filter the events:
    example:
    [{"ConA": "A"}, {"ConB": "B", "ConC": "C"}] is 'ConA=A OR (ConB=B AND ConC=C)'
  • filterRange: Filtering a specific time frame transfer or event logs by setting block number or timestamp in second to the filter

# • transfer

Filter VET transfer by setting the criteria to txOrigin,sender, and recipient.In addition, set the filterRange of filter to determine the transfer flog in the specific period


See the Pen connex.thor.filter - transfer by shaohuaiW (@xjwx89) on CodePen.


# • event

Filter event by setting criteria base on the contract methods(Contract ABI).

See the Pen connex.thor.filter - event by shaohuaiW (@xjwx89) on CodePen.

ref:connex API - filter (opens new window)

# connex.vendor

In some cases, the application may not need the ability to access the entire blockchain. You can just create connex.vendor module instead of connex.thor module.connex.vendor is a way that allows dapps to interact with a user such as signing a certificate or transaction.

# Certificate: connex.vendor.sign

The certificate is a message signing-based mechanism that can easily request the user's identification(address) or user to agree to the agreements.


See the Pen VeChain sync - request certificate by shaohuaiW (@xjwx89) on CodePen.

ref: connex API - certificate signing service

# Transaction: connex.vendor.sign

Signing a transaction is the most common interaction between dApp and user.A transaction may contains one more multiple clauses(operation) that requesting the user to confirm(sign) the transaction.


See the Pen OJprbQX by shaohuaiW (@xjwx89) on CodePen.

📖 Tips

  • Transaction can contains multiple clauses and each clause contains three majors content: to ,value and data.
  • Provide a brief comment to the transaction or a clause to help the user to understand
  • Provide a link to reveal transaction-related information, the link will be used for connex to assemble a callback url by replacing the placeholder {txid} by Transaction ID

ref: connex API - transaction signing service

# Demos

# 1. Buy an item with user login


See the Pen Purchase item with login by shaohuaiW (@xjwx89) on CodePen.

# 2. Token transfer


See the Pen TokenList by shaohuaiW (@xjwx89) on CodePen.

# 3. Buy me a coffee


See the Pen localStorage by shaohuaiW (@xjwx89) on CodePen.

# 4. Address avatar

Address avatar is generated by Picasso (opens new window) a general purpose deterministic identity icon library in svg format


See the Pen picasso by shaohuaiW (@xjwx89) on CodePen.

# 5. Sign tx and check receipt


See the Pen Demo - sign tx and check by shaohuaiW (@xjwx89) on CodePen.

# 6. Estimate the transaction fee

GasPriceCoef can be adjust by the user, thus, the result of the transaction fee is the minimum cost of the transaction.


See the Pen Demo - estimate transaction fee by shaohuaiW (@xjwx89) on CodePen.


Prerequisites:

  1. Need to know the Base gas price from params contract
  2. According to transaction calculation
    • we need to calculate the intrinsic gas
    • we need to know the vm gasUsed (aka. virtual machine execution cost)

# Step 1: Get base gas price


See the Pen Demo- get baseGasPrice by shaohuaiW (@xjwx89) on CodePen.


# Step 2: Get intrinsic gas


See the Pen Demo - get intrinsic gas by shaohuaiW (@xjwx89) on CodePen.


# Step 3: Get vm gas used


See the Pen Demo- get vm gas by shaohuaiW (@xjwx89) on CodePen.


# 7. Enforce signer


See the Pen Demo - enforce signer by shaohuaiW (@xjwx89) on CodePen.