Calling a smart contract from JavaScript

transactions

frontend

javascript

web3.js

beginner

️jdourlens

EthereumDev

April 19, 2020

2 minute read

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 be already be familiar with setting up a JS environment to interact with the blockchain.

For this examples 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"
47
Show all
 Copy

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.

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)
4
 Copy

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"
3
 Copy

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 occured", err)
4    return
5  }
6  console.log("The balance is: ", res)
7})
8
 Copy

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.

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 occured", err)
6      return
7    }
8    console.log("Hash of the transaction: " + res)
9  })
10
Show all
 Copy

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).

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.

Last edit: , Invalid DateTime

See contributors

Edit page