Connect Your dApp to Smart Contract via React and Ethers

Connect to smart contracts using React and Ethers

In this tutorial we start a React project and use ethers package to connect to a real world smart contract on Rinkeby testnet and call its functions. At the end of the tutorial we can interact with the smart contract and mint an NFT.

Requirements

• Knowledge of React and being able to build UI
• Basic knowledge of blockchain concepts
• Having a Metamask wallet with Rinkeby network (Add to Metamask)
• Having ETH on Rinkeby (Rinkeby faucet)

Project setup

1. Create a project using create-react-app

npx create-react-app project-name

2. Install dependencies

npm i ethers @web3-react/core @bitiumagency/web3-react-modal @web3-react/walletconnect-connector

Why These Packages?

In this tutorial we are using ethers for interacting with a deployed smart contract on blockchain, and @web3-react/core for easy connection to the user’s wallet. We also install @bitiumagency/web3-react-modal which as the name implies, is used to display modal. You’ll become more familiar with the second package in the next sections.

We also need to install connector packages like @web3-react/walletconnect-connector; connectors help us to connect to different Ethereum nodes or wallets. Our app supports both injected wallets (e.g. Metamask) and WalletConnect.

Let’s Start Coding

Talk is cheap. Show me the code.

At first we need to paste this piece of code into the App.js file:

What Happens in This Code?

As mentioned in the @web3-react doc:

web3-react relies on the existence of a Web3ReactProvider at the root of your application (or more accurately, at the root of the subtree which you'd like to have web3 functionality). It requires a single getLibrary prop which is responsible for instantiating a web3 convenience library object from a low-level provider.

We did this in line 13.

Then we need to initialize web3-react-modal so that we can show the list of supported wallets to the user, and ask the user to select the desired wallet. As a resultWeb3ReactModal needs three props:

1. useWeb3React: Import directly from @web3-react and add it to this prop.

2. supportedChains: List of supported chains (we use Rinkeby in this app, for the sake of simplicity)

We gave the complete information of the chain so if the network is not available in the user’s wallet, the user can directly add it. This is one of the features of @bitiumagency/web3-react-modal package.

3. connectors: List of connectors (don’t forget options!)

Note that Metamask is available by default and does not need to be passed to this prop.

Mint Component

We create TransferToken.js file and paste the following code inside it:

Don’t panic, everything is much simpler than it seems.

Let’s start with useEffect, we first create a contract instance. We can do it using new ethers.Contract(contractAddress, ABI, signer). We’ll use a sample smart contract for this tutorial.

ABI :

The Contract Application Binary Interface (ABI) is the standard way to interact with contracts in the Ethereum ecosystem, both from outside the blockchain and for contract-to-contract interaction. source

Signer:

A Signer in ethers is an abstraction of an Ethereum Account, which can be used to sign messages and transactions and send signed transactions to the Ethereum Network to execute state changing operations. source

In the handleMint(quantity, {value:wei}) function (line 22) we call the mint function from the smart contract. In our contract mint price is 0.001eth so we convert it to wei and pass it to the mint function.

Be aware that in order to call the mint function, the user’s wallet must be connected, otherwise the program will throw an error. In line 32 we check if the user’s wallet connected, if not we will show “Connect Wallet” button instead of “Mint” button:

If wallet is connected

If wallet is NOT connected

When the user clicks the “Connect wallet” button the connect function is executed and that’s enough for the connection.

Finally, we update the App.js and import the Mint component in it:

You can also update App.css and index.css (Repository)

How to add other networks?

No additional code is required, @bitiumagency/web3-react-modal handles it. If the user doesn’t have the supported network or is connected to the wrong one web3-react-modal package opens Metamask and asks for user’s permission to add or change the network.

Unsupported Networks

Congratulations!

You have successfully developed your first dApp using @bitiumagency/web3-react-modal. You can also check the live demo and check the complete code here.

This package is part of Bitium Agency’s contribution to the blockchain community. If you enjoyed this article make sure to follow us to get notified when new articles are released.