Connect a React dApp to a Smart Contract Using ethers.js

Ryan Harris
InstructorRyan Harris
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

Now it’s time to connect your dApp to your smart contract on the Rinkeby test network.

You will copy over the nfTixBooth.json file from the smart contract project. Then, using the ethers library, you’ll connect to the smart contract.

Instructor: [0:00] Now let's connect our React app to the smart contract on Rinkeby testnet. First in our React app, let's create a new folder inside of source. We'll call it Contracts. Inside, we're going to create a new file called NF Ticks Booth.json.

[0:19] If we come back to our scaffold-eth repository and open the file explorer, go into packages, hard hat, artifacts, contracts, NF ticks booth.sol, and find NF ticks booth.json. We're going to select the entire file and copy it.

[0:36] Go back to our React app and paste its contents into our new JSON file. Let's save that. If we open app and close the file explorer, we're going to import a new library called Ethers. Import Ethers from Ethers, and use it with our JSON file a.k.a. an ABI to connect with our smart contract.

[0:59] Let's come down below and add a new hook, useEffect. We'll give it an empty dependency array because we only want it to run once. Inside, we'll run a function called getConnectedContract. Above, we'll define a new function, const getConnectedContract. It'll be an async function.

[1:28] Inside, we're going to try to parse the Ethereum object from the window. Say, const Ethereum equals window. If it doesn't exist, if not Ethereum, will return early. Then we'll instantiate a new provider. Say, const provider equals new Ethers.providers.webThreeProvider.

[1:53] We'll pass it the Ethereum object. Then we'll instantiate a new signer, const signer equals provider.getSigner. Now we want to instantiate the contract itself. We'll say, const connected contract equals new Ethers.contract. We're going to pass these three arguments.

[2:16] First, we need to go to the top and import our AVI file, which is the JSON we created earlier. We'll add an import. Import NF ticks booth from contracts/NFTicksBooth.json.

[2:33] If we come back down below where we were instantiating our contract, the first argument will be our contract address on the Rinkeby network. We have this stored in an environment variable. Let's say, process.env.reactapp contract ID.

[2:50] The second argument will be our AVI file. We'll say NF ticks booth.avi. Our third argument will be our signer. Let's save this contract instance in our component state. Come up above. Const connected contract. Set connected contract, and set it to null, useState null.

[3:18] Below, let's call set connected contract and pass it our contract instance, connected contract. If we come up above, we can log out this value. Console.log connected contract, connected contract.

[3:39] If we come to the browser and open the console, you can see we're locking a new object called connected contract, which is what we'll use to call methods on our smart contract.

[3:49] In review, we used Ethers and our smart contract AVI file in order to connect our React application to our smart contract.

egghead
egghead
~ 16 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today