# 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
- Connex
- Sync2 (opens new window)
- VeChain Docs (opens new window)
- VeChain Explorer (opens new window) / Insight explorer (opens new window)
- Development Resources / miscellaneous
# Know
# Before play around
Create testnet wallet
- Download Sync2 here (opens new window)
- Launch Sync2
- Sync2 - setup
- Sync2 - create testnet wallet
Claim testnet token
- Visit Testnet faucet (opens new window)- sign certificate
# 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 contractnot 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
andgasPayer
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
ortransfer.criteria
. The items in the criteria array will be combined byOR
operator to filter the events:
example:
[{"ConA": "A"}, {"ConB": "B", "ConC": "C"}] is 'ConA=AOR
(ConB=BAND
ConC=C)' - filterRange: Filtering a specific time frame transfer or event logs by setting
block number
ortimestamp
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
anddata
. - 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:
- Need to know the Base gas price from params contract
- 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.