Metamask & Linea 🛠️ Building a full stack React Dapp Using SDK, Infura, Hardhat and deploy to Linea

[Music] hello everybody um welcome to the metamask SDK in Linea react typescript Workshop today we're going to be cloning down a full stack react app that uses the metamask SDK for connecting to extension or mobile um we're going to be using infura and hard hat and Linea my name is Eric bashard I'm the developer relations man at metamask you can find me on socials Twitter telegram GitHub lens Etc HTTP junkie my DMs are always open um I'm the devil also for metamask SDK and the metamask API we also have a snaps devil Linea devil and fura devil so uh anything that you need we have links that we'll cover in this presentation that link to all of our our various Devils but let's go ahead and get started so um today we're going to be using the BAM mask SDK and um the easiest way to explain the SDK especially if you're hacking in one of our hackathons and you want to kind of know what it does uh at a very basic level it connects you to metamask mobile now when you're using JavaScript or you're building a web application then it also facilitates the connection to the metamask browser extension or metamask mobile and this is something that's not been very easy before to be able to connect your web apps to a mobile wallet so we've done all the work uh needed it our JavaScript SDK Works across multiple platforms and we also have react components uh and more to come soon probably for other uh Frameworks as well but yeah so let me go ahead and show you what the um the demo application looks like that we're going to be working with uh before we get to that though a few links so the repo that we're going to be working with today uh is the first link on here tinyurl.com mm- SDK Linea the second link here is to the slides that we're looking at right now also we have a more in-depth Linea explainer if you want to know what Linea this uh L2 um uh if you want to know more about it than what we cover in this presentation then my colleague Emily does a really good good job and I went ahead and put that link here as well and we also have our docs at the bottom here all right so our agenda for today we are going to show the demo app um that's what we're doing right now we're going to review Linea very quickly very briefly um again if you want to get a more full explainer go to the third link here uh we will also be reviewing the SDK Basics and then we will be taking this project cloning it down installing all the dependencies configuring the environment variables reviewing the different workspaces that are in it and then building and deploying that application to Linea test net we'll also test out the front-end applications so that you have a a very whole view of how uh the metamask SDK works and why you might want to use it in many of its different forms so we not only have sdks for different platforms like JavaScript um Unity uh you can build electron apps with it uh iOS Android but um we're going to be focusing on JavaScript today for building web apps um specifically because a lot of our hackers and developers out there that are participating in our hackathons uh this is one of our bounties along with Linea so here's one video to explain all of it in a pretty brief amount of time uh so let's go ahead and get started so the demo application what are we going to be playing around with today today it's a very basic application the point of it is to kind of get all of the code out of your way and show you specifically how to incorporate um infura Linea and the metamask SDK into a basic react application so that's what we do this is what it looks like you might be familiar with connect buttons that connect directly to the metamask extension kind of looks like the screen right here if you click uh if you click a connect button you would get this uh popup to connect to metamask well the SDK is a little bit different what it does is it piggybacks off that uh ethor request accounts call that RPC call and it displays this model for you uh to where you can connect to desktop or mobile so it gives your users the option you know maybe they don't have an extension installed um maybe the extension that they have installed with metamask is like a developer version it's not the one that they want to use use for uh personal use um so it and maybe that one's on their phone so it gives them that choice and we think this is really great and we think it improves the ux uh so that's why we've built it and we'd like to get you to demo it test it out it's in kind of a developer preview right now and hopefully it'll be kind of production soon but we're already incorporating it into other packages like um wagm and web 3 onboard we'll show you the web 3 onboard version today as well as a regular JavaScript version and some react components that you can use so you can pick your flavor of the SDK that you want to use all of them though from a web app look like this when the user connects the application that we're going to be building it again very basic um the main page will uh have a fictitious event called eth Atlantis where you have the ability to connect to a wallet it displays all the information about that wallet that you might want to to your user um we we also have tickets that you can mint these are onchain SVG nft tickets so we also have a contract associated with the project so it's a it's a full stack project um here up at the top you can see all of the navigation and profile kind of uh component for the metamask wallet and its state um you can uh determine whether your user is connected to extension or mobile so we show you how to do that um we show them which chain they're connected to if they're not connected to the chain that we've designated in the application then we'll give you a switch button here to programmatically get them over on to the right chain uh we show the address with a link out to a block Explorer and we show the balance of the users uh wallet that they're currently connected to here you'll see the different uh tickets that you can buy um we have a general admission and a VIP and then at the bottom once you meant a ticket we have a visual component that displays that ticket so that the user knows hey something happened uh my the the minting of my ticket worked I see it now on the page and each of these uh nfts are unique yeah they're not the greatest design uh nft in the world but it is an example of you know a an nft where each one uh in some way is unique by either through color or through a uh token ID or ticket number on there what kind of ticket it is and it also displays the wallet address that purchased the ticket so the way that the metamask SDK Works um if someone has already uh connected before to your application is it will determine that they've already connected to the extension and potentially connect them directly to it um or it will con allow them to connect to metamask mobile you can also pass an option into the SDK where that doesn't happen at all and every time they click that connect button they get a prompt for connecting to extension or mobile this is the the one I prefer and I'm going to show you how to set this up in the project um I'll also show you the option where you can change that behavior if you'd like to as well but just think of the SDK as anytime I have a connect button to a metamask wallet um my user gets the choice of connecting to the metamask extension which we all know and the metamask mobile which they might have as well next thing I want to go over is Linea so what is Linea well it line is a L2 scaling solution it's a type 2 ZK rollup we use Linea for development of our contract in this uh project um basically what an L2 is is a separate blockchain uh layer that increases the transaction speed and throughput while you know partially ding its security from the ethereum evm so it pulls uh off that execution layer away from L1 um and they rely on ethereum for data availability and they post their transaction data back onto L1 in a kind of rollup fashion rollups are the most widely accepted implementation uh and you have optimistic Roll-Ups like arbitrum optimism and bass and then you have ZK rollups like Linea ZK sync polygon ZK evm uh scroll and Stark net uh so what is that ZK evm thing so uh ZK evm or ZK is a zero knowledge uh ethereum virtual machine so what it does is it executes uh smart contract transactions in a way that uses existing ethereum infrastructure uh in a way that ZK proofs can understand it does that all underneath the hood right so it's nothing you really have to worry about just know that it's using that ZK proof underneath the hood uh the way proofers work are are by submitting uh programs that translate into math uh which pulls out a bullion true or false that's done by arithmetization uh which is a difficult process but uh this is difficult we have kind of like four different types of zkm right so uh we have type fours which are high level language equivalent that's like your Stark net ZK sync uh and you might have to use a different tooling change um hard hat might need its own plugin right you've got type three which are partially evm equivalent uh which means that you may or may not be able to use the same solidity code as you've used uh you know when deploying to another chain um but with a type two which is fully evm equivalent which is what Linea is um you have language equivalency I can write in solidity and its bite code is fully equivalent uh fully compatible with existing applications and as a Dev uh nothing really changes no tooling changes and um all op codes are recognized um with maybe exception of a couple that uh you probably don't use anyway but um it I would say that Linea is you know like 98% type 2 fully evm equivalent and as a developer I've never run into any uh situations where like it doesn't uh have the proper off op codes that I need um yeah so that's uh basic uh I mean oh why build on Linea so you know the main reason for building and deploying on Linea is you know to pass on the savings and gas uh and uh the things that a rollup provides to your end user right that's uh pretty much the reason there's a great Community around Linea and it works really great with metamask if you want more uh information on Linea go see the L2 uh Linea explainer that I had uh in the links earlier and check it out so right before we get started with uh cloning down this repo and getting into the code um you should have a decent idea of what the metamask SDK does again it facilitates that connection to extension or mobile but here are a few links that I think are super important especially if you're in one of our hackathons and submitting to uh either our metamask SDK or Linea Bounty so first is the metamask SDK developer resources guide you can find that at tinyurl.com SDK guu we also have um the Linea L2 uh ZK rollup documentation we have a developer portal metamask doio /d developer which you can find lots of different content um around metamask SDK metamask snaps Linea and fura basically all of the content and all of the resources that our Devils want you to find out there it's all at your fingertips uh finally we have our devil telegram chat so if you go to consensus. chat U the link for our chat is right there on top you can there's also links on that page for um getting test net for Linea um yeah so let's go ahead and get uh going with the with the demo um we're going to move over to GitHub real quick and check out the first link that was on uh those links that we showed you above right so this this first link up at top is going to take you to the repo where you can find the code for this demo that we're working with today right it's a react application um and it uses the metamask SDK in fura and Linea so the what we're going to want to do if you're following along is to copy the link to this repo and then what we're going to do is we're going to get clone that into a directory somewhere on your computer let's make this a little bit bigger for you guys let's go and make that bigger so you can see this oh and it was going to change the size of my window there we go uh that is not the link let me try this one more time there we go so uh we will clone down this repo and that will put that into a directory called react SDK Linea DW Workshop so we'll change into that directory and we will open up visual studio code hopefully that's what most of you guys use um so it should be you should be familiar and let's go Ahad and get started so um the first thing I would say is to open up the readme um the readme is going to be the best place to start for this repo um you can follow along you can watch this demo passively this presentation passively and then go home and open up this read me and you'll be able to walk through it just like we've walked through here um the read me starts off with some basic information around what we use in this demo as far as uh our kind of design choices and our technology choices so we can kind of skip past all of that and start with step one uh but I will tell you really quickly that this is a turbo repo um and what that means is uh it is a monor repo it is an application a full stack web 3 application that has two workspaces in it a web workspace and a blockchain workspace turbo repo uh just allows us allows me as the person who created this to allow you to go and pull it down from GitHub run an npm installation from the root level of the directory and uh I can give you commands to Target these different uh workspaces so that it's all very easy to work with so that's the choice behind that obviously the choice behind typescript is because a lot of our packages um have types uh and why not show you like the most uh or or the best way to set up your JavaScript code um in a kind of production Manner and that is to use typescript so uh the first thing it wants us to do is to clone down the repo and change directories into it we've already done that so congratulations pat yourself on the back we've already completed step one uh and we really haven't done anything yet step two is to run npm install and we're just going to run that here from the root directory uh like I said since this is a turbo repo it is going to go and install the packages at the web directory the blockchain directory and even at the root directory um the things that we're going to be doing next is we have these environment variable files in here which we will need to uh the web one's kind of already ready to go so let's just copy that over into our web and just rename it Tov um I'm not going to rename the other one I'm going to copy it uh and rename it so that if we change branches I don't have to stash that um cool so let me explain this environment variable file really quick so it's this is just pointing at the chain that we want the user to be on for our application now some applications can support more than one chain for this very simple demo we are supporting one chain only so if we deploy to Linea I want to I want this application to support Linea and this is the hex version of the chain ID for that uh chain uh for Mumbai if we wanted to deploy to Mumbai which I have scripts in here to help you to do that then we would change this out for the mumai chain ID but what's going to happen here is we have a config file in this application um that basically uh depending on what chain ID that is it's going to have our contract address block Explorer and all the information that we might need to get for that chain in our application um as well if someone connects to our application from the wrong chain let's say that they connect and their metamask or their metamask mobile is on ethereum or some other chain uh we have the ability with this functionality to programmatically switch them over we can go over all that a little bit later but basically this environment variable is already set up for you so we can close that one out um the next one that we need to set up is the blockchain environment variable so if we take a look here we'll say that we'll see that we need an infura key and a private key so what I'm going to do is I'm going to pull this off screen because you should never be sharing your private key uh we can also get rid of this terminal here and what I'm going to do is I'm going to pull up my infura account and we'll go to dashboard and don't worry I'm going to delete this key as soon as I'm done with this demo but I'm going to copy my key from infura also know that if you have a free infura account you also can uh connect to a faucet here uh let's go ahead and do that real quick so let's go ahead and connect to the Linea faucet and get some eth ooh it's down right now well uh even though it's down uh what you could do looks like the the sapoia faucet is up and it's the same process as the Linea so you can just copy paste that in there and it will give you uh 05 test eth on that chain great so that's done we have ourselves some test eth we can go back to our dashboard copy that API key again um and let's go ahead and plug that into to our environment variable file um I also need to get my metamask uh private key and put it in that file so I'm going to do that offscreen all right so I've copied my private key into that file um I will go ahead and show you really quick how to do that in case you're not familiar with it so what you would do is you would click on your metamask uh go to the account that you want to get that private key for and you would click on Account Details and then you would need to click show Private key um and that will get you your private key great um step three uh create an infer account we've already done this we've uh filled in our environment variable files so we can skip down um it I do go over just the hard hat config here which you can find right here so um you can see that we have Mumbai and Linea test net both set up as networks that we might want to deploy our contract to we're just going to use this one in the presentation today um but know that in our package.json we have scripts set up for deploying deploying to either um if you wanted to make this application work with a chain other than one of these then you would need to um add that Network here you need to come create a script for it just like we have here you would want to uh update your config file and and uh and then put the right uh code in here for that chain uh you can find those codes on chain list.

org and you just hit include test Nets or uh you know find the one that you want we do Linea and you can see that here is our Linea test net uh as you see ox e704 and that is exactly what we have here all right um great so we're moving along um we're talking about the uh you know deploying our contract let's take a really quick look at our contract it's nothing special you can go over this a little bit more on your own but it's just uh it gives you the ability to Mint and onchain SVG nft you will see here that we have a total Supply function uh we've got a Constructor uh this wallet of owner which lets you uh this is a basically a public function that you you can call pass in the users's wallet address and find out what nfts they've Meed on this contract which is useful and I'll show you how we use that in our front-end application uh you can also call contract urri uh and more important there is a uh a token URI so after you get those token IDs that uh the user has um has has has Meed on this contract you could then for each one of them call the token URI and get a representation of that SVG nft uh return back to you which is uh exactly what we do we have an a mint nft function um and we we do a few requires here we make sure that the we're within the range of our Max Supply that we haven't gone over our Max Supply that the deadline for minting hasn't expired and that they've uh that they're paying either the VIP or general admission price for the ticket uh outside of that it's just uh generating the nft SVG uh and rendering it uh the top and the bottom of that SVG the rest of it is is just uh you know the the nft and and kind of how that SVG is put together so you can check that out on your own um cool Next Step uh we've already logged into infura and gotten some Linea test eth or at least Le um I have some already in my wallet so we're good to go um and now we want to run npm run build so what this is going to do is it's going to uh basically make sure that there are no errors in my front end or contract code so uh in the web workspace or the blockchain workspace it's going to check all of the solidity and typescript code and just make sure that everything looks good oh we got an error what's this okay so I had paused the video for a moment there because the reason I was getting that air is because we hadn't created an environment variable for our blockchain directory I had not copied this over I put the values directly in the example file and of course that's not going to work because it's not named correctly um so I move the information from here over to an actual EnV file and now everything should work fine so let's run NP and run build but hey uh that's good to know like it catches everything even uh issues with your hard hat config and your environment variable files so um right so because if the environment variable didn't file didn't work correctly um then it won't be able to get the uh the actual values it needs for connecting to your specific networks that's what it had figured out and tipped me off that uh yeah I had no uh environment variable file that it recognized cool so we have run npm run build um now you can do one of two things here you can deploy to Linea test net or you can deploy to Moon by we're going to deploy to Linea because you know I'm kind of biased uh so Linea also if you didn't know Linea is part of the consensus kind of umbrella um uh you know they're they are a team that works directly with you know uh metamask INF fura uh and all the different teams here at consensus so it is our L2 if you will all right so let's go ahead and run uh npm run deploy Linea test net and I'm just going to show you one thing that's going to happen here real quick so this is I've tried to do everything in this project that I I could think that someone another developer might want to do kind of all the little weird things that um like that hard hat doesn't do for me that truffle used to do I don't use truffle anymore we've kind of instead of truffle so I use hard hat all the time and one thing that TR hard hat doesn't do is whenever it builds out your artifacts um it does not give you a networks object inside of your ABI your contract ABI so what we're going to do instead is we have this scripts we have this deploy script that we've written that will uh basically when it deploys our contract um it will output that into our config file because uh if we if we had it in our ABI what we could do is we could uh dynamically call it right here from contract address we could uh import that ABI at the top of the file and we could Target uh the contract address um because we know which chain that we're kind of uh connected to or that we've deployed to but since we don't have that when I run this command it's going to input it right here so we can watch it do that might take a second there we go and as you can see the contract address has been uh put right here in our config.js on and if we were to deploy to uh Moon buai it would also add that one right here um cool so we've deployed to Linea we're almost at the point where we can run the application um y uh yeah you don't have to do this because we wrote a script for it I need to change that in the read me um note to self uh at this point we can run run npm run Dev testet so this uh this is a script that is going to run our web application um it's going to know that we are running against um Linea as a chain it'll make sure that our users are connected to that chain um and you know one thing I also wanted to notice note is that we're in the main branch right now um and in the main branch this is the regular JavaScript SDK from metamask right so it uh I have to do a lot of things on my own with this package um and I'll show you what I mean by that but understand that we also have a metamask uh react UI package which you can basically just drop in a UI provider and a metamask button that will do all the things that I've had to do in this application so this is kind of the easy way of doing things this is like the harder but I've got more control way of doing things so one is at metamask SDK and the other is at metamask SDK react uh the third option would be that if you want to connect to multiple wallets you use web 3 onboard we'll get to that one in a few so let's go ahead and check out um let's go Ahad and run that command run Dev testet it's going to know it's going to say Hey you know they're on Linea it's going to configure the application so that um the SDK is instantiated uh it's ready to be used in conjunction with uh the connect button uh and then I've created the connect button on my own so there's some conditional rendering going on right now right now it knows Eric's not connected yet to this application or the user's not connected yet to the application and when I click connect metamask that's going to call Ether underscore request accounts um I think I might be connected with my mobile wallet let me just make sure that that's not the case real quick yeah so that was the case uh I was connected at the time I had just been testing this before I started the video so I was connected with my mobile wallet um so let's go ahead and test that we can connect to our Mobile wallet so one thing I'm going to show you real quick is is that I am currently connected to the ethereum chain so uh if you can see that at the top there uh up there says I'm connected to ethereum now that's not the right chain that I need to be on for this application but let's go ahead and connect anyways so I'm just going to scan the QR code and then you'll see that I get the prompt to connect to metamask here and I'll go aad and click that and you'll see that I'm now connected uh to the DAP and and everything shows up look here's my address um I don't have enough eth for it to actually show up here uh I've got so little eth uh 0.00006 eth so that's why it's showing 0 uh but notice that it says switch chain right so what we have in in this version is that we have this hook called use switch Network which determines whether or not we're on the right Network or not and uh if we're not it will serve up uh well this will this will be used with our component switch Network and um yeah it will give us a button that allows us to programmatically switch the user uh over onto the right chain and the way that that's done is with this try catch uh basically we do um we do a ethereum do request uh for wallet switch ethereum chain and then if there's an error we will do add ethereum chain because the chain has not been added to the wallet so it kind of does either or depending on what state the user's wallet is in do they have the chain or not if they already have the chain we just want to connect them if they don't have the chain we want to add it and then connect them and this piece of code right here will work for extension and mobile um sometimes you can get away with just doing the uh switch ethereum chain on extension but if you're using if if your users are connecting to extension and mobile you want to do this full try catch here okay um awesome so now we are connected we can hit the switch chain button to get us back onto the right chain and you'll notice that it'll say hey uh do you want to switch Network yes I do I go there now now it's updated and notice how all of this is kind of reacting right so anything that happens with my wallet whether it's on mobile or extension any anytime the balance changes the chain changes the address changes uh anytime any of that stuff changes uh my application is reacting immediately to it and the reason is because I have a hook set up this is a uh metamask provider uh if you're not if you're new to react uh a context provider is a way of kind of managing Global state within your application and I am managing the wallet State here it's a lot of code it's uh over 200 lines of code which has connect uh functions to connect to metamask uh to instantiate the SDK uh to watch all of the various events coming from the wallet that's how we keep our state updated with our application but this is a lot of work right um doing all this work writing all this code took me uh and actually someone else quite a while to get it all right uh make sure it all is written and type typ script and then beyond that we have a navigation so I'm not showing you this stuff to to move you away from using the regular met metamask SDK the JavaScript one uh which which is right here um in fact I like this option I like having full control over what my navigation looks like and and and having all the control over this but some people might just want to uh pull in that provider that they don't have to write and pull in a button that does all this conditional rendering right here like if if the user hasn't connected yet show them a connect metamask button if they have connected then show them all of these other various buttons and and do all the programming for it um that's that's 250 lines of code and believe me it's not like uh a 30-minute task to write all of this so we'll be switching over to another Branch where I remove having to do any of this where you don't have to do any of that stuff uh and you can just drop in you can import a uh metamask react UI component that uh sorry package that will give you a component that is this uh kind of like this context provider and then you it'll give you a component that is this navigation all this all this navigation stuff it'll look different it'll kind of behave a little bit differently but it's a quick way to get a a metamask connection into your react application all right um so we're we're testing things out here um if I were to disconnect and then connect again so what that just did is it disconnected me from my uh metamask Mobile Wallet um and now I'm going to connect to desktop instead so instead of connecting to metamask mobile let's connect to the desktop cuz I want to show you a few other things again this branch has everything that that you need to have full control over how you work with the metamask wallet it's all really good stuff to learn so I want to spend a little bit more time on this one than we do the other ones even though the other ones show the easier way of doing it so let's connect to two different accounts CU we can do that with metamask extension um and let's do something like this let's go ahead and change the chain real quick so we'll go from Linea we'll go to ethereum notice we get the switch chain button we click it it switches us back to the network cool so that works uh what happens if I go in here and manually change the account to another one right so you can you can see that my my address is updated here and the amount of eth that I have is updated here right so um all of that is taken care of through that metamask context provider that I was just showing you that had that you know that almost 200 lines of code um let's see what else can we do um um we can oh we can just completely disconnect ourselves so let's just go ahead and disconnect from both of these so look I disconnected from the one we were connected to and now it's switched back over to the other one and then let's disconnect from that one also uh let's disconnect from this oops Yeah uh let's just sorry uh disconnect all right so now we're not connected to either of them right and and boom we're back to the connect to metamask button right so uh that's a lot of work to get all of that stuff to work correctly to get your wallet stake wallet state in sync with your react application so let's go ahead and connect back up again real quick um now that we've seen how all of that works and let's mint a ticket let's make sure that the contract we've deployed that we can actually hit uh hit the contract uh mint function and me a me a ticket and then I'll show you how that minting page works as well so right when this is done notice I can't click on that until it's done minting and now I've got an nft here let me do one other thing real quick let's um let's just delete this here I don't know why the picture is not showing up there maybe it's cuz I'm on a test nut um but so let's say that my user doesn't have you know the nft in their wallet like they just added it in nft and it's not in the wallet right so we have this add nft button that if you click on it um will add the nft to the wallet just like you can do with adding a token to someone's wallet right a token that they don't have so that's using the wallet uncore watch asset RPC API from the metamask API so that's a little a little extra piece of uh the metamask API that you may not know about it used to only be able to do that with tokens now it can do it with nfts as well so let's go take a look at those pages really quick if you want to see how the tickets work you can uh open up tickets and tickets owned so tickets is the top part it is this section up here and the tickets owned is this section down here so um what we are doing um with the tickets is basically uh we are using um ethers to uh to get a browser provider we're uh passing in window. ethereum we're getting a a we're getting a provider so we're getting a provider and we're getting a signer here and then um that gives us the ability to create a new ether's contract uh which we can pass the chain ID uh and contract address uh our ABI and our signer into it and we're going to uh call it eth tickets uh and then from that the name we called it was nf. tick or sorry n n tickets we can do nft tickets.

mint nft or any other um we could do any other function on this contract so if we go back and look at our contract again real quick we'll see that mint nft is one of our U public functions but we could also call these other ones too um we could call wallet of owner we could call token uh where is it we could call token URI so let's go back and take a look at that really quickly so if we go back to tickets um yeah so we you see how we call the that uh that nft function and it takes a wallet address and a price for the ticket and then we want to what we want to do is we want to await that transaction and then we're doing some very basic state Management in our component here um and we are just setting whether minting is false or true that's how we're able to um uh that's how we're able to disable that button so that someone can't click it again until the minting is finished and uh and then yeah and then we just have our tickets uh listed out here which is the you know the two different tickets that we have um next we have tickets owned and here you can see um what's happening is we we're creating a a piece of State locally on this component that's called ticket collection um we that's that add nft function we'll come back to that in just a moment um but we need to get a list of those tickets right we want to be able to show them at the bottom as they Mint one right so let's go ahead and let's go ahead and just mint another one real quick while we're looking at this so I'll go ahead and do that and then when that's done you'll see another one pop up here um and the way that we're doing that is we have this function called wallet of owner and uh what we're doing here um this is an async function that is called from our use effect right so basically when this page loads when this component loads wallet of owner is going to be called um whenever the whenever the component loads whenever it Dismounts um or when wallet address a mint has happened the chain has changed or the SDK has connected so in any of those scenarios it's going to run this again it's going to call into the contract it's going to get those token IDs and then once it gets the token IDs um that's right here it's going to call wallet of owner pass in the address it's going to get those token IDs those are going to be here owned tickets we're going to map over them and we are going to uh basically create an nft uh for each one we're going to get this uh nft data back um but we're going to uh push all of those tickets into tickets retrieved um at that point we are going to set our ticket collection um and basically the way that this works is we have a um this list of tickets will then map over that ticket collection and create a button H sorry a a an image of the nft and a button for each one of them I hope that made sense I tried to I tried to do it as quickly as possible but also give you all the details so we'll also see here that now we have both of these tickets I'm going to hit add nft again and we can add it uh of course uh you should see the actual nft there instead of a blank thing I don't know why that's happening um again it might be that we're on test net but I don't think so it's just weird um so here's two of are both of our nft tickets and yeah so that's all the functionality um of this main branch and and you notice there's kind of a lot going on all right so what we want to do now is we want to kind of knowing how all this whole application is put together right uh and and we've also kind of tested all these things too right we've connected multiple accounts we've changed the chain we've Meed a ticket we've added uh the nft to metamask um we've disconnected from both accounts disabled I haven't done I haven't disabled metamask browser extension yet but if I were to disable metamask so where it appears as if I don't have a metamask extension in my browser then when you click uh oops let's see here uh when you click connect to metamask instead of uh connecting with metamask extension right here it would give you a link to download metamask but your user could also just switch right over to mobile and connect with their mobile instead if they wanted to all right um cool uh next thing we want to do is we want to get off this Branch um and we should just be able to I think if we just stash our config file uh let's go ah and stash this we'll call it config or coig whatever um and and then from our terminal what we'll do is we will we will do get checkout uh add it's called add react UI components right so imagine what we're doing is instead of uh setting up all of that that context provider and the uh conditional rendering of the button and all that kind of stuff what we're going to do is we're going to instead instead of installing the regular metamask SDK we're going to call we're going to install a cheat code metamask SDK react so if you notice uh now that we've switched over if we go to the web directory and look at package.json uh did we not switch over oh we didn't get it right let's see add react components there now we've switched over now you'll notice that in our uh this just changed from at metamask SDK to at metamask SDK react UI now this package has a context provider and a button in it that we can use that will replace that what 250 lines of code that we had before um but know that this package actually uses the metamask SDK inside of it so it's actually installing that package for you and some components um but you don't really have to manage any of that all that you have to do is go into the app. TSX well let's do an npm install first because we now have different packages set up uh in our uh in our project than before all right there we go now all of our little red lines have gone away so um all that you would have to do uh instead of setting up all of that crazy code that we saw before is you would need to import the metamask UI provider and um this react UI kit kind of it comes with wag me installed so what I've also done is I've configured chains for wagi uh I've pulled I've imported the Linea test net from the wagi core chains and I've also pulled in the Json RPC provider uh from wagm providers okay so um but I'm showing you how to do it all here but all you really have to do is set up this uh set up the chains uh tell it that Linea test net is going to be one of the chains that we're using you could do multiple here if you wanted to but this application only works with one um and then what we have here is the SDK options so before this was buried in that uh large meta uh metamask hook that we had which was the context provider so this was buried in that code uh where we instan the SDK you don't have to instantiate the SDK with this version uh with this package all you have to do is import it uh and then set up the SDK options the networks is even optional so you don't have to do this if you don't want to I do it because I want I want to be able to specify a certain chain in in our active networks tab that which we'll see in a moment uh but you could just pass in these SDK options and go to town with a very simple uh connect button so of course you have to add this line of code here this line of code at the very least if you want to add chains you need to add this code with these uh Imports uh and that's all that's all uh and what this since our metamask UI provider wraps our navigation then we can go into our navigation component and simply uh import this metamask button and shit'll just work all right so let's go ahead and check it out so let's go ahead and do uh let's go ahead and unstash our changes so we can get our config file back because we've already deployed the contract I don't really want to deploy it again like uh so let's do pop stash and select that one so now we've got our config file back and um and now we can run npm run Dev test net and uh our our con our environment variable files are still there because remember environment variable files are hidden because they have sensitive information and in them therefore they never disappeared when we changed uh branches so we'll run npm run Dev testet we can now open our application back up and one thing I want to do really quickly is I just want to make sure that there is no previous cookies set up here or anything or local uh storage stuff set up uh we want to hit this as if we were a user hitting this application for the first time so let's do a hard refresh and this is what your users would see right so instead of what we had before the connect button looks a little bit different but that's because uh you know we're getting what they've designed for us in this package and if I hit connect here look we get the same we get the same model right same effect here and let's go ahead and connect to desktop just cuz it's a little bit easier but remember that the whole reason for the SDK is to connect is to connect people to mobile from a Dap like that's the cool thing we're going to use the desktop just for a moment so we can see how everything looks right so we've connected back with that same wallet um and uh like let's just test some of this out let's make sure it works here so if I disconnect right yep now I've got uh the connect wallet again I do a refresh uh I get the connect button again I connect what happened here oh it's it's trying to pop up there we go so we we'll click next connect Okay cool so all that works [Music] um it's a little bit weird uh that didn't change over uh sometimes that happens okay but here is our button uh once we've connected you can see the amount uh of eth that I have that's my test nth you can see my address um if you you can copy the address um and then you can let's say that we're connected to the wrong chain so let's try that real quick so let's connect to ethereum um and then from here what you can do is you can now now they have Linea gly test net here so we can click back on that one it'll Pro programmatically switch them back over um yeah so we have some of the same functionality again you can see why I like doing everything myself kind of the hard way the more kind of custom way um and we're working on this component too like there's going to be a lot of extra features to it you will be able to get that button that you know automatically switches them back over uh all of that is available and coming up but uh but yeah like you drop this in notice that we we no longer have that hook anymore we do have a hook here but all this hook does is uh takes care of some very basic application State rather than kind of all of our wallet state right we didn't have to do any of that wallet State syncing on our own it was all done for us by this metamask UI provider and then all of that kind of uh navigation button switching and stuff that was happening here you know it's just one [Music] button all right so with the um since we're kind of limited on time I'm trying to get this done under 1 hour um let's go ahead and move on to the other branch which I can show you uh if you are wanting to use web 3 on board um this gives you the ability to connect to multiple wallets uh right so uh this is going to be two packages that you need to install the web 3 uh onboard react and the web 3 onboard metamask and what this allows you to do is to use web 3 on board uh it's kind of like wag me or web 3 react uh in which it allows you to connect to multiple wallets we're also integrating with those other products but uh this is the one that we have current currently integrated with first and the other ones will be following but yeah it gives you instead of just being able to connect to metamask with our SDK or with our SDK react components this gives you the ability to connect to many different wallets and when they click the metamask button it gives you the option of connecting to extension or mobile using our SDK so let's go ahead and switch our Branch over again we will stash this uh config file so let's go a and do that again real quick and um and then we'll we'll go ah and switch branches uh and since we've kind of gone over the rest of the application I'll just show you the points that you need to know in the app. TSX page on how to set up the integration with the web3 on board so we'll do um get checkout add web 3 onboard and and yeah notice that in our repo here there's only three branches right there's main which is like hey custom do it all yourself metamask JavaScript SDK we've got the react UI components which is the one that we just did uh this one uh gives you the the context provider and the button so that you don't have to do all the custom stuff right then you have ad web 3 on board this is like hey I need to connect my users to potentially multiple wallets uh yeah a lot of them connect with metamask but they might also want to connect with something else so uh there's three branches here that you can explore and each of them uh we go through and show you how to set uh everything up with the metamask SDK so uh let's take a look at let's first do an npm install and let's take a look at our package.json because that's where things are going to be a little bit different here so you'll see we have web 3 onboard metamask and web 3 onboard react makes sense uh if if you're going to use the metamask one uh right now you need to be using the alpha uh and whatever the highest version of the alpha is so if you go here you can click on 10 versions and you can see like whatever this highest Alpha is uh actually yeah 2.

02 Alpha 3 and we've got 2.02 Alpha 3 so we're on the latest one um and what we want to do here is check out our app. TSX file right so it's going to be very very similar to the things that we've done before um um right so we have our we have web 3 onboard provider and an init function that we're pulling in from web 3 onboard react and then we are importing the metamask SDK from the web 3 onboard metamask um we are setting up a very basic object which tells it uh this is just kind of like our config file right um but we're doing it here instead because with this with this package it kind of handles all the chains and everything on its own and I'll show you that in just a moment it's pretty slick um but we we need to give it uh an object which is uh has all the the ID the token the label and the RPC URL for uh for the Linea uh test net then we then have our SDK options same options that we've been passing in uh from before so nothing really changes there and then we create this metamask SDK wallet which we can pass into their wallets array uh and then we call this a nit function we pass in the wallets we want you could also uh check out on web 3 onboard how to add additional wallets here um so yeah like I I guess if you wanted to do rabby wallet or rainbow kit or or rainbow wallet or whatever all those are available uh we then pass in our chains which is coming from uh uh here so chains you can also set up multiple chains we only have ethereum Linea setup but uh again no big deal you can have as many wallets and as many chains that they uh support in there and then some basic app metadata this is nothing uh this is very basic stuff uh we set up a web 3 onboard provider uh are you noticing a pattern here like all of these things need some type of a provider so that they can continuously sync the wallet State uh with the App State um the great thing about our main branch is we show you how to do that on your own or give you a good example of how to do it with these other packages these other two examples they do it all for you um and then with that the only thing we need to do is on our navigation page um we are either setting up yeah so I have a a connect and a disconnect button but on the web 3 onboard site they have some demo applications you can download and you can get uh there's a ton of other things that you can do with web 3 on board um one thing I I will note is that in this in this Branch I have deactivated a lot of the tickets and tickets owned stuff just because uh the way of working with this wallet and working with the connected wallet is a little bit different and I haven't had time to set all that up this is a very very new integration that we have with web 3 on board so I've just stuck to showing you what you need to do in the app. TSX file and the navigation file um but I did go onto the display page here and I added some very basic Wallet information as a component so that you could see like how to get at that connected chain how to get at the address how to get at the balance how to potentially get at the ens if there's one available for that wallet and all that kind of stuff so uh you'll this still has enough information for you to get started with web 3 onboard and metamask SDK um yeah and so with that out of the way let's go ahead and run npm run Dev testet and get our application up and running and we should go back over here and we'll do a refresh and notice here's the little connect button that I've created so when I click this connect button things look different right but no worries uh it has the metamask wallet that we've asked it to provide if you pass in more wallets those will all be listed out here um and when you click on metamask now you get that uh metamask model that you're used to and if we connect uh we can see we've connected to one of our accounts here and um see and now we've got some of that information spitting out on the page here and we have this uh down here right so we can disconnect from it and connect again but this is a nice little modal that pops up that kind of manages your wallet and notice that it's only got one option here for current Network um so if we were to go in here and to change this over to like ethereum right uh it shows that we're connected to ethereum main net we might want to do some different conditional rendering here to switch them back to the right chain or something but they've also got that here so we can see the C current network is ethereum and if we pull this drop down we can see that there's another option here linear test net and that'll switch us right back over to linear test net again um with either the react UI or this solution here um you might want to do something with the buttons up here where if they're not on the right chain you give them a a button that will use the you know U those two RPC the tri catch that I showed you before that will you know either add the proper chain and or switch them over to that chain but notice that this does that for you as well and since we've passed in Linea as a chain um the only chains that will ever display here is the one that you're connected to and the one that we've passed in that's why when we switched over to another chain um let's even just go to like let's go to something different here let's go to uh Mumbai right now it's going to see and I don't know why it says unrecognized but like uh it still only shows line a test net here and the one that you're connected to and uh it'll switch you back over so that is it for the workshop I I hope you enjoyed this I hope it gave you some insight into how to use the metamask SDK I hope you learned a little bit about Linea um infura it's just you know basic stuff uh we're just using infura to connect to a node um but hopefully you've seen these three different flavors that we have for connecting to uh the metamask SDK which is kind of the the the do-it-yourself have all the control I really like that one um react UI component it's great especially if you're only connecting to metamask uh and or if you're maybe building your own kind of like multiwallet thing like you could use that as well that's what web 3 onboard has done they've kind of uh they've kind of Incorporated our wallet and our button into their own um multiwallet connection package uh or you can you you can choose to use uh ad web 3 onboard and very soon there will be a fourth and potentially fifth branch in here which is wag me uh and web 3 react so that you have multiple options if you connect want to connect to more than just one wallet right we don't care we know that users are potentially going to need to connect to other wallets uh and we want to integrate with these other uh Frameworks to make it easy as possible for you to give your users the ability connect to connect to extension or metamask mobile so with that said thank you very much for joining the workshop uh I will leave view on uh this slide right here so you can see some of those um so that you can see some of the links that we had and uh and yeah thank you so much and I I hope to see some of you out at our hackathons and hacking on our Linea and SDK bounties uh and snaps bounties thank you very much again my name is Eric bashard at HTTP junkie on uh Twitter telegram GitHub everywhere thank you so much