How Does a Website Interact With Smart Contracts? | by Sicong Zhao | Feb, 2022

Explained in 10 lines of JavaScript

Step1. Deploy a smart contract

This is a sample contract of Hardhat project.

Step2. Get the Contract ABI

Step3. The Frontend

  • line3 includes the ethers.js library. This is the tool we use to interact with the blockchain ecosystem.
  • In line5 we use the easiest way to include this ABI to the website, by copy-pasting its content and assigning it to the variable Greeter.
  • line6 initiates the provider by providing the Mumbai network’s official RPC address to ethers.providers.JsonRpcProvider method. You might wonder what is a provider. In ethers documentation, “A Provider is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality.” Think of it as an API endpoint, through which you interact with the blockchain.
  • line9 is where we establish the connection between blockchain and our website by providing contract address, ABI, and provider to the ethers.Contract method. Now the website can call the function and retrieve the greeting information from the Mumbai blockchain.
Fig.1 Screenshot of the website.  Greeting returned from the blockchain.
Fig.1 Screenshot of the website. Greeting returned from the blockchain.

What about setGreeting?

Fig.2 Error information when trying to call setGreeting funciton.
Fig.2 Error information when trying to call setGreeting funciton.
Want to Connect?Please feel free to reach out (my LinkedIn).

Leave a Comment