Connect with Browser
Interacting with Blockchain-data is a big unknown at first but if you think about Blockchain-Nodes as your Backend-API, you'll feel how the complexity of decentralization is slowly fading.
On one end logic layers are published on the Blockchain with contracts. On the other end the data needs to be read and manipulated. Public nodes provide a public API that can be accessed either per Web.
This example shows how to read some information from a known contract and display that information.
Connect
Connex (opens in a new tab) is the standard interface to connect dApps with VeChain blockchain and users.
import Connex from "@vechain/connex";
const connex = new Connex({
node: "https://mainnet.veblocks.net",
network: "main"
});
For the TestNet use { node: "https://testnet.veblocks.net", network: "test" }
Interact
Prepare
For an interaction we need to know:
- The address of the contract we want to talk to (like an API or Hostname)
- The ABI documentation of the function we want to call
For this example the current supply of VTHO will be read, the address for that contract is:
0x0000000000000000000000000000456E65726779
I did look it up in the official docs:
https://docs.vechain.org/others/miscellaneous.html#energy-sol (opens in a new tab)
The ABI definition is available in the official docs as well: https://raw.githubusercontent.com/vechain/b32/master/ABIs/energy.json (opens in a new tab)
For this example only the single function totalSupply()
is relevant, it is extracted from the list of all functions defined in the ABI:
const abiTotalSupply = abi.find(({ name }) => name === "totalSupply");
Execute
const result = await connex.thor
.account(CONTRACT_ADDRESS)
.method(abiTotalSupply)
.call();
result
contains a lot of noise. The expected information is found in result.decoded
:
{ 0: "52418836757574038600000000000" }
Repeating this on each new block will return the current VTHO supply on the whole network.
Arguments
The same functionality can be used with parameters. To get the balance of a single address:
const abiBalanceOf = abi.find(({ name }) => name === "totalSupply");
const { decoded } = await connex.thor
.account(CONTRACT_ADDRESS)
.method(abiBalanceOf)
.call("0x04Ad3f13050cc766169433062BcDbB367B616986");
console.log('VTHO Balance:', decoded[0])
call()
will verify against the ABI and an error is thrown if data format or number of arguments don't match. Be sure to handle errors correctly.
Sandbox
You can play around with this in a working example here:
https://codesandbox.io/s/connect-to-vechain-nuvho8?file=/src/App.js (opens in a new tab)
Notes
There is an awesome list of ABI's with VeChain specific contracts:
https://github.com/vechain/b32/tree/master/ABIs (opens in a new tab)
If you happen to know more ABIs or Contract-Addresses, please feel free to share them in the comments.