MetaMask 🛠️ SDK Workshop - Eric Bishard

foreign [Music] welcome to the metamask SDK Workshop today we're going to be building a react and xjs decentralized application with the metamask SDK we're going to have a full stack mono repo project that has our um our smart contracts and a back end and all of our react and xjs in a front end and we'll use truffle and ganache to be able to run basically locally and build our application locally and then once we're once we're comfortable with where where we're at in building our application we can then deploy it out to a testnet using polygon in Mumbai and I'm really excited to get started with that my name is Eric Bouchard I am the metamask devrel manager and I'll be your guide through the workshop today before we get started um I already told you about who I am so what's next on the agenda is we're going to talk a little bit about the metamask SDK just for a few minutes before we get started with the workshop because I think it's very important to understand not only which application or which SDK that we're working with in our application but also what else is available out there because developers do more than one thing right you might be a JavaScript developer react native react iOS Developer so we want to show you all the different uh flavors of the SDK that we have first off uh this is a few links that I want you to be aware of before getting started with a workshop so one we have an SDK developer guide that's the top link there and that is an ever-changing document that I'll personally be keeping up to date so you can bookmark it and as you're working with the metamask SDK hopefully that document will be changing and anything new will be reflected there second we have the tinyurl.com svg-nft so that link is the link to our Workshop follow along guide um so yeah go ahead and bookmark these um definitely follow that second link so that you can have that read me up while we're walking through the workshop it'll allow you to follow along with us in code with us during the workshop you can either do that or watch passively or you could even um watch now and then take the guide home and walk through the code that you're you know on your own time again my name is Eric Bouchard uh devrel manager at consensus and metamask and uh here is my Twitter address HTTP junkie if you want to reach out to me if you have any questions feedback anything our DMS are always open so although the SDK is new and we do believe that it will be the future of how we how you work with metamask from any application or platform it's kind of a bold statement and we do have a long way to go but just like any other Tech um getting into it when it's new ensures that you're staying up to date and ahead of the curve and uh we really do think that using the SDK is going to make it very seamless for you from whatever platform you're on to be able to connect to the metamask extension or uh the mobile wallet um yeah so the metamask SDK basically lets you lets developers connect to the metamask extension or mobile application independently from where their dap uh application is running be it on the web desktop or mobile and also uh separately from how it's developed you know maybe with JavaScript native iOS Android Unity webgl whatever right so it provides an easy to implement and seamless seamless solution for connecting to metamask and conducting transactions in your application so the SDK we will use in our Workshop today it works with react applications but we also have sdks that work with vanilla.js node electron react native unity webgl and mobile applications and we'll also have an Unreal Engine coming soon um SDK has some great Partners out there so the SDK is available in the unity asset store web 3 section as a unit Unity verified solution um the unity asset store provides an in-depth review of the SDK by unity engineers and the SDK is launched in like I said the new decentralized kind of web3 section of the asset store we also have a great partner in hyper play so hyperplay is a web 3 native game launcher that enables players to carry their metamask wallet nfts tokens and achievements into every game hyper play makes this in-game wallet interaction seamless and intuitive and at the heart of that is the metamask SDK here's just a quick look at what the hyperplay game launcher looks like and also a QR code if you want to check them out um and also hyper play um like I said they make these uh in-game wall interactions and you can see here a little bit of what that looks like and kind of how they've utilized the the SDK to bring a very easy experience um a very uh usable experience to their Gamers um through having kind of like an embedded metamask in-game wallet with a QR code um but even from a web application right you can do the same thing you can connect to the extension that's already in Chrome or you can use a QR code to connect out to a mobile application yeah so check out the metamask SDK on the unity asset store this QR code will get you there and with that being said let's go ahead and move on to the workshop portion uh and let's get started building adapt with the metamask SDK all right so let's go ahead and get started with the workshop so the first thing that we're going to want to do is we're going to want to take a look at the the GitHub repo which was the second link in the intro and the first thing we can do is find the the link for the code that'll help us to get this uh started off here and by the way um if you want to follow along with the workshop you can basically just start right here and you'll be able to follow along with us we're going to skip over talking about all this stuff up here in the workshop why we made the workshop the way we did kind of some of our decisions around it and um what we are going to do is go ahead and just get started we're going to clone the repo down and I'm going to move this window over to the side but you can follow along there if you'd like to all right so one of the first things that we need to do is just go ahead and clone the repo and get that pulled down all right so and then let's go ahead and CD into that directory which is on chain SVG tickets and then we'll do code dot that'll open it up in Visual Studio code for us and we can go ahead and get rid of this terminal um I will really quickly just kind of make sure that I'm on the right version of node so I'm using nbm it's no diverging uh node version manager and it says I'm on system I think that's fine but I think I want to go ahead and just do nbm use 18. so okay good all right um so first step I think we want to take care of is just making sure that we have uh truffle and ganache installed locally so that'll be npm I truffle ganache um Dash G and that will install uh this locally and while we're doing that I will kind of talk about the agenda kind of what we plan to do during the workshop so we're going to start by building and testing locally um from the starting point which is this start uh repo down here so this down here you can see that we are on this start Branch right okay um so what we've done for you is we've pretty much added all the npm packages and everything that you need and we'll run that npm install command in just a moment when we're done installing truffle and ganache globally from there we're going to build out our front end we will talk a little bit about the blockchain part of the application um which has the smart contract in it which we'll be deploying locally and to a test net eventually but we'll be mostly working in this web directory right here um once we've kind of finished completing the build out of our front end and we have our nft tickets able to be minted and we're able to display those tickets to the user then we're going to go ahead and deploy to a test net so we'll need some test eth or some test Matic in order to do that I've got a wallet with some of that in it so we'll switch from using like a local uh wallet and local network to using the polygon Network um specifically the Mumbai testnet polygon Network so you'll need some test eth for that testmatic in fact and and yeah and then from there we'll pretty much have completed the entire Workshop we'll have built locally uh ran our blockchain locally got to a point that we were confident in pushing to a test net and then we'll change some configurations and push out to that test net all right so the next thing we need to do is run an npm install command down here and that'll just get all of our um our packages installed and let's go ahead and take this time to go over the contract that we're going to be deploying so it's pretty simple it is just a nft um basic a basic nft a token with the ability to Mint um we can we have a total Supply which could be any number we wanted but we're going to stick with 8999 let's say that that's how many people can fit into our event um we also start um the value out at 999. so um it's actually about a about 8 000 rather than uh 899 because we start at the number one thousand right and the only reason I've done that is so that our tickets look nice they have a nice like four digit number and it doesn't go beyond a four digit number so our tickets always stay nice and formatted again not really realistic um we're pulling in a few uh different libraries here you can kind of explore these on your own um you might already know them as a smart contract developer the way that we're determining whether the ticket is a VIP or a general admission is by the amount of eth that they pay so whether it's 0.

02 or 0.01 eighth now if we were deploying on Matic versus uh ethereum we might need to change the amount for each one or something like that um anyways uh this is just a demo it's um it's not super important these things can always be changed we have a minting deadline that means after the block time stamp occurs uh it's 168 hours until no one is able to Mint tickets anymore so you might want to employ that in one of your contracts um contract URI and token URI these are just kind of uh what create the Json for the kind of collection um of nfts and then each of the individual nfts which are basically an on-chain SVG so we're encoding the SVG we're also kind of breaking up the rendering of the top and the bottom of of that of the SVG so that's what those functions are for and then we have a generate SVG token by ID this one's kind of important because we're going to be calling this from another um yeah this wallet of owner right here um generate let's let's double check on on that let's see so we're actually calling that from the token URI um and then from from the wallet of owner yeah so so what the wallet of owner is doing is the only thing that the Waldo owner is doing is it's determining which nfts based on the address that you have in your wallet um which nfts that you've minted on this contract and then it's returning those token IDs and then we're able to uh do something further with that so when we get into that part of the front-end project we can kind of see how that works what we want to do is we want to invent an nft and then we want to immediately show it um show the SVG that they've just minted once the minting is complete um then we have a basic mint nft function here and yeah that's about the extent of it um one thing I will note is that by by storing our SVG on the chain it's going to cost a little bit more to deploy our contract um to to actually mint each nft um but for a demo purposes and showing you how a full stack web3 application works I think it's a great way to start because you don't have to worry about storing jpegs on ipfs and pinning those assets and uh just kind of the overhead of kind of managing all of those image assets all right so we've got we've kind of walked through the contract a few things I'll note in here we're using type chain um this is a little bit more too much for us to go over in the limited amount of time that we have for this Workshop so I will skip over that but just know that uh type chain allows us to have uh typing in our web application around our smart contract which is really cool a really cool technology that we've included into this demo so with that um I think the next step is to go ahead and just kind of run the application and make sure that it works so I'm going to show you um kind of one way of running the front end and then we're going to kind of back up and do it a different way so you could CD into the apps directory and then go into web and then we could run npm run Dev okay so that will definitely get our project up and running there's not a whole lot there right now so as we can see it's just it's just gonna say let's build in web3 so it's a react application more specifically a next JS application um we've got some basic Pages uh and layout already created for you so that you don't have to do that yourself um and then what and some configuration for our other different networks that we're going to support all right we're going to have a local host we're going to support Gary and Mumbai and then what we will do is we will set an environment variable here so let's go ahead and do that now and so rename that to EnV and we're going to use the local host for this right now all right um cool so we've set the the local network that we're going to be using are application knows about it it knows that if this is set here to look in the config file and find that number and then use that Network to test on but we don't want to run our project in this manner that I just showed you earlier we want to go ahead and CD backup to the original root directory and we're going to run two different commands here so we're going to run npm run build which will build our artifacts for our smart contracts um and then after that and by the way what's Happening Here is from this command it's going into the blockchain folder and using a command from inside here a script from inside of that that directory um back up a moment here and so now that that's built we're gonna do npm run local that's going to spin up a local instance of ganache uh and it's also going to give us some private keys that we can use that will give us some 100 test eth to start playing around with we're going to open up one more terminal here and this is where we will run npm run Dev right again it knows to go into the web directory and uh run the proper script from there so we can do all of this from the root directory that's what I like about a mono repo using something like Turbo all right so when we ran the npm Run local command we got some private Keys over here and what we're going to do is copy one of those this will give us our test eth for um running locally and we can open up our our browser here hold this into metamask and let's go ahead and switch chains for right now just so that we can also do that when we come back but um all right so we are going to import this account private key and that should give us a hundred each now we're not going to see it right away what we need is a local host uh Network chain and we have to import that in so what we're going to do is just kind of open this back up and go to settings networks add Network Adam Network manually and we're going to do localhost 9545 we will do HTTP colon slash local post colon 9545 let's make sure it's a colon chain ID will be one three three seven and the currency symbol will be eth so go ahead and save that and now we should see our 100 eighth and we should be on that Local Host great um go ahead and close that for now uh so we have our our account imported um we have our local blockchain Network inside metamask and we've also set the chain in our environment uh variable file and in our config the one other thing we'll do is we'll grab the contract address here copy that and we'll also bring that into the web lib config we're just going to paste that right here let's go ahead and remove these two because these are going to be different when we run these when we deploy to test that later we'll use these two but right now we're going to be using this one all right so next thing we need to do is we start building our application so the first thing we're going to do is we're going to build our navigation and that's going to have everything we need to be able to connect to metamask um with the SDK it's very simple to pull that package into your project with a few lines of code be able to connect to the metamask extension or the metamask mobile wallet but there's a lot of other things that you'll need to do in order to keep the wallet state in sync with your application state so we're going to show you how to do all of that so in our components folder we're going to create a styled components directory let's make this a little bit wider and then in here we're going to create two new files one called General dot JS and another one which is going to be called navigation dot Js all right so we're going to use styled components for creating react documents that have styling injected so these Styles will typically be um like I'm creating a navigation component so the navigation will have styles in it four components that we're going to be using within that navigation component and that'll make sense in a minute if you never use style components before the general one is going to be for components with style that we're going to use potentially throughout our entire application so we're going to go ahead and paste this in and you'll just see that we have a number of components here a flex container we're creating a flexbox um layout for our tickets page which is going to have two items in it for each ticket general admission in VIP we're gonna need a button so these are going to be div components and then the button component is going to be of an element of button um and we can also pass in props to this button like a text size margin top right bottom and left and you'll see a good example of that when we create that button all right so for the navigation we can just copy that from our our readme as you can see here we have navigation view that will be a component that wraps the entire view of the navigation and then we have a logo that's going to be on the left and then a right navigation is going to have a balance like our Wallet balance inside of it all right so we can go ahead and move on to the next component which will be the navigation dot TSX and that's going to be just right here inside the components folder we're going to call it navigation dot TSX go ahead and copy that code in we'll take a look at what we have in there right now so here you can see we're importing in those styled components and you can see how this is kind of set up right we have navigation and a flex container this is our flexbox container with two items in it both taking up a width of 50 percent on the left hand side we're going to have a logo with an ethereum logo and then ethylantis next to it right nothing crazy and then on the right hand side we're going to have a right nav with a metamask button in it so we're just going to keep drilling through and creating all the components that we need in order to make this entire navigation work it's going to be a lot of stuff because but once we get finished and once the navigation works we'll be able to use a lot of these same components for our other uh for the rest of our application so on the actual index page and also the hooks the react hooks that we're going to use we're going to be able to use those throughout our application so getting this navigation working is key so let's go ahead and update our uh our page index.tsx we're just going to copy over this and all that we've done is brought in this navigation component here which already exists um if we go back over to our page now we should start to see things coming together right we've got our etherlantis logo and we've got our metamask connect button text on the right hand side which we're going to replace with an actual metamask button a connect disconnect switch chain all that good stuff everything we need really uh to kind of get this application kicked off um now we're going to create the the react hooks so if you're new to react um we put some links in the description uh inside the readme to link over to the react doc so that you can learn more about react books but basically what we're doing is we're taking functionality from when within our application and just kind of extracting it out and co-locating it somewhere else that's the easiest way to think about that we're going to create a new folder inside of a web and this is going to be called books and the first hook that we're going to be creating is a use meta mask dot TSX all right we'll go ahead and copy this in and this is a big file so this has got a lot of stuff going on I'm going to try and explain it very simply all of these things that I'm collapsing collapsing here these are just types that we need in order to make this work this was just a JavaScript application we wouldn't have any of these first like 50 lines of code but these are just set up these are types that are going to make it easier for us to work and build things in our application without the worry of them not working right or having bugs in them so that's a really good thing that we get out of typescript I'm sure that a lot of you kind of know all about react and typescript so I won't go too deep into it but our Hook is going to have a reducer in it and this reducer is going to kind of track and keep in sync all of our state so constantly we're going to be calling these actions connect wrong Network disconnect page loaded loading idle Network switched and these are going to be mutating our state and kind of returning a new version of the state um so we're also going to be doing some things inside of the state like we're going to be saving items into local storage um when we connect and also when we have wrong Network and and also disconnect we're going to remove state from the local storage and that's going to help us to simulate disconnection from the app and we can talk a little bit more about that later um after we get done with our reducer here we are going to need to create a react context and this actually creates a component that we can wrap around our entire application and all of its children will have access to the updated Global state that of our wallet that we're kind of keeping in sync with our application and and then we'll use this in our other components using this use metamask hook all right and that will just return the context uh of of the provider all right so we've got that one created um the next file that we need to create is it'll be the the use listen so we're going to create inside the hooks folder a use listen hook newslisten.tsx all right so here we are grabbing this is supported Network um it's kind of a function from our configuration and this is just checking to see if we are on the right Network or not the the specified Network that we want to be running on which we've set that in our environment variable file right here um it also listens to any of if the chain has changed and we'll dispatch a network switched if that's the case um it's going to be listening for if the account has changed in our wallet so if someone changes the account it reflects inside of the application um and then also what is the New Balance so getting uh get balance from metamask and eth chain ID these are all kind of important so that we can dispatch either a connect or a wrong Network action in our reducer which will again mutate our state um otherwise it's just going to dispatch a disconnect all right moving along um we have a a use switch Network hook that we need so if someone moves off of the of the intended Network that we want them to use switchnetwork.tsx make this a little bit bigger um if someone changes the network or if they log on with the wrong Network we want to provide a button that will allow them to switch the network back to the right one and this is a hook so this is the actual function that will do that switching of that chain for us um calling that dispatch Network switched when we're done and all that it's really doing is first again checking if it's not the supported Network um again that's that's for our application if um if if the right network is not set up in our application this is really uh come into play with the user that's why it's throwing an error but when we switch the network we want to call ethereum.

request wallet add ethereum chain and this will either add and or switch the chain for the user and it's going to require parameters of chain ID chain name native currency which has decimals name and symbol so name would be the the name of the the chain symbol would be the like eth and then potentially the RPC URLs I'm sorry the RBC URLs and potentially the block Explorer URLs but this is not always needed especially when we're running locally um yeah and then we're just going to return the switch Network function out of that book um next we actually need to create the component that will use this hook so we'll go ahead and do that it'll be called switch Network spell that right switchnetwork.tsx and this is going to be a really simple component um so all that it is is it's using that button component that we have we're passing in some props which are text and all the margins so these are not required that's why I have the question mark after them they're optional um props we created an interface for it and text size will be 10 if they don't pass it in and all the margins will be zero if they don't pass it in if they want to affect one of these they can just pass in that one property and nothing else so pretty simple component that we have there um now that we have that we want to go back into our navigation and just kind of update the code now that we have this added so we'll just go ahead and paste in all of the code I'm going to make our terminal a little bit smaller here and I'm gonna I'm gonna go ahead and collapse a few things just to make this easier and we'll walk through it really quickly so um we are using that use metamask hook which will get us our state our context um and so this will give this component any updated state that we have we're going to be calling that use listen hook so that we can start to listen um to the changes from the metamask wallet let me create a few variables that will determine whether we want to show the install metamask button versus the connect button we want to be able to call a function to connect them or to disconnect them disconnect one's very easy just dispatch is a a dis disconnect action however if they call the handle connect we have to do a little bit more work here we're going to dispatch loading we're going to request to eat accounts balance chain ID all of that stuff and then dispatch a connect otherwise we will determine through this if statement if they're on the wrong Network and dispatch a wrong Network um action so let's go ahead and close that back up um we're just formatting the the address to only show the first few numbers in the last few numbers of their address and that will get printed out right here so here's where we are potentially showing one of many different buttons right it could be the connect button it could be the install metamask button the disconnect uh if they're on the wrong chain switch Network um it's good or we're going to show the address and the balance if if everything else is there if the wallet if we have access to that wallet all right so moving through this really quickly I like this um we do need to go update the app.tsx page because now that we've created this provider that has this context this state we need to be able to wrap that around our entire application here and this is going to be very easy so we're basically just adding this line and this line the metamask provider around our layout and then all of our components in our application will have access to This Global State and of course we needed to import that as well all right getting to the layout.tsx so um kind of one of the last steps is the layout has functionality for potentially all of our pages in our next application so we're going to paste this in and just talk about it really quickly we want to have a use effect in here um yeah we have to create this this instantiate SDK file in just a moment so we are again getting access to that dispatch action from our use metamask um this will be how we initially listen to the metamask wallet and then we're doing some basic stuff determining if a provider is injected so is the wallet injected into the browser is metamask installed um running that listen for the first time and and then our local variable could be null so we want to have a backup if local storage is empty we want to go ahead and put null in for all of those items instantiate the SDK this will just be a few lines of code which we'll do next and then dispatch that the page is loaded so that we know that we can start working with the application so to speak um basically the page is loaded so the final one that we're going to create here is in the lib folder we're going to create a meta mask sdk.tsx and let's go ahead and make sure that we capitalize the M there we're going to paste this in so this is uh I'm gonna get rid of a few of the errors that we have in typescript as well we are going to instantiate that metamask SDK which we'll see that working in just a few moments when we get this up and running um we've already set the network ID in our environment variable file so now we need to do is go ahead and check out the the page and see if it's working all right let's take a look so here we have our application it looks like we've got our navigation and we've got our connect wallet button so we'll go ahead and hit connect wallet this will bring up and metamask um we don't want to connect to our account one with zero eth in it we want to connect to this one down here with our 100 eighth so go ahead and hit next connect all right and now we've got our um balance displayed over here we've got our address and we can disconnect and reconnect and that's just simulating a disconnect right it makes the application kind of stop listening to the changes and kind of or I think the best way to describe it is like you can disconnect from the app um your local storage remembers that you're disconnected from the app and you can come back and then reconnect and it will already be connected um it's just a ux feature that's all that it is it's not really disconnecting from the wallet but we like to add it or at least show people how to do it um the next thing that we can do here is uh we need to start to add the tickets and minting Page looks like everything is working here let's go ahead and check uh if we go to the wrong chain before we start adding our tickets so now we get switch chain here um because we went to the ethereum chain and it'll switch us right back to localhost and now we're good to go all right so it looks like everything is working in the navigation and we're just going to go ahead and close all these Pages real quick and let's go ahead and start um adding our tickets so the first thing we want to do is go over to our index.

tx page we're going to add some new Imports so we want to bring in ethers the use metamask hook and tickets that doesn't really exist yet and I will add a few more things here so just underneath our mint Declaration of our component here and before the return statement we'll go ahead and add the tickets that we need to display on this page with the prices a hex version of those prices so that when we submit that as a transaction it's using the right values you can't pass a 0.01 you have to tax you have to pass the hex value of that number um and then we'll go ahead and add you know tickets here and we actually want to pass those tickets in so we'll do tickets equals tickets right so we're gonna get these tickets from here um and now we need to go ahead and create this tickets page that will display all this information so we're going to go into our styled components first and we're going to create a new file called tickets.js I've messed up here didn't I no I don't want to do that I want to create a new file called tickets.js go ahead and copy in our styled components all right so we've got tickets view again wraps the entire ticket view ticket type will be the view around the actual two tickets that we have um we have a stout alert for errors heading text ticket type text so this is just some text that's going to be displayed what color do we want it to be displayed nothing big here moving on to um the next we want to actually create a tickets.tsx page so let's go ahead and copy that and we'll just create a new folder that's what I was trying to do before kind of went out of order here um it will create the tickets.

tsx page looks good copy in our code and let's just kind of makes uh collapse a few things here real quick so we have our style components that we're copying in we have our interface for our ticket so each of these tickets that comes across in this array of tickets that we just passed in we'll have this shape to the object here um ticket props there's just going to be tickets and it's going to be an array of this type here that we just defined these are the values that we could use in our page I think we're only using a few but we could use type price price hex value anywhere we want in this page we have a few uh pieces of state that we're creating and then we are returning um this is our ticket type so this is just going to be the types of tickets that we have and it's going to be enough Flex item because this and we're going to have a flex box with two items and each ticket will be a flex item okay and then down on our tickets page um this is where tickets is being passed in um and we're going to be iterating over those tickets and mapping them uh each as a ticket type component so there will be two of these components here which look like this all right I think I explained that correctly all right so next thing we want to do is we want to add minting functionality to these tickets because right now you can see everything but as much as I click these buttons will not work and you know that's kind of the developer flow you create a button it doesn't really work it looks looks good but now we got to create the functionality that makes it work so we're going to copy in some new Imports to our tickets.tsx page so we're just going to replace all the ones that we have and you'll see a few new Imports come in here use router which will and next.js allow us to refresh the page use metamask we know what this thing does this is how we get the state the global state for our our wallet eth tickets Factory it's first time we've seen this we'll see how that works in a moment bringing in ethers and we already kind of know what config and is supported Network do right they tell us if we're on the right Network it gives us access to that config file um next thing we want to do is we're going to replace this we're just going to add a few lines above this so we're gonna destructure that wallet State out of use metamask we're going to bring in that use router so that we can use this hook in just a few moments um and then from there we need to add a mint ticket component so right below what we just added we're going to create this mint ticket function so we need a provider an assigner here because this is actually going to Mint a ticket it's going to create a transaction on the blockchain we are going to create a factory uh variable out of this eth tickets Factory which needs a signer in order to work we need to know what the network ID is um so we've got that there we throw an error if the network is not supported we should actually make these errors look the same the one on the other page was slightly different um but that's that's uh not really a huge deal and now we're attaching to that factory we're telling it you know what the network ID is and what the con and where to find that contract address in whichever Network so the best way to think about this is the network ID is being passed in we're looking in the config file for that ID and then we are looking for the contract address probably could have explained that a little bit better but that's the basics to it we we mentioned nft we pass in the wallet um and the and the value of the ticket we then um wait on that transaction to complete so we first um we're going to return minting accepted minting complete in the console we'll set is minting to false when we're done and we'll reload the page otherwise if they reject it or if something goes wrong we'll catch that error and display it right underneath the button can't mint this would just be a state in which we don't have um a wallet or is minting as false so we would want to not mint in that case all right now we just need to add the the call to on the button right here so we need to add on click and we're going to call the um mint ticket function and then with that we should be able to go ahead and test that our minting function works and we should be able to confirm here all right so we've minted a ticket and if we just uh inspect that one more time and go take a look at the console we're going to comment out this router reload do that one more time and we can see there minting accepted minting complete so we've minted two general admission tickets and the next thing we want to do is we want to bring in a tickets owned component just underneath that tickets page so that we can see that those tickets pop up right when we get done minting them which will be a visual cue for the user to make sure that they know that the the ticket mint went okay so we're going to create a new file here called tickets owned dot Js and we will copy that in there it's just a um a view that will control the padding and border of that ticket's own view again we'll put it'll show just underneath that tickets area that we just built and we'll have a grid on a CSS grid with some SVG items inside of it just like flexbox have has items grids also have items and we're going to do like four across um so they'll just if you've meant more than four tickets it'll just be like two rows of of four all right and then we need to create our tickets owned dot TSX inside the tickets folder right and we'll copy in the code for that and basically um we have a few types here nft data so the data for that nft each of the tickets uh formatted we're gonna have a ticket collection piece of State we're going to destructure some State around the wallet and the network ID we have a use effect here again which again similar to the other one we need a provider an assigner because this is going to be making a call into the contract um we've kind of already gone over what these lines of code do we need a tickets retrieved variable to have uh basically an array of all of those tickets that have been formatted and for when we call into the wallet of owner function inside of the contract it's going to give us back a set of owned tickets we're going to map over those and we're going to basically push each one of those into the tickets retrieved variable we'll wait on that and this will run basically anytime address or network ID changes which means that those tickets will always stay refreshed down there uh then we have list of tickets so this is going to be an actual all of the SVG items so if we've minted four tickets there will be four of these and these will go right here inside of our grid so it'll look kind of like this and so each one of these items will get rendered inside of this grid no matter how many we've uh created if we're not on the right network of course the switch Network button will come up and we can actually get rid of both of these because they're not needed right only if we only if we want to change those default values of 10 or 0 10 text size or margin zero do we need to add those in so we can just do that uh and then at this point um we're pretty much done with minting our tickets let's go ahead make sure that this works with those with that page in place go ahead and close the console out and now when we mint the ticket we should be able to see those pop up at the bottom there we might be missing one thing oh yes of course um we need to go into the index.tsx and pull in that tickets owned uh tickets owned and that will have imported as well up here boom and now we should be good to go all right so here's our tickets let's submit a VIP ticket that was weird oh where you know what uh on our tickets page we did not uncomment that someone was probably yelling that in the workshop hey you forgot to uncomment that line here we go perfect right so this is exactly how we want it to work we want them to mint a ticket we want them that to show up in the UI as soon as they've done it uh it gives them a sense that hey everything went all right and of course if we were to reject that you would get that error there and if you click it it goes away again we'll show that one more time if anyone wants to create a better error for me and uh create a pull request that'd be nice that one's kind of hanging off the hanging off the ticket uh panel there all right so that concludes pretty much the workshop of building a full stack react next JS dap with a minting page uh wallet connection using the metamask SDK we can call into our contract and get all the nfts that we own and display them on the page the nft although I probably should update the year here um it's a fictitious event you know this is a demo it's contrived but it has the date it has whether it's a ga or a VIP ticket and you can even see the address that it was minted with so with that being done let's go ahead and kill both of our terminals in fact let's just go ahead and delete these real quick get rid of those um we're also going to clear all of these out and what we want to do now is we want to push these to a test net so we're going to do this really quickly here um let me see if I have stuff already so I don't have to go pull it out I'm just checking to see if I have all of the um I have to go do this myself so let's go ahead and pull up my inferior account and we will go to the dashboard we will go to either lannis copy this guy paste that here into our environment variable for project ID and we will go into our blockchain folder we have an environment variable file here so if we're going to push to a test net we have to have an environment variable also for this project which we will have that project ID there as well then you get my private key from metamask so I'm going to show you guys how to do this but I'm going to pull the thing off screen while I grab my private key because even though this is a a test wallet I don't believe in Sharing private keys at all so what I'm going to do is I'm going to click this account one here and this is the account that I use for all my tests it's got all my test eth in it if I already go back to I guess ethereum right now we should probably see some Ethan there let's go to Matic all right so see I have a test matmatic the application's not running that's why it's erroring out let's go ahead and kill that for a moment and I'm going to go in here and go to this account and I'm going to go to Account Details I'm going to hit export private key but I'm going to do that off screen and I'm going to get that Account Details export private key type in my metamask password copy it and then I will pull this off screen paste that in save close that page out pull it back over but now I've got all of that updated and now we can open up our terminal and what we're going to do is go to this package.json here so we can see the commands that we're going to run so Dev testnet this is what we'll run once we have um built and and deployed I'm sorry deployed our project so I'm just going to go up here and kill the build folder real quick now you don't necessarily have to do this but I'm going to go ahead and do that and then I want to run a certain command that will deploy our contract here to Mumbai test net and before I run this let's not forget I need to go into our DOT EnV and change this to ox13881 to indicate that we want to run on the moon if we want to deploy to the Moon by Network and then we can see the next thing that we'll do is when we deploy this deploy npm run deploy colon Mumbai and we're going to use the workspace blockchain that tells it to go into that blockchain folder and get that script that deploy script which is in there we'll run that I can also show you that really quickly here package.

json so here is that deploy deploy Mumbai script and we're waiting for that contract address to show up we will copy that there it is we will put that into our config here nope here let's make this a little bit smaller down here all right so now we're going to be using Mumbai and at this point we can run npm run Dev colon test net and this will know that that's the test now that we want to run on open up our application [Music] and sometimes I get some errors the first time because it was just running on localhost 3000 so I'm going to disconnect here I'm going to make sure that my other account is disconnected uh yeah this one in fact I not only want to disconnect it but I want to go and remove this account for now because I'm not using it anymore and then I will go back to this account and we will connect wallet that one's already selected connect so we're now connected with my test wallet and we will net the general admission ticket confirm it's going to take a little bit longer when it's on the test net to show up down here then we'll also mint a VIP ticket just make sure that's working we'll test the disconnect we'll switch accounts all that good good stuff all right so um let's go ahead and disconnect reconnect let's change accounts nope didn't not oh we have to do this sorry um it's not this kind of let's let's do this sorry that's what we have to do um because we didn't actually do connect wallet and connect it um that was my own fault there so we'll go back now that we have two of them connected we can kind of go back and forth between the two right that's kind of how it should work and notice that this is updating so that all looks good that's exactly how it's supposed to work we'll disconnect it we'll switch chain um it's really not going to do anything here connect wallet we're back to this one yeah just kind of again just making sure that that you're just fumbling around in here as much as possible connecting multiple accounts switching between them just to make sure it all works and everything looks fine we've deployed to a test net polygon room by we've created a on-chain SVG tickets application full stack with next Js and yeah that's you know the workshop if you have any questions feel free to contact me on Twitter again my Twitter is HTTP junkie and uh yeah Reach Out