Introduction

In recent years, blockchain technology has gained immense popularity due to its decentralized and secure nature. One of the most popular blockchain platforms, VeChain, is known for its focus on supply chain management and has gained a significant following in the business world. In this article, we will explore how to interact with VeChain smart contracts using JavaScript, one of the most popular programming languages in the world.

VeChain uses solidity as a programming language for writing smart contracts. So, for example, we have a smart contract with us that lets us store an integer on the blockchain and retrieve it back, let's call it a Storage smart contract.

Here is the complete code for the smart contract 

The Requirements

A. Storage smart contract

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

contract Storage {

      int number;
     
      function store(int _a) public {
            number = _a;
      }

      function read() public returns(int) {
            return number;
      }

}

The smart contract named "Storage" has a single integer variable called "number", which can be updated using the "store" function that takes an integer input and sets the value of "number" to that input.

The "read" function returns the current value of "number". The contract can be deployed on a blockchain network like Ethereum, and once deployed, users can interact with it by calling the "store" and "read" functions.

B. Getting The ABI

The ABI is "Application Binary Interface" and it refers to a standardized way to interact with smart contracts on the Ethereum blockchain. An ABI is a collection of specifications that define how to call functions within a smart contract, including the function signatures, inputs, and outputs.

You can get the smart contract ABI from the remix IDE from the compiler section as shown in the above Image.

C. Getting Contract Address

To get the contract address you need it to deploy first. There are several ways to deploy a smart contract on vechain but the simple way is to use the inspector tool. [ Link ]

Just add the bytecode of the smart contract and click on deploy. Make sure you have a wallet and some tokens. I would recommend VeChain's veworld wallet.

Once you have contract ABI and Address let's see how to interact with it from the javascript. 

I have initialized a vite project and in the main.js file, we'll write the code.

Smart Contract Interaction from JS

A. Defining the ABI and Address

Once you have your smart contract and address with you from the methods as mentioned above you can initialize them in the JS file and sore in the constant.

import { ABI } from './abi'
const contract = "0xE2a66563b155E2758fa9C0fE52cd63922383259B"

Here I have declared the ABI in another file called abi.js and exported it. And then in the main.js file, I imported it in the first line.

B. Defining Connex

Connex is a software development kit (SDK) for building decentralized applications (dApps) on the VeChain blockchain. It provides a set of APIs that allow developers to interact with the VeChain network and its smart contracts using JavaScript.

Connex simplifies the process of interacting with the VeChain blockchain by providing a high-level abstraction layer that handles details such as transaction signing, fee calculation, and error handling. The SDK also provides a set of tools for building user interfaces and handling events emitted by smart contracts on the VeChain network.

Make sure you've installed the connex if you are importing it as a module otherwise you can also use the CDN, So it can be declared as follows,

const connex = new Connex({
  node: 'https://vethor-node-test.vechaindev.com',
  network: 'test'
})

C. Calling the "store" function

// getting the number value from the HTML input
const number = document.querySelector('#store-input').value

//getting the abi for store function from the ABI variable imported 
const abiStore = ABI.find(({ name }) => name === "store");


// declaring the clause
const clause = connex.thor
        .account(contract)
        .method(abiStore)
        .asClause(number);


// making the transaction
const result = await connex.vendor
        .sign("tx", [clause])
        .comment('calling the store function')
        .request();

First, we extract the ABI (Application Binary Interface) of a function named "store" from the imported ABI variable using the find() method.

Next, the code declares a clause using the Connex SDK that represents the function call to the smart contract's "store" function.

The clause is created using the .account(), .method(), and .asClause() methods, where the .account() method takes the contract address as an argument, the .method() method takes the extracted ABI for the "store" function, and the .asClause() method takes the input value for the function call.

Finally, the code makes a transaction to the VeChain blockchain network using the .sign() method of the Connex vendor object. The .sign() method takes the transaction type (in this case, "tx") and an array of clauses as arguments. The code also adds a comment for the transaction using the .comment() method.

Once the transaction is made, the result is stored in the "result" variable. This code is an example of how to interact with a VeChain smart contract using the Connex SDK and JavaScript.

Clauses are an important concept in the VeChain ecosystem because they allow developers to interact with smart contracts using the Connex SDK in a simple and intuitive manner.

D. Calling the "read" function

// getting the element where we are going to print the number
const contractnumber = document.querySelector('#contract-number')

// getting the read function abi
const abiRetrieve = ABI.find(({ name }) => name === "read");

// reading the number from the blockchain
const result = await connex.thor
    .account(contract)
    .method(abiRetrieve)
    .call();

// printing the number
contractnumber.innerHTML = result.decoded[0]

First, we retrieve the DOM element with the id "contract-number" using the document.querySelector() method, which is the element where the number retrieved from the smart contract will be displayed.

Next, the code extracts the ABI (Application Binary Interface) of the "read" function from the imported ABI variable using the find() method.

After that, the code uses the Connex SDK to call the "read" function on the smart contract using the .method() and .call() methods. The .method() method takes the extracted ABI for the "read" function as an argument, and the .call() method executes the function call.

Finally, the code assigns the retrieved value to the "result" variable and updates the content of the "contractnumber" DOM element using the .innerHTML property, which displays the decoded value of the result in the HTML page.

So, this is how we can interact with the smart contract deployed on VeChain using javascript.

Platform also has a complete certification course to help you start building on Vechain, checkout here -> Introduction to VeChain

You will find multiple smartbooks related to VeChain and others on DApp World itself (smartbooks), and If you are interested in sharing your awesome knowledge and expertise about blockchain and web3 by writing tutorials and articles, join Web3 Authors ✍ on DApp World, Apply here 👈