Twa na kɔ nsɛm atitiriw so

Calling a smart contract from JavaScript

transactionsfrontendJavaScriptweb3.js
Beginner
jdourlens
EthereumDev(opens in a new tab)
April 19, 2020
3 minute read minute read
comp-tutorial-metadata-tip-author 0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE

In this tutorial we’ll see how to call a smart contract function from JavaScript. First is reading the state of a smart contract (e.g. the balance of an ERC20 holder), then we’ll modify the state of the blockchain by making a token transfer. You should already be familiar with setting up a JS environment to interact with the blockchain.

For this example we’ll play with the DAI token, for testing purpose we’ll fork the blockchain using ganache-cli and unlock an address that already has a lot of DAI:

ganache-cli -f https://mainnet.infura.io/v3/[YOUR INFURA KEY] -d -i 66 1 --unlock 0x4d10ae710Bd8D1C31bd7465c8CBC3add6F279E81

To interact with a smart contract we’ll need its address and ABI:

1const ERC20TransferABI = [
2 {
3 constant: false,
4 inputs: [
5 {
6 name: "_to",
7 type: "address",
8 },
9 {
10 name: "_value",
11 type: "uint256",
12 },
13 ],
14 name: "transfer",
15 outputs: [
16 {
17 name: "",
18 type: "bool",
19 },
20 ],
21 payable: false,
22 stateMutability: "nonpayable",
23 type: "function",
24 },
25 {
26 constant: true,
27 inputs: [
28 {
29 name: "_owner",
30 type: "address",
31 },
32 ],
33 name: "balanceOf",
34 outputs: [
35 {
36 name: "balance",
37 type: "uint256",
38 },
39 ],
40 payable: false,
41 stateMutability: "view",
42 type: "function",
43 },
44]
45
46const DAI_ADDRESS = "0x6b175474e89094c44da98b954eedeac495271d0f"
Kyerɛ biribiara
Hwɛ so kyerɛw bi

For this project we stripped the complete ERC20 ABI to just keep the balanceOf and transfer function but you can find the full ERC20 ABI here(opens in a new tab).

We then need to instantiate our smart contract:

1const web3 = new Web3("http://localhost:8545")
2
3const daiToken = new web3.eth.Contract(ERC20TransferABI, DAI_ADDRESS)
Hwɛ so kyerɛw bi

We’ll also set up two addresses:

  • the one who will receive the transfer and
  • the one we already unlocked that will send it:
1const senderAddress = "0x4d10ae710Bd8D1C31bd7465c8CBC3add6F279E81"
2const receiverAddress = "0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE"
Hwɛ so kyerɛw bi

In the next part we’ll call the balanceOf function to retrieve the current amount of tokens both addresses hold.

Call: Reading value from a smart contract

The first example will call a “constant” method and execute its smart contract method in the EVM without sending any transaction. For this we’ll read the ERC20 balance of an address. Read our article about ERC20 tokens.

You can access an instantiated smart contract methods that you provided the ABI for as follows: yourContract.methods.methodname. By using the call function you’ll receive the result of executing the function.

1daiToken.methods.balanceOf(senderAddress).call(function (err, res) {
2 if (err) {
3 console.log("An error occurred", err)
4 return
5 }
6 console.log("The balance is: ", res)
7})
Hwɛ so kyerɛw bi

Remember that DAI ERC20 has 18 decimals which means you need to remove 18 zeros to get the correct amount. uint256 are returned as strings as JavaScript does not handle big numeric values. If you’re not sure how to deal with big numbers in JS check our tutorial about bignumber.js(opens in a new tab).

Send: Sending a transaction to a smart contract function

For the second example we’ll call the transfer function of the DAI smart contract to send 10 DAI to our second address. The transfer function accepts two parameters: the recipient address and the amount of token to transfers:

1daiToken.methods
2 .transfer(receiverAddress, "100000000000000000000")
3 .send({ from: senderAddress }, function (err, res) {
4 if (err) {
5 console.log("An error occurred", err)
6 return
7 }
8 console.log("Hash of the transaction: " + res)
9 })
Kyerɛ biribiara
Hwɛ so kyerɛw bi

The call function returns the hash of the transaction that will be mined into the blockchain. On Ethereum, transaction hashes are predictable - that’s how we can get the hash of the transaction before it is executed (learn how hashes are calculated here(opens in a new tab)).

As the function only submits the transaction to the blockchain, we can’t see the result until we know when it is mined and included in the blockchain. In the next tutorial we’ll learn how to wait for a transaction to be executed on the blockchain by knowing its hash(opens in a new tab).

Nsakraeɛ edi akyire: @pettinarip(opens in a new tab), November 23, 2023

Nkyerɛkyerɛ yi di boaa wo anaa?