Connect your smart contract with ReactJs web app

For this tutorial let's assume that you have deployed your smart contract on a test net such as Rinkeby. If not I'd suggest you go through this tutorial before starting with this one -> harjeev.hashnode.dev/writing-your-first-sma...

Prerequisites

1. Knowledge of basics of ReactJs
2. Smart contract is already deployed on a test net.

Before proceeding further install ethers using npm or yarn

npm i ethers

Ethers js is a library that aims to interact with the Ethereum blockchain and its ecosystem.

Step 1: Assuming that you have already deployed a smart contract on a test net. Go to remix.ethereum.org and copy the address of the deployed smart contract, we would use this value later on in the code.

Now click on the compiler tab, scroll at the bottom and copy the abi file. (Abi / Application Binary Interface file basically tells how you can encode Solidity contract calls for the EVM / Ethereum Virtual Machine and backward, how to read the data out of transactions)

Step 2: Coming back to the React Js codebase, first create a variable that stores your contract address, you could store it in an. env file as well.

Step 3: Create an empty JSON file and store the contents of the abi file that we copied earlier. We would use this file to connect with the smart contract.

Step 4: Now you would need to create 3 states, more about them later

    const [provider,setProvider] = useState(null);
    const [signer,setSigner] = useState(null);
    const [contract,setContract] = useState(null);

Step 5: Create a button that will help in connecting the smart wallet. Assign an onClick event on the button

const connectWalletHandler = ()=>{
    if(window.ethereum){
        window.ethereum.request({method:'eth_requestAccounts'})
        .then(result=>{
            setConnectedWallet("Wallet Connected");
            setAddress(result[0]);
            updateEthers();
        })
    }else{
        setError("Need to install Metamask");
    }
}

The above method would first check if Metamask is installed in the browser or not, if not it would set the error state with the desired message, else it would request for the accounts logged inside Metamask, and from there it would fetch the first value and call updateEthers() method.

Step 6: Import the abi.json file that we had created earlier

import Abi from "./assets/abi.json";

Now use Abi and the contract address that we had copied from the remix (remix.ethereum.org) earlier, to connect with the smart contract.

const updateEthers = ()=>{
    let tempProvider = new ethers.providers.Web3Provider(window.ethereum);
    setProvider(tempProvider);
    let tempSigner = tempProvider.getSigner();
    setSigner(tempSigner);
    let tempContract = new ethers.Contract(contractAddress,Abi,tempSigner);
    console.log(tempContract);
    setContract(tempContract);
}

• Provider: The provider state would help us connect with the Ethereum blockchain network
• Signer: This would help us in signing the messages and transactions that we send over the network.
• Contract: It would help us access the methods that we have exposed in the deployed smart contract.

Once you have connected to the smart contract successfully, you can use the contract state to access the methods that are exposed in the deployed smart contract.

Step 7: Eg: The following method fetches the data back from the smart contract.

const getData= ()=>{
        contract.retrieve().then((res)=>{
              console.log(res);
      })
}

Similarly, you could use methods to set data inside the blockchain as well. But remember for the setters method you have to pay gas because you are writing data inside the blockchain network.

Tips:

• Whenever you make changes inside the smart contract remember to redeploy it again and get the new contract address value and update the contents of the abi.json file.
• Try to perform minimum operations inside the solidity code, because the more operations you perform the higher the gas fees would be.

Congratulations, You have connected your React app to a smart contract.