How to Integrate Smart Contracts into React DApp with ethersjs

Modify the App.js file as given below. We have added two more useEffect() hooks to handle the smart contract connection and fetch data from the smart contract.

import "./App.css";
import { useEffect, useState } from "react";
import { ethers } from "ethers";

//Import ABI file and smart contract address
const smartContractABI = require("./contracts/SmartContractABI.json"); //Replace this with your own
const smartContractAddress = "0xCa2eb4eE46063E3Fc7454D31d4dA674C5B8C24Ce"; //Replace this with your own

function App() {
  const [address, setAddress] = useState(null);
  const [provider, setProvider] = useState(null);
  const [smartContractAPI, setSmartContractAPI] = useState(null);
  const [nftName, setNFTName] = useState(null);
  const [nftSymbol, setNFTSymbol] = useState(null);

  //To connect with the metamask wallet
  useEffect(() => {
    const connectWallet = async () => {
      if (window.ethereum == null) {
        alert("Metamask not found");
        console.log("Metamask not found");
      } else {
        //You can use this providerInstance to just perform read operations
        const providerInstance = new ethers.BrowserProvider(window.ethereum);
        try {
          //You can use the signer to perform both read and write operations
          const signer = await providerInstance.getSigner();
          setProvider(signer);
          setAddress(await signer.getAddress());
        } catch (error) {
          console.log(error);
        }
      }
    };
    connectWallet();
    //Listen for accounts changed event
    window.ethereum.on("accountsChanged", (accounts) => {
      console.log(accounts);
      setAddress(accounts[0]); //current active account address will be at index 0
    });
    //Listen for network changed event
    window.ethereum.on("chainChanged", (chainId) => {
      console.log(chainId);
      // To refetch the details when network changes
      connectWallet();
      setNFTName(null);
      setNFTSymbol(null);
    });
  }, []);

  //Connect with the smart contract
  useEffect(() => {
    if (provider) {
      try {
        setSmartContractAPI(
          new ethers.Contract(
            smartContractAddress,
            smartContractABI.abi, //If JSON file only contains ABI section, then you can directly use it
            provider
          )
        );
      } catch (error) {
        console.log(error);
      }
    }
  }, [provider]);

  //Lets fetch the NFT contract name and symbol
  useEffect(() => {
    const fetchNFTDetails = async () => {
      try {
        if (smartContractAPI) {
          setNFTName(await smartContractAPI.name());
          setNFTSymbol(await smartContractAPI.symbol());
        }
      } catch (error) {
        console.log(error);
      }
    };
    fetchNFTDetails();
  }, [smartContractAPI]);
  return (
    <div className="App">
      <p>Wallet Address: {address ? address : "wallet not connected"} </p>
      <br />
      <p>NFT Name: {nftName ? nftName : "Couldn't fetch NFT name"}</p>
      <p>NFT Symbol: {nftSymbol ? nftSymbol : "Couldn't fetch NFT symbol"}</p>
    </div>
  );
}

export default App;

This JSON file is generated using the Truffle suite. The JSON file contains more than ABI content. We can access the ABI using the “abi” key with the JSON file. If you want you can import the ABI section only. The JSON file can be found here. Create the “contracts” directory inside the “src” folder. Then create the “SmartContractABI.json” file and put the content of the JSON file[access here] inside this file. Otherwise, you can use your own smart contract JSON file. Only use the one I provided if you are using the above-given contract address(i.e.“0xCa2eb4eE46063E3Fc7454D31d4dA674C5B8C24Ce”).