Build your first DAPP with React, Solidity and MetaMask [workshop] by Eric Bishard (@httpJunkie)

Transcript

how's everybody doing all right my name is Eric Bouchard I'm the metamask devrel manager and today we're going to be doing a workshop for the next about hour and a half it's a two hours and we're going to be building a full stack react truffle mono repo kind of starter application that you can take home with you and would be a good starter for any web3 dap that you're building again my name is Eric Bouchard um some of you guys might know me I've done the eth Dubai conference hosting track one last year web3 Dubai

and uh yeah so I'm very glad to be back here third time in Dubai this year which is great love Dubai so agenda is very simple Who Am I who are you and let's build adapt so you guys already know who I am um one thing I wanted to do real quick was um ask you guys a few questions while I'm asking these questions you can use this tiny URL right here and this will take you to the GitHub repo that has all the code um the way that we're going to do this is I'm going to work through building this dap from start to finish well not really

start we start you at a point where all of the npm uh dependencies and everything already downloaded we're going to walk through building the whole thing the cool thing about this Workshop is if you go to this URL there's a readme there that has all the explanation all the code that you need to walk through the workshop yourself there's also a start and a final Branch so there's two ways you can do this Workshop today one you can code alongside us like I'm going to be doing two is you can passively watch there's really three options two is to passively watch and three is to passively watch while maybe pulling down the repo switching over to the final branch on it and just kind of going over

the code as we go over it but first off I wanted to ask a few questions so if everyone here right now who is a react developer Okay so we've got one two three all right and uh who here doesn't do development at all all right great so those passively watch you'll still learn some stuff maybe you have people that you work with that work with metamask we're going to be going over metamask SDK which is uh a pretty nice little project which allows any dap uh Unity project node.js application react native application whatever to be

able to connect to metamask extension or mobile depending on kind of what platform you're on if you're on web well you can have them connect to metamask extension or mobile if you're on Unity or if you're on iOS you've built a react native application then you're just going to be connecting to the metamask mobile so if you guys have had time to go to this tiny URL I'll leave it up for one more second and I'll just mention that if you want to follow me on Twitter it's HTTP Junkie and that's the same on GitHub telegram Twitter whatever we have a few more people coming in so I would just tell the people that are

coming in that if you want to follow along take a snapshot of this slide I can always come back to it if needed but if that if everyone else has got it at this point we'll go ahead and get started so again we're going to be building a full stack uh mono repo which mono repo just means that you have the web and kind of the blockchain application both within the same GitHub repo and the way that we're going to start it out is we've already got some smart contracts built we'll go over those smart contracts what they mean why we're using them and we're going to be building a on-chain SVG nft ticketing system that just allows you to Mint nfts for us uh

it's it's a Unreal event but let's go ahead and get started so I'm going to go ahead and pull up my console so there's going to be a lot of just coding in this so you might want to be ready for that so here you can see is where that URL would have taken you and I'm going to be coming back to this as a reference but as you're following along you can be following the instructions in this readme so the first thing I'm going to do is I'm going to grab this code here that will pull down the repo and it will switch us into that directory check out the start and then go ahead and install all of our npm dependencies so I'm going

to go ahead and paste that in there the first little bit is going to be slow until we get going and then when I'm done with this I'll go ahead and open up visual studio code give you guys an environment that you're a little bit more used to seeing here and this might take a minute depending on how well the internet is here if you are following along there's some prerequisites here if you want to get started you're going to need to have node.js18 and that will come with npm5 you'll need

a code editor a GitHub account a metamask extension installed knowledge of JavaScript typescript and react is a plus if you don't have that you'll learn a little bit today and also just an eagerness to learn all right so we've got that going here let's go ahead and open up our Visual Studio code editor and then we'll be able to ditch this terminal over here and then of course once we're inside of this repo you'll have the same readme we'll just work off that readme it'll be easy to cut easy to grab code off of so let me blow this up a little bit here and probably increase the font size a little bit

just move things around all right so as we said this is a mono repo um great to give this link to people if you know they're a developer and they're getting started with web3 they want to do everything all everything in one project I've also made some other executive decisions here around how we're going to be running our local blockchain environment so what we've decided to do is just to make it very simple for anyone pulling up this repo to start uh truffle and ganache kind of in the background and also run our web applications so we're using turbo pack which is a great new project which kind of replaces webpack but it's super fast and I can do all of the major

terminal commands right here from the main console and yeah so we're using turbo pack react next JS truffle ganache and with those tools we have a pretty good framework to start building an application really quickly we're going to go ahead and change directories into our web application just to make sure everything kind of works so let's go ahead and run that and we should see the next JS app go ahead and boot up here and we'll open that in our local host and we should see a very simple message let's build in web 3. so good we're good to go there we'll come back to this webpage as we start to

build out our application um we're going to go ahead and kill that terminal and just back up a few directories because like I said we're working in Turbo pack which means we can execute all of our uh all of our commands right here from the root of the project which is pretty nice for developing we'll go over a few things real quick which shows like what's in this blockchain folder so we have a we have our smart contract and we have a few libraries that it uses like hex strings and base64. these are things that when I open up this contract you'll see that we're using basically hex strings just allows you to convert un256 to ASCII strings uh basically

blockchain type data to regular string data and base64 allows us to transform byte32 data into its base64 string representation for saving like Json files I know that's a lot of uh bullcrap but those are really essential packages and libraries that help us out at Big Time in our solidity contract so as we go to our solidity contract we can already kind of see what this thing is doing here right it's yeah solidity's pretty easy to read it's a pretty simple language so far as you can see here we have a total supply of tickets we're keeping track of who the owner is um what what is the max supply of all

the tickets that we want to create for our fictitious event our um our fictitious event is going to be called eth Atlantis because I figured nobody would be starting in eth Atlantis anytime soon and then we're going to have a concept of VIP and general admission tickets which uh for Simplicity in in my contract the the difference between a VIP ticket and a ga ticket is just the price so if whoever's buying this ticket pays point one eighth they get a ga ticket if they're paying 0.2 each they get a VIP ticket now of course you can do that many different ways but for a demo uh and just something to get started this is a pretty cool way of doing it

um we want to know who the wallet of owner is for each nft because in our front end we want to be able to have a couple of minting functions for each ticket so we've got a general admission and a VIP ticket and when they mint those tickets we want the application to actually display any nfts that they've already purchased down there at the bottom of the application and we one of the ways that we do that is we have a function here so we've got our mint function and then we have uh generate nft SVG by token ID which is a pretty long function name but what this does is it takes the same SVG that we're saving on chain and it allows us

to call into this public function to basically pass in a wallet address and we can get all the nfts that that person owns back into an array and then display them on the front end exactly how they're saved on chain the reason we've gone with an SVG on-chain ticket is because for a demo for a workshop it's much easier to get people building especially if they're new to web3 with something that doesn't include ipfs and all this other where they've got to keep track of you know images and upload them to ipfs and pin them and do all this extra stuff so we're getting around that by just throwing that SVG on chain there's better ways to do it but not for a demo

all right so if we go back to our readme here um we can see uh that kind of the next thing we want to do is we want to go ahead and build our project so let's go ahead and get that done real quick so this is just compiling um all of the all of the code that we need to be able to run our project and then the next function that we're going to run will spin up our local version of truffle and ganache so that way we have a way of kind of locally running and testing our code in our contracts and our adap while we're developing so let's go ahead and run that next so this will spin up that side of the application kind of our back end if you will

um and you can see that whenever we have ganache running we have all of these private keys and accounts here so these will allow us to import these accounts into our metamask wallet and it'll give us a hundred test each so that we can build locally and test out our application so we've got that there we're going to go and open up a new terminal and that's where we'll run our Dev and we need to do a few other things really quickly in our metamask wallet to be able to get to a point where we can test this application one is that we need to create a network like a local network that we can hit with our metamask so I'm just going to make this a little bit smaller

and open up our metamask oops let's get that over here and we're going to add our own RPC or our own network so we're going to come down here at the bottom and hit at add Network manually and you might have done this in the past before with like other chains but we're going to do it for our Local Host right so we're going to call it localhost 9545 we're going to put in an RPC which kind of matches that this is actually the more important piece of information our chain ID will be one two three seven Elite dope and then we'll just put in eth as the currency save that and now we have a

local host that we can use to test one thing we need to go do is we need to go grab one of these wallet IDs so I'm gonna go grab this last one here and this will give us all of our kind of local testes that we can used and then once we have that we'll have all of our metamask stuff set up and ready to go so we'll go to import account paste in that private key don't worry it's nothing that you guys even if I showed you that it's nothing you can do anything with it's all local and and cool so now we have that kind of running in the background and we're good to kind of move on with the rest of this so let's move back over to our uh our Dev here and we will also

so we've got our Dev environment up and running it looks like we've got our account address so we'll copy this account address over into this web file here we've got a lib folder with a config and we just need to tell it what that address is and once we paste that in there we're not gonna have to do that again so we've got so now our application knows what contract that we're dealing with and now we can open up localhost 3000 and of course we have this let's build in web 3 and let's make this a little bit bigger so everyone can see it all right and now we get to the fun part which is we're going to start building this thing and it's going to be kind of like uh a speed run here I'm going to do it as quickly as possible because the idea so

some sometimes people are like oh all we're doing is copying pasting code and creating these files but if you do this yourself then you have a really good idea of where everything is and why you're creating these files and what they're used for then if you want to take this home and you want to do something with it um you can walk through this readme you have all the explanation that I'm going to be covering here and you have every single step that'll get you from that starting point all the way to the finishing point I see a few extra people have came in really quick here I'll uh I'll give you this URL one more time so it's tinyurl.com forward slash East Dubai 2023 tinyurl.com eth Dubai 2023 and if anyone needs that again just raise your hand

all right so uh the first thing that we want to do is we want to be able to connect to our metamask it's pretty much the first thing that you're going to do in any dap right so the first thing we want to do is to create um we're gonna be doing a lot of this creating new folders and files so let's create a new folder called styled components if you are a react developer let's spell that right you'll know quite a bit about style components style components are really cool they're it's kind of like a way of [Music] taking your the The Styling that you need for each uh

each function or each component in your react application and kind of creating a function out of it which is pretty cool so we're going to copy this over and we're going to create a new file called navigation.js and this will be all the styling for our navigation let's go ahead and uh do that so as we navigation dot Js and again if you're following along the readme goes right in order of everything that we need to be doing and again that's tinyurl.com 2023 for those that are continuing to walk in next we need to create a general file in here so the general file so that as you

can assume that last styling was for the navigation component or react component but we need some navigation I'm sorry some styling specifically for anything else in the application that can be reused right so these Styles here like the flex container Flex item these allow us to use flexbox to create formatting or layout as well there's a button here that you know we're definitely going to want to reuse the same button in different places we don't want to create a button over and over and over in react so also we want the styling to all be in one place again the cool thing about this styling is you create the styling and the name

of the component that you're going to create with it here you tell it whether it's a div or you could put H1 or span or whatever you want there and it will create a component with that that HTML element as the wrapping component I'm sorry the wrapping uh element on it all right um next we need to go ahead and create our navigation file so this is going to be basically the first react component that we're building here today and this is going to have all of the stuff that we need in order to connect to our metamask so let's create a navigation.tsx page here go ahead and paste that in and take a

look at what we're doing here so I'll also kind of be reviewing this code a little bit right so we're importing those styled components as you can as you remember we had a flex container button Flex item and you can see all of those components here right so again another reason why I love styled components but all of this component really is it's the full navigation view then you've got a flex container inside which allows us to do uh basically like flexbox styling layout and then each side of the navigation so we have a logo side and then we have the side with the metamask button on it so that's going to be our Flex items so as you can see we have a logo on the left hand side which is which just says etholandis again our Awesome event that

we're going to be creating and on the right hand side we have this metamask connect button and of course this is going to get swapped out with something else but let's go ahead and save that so we have our navigation component created uh really nice next thing we need to do is we need to import that navigation item into our main index page which is also going to be our minting page it's kind of serving both purposes for this project in a real project you would probably have several different pages but this is pure demo style here so our index will also be our minting page and you can see we've named that component mint and then also there is that navigation

component that we just created so we have a reference to that that'll be the top thing on our on our page and uh yeah move on right so let's go ahead and close these open up our readme again all right so where are we at now um yeah so what we just did there was we input our navigation and this adds the component to the area that we kind of had reserved for it we should also see uh in the top hand right hand corner that mm connect button but we need to actually put a button there but first we need to do a few other things and I think this is one of the things that I like about this Workshop that I liked creating this for people that are new to web3 is because when you

start using react and metamask and these different tools to start building a web 3 dap great you have the ability to connect to metamask uh that's awesome but what about keeping your application in sync with the state of that wallet what the balances are whether you're connected to that wallet whether you've disconnected to that wallet all of these things are things that we can achieve with react hooks so if you're a react developer you probably know a little bit about react hooks we're going to go create two of them and one's going to be called use listen the other one's going to be called use metamask so we're going to create a new folder in here inside of web called hooks and then inside there we're going to

have let's do use listen first and I'll show you guys what this does as we create it get the dot in there all right so that's not the right one let's try that again all right so this will be the use listen react hook and what is this guy doing um we're going to come back to that in one moment let's go ahead and get the other one created too so the other one is called use metamask and this one's a little bit more involved and this is the file that if if you're trying to track state inside of react you're probably

using react context API um and this portion of code right here took me a while to develop and to kind of uh I guess use the best practices over time so this potentially could save you quite a bit of time as you're developing your dap at least it gives you a nice starting point so that you can have a nice reducer in your application that handles connecting to metamask disconnecting whether or not the page has been loaded whether or not you're in a loading state or an idle State and also having a default state right so we have usually in react context we have

some type of a reducer um we have some initial state that that reducer uses to kind of be a starting point for all of our state and our react application and then we also create this component down here which is a provider and then we're going to go wrap our entire application with that provider so our application has access to all this data that is the state of our wallet in our application so we've got those two files created and then use listen is just keeping track of the balance and dispatching that connect and disconnect function whenever we need to um

so these files respectively listen for changes in the user's connection to metamask and they set up a context provider for sharing the wallet state to the components in our app with those files in place we'll wire up our connect and disconnect uh as so that we can display the very basic balance information for the connected user so we're going to go back to our navigation.tsx file that we just created and we're going to paste in this code and kind of see what we've done differently here and there's quite a bit so there's a lot to go over here again this is all of the information that you're going to need to know just to be able to connect to metamask with our SDK which again lets you connect to either extension or mobile uh and that's pretty easy to do that's

just a few lines of code to instantiate our SDK but if you want to be able to keep that that state in sync in your application then you need to write a lot more code and that's what this is all right so let's start at the top here again we've pulled in some of that basic uh those styled components we have um A dispatch to update our state once we've started using metamask so we're using our use metamask and use listen functions here from our react Hooks and we're setting a few variables called show install metamask or show connect button we want to determine if the user has metamask has it installed or if they're connected already so we need to

have a few variables to be able to to track that information and then we also have like like I said it is connected uh when we connect we want to be able to dispatch sorry we're going to be able to request from ethereum uh using the RPC API into metamask we want to be able to get the balance we want to be able to request the accounts and we want to be able to dispatch our connect uh and then listen from that point on to any changes that that metamask wallet has so that we can continue to update the state in our application and with react that's super easy because with this provider that we have any data that changes in the wallet that we're tracking it's automatically going to get sent to our components and our

components are going to automatically update that's the great thing about kind of having react all of the rest of this is the same as we had before except for in this right nav section where we had that little holder for the metamask button so as you can see here if if we need to show the connect button we're going to do that if we need to show the install metamask button we we're going to do that versus hey we've got a wallet we've got a balance let's show that information because the user's already connected so it's basically only one of these will ever get uh kind of rendered at one point in time based off of the logic that we created uh up here where we determine whether or not they have

metamask installed whether or not they're not connected or whether they've already connected cool so we can move past that navigation and kind of move on to one of the next components that we're doing so at this point uh we would still get an error if we ran our front end because even though we've done all this cool stuff and we've created this cool context provider we have not wrapped our entire application with that context provider so we'll go do that really quick and then we should be able to see some of this stuff working so if we go over to our app.tsx this is kind of where that wrapper is going to need to be placed so as you can see the only thing that we've done here is we've imported this

metamask provider and we've wrapped the rest of our application with it so anything within this component here any component that loads in our application has access to that state and will automatically get updated because react is awesome and it will re-render on the page without us having to do anything else at that point we can probably go back over to our app now and we can see install metamask I don't think we should be doing that yet let's see here [Music] um well we already have a problem so

[Music] um I think it's telling us to install but we've already got it installed so let's try something real quick it's the great thing about demos live demos is things always go wonderfully so let's go ahead and kill that for a moment and then add it back that shouldn't be the problem let's see if we've done anything wrong here so we have our navigation we've got our layout which not Js we update our uh sorry we need to update

our layout didn't finish here I had one more thing to two more things to do here I was getting ahead of myself so let's go over to the layout.tsx um the reason why this is needed is because in a react application we need a kind of a central point to be able to um kind of determine if metamask is already installed find out if there's an ethereum provider already injected and then be able to call listen from another point in our application to kind of bootstrap those things that we just added and then from there we should have just one more thing to do before we can

see our stuff working again I got a little bit ahead of myself so we need to add a metamask sdk.ts file and that's going to be in our our library directory here and we need to add this code so this is what actually instantiates that metamask SDK so again you could have done this just by itself in your react application and you would have been able to connect to metamask uh either the extension or the mobile but again you're not going to be able to be able to track all the state and we have some packages and some features coming out in metamask SDK

where you may not have to write some of this or you might be able to have a component that does some of that stuff for you but um it's a very new uh library and so you know typically I would want to do a lot of that stuff myself anyways because I may not want to be tracking uh all of the state of that wallet so at that point we should have everything working now great there's our connect metamask button yippee so if we go there we should be able to connect after I put in my password Here uh what is it test one two three four [Music] no test one two three four yes test one two three four so now you guys can if you can get my machine you can break into my

um wallet that has nothing in it great so now that we've connected we can see uh what our metamask uh address is we can see how much eth we have I'm super flush with eth right now with a hundred of course that is only local testes so I can't really do anything with it other than buy tickets to my own event that's a fictitious event anyways um but great so we've so what we've done so far is we've created this navigation at the top we've got a cool little logo here and we've got buttons that connect to metamask and even behind the scene you you can't really tell yet but if we were to start spending eth um it gets rounded up but uh if we start spinning ease spending each or if we

were to connect to another wallet or disconnect or any of that stuff our application would already know it would know about it and it would re-render these components automatically and that's a really cool place to be in and now we can actually start to build the the meat of the rest of our app we can build our minting page we can build the display for our tickets so let's get started with that so since our at our app is based on showing the type of tickets available and allowing for the user to Mint those tickets we need to add a few components directly to the index.tx page first thing we need to do is we need to add a few Imports here so on the index.tx page we need to import ether's

library for interacting with ethereum and the tickets component that we'll be creating in just a moment so let's go do that we're just going to paste these right here so now we have those and of course this one's not showing up yet because we haven't created it so we'll go ahead and create that one next um oh we've also got to add this code here so this is what keeps track of our different tickets again we have GA and VIP so we have two different types of tickets on our page and we're going to be posting uh this just below where we instantiate that mint component um all right and then of course we need

to add this tickets right below the navigation so that'll go right here and so this will show up right underneath our navigation and the way that I've styled everything they'll be completely separated um and now we've got it added to this page and I usually do that as I'm developing I'll kind of like create where a component is going to go and then I'll go create that component next so that's exactly what I'm going to go ahead and do so I need to create a tickets.ts x again this is typescript another thing I would mention is that not only are we doing some pretty cool stuff with react state in this application um but we're also using all typescript

and the typescript is pretty solid um I'm sure that if someone was like a really hardcore typescript uh developer they might be able to find some issues with it but uh it's it's it's pretty good so we'll go ahead and create a file here called tickets dot TSX and uh so not only are we using typescript everywhere but we're also using something called type chain which is a really cool npm package that knows about my contract it knows about my solidity contract and I get typing for all of the functions that I might want to call from my front end with uh instead of my react application

into that contract so my my mint function or my generate svgs by token or or by address I get full typing for all that stuff so again this is a great place to start your project because it has all those things built in all those developer productivity things in place um now we also need to create a a styled component right because we don't we can't just have a tickets uh component without some awesome tickets uh styling so let's go ahead and get that in place here and this is just very basic like

background color font color um background padding size height that kind of stuff so it's it's mostly just formatting and with all this in place we should be able to run our dap and we should see those tickets showing up right so boom now we've got this this application it's got eth Atlantis almost a better uh website than East Dubai already so we've got ticket types we've got general admission VIP and then we have these mint mint ticket buttons which aren't going to do anything right now because again in web development in software we've got to build everything before it works we've got the things in place we know what we want it to look like but

those things don't work yet great so we need to add some additional code to our tickets.tsx page allowing us to interact with our smart contract this is some of the most important code right here because if we can't call into that smart contract which by the way I have all that wired up already for you guys in the tickets page we need to add a few Imports uh to the top actually quite a few of them so let's go ahead and do that first um here we go so probably just replace all of this with that and why is this one still not showing up let's just do forward slash tickets oh now it says it's there okay whatever Visual Studio code is weird

sometimes all right so we've got that um so these import these Imports will give us access to our connected wallet State the next JS router is also something that we have uh imported there we've imported our eat tickets Factory created by our build which utilizes type chain we just talked about that we've also got ethers and that allows us to interact with the blockchain so next we need um to add a few more things here we want to be able to deconstruct our uh wallet state from the use metamask function and then we want to pull in that router so that we can refresh the page we can force a Refresh on the page whenever we want to and with that in place we've got most of what we need for the update of

this file all right um we need to oh we need to add the mint yeah mint ticket right so we'll add this in and I'll kind of show you what this is doing so we're going to add that right above what our return statement yeah so right about the return statement we're going to add this function and this is what calls out to our smart contract remember we have a mint nft function public function inside of our smart contract so one thing that we could be doing already as developers rather than putting this function here and hitting it from our front end is we could be using um like one click dap or one of these other tools that allows us to put in our whether it's a test chain address or

whether it's a local address you can either even use the solidity IDE online to do this stuff where you have a contract and then you've got all these cool little buttons to help interact with that we're going to skip right over that because again this is a demo and we're just going to assume that I wrote all this code correctly and then it's just going to work so we call them nft and what does it need it needs uh you know the wallet and the price because that's all it needs to do to minute nft it needs to know who you are based on your wallet and it also needs to know what price uh you're paying for your for your ticket remember point one is a ga ticket point two is a VIP ticket

uh if all goes well we should hit this then function and in fact we should never hit this catch unless something goes wrong with the transaction uh one way we could trigger that catch is to reject the transaction in metamask but we're not going to do that we want it to we want it to hit this then so once the transaction starts happening we want to wait for it because we want to disable any buttons that are on the page right web3 is full of bad ux one thing that you can do to kind of make that better is wait on transactions wait till they're done uh gray things out on the application make it to where the users can't use them until your transaction is finished until you've minted those nfts once it's done we'll set is minting to false so that

we're not in that state anymore and we'll force a reload on the page all right we're really speedrunning this we're making great time here so uh we talked about the async call finally we just need to be able to add a button that will trigger that call so there should be a button down here uh and it's disabled kind of by default and we're going to add this little on click function that knows about that knows how to call that mint ticket and then we've also added this guy right here which is can't mint so this is just a variable that keeps track of um do I not have a wallet available yet or am I not is minting which basically

just means I can't mint right now so if I'm in a state where my application I can't mint it's good ux to go ahead and disable that button so someone can't keep clicking on it and it's doing basically popping up more metamask um dialogues right um so at this point if we're connected to the DAP with metamask wallet that has some eth in it we can test those buttons out so ensure that you have your developer Tools in your browser is open and we could see like the console log there but I think what we're going to do is we're just going to go and try and mint one of those nfts so let's refresh here and we should get that little hand great

that means that it's not disabled we'll go ahead and mint yeah we'll wait for a good price here that looks good all right so we've minted an nft now again ux we've got some really bad ux here we've minted an ft but there is nothing to kind of let the user know that they've minted that nft um I could create another I could do another one right now I could do the general admission I could uh I could confirm this one so now I've minted two nfts again I have no way of really knowing that as a user so I think what we want to do is we want to create a component below that that's called tickets owned and with that component we can render out those

tickets those SVG tickets that we have literally as they exist on the blockchain so let's go ahead and add a new style component here it's going to be called tickets owned dot JS and we will add the style components for that again this is just the styling for that component we've got to do this for every component that we create it's fun and then uh in the index.tsx we need to go uh uh add that final component tickets owned so let's go do that and we're reaching the home stretch here I know that you guys are let's see do we already have that one here oh no we have to add that one underneath

it I'm silly all right so now we've got tickets owned there and it's not imported yet but I can fix that really quickly uh what do you mean no why can't it import it anyways we'll just do tickets owned uh do we do tickets owned oh we haven't created the file yet that's why getting ahead of myself tickets owned let's go create that ticket's owned and we'll put it inside of that tickets folder because everything tickets yeah yeah we still have some we have some stuff to go over here this is a long file but I think you'll like this one so again we want to be able to

take its owned we want to be able to give them a little bit better ux let them know what they've already purchased before go ahead and paste that in there so let's really quickly just run over this what this is right so um we have nft data and tickets formatted these are just some types that we've created so that again as we're kind of working in our application always creating these types to make sure that we get you know all of the uh you know all the cool stuff like this where I can see exactly what this object is um tickets owned right we need to have a ticket collection which is a piece of state that represents all of the tickets

that I own as a wallet owner we also need to be able to get um the wallet address from our use metamask right remember we created that used metamask hook and now we're seeing a component that we've added another component that we've added where we can just tap into that thing and we can we can tap into the state of that metamask wallet um we have a use effect here basically this just means we're doing something kind of from outside of the application and we want to update our application so we are um we're getting a provider assigner uh a link to that Factory and then nft tickets is kind of that is an object that represents our smart contract and we're going to tell it what

contract address It's associated with and then finally tickets retrieved this is where all of those tickets are going to be held it's going to it's a it's a variable it's going to hold all of those tickets that we've already received and we're going to populate that based on calling nft tickets dot wallet of owner right so if we double click on this guys we can see where it's being uh added down here where it's being populated and basically every time that we we have this map function here so every time that we get a ticket that this person owns we're pushing that into this tickets retrieved array and then you know when all of this is done and you can go and take a closer

look at this yourself if you want to we now have this array full of all these tickets finally we want to have a list of those tickets and then we want to kind of populate them in a grid so we've got a grid container and a grid with some nice little formatting here um and with that we should be at a point where we're pretty much done um let's go just kind of make sure that we've got everything we've got tickets owned tickets oh we can go back to our index and and actually update this guy now now it knows what to do with it quick fix yeah let's import that save it go back to our application and look now we've got our tickets down

there they're a little bit big we could probably make them a little bit smaller format a little bit nicer but now if we add a new ticket um we can confirm and now we've got another ticket there right so another cool thing is like if we want to open up our metamask wallet and do something like switch accounts let's go ahead and select another account here and just connect to that notice all this updates automatically right my address is updated the amount of eth I have in this wallet is updated a new wallet is connected notice I have no nfts down here now let's go ahead and change back to our other wallet and just

see that update again boom everything's back so no matter what we do in that metamask wallet if we connect to another account if we have spent some East somewhere else it's going to reflect here we can even open ether scan um so I think with that being said there's a few things I would note here um again a great application I can kind of go back over to our slides real quick just so that you guys have an opportunity one more time to uh take a look uh at this code that we have again my name is Eric I'm with the metamask devrel team um you can find me on on Twitter uh

here's the tiny URL where all this code is again whether you're a web 2 developer that's getting involved with web3 you want to build your first app you want to be able to track the state of your metamask wallet inside of a react application which by the way react is pretty much what ninety percent of everyone in web3 uses especially as they're getting started this is a great place to start it's a mono repo it's got truffle and ganache you can easily switch out and use hard hat or something else with no problem at all right it's super easy to do that we have a thing called truffle dashboard if you want to take uh kind of your you want to be able to push these out to a test net or to net or whatever truffle dashboard is a

really cool thing that I've added extra notes at this URL that can give you some tips on how to use treble dashboard and with travel dashboard you're not locked into Truffle in fact you can use truffle dashboard with hard hat with Foundry and these other tools and think if you wanted to deploy this project actually onto a test net or onto mainnet ethereum or polygon or whatever there's a lot that you have to do kind of from the command line con compiling your contracts creating migration scripts and all that and truffle dashboard kind of takes care of all that for you with a nice little Administration panel and again you can use truffle with it you can use other things with it you're not

locked in at consensus and metamask and truffle we try to build tools for the community that don't lock you into one thing hopefully our SDK can support multiple wallets at some point in time hopefully we can work with other well it's to create better standards for all of the wallets that build in in ethereum and on multi-chain as we start to do that oops I didn't say that all right so with that does anyone have any questions um Jyoti Kingsley any questions anyone else how many react developers we have left in here okay yeah you got to raise your hand guys all right yeah so all right uh what do you think of the application is this

something um that you would use are you already a web 3 developer and like you're kind of already past this are you new to web3 how about you guys right here in the yellow shirts you'd use it you wouldn't use it what would you use huh you don't do front ends but you raised your hand you said you're a react developer okay he's not a real react developer but anyways I well you can give it to your front end guys uh the point is is like it gives you a really good starting point um if you got if you've got a friend that's new to web3 given this URL they'll thank you they'll be your best friend down the road my name is Eric

um that's pretty much my workshop if you guys want to come up and talk to me afterwards that's great otherwise I will see you back here tomorrow or at the yacht party or somewhere else I'll be hosting the entire track one here yes here tomorrow and I'm super excited about eth Dubai this year things are going really great thank you guys very much [Applause]