Smart contracts are the primary building blocks for Web3 applications. to enable functionalities in Web3 applications, it is important to be able to interact with the functions specified in a smart contract conveniently. You could use a popular language like JavaScript and the well-known Web3.js library to establish this communication.
Introduction to the Web3.js Library
Web3.js is a JavaScript library that offers an interface for interacting with the Ethereum blockchain. It simplifies the process of buildingdecentralized applications (DApps)by providing methods and tools to connect to Ethereum nodes, send transactions, read smart contract data, and handle events.
Web3.js bridges traditional development and blockchain technology, allowing you to create decentralized and secure applications using familiar JavaScript syntax and functionality.
How to Import Web3.js Into a JavaScript Project
To use Web3.js in your Node project, you first need to install the library as a project dependency.
Install the library by running this command inside your project:
After installing Web3.js, you can now import the library within your Node project as an ES module:
Interacting With Deployed Smart Contracts
To properly demonstrate how you’re able to interact with a deployed smart contract on the Ethereum network using Web3.js, you will create a web application that functions with deployed smart contract. The purpose of the web app will be a simple voting ballot where a wallet can cast votes for a candidate and have those votes recorded.
To start, create a new directory for your project and initialize it as a Node.js project:
Install Web3.js into the project as a dependency and create simpleindex.htmlandstyles.cssfiles within the project’s root.
Import the following code in theindex.htmlfile:
Inside thestyles.cssfile, import the following code:
Below is the resulting interface:
Now that you have a basic interface to get started, create acontractfolder in your project’s root to contain the code for your smart contract.
The Remix IDE provides a simple way to write, deploy, and test smart contracts. You will be using Remix to deploy your contract to the Ethereum network.
Navigate toremix.ethereum.organd create a new file under thecontractsfolder. You can name the filetest_contract.sol.
The.solextension indicates that this is a Solidity file.Solidity is one of the most popular languagesfor writing modern smart contracts.
Inside this file,write and compile your Solidity code:
When Remix compiles Solidity code, it also creates an ABI (Application Binary Interface) in a JSON format. The ABI defines the interface between a smart contract and a client application.
It would specify the following:
To get the ABI, copy it from within the Remix IDE. Create acontract.abi.jsonfile insidecontractwithin your project’s root and paste the ABI inside the file.
You should go ahead and deploy your contract to a test network using a tool like Ganache.
Communicating With Your Deployed Smart Contract Using Web3.js
Your contract has now been deployed to an Ethereum test network. You can start working on interacting with the deployed contract from your UI interface. Create amain.jsfile in your project’s root. You will import both Web3.js and your saved ABI file intomain.js. This file will talk to your smart contract and will be responsible for reading data from the contract, calling its functions, and handling transactions.
Below is how yourmain.jsfile should look:
The code block above utilizes Web3.js to talk with your smart contract functions from your web interface. Essentially you are using JavaScript functions to call Solidity functions frommain.js.
In the code, replace’CONTRACT_ADDRESS’with the actual deployed contract address. The Remix IDE will provide you with this on deployment.
Here’s what’s happening in the code:
Remember to include thismain.jsfile in your HTML file using atag.
Additionally, ensure that the contract address and ABI are correct and that you have proper error handling in place.
JavaScript’s Role in Building DApps
JavaScript has the ability to interact with smart contracts used in decentralized applications. This brings together the Web3 world with a primary programming language used in building Web2 apps, which helps facilitate the adoption of Web3. With Web3.js, Web2 developers can transition to building apps like a Web3 social media platform.
