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

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.