Overview

In Ethereum, smart contracts can have both read and write functions. Read functions are those that do not modify the state of the blockchain and can be called without sending a transaction. They are typically marked as view or pure in Solidity. Using Ethers.js, you can easily call these read functions to retrieve data from a smart contract.

Prerequisites

Before you can call a read function, you need the following:

  • The address of the deployed smart contract.
  • The ABI (Application Binary Interface) of the contract, which defines the functions and events.
  • A provider to connect to the Ethereum network (e.g., Infura, Alchemy, or the default provider).

Sample Read Function

For this example, let's assume we have a simple ERC20 token contract with a read function called balanceOf that returns the balance of a given address. Below is the ABI for this function: 

const contractABI = [
    "function balanceOf(address owner) view returns (uint256)"
];

Sample Code

Below is a complete HTML example that demonstrates how to call the balanceOf function of a smart contract using Ethers.js: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethers.js Read Function Example</title>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js"></script>
</head>
<body>
    <h1>Get Token Balance</h1>
    <input type="text" id="addressInput" placeholder="Enter wallet address" />
    <button id="getBalanceButton">Get Balance</button>
    <pre id="balanceInfo"></pre>

    <script>
        async function getContractInstance() {
            const provider = ethers.getDefaultProvider();
            const contractAddress = "0xYourContractAddressHere"; // Replace with your contract address

            const contractABI = [
                "function balanceOf(address owner) view returns (uint256)"
            ];

            // Create a contract instance
            const contract = new ethers.Contract(contractAddress, contractABI, provider);
            return contract;
        }

        document.getElementById('getBalanceButton').onclick = async () => {
            const address = document.getElementById('addressInput').value;
            const contract = await getContractInstance();
            try {
                const balance = await contract.balanceOf(address);
                document.getElementById('balanceInfo').innerText = "Balance: " + balance.toString();
            } catch (error) {
                document.getElementById('balanceInfo').innerText = "Error: " + error.message;
            }
        };
    </script>
</body>
</html>

How It Works

In the example above: 1. We create a simple HTML interface with an input field for the wallet address and a button to trigger the balance retrieval. 2. The getContractInstance function initializes a connection to the Ethereum network using a default provider and creates a contract instance using the specified contract address and ABI. 3. When the button is clicked, the balanceOf function is called with the provided address, and the balance is displayed on the webpage. If an error occurs (e.g., invalid address), it is caught and displayed to the user.

Conclusion

Calling a read function of a smart contract using Ethers.js is straightforward. By understanding how to set up the contract instance and call the appropriate functions, you can easily retrieve data from the blockchain. This capability is essential for building decentralized applications that require interaction with smart contracts.