Connect MetaMaskWallet to Frontend on Binance Smart Chain (Part 1)

When we write solidity contracts, we must use the terminal or other command-line tools to interact with our smart contracts, it's safe to say that most users do not have the knowledge or desire to interface with smart contracts directly. This is why Dapps require a frontend to make the user experience pleasant for everyone. In the frontend, we use javascript, in smart contracts, we use solidity, how can we connect them together?

We have two main parts the smart contract which runs on Binance Smart Chain and the front-end which runs in a web browser of the user, the software that runs the Binance smart chain is called the client, the client exposes the spot contract functionality with an API, in this API there are several endpoints These endpoints can be used for interacting with the smart contract we will use eth_send a transaction to modify data and eth_call to read data from the smart contract.

On the frontend, we will have a web page with HTML CSS & Javascript, this is the javascript code that will interact with the smart contract.

It is possible to use Javascript alone to interface with the smart contract but it requires special encoding and it's quite a hassle. Instead, we are going to use a javascript library called Ethers to do all the hard work for us.

Note: It's possible to do the exact same thing with Web3js which is older than Ethers but for the scope of this tutorial we will only use Ethers. it's possible to switch to Web3Js in the future if you wish.

Ethers will send an HTTPS request across the internet to interact with our deployed Binance Smart Chain smart contract. Technically, Ethers calls Metamask which sends the request on its behalf. The request is then sent to the Ethereum virtual machine (EVM) which will execute our request and have a response sent back to our frontend.

Although it's not part of the blockchain, the wallet of the user on the frontend, normally as a chrome extension, is an important part of the puzzle as it is required to sign the transactions that we are broadcasting to the EVM. Users must agree to sign transactions made by Ethers in order to interact with our smart contracts.

Now that we have an overview of what's going to happen, let's start coding it.

First, we need to:

• Create our basic smart contracts
• Create logic to get network provider
• Write code to connect MetaMask plugin in simple frontend in ReactJs

it’s worth noting that this guide is focused on the frontend integration with MetaMask and not the deployment of the contracts

Let's start with our contracts, in our project folder, we will create the following contracts/SimpleStorage.sol contract

pragma solidity ^0.8.0; 
contract SimpleStorage {  
uint public data;  
 
function updateData(uint _data) external {
    data = _data;
  }   
function readData() external view returns(uint) { 
return data;
 }
}

And contracts/Migrations.sol contract too:

pragma solidity >=0.4.22 <0.9.0;
 contract Migrations {
  address public owner = msg.sender;
  uint public last_completed_migration;
  modifier restricted() {
    require(msg.sender == owner,
      "This function is restricted to the contract's owner"
    );
    _;
  }   
 function setCompleted(uint completed) public restricted {
      last_completed_migration = completed;
  }
}

Next, we need some simple script to deploy our code, create a migrations folder and place the following code there:

— migrations/1_initial_migration.js

const Migrations = artifacts.require("Migrations");
module.exports = function (deployer) {
  deployer.deploy(Migrations);
};

— migrations/2_deploy_contracts.js

const SimpleStorage = artifacts.require("SimpleStorage"); module.exports = function (deployer) {
deployer.deploy(SimpleStorage);
};

In the next part of this tutorial, we will write some javascript code to use in our React app!

Connect MetaMaskWallet to Frontend on Binance Smart Chain (Part 2)