Scan an Ethereum Wallet's QR Code

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.