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

foreign [Music] my name is Eric and today we're going to be doing a metamask SDK and linear Workshop we're going to be cloning down a beat and react typescript application that's part of a larger mono repo that has a blockchain and a web workspace so yeah let's um get started with the slides and we're going to build a full stack react app using SDK and fira truffle and we're going to deploy to Linea mint some nfts let's get started so again my name is Eric Bouchard I'm the developer relations manager at metamask and you can find me on Twitter telegram GitHub lens and ens at HTTP Junkie you can always reach out to the metamask devrel team or any of the devrels at consensus our DMS are always open we're always looking for feedback on the products ideas and we'll even have a few slides in here where we have resources and we can talk about the metamask Improvement proposals and how you can be a part of that as well let's get started so the metamask SDK allows you to connect your adapt to the metamask browser extension or metamask mobile on your phone so um here are a few links if you want to follow along with the slides that's the second link on the on the slide there and for the repo that we're going to be cloning down that's the top link the tinyurl.com mm SDK Dash Linea and we'll also get to a point where I talk a little bit about Linea and there is a better explanation video that I'm going to point you to if you want to get more detailed information but that's the third link tinyurl.com Linea explainer so our agenda we're going to be showing off the demo app here in the slides with some screenshots we're going to review Linea we're going to review the SDK Basics and then we'll get into our project so cloning the workshop installing the dependencies configuring the environment variables reviewing the blockchain and web workspaces in the mono repo we'll then build and deploy to the lineage test net and then we'll test the front end application so we'll mint and test our contract functions we'll play with wallet interaction State and synchronizing our application to the metamask wallet state so here is the application in which we're going to be building it is just a fictitious eth event called etholandis the best eth event under the sea and when we use the connect button we will be using metamask SDK because we'll have that instantiated in our application and it will allow us to connect to either the metamask browser extension as you see here you can select one or multiple accounts to connect to and then you can change any of those while you're connected to the DAP as well if you do not have the extension you can your users can use the mobile QR code to connect again your phone to metamask mobile this is what the application will look like when we're when we've got it up and running and we've minted a few tickets so some things to take notice of are the navigation at the top and you will notice that we have this little extension tag so in the application I will show you how to as the developer and even if you want to show to the user kind of what they're connected to whether it's the extension or mobile I think that's an interesting kind of concept to cover um if they are connected to the chain that we've specified that we want this application running against it will show right here if they're not connected to that chain there will be a switch uh chain button which will also kind of make sure that that works once the application is up and running and I'll show you how it works as well I'll show you the components we have an address for whatever account that they're connected to whether they're accounted to extension or mobile it'll show the the user's account address here and um eth balance or the balance of kind of whatever chain they're on so on the Linea it'll be linear eth if they were connected to mainnet that would be regular eth we also have these minting ticket buttons so imagine that we have this you know this eth Atlantis event coming up and we want people to purchase tickets we have a general admission ticket for 0.01 eth and a mint ticket button we also have a VIP and the way that we determine which ticket they get is just by how much they pay an eth um and so we'll see the contract we'll review the contract a little bit again it's a demo application demo contract it's not really meant for production this is meant to help you as a developer get more um kind of associated with metamask SDK deploying to Linea and some of the tools and development you need to do in order to um you know to build something like this we also have down here the the actual tickets that they've minted against this contract so when we review the contract I'll show you a public function or two in which we can call into so that we can say hey you know what nft tickets are associated with this user um per this contract and then we can take that information and we can display their svgs which are deployed actually to the blockchain so these tickets will never disappear if um you know if the server or ipfs or whatever goes away the tickets will always be on the blockchain and will always be able to generate them from the SVG code that's stored on the blockchain so um what is linear so I'm going to try and explain a little bit what Lenny is but I think the the thing that you should just kind of understand for the purpose of this Workshop is that we're going to deploy to Linea but it's really no different what we do in the application what we do is part of the deployment and how we interact with that contract Linea is an ebm equivalent L2 chain so um you know that there's no change that you have to make to your smart contract code if you have something that would normally deploys on uh ethereum or maybe like polygon um then you should also be able to deploy it to to linear so Linea is an L2 scaling solution um it is a type 2 ZK roll-up and we're going to use Linea for deployment of our contract a layer 2 is a separate block train sorry Block Chain that increases the transaction speed and throughput what and it's going to do that by partially deriving its or it's going to do that while deriving its security from the ethereum evm so it pulls off that execution layer away from L1 again they rely on ethereum uh for not only you know security but for data available data availability it's a hard one to say and they post their transactions back onto L1 ethereum right um Roll-Ups are the my the most kind of widely accepted implementation um and you have optimistic Roll-Ups like arbitrum optimism base and then you have ZK Roll-Ups like Linea ZK sync polygon zke evm scroll and start net um going into kind of much more about that is a little bit beyond um this the scope of this Workshop but if you see the tiny URL uh kind of up here at the top right of the screen tinyurl.com explainer my co-worker Emily she can tell you more she has an uh L2 crash course which we'll talk about what is Linea described way better than I can I should talk about what is an L2 and what is that type 2 ZK roll up the anatomy of a roll-up asset transfer process L1 to L2 deposit L2 to L1 withdrawals optimistic versus ZK Roll-Ups what is a ZK evm and you know why to build on linear and more so in our dap when we're using the SDK right we're probably going to have some type of a connect button and as long as the SDK is instantiated in our in our case a react application it's going to be determining is the metamask extension installed so if it is it's going to connect you to the extension and you'll have a connection to that metamask browser extension in your browser if metamask extension is not found so it will be determining whether or not you have the extension installed in your browser then you're going to get a QR code and that QR code will allow you to take your phone you'll be able to scan the um the QR code and it will connect you to the mobile and yeah so we'll see that working once we have our application up and running finally we have some references here so the metamask SDK developer resources you can go to tinyurl.

com SDK Dash guide you can check out Linea and they've got a great blog there Linea L2 ZK roll up go to check that out at linea.mirror.xyz and then we also have this link to the metamask Improvement proposals GitHub repo I talked about this earlier this um is a link that will take you to show you how you can be you know as part of the development Community how you can work with us to determine metamask Improvement proposals ideas for the metamask API what should come next what's missing we do some uh I think monthly calls around that we've just started those up so follow me on Twitter and you'll be able to find out about those calls so with that uh let's go so we're going to exit out of our slides here and oops let's go ahead and click uh we'll leave the slides open but again if we were to go back to those links that we had right if you were to follow this top link here tinyurl.com metamask or sorry mm-sdk Linea then it will take you to this GitHub repo and you can copy the link to the repo as well there is a readme here which we're going to be opening up and following along with in our project in Visual Studio code um we'll also touch on inferior uh we have some cool tools and documentation that we'll review as well but let's go ahead and open up our terminal and what we're going to do is go ahead and clone down this repo and once that's down we want to CD into it and we're going to go ahead and do an npm install while that's getting started I'm going to go ahead and create my API key so if you have a linear account you can come in here create an API key we want to do a web 3 API we're going to call this eth Atlantis uh we'll just do Workshop and we'll create it and with that that should give us an API key so if you come over here to the endpoints tab you'll see your API key and you'll also see links for you know ethereum mainnet girly sapolia testnet for linear we have the test net mainnet should be available as soon or by the time you watch this video um as well metamask will have a new version of the SDK out by the time you watch this video and we'll talk a little bit more about that uh later so I've got my API key copied I'm just going to go ahead and can I not copy this right now interesting let's go ahead and refresh here this is very odd I could not copy that thing for a moment I still can't copy wow all right we got it now um interesting um and then we will it might have been because I was installing some stuff I don't know why that would have mattered but we're gonna go ahead and open up this Workshop in Visual Studio code and with that we can go ahead and kill our terminal as well because we have a terminal inside of Visual Studio code and we'll open that up we will also open up the readme here that was very interesting okay so here we have our readme um and so we're going to go over this a little bit so this is an nft tickets Workshop that utilizes SVG to create Unchained SVG tickets for a fictitious event like we already talked about it uses uh turbo repo um basically the only thing you have to know about turbo repo for this project is that we will be running all of our commands from the root um turbo repo will allow us to one install you know dependencies for our web blockchain folder in our our main directory here it's already done that um yeah and and just imagine that you know the blockchain in the web folders are like you know they're well they're kind of npm workspaces right um in our blockchain workspace we have type chain um that will be this will give us the uh basically the type chain is a package uh that's designed for devs who want to use typescript and interact with ethereum smart contracts in their web apps so it generates typescript bindings based on the solidity contract code you'll get the benefit of type safety and auto completion um and overall it can help you catch errors early in development improve code readability integrates with ethereum development Frameworks and libraries like truffle hard hat ethers and web3js and this project specifically we're using type chain ethers V5 and type chain truffle V5 which targets each of those um the web Works Space if we close this and open up the web is a client application built with VJs and react and typescript and um yeah we'll show you how to conditionally render the UI how to connect switch chains and display weld information from the metamask browser extension and metamask mobile as well we'll have provided a metabass context provider and a used metamask hook to help you manage your your wallet State you do not have to use kind of what I'm using you can roll your own as well the SDK team is releasing a react kit very soon beyond that we will be in some libraries like wagme web3js and maybe even blocked native's web 3 onboarder so just by defaultly using metamask in those libraries and those kind of components in like a react application well then you would be using metamask SDK under the hood once we're running our application once we get it configured and once we're running it we'll be able to Mint tickets respond to changes from the wallet like switching out accounts chain uh the getting the updated balance making sure it's in sync with our application and then finally once the user has minted tickets the minting page will also display those SVG tickets that are stored on the ethereum blockchain we already kind of talked about this um we're going to go ahead and get started really quickly I want to rename these environment variable files in the both the web and the blockchain directory just to prepare those once they are renamed they will no longer be tracked by git because they were in the git ignore and we've already done step one we've already cloned down the repo and changed directories into our react SDK Linea Workshop directory we've already run step two npm install so step three is where we want to configure these environment variable files so I think we should still have our API key from infuria in our clipboard so we can paste that in here looks good also this environment variable here will specify which chain we want our application to run against so this should match up with whatever chain we're deploying to of course you could deploy your contract to like Linea and Mumbai but for this application the way we have this demo set up we're only running against one of them so we'll be deploying to Linea so we want to copy the Linea hex chain ID now how do you get those hex chain IDs it's fairly simple one thing I I think the place most people would start is chainlist.org and here you could do include test Nets you could type in Linea and you would find the chain ID and you could find the hex version of that now if you find the chain ID another way or if you know it by heart another thing that you could do is copy it and go to e-serialize.

com and you could choose hex to number you could or let's do it the other way around number two hex and you could get that um and also the other way around so if we want to copy that and put it over here oops you can see us you know converting it the other way around so I'll go ahead and close that but that is e-serialize.com built by one of our Engineers over here at metamask um Shane so thanks to Shane um all right we can close out this and also this API key once you're watching this video will not be available anymore I'll go ahead and copy that again and um and then oh yeah metamask documentation one thing I just want to show off real quick if you go to wallet we've got some tutorials in here if you're unfamiliar with SDK you want to get a little bit more knowledge about uh kind of just using metamask well you can take our react dap with local state or react app with global State tutorials we've also got tutorials over on the snap side we also have a reference an API playground in here which if you just wanted to play around with our different RPC methods you can let's pick one that has a few more parameters to it let's see here to e-subscribe um wallet watch asset right so you can you can uh you know play around with the RPC apis right in your browser which I think is really cool the metamask documentation is new it's updated if you haven't been to the metamask docs in a few months um we've revamped everything and it's really nice so we can kind of get rid of all of this we don't need any of this anymore and we'll just get started with the application um the next environment variable that uh file that we want to fill out is the blockchain one and this one's a bit more sensitive we still need that project uh inferior application ID but here I need the private key um so I'm going to need to I'm actually going to need to open up a new window again and really quickly uh I'm gonna have to pause the video because I'm going to go through here um this is my test wallet there's no real Ethan here but I'm going to come in through here and I'll show you on one of these if you click on the three dots you can go to Account Details and then you can hit show Private key it'll ask you for your password it'll display it you can copy it and then we can paste it into our environment variable file so let me go ahead and do that and close out the file and then I'll be right back all right so I went ahead and I've copied my private key and put it into the blockchain environment variable file and as well I've filled out the the web one as well so with that out of the way we have completed uh step three at this point we will go down to step four uh this just talks a little bit about why we need the the public network ID and kind of what files are using that but um let's kind of go on we're gonna go over all all the file system and everything we just want to make sure that it it builds and runs so this is kind of the point where once you're done developing your contract once you're done kind of developing your front end the way that you want it um we might do an npm run build when I do this inside of my Turbo repo project this is going to not only build kind of my contracts and my blockchain workspace but also my web make sure that there are no errors make sure that all the blending rules are being followed so I'll go ahead and copy that in and we'll run build and what we should see is this kind of finish with no major errors there's a few CSS errors but those are no big deal um and then if we look into our source lib we'll see a contract apis directory now why is that in our truffle config we have added these two lines of code right here contracts build directory and contracts directory so it knows that our contracts directory are from this file right inside of contracts um cool so it's going to go in there it's going to build uh basically all the contracts or any of the contracts that these ones are importing and using as well we specify the contracts build directory and we say hey back up out of here go to web Source lib and create a folder called contract apis and dump all the contract apis there um while we're in this file I'll also show you that we have girly Moon by and Linea setup now we're only going to be using this linear one but um when we were on the endpoints page of the infera dashboard it showed us all of these URLs and then of course we are just referencing our environment variable API key from here um and we're doing that for all of them so but we could deploy to any of these that we want to we're going to choose Linea all right um once we have that done we're going to go ahead and deploy to Linea so this is where it will use our private key that's specified inside of our um blockchain environment variable file which I'm not going to click on I bet you thought it was there for a minute um so we can run this deploy Linea then if we check here on in the package.json you will see that there's a deploy gearly a deploy Linea and a deploy Moon by when we run this npm run deploy Linea command it's basically saying hey npm run the script deploy Linea which can be found inside of our blockchain workspace right blockchain workspace here's the baggage.json here's the deploy linear Command right so you can imagine that if we wanted to run you know local or tests we could just do npm run test workspace blockchain right perfect and now we have a contract address and I I am doing it in this project where I'm basically copying this and pasting it into this config file here I'm going to find the one that says Linea I don't know why that contract is there I must have saved one on accident but um so that is where our contract address lives on the Linea blockchain you could go look that up in the Linea block Explorer and you should be able to find the contract with that out of the way um we should be able to go on to step seven uh which which was copy the ad and the contract address into the config file we did that and then one of the last steps we have 10 steps so one of the last steps is to run this Dev testnet so let's go ahead and do that so this is going to run our react RV react typescript application so if you haven't worked with BJs before it's a JavaScript build uh tool kind of like file new project for react view probably a few others to react and you're the only ones that I've used and when you build a project with the for those Frameworks or libraries you can typically choose whether it's a JavaScript or typescript we've gone with the typescript version so let's go ahead and open this up and here is our application and one thing I just want to do real quick is I want to disconnect from everything because I must have been disconnected already from running this application several times preparing for the workshop let's also hide my bookmarks we don't need to see those um all right so let's take some stock or kind of uh take a look at kind of what's going on in the browser right now so we obviously have metamask installed and it is enabled inside of our extensions great so the way that metamask works in zero dot up until 0.4.

2 version which is what we're on right now when we if we have it instantiated in our code and when I say instantiated I mean if we go to our hooks file here which kind of um takes care of all of our metamask state but also has our connect button in it or sorry a connect function in it um we will also see that we are instantiating the SDK in here let me make this a little bit smaller down here so you can see this uh is where we knew up our metamask SDK we pass it some uh options um you don't have to pass it all these options you could get away with the name and um yeah actually you could probably just get away with just adding the name um but I wanted to show all of the options and some and some of the um the different things that you can do with these options in case you wanted to copy this and use any of them you can do logging if something's not working correctly you can disable auto connect autoconnect just means that if I refresh my page um it's not going to persist the connection um yeah and then you can see up here so once this is instantiated here's the point once the SDK is instantiated when we call the RPC method on on metamask which is eth underscore request accounts which is what this button does then it's going to check is metamask installed and in the browser if so let's connect to it if not let's pop up a QR code and let them connect to metamask mobile now by the time you watch this uh metamask SDK will be on 0.5 or greater and the way it works in those versions is that it always gives you the option of whether you want to connect to the extensioner mobile which I think is actually a better um user experience than than this but both of them work and you can choose to use whichever one you want again in hours we are using metamask0.4.2 because that is what's out right now now once we've connected you see that we we are connected to extension we are on the lineage chain and we are connected with this account and it has this much balance in it so the first things that we want to check you know we've built out this application now we kind of want to test it out and make sure that when we change accounts that like the balance changes right and that the address changes so that works we do want to go back to the account number one though because that's where I have my Linea eighth um and then also we want to find out like what happens if they switch chain or what happens if they connect and they're they're already connected to another chain like Mumbai right let's say they were on another site using Mumbai well what happens is it no longer displays the chain right here uh and it creates a switch chain button that switch chain button can be found in our components under the switch Network folder there's a switch Network button here which is just very simple but it uses this switch Network hook now that hook is here and all that it's doing is calling wallet add ethereum chain if you've never used wallet at ethereum chain before just know that it will add the chain and uh kind of take you over to it programmatically but you have to fill out some stuff and notice this is all the stuff that's in that config file that's why we needed all those properties in the config file if we weren't programmatically switching their chain but doing everything else we could have gotten away with just having the contract address but that's why our config file has these other properties in it all right um let's go back over here so with all of that uh take it into consideration let's get back on the right chain and let's let's try minting a ticket right using the metamask browser extension so we'll go for a general admission ticket first um and then this will be for whoever's coming with us um we're gonna do a plus two for this event and when this is done minting um there's several different ways that I could force this component down here to re-render and check what nfts they already have I just went for a super hacky very simple way of doing it um let's first look at tickets so when we click on that button we're running this nft tickets uh mint nft public function on the contract we are then awaiting the transaction and then we're doing some basic state management on the tickets owned page down at the bottom or ticket's own component down at the bottom what we are doing is uh we have this use effect that just always tries to run once um but if you change wallet address we want to check again we want to say oh we run we want to run basically we want to reach out to the wallet of owner function find out what the token IDs are that the that the person with this address has minted on this contract we want to take that information we want to put them into a tickets retrieved object and then we want to build a list of those svgs um uh into the page and doing like ticket collection.map right so um yeah so anytime they that their wallet address changes um or the chain ID changes or whether they've connected to the SDK or whether the the component is rendered for the first time those are all times when we want to re-run that there's also another one here because if I don't switch address like if I go mint another one right now which we should go ahead and do um since none of that other those other things are changing how is it re-running right so just know that it's going to rerun and another one's going to pop up here it'll be our ticket right we bought a VIP ticket for us and the person coming with us they can have the general admission one but as soon as that uh as soon as we can use this button again it'll be done minting and we should see that pop up down here and that's good UI right um the reason I've done this down here is because it's a visual cue that something that the minting process has completed or if they come to our site and there's other things that you can do on our site at least there's a place where they can see you know what tickets they have for what date and all that kind of stuff um it's cool so we've got two tickets for next year how did that happen it's because mints has changed so mints uh m-i-n-t-s is a piece of State in our um metamask context provider and it is just a number it is a basic react counter right it's no different I literally used you know the same code you would use if you're going to do like a a demo counter and show people how to use react hooks um but yeah it's I mean it's a perfect way during our session um when they mint a ticket we're going to increase that number it's used for no other purpose than to re-render this page if it changes we re-render we so now that they've minted a second ticket we want to re uh we want to re-render the page which will fire off that use effect hook again it'll go out check the contract get the token IDs back build a list of tickets display them on the page good to go all right I think you understand that now I've explained it uh very well hopefully all right so now that we've done that we've kind of tested out the metamask browser angle of all of this um we can go we can do the metamask mobile one now let me go ahead and fire that up and why my metamask is firing up yeah it does take a minute sometimes let's just kind of go through here and see if there's anything else that we kind of want to look at as far as the the application um so we have this main.

tsx and basically it's just it's just using this app component nothing really crazy to see here but if we go into app.tsx we will see that our entire application basically our application is everything with this within this app container here so we have a navigation a display and a metamask error across the button a bottom that's one more thing we can check out um but we have it all wrapped with this metamask context provider and again our metamask context provider is this uh you know huge 160 100 200 line file which uh you know does all of the listening of the metamask events so upon disconnect upon connect upon initialized upon accounts changed upon chain changed it's running some various functions within this file to make sure that our state is always being updated as well we share the client SDK out so other files you know any other component that's using this hook could uh access directly like the terminate function on our SDK um uh what else here um that's pretty much it you know here's the update wallet function so here's kind of all of the RPC calls that are happening if you know they change accounts their balance changes or their chain ID changes and then we store all of that within this wallet uh piece of state and then you'll see that if we're in like a tickets page or let's go to the navigation page so if we go to the navigation page we haven't reviewed this yet we can see that the wallet is being imported from this use metamask hook and uh since this navigation displays our address uh it uses our switch Network button displays the balance you know all of these kind of things uh anytime that state changes react is a one-way data flow and this is a global context provider or a global State provider anytime that state changes it propagates down through any components that are subscribing to that data and it gets re-rendered react magic right that's why we all use react I think um that's why I was told to use it I made up my mind on my own I love react um but cool we will have more workshops on other like vue.js love UJS spelled or um there's a few others that we we probably want to create workshops around too so look out for those um yeah let's let's make sure that we've done all of the the checks that we have with our UI so we change the chain we switch chain we've minted a ticket uh we saw that at nfts show at the bottom of the page uh we oh disconnecting yeah so we we want to make sure that we can disconnect so if we just come into here by the way there's a new metamask UI the chain is up here the accounts are here and the connections are here so if we disconnect from this account which we're not really on right now well let's do it the other way if we disconnect from the one that we're that is active we should see our balance change up there great and if we disconnect from this one we should see the metamask connect button show back up perfect so our UI is behaving as we expect now on the current version 0.4.2 of metamask SDK which is the last version before it starts working the other way that I told you about we actually have to go into here and hit manage extensions and turn off our uh metamask or and this is kind of another reason why we did this too or any other wallet that tries to claim that it's metamask right so that would be coin 98 that would be rabby wallet um because our metamask button is always going to try to connect to those wallets if it sees the extension there our SDK is always going to try to connect to them again that's not how it will work in the future so I'm super happy about that but now that we don't have the metamask uh browser extension enabled we can click connect metamask it's funny because all the SDK does at this point right now um really uh oops I must not have disconnected the last time it was on metamask mobile let's just double check that I'm disconnected first I'm glad that it did that yeah so it did just disconnected for me that was that's good um the SDK team is on top of their stuff here um great so let's do hit connect metamask now we'll see this so it's like hey you don't have an extension a metamask extension for a desktop you could install one if you want nope I got one on my phone let's go and hit mobile here let's hit the scan button in the top right of the metamask app and scan it and then you will see that I'm going to get all right there we go takes a second and now you can see that I'm connected with a new wallet address I've got .

10 Linea eth we're connected to Linea here let's also change the chain in here too polygon mainnet oh see and now I've changed the chain it says switch chain up here all right there we go awesome great work SDK team um we want to Mint a ticket now right so let's go ahead and do mint ticket and we should see that pop up on our application here again it takes a minute there it is we will scroll up hit that transactions submitting takes a little bit longer on the browser with when you're connected to metamask mobile but that button will always stay disabled and then it also takes a even another minute all right so there's there's stuff going on behind the scenes when you're connected to metamask mobile that just takes a little bit longer than with the browser extension but hey at least our users can connect and mint these tickets let's go ahead and do one more um so we can see that it's asking again we'll hit confirm transaction submitting all right and again uh that we wanted to create a demo that has all of this functionality you've got Mitten buttons they get disabled whenever the the minting is going on let's take a look at that real quick just to see on the tickets page so when they mint until the transaction has completed um we're not going to set is minting back to false until until that's completed so while is minting is true here's uh yeah yeah here's the isminting so to be disabled is um [Music] well well not wallet so if they don't have a wallet address so they're not connected to metamask obviously you can't click on a button and also if it is in the middle of the minting we also want to disable mint so the disabled on the button is uh based off of this cool um is there anything else in here that we haven't gone over oh metamask error we didn't do metamask error yet um I don't how can I trigger that with metamask mobile I can I can trigger it with metamask mobile so one thing I could do is I could go into my metamask mobile go into the settings go to settings and privacy go to manage connections I could do disconnect all clear cool all right let's just go ahead and give it a whole a hard refresh and let's do connect to metamask again we will go to metamask mobile and we will scan it and so what we're going to do here is we're going to reject the transaction this time so here see how long it takes oh come on you could just had a problem with metamask there well sometimes that happens the demo gods are not working well with me today well I know an easier way to do this um every once in a while that's happened to me I think the easier way to kind of demonstrate oh here we go it came back um so I'm gonna hit I'm gonna hit disconnect let's try this again let's try this again oh I didn't hit the QR code yet all right so here I'm gonna hit cancel instead of connect hmm well that only disconnects okay so when you cancel connecting to metamask with the brow with the mobile it doesn't throw an error but we can generate an error um oh yeah well let's just go ahead and connect to let's just connect to the extension real quick this will be easier because I know a few ways I can do it with the extension so we can do connect to metamask good and so we could do cancel right user rejected the request and then we could do we could also connect and we could do mint ticket and we could do reject right so action rejected and then if you just click on this it'll dismiss it down here so um I'll try that one more time let's hit reject let's go ahead and do an inspect on the page and we will see we've got the app container we've got navigation display and error so make this a little bit smaller down here oops not that small so you can see our entire application see the navigation display area and the error area right um and then those kind of correspond with navigation uh display and error and as well in our app file navigation display and error and then in our CSS we will see this where we have it oh no we have it on the actual individual Pages we've updated this so uh you'll have navigation display CSS and error CSS cool um I think that's it we've connected with metamask mobile we've switched change to ensure the switch chain button works we've minted a ticket on mobile as well as the extension we saw the ticket show up at the bottom of the page we disconnected from metamask Mobile to ensure we are prompted in the UI again this is just a demo application but it covers a lot of the basics you would need to know in a real world real world application real world dap that uses metamask and gives your users the ability to connect to both browser and extension from metamask from their dap which up until metamask SDK was created was not an easy task the SDK is new and we want to hear what you think what features you would like to see as well we really want you to apply uh for the linear metamask Decay bounties that all the hackathons that we're having we've got youth globals we've got virtual hackathons at metamask um and yeah if you have any questions again we can go back to um go back to our oh is that really just going to keep trying to open up my metamask well let's go to all right so we can go back to we'll just go ahead and end on this page um so again here are the links to our presentation uh let's go and do slideshow um and and then of course my name is Eric Bouchard developer relations manager at metamask hit me up on Twitter telegram GitHub lens or ANS uh I guess with ens uh not necessarily hit me up but if you want to send me some lineage or some real eth um my username is HTTP junkie on all of those and we've finished this within the hour doesn't really you saw that didn't really take that long to set it all up um this is a good application especially if you're a react developer to use as reference if you use other libraries or Frameworks I think you still can use it as a reference um and yeah my DMs are always open uh this has been great to be able to show you guys this look out for the updated versions of metamask SDK um look out for Linea mainnet launch um and also for our react kits and as well as I'm sure as we go on in the future we're going to have kits for other JavaScript Frameworks as well I should also mention that we have a metamask SDK for Unity we'll have one for Unreal Engine Soon you can use it with node.js react native react a regular plain Javascript app any other JavaScript framework that you want to um we can just use the regular at npm install app metamask slash SDK and then also iOS uh and Android soon so no matter where you are you're building a mobile app you're building a web dap you're building a react native application you're building a game in unity you're building a game in unreal you can use the metamask SDK and make sure uh and by the way on the DAP is the only place that connects to both extension and mobile because it's in a browser right it's the whole uh everywhere else you're just going to get that QR code it's going to connect you to metamask Mobile so if you're in a game it'll connect to this guy um yeah thank you so much and uh I hope you enjoyed the workshop and hopefully I will see everyone out at some of the global events