MetaMask 🛠 MetaMask SDK & Linea Workshop

[Music] hello everybody and welcome to the metamask SDK Linea Workshop today we're going to be taking a look at a full stack react dap it's going to be using the metamask SDK infura hard hat and deploying to Linea my name is Eric bashard and I am the developer relations manager at metamask and you can reach me on Twitter telegram GitHub lin. htb junkie my DMs are always open the devils are the front door for you um to any of the consensus products uh let's go ahead and get started so the metamask SDK um there's a few reasons you might be here watching this video you might just be interested in using the SDK or deploying to Linea trying to figure out how to build a react dap with something like hard hat um or you might be getting into one of our hackathons out at the eth global or one of the other conferences that we're doing either way um I'm keeping this repo up to date and always doing these new videos to show you um how to use the how to use the metamask SDK in its current form the most recent versions right now it's in a developer preview we will show you a few of the different um packages that you can use for the SDK there's different ways to use it uh we have three different branches in this repo I'm really excited to kind of show you that but what is the metamask SDK um the easiest way to think of it right now um in kind of its developer preview form is that it's your user's way to connect to metamask extension or metamask mobile through your dap so it's uh pretty easy to install into your application depending on kind of how deep you want to go or how much um functionality you want to create around it it's pretty easy you import it in you instantiate the SDK and anytime that you call ethor request accounts in other words try to connect to the metamask extension your users are going to get the option of connecting connecting to the extension or uh metamask mobile so that's really cool it's a um it's a really simple way to make sure that your users can connect to both of them no matter whether they have their metamask on a phone or whether they have the metamask in a browser so here are a few links that are uh great for this uh this presentation here we have the uh the first tiny URL is to the repo where you can find all the code for this demo the second URL here is for the slides that we're looking at now um the third URL is a more detailed video uh from Emily who's one of our Devils on Linea to show you how to get uh started with Linea but also kind of what Linea is we're also going to go over um Linea very briefly in this presentation and then get right to the demo finally we have our docs. metamask doio SDK where you can find all the docs on SDK and all of its uh many flavors we're going to be focusing on the JavaScript SDK today and a few others um but you could also use the SDK for Unity iOS Android react native you can build an electron project with it so there's lots of different uh ways to use the SDK uh on the platform that you choose so the basic agenda is that we're going to have a demo app that we're going to be looking at we're going to review Linea we're going to review the basics of the SDK and that project uh when it gets to the project the demo part we're going to clone down the workshop install the dependencies configure the environment variables review the different workspaces in this mono repo that we have and then we're going to build deploy uh out to Linea and then test our front end application make sure that we can mint um the nfts inside the uh application and make sure that the interactions with wallet State and sync Etc work so here's a little preview of what the workshop looks like um it's a very it's a contrived uh demo for sure most demos are uh but that's so that we can get straight to the point show you how to use the SDK and these various Technologies together without putting a lot of other fluff into the um into the demo but basically you have this tickets page where you can mint a general admission or a VIP ticket you can click a connect button to be able to connect to metamask extension or mobile once you're connected you have uh the ability to display information about the user um make sure that you keep your application state in uh sync with the wallet State Etc when you click that connect button using the SDK this is the modal that you'll be uh prompted with so no matter whether you're using the the regular SDK we have some react components you can also use it with web 3 on board and potentially a few other uh convenience libraries out there soon but once you click the connect button instead of going directly to the extension it gives you an option do you want to connect to desktop or mobile and if you choose mobile you can pull out your phone as long as you have metamask on it open up the QR Scanner scan that and it will connect you in the background to your dap which is uh a really great thing to be able to do for your users once you get connected and once you mint some tickets in this application um you'll see that you have um some stuff up here at the top um we can tell you the user whether they're connected to the extension or mobile um this is less something You' probably want to provide in your app but more something as a developer you're going to want to know there might be something you want to do um differently if they're connected to extension or mobile I can show you a few of the reasons why you might want to do that but for the most part uh whether they're connected to extension or mobile it's pretty much the the same experience you work with the same window. ethereum object underneath the hood which is pretty cool um it'll show what chain they're connected to um we want them to be on Linea for this demo but uh if they're connected to another chain then we want to show a button there that allows them to switch over to the right chain we're going to show their wallet address and the amount of balance that they have in their wallet for the uh eth uh considering the chain that they're connected to here here you see the two different mint buttons for the general admission and the VIP tickets this is for a fictitious event called eth Atlantis the best ethereum conference Under the Sea um so it's not real and then down here once they mint a ticket we also want to be able to give them some uh visual cues to show that hey you just you just Meed a ticket or you've Meed another ticket we want to show those tickets at the bottom and how we're achieving that is we're calling into the contract um and we're basically getting the code for the SVG G the token ID and then calling another method to be able to present that to them in the uh front end application so pretty cool Linea so what is Linea so Linea is a type 2 uh ZK rollup it's not a layer one so it's Layer Two so it's a separate blockchain that increases transaction speed and throughput um while partially deriving its security from the ethereum evm right it pulls off that exucation layer away from L1 they rely on ethereum for data availability and post their transaction data uh back onto L1 ethereum uh rollups are the most widely accepted implementation uh you have optimistic rollups like arbitrum optimism and bass and then you've got ZK rollups or zero knowledge proof rollups which are you know Linea ZK sync polygon ZK evm scroll and Stark net so what is a ZK evm we're just going to briefly touch on it here um again if you go back to the beginning of the video we have those links to where you can find out more but it's a zero knowledge ethereum virtual machine uh it executes smart contract transactions in a way that uses the existing ethereum infrastructure in a way that uh ZK proofs can understand so that kind of you know the ZK proof thing that happens behind the uh scenes you know under the hood it's not something as a developer you really need to know about um just know that if you want to use Linea uh and this specific L2 uh ZK evm it's no different really than using ethereum it's it's an ethereum um equivalent so um yeah it's basically it gives you the ability to um use the ethereum infrastructure in a way that uh the proofer works by submitting programs that uh are translating into math pretty much uh it pulls out a bullion true or false um and then that's done by arithmetization which is a difficult process we're not going to go much into that uh because it's difficult um but uh again that's all underneath the hood not something you really have to know about if you can deploy something onto ethereum if you can deploy something onto polygon then you can deploy something onto Linea the code that you write in your smart contracts you write it with solidity right um and for the most part Linea supports all of the normal op codes that you would be uh used to when when you know writing and solidity there are a few edge cases we're not going to go into all that you can check out Emily's video and she can talk more about that but basically it's a type two and uh I said evm equivalent it's fully evm equivalent so the same things you can do in ethereum uh with solidity you can do with Linea you don't have to change the way you write your contracts you don't have to change the tooling uh none of that just deploy out to Linea anyways uh it's probably not the best description of Linea other people can do it better but um it's definitely something to look into uh the whole reason for using something like uh Linea this type 2 ZK rollup Layer Two is to um you know have cheaper gas transaction fees on the blockchain um so and and to be able to do it in a fully kind of evm equivalent way metamask SDK in adap basically uh for your user the way that it works is you have a connect button um we kind of determine whether there's a metamask extension or not especially if they've already connected to SDK um if so we'll connect them to the extension if not uh we'll show that uh QR code that's if they've already connected before with extension uh it'll it'll kind of do this uh flow here otherwise when they first use the SDK what really happens is they click the connect button you see that modal they have the op option of choosing extension or mobile and uh it just gives them another option another way of connecting to your dap from extension or mobile here's a few references here I'm not going to leave this up too much uh or too long this is just our developer resources there's an SDK guide here you can find out all about our SDK um you can find out more about Linea and also about our metamask Improvement proposal uh a way to kind of as a developer part of the community you can be part of changes in metamask so I just wanted to throw those out there and at this point let's go ahead and get into the demo so let me go ahead and minimize this so the first link we showed earlier um we'll go to this repo here this react SDK Linea workshop and from here you can get the code that you would need in order to clone down this repo and we're going to do exactly that uh before we get too far into this I do want to show you really quickly just on npm we have the regular metamask SDK and some basic docs here you can find more docs on metamask doio uh docs. metamask doio um the basic SDK is what we'll go over first and then we will go over how to use the uh SDK react UI which is uh basically a context provider that you can pull into react uh to kind of manage your wallet uh State and we also give you a button that you can just drop in so this is kind of the more complex way uh of using the SDK uh the kind of roll your own customize everything the way that you want to which I really like and then we have the react component which you just basically um pull in a provider and then drop in a button finally we have the web 3 onboard uh metamask so this is great because um if you want to support multiple wallets this is probably the direction you would want to go in and we'll have examples of all three of these um inside this repo I think what I would point you to is is these different branches we have here so the ones that you want to pay attention to are these top three these other ones are just uh work that we've been doing in the background but we've got the main branch which is uh kind of corresponds with this npm package here the metamask JavaScript SDK then we have the ad react UI components branch which would correspond to this react UI uh package and then you have the uh ad web 3 onboard which would correspond with this npm package here again if you want to connect to multiple wallets if you're not just connecting to metamask want to give your users that option of connecting to more than just metamask then you can use something like that and this one we'll just have a very basic uh example typically you'd want to use this again you want to connect to multiple wallets or you're kind of familiar with web 3 on board already we won't go too deep into it but we'll show you the very basics of what you need to know to kind of get all that set up so again we're going to start with the main branch here uh we're going to copy you know the the GitHub and go open up a terminal so that we can do this and look I've already got it pasted in here we're going to run get clone uh and then use that URL that we got from the repo we'll go ahead and uh CD into react D SDK Linea D workshop and go ahead and open up visual studio code so um once you get to this point I think the best thing to do is obviously make this uh bar over here a little bit smaller you want to take a look at the navigation bar over here on the left and open up this read me and what we're going to do is kind of full screen this maybe even bump up our font size a little bit here and um definitely try to you know if you really want to know as much as possible read through this top section here this just tells you a little bit about the project why we set it up the way that we have um and we've been iterating this thing for you know more than 6 months so there's a lot of really good kind of practices in here and we're continuing to make it better kind of every month and every version of SDK that comes out every new package that supports SDK we try to fit in here as long as it's something that you can do in JavaScript and react but what I would really uh suggest you start is through these steps we have 1 2 3 4 five 6 7 8 9 10 steps to kind of configuring cloning down configuring uh building deploying and testing out this application that if you just walk through this read me you're going to understand the entire project and that's exactly what we're going to do here today we're going to walk through all these steps and test the initial branch and then we're going to kind of uh switch our branches to those other two versions and just show you the basic uh lay of the land so that you have an understanding of how to use the SDK in all three different scenarios if you're in a hackathon this video and this repo are going to be uh hugely helpful for you because it helps you kind of cut to the chase get it installed very quickly and move on to the other things that you're doing in your or hackathon so we've already ran uh these two commands here we've already cloned it down we've already um done all that so we want to run npm install next so at the root of the application we should be able to run npm install and again this is a monor repost so we have this kind of blockchain directory and we have a web directory um by running npm install at the root this is going to install packages at all three levels so at the root at the blockchain and at the web um workspace uh kind of folder directory so we'll give that just a moment here and our next step is going to be to create an infura account so if you don't have an infura account already and of course you could use something other than inur but um inur is a consensus product so we're using that so what I'm going to do real quick is go and copy my um let me go ahead and show you what I've done here so when I come to infu and I set up a free account I can create a new API key I can choose web 3 API give it a name here and then when I create it I will have something um like this this eth Atlantis demo and I can grab this API key so I want to go ahead and do that don't worry this will be gone as soon as I create the workshop um so you won't be able to use this one you'll need to set up your own and let's head back over to the application here so we have gone through the first few steps we've installed we've got our node modules Now set up in our web our blockchain and our root directory and we've created an infura web 3 API we gave it a name we copied the um the in the infura API key and what we're going to do is we're going to go into our blockchain folder in this environment variable here we're going to copy this and basically paste it and we're going to rename it Tov and I think I just lost my inferia key there I sure did go grab that again copy so we're going to paste that here and then over in our web directory we all we want to do the same thing so we're going to copy this going to paste it and we're going to do the same thing now let me explain uh this file real quick um so this file all that we're doing here is we're telling our front end application what chain we want to run on and I'm giving you the option of two different chains here to set up you can set up Linea you can set up Mumbai we're going to go ahead and roll with Linea we've already got that uh kind of here so that when we run the application if you're on if your users on any chain other than Linea it's going to prompt them to switch over to the Linea chain uh the Linea gly test net by the way um so good we've got that done I do need to actually put in my private key here so I'm going to pull this off screen for a minute I'm going to get that private key and I'll show you how I do that so we're going to go into account here we're going to click on Account Details and there'll be a way to get that um that private key from inside there so let me do that real quick all right so I've actually put my private key into this environment variable file here I'm not going to show you that because um well I don't want anyone to have my private key and you don't want anyone to have your private key Either um by renaming these environment variable files Tov we have get ignore files in here that will ignore those envs we have them kind of at the root level here so this will ignore that so it won't get uploaded to GitHub right you never want to upload your environment variable so your API key your private key or anything else that's kind of sensitive information like that where's our read me at here it is okay so we've we've done all this we've uh kind of filled out our environment variable files the next thing that I would kind of point out and a big change in this Workshop since the last time I've recorded this is that truffle has been sunsetted truffle was a consensus product that pretty much did the same thing that hard hat does and truffle was great um I really loved using it um but since it's been sunsetted I am now rebuilding the entire Workshop using hard hat so one thing I would point out is your hard hat config which I kind of showed right here um but it's located right here inside of your blockchain directory and I've done the basic setup here in order to use um type chain and ether 6 um a few things I would point out is the solidity version when working with Linea right now um it only supports up to 8.

19 uh solidity version 0.819 I've also put a path so that my artifacts from building my contracts get saved out into my web directory right here inside of web Source lib um uh yeah it'll it'll show up here once I build we'll see that and then I've got my two networks set up so I've got Moon bu and Linea test net here but know that you could copy one of these over and um go to chain list.org or something and find the information for another chain and you could deploy to that one as well if you did that um you would need to come over to your package.json and you would need to add a new deploy script but you can see some examples of ones here already so if you wanted to deploy another chain and use this project as a starting point you could totally do that all right let's get back to our read me here so again this step is just like hey check this stuff out make sure that you understand kind of what's going on here step four is kind of once you're logged into infura once you've got all this stuff done you probably want to go get some uh test uh Linea eth some Linea test net eth so you can do that at the infura faucet just go to this link um once you're logged in and you can get 0.5 per day every 24 hours next thing we want to do is run npm run build so there's not really a lot of steps like right there's there's uh clone install set up your environment variables uh if you've already got a an API key from Linea I'm sorry from infura you're good to go and then you're running npm run build so what this is going to do is it's going to make sure that our contract code and our front end code code uh none of them have any errors or anything in them this will also compile our contracts along with it so it's kind of going to do both it's going to compile our hard hat uh compile with hard hat our solidity contracts and check our code for us so let's run that hope that there are no errors if there's an error it will show you right here and you'll be able to quickly go fix it so it looks looks like uh we made it through no errors and let's also look now in our Live directory you can see that we also have this artifacts uh folder so there is some stuff going on in the project so when we want to call a mint function or we want to call one of our public methods on our contract well we will need to import um some of our our eth tickets uh basic uh ABI in order to access um in order to with ethers create a contract kind of representation of our contract in typescript and be able to get full typings and everything on top of that so that's why it's uh deployed there into our web directory but you really not to know about that you can dig into it a little bit more yourself if you want to um cool we've got the project um built we have the contracts compiled and now we want to deploy to Linea test net understand that this command won't work right here unless you've went into your blockchain environment variables file and put in the API key and put in your uh your private key right it uses that private key to deploy that contract so you want to make sure that you've done that or else this will not work so let's go ahead and run this deploy for Linea and what that's doing is it's using the hard hat configuration to know what uh basically what network we're using the Linea H what chain and and look it's here it's deployed our contract pretty quickly it's giving us a a contract address um and that contract address we have a script that's run let's go ahead and take a look at that real quick I just want to show you like everything that's going on because this is this stuff takes a long time to set up so we have this deploy script here that is going and kind of copying that contract address and shoving it into this config Json so this was empty right before we started right once we deployed it added it uh it added it there so if I deployed to Mumbai right now it would also add one right here a contract address so whatever the last contract that we deployed it will add it to the correct um uh you know config for that chain if you added some more chains again you would also have to come in and update this config to have that other chain in there same thing would apply right all right so um finally I think we're kind of at the last step here um this says to paste the contract address into there but you don't have to uh I've updated this read me uh in the other Branch but I didn't update it here this is done automatically for you I didn't like the idea that you had to paste it in there so I we wrote a script to do it automatically and at this point we can run npm run devb testet I'll have this updated by the time someone watches this video so we'll run npm run Dev test net now what we're what this command here is doing is it's going to run our front-end project uh against the contract that we've just deployed and also taking into consideration the chain that we've told it to uh work against which is Linea so we'll go ahead and run this command and now we should get our react V uh react typescript project and here it is is so great uh I'm going to cancel this and I'm going to do something really quick here I want to make sure that they're I probably run this a thousand times so I want to make sure that um I'm just deleting any local storage so it's not remembering any of my previous user sessions and now I will click connect metamask and this is what your users would see for the first time and we've got desktop or mobile that we can connect to so let's try mobile first uh we'll do both of them um so I'm going to open up metamask and I'm going to connect using so basically opening up metamask see if we can see here and then in the top right hand corner there is a uh and I'm actually going to set this on a different chain to I'm going to set it on I don't know something like polygon main net before I connect right CU I want you to see something I'm going to hit the scan button I'm going to scan the QR code it's going to give me this and I'm going to hit connect right and now you can see that we've connected but I'm on the wrong chain in my metamask wallet so the application has figured that out I built all this in for you so that you don't have to do this so you have good examples of how to do these things and it gives us a switch chain button which is really cool so if I click this uh it's going to prompt me on my metamask mobile to switch networks I'm going to click on that and now now we're on the correct chain now we can we can do more stuff um cool so that works uh I'm going to go ahead and disconnect um and I'm just going to make sure that I'm not connected uh to any sites in my mobile wallet by going to manage connections and just doing disconnect all I think it kind of already did that for me um SDK just kind of works that way and now we're going to connect to the desktop so now we'll see it connecting to metamask extension I'm going to select you can't do this with mobile but with extension you can I'm going to select two different accounts because we want to test a few things out we want to make sure that the way that we're using the SDK the way that we're keeping our wallet stay in sync with our application St sync sorry the way that we're keeping our wallet state in sync with our application State all works so let's go ahead and connect both accounts and again it realizes that I'm on the wrong chain uh currently I am on uh Mumbai so that's not good it wants to switch me over to Linea let's go ahead and do that perfect everything updates right so some State just changed in my wallet and the and the application reacted to that I'm going to show you how that's all done in just a moment too but at this point let's go ahead and just test everything out real quick um so we went to Mint a ticket we're going to Mint a general admission ticket and and that will give me a confirmation here I got to wait a minute all right the transaction has completed we now see our ticket there if I were to meant another ticket over on the VIP side it would give us uh so notice we'll have two different color tickets here we've got a blue ticket to represent general admission and we've got a purple ticket to um represent the VIP uh notice that these you know uh it's kind of contrived but these are unique SV SVG nfts right they have different uh numbers on them which is the kind of token ID they've got GI GA versus VIP they have a date and they have a wallet address on them and a different color gradient background so what you know we have onchain SVG nft tickets that are unique that that our contract has generated and would allow someone to gain access to you know our amazing eth Atlantis event Under the Sea um one more thing I'm going to show you here and we're going to go in the code and just a moment just see how all this works but I can click this add nft button and what we're doing right now is we're calling wallet watch asset in the metamask API so this has nothing to do with SDK but it's something I wanted to show you um the way that this function this RPC um endpoint used to work was it was for adding tokens to your wallet that didn't already exist maybe you deployed some currency at an event you know uh like in eath Denver we did uh the buffay token that would get you access get you food at the food trucks right but when people um got those initial tokens in their wallet during registration it didn't show up in the metamask wallet because metam Mass doesn't know what token that is so this wallet watch asset was a a an RPC in point be able to add a token to your wallet well it's been updated recently to also work with nfts and it kind of makes sense right um an nft is kind of like a token also um you have to pass a few extra parameters right you got to tell it what contract address that nft is deployed on and what chain is deployed on uh but otherwise you know um it'll add the nft to your wallet so we can hit add nft here and if we go back and we look at our wallet and we go into the nft section we can see that our our eth ticket has been added here if we add another one let's go Ahad and add this one we can see that we now have two there yep see e tickets to perfect so with all that out of the way let's go dig into the code real quick um we're only going to dig into the like the the nuts and bolts of how all this works in this application because the next two sorry this this branch cuz the next two branches are going to be very similar to this Branch there's going to be different ways of using using the SDK so I'll try and go through this really quickly here but we have we've got a bunch of components here so if we go to our app.

TSX page we can see that we have this metamax metamask context provider so when using the regular JavaScript SDK um you have to do all this work on your own right so what is this metamask uh context provider well that is a hook that we've created um that basically keeps your wallet state in sync uh with your application and this is just a uh react context provider it watches all of the various um events inside of uh the metamask wallet um and when we show you the next branch that has the metamask react UI understand that this is all stuff that we've provided and wrapped up in uh into a nice package for you so it's interesting to look at this kind of custom version of it cuz it's very similar to what we've kind of wrapped up and packaged for you so that you don't have to do all this work on your own this provider here is almost 200 lines of code and I know that you probably don't want to write that so by using the react uh UI components which we're going to show next you could save yourself kind of um doing all this work here we can see the only really thing that we've done with the SD in this application is we've imported the npm package and we've uh or sorry we've installed it we've imported it at the top of this file and then we instantiate it here once this instantiation is done any time that you call um eore request accounts find that real [Applause] quick so anytime that uh you call this ethor request accounts you get that little modal popup that uh connects you to extension or mobile if you didn't have SDK installed when you called eore request accounts it would only connect you to the extension so that's what the SDK is um now um what else do we have here so in our app. TSX we have you know the a kind of a wrapper around of our around our entire application we have a navigation a display and a metamask error and um the navigation is it's fairly simple um we're pulling in our used metamask uh hook so that we can get access to our wallet and all these other kind of uh is connecting connected metamask SDK SDK connected you can grab all the stuff from this hook um and then we are conditionally rendering you know a uh to show whether they're connected to extension or mobile to um give them a a button to be able to connect to metamask to be able to display their chain information to be able to display their address uh or to be able to terminate the SDK connection right so that's our navigation file and go check that out on your own we've got a metamask error uh component which I'll show you in a moment we got that switch network uh component which is uh kind of aware of if you're on the right chain or not and then we have tickets and tickets owned now this is where we're going to be uh calling that mint nft so what we are doing is we are pulling in the E tickets uh Json from the ABI that's from our Live directory artifacts that our hard hat built out for us so that we can get uh access to that contract ABI and then we can use ethers to create a provider a signer and then to um you know create a variable called nft tickets where we're creating a new ethers contract uh where I can then do something like just cut cut this out real quick now I've got um I can check in here let's see there's my mint nft right there right I can click on that and I you know so I've got typing for um all the methods on my contract basically I could call Max Supply from here I could do a few other things so this is our mint button inside of our tickets page and um the way that that's set up is we have this kind of mint ticket uh function um that's the majority of the complex code on this page and then besides that we map out the total number of tickets that we have which is GA and VIP and then our ticket types has you know whether it's uh the ga or the VIP we have a onclick mint ticket button which um accepts either 0.01 eth or 0.02 and if we go look at our contract that's kind of how we determine whether it's a VIP or a ga ticket uh you also see in our contract we have this wallet of owner function which we're going to get to in a moment and we have this um mint function like those are the main ones that we call along with token URI those are like the three public functions on our contract that allow us to Mint allow us to get the tokens uh for the nfts that a user with a certain address owns or to be able to call the token you are on function that will allow us to display that nft on the page for our user so with uh if we take a look at this this section right here I guess uh right here is the tickets component and then down here is the tickets owned component so we look at tickets owned um basically same kind of thing right we want to get access to that contract um and here's our add nft um function which allows us to you know be able to add that nft to the wallet all it takes is a method you know the method name and a few prams it needs to know it's a erc721 nft it needs to know the contract address that it's deployed to and the token ID for that specific nft that's all it needs to know and it'll add that nft to the wallet for your user um outside of that we have a uh wallet of owner function here which we have a use effect so in uh what we want to happen is whenever the user first visits this page or if they if they've already created tickets uh minted tickets on this page we want when this component runs to go and check wallet of owner that's basically going to call into the contract and say hey my user has this wallet address and I want to know if they've uh Meed any tokens on this contract if so this will return uh so this call right here will return the owned tickets that they have and then what we'll do is we'll iterate through those and we'll push them into an array and then display them out on the page uh with this list of tickets right here right so the list of tickets is this little component right here that basically just uh renders out a nft for each one of the tickets and we have an add nft button on there um yeah so that's pretty much it um I don't think there's anything else to really go over we have this this is supported Network kind of function which this was kind of hard to write but this is what kind of helps us to make sure that they're on the right chain um you know we've got some CSS that's not really anything to look at um again it's a very basic application it's a demo application um but yeah I hope that this really helps you out um is there anything else that we haven't tested on here I guess we could uh we could switch to another account make sure that works we're going to switch to test to account now we should see that there are no tickets here because with this other account I have not minted any tickets but notice that the address Chang the amount of eth that I have is changed um and yeah I think that's I think that's mostly oh I could I could mint a ticket and then cancel it to show you one more thing so if I hit reject we'll see our little uh error action rejected uh come up down here so this is our error component and if you just click on it it'll go away right and of course uh if they were connecting and something else happened right they didn't reject it but maybe uh let's say that the chain I don't know there something happen maybe the contract uh doesn't exist or something like that and I hit confirm um of course the transaction wouldn't go through so we'd probably get an error uh in that case as well but that catches the error and displays it to the user so there's pretty much everything in this demo that you need for a fully functioning dap um great um with that out of the way I think what we're going to do now is we are going to discard no we're going to keep these changes here now we'll just do it again uh we'll go and discard these changes better yet let's just copy this contract address so I can go ahead and switch branches here discard the changes and what we'll do now is we'll switch over to one of our other branches so um let's go take a look at what that that branch is called real quick so we've got view all branches let's go for add react UI components now there goes my copy paste so let's do get check out add react UI components so our code just switched out on us right and I think uh we also need to run npm install let's also make sure that we're on nbm 20 uh we should be but uh this kind of Workshop requires that you be on node version 20 just in case I haven't mentioned that yet and we'll do an npm install so we need to run npm install because this uh version of the workshop has slightly different uh package.json so we're using instead of metamask SDK which kind of requires you to do all that work that I showed you before we're using SDK D react UI so uh let's see how this project differs right so one we don't have that used metamask hook anymore what I've done is I pulled out just the parts that were kind of global state from the application which are like the erroring and uh when someone mints a contract uh and I've just pulled out that Global State and put it in its own provider here um in our components we no longer have a switch Network button because uh the SDK will do that for you um yeah and by by by not having that hook right we saved quite a bit of code this is only 40 lines of code and it and it pertains to our actual Global uh react State versus the wallet State keeping that wallet state in check but if we go over to app.

TSX we'll notice that there's a little bit more code here so um the cool thing about the react components library that we give you um is that you can use wagm hooks with it so we've got a wagm config um and then we pull in Json RPC provider and injected connector so what we're going to do here is we're going to those same SDK options that we would have needed for um doing all of the work on our own with the JavaScript SDK we're just going to create like a little uh variable here to pass those into the metamask UI provider so when you import this package.json right here the first thing that you want to do is you want to go over to your app. TSX you want to pull in that metamask UI provider and you want to create some options for it and pass it in now you could just be done there right you could be done there and the SDK will work okay but um what we've done instead here is um we've actually pulled in some some wagm hooks to uh be able to uh give it a little bit more information about what we need um so we have this wagy config and you can see our config here for that this gives us the ability to tell us uh you know tell it what chains that we want to support and um this is kind of a a an alternate step that you don't have to do with this library but I like to do because I want to make sure that they're on the right chain right I could have not done this at all and the SDK would still work I would just be using this one provider uh and this one con this one options uh variable but instead I've pulled in the wag me config I've set up the linear chain I've told it what uh the Json RPC provider is for that and I just got this from uh infura that's my infura ID uh let's make sure that that's the correct one I have to pull this off screen for a moment all right so let's go back over to that oops yep I needed to update that and this really should be coming from our uh environment variable file um I'll update that so that you don't have to do that so you can just plug it into your environment variable file and it'll work um so when you pull down this repo that should be there already um great so um with the wag me config it just allows us to you know pass in add some additional configurations and you'll see uh the reason for that here in a moment so let's go ahead and go back to our readme real quick and what we're going to do is we're going to run npm run build we're going to deploy to Linea testnet and we're going to watch our lib config we can see that it's updated that with the deployed contract address wonderful and then finally we will run the dev testnet command perfect and you know just basically you know let's make sure again uh you can always come in here to application just make sure that uh this is kind of wiped out um connect we can connect to the desktop and then from here you've got uh you know active chains so here's our Linea chain um hopefully this will show up better as Linea test net uh sooner than later but your um your user can come in here and switch their chain um you can also set it up to where you know we're uh if they're on the wrong chain uh they'll get a switch uh Network button to be able to switch back to the right chain but let's go ahead and move on to the next uh the next repo which shows you how to use web 3 on board and what we'll do here is let's um let's copy this again I'm going to put this over on the side so I don't have to do this again all right so we're just going to discard these changes here um I don't know why I have changes here oh we want to keep those um we'll just set that up again when we get back on the other chain so let's go ahead and run get checkout uh add uh web 3 on board all right and let's go ahead and check out what what we have set up here right so um first thing we would want to look at is the package that Json notice that we are running uh web 3 onboard metamask web 3 onboard react um those are the two packages that we want to install the web 3 onboard metamask you need to install the alpha and let's actually go ahead and check that real quick so let's just copy this and we'll go over to npm and we'll paste it in here and see what the most recent Alpha is and Alpha 4 is the latest one so that's one we want to be using um again these are Developer previews so if you're going to be using them don't just use the latest version here go with the Alpha version it'll make sure that you're getting the absolute uh kind of latest code that's the only Point around that so in our app. TSX a little bit more kind of setup here but it's kind of the same we have um this uh ethereum Linea kind of test net information set up we've imported the web 3 onboard provider and initializer and uh the web 3 onboard metamask SDK we have our metamask SDK options as usual um we set up this metamask SDK wallet right and we want to pass this into the web 3 onboard wallets option right when you're using web3 on board you can set up a number of different wallets um you can use web3 on board and set up those wallets but if you want to use metamask SDK versus just regular metamask you do need to pull in this specific uh package here and then uh create use this metamask SDK function uh pass in your options for the SDK and then pass that into wallets that's all you have to do and now you have this web 3 onboarder provider so you know all of the uh components down here will have access to that and um and then on the navigation page let's go take a look at that so on the navigation page again you're pull let's go ahead and do an npm install too that might help we'll do an npm install to make sure we got The Right Packages showing up and we need to [Applause] get I need to put my API key in here again because I forgot that again so in our blockchain environment variable file because I'm switching branches I have to keep updating this uh INF fura key looks like we're good there oh know it carried over for me and then yeah so we should be good to go um and then our contract I don't remember the contract from before so I'll just go ahead and deploy another contract again well we don't even need to deploy the contract we can just go ahead and run this and I'll go ahe and do it so just deploy that contract that will update our config so we should be good to go there and then we can run Dev test net again oh but we were looking at the navigation uh file so um now we've got our npm uh installed now now we can see that web 3 onboard react is being found and what all we're doing here is um we're using this used connect wallet Hook from web3 onboard react and we can pull in wallet so we can have information uh we can get wallet. address all that kind of stuff um and all we're doing is we're awaiting this connect on click we're uh awaiting this connect so wallet connected equals a wait a wait connect and uh then we have a disconnect right so a connect and a disconnect this button will bring up the web 3 onboard uh kind of modal if you will so again what did we need to do in order to set up web 3 on board to be able to support multiple wallets including the SDK well we've pulled in these two packages here we went to our app.

TSX and we have um pulled in these two Imports we've created these two variables here we've instantiated the metamask SDK as a wallet we've passed uh that and the chains into this initializer here and in wallets we pass in the metamask SDK wallet we put in the web 3 onboard provider and now with that in place we can go over to our navigation page here and simply call await connect um of course you need to pull in you know the connect and disconnect uh functions here as well as you want to pull in wallet because you want to be able to potentially have access to you know the address uh chain ID and all that kind of stuff right so we've now run uh we run the the dev test net command which means we're running live we can open this up and kind of close that down I always like to again just go in here and make sure that we have cleared out any cache and now when we hit connect we get the nice little web 3 onboard modal and when we click uh metamask we will get the SDK we'll connect with it and boom we're connected and this gives us uh this little thing down here which has you know our address the amount um all the things that we could currently need to do uh we could connect to another wallet uh we could potentially select different CH here um it it knows that Linea test net is the only one I want them on so it's the only option but this is really cool uh this is probably the option that you want to go with if you want to connect to multiple wallets and uh with that we can hit disconnect connect again right it's just going to do the same thing over again um we can connect with uh metamask mobile here let's try that out real quick now it's connected go down here so you can see that I was connected with ethereum when I started and it gives me the ability to connect to Linea test net now so it'll switch it will give me another prompt here so I can switch Network get myself right back on the right chain and now um you know I can do the things I need to on this uh application um now that I'm connected to the right chain so I'm just going to go ahead and disconnect here um and start to wrap up the workshop I know that's a lot um but basically you have the metamask SDK again that kind of goes with the main branch here in our repo you've got the SDK react UI that goes with the ad react UI components branch and then you've got the web 3 onboard and you can see examples of that in the ad web 3 onboard Branch so between those three branches no matter which one you want to try um go for it if you have any questions you can DM me on Twitter at htb junkie on telegram at htb junkie um I will take time out of my day to help you out if needed um but this is great uh hope to see everyone out at the hackathons hope to see you in my DMs hope to see you using the metamask SDK using it in better ways than kind of a contrived app like this but really kind of pushing it limits uh giving us feedback and everything um and yeah deploying on Linea um it's all uh these are all great tools to be able to use they give your users more options your users uh lower gas uh rates and overall allow you to do all the same things uh with regular ethereum and uh the most options to connect two wallets um potentially using the metamask SDK so thank you very much I hope you enjoyed the workshop and I'll see you guys later