React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Solidity is an object-oriented, high-level language for implementing smart contracts.

solidity

Ethereum is a decentralized, open-source blockchain with smart contract functionality. 

ethereum

Kamil Khadeyev

Simplify the process of creating a new smart contract by cloning the scaffold-eth repo. 

Once you’ve cloned the scaffold you can run a blockchain locally with `yarn chain` and also run your frontend with `yarn start`

You can find the repo here -> [https://github.com/scaffold-eth/scaffold-eth](https://github.com/scaffold-eth/scaffold-eth)

Create a New NFT Project with scaffold-eth

Simply deploy your smart contracts with the scaffold by running `yarn deploy`.  Once deployed your can view your contract in the UI. 

But, the default smart contract that comes with scaffold-eth isn’t useful for our NFT ticketing app. So, we’ll edit the contract to have a `saleIsActive` state and write a couple of functions that update the state to `true` or `false`

Deploy a Smart Contract to Localhost with scaffold-eth

ERC-721 is the Non-Fungible Token (NFT) standard that implements an API for tokens inside of Smart Contracts. 

Luckily, the OpenZeppelin library makes it easy to enforce this standard with the `ERC721URIStorage` class! We just import the `ERC721URIStorage` class and specify that our contract is an instance of it. Then, set the return type in our constructor to `ERC721`.

Create an ERC-721 Token with OpenZeppelin

We need our users to be able to mint their NFT tickets. We also need to limit the number of available tickets. 

Start by making sure each NFT has a unique ID. OpenZeppelin gives us the handy utility `Counters` for this. We will increment the ID each time an NFT is minted. 

Once your NFTs have IDs you can use the inherited `_safeMint` function from OpenZeppelin in your `mint` function to mint an NFT for the initiator of the function. Also, make sure to increment the ID and decrement the number of remaining NFTs.

Add a Mint Function to Your NFT Smart Contract

Let’s add an image to our SVG. We’ll start by creating a base 64 encoded SVG using `Base64` and `OpenZeppelin`. 

Then, in order to actually associate an image to our token, we’ll have to apply it to our token’s metadata. We’ll create a base64 JSON object that includes our image, save it as a string variable that lives in memory, then call the `_setTokenURI` method with our NFT’s ID and our metadata string.

Add an Image to an NFT with Token Metadata

We want to actually sell our NFT tickets, so let’s set a mint price. 

In our smart contract, we can just set the price to an integer variable. We’ll then make our mint function `payable`. When a function is payable in Solidity it means it can receive ether. 

Once our mint function is payable, we can call the `require` function to check if the initiator of the function is sending enough ether.

Set a Mint Price on Your NFT Smart Contract

Right now our sale can be open and closed by anyone. We want to take ownership of our smart contract to prevent this.

We'll use `Ownable` from OpenZeppelin, Set the `openSale` and `closeSale` public functions to `onlyOwner`, and then set the owner of the smart contract in the deploy script.

Restrict Smart Contract Functions to a Specified Owner

So far we’ve been deploying to a blockchain running locally. Let’s get our smart contract onto the Rinkeby test network. 

Create an account on the command line and then get some ether through a faucet. In this lesson, we used [https://faucets.chain.link/rinkeby](https://faucets.chain.link/rinkeby) to get our fake ether. Then we use our same deploy script, except with the `--network` flag that we set to `rinkeby`.

Deploy a Smart Contract to the Rinkeby Testnet

Let’s create a dApp that connect to a smart contract on the Rinkeby test network! 

I’ve created a starter repo ****for you. Just run `git clone git@github.com:ryancharris/nftix-demo-ui.git`. Then just run `yarn` and add the smart contract’s address to an ENV file.

Set Up a React dApp From a Starter

We need a way for our user’s MetaMask wallets to connect to our dApp. We can accomplish this with the `ethereum` object that MetaMask injects into the browser’s `window`. 

When the user connects we’ll save their wallet address as state using the `useState` hook.

Support MetaMask Connections to a React dApp

Users should also be given the option to disconnect their wallet from your dApp.

There isn’t a programatic way to accomplish this, but we can remove their wallet address from state, adjust the UI, and use `react-router` to navigate them to root in order to provide a clear UX.

Disconnect MetaMask from a React dApp

Since we are storing the user’s wallet address in React state, it is lost when the dApp is reloaded. To fix this, we’ll cache the address in localStorage. 

We’ll use the `useEffect` hook to look for an address in localStorage if there isn’t one in local state.

Cache a MetaMask Wallet Address in localStorage

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.

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

We don’t want any user to be able to access admin pages. Let’s check if the user’s wallet address matches the address of our connected smart contract. 

This can be done by using OpenZeppelin to get the owner address from the smart contract, then comparing that to the currently connected address.

Fetch the Owner's Wallet Address From a Smart Contract

We need to give the owner of the smart contract the ability to open and close an NFT sale in the React dApp UI. 

We’ll use the `.openSale` and `.closeSale` methods off of the `connectedContract` stored in React state. Then for the best possible experience we’ll create a pending state while the sale is opening or closing. During the pending state the buttons will be disabled. 

Then we’ll bring in `useToast` from chakra-ui to give a message depending on if the opening/closing of the sale was successful or not.

Open and Close an NFT Sale From a React dApp

It’s helpful for users to know how many NFTs are currently available and how many there are total.  

This information can be found on the smart contract. In our dApp we can get it off our `connectedContract`, stored locally in React state, using the `totalTicketCount` and `availableTicketCount` methods.

Fetch Mint Info From a Smart Contract

Time to set up our dApp to actually mint an NFT when the buy button is clicked. 

`.mint` is called on our `connectedContract` with an object containing a `value` property. The value property is the NFTs cost in gwei. 

Then to polish everything up, we’ll add a loading state, and link the user to the transaction on Etherscan using `useToast`

Mint an NFT from a React dApp

With the `QrReader` component from `react-qr-scanner` library, scanning a user’s wallet QR code is straightforward. 

We first make sure that the QR reader can be open and closed in the UI. Then using the `onScan` prop on `QrReader`, we get the wallet address from the QR code and add it to local state.

Scan an Ethereum Wallet's QR Code

To confirm ownership we first have to add a `confirmOwnership` method to our smart contract and redeploy it. 

Then, we can call that `confirmOwnership` method on the connected smart contract within a `useEffect` hook in our React dApp.

Confirm a Wallet Owns an NFT in a Smart Contract

A placeholder image isn’t going to cut it for our awesome NFT tickets. 

We can upload our own images to IPFS at [https://www.pinata.cloud/](https://www.pinata.cloud/)

Upload Static Assets to IPFS with Pinata

We want to update the “Checked In” property on our NFT tickets once a user checks in with our dApp. 

To accomplish this we create `checkIn` method in our smart contract. To write `checkIn` we can just copy and paste a large portion of our `mint` method and remove the call to `safeMint`, set the id to the user’s token, set Checked In to `true`, and replace the placeholder image with our IPFS image.

Update an NFT’s Image and Other Metadata

Let’s display a user’s NFT ticket in our dApp. 

Using Axios, we can make a call to OpenSea’s API, passing in the user’s address and the smart contract address as params.

Display a User's NFTs Using the OpenSea API

Build an NFT Based Ticketing System

https://app.egghead.io/api/v1/lessons/ethereum-create-a-new-nft-project-with-scaffold-eth/subtitles

Instructor: [0:00] To get started, we're going to clone the Scaffold-ETH repository from GitHub. This will give us some pre-configured tooling and a nice UI, which we can use to iterate on our smart contract.

[0:10] In our terminal, let's type git clone https://github.com/scaffold-eth/scaffold-eth.git. Now that we're done cloning, let's cd to the scaffold-eth directory and then list out its contents by typing ls. You can see there's a package.json and a yarn.lock file in this directory, so we'll also need to do a quick yarn install.

[0:36] With our Node modules installed, let's look at the contents of the directory one more time. Again, we'll type ls. You can see there's a subdirectory called packages. We'll do ls packages to see the contents.

[0:54] Inside, there are a couple of folders. Take note that we have a hardhat subdirectory, which contains our smart contract, and a React app subdirectory, which contains our front-end UI.

[1:04] This means we're working with a monorepo, so we're going to need to run a couple different scripts here. First, we'll run yarn chain to spin up a local blockchain instance. Then we'll open another terminal session, and we'll cd into git scaffold-eth. Here, we'll run yarn start to spin up our React app. You should now see the Scaffold-ETH UI in your browser.

[1:30] To summarize, we cloned Scaffold-ETH to our machine, spun up a local blockchain with yarn chain, and then ran our front-end UI with yarn run start.

https://app.egghead.io/api/v1/lessons/ethereum-create-a-new-nft-project-with-scaffold-eth/transcript

https://app.egghead.io/api/v1/lessons/ethereum-deploy-a-smart-contract-to-localhost-with-scaffold-eth/transcript

https://app.egghead.io/api/v1/lessons/ethereum-create-an-erc-721-token-with-openzeppelin/subtitles

Instructor: [0:00] We have a functioning smart contract on our local blockchain, but we want to make sure we're enforcing the ERC721 standard.

[0:07] Like many NFT projects, we're going to be using the OpenZeppelin library. This allows us to use best practices by importing utilities and base classes. We're going to come into our smart contract and import @openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol. This specific class allows us to set metadata on a per-token basis. You can read more about it in the OpenZeppelin docs.

[0:43] Next, we're going to update our contract to inherit the new base class we've imported. I'm going to copy and paste it, and say, contract YourContract is an instance of ERC721URIStorage. Then, I'm going to come down to the constructor and update its return type to an ERC721 token, with the name, NFTix, and the symbol, NFTX.

[1:10] Before we redeploy to our local blockchain, let's update the name of our contract and call it NFTixBooth. Then, we're also going to rename the file, and call it nftix-booth to match the contract name. We'll also need to update our deploy script. Instead of referring to YourContract, we need to change this to the new contract name, NFTixBooth, and then change all the instances of that in this file.

[1:44] Then, we also need to go into our React application, go into sources and go into App.jsx. Here, we need to change the name, YourContract, to NFTixBooth as well. Now we can redeploy the script. You can see in the UI, we have a new smart contract name. We have some new methods from the ERC721 standard, we have a new ERC721 name, NFTix, and we also have a new symbol, NFTX.

[2:22] In review, we use the ERC721 URI storage class from the OpenZeppelin library to enforce the standards of an ERC721 token. We also change the name of our smart contract, and gave the NFTs it generates a name and a symbol.

https://app.egghead.io/api/v1/lessons/ethereum-create-an-erc-721-token-with-openzeppelin/transcript

https://app.egghead.io/api/v1/lessons/ethereum-add-a-mint-function-to-your-nft-smart-contract/subtitles

Instructor: [0:00] First, we're going to import hardhat/console.sol. This will allow us to log messages to the Hardhat console running on the right. We're also going to import a helper utility called Counters from OpenZeppelin. This is going to help us keep track of our token IDs and how many tickets are left.

[0:16] In our contract below, we also need to import Counters, using Counters for Counters.Counter. Then, we'll create an instance of a Counter, Counters.Counter, make it a private state variable, and call it currentID.

[0:33] This new variable, currentID, is going to be used to keep track of each token's ID as its created. Since it wouldn't make sense for there to be a token zero, we're going to come in to our Constructor and add a new statement, currentID.increment.

[0:48] To prove this works, we can add a console statement to the Constructor, console.log(currentID.current). Then, if we run yarn deploy, you'll see that we logged out the value 1 when our contract was deployed above.

[1:10] Back in our smart contract, let's add two new state variables. We'll say uint256, make this a public state variable and call it Total Tickets. We'll set it to 10. Now we'll add another integer, uint256. It'll also be a public variable, and we'll call this Available Tickets. We'll also set that to 10.

[1:34] Now that we have all that set up, let's come down below and add a new mint function, function mint. This will be a public method, meaning, it can be called by other smart contracts and dApps.

[1:46] Inside the mint function, we're going to call safeMint, which is a function we've inherited from the OpenZeppelin library. We're going to pass it two arguments. The first is going to be message.sender. This is the address of the blockchain account initiating this transaction.

[2:01] Next, we'll pass it currentID.current, which is the ID of the token being minted. Anytime someone mints a new ticket, we're going to want to increment this currentID value.

[2:14] Let's come down into our mint function again. We'll say, current ID.increment. Now, there are certain cases where we wouldn't want this transaction to succeed. For example, there aren't enough available tickets left in order to mint a new one.

[2:30] Let's go into our mint function again, and at the very top, add a require statement. In this case, we will want to check that there are enough available tickets before minting a new one. We'll say, require availableTickets >. If it's not, we'll add this optional log and say, "Not enough tickets."

[2:48] We're also going to need to decrement the amount of available tickets every time an NFT is minted. Let's come down below and say, availableTickets = availableTickets - 1. Let's come down here, and we're going to add a new function, function availableTicketCount, which will take no arguments. It will be a public method.

[3:16] We can add the view keyword here as well, since it won't be modifying our contract state. This method will return a uint256. Inside, we'll just return availableTickets. Below, we'll add another method. We'll say, function totalTicketCount. This will be a public method with the view keyword, and it will also return a uint256. Inside, we'll just return totalTickets.

[3:48] Let's add one more variable to our contract state. Let's come up to the top of the contract. We'll add a new mapping here, which is an object of key-value pairs. In this case, it'll be a public variable, and we'll call it holderTokenID.

[4:04] In this case, the keys will be wallet addresses that hold our NFTs. We'll say address here. The values will be integer arrays, uint256, which represent the token IDs the address holds.

[4:20] Now let's jump into our terminal and deploy the contract -- yarn deploy. If we open a third terminal window here, we can spin up our React application. In the scaffold-eth UI, you can see some of the new things we've added to the contract.

[4:38] Down below, we actually have a mint function here. Let's grab some funds from the faucet. We can send a transaction to mint, and we have a success. If we go up, you can see that we have nine tickets available, but there are still 10 total tickets.

[4:56] In summary, we imported counters from OpenZeppelin to keep track of our current token ID, added some values to our contract state, and created a function for minting new tokens.

https://app.egghead.io/api/v1/lessons/ethereum-add-a-mint-function-to-your-nft-smart-contract/transcript

https://app.egghead.io/api/v1/lessons/ethereum-add-an-image-to-an-nft-with-token-metadata/subtitles

Instructor: [0:00] Let's add an image to our NFT's metadata. First, we'll scroll down to our mint function. Right below the require statement, we're going to create an array of strings that lives in memory and call it SVG.

[0:15] To start, we're going to set the array's length to three. The first index in the array is going to be the start to our SVG string. We'll say SVG  =, and I'm going to copy and paste this string. It's an SVG with a viewBox of 100 by 100 and text in the middle of the y-axis.

[0:35] The next index in the array, SVG  , will be the value displayed inside our SVG's text tag. In this case, we want to use our currentId counter's value. We'll say currentId.current. This value needs to be a string. Let's go to the top of our contract because we need to import another utility from OpenZeppelin. Then we can come back down to our mint function and wrap our current ID value in strings.tostring.

[1:08] Finally, the last index in the array SVG  is going to be the closing SVG in text tags. We'll say, close text, close SVG. We need to concatenate the strings in this array into a single SVG string. We'll create a new string variable that lives in memory and call it image.

[1:31] We'll set this to abi.encodePacked and pass it all three indices of our SVG array. SVG  , SVG, SVG. Then we need to wrap this value in a string. If we want to persist this image on the blockchain, we need to encode it in base64.

[1:54] I'm going to go to the top of the smart contract and I'm going to import a base64 utility that I created. You can find more about this in the lesson notes. Import base64.sol.

[2:07] If we go back down to our mint function, we can create a new string variable that lives in memory called encoded image and we'll set that to base64.encodeBytesImage. Let's log out the new encoded image string, console.log encoded image.

[2:30] We can come to our terminal and deploy this to our local blockchain. In order to see this log, we'll need to mint to token. Let's hop over to the browser. Here we are back in the scaffold ETH UI. We have 10 tickets available.

[2:46] Let's scroll down to the mint function right here. Click Send. We've successfully minted in NFT using our updated smart contract. Let's hop back to VS Code. Back in VS Code, let's look through our hardhat logs and see if we can find the console.log encoded image. Here it is.

[3:08] Let's copy and paste this, and hop back to our browser. Open a new tab and paste the value. Before you hit Enter, we need to tell the browser what type of data we're dealing with. We need to prepend the string with data:image/SVG+XML;base64, Enter.

[3:29] You can see here that our current token ID of one has successfully been interpolated into the base64 encoded SVG image. Let's go back to VS Code. While we have the SVG image working, we need to apply this all to our NFT's metadata. We need to do a bit more work.

[3:47] First, we need to come down below our encoded image and create a new variable. This will be a string that lives in memory and we'll call it JSON. We'll set its value to base64.encode. Inside of that, we'll have bytes string and abi.encodePacked.

[4:07] In here, we need to create a JSON string that represents our NFT's metadata. Instead of typing this out, I'm going to copy and paste it. What we have here is an NFT with the name NFTix.

[4:21] Again, we're interpolating the string value of our current ID counter, so that each token has a unique ID number. Each token in the collection shares the same description, a NFT powered ticketing system. We also have a set of traits here based on the OpenSea metadata model.

[4:37] Once again, we need to take all of this and create a new string variable that lives in memory. We'll call it string memory token URI and we'll set it to string abi.encodePackedData:application/JSON;base64, and our JSON string.

[5:02] Token URI is a base64 encoded JSON object that represents the metadata of our NFT. The last thing we need to do here is right below where we mint, call another method we've inherited from OpenZeppelin. Set token URI, which will set the metadata of an NFT.

[5:21] Then we pass it a token ID. In this case, the current value of our currentId counter. We'll say, currentId.current, and then the metadata itself, so token URI.

[5:34] For testing purposes, we can also log out this token URI string, console.log token URI. We can redeploy the smart contract to our local blockchain, yarn deploy, and go back to our browser where we can mint another NFT.

[5:53] Let's find the token URI we logged out in our Hardhat logs. There it is. We'll copy and paste this. We'll go back to our browser. Open a new tab, paste it into the address bar, and hit Enter. You should see all of the metadata associated with this NFT, including the image.

[6:20] In summary, we updated our smart contract to create a base64 encoded JSON object, that represents the metadata of our NFT, and applied it to the token.

https://app.egghead.io/api/v1/lessons/ethereum-add-an-image-to-an-nft-with-token-metadata/transcript

https://app.egghead.io/api/v1/lessons/ethereum-set-a-mint-price-on-your-nft-smart-contract/subtitles

Instructor: [0:00] Now let's set a mint price for the NFT tickets that we're selling through the smart contract. The first thing we're going to do is come down here and add another integer to our contract state, uint256 public mintPrice equals -- and I'm going to paste this -- 80000000000000000.

[0:21] While our NFTs will be sold for .08 ETH, this value is in Gwei. You can think of this like dollars and cents, and read more about it in the Etherium documentation.

[0:33] Now that we've set the price, let's come down to our mint function again. After public, we'll add the payable keyword. This means this function can receive Ether. Inside the function, we'll add another require statement.

[0:47] This time, we're going to check that we're receiving enough Ether to mint an NFT. We'll check that msg.value is greater than or equal to our current mint price. If not, we'll log out, "Not enough ETH."

[1:01] Then we can redeploy the smart contract to our local blockchain by running yarn deploy. Let's hop over to our browser. We'll come down to our mint function here. You can see the UI has changed a bit.

[1:14] We now have an input next to the mint function which allows us to send Ether when minting a new NFT. We also have a value for mint price of .08 ETH, which indicates how much we need to send when minting a new token. We'll come up here. We'll type .08.

[1:32] Hit the asterisk button to convert it to Gwei, and then click Send. You can see we've successfully minted a new NFT. To prove out that the smart contract is enforcing the mint price, let's come up here and change the value to something less like .04 ETH.

[1:49] We'll convert that to Gwei, and then we'll send the transaction. You can see here it failed and we have a message, not enough ETH. To review, we've added a new integer to the contract state called mint price.

[2:06] Below, we've also added the payable keyword to the mint function, meaning it can receive Ether. Inside the function, we've added a new require statement which confirms we've received enough Ether to mint an NFT.

https://app.egghead.io/api/v1/lessons/ethereum-set-a-mint-price-on-your-nft-smart-contract/transcript

https://app.egghead.io/api/v1/lessons/ethereum-restrict-smart-contract-functions-to-a-specified-owner/subtitles

Instructor: [0:00] Currently, anyone can open or close our ticket sale. Open, Close. However, we want to restrict this access so that only we, the owners of the smart contract, can open and close the sale. The first thing we're going to do is import a new OpenZeppelin package -- import "@openzeppelin/contracts/access/ownable.sol."

[0:25] Then we'll use it to update our contract definition. We'll say, contract NFTixBooth is ownable. This gives us another keyword, onlyOwner(), which restricts function access to the address that owns the smart contract.

[0:39] We'll come down below and find openSale() and closeSale(). We want to be the only ones who can change the SaleIsActive state value. Let's add the onlyOwner keyword to both of these functions, onlyOwner.

[0:53] Now, if we redeploy our smart contract to the local blockchain instance, yarn deploy, and we go to our browser. We can now try to open the sale like we did before and we'll see we get an error, ownable caller is not the owner. If we try to close the sale, we'll get the same message. Let's demonstrate that this does work for the owner of the smart contract.

[1:19] Let's go back to VS Code and open our deployment script. Below where we instantiate our smart contract, let's add a new line and we'll say, await NFTixBooth.transfer ownership. I'm going to paste in a wallet address I already have set up in my MetaMask extension.

[1:39] Before we redeploy, we want to add a new restriction to our mint function. Come into our smart contract. Go down to mint. We'll add a new require statement, require. Here we want to check if the sale is active or not. We'll say, sale is active.

[1:57] If not, we'll log out, tickets are not on sale. We can deploy this to the local blockchain by running yarn deploy. We'll jump back to the browser.

[2:13] Instead of using the pre-configured wallet that scaffold Ether set up for us, let's connect my MetaMask extension, which has the wallet address I added to the deploy script. We'll click connect MetaMask. We're logged in as this address.

[2:27] If we look below, you will see that's the address listed as the contract owner. If we click open sale, and confirm the transaction in our MetaMask extension, you'll see we successfully open the sale. That means if we log out, the pre-configured scaffold-eth wallet can now mint a token -- .08 ETH, converted to Gwei, and sent.

[2:55] To review, we made our smart contract ownable, and transferred ownership to a wallet address we control, in our MetaMask extension, and restricted the access to our openSale() and closeSale() methods, so only the owner of the smart contract can change the value of SaleIsActive. Then, in our mint function, we prevented users from minting an NFT if the sale is not active.

https://app.egghead.io/api/v1/lessons/ethereum-restrict-smart-contract-functions-to-a-specified-owner/transcript

https://app.egghead.io/api/v1/lessons/ethereum-deploy-a-smart-contract-to-the-rinkeby-testnet/subtitles

Instructor: [0:00] Till now, we've been deploying our smart contract to a local blockchain instance, but let's deploy it to the Rinkeby testnet. You can think of this as Ethereum's staging environment.

[0:08] In our terminal, we first need to generate an account to use for the deployment. Let's run yarn generate. You can see here that we've generated a new account. If we come back down, we can type Yarn Account and get the balance information about the account we just created.

[0:28] You can see here we don't have any Ether on the Rinkeby testnet, so we'll need to go to a public faucet to get some. Let's go to the browser. There are multiple faucets from which to request testnet ETH, i.e., fake Ether. We'll come down here. We'll select Ethereum Rinkeby. I'll paste the address of the wallet we just created in VS Code, send a request.

[0:50] When that's done, we can go back to VS Code and run yarn account again. We now have .1 Ether in our account on the Rinkeby network. Let's try to deploy this contract to Rinkeby.

[1:01] Run yarn deploy, like we did before, but this time, give it the optional network flag --network and set it to Rinkeby. Once the contract has been deployed successfully, we can grab its new address on the Rinkeby testnet. We'll come up here. You can see our contract is deployed at this address, so copy and paste that. Then we'll go to the browser.

[1:25] This is the Rinkeby testnet version of the Etherscan block explorer. We can use it to look up our smart contract based on its new address. We'll come here, paste the address, and search. On this page, we have information about the smart contract.

[1:40] If we come down below, you'll see we have two transactions thus far. The first is creating the NFTix Booth smart contract, and the second transaction is transferring ownership of the smart contract to my MetaMask wallet.

[1:52] In review, we deployed our smart contract to the Rinkeby test network and confirmed the transaction was successful on Etherscan.

https://app.egghead.io/api/v1/lessons/ethereum-deploy-a-smart-contract-to-the-rinkeby-testnet/transcript

https://app.egghead.io/api/v1/lessons/react-set-up-a-react-dapp-from-a-starter/subtitles

Ryan C. Harris: [0:00] Now, we're going to build a dapp with React that connects to our smart contract on the Rinkeby test network. I've built out a starter repo here on the right.

[0:07] We're going to clone that to our local machine by typing git clone and pasting the address, git@github.com:ryancharris/nftix-demo-ui.git. Now, we'll navigate to that directory, cd nftix-demo-ui. We will install our Node modules by running yarn install.

[0:32] Let's open the repository in VS Code by typing code. At the root of the project, let's add a file for our environment variables, .env.development.local. We only need to add one environment variable for now, and that's REACT_APP_CONTRACT_ID. We'll set it to the address of our smart contract on the Rinkeby network.

[0:58] Now, we can go back to our terminal and run yarn start to spin up the development server. Then, if we open the browser, you can see our pre-built UI.

[1:07] In review, we've cloned this repository from GitHub, installed its Node modules, added an environment variable, and spun up a local development server.

https://app.egghead.io/api/v1/lessons/react-set-up-a-react-dapp-from-a-starter/transcript

https://app.egghead.io/api/v1/lessons/react-support-metamask-connections-to-a-react-dapp/subtitles

Instructor: [0:00] For users to connect their metamask extension to our application, we need to wire up this connect button. Let's go to VS Code. In the connect component, let's add a new function called connectWallet. Const connectWallet equals async.

[0:16] In here, we're going to check for the Ethereum object on our window, which gets injected by the metamask extension. We'll say const Ethereum equals window. If not Ethereum, then we'll just return early. Next, we'll add a try block, try catch.

[0:41] In the try block, we're going to make a request to the metamask extension to give us access to the accounts it manages. We'll say const accounts equals await Ethereum.request. This takes an object, and we'll add the method field with a value of ETH request accounts.

[1:06] Well, we could store the account information in this component using useState. We want to elevate this to our parent component app. Let's open it. Here, we'll import useState from React. Import useState from React. We'll come down below and add a new state value.

[1:28] Const address, setAddress equals useState. Right now, we'll set that to null. We'll add a new prop to our connect component, call it onConnect. We'll make it a function. The connect component is going to return to us the wallet address. We'll say, address here.

[1:52] Then inside the function, we'll call the setter function, setAddress, and set it to address. We'll also pass the value of address as a prop to connect, address equals address. We'll also log out the value of address here, console.log address, address.

[2:16] Back in connect, we now need to update our props here. We're getting an address and an onConnect function. We want to update our connectWallet function as well. Accounts is a list of addresses managed by the metamask extension.

[2:31] We'll just take the first one by default, onConnect, and we'll pass that accounts zero. Lastly, we just need to wire up the connectWallet function to our button, our connect button here. We'll say, onClick equals connectWallet.

[2:50] If we come to the browser and open our console, you'll see the address is null. If we click connect, it'll ask us if we want to connect our metamask wallet. We'll say, yes, connect. Now we have a wallet address here in our console.

[3:05] To review, we connected our metamask wallet to our React app using the connectWallet function, and the Ethereum object on the window.

https://app.egghead.io/api/v1/lessons/react-support-metamask-connections-to-a-react-dapp/transcript

https://app.egghead.io/api/v1/lessons/react-disconnect-metamask-from-a-react-dapp/subtitles

Instructor: [0:00] Let's add a new button so users can disconnect their metamask wallet from our application. First, we're going to come into our connect component. Below connectWallet(), we'll add a new function, constDisconnectWallet().

[0:14] Unlike the function above, there's no programmatic way to disconnect our wallet. We're going to simulate a UX scene in many other DApps. Let's go up to our app component and come down to our connect component here.

[0:27] We're going to add another prop and we'll call it onDisconnect. OnDisconnect =. This will be a function. We want to set the address in our local state back to null. We'll say, set address = null.

[0:44] If we go back to connect, we can add the new prop onDisconnect, come down to the disconnectWallet() function below, and call onDisconnect. As a nice-to-have, we're also going to come to the top of the file and import useNavigate from React Router. We'll do import { useNavigate } from 'react-router-dom'. Then in our component, const navigate = useNavigate, which will allow us to reroute users.

[1:18] If we come back down to the disconnect function, after we disconnect the wallet, let's also navigate the user home by saying navigate home. Lastly, we should update our UI state to reflect whether or not a wallet is connected.

[1:33] Come down below. First, let's hide the connect button if a wallet is already connected. We only want to show this if we do not have an address coming in as a prop. In its place, let's render some new markup. When we have an address, a user sees an indication they're connected.

[2:00] Here, we'll show a common shorthand for wallet addresses. The first six characters, and then the last four. Outside of this box here, we'll want to conditionally render our disconnect button. We'll say, if we have an address, meaning we're connected, let's render a new box.

[2:18] Inside of it, we'll have a disconnect button and set its onClick callback to be the disconnect wallet function we added earlier. OnClick = disconnectWallet.

[2:32] If we come to the browser and if we click Connect, say yes, you can see we now have our wallet address being displayed and a Disconnect button. If we click Disconnect, we now see the Connect button.

[2:47] To review, we added an onDisconnect prop to our connect component, which resets the address value in our component state and simulates a disconnected wallet.

https://app.egghead.io/api/v1/lessons/react-disconnect-metamask-from-a-react-dapp/transcript

https://app.egghead.io/api/v1/lessons/react-cache-a-metamask-wallet-address-in-localstorage/subtitles

Instructor: [0:00] Right now, if a user refreshes the browser when connected, it seems our application has lost the connection. Let's improve this user experience by caching the value in local storage.

[0:11] The first thing we're going to do is come to our onConnect callback here for our connect component. We're going to say window.localStorage.setItem. We're going to call this item nfTicksAddress, and we'll set its value to address.

[0:28] In our onDisconnect function, we want to do the inverse. We'll say, window. localStorage.removeItem, and pass it the same item name, nfTicksAddress. Let's come to the top of the file and import { useEffect } from 'react'. Come down below. We'll add a new effect, useEffect.

[0:54] We'll add address to the dependency array, since we only want this hook to run when the address changes. Inside, let's add a conditional. If not address, then let's look for one in local storage.

[1:08] We'll say const previousAddress = window.localStorage.getItem("nfTicksAddress"). If we don't have address set in our local state, but we do have previous address and local storage, let's set that to our local state. If previousAddress, set address to the previous address.

[1:38] If you come back and refresh and connect again, you'll see we no longer lose the address in our UI when we refresh the browser.

[1:48] To review, we've used local storage in the browser to cache the connected metamask wallet's address.

https://app.egghead.io/api/v1/lessons/react-cache-a-metamask-wallet-address-in-localstorage/transcript

https://app.egghead.io/api/v1/lessons/react-connect-a-react-dapp-to-a-smart-contract-using-ethers-js/subtitles

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.

https://app.egghead.io/api/v1/lessons/react-connect-a-react-dapp-to-a-smart-contract-using-ethers-js/transcript

https://app.egghead.io/api/v1/lessons/react-fetch-the-owner-s-wallet-address-from-a-smart-contract/subtitles

Instructor: [0:00] Let's see if the current wallet address, connected to our React application, also owns our smart contract. Come down below in our app component and add a new effect hook, useEffect. In the dependency array, we'll add address and connected contract.

[0:19] Inside the scope of the hook, we're going to define a new asynchronous function and say const check isContract owner equals async. Inside the function, we'll make sure we have both an address and a contract.

[0:36] We'll say, if not address, or if not connected contract, return early. Below that, we'll add a new variable, const owner address. Set it equals to await connected contract.owner. This function is provided to us by the Ownable class in OpenZeppelin, and will return to us the address that owns this smart contract.

[1:06] Below here, we'll compare both our address and the owner's address. We'll say, if address.to lowercase = = = owner address.to lowercase. Before proceeding, we'll need to add a state variable above.

[1:24] Say const isOwner, set isOwner, set that to useState, and make the default value false. We can also log that out below. Console.log isOwner, isOwner. Then we come down below and inside our if-statement.

[1:47] If the connected address matches the owner address, we can say set isOwner is true. Otherwise, we'll say that set isOwner is false. Below the function definition, but still inside of the hook, we want to call this function to make sure it fires. Check isContract owner.

[2:08] If we come to the browser and open the console, you can see that isOwner is set to true, but we only want owners to be able to access check-in and settings. Let's disable these pages for non-owners. Come back into React. We'll go down to our menu items. Here's check-in.

[2:26] We'll disable this, isDisabled, whenever the user is not the owner of the contract, so isOwner. Copy and paste that and do the same thing for the admin below. Back in the browser, you can see the current user can access all of these things because it owns the smart contract.

[2:46] If I were to disconnect and reconnect with a different wallet, account two instead, you'll see I can only access the buy in your ticket pages because I do not own the smart contract.

[2:57] To review, we added an effect hook that calls our smart contract to fetch its owner's address. We then compare this to the wallet address connected to our React app and then limit it access to certain menu items for non-owners.

https://app.egghead.io/api/v1/lessons/react-fetch-the-owner-s-wallet-address-from-a-smart-contract/transcript

https://app.egghead.io/api/v1/lessons/react-open-and-close-an-nft-sale-from-a-react-dapp/subtitles

Instructor: [0:00] Next, let's wire up the Open Sale and Close Sale button in our app's admin panel. First, we'll go down below to our route components, and here's admin. We're going to pass in two props, isOwner and connected contract. Next, we'll go into the admin component.

[0:19] We'll update our incoming props, isOwner and connected contract. Below we have two buttons, which we can disable if someone's not the owner, just in case a non-admin were to access this page. I can say, isDisabled equals not isOwner.

[0:38] Copy and paste that, and do the same for the Close Sale button. Then we'll get the Open Sale button and onClick callback, onClick equals open sale. We'll come above to find a new asynchronous function, const open sale equals async. Inside the function, we'll add a try block, try catch error. If we receive an error, we'll just log it out for now, console.log error.

[1:06] Inside the try, we'll check to make sure we have a connected contract before doing any more work. If not connected contract, then return. Below, we'll create a new variable. Let open sale transaction equals await connected contract.open sale.

[1:27] Below, we'll add another await statement to wait for the transaction to resolve, await open sale transaction.wait. Then we'll go to the top of the file and import useState from React. Import useState from React.

[1:45] Come down below and say, const open sale transaction pending, set open sale transaction pending. We'll set it to useState false. Then inside of our openSale function, we'll set open sale transaction pending to true.

[2:06] When the transaction resolves, we'll copy and paste this and set it back to false. If an error is thrown and we end up in the catch block below, let's just set it back to false as well.

[2:15] If we go down to the buttons, we can add a loading state to our Open Sale button, isLoading equals open sale transaction pending. While this transaction is pending, we also want to disable the Close Sale button.

[2:30] We'll come down here and update the isDisabled statement to say, or open sale transaction pending. We also want to give users a better indication of whether or not their transaction succeeded or failed.

[2:42] Let's go back to the top of the file. I'm going to add a new import here and say, useToast. Then I'll come back into our component and say, const toast equals useToast. Then we'll come back down to our openSale function.

[2:58] When the transaction is successful, we'll add a new success toast. Toast, we'll make the status success. The title will be "Sale is Open." We'll use the subtle variant and add some markup for the description.

[3:14] Let's add a link here so users can easily check out the transaction on Ether scan. We'll say, a check out the transaction on Ether scan. We'll link to Href equals https Rinkeby.EtherScan.IO/transaction.

[3:37] Then here we'll interpolate the transaction hash and we'll say open sale transaction.hash. We'll also make the target blank, and set the Rel to no follow, no refer. Now let's do the same for the Close button.

[3:55] Come down below. We'll add an onClick callback to the Close button. OnClick equals close sale. Come back up to the top. Add a new asynchronous function, const close sale equals async.

[4:11] Then inside, we're going to do a lot of the same things we did in the openSale function. We'll make a try block, add a catch, log out the error. Up here, we'll check that we have a connected contract again.

[4:26] If not connected contract, then return early. Create a new variable. We'll say, let close sale transaction and set that to await connected contract.close sale. Then we'll wait for the transaction to resolve.

[4:46] Await close sale transaction.wait. We're also going to need to add another loading state. We'll come up above. We'll say, const close sale transaction pending, set close sale transaction pending. We'll set that to useState false.

[5:09] Then we can come down to our closeSale function, just like before. In the try block we'll say, set close sale transaction pending is true. Copy and paste that. Once it resolves, we'll say it's no longer true, as in, it's false.

[5:25] We'll do the same in the catch block. Let's add toast notifications here as well. We'll come down to the openSale function.

[5:31] We'll copy and paste the success toast and paste it in close sale. This time we'll say, sale is closed. We'll provide the same link to Ether scan. However, it won't be open sale, it'll be close sale transaction. While we're at it, let's come down to the catch block.

[5:51] We can add another toast notification for when the transaction fails. We'll just have it say failure, and log out the error as the description. The status will be error. We'll come down to open sale and do the same thing.

[6:02] Inside the catch block, when the transaction fails, we'll show a toast. Then we can come back down to our buttons and add a loading state for the close sale button, isLoading equals close sale transaction pending. When this is true, we also want to disable the Open Sale button.

[6:21] We'll come up and say, disabled equals not isOwner or close sale transaction pending. If we come to the UI, we click Open Sale and confirm the transaction in metamask, we see we have a loading state and a disabled Close Sale button. There's the toast notification.

[6:39] If we try the same thing with close sale, confirm the transaction in metamask, we have a loading state and a disabled Open Sale button. There's the success notification.

[6:48] In summary, we were able to use our connected contract instance created with Ethers and call smart contract functions based on user interaction in our React app. Specifically, a contract owner can open or close our ticket sale.

https://app.egghead.io/api/v1/lessons/react-open-and-close-an-nft-sale-from-a-react-dapp/transcript

https://app.egghead.io/api/v1/lessons/react-fetch-mint-info-from-a-smart-contract/subtitles

Ryan Harris: [0:00] This UI is missing some information about how many tickets are available and how many have sold. Let's fetch that data from our smart contract and render it here below the Buy Ticket button.

[0:10] First thing we're going to do is come into VS Code and pass a new prop to our buy component, connectedContract = and we'll pass it our contract instance, connectedContract. Then we'll open our buy component and add our new prop, connectedContract.

[0:30] This component will need to store some local state. Let's come to the top of the file and say import { useState } from 'react'. Then we'll come back down into the component and add our first state variable, const totalTicketCount, set totalTicketCount = useState(). We'll set it to null for now.

[0:57] Below, we'll add another state variable, const availableTicketCount, set availableTicketCount = useState(). We'll set this to null as well.

[1:11] Let's add two functions to fetch these values from our smart contract. First, we'll say const getTotalTicketCount = async. Inside the function, we'll add a try block with a catch. For now, we'll just log out the error console.log(error).

[1:34] Here, we'll add a new variable. We'll say const count = await connectedContract.totalTicketCount. Then we'll convert that value to a number and set it to our local state, set totalTicketCount to count.toNumber. We'll add a similar function above, const getAvailableTicketCount = async.

[2:05] Inside, we'll also add a try block, try catch (error) { console.log(error) }. Here, we'll instantiate another variable called count const count = this time we'll say await connectedContract.availableTicketCount. Then we'll do the same thing. We'll set our local state, set availableTicketCount. We'll pass it count.toNumber.

[2:40] We'll add an effect hook to our component, useEffect. Inside, we'll make sure we have our contract. If ! ConnectedContract return. Otherwise, we want to call both of our functions, getAvailableTicketCount and getTotalTicketCount. Since those functions are already set in our local state, we can just come down below to our markup.

[3:09] Below our button group, we'll conditionally render some text and only show it when we have an available ticket count and a total ticket count. We'll say availableTicketCount && totalTicketCount. If we have both of those, then we'll display some text.

[3:30] Inside the text, we'll display our state values. We'll say availableTicketCount of totalTicketCount have been minted. We'll save. If we come to the browser, we can now see it says 10 of 10 minted because none of our tickets have been sold.

[3:48] If I click the Buy Ticket button and confirm the transaction in metamask, you can see the success notification and that our UI has updated to say 9 of 10 minted.

[3:59] To review, we fetched two values from our smart contract, saved them in our component state, and then conditionally render them inside of our UI.

https://app.egghead.io/api/v1/lessons/react-fetch-mint-info-from-a-smart-contract/transcript

https://app.egghead.io/api/v1/lessons/react-mint-an-nft-from-a-react-dapp/subtitles

Instructor: [0:00] Currently, our Buy button is not connected to our smart contract. Let's wire it up to mint an NFT when a user clicks on it. First, we'll come into our buy component and add a new function. We'll call this function buyTicket, const buyTicket equals async.

[0:20] We'll add a try catch block, try catch error console.log. Then here we'll check that we have our connected contract again. If not connected contract, just return early. Otherwise, we'll create a new variable called buy transaction.

[0:41] Const buy transaction equals await connectedContract.mint. Unlike our other contract function calls, we're going to pass this an object with a field of value. Our NFT tickets are going to be .08 ETH. However, we need to represent this value in Gwei. We'll multiply it by 10 to the 18th power.

[1:07] Then we'll wrap this value in a string. Come down below and we'll wait for this transaction to resolve, await buy transaction.wait. Then we'll want to add toast notifications for when transactions succeed or fail. Come up to the top of the file, import useToast from Chakra UI.

[1:29] Come back down into our buy component. Say, const toast equals useToast. Then we'll come back down to our function and add a success toast after the transaction succeeds. We'll paste in a toast notification we used earlier.

[1:46] It's a toast with the title of success, and the description is a link to the Rinkeby block explorer. We'll also add an error notification to the catch block. One last thing we want to do before trying this out is add a loading state for our button.

[2:00] We'll come up to the top of our file and add a new state, const buy transaction pending. Set buy transaction pending equals useState. We'll set it to false. Then we'll come down to our function, buyTicket. Inside of the try block, we're going to say, set buy transaction pending.

[2:22] We'll set it to true. Then once the transaction resolves below, we'll set it to false. We'll come down into the catch block and set it to false there as well. Let's go down to our markup and find the button. We'll add a loading state, isLoading. We'll set that to buy transaction pending. We'll also give the button an on-click prop and set that to buy ticket.

[2:52] If we go into the browser and click Buy Ticket, we see we're prompted by metamask and it tells us it's going to cost .08 ETH to mint this NFT, as well as the estimated gas costs. We come down and click Confirm. You can see our button is in a loading state.

[3:09] You can see the success notification. If we click the link and go to Ether scan, we can see details about this transaction, its hash, it was a success, our contract address, our token symbol, and the value of .08 Ether.

[3:29] If we go to OpenSea Testnets and check out our wallet, you can see we now have a new NFT called NFTicks with the token ID of one.

[3:38] In summary, we added a new buy ticket function to our component, added it as the onClick callback for our Buy Ticket button. Then minted a new NFT by sending .08 ETH from our metamask wallet to our smart contract.

https://app.egghead.io/api/v1/lessons/react-mint-an-nft-from-a-react-dapp/transcript

https://app.egghead.io/api/v1/lessons/react-scan-an-ethereum-wallet-s-qr-code/subtitles

Instructor: [0:00] Now that users can mint an NFT ticket, we need a way for them to check-in at the event. To simulate this, we're going to scan the QR code from my mobile wallet using my webcam. Let's start by importing our QR Reader. Import QR Reader from React QR Scanner.

[0:19] We also need to import box up here. We'll be using it later. This component's going to have local state. Let's import useState from React. Inside the component, we'll add a new state variable, const show scanner, set show scanner equals useState. We'll set it to false to start.

[0:43] Then we're going to come down into our markup. We're going to add a conditional render here. When show scanner is set to true, let's render a box and inside of it, our QR Reader. Let's quickly give the box some styles and set some default props on the QR Reader.

[1:04] Then let's come down to the Scan QR button and add an onClick callback. We'll pass an anonymous function. Inside of it, call set show scanner and set it to true. Now that users can see the QR Scanner, we want to wait for them to hide it as well.

[1:24] What we're going to do is we're going to take this flexbox with our current Scan QR button and copy the whole thing. Then we'll come above into our show scanner conditional render. Right below the QR Reader, we'll paste this button.

[1:39] However, we need to wrap these two adjacent elements in a fragment. Here, instead of teal, we'll want a red button. We'll want it to say cancel. Instead of set show scanner to true, we want it to be set show scanner to false.

[1:57] If we come into the browser, we click Show QR Scanner, you can see me. Now there's a Cancel button. When I click it, you'll no longer see me. Now that we have this working, let's add some conditional rendering.

[2:09] We'll come down below and we'll hide the button when the scanner is showing. When we don't have the scanner on the page, let's render out this flexbox and the button inside. We'll also want to hide this helper text when the scanner is showing.

[2:25] Let's come up above and wrap this text block and say, not show scanner. Move the text inside of the block. Save. Back in the browser, when I click Scan QR, all you see is me and the Cancel button. When I click Cancel, you can see the Scan button and the helper text again. With that working, let's try to read some QR codes.

[2:51] We'll come down to the QR Reader. We'll give it two new props, on error and on scan. When the scanner fails to read a QR code, we'll get an error here. We'll just log that out. When it reads a QR code successfully, we receive data, which we'll log out as well.

[3:15] If we come into the browser and open our console and click Scan QR, I'm going to scan the QR code from my mobile wallet. In the console, you can see our error log.

[3:27] Above, we're logging an object with a text field whose value is prepended by Ethereum: followed by my wallet address. Back in our component, we're going to add a new local state to persist this value.

[3:39] We'll come to the top, const scanned address, set scan address equals useState, which will default to null. Then down in our callback function, we need to clean up our string a little bit here before we save it to local state. We'll say, const address equals data.text.split.

[4:04] We'll split on Ethereum: . This will return us an array of two items. We'll set our state by saying set scanned address. We'll set it to the second index of address, address one. We'll also want to add some user feedback here. Let's go to the top of the component and import useToast.

[4:24] Come in to the component, say, const toast equals useToast. Come back down to our callback function. We'll add a success toast. It'll have the title captured address. The truncated address string is the description with the success styling.

[4:43] While we're here, let's also add a toast to the onError callback function. We'll say that the title is failure and the description will be error. To avoid repeat scans and notifications, let's hide the scanner whenever we have an error or a success.

[4:58] In the onError callback we'll say, set show scanner. Make that false. Then we'll copy and paste that and come to the onScan callback function, and do the same thing. To be safe, at the top of the function, let's just say, if we don't have data to return early.

[5:16] If we go back into the browser and click Scan QR, scan my mobile wallet address. On success, you can see we no longer see the scanner.

[5:24] To review, we captured a user's wallet address by scanning their mobile QR code using React QR Scanner. Then we persisted the value to our local component state.

https://app.egghead.io/api/v1/lessons/react-scan-an-ethereum-wallet-s-qr-code/transcript

https://app.egghead.io/api/v1/lessons/react-confirm-a-wallet-owns-an-nft-in-a-smart-contract/subtitles

Instructor: [0:00] Let's add a way to confirm that a wallet address owns one of our NFTs. To do that, we're going to need to update our smart contract and redeploy it to Rinkeby Testnet. Back in our solidity file, let's go to the bottom here.

[0:13] We're going to define a new function, say, function confirm ownership. This is going to receive a wallet address. We'll call it Addy for now. This is going to be a public view function that returns a Boolean. Inside, we'll set the return value.

[0:30] We're going to take the holder token IDs array from our contract state and grab the value whose key matches our address, Addy. Because this value will be an array of token IDs, let's just check that its length is greater than zero. Meaning this address owns an NFT ticket.

[0:48] Before we jump back to the UI, we need to redeploy the contract to Rinkeby. We'll say, yarn deploy network Rinkeby. Once the contract has been deployed, it's important we do two things in our UI repo.

[1:03] First, we need to copy and paste this address into our environment variable file. Second, we need to copy our ABI file, this NFTicks booth JSON to our React app. I'm going to grab this, copy and paste it, go to our UI.

[1:19] I'll open NFTicks booth JSON, remove its contents, and paste the new one. Save it. Open my environment variable file and then paste the new smart contract address. With all that up to date, let's come into the app component.

[1:32] We'll come down to our routes and pass connected contract into our component as a new prop. Let's open check-in. Here we have a new prop called connected contract. We're also going to want to add a new effect hook to this component. We'll import useEffect from React.

[1:53] In the component below, we'll come down and add our new hook, useEffect. For our dependency array, we'll say that whenever the value of our connected contract, or the scanned address change, that we want this hook to run.

[2:08] Inside the hook, we're going to define a new asynchronous function, const confirm ownership equals async. Inside the async function will be a try block with the catch. We'll take the error and just log it out for now.

[2:28] Inside the try, let's confirm we have our connected contract in the first place because if we don't we can't do anything here. We'll return early. Otherwise, const res equals await connected contract.confirm ownership. We're going to pass it the scanned address we got from the QR Reader.

[2:49] Since this is a read-only operation, we do not need to wait for the transaction to resolve. We can just console.log res. Below, inside of the scope of the hook, but outside of the scope of the function, we'll say,

[3:02] If we have a scanned address, let's call confirm ownership and confirm whether this wallet address owns an NFT ticket. If we come into the browser, open the console, scroll down, click Scan QR, and then I scan my mobile wallet QR code. You can see we have a new log that says false.

[3:25] If we close the console, come into the admin panel, open the sale. Go to buy and mint a new NFT ticket. Then go to scan our QR code again. Now it says, true. Back in our component, let's add a new state variable to keep track of this, const has ticket, set has ticket equals useState false.

[3:58] Then we'll come down below into our effect hook. If we receive a value back from the smart contract, we'll say, set has ticket is equal to res. Lastly, let's come down to our markup and add some more conditional rendering.

[4:14] First, let's add a new conditional block and say, if we're not showing a scanner and we have a scanned address and it owns a ticket, let's render out a new text block. We'll have it say, "This wallet owns a NFTicks." We're also going to wrap this in a fragment.

[4:34] Right below the text, we're going to run our new flexbox. Inside, we'll add a button. We'll give it a label, Check-in, and set the size to large. Let's come down to this block that renders when the scanner isn't showing and add some nested conditional rendering.

[4:52] First, we're going to wrap everything in a fragment. Then we're going to add a conditional block here and say when we're not showing a scanner and we don't have a scanned address, let's display this block of text. Below that, we'll add a second block.

[5:07] When the scanner is not showing we have a scanned address, but it doesn't own a ticket, let's add another text block. We'll have it say, "This wallet does not own a NFTicks. Please try again."

[5:25] Finally, we'll add a third conditional block and say that regardless of whether we have a scanned address or not, if we don't have a ticket, let's render another button to allow the user to try again.

[5:36] Add a flexbox. Inside, it will add a button that'll say, Scan QR. It will be size large. We'll also need to give the button an onClick, which will take an anonymous function and set show scanner to true. Since we don't need two scan QR buttons, we'll come down below and remove the duplicate.

[6:05] If we go to the browser, I'll scan my QR code again. You can see it says, "This wallet owns an NFT." If I refresh, then this time scan the QR code of a different wallet, you'll see it says, "This wallet does not own a ticket. Please try again."

[6:24] In summary, we added a new function to our smart contract and then updated the contract address and ABI file in our React application. We also added an effect hook that will call our smart contract to confirm whether or not the scanned wallet address owns one of our NFT tickets.

https://app.egghead.io/api/v1/lessons/react-confirm-a-wallet-owns-an-nft-in-a-smart-contract/transcript

https://app.egghead.io/api/v1/lessons/react-upload-static-assets-to-ipfs-with-pinata/subtitles

Ryan Harris: [0:00] In our current smart contract, we're hard coding the image value in our metadata by defining this SVG here. On the right, I have a new ticket image and collectible that I want to use instead of our placeholder. However, due to the file size limitation of smart contracts, we'll need to host this somewhere.

[0:18] We're going to use Pinata to upload our static assets to IPFS, otherwise known as the Interplanetary File System. Let's come into another tab. I'm already logged in, and you see we have an Upload button. We'll click that. Pick file, select a file. The first one I'm going to do is our collectible here.

[0:38] Now, if I come down below, you can see we have DD collectible, we can see it. We also have a CID number here which we're going to use later. Let's also go ahead and upload our ticket file. That one's called ddticket.svg. Upload and we have that as well with its own unique CID. Now that both of these images are hosted on a decentralized platform, we can use them in our NFT metadata.

[1:06] To review, we uploaded two static images to IPFS using Pinata, which we'll use in our smart contract.

https://app.egghead.io/api/v1/lessons/react-upload-static-assets-to-ipfs-with-pinata/transcript

https://app.egghead.io/api/v1/lessons/ethereum-update-an-nft-s-image-and-other-metadata/subtitles

Instructor: [0:00] We're going to update our smart contract to allow users to check-in and change the image on their nft when they do so. The first thing we're going to do is add a new map, mapping. We'll map an address to a Boolean. Make this public. Call it Check-ins.

[0:16] Then we're going to come down below and we'll just add a new function, function check-in, which will receive an address that we'll call Addy. This will be a public function. Inside, we'll say check-ins Addy equals true. Next, let's update our NFT's images.

[0:36] We'll come down to the mint function here. Since we're using images hosted on IPFS, we can remove all of this. Inside the JSON block, we'll update the image field inside of our metadata. We'll change the value to IPFS://the CID number of the image. Let's copy the JSON blob, then these two lines down here as well. We'll paste this into our check-in function.

[1:11] Below, we can remove safe mint because we're no longer minting a ticket, we're just checking one in. Here, we'll use a different CID number to point at our collectable image. Then we'll come above and add a new variable. We'll say UN-256 token ID equals holder token IDs.

[1:34] We'll use the index Addy and we want the first index, so we'll say, zero. In the JSON below, we want to maintain our current token's ID. Let's take this newly created variable and use it below. Instead of using the counter value, we'll just use the token ID here.

[1:51] Then in our traits, we'll find the trait type of checked in right here. We'll actually change the value from false to true because the user has now checked in at our event. If we come back into our terminal, we can redeploy to Rinkeby Testnet. Yarn deploy--network Rinkeby.

[2:12] Once the contract is deployed, we'll head back to our UI. In our UI code, we need to update our environment variable to point out our new contract's address. We also need to get rid of our old ABI file and replace it with our new compiled code.

[2:28] Let's come into our check-in component. We're going to come down below and add a new function, const check-in equals asynchronous function. Inside, we'll add a try block with a catch error. We'll console.log error.

[2:47] Inside the block we'll say, if not connected contract, then return early. Otherwise, we're going to say const check-in transaction equals await connected contract.check-in. We'll pass it our scanned address.

[3:08] Then below we'll say, await check-in transaction.wait. We wait for the transaction to resolve. Above, we'll add a new state variable, const check-in transaction pending, set check-in transaction pending equals useState false.

[3:31] Back in our check-in function we'll say, set check-in transaction pending is true. Then when it resolves, we'll say it's false. We'll do the same thing in our catch block. Lastly, let's add some toast notifications for success and fail.

[3:51] Come down here and paste a toast notification. Instead of buy transaction, this is going to be check-in transaction. Then we'll come down below into the catch block and do the same thing. Except this time the toast will say failed.

[4:05] Let's come down into our markup and wire up the button. We'll say onClick equals check-in. We'll add a loading state, isLoading equals check-in transaction pending.

[4:21] Then if we come back into the browser, go to Settings, and open the sale, we can then go and mint a ticket. Once the transaction is resolved, we can go on our account on Rarible and see our new NFT with our image from IPFS.

[4:42] Then back in our app, let's go to actions, check-in, click Scan QR, quickly scan our Mobile Wallet address, and then click Check-in. We'll confirm that in metamask. We can see the transaction was successful. Let's go back to Rarible.

[5:02] If we refresh the page, we see our new collectible image, that our title still has the same token ID number. Below, in our properties, checked in is set to true.

[5:13] To review, we added a check-in function to our smart contract and changed the image on an NFT when a user checked into the event.

https://app.egghead.io/api/v1/lessons/ethereum-update-an-nft-s-image-and-other-metadata/transcript

https://app.egghead.io/api/v1/lessons/react-display-a-user-s-nfts-using-the-opensea-api/subtitles

Instructor: [0:00] Let's add a way for connected users to see the NFT tickets in their wallet. We'll come down below to our menu items. Find wallet. Add a new prop, isDisabled equals not address. That way this menu item will be disabled when we don't have a connected user.

[0:18] We'll also come down below to our routes and add a new prop to our wallet component. Say, address equals address. Then we'll go to our wallet component, add our new prop address, and import useEffect from React.

[0:38] We'll also import Axios because we're going to be calling the OpenSea API. Import Axios from Axios. Then we'll come down below and add a new effect hook, useEffect. We'll add address to the dependency array so that this always runs when that value changes.

[1:02] Inside we'll say, if not address, return. Otherwise, we're going to call Axios.get, and paste the URL to the Rinkeby API. We need to add a couple query parameters. First, we'll say, owner equals $address.

[1:22] We get a list of assets owned by the connected user. Then we'll add asset contract address process.mf.react app, contract ID. Next, we'll add a then block, take the response, and log it out.

[1:45] We'll also add a catch block, take the error, and log that out as well. Then we'll go to the browser and go to your tickets. You can see our placeholder text here.

[1:57] If we open the console, you'll see we're logging an object, which contains data from the OpenSea API. Back in our component, we're going to import useState because we want to add two new state variables here.

[2:10] First, const loading ticket, set loading ticket equals useState false. We'll also add, const ticket, set ticket equals useState null. Let's come back into our hook.

[2:32] Then let's come into the then block and add a little logic here to parse the response. We'll say, if res.status equals equals equals 200, and res data assets exists, and res data.assets has length.

[2:52] Let's set our ticket to res.data.assets, and we'll take the first index. At the top of the block, we'll set loading ticket to true. Below, we'll set loading ticket to false.

[3:10] In the catch block, we're going to do the same thing and say, set loading ticket is false. Let's come up above and import a few things from Chakra UI. I'm going to paste these, and we'll come down below to our markup.

[3:28] We're going to add a loading state. We'll say, loading ticket. Then we'll add a circular progress bar. Below, we'll wrap our text here in a conditional block and say, when we're not loading a ticket, and we don't have a ticket.

[3:44] Let's display our placeholder text. Then in a third block we'll say, when we're not loading a ticket, but we have one, let's run a function called create ticket display. Then we'll come up above here.

[4:00] We'll say const create ticket display equals a function. In the function, we'll check to see that we have a ticket. We'll say, if we don't have a ticket, let's just return null.

[4:15] Otherwise, return this markup, which is essentially a link that takes the permalink and ID from the OpenSea API data. Then inside the link, we interpolate the token ID here in this text block.

[4:31] We also display the image provided. Then if we go into the browser and refresh our page, we can see our NFT ticket. In summary, we used Axios to call the OpenSea API to fetch and display data about the connected user's ticket.

https://app.egghead.io/api/v1/lessons/react-display-a-user-s-nfts-using-the-opensea-api/transcript

Build an NFT Based Ticketing System

Ryan Harris

Credits

Course Content