Overview

In Ethereum, sending a transaction to a smart contract allows you to modify the state of the blockchain. This is typically done through functions that are not marked as view or pure in Solidity. Using Ethers.js, you can easily send transactions to smart contracts, which may include transferring tokens, updating contract state, or executing complex logic.

Prerequisites

Before you can send a transaction, 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 wallet with sufficient Ether to pay for gas fees.
  • A provider to connect to the Ethereum network (e.g., Infura, Alchemy, or a local node).

Sample Function to Send

For this example, let's assume we have a simple ERC20 token contract with a function called transfer that allows you to send tokens to another address. Below is the ABI for this function: 

const contractABI = [
    "function transfer(address to, uint256 amount) returns (bool)"
];

Sample Code

Below is a complete HTML example that demonstrates how to send a transaction to the transfer 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 Transaction Example</title>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js"></script>
</head>
<body>
    <h1>Send Tokens</h1>
    <input type="text" id="recipientInput" placeholder="Enter recipient address" />
    <input type="number" id="amountInput" placeholder="Enter amount" />
    <button id="sendButton">Send Tokens</button>
    <pre id="transactionInfo"></pre>

    <script>
        async function sendTransaction() {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();

            const contractAddress = "0xYourContractAddressHere"; // Replace with your contract address

            const contractABI = [
                "function transfer(address to, uint256 amount) returns (bool)"
            ];

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

            const recipient = document.getElementById('recipientInput').value;
            const amount = document.getElementById('amountInput').value;

            try {
                const tx = await contract.transfer(recipient, ethers.utils.parseUnits(amount, 18)); // Assuming 18 decimal places
                document.getElementById('transactionInfo').innerText = "Transaction Sent: " + tx.hash;

                // Wait for the transaction to be mined
                await tx.wait();
                document.getElementById('transactionInfo').innerText += "\\nTransaction Mined: " + tx.hash;
            } catch (error) {
                document.getElementById('transactionInfo').innerText = "Error: " + error.message;
            }
        }

        document.getElementById('sendButton').onclick = sendTransaction;
    </script>
</body>
</html>

How It Works

In the example above:

  1. We create a simple HTML interface with input fields for the recipient's address and the amount of tokens to send, along with a button to trigger the transaction.
  2. The sendTransaction function initializes a connection to the Ethereum network using a Web3 provider and retrieves the signer (the wallet that will send the transaction).
  3. When the button is clicked, the transfer function is called with the recipient's address and the specified amount. The amount is converted to the appropriate format using ethers.utils.parseUnits.
  4. After sending the transaction, the transaction hash is displayed, and the code waits for the transaction to be mined before confirming the success.

Conclusion

Sending a transaction to a smart contract using Ethers.js is a straightforward process. By understanding how to set up the contract instance and call the appropriate functions, you can easily interact with smart contracts on the Ethereum blockchain. This capability is essential for building decentralized applications that require state changes on the blockchain.