[DApps] Part III : Call Smart contract function by Web3.js

Hello there, Welcome to another tutorials of DApps (Solidity) series. This is last article of this series. Don’t waste time let’s start learning.

First of all we’ll need to install web3.js or ether.js to call our smart contract. In this tutorials we’ll use web3.js.

npm install web3

Next let’s setup web3 environment to network that we’ll be use.

import Web3 from "web3";
window.web3 = new Web3(window.ethereum);
window.web3.setProvider(new Web3.providers.HttpProvider(RPC_URL));

In this tutorials we’ll connect to BSC testnet, So this is my environment variable. (provide this in .env file)

VUE_APP_CHAIN_ID=0x61
VUE_APP_CHAIN_NAME=BINANCE SMART CHAIN (Testnet)
VUE_APP_RPC_URL=https://data-seed-prebsc-1-s1.binance.org:8545
VUE_APP_CURRENCY_NAME=BINANCE COIN
VUE_APP_CURRENCY_SYMBOL=BNB
VUE_APP_BLOCK_EXPLORER=https://testnet.bscscan.com/
VUE_APP_LOTTO_CONTRACT=0x3c8159afcD9aD8b834677fe764E80807894a37c6

After setup environment done we can test web3.js by call to get current block number.

window.web3 = new Web3(window.ethereum);
window.web3.setProvider(new Web3.providers.HttpProvider(VUE_APP_RPC_URL));
const blockNumber = await window.web3.eth.getBlockNumber();
console.log(blockNumber);

Call ours part II smart contract

Let’s back to our main of this article. We need to get ABI of contract from explorer or compiler and put it in our project structures.

https://testnet.bscscan.com/address/0x3c8159afcD9aD8b834677fe764E80807894a37c6#code

Create folder in your src/ and name it “contracts”. You need to copy ABI from chain explorer and put it in “abi” field as JSON format.

After done to create ABI. We’ll import it in file that need to call smart contract.

import Web3 from "web3";
import LottoX from "@/contracts/LottoX.json";

Then put ABI JSON interface to variable that made easy to use.

window.web3 = new Web3(window.ethereum);
if (typeof window.ethereum == “undefined”) {
window.web3.setProvider(new Web3.providers.HttpProvider(process.env.VUE_APP_RPC_URL));}
this.lottoContract = await new window.web3.eth.Contract(
LottoX.abi, process.env.VUE_APP_LOTTO_CONTRACT);

Okay!! We finish all setup for call smart contract. Now we can call function in LottoX smart contract. Let’s call view function first because it not need confirmation from user just request and response.

this.lottoContract.methods.gameId().call()
.then((res) => {
console.log(res);
this.gameAmount= res;
});

This will return length of games from smart contract and you can use response by anyway Ex. put it in frontend to show user.

Next let’s call write function that made user to confirm transaction or sign.

this.lottoContract.methods.setGame(Web3.Utils.toWei(20), 0)
.send({ from: window.ethereum.selectedAddress})
.on("sent", (data) => console.log(data))
.on("transactionHash", (tx) => console.log(tx)
.on("receipt", (data) => console.log(data))
.on("error", (error) => console.log(error));

Let me explain about this. First line we’ll call “setGame” function that need 2 parameter first is minAmount in wei second is index of country. Second line .send is use to submit transaction from “selectedAddress” its mean address that connected to this website. Third line to last line it about promise return from any state of transaction.

PS. Web3.Utils.toWei() is use to covert decimal of parameter from 10 to 18

Now you can call read and write function in your smart contract from website. You can test any solution to use this Ex. Let manager of LottoX set games from website panel when they submit it going to smart contract.

You’re welcome to leave a tip if you enjoy our tutorials, thanks for reading and sticking through if you got this far!