Metamask 🛠️ Let's build a full stack React Dapp Using SDK, Infura, Truffle, and deploy to Linea

foreign [Music] hello everyone my name is Eric Bouchard and I am the metamask developer relations manager and today we have a great workshop for you it's the metamask SDK plus Linea Workshop today we're going to be starting with a Veet application and generating a reactant typescript dap and that is the bulk of the workshop we're going to build a full stack react app using the SDK infuria truffle and we're going to deploy to linear now you can use the code that we have in this Workshop you can use the same tools we have that you can also use things like hard hat or whatever it's just a quick configuration file change but yeah let's go ahead and get into this and and get started so again my name is Eric Richard um this is my Title Here developer relations manager at metamask and you can find me on Twitter telegram GitHub lenss.eath all of the above probably even some more places um like Reddit Etc as uh HTTP junkie that's at HTTP Jun k-i-e my DMs are always open as developer relations we are you are front door to the product and Engineering teams pretty much at any company or any product but especially here at metamask in consensus so whether it's a question about metamask one of our specific metamask features or products or maybe it's something else in the consensus lineup of tools um it could be Linea it could be inferior whatever just come ask us our DMS are always open and that's what we're here to do answer your questions or if we can't answer those questions to find the right people to do that so what we'll be doing in the workshop is cloning down an existing GitHub repo um this repo uses the metamask SDK that's mostly what we're going to be focusing on here is um kind of getting this dap working it's mostly going to be configuration we don't have enough time to build the application from scratch uh nor is that really kind of the scope of this Workshop um but what the SDK does is it allows you your users to connect to the metamask browser extension or metamask mobile so it gives the user that option which is really cool previously if you were connecting you know adapt to your metamask wallet you typically only have the ability to connect them to the browser extension you could use other tools out there like a wallet connect or something like that to connect to metamask mobile but um pretty much all you have to do now is instantiate the metamask SDK inside of your project and then when you call eth underscore request accounts which you kind of have to do in order to connect to metamask it gives that user that option and we'll see what that looks like here in just a few moments first we're going to go through all the slides um and here if you want to take a screenshot these are all the links that you can get to our GitHub repo that's the first link at the top um the slides which you're looking at right now is the second link finally we'll get to a point where we're going to explain Linea a little bit it's a L2 ZK roll-up um created by consensus and I'll do as good as a job as I can at explaining what Linea is but we do have a really good linear explainer little workshop as well you can find lots of them on YouTube from our devrel Emily Lin so yeah screenshot this and take a look at these various URLs if you want to grab the resources for this Workshop alright so the agenda so we have a demo app that we're going to be cloning down and basically configuring we have a review of Linea which will just take a few moments again if you want to go a little bit deeper into Linea you can check out Emily lens explainer which we have linked to on the previous slide right here second link um as well we're going to review the SDK basics in our project we're going to clone the workshop project we're going to install all the dependencies we're going to configure all the environment variables we're going to review the blockchain and web workspaces so those are different folders within our workspace we're going to then build and deploy uh to linear testnet we will test the front-end applications so from minting and testing the contract and walled interaction is our state from our wallet in sync with our application Etc the demo the demo will look a little bit like this um when we're using the SDK there's a few things to remember if your users have already connected with the browser in metamask before when they come to your site they will probably see a screen that looks a lot like this so you can't see the connect button in the top right here but um when connecting if they've already connected to the metamaska browser extension it'll probably give them that option again you can employ a cash Buster or something like that in order to ensure that that doesn't happen but it we do kind of track what was the the way that they connected last time and if it's through the browser extension we'll go ahead and try to do that the next time they connect just to make it easier for your user um but what the SDK also does is if they're visiting your site for the first time is it'll give them the opportunity to choose desktop or mobile if they choose desktop they will have a link in which they can connect to metamask using eth underscore request accounts just like you normally would Connect into the browser extension if they choose mobile well that's when they get this QR code which they can you know pull out their phone they can scan the QR code and um yeah they will be able to connect with metamask mobile so once they're connected whether they're through the extension or mobile you will see the chain that they're connected to so if they're connected to Linea it'll show that if they're not connected to Linea then what will happen is they will get a switch Network button which will programmatically switch them over to the correct chain it'll add and or switch them over to the correct lineage chain to the right of that it will show their um their address for their Mobile Wallet it'll display the amount of eth or whatever they're you know you're connected to in our case it's eth that'll be the linear e that they have if you also see to the left of Linea there it says extension it's a little not really a button but a tag that says extension so when we connect them to the the wallet if they choose extension then it'll show that extension there if we connect to mobile it'll show mobile and all that is is just a little bit of a conditional rendering in our react application to just let you know that hey it's possible to tell whether they're connected to the extension or mobile that might be something that you want to know as a application developer or you might want to conditionally render One Thing versus the other depending on how they're connected um overall when they're connected to one or the other the experience is pretty much the same it's just where they approve their transactions or where they sign is it in the extension pop-up in the browser or is it on the mobile phone right but otherwise it's it's pretty much seamless below this we have our ticket types this is a fictitial fictitious event called eth Atlantis the best eth conference Under the Sea again it's not real this is just a demo application but what we do is we give them the the ability to Mint a general Mission or VIP ticket the way that our contract determines in this you know very contrived demo is that they submit 0.01 eth well they're going to get general admission if they submit 0.02 each we'll look at a VIP um and no other option is available so it works out for us it's kind of hacky way of doing things but again this is a demo it's contrived um but yeah once they meant that ticket we will disable their button while the minting process is happening and then once the ticket has been minted once the transaction is complete what we're going to be doing is calling into the contract to find out hey what tokens or nfts has this person already minted with this contract and you can see here that this user which was me um had minted a general admission and a VIP ticket and you can tell that they are unique not only do they have a ticket number right so even if someone there's not a one thousand and one thousand one for GA no if you uh mint a ga and avip they will both have unique numbers for that event they will also tell whether it is a general admission or a VIP it'll have their wallet address printed onto the ticket plus they have a different background as well so no one ticket can ever be the same again very contrived um but just a way of showing you how to create completely unique nfts that are stored on the blockchain uh with the contract that we have and you don't have to use a contract that stores in an SVG on chain you could do you could use ipfs or something else for the purpose of this Workshop we're trying not to deal with all that overhead of showing you how to use ipfs and to store images somewhere else there's a lot of overhead involved with that so we went with an on-chain SVG ticket for the purpose of the workshop um as I said you can see up here we have um it shows where the how you're connected uh what chain you're connected to the address and the amount of eth that you have in your balance here which where the tickets are and then the nfts down here that we just talked about cool so what is linear so I'll do my best to describe Lenny Adam but as a developer I'll tell you that if I can deploy to ethereum or maybe even something like a polygon it's not really that different for me not a lot changes um so Linea is an L2 scaling solution it is a type 2 ZK roll up we use Linea for deploying our contracts um and from watching Emily's course you can kind of determine what is linear described probably way better than I can what is an L2 what is a type 2 ZK roll-up anatomy of a roll up you can understand the asset transfer process and understand kind of the difference between optimistic and ZK roll-ups so I'll go over a little bit of what what this stuff is so a type 2 ZK Roll Up is not a layer one so a layer two is a separate blockchain that increases the transaction speed and throughput while partially deriving its security from ethereum evm it pulls off that execution layer away from L1 they rely on ethereum for data data availability and then post their transaction data back onto L1 rollups are the most widely accepted implementation you have optimistic rollups like arbitrum optimism even bass and then you have ZK Roll-Ups like linear ZK sync polygon ZK evm scroll and start net so what is a zke evm right it's a zero knowledge ethereum virtual machine so it executes smart contract transactions in a way that uh uses existing ethereum infrastructure in a way that ZK proofs can understand so the way a proofer works is by submitting the programs that uh translate into math which pulls out a Boolean like a true or false that's done through arithmetization which is a difficult process and because this is difficult there are four major types of zkebms right you have a Type 4 type 3 Type 2 and type one so we'll go over two of those because I think at the highest level you have the high level language equivalent you can think of a Type 4 as like a starknet ZK sync and those are not 100 like the evm right so your tooling changes some op codes are not covered if you're using hard hat it may require its own plug-in right you have type 3 which is a partially evm equivalent and then you have type 2 which is fully evm equivalent which is what Linea is so it's language equivalent which means that I can write and it's bytecode equivalent you you're fully compatible with your existing application that you've already built maybe on ethereum right um ethereum polygon whatever um as a Dev really nothing changes no tooling changes all op codes are recognized right and then you have type 1 which is a fully ethereum equivalent again Linea is a type two so if you want to learn more about any uh sorry Linea I would suggest going over to Emily's a little crash course Linea explainer the link is up here at the top right of the screen up there way up there and then you might also want to look into the different types of zkevms and specifically focus on the type 2 zke ebms which is what Linea is also linea.build you can find all the docs for Linea and if you have any questions again the developer relations team myself Emily any other developer relations person that you might find at consensus or metamask they are your front door they are the ones that can answer your questions or find the right people that can do that all right so the metamask uh SDK in adapt so what I'm showing you here is actually the way that the SDK used to work so if you are below 0.

5.0 this is how it worked your connect button would determine whether or not you have a metamask extension and then if so it would connect you to that extension otherwise the SDK would realize that you did not have an extension so a metamask extension in your browser and it would pop up a QR code a QR code if you didn't have either of those it would also give you the option to download metamask and install it the way that the SDK Works after 0.5.0 is that there is there still is this kind of yes no uh is there metamask extension installed but only if someone is already previously connected to the browser extension so it's a little bit different there's a little bit more logic going on but what happens now is that the user is pretty much given that choice at the beginning they get a little modal a pop-up it's responsive it works very well there's nothing it it actually makes a better user experience for connecting to metamask in my opinion but they they're giving that that option so let's say that I have an extension in my browser but I'm using Chrome and I maybe only have my test wallet set up in Chrome it's not my personal wallet it's not the one connected with my ens domain or something like that right but it's just this weird test wallet that I have set up maybe it's a rabby wallet or something like that something that says it's metamask but it's not metamask right and I know I don't want to connect to that thing I want to use my mobile phone well I have that option um kind of at the beginning um and I can connect with that um so I think it's a better user experience and again being able to connect adapt to a mobile and be able to being able to work with the window.ethereum object in the same exact way is I think Super valuable for dap developers and that's kind of what the metamask SDK brings you and in the future we'll have other helper functions we have libraries coming out for react developers and who knows what after then but um some of the react components that we have coming out are for State Management we have connect buttons and other things like that which you can just drop into your application and they work along with the metamask SDK um a few other things I would know also note is that metamask is working with packages like wag me and web3 react and um block natives on web3 on Border we're trying to put in a pull request with them so that we can have the SDK right there in the in the tools that you like to use in order to connect to multiple wallets here are some references so we have a metamask SDK developer resource guide we have the Linea L2 ZK roll up um information here and also another repo down here which is the MIP GitHub repo this is the metamask Improvement proposals um kind of unrelated to this Workshop but I thought I would put it in here because a lot of people that will be working watching this Workshop either have a good idea of how to work with metamask or have worked with it in the past and are here to learn a little bit about the SDK but they might be interested in being part of the metamask Improvement proposal um it is a program that we have going on and we meet I think it's once a month uh and discuss metabask Improvement proposals but also you can work with this async through our GitHub account and uh you can either submit metamask Improvement proposals or create issues to that GitHub repo so let's go let's go ahead and get into our um workshops I'm going to go ahead and close down our our Google Docs there and if you were to go to that first link that I had to screenshot it would take you to this GitHub repo all right um in here you will find a readme that will walk you through one all the information about the workshop kind of what it uses some of this may change over time um so just keep up to date with um you know always check out this top page here this top part of the page here to figure out kind of what we're using you know maybe we decide to go hard hat in the future maybe we continue using truffle um we adapt these workshops based off of feedback from the developer community so although it uses a lot of consensus tools if we get a lot of feedback saying hey you know I really want to see how to do this in hard hat we might end up doing that and then you have steps you know clone the project down open your editor create an inferior account so we're going to go through all of these really quickly get everything up and running and you will see how this uh how this all works so the first thing that we want to do is we want to clone down this workshop and I'm going to copy this last little part right here so I'm going to go ahead and open my terminal I think it's this one and let's just go ahead and add that last little bit on the end there so what we're going to do is we're going to let's make sure we've spelled this correctly not GTI clone let's do a git clone that'll probably be better so what this is going to do is it's going to clone down our repo into a folder called um react SDK linear Dash workshop and then we're going to CD into that directory and then from there we will do all of our um we will get all of our dependencies installed all right so it cloned it down and it also changed us into that directory and from here I'm just going to open Visual Studio code um here we go let's close this other one all right and we can also get rid of this other terminal back here and just open this up and we'll we can see what we have inside of here let's also get a a terminal open here and if we go to the readme just go ahead and open up the readme it's the same readme that we saw over on GitHub and what we want to do is we already cloned the workshop so step two is just to run npm install so we can do that down here and what this is going to do is because we're using turbo repo which you can find about all up here I'm going to kind of skip over that for sake of time um turbo repo kind of has these uh what I would just call like different workspaces blockchain and web each of these has its own package.

json it has its own environment variables file but it's going to go into both of those and it's going to install the dependencies in those packages.json all right so it's done installing um great step three so we want to create an inferior account and that's one thing that I haven't done yet I mean I actually have an inferior account but I'm going to walk you through so let's go ahead and open up inferior.io I'm going to go ahead and sign in and I'm going to pause this for a minute while I sign in and once you get signed in you will have you'll be basically brought to this dashboard where you can create a new API key and that's what we want to do so we want to create new API key so we want to go ahead and create a new uh web3 API key and not ipfs we're going to do this one here and we're going to call it um eth Atlantis and we're going to hit create and you can call it whatever you want that's going to give us an API key here which we want to copy um and we will I will also kind of point out Linea mainnet and testnet we're going to be using the test net here but if you switch over to mainnet you can get the uh this will is what you're going to plug into your truffle or your hard hat config but if you wanted to deploy to something else you know polygon optimism or you know Palm ethereum you can find all of the links for those here inside of infera um so with that we will go ahead and come over to our application here and we will see that we need to rename the file in our web directory which is env.example and let's just get rid of the dot example at the end all right and we're going to paste this right here um also we're going to be using Linea so we're just going to put in the hex code for that here there are some pretty cool tools out there if you want to be able to find out what the hex code or the chain ID for a particular network is so one is chain list .org and if we see here we can do include test Nets and we can click on we can just search for Linea there's the Linea so we see that that the code the hex code we also see the actual chain ID um and that's pretty cool you also have e-serialize which if I were to put in let's grab this one five nine one four four um the way we would do this is we want to put in a number and we want to get the hex value of it we see oxe 708 just the same as we see here so two really cool tools I think you should know about as an ethereum developer or a blockchain developer um cool so we have our environment variable here uh filled out environment variable file filled out let's go back to our readme and the next one we want to do is we want to copy that same inferior project ID over to our blockchain and we want to rename this as well so let's go ahead and get rid of dot example here and um I think I don't still have that one so let's go grab it again from here copy that put it here and then I'm going to pause while I get my private key but I'll show you how to do that so we want to open up metamask and for I'm going to go to account that's not one that I could say an imported account so what you would do is you're going to click on yeah yeah this guy here um Account Details and then you're gonna hit show Private key all right so I'm gonna go ahead and do that in the background again that's right here um you you select the accounts you click on the three little dots next to the account details show Private key so while I do that real quick uh if you're following along you can do it as well and then we're going to paste that into the file I'm going to be sure not to show you guys that because you never want to share your private key so one moment all right so now that out of the way I um I added that private key to my blockchain environment variable file and I want to click off of that real quick just to make sure I don't accidentally click on it and we want to go back to our readme and just continue following along so um now that we have our environment variables filled out one area of the project you should be aware of is your truffle config or you might have your hard hat config over here and um let's kind of walk through it real quick just to see what we have set up so a few things that I would point out is that we have these contract build directories and contract directory we're telling it where our contract is located it's in this contracts eat tickets so here is our contract um if I go back to that um also where do we want to build out the abis too so we want to go into the web directory and into a folder called lib that's where I'm putting mine that gives our front-end application access to that contract API so that's the first thing I would kind of go over here um how that works within the application you can poke around the application a little bit and see how it uses that ABI it's we're using it along with type chain but those are all things that are kind of beyond the scope of the course we're just going to show you how to get everything kind of up and running so I have a few different networks set here I have Gary I have Mumbai and I have Linea so I just want to put a few different ones in here so that you um and also I got these from inferior so basically I copied the inferior link that I was showing you inside of when we created our API key and then I'm just replacing the last part with whatever project uh inferior project ID that I have inside my environment variable file here so whatever goes at the end here is the same as what I put right here in my environment variable file let's go back to that so we have scripts in our application to deploy to Gary Mumbai or linear we will be using the one for Linea and that's we'll be kind of going over next so let's go back to the readme um we can also check out the travel configuration uh docs if you need to or um if you're using hard hat it should really be no different um there's a few little minor differences but um you know truffle and hard hat are kind of similar um we're using Truffle in this Workshop in the future maybe we'll do one using hard hat so that we can show people what the site little differences are there um yeah so here's all the different files that may or may not use your public network ID but step four we need to get some linear eth so if you don't have any linear eth you can do one of two things you can go to infuria IO slash faucet slash linium and you from there will be able to get some linear eth for testing purposes um if you're part of my workshop you can reach out to me I can give you some maybe um it takes I think you get 0.

5 a day through the faucet if you need it really quickly if you need a little bit more than that 0.5 reach out to me I can probably hook you up um I have quite a bit of it so anyways step uh I already have some in my wallet so I'm going to skip this step but just know that you go to this link here you can paste in your wallet address and you can get uh some of that Lenny Ethan dripped down to you step five will be to build the project and compile the contracts so let's go ahead and do that we're going to run npm run build let's run truffle compile real quick truffle and got an error here let's try and determine what this is CD into our apps real quick see that right I just ran triple compile kind of inside of the let's run npm run build now see if this changes anything all right so we're getting an issue here this actually looks like an issue in our own code so I'm going to try to determine what this is real quick and come right back and uh give you the solution all right so um what I will go ahead and do is update our GitHub repository and remove this auto connect um I believe that with the new version of the SDK that that is set to True automatically and you don't have to do anything there so hopefully removing that right now we'll get rid of our issue it was on line 117 so if that's in your Workshop you can remove it I will try to do my best to remove that and kind of make that change to the GitHub repo so hopefully that won't be an issue but if anyone runs into that um cool you'll know how to resolve it let's go back here and run npm run build and see if we have any issues again and it looks like that cleared up our our error and that was just a typescript error it wasn't anything um wrong with actual Linea or deploying running and building it was uh so npm run build will not only build your contracts but it'll also build your front-end web application and in that case we were getting a typescript error if you get an error there pay very close attention to what line it's on what file it's on go check your file if there's a little red squiggly line or some obvious thing there that's where your issue is um so if you start changing our Workshop out quite a bit just be aware of that if you're using the same commands that we're running now we could deploy to Linea or Mumbai or ethereum or girly any of them really because it's pretty much all the same as far as deploying from a developer perspective and working with our contracts but we're going to choose to run npm run deployed Linea and what this is doing is it's calling a script up here in our package.json so we will see right here deploy Mumbai deploy linead deploy girly let's say that you wanted to set up like a deploy to arbitrum or something you would need to add a new script right here deploy arbitrum and then you'd want to do Network arbitrum and that would get you squared away but we are going to go ahead and go back to read me we're going to copy this npm run deploy to Linea we'll go ahead and paste that in here and what we should be getting is a contract address and there's ways that you can write that contract address directly to the file that you need in my case it is a in my web directory I have this lib config so maybe you can put a piece of code in here that you know checks that contract API and finds out what the contract address is and uses it but I'm just going to do a quick little copy paste so I'm going to copy our contract address it just gave us I'm going to put it under the Lenny one make sure you put it under linear because that's where it's our application is going to be looking since we're running against linear right now um and with that we should be good to go to the next step so the next step is yeah we already did this we already copied the contract address into that so we've completed step seven as well and the next is just pretty much to run the application and let's start testing it out um so go down here run npm run Dev test net and if we want to search for where that command is really quickly um just.json it's right here in our main directory so our root directory which is Dev underscore test net which is basically just going to run npm run Dev um and it's going to be you know telling you about the work the web workspace here which is the web directory so this is going to run our front-end application using turbo repo and you should see this little link pop up and if we click on that we will see our application really quickly what I'm going to do is I'm going to go in here I'm going to inspect I'm going to go to application I'm going to make sure that we don't have I'm just going to delete anything that's already in here make sure there's nothing in session storage so local storage session storage there's nothing in here we have a basically um nothing cached as far as what the user's preferences are for connecting to metamask um at this point I want to hit the connect metamask button and here's where you see the SDK right all I did when connecting that metamask button that connect metamask button if we want to go look at it real quickly we go into the navigation so let's go into components navigation navigation.tsx and we will find that connect a button here it is here it's calling connect metamask um connect metamask is found inside of our use metamask folder or sorry file and um inside up here there's going to be connect metamask function which we'll find real quick oh here it is so all that we're doing is we're calling eth underscore request accounts but because we've instantiated our SDK right here right then it's going to automatically I mean it's that simple it's going to automatically pull up this little modal which give our users a nice little hey I can connect to desktop or I can connect through mobile so we'll go ahead and connect with the metamask extension first or maybe we should do mobile let's do the desktop first then we'll come back and do mobile so go ahead and connect and we can see here that my account um with the you know Ox 7e5 is the one that's actually connected here I'm on the linear chain now what would have happened if I would have been on a different chain like you know linear mainnet but I wanted them to be on Linea test net right so what my application would have done and what and you can see how to do this is it would have uh conditionally rendered the switch chain button which when I click on it will programmatically either if the test net if the linear testnet chain is not in metamask already it will add it otherwise it will just connect me over to it so I'll click that and boom switches me back over to the correct Network and now I'm good to go um another thing you can also do is if they're the same logic you would use to render that switch button you could also use to disable your minting buttons right you may not want them to mint an nft unless they are on the right Network um cool so we see everything here um and what we're going to do now is we're just going to you know test out our application make sure our minting buttons work so we'll go ahead and hit ticket here and obviously since I'm connected to the browser extension it's going to confirm all that over here in the metamask extension and notice that my button is again disabled while I'm while the minting transaction uh is not complete yet so as soon as that transaction is finished we will see that that will go away and then wow we get our nft showing up there at the bottom that we just minted and so let's take a look at that really quickly in our application so I think to start off here the thing that we should take a look at really quickly is our contract now again this is a contrived contract it is specifically for demo purposes you probably want to build something a little bit better for yours but um the thing that makes this work where I can go and fetch these nfts that are on chain and display them right here in the browser is a few things so one it is this wallet of owner function inside of my contract which basically if I if I meant five different nft tickets you know one for me and four of my friends I get a VIP for me and a general admission for all my friends of course well then um I minted them all with a certain address right and I don't have any way to transfer those over basically you meant it it's yours um so I can call into this world of owner and I can get back a list of the token IDs that were that basically I've minted on this contract with those token IDs I can then call into let's see here generate nft SVG by token ID so by passing that token ID into this function here which is a public function on our contract we might like if I've generated five of them then my react application would actually run through all five of those token IDs and call this five times in a row it'll get the generated SVG and it'll display that onto the page so that's how that's being done um we could take a little bit more look at this Con this contract so this is the top portion of my SVG and this is the bottom portion um I just split them up for um organizational purposes we also have the token URI being created for the actual nft and then we have um The Collection uh contract URI for the collection of uh nfts for this uh this this project um we have a can mint function so we want to make sure that the total supply has not reached the max Supply that the uh the the minting kind of deadline has not occurred yet I think for what we're doing here it's one week long so once I deploy the contract I can mint for up to one week after that anyone will get an error if they're trying to Mint um from this contract you could set that as long as you want um there is a mint deadline variable above in the file that you can set that to a different time frame if you want to and then here um we're either we're making sure that the message.

value otherwise the price being sent over is either 0.01 or 0.02 which would give them either a ga or a VIP ticket price if it's any other value it's not going to work um so that's the contract in a nutshell um yeah here is the the price for the VIP ticket GA ticket the max Supply we start with zero when the contract is deployed and every time we mint uh an nft that goes up one um yeah and we have a few open Zeppelin contracts that we've used in this um then if we go and take a look at our tickets page tickets owned to be specific we will see how we're calling into that contract so um the first thing I would kind of take a look at here is list of tickets so this will be what we actually kind of loop over this code right here in order to generate each of those images that we've gotten but let's take a little bit further look into here's where we call that wallet of owner right so we call wallet of owner we tell it what our wallet address is and then we're going to get a list of owned tickets back we can then map over those own tickets and then we can call um that token URI and then we can get our um we can get our actual ticket back sorry so um one thing is that the token URI calls the other one so I think I I said that wrong over here so token URI calls in to generate an nft SVG by token ID okay uh that was one thing that I kind of messed up in saying over there this is the one that we actually call it's public as well um you could call either one but that's the one we're calling from our tickets owned and then that's getting our SVG back and then we are literally just pushing these uh into a uh an array and then we are looping over them up here and then displaying them here on our page and that is how we get our tickets showing up here at the bottom so if I were to Mint another ticket here of the IP ticket once that nft mint is complete we are setting a global variable just to one number higher and when that number that Global variable changes that number changes in other words the user has minted another ticket this portion of code down here knows to run again and to go check if any new SVG nft tickets has been created on this contract by this user and then it displays them out so every time I'm in a ticket let's say that I have a hundred of them here it will actually have to call back in and generate all 100 again again this is a demo application it's contrived it's for demo purposes only but it works and it gives you an idea of how to work with these various things making that a little bit more efficient would be up to you in building a more production app so um let's go back to our readme real quick let's make sure that we're not forgetting anything that I want to go over here so we've connected oh let's go ahead and just test out one thing really quickly here so um we notice that we're connected to Linea and we already changed the chain and and it gave us the um the button to switch us back to the right change but what happens if we change like the account so notice if I connect to a different account all of my tickets disappear but it has updated my my uh balance and my address here and I'm um so let's go let's refresh this for a moment here um let's go back over to our other account all right um we do have a little bit of an issue with our mobile and extension um we have just released a new SDK package I may be getting that tag incorrectly it's not a big deal again everything works the same for both but I might need to update that code in the repo to make sure that it's always showing the correct one there but other than that everything seems to be working fine our wallet State most importantly is staying in sync with our application State and the way that that is happening right now is because we are using this use metamask um basically context provider so if you're familiar with react you'll understand what a context provider is we've created a context here and we have some quite a bit of code going on to understand um you know how many minting how many mints have we had um all sorts of things is there any have there been any errors let's go ahead and generate an error so let's go ahead and try to Mint a ticket and we're going to reject it and you'll see down here that we have action rejected if we click on this the error will go away um so that's another piece of our Global state is that when we get an error from metamask whether we get an error whether we get uh they they change their account whether the balance changes whether the chain changes we take all of that information through um either a rejected request or error or through um events that are happening with metamask so if I change the account if I change the chain ID or the balance changes that actually triggers an event that we have covered down here we have all these events that we're watching um and if any of these happens we are then calling into a certain function that will update our Global state right so this is a little bit more involved the good thing is is that we've shown you how to kind of keep your state your wallet state in sync with your react application here in this file um this is put together rather quickly for a workshop again demo purposes however we have a react package coming out which will have basically a used SDK hook and also some connect buttons in it that you can just drop into your application not have to worry about writing any of this stuff so look out for that as soon as we have that available and we've announced it which should be very soon then I'll be uh tweeting about it and I'll also be updating the workshop to use those instead of probably have both of them in here so that you could see how we've done this anyways but it won't be being used we'll be using the use SDK Hook from the SDK it's basically a companion Library that's coming along with the SDK a react companion Library all right so um we've tested that uh let's see if there's anything else I want to test here um if we change the chain do we see it reflected in the UI do we get a switch chain button yes we do can we change accounts and see it reflect in the UI yes we can can we mint a ticket yes um see the nft tickets show up at the bottom of the page yes disconnect from both accounts and make sure that it is reflected in the UI disable the mask browser extension so that's kind of our next thing that we want to do here so we want to come up here and uh we're connected to two different accounts so let's go ahead and we're gonna do that here we're going to disconnect this account and then we're going to disconnect this account all right and again I am going to since I've already connected with metamask I'm also going to just for the sake of the demo I'm going to make sure that there is nothing stored in here so I'm going to delete all of these you could also use um you could also do this programmatically but I'm just going to make sure that there's nothing else there and once I disconnected from those notice notice that all of that Min those menu items went away I didn't have to refresh the page or anything that's all react State um knowing that like hey they've disconnected from metamask and uh conditionally rendering this connect metamask button now what we can do is we can connect we can hit that connect metamask button and let's try to log in with our mobile phone so we'll Click mobile here and let me just pull up my mobile application in my phone real quick this may take a moment my phone was not on all right got metamask opening up and what I'm going to be doing uh if you can see here up in the top right hand corner there is a little QR code I'm going to hit that and I'm going to scan the QR code here and you'll see that we want to accept this and boom we are logged in now I was on ethereum mainnet here so I am not on the correct chain so it's going to switch me over when I click the Switch chain button cool and then I'm going to switch over to Linea girly test Network I'm going to approve that oh I shouldn't hit again I I messed up here um 929 so if I disconnect on that on a this is actually good because we can show that the disconnect works here um we're going to refresh the page and hit connect metamask again that was my fault I hit the wrong button I dismissed it and then tried to change it manually but it actually did what it's supposed to do um if it figures out that you've disconnected from metamask mobile at any point in time you'll see on the screen there that it actually showed me a number that I had to click on my phone that is the same number and that will just make sure that I'm disconnected completely from uh metamask um or I can connect back up again anyway so I'm I'm connected back up again this time and I'm on the right uh test net so we're good there um and you can see here that I'm connected with a different wallet address um and if I were to you know same thing happens if I were to switch the account uh let's try that real quick I'm gonna go to account two okay so now I'm on account two um here is the situation so since I'm on mobile um it's a little bit different when you just switch accounts from one to the other on mobile right you need to make sure that um you're connected with account one you need to be on account one but at this point if I can go ahead and mint a ticket let's just go ahead and make sure that we know that on metamask mobile it will ask us you know for confirmation so I went to scroll down a little bit here and I want to hit confirm and now our minting process is happening so transaction is submitted and in a moment it takes a tiny bit longer with mobile to recognize that transaction still our minting button is still um you know disabled because that transaction is not completed yet and it says transaction complete one two three four five there we go again takes a tiny bit longer with metamask mobile there's some polling there's some communication going on behind the scenes that is just a little bit more uh time consuming than with your metamask extension and I figured out what's going on here with my little tag is that I have the Boolean in my in my react application the switch so when I'm connected to mobile it's telling me I'm on extension when I'm connected to extension is telling me on mobile that would be a really quick fix it was probably a programming error of my part but I can see that this is actually working kind of as intended it's just showing the wrong one so when I'm connected to the mobile extension extension mobile that's just changing the logic around of how this thing is conditionally rendered but I don't want to take too much longer because um we're reaching kind of the end of the workshop but everything so far is working exactly uh as I expected it to um I ran into one little issue where um I kind of read I accidentally kind of rejected the request to um what was it change the chain chain the the change chain um and then it tried to disconnect me it realized that I was disconnected and then it gave me that number um to make sure that I that I was clicking on the right number that was being displayed on my phone that's a security uh feature of connecting to metamask mobile um and and then it disconnected me and then I just um used the QR code to scan and log in again um a lot of these things can be programmed on your side to make it very very seamless and it's not too hard to do these things um so the best thing to do is and that's why I did include this little uh information here about what whether you're connected to extension or mobile uh even though I did it incorrectly um is so that if you find that you want to do something a tiny bit different when you're connected to mobile you can do that there are some edge cases where um the logic might be different when you're connected to mobile because of the way that um the mobile application works with the app but at the surface it's pretty much all the same the same events work that you're you're listening to from metamask you still use the window.etherium um object in order to interact with the metamask mobile even though it's slightly being faked um and you know if you make changes if your balance changes and all that kind of stuff it's all just going to automatically reflect in your application your your app state is going to stay in sync with your wallet and um but yeah um we're going to continue building out this Workshop um and you know adding additional features and just making it as fully featured as possible so that everything that you could possibly need to know about working with the SDK is in this Workshop but this is a developer preview the SDK it still hasn't reached you know a major version one yet so keep that in mind as you use it um but also know that like this is really powerful stuff especially the fact like you can connect to metamask mobile from adapt and do all the same things it used to do with your metamask browser extension so with that being said um I think that's about it that's the end of the workshop um hopefully you can get this code running down on your computer and everything works okay I will maybe I'll bring back up the oh that's not gonna work um so just bringing back up the slideshow really quickly here and um I'll go ahead and leave you on this slide again my name is Eric Bouchard I'm the developer relations manager at metamask you can find me on Twitter telegram GitHub lens.eath uh at httpjunkie my DMs are always open um I'm trying to end this video so that it's less than an hour long but if you have any questions reach out to me or the rest of my team and uh we're always traveling all over the world to various ethereum conferences and blockchain conferences multi-chain conferences you'll see us everywhere um if you see us please come say hi and uh and ask us any questions or find out how we can work more closely together we've got an ambassador program we have an accelerator program um there's lots of ways for you to work with the consensus metamask and fira Linea all these different teams thank you very much and have a great day