Linea 🛠️ Build on Linea: A L2 Crash Course - Emily Lin and Eric Bishard

foreign [Music] hi guys I'm Emily I'm the developer Advocate at Linea and I'm here today to give a crash course on l2s Linea and then hand it over to my colleague Eric to actually teach you how to build a dab um but yeah let's get started I'm gonna make my face a little bit smaller bringing it off to the side and start off with this statement Linea will be a type 2 CK roll-up what does that mean I don't know let's go from the very top so blockchain trilemma what is it so the blockchain try Lemma is essentially a pick 2 situation between security scalability and decentralization essentially to build a secure and scalable blockchain you'll have to sacrifice decentralization however if you want to build for example a secure and decentralized blockchain right then you have to sacrifice scalability that's the problem um how are we what is the state of the world today well with ethereum we've chosen security and decentralization however sacrificing scalability means that we've chosen to increase gas prices as well as decrease transaction times this jeopardizes the adoption of ethereum by pricing out users as well as degrading our user experience that sounds kind of bad how do we solve this well it's called the layer 2 solution um so before we dive into layer 2 solution let's actually talk about layer one so layer one is the underlying foundation and base blockchain so this is going to be comprised of the node operators the block producers history of transaction data consensus mechanism Etc examples basically easiest is going to be Bitcoin ethereum Avalanche things like that so here on the left side that is layer one once we get into Layer Two then Layer Two is basically a scaling solution that increases transactions feed and Thorp throughput while fully or partially deriving insecurity from ethereum so essentially what it does is it pulls off that execution layer away from the layer one but then post all of that data back onto ethereum for data availability so basically the most popular implementation of layer twos are going to be Roll-Ups so pretty self-explanatory you can think of it instead of submitting all of your transactions blah blah you can roll them up together and submit it one right that's kind of the most popular and winning implementation right now again I do want to really call out that part about posting its transaction data back to ethereum making ethereum that data availability layer that is what differentiates a layer two scaling solution from a scaling solution such as a side chain right so for example polygon proof of stake is a side chain that is not a layer two the scaling solution was that has its own consensus mechanisms um its own security and Trust assumptions um so Layer Two is a far more secure scaling solution than a side chain for example but anyways that's the little L2 space that is what Linea is a scaling solution and now that that has been defined let's move on to the next piece so I talked about Roll-Ups but what exactly is a roll-up well the anatomy roll-up is made up like this there is an on-chain contract on the L1 basically it stores the roll-up blocks monitors the state tracks deposits there's the off chain VM so this is where kind of that like computation is happening for pulling off that execution layer and then the last piece here um kind of an umbrella term operators validators aggregator sequencers they are essentially responsible for aggregating the transactions that are coming in compressing the data and then publishing that block back onto ethereum in terms of key kind of vocabulary words you'll need to know when talking about l2s we have deposits and withdrawals so deposits are when we move um East from L1 to L2 the way you do that is you lock up eth on the roll-up contract an equivalent amount of eth is minted and then used on the L2 and the withdrawal process then is if I want to like pull it out of L2 essentially it burned on Linea the layer two and then it's going to be released back onto the L1 and equivalent amount so anyways now we kind of know what a roll-up is how it's made up let's talk about the two different types right so there's two types of Roll-Ups um based on how they actually verify whether or not the transaction data is true or false right so the way a roll of Works actually when you submit that data how do you know that the data you're being submitted is correct um there's two popular ways of going about it right now so there's optimistic Roll-Ups in this case transactions are just a soon to be valid um so rather than checking anything we're just going to say hey we're going to be optimistic you know it's correct however um we are going to before fully like publishing this data have a seven day challenge period basically and during the seven days anyone can come and submit a fraud proof to see whether or not indeed this is true obviously this can be a problem if you want things like instant liquidity there are existing working workarounds such as trusted Bridges which will do that for you but however they don't handle cases like nfts anyways exam levels of optimistic rollops include optimism arbitrum and bass so then we move into the zero knowledge roll-up space um and so this is where a linear sits right so instead of saying hey let's wait seven days for a fraud proof uh let's actually just um on submission submit a validity proof that immediately says whether or not this is true or false um and this is verified by a separate verifier contract on the ethereum L1 uh note that because of this way um ZK Roll-Ups do not require a challenge period unlike optimistic Roll-Ups and I do want to also know one con misconception I think especially for people who are just entering the space ZK um people think a lot about privacy which is absolutely the use case however ZK Roll Up is not often a privacy solution it is a scaling solution right so examples of ZK Roll-Ups scaling Solutions are Linea ZK sync polygons ekvm scroll and Stark net so yeah now that we've gotten to that point let's actually talk about ckems now so what is a zkbm so zkbm is a zero knowledge ethereum virtual machine which basically executes smart contract uh transactions in a way that um uses existing ethereum infrastructure um and also in a way that DK proofs can understand right so essentially the way the prover works is going to be we need to submit computer programs and translate that into math right so that then pulled out a proof that says true or false right how do you do that um that's something called arithmetization right um to actually do that is very difficult right and so that's actually why we have kind of four different types of zke EVMS now um so starting from kind of the very top we have type four there's going to be high level language equivalent so this is I can write in solidity I can write in Viper however it's compiled down to some different language that is explicitly designed to be friendly for ZK proof so it's friendly for that arithm decision um things like this are going to be like starknet uh ZK sync um the issue here is because it is not 100 like um the evm uh tooling changes right so for you as a developer some op codes might not be covered um like hard hat has to have a very specific different plug-in just to understand the code that is coming from like zksync for example as you move further down type 2 is going to be language equivalent I could write in solidity and bytecode equivalent um what does this means for as a developers nothing changes it's exactly the same um the real draw here is like Network effects right so none of my tooling needs to change I don't need to train a whole new flue of um I guess Engineers if I'm building on ethereum I can also build on linear I can also build on scroll I can also build on polygons and KVM it's all interchangeable all right that's really beautiful right so that's type two uh type three you can think of as more of the transitionary period on the way to type two and then type 1 is going to be fully ethereum equivalent so that's any part of the ethereum system is not changed um the most there's a few ways that type 2 and type 1 are a little bit different I think the primary way that most people notice a difference is probably the way the data is hashed when put into ethereum it's not the most um I guess it hasn't been the most materially problematic for most developers which is why I think Linea sits in the type t space because we say that is where we win in terms of being able to be easily translatable for ZK proof to understand whereas also taking advantage of the network effects of sitting within the ethereum ecosystem not changing kind of the underlying tooling architecture that is there cool so now that we have that um here's one last slide actually to kind of give you a visualization of the trade-offs um so basically compatibility versus performance the closers you are to the ethereum the harder it is to get that performance um in azk uh proof however I do want to know that actually linear statement is that no it's not necessarily the case we are doing some really interesting things on the arithmetization and um prover sign that I think makes us feel confident that we can say we can get to the good speeds of a Type 4 as a type 2 circadian so yeah that is where we're at but anyways moving forward let's actually summarize with like Linea itself right so Linea will be a type 2C hero hopefully all of you guys understand all of what that means now um but let's actually dive in a little bit more specifically right so linear is a product of four years in research and development at consensus we are on the way to a type tzk ebm powered by an award-winning prover providing industry leading speed I pull these stats maybe like a little two-ish three-ish two two-ish months after we went public test net uh but yeah we are at like what almost 20 million transactions now I'm sure by the time whenever you're watching this video today is what May 26th check out our Explorer it's probably much higher than this uh but huge amount of volume huge amount of attention but so why do you build on linear so like why build on an L2 in the first place right so the first piece is we are a ZK roll up right so that means we have faster finality while optimistic Roll-Ups have challenge periods right um when we think about building on a roll-up for example we think about how much liquidity is on the roll-up all right so right now optimistic wolves are going to be the ones to win they came in the earliest there were the fastest to build to mainnet um however do know that challenge periods can create Capital efficiencies CK Tech is much newer but people are joining in people so I think this number in terms of who wins in terms of TBL is going to be changing and I think it is going to be going to um azk roll up um but the other piece is Network effects right so especially as a Dev way when I'm choosing to build how do I choose where to build like the ecosystem um so that is anywhere from like can I leverage existing tools that I'm using um can I write in solidity and what is the developer friendliness like what does the community look like how is the support system what do the docs look like the the other piece as maybe like as an entrepreneur trying to figure out where to build I think a lot about like how large is my addressable audience um and the last piece of Ken again is like security right what are the trust assumptions that I'm making what I'm building on this L2 so again factoring in that kind of like challenge period optimistic versus EK play um right so those are kind of the things that you would consider where does linear fit in that kind of story again where ZK roll up so we have kind of the low gas fees low latency High throughput higher uh trust assumptions no challenge period kind of aspect of that those are just table Stakes I think right fully compatible with all Dev tools so that's the type 2 part coming in um I think the real differentiator here is going to be that default integration with metamask so if you guys don't know if you go into your metamask account um Linea is actually already built in there you don't actually need to do any sort of AD Network um flow that's actually a really smooth ux I think a lot of times for developers we're so caught up and like that is a very normal button for us to click so it's not scary I don't have the number off the middle of my head but there is actually significant churn for the standard users flow when they're going through like the process and they have to hit ad Network it's a little shady if you don't know what's going on you're not going to do it so that's actually a really big strong point that I think people um some does sleep on at least I slept on it until I saw the number and I was like oh yeah that makes sense anyways yeah so that's Linea how to build on it Eric we'll take you into a much deeper dive but just kind of briefly touch on it things you'll need is you're going to need girly ease to transact on Linea so to do that you can either get girly eth and then Bridge it onto Linea or you can sign up for an inferior account and actually drip it directly onto the Linea Network for your wallet um and then after that it's just swapping out your RPC it's like very easy um there's a public permissionless one rpc.goirly.lineia.build I recommend actually just signing up for a free inferior account using the inferior one to get your own self kind of um because that way it's not going to be rate limited just in case um but anyways for truffle hard hat and Foundry super simple um with dashboard you can let me just see if I can do a live demo right now so with dashboard and so you can use this with hard hat as well you'll just do a truffle dashboard like this cool and so if I wanted to deploy this on girly all I would do is switch the girly Network hit confirm and connect to it and then do a truffle migrate but actually I want to do this on Linea so I'm actually gonna switch back cool and then connect uh where am I so I'll go to the code right here and the same thing truffle my great Network dashboard and that should basically be right here hit confirm and hit confirm and that should have migrated uh deployed it on truffle and so you can use the dashboard with hard hat as well anyways going back to my slides oh why is this Frozen whoops where are my slides here we go that's that um if you want to see on hard hat again very simple basically Linea here's using the public RPC rpc.girly.

line.build you just swap it out your code does not change at all same thing with Foundry this one in this case we're using the inferior Gurley versus um uh the public permissions one without the inferior API key anyways yeah uh that that's kind of all there is to it if you want to get in touch please contact follow me on Twitter uh underscore emjlin otherwise Linea build and consensus on Twitter as well here are a list of links I'm going to now exit this video and pass it off to Eric who will actually take you through the SDK and then show you how to build a Dap on Linea all right yeah thank you very much Emily um for showing us how to get started with Linea and talk a little bit more about you know what Linea is all about um as I'm sure she told you uh Linea is um just like deploying to ethereum um in fact in this Workshop if you don't have any Linea eth although I'll show you how to get that you can actually uh deploy to Mumbai um to test out the application but I'm going to try to show you how to get linear eth which I'm sure she's already talked a little bit about that but also how to set up a we're going to set up a VJs project actually it's going to be already be set up and we're just going to walk you through everything you need to know on how to get this app started all the steps you need to go through and then we'll review the code as well so yeah without further Ado let's get started first off I just want to share some links so um if you want to get the same repo and take a look at the branch that this specific Workshop is on it's tinyurl.com Linea Dash sorry tinyurl.com SDK Linea as well you can reach me at httpjunkie on Twitter and if you want to install the metamask SDK into your own project you can npm install it at metamask SDK so let me go ahead and clear that out um again here is my Twitter if you want to get a hold of me if you have requests for features if you just want to give some feedback you can always reach out to me and as well if I see you or if you see me out at eth Global Waterloo you know feel free to come up ask me any questions we can take a look at code I am the devrel for metamask SDK specific to JavaScript but you can also use the SDK for other things like Unity building games all sorts of stuff but we're going to focus on JavaScript today um so the first thing we're going to do is take a look at the repo where you can find um basically this Branch so tinyurl.com slash SDK Dash Linea will bring you right here and all you're going to have to do really is just follow the instructions here so this branch of the on-chain SVG Workshop repo is a workshop that will walk you through an existing mono repo that has a blockchain project located in apps blockchain that utilizes truffle to deploy solidity smart contracts it'll allow you to uh allow us to Mint on-chain SVG tickets to a fictitious event that in our app is called etherlands in no way associated with each Global event against fictitious we also have a client application in apps web and that's where our VJs react application is we do some cool stuff in there we show you how to conditionally render UI how to switch chains how to programmatically do that stuff and also uh the SDK allows you to connect to the metamask browser extension or metamask mobile we also have a context provider in there and a use metamask hook to help you manage state in your react application so that's really cool and we'll even talk about some of the features coming up in the SDK that might not be available right now but maybe by the time of Youth Waterloo since we're recording this a little bit early some of those might be available and some of those features might be available but they can at least kind of point you in the right direction and we can I can get you started here and then as you implement this into your own projects or work on our bounties these other features you you can know are just just down the road um this is the SDK has kind of been developer preview right now it's 0.

3.0 and we're just going to walk through using that current version to make sure that we can connect to the minimask browser extension or metamask mobile on your phone let me go ahead and turn my phone on because we're going to need that here soon um and yeah so let's just go ahead and get started and what we're going to do is first just get you show you how to get started in this application there's nothing to build here everything's kind of already built for you but there's some configuration that we're going to need to do so first off we're just going to run this First Command which is going to clone um this repo down we're going to switch into the on-chain SVG nft tickets on a repo or directory and then we're going to check out that veet-linear SDK branch next we're going to just open up in whatever code editor you want I'm going to use Visual Studio code and then go ahead and close this terminal for right now because we don't need that and at this point we are just going to follow along in this readme and if anything changes between now and then I will update this readme so if it's not in the video and there's something extra that we do I'll make sure that it's inside the readme for you and potentially even update the video but let's go ahead and get started so the first thing that we need to do is npm install so let's go ahead and get that done npm install and we're going to do that right from the root directory this is a mono repo using turbo so it will go through it'll go into the apps web and blockchain directories look at their package.json install everything where it needs to be we're going to have three node modules uh directories at the end of this npm install uh that's normal with turbo repo sometimes packages get hoisted into different areas a little bit confusing to me at first uh when I went to the web looking for the metamask uh installation and it was in the main directory uh but I've been reassured that this is exactly how turbo repo Works uh and there's a good reason for it anyways so we'll let that go ahead and install and we'll kind of look at what our next instruction is and like I said it's a developer preview so what good is a developer preview without typos right so uh the first thing that we're gonna need to do if you're using version 0.3.0 um you will need to go into your project into the node modules directory here find at metamask and this isn't a huge problem but if you're using typescript it's going to mess you up so just go into SDK there's a package.

json find in here this types definition and just replace it basically we're just adding this forward slash Source okay someone forgot to put that in we've already made a pull request it's already being taken care of when 0.3.1 comes out um it'll be there and it won't be a problem anymore but I just wanted to highlight that just in case anyone checks out this video a little bit early and uh and when they install metamask um or I haven't updated the repo by then they just know how to deal with that so yeah it's supposed to be this instead of this okay um all right beyond that you need to have an inferior account or a node provider but uh and in reality right now uh inferior is the only one that's going to be able to connect you to Linea um right so infuria is part of the consensus Suite of products so is linear so is metamask so what you need to do is need to create a new API key and you're going to just use the web web API and you can name it whatever you want and once you create that you'll have a project here and you can click on it and don't worry this one will be deleted by the time you see this video so don't use my key definitely set up your own but also just understand like you know you can hear all the connections um all the providers to your node for all the different chains that you might need so here's Linea right there's only a test net right now but again we have bounties for to get you guys working on the test net to get you guys working with metamask SDK we need your feedback we need to work with the developer Community to know how we can make these tools better but uh you know if you wanted polygon you could click down here and hit Mumbai uh so you can get the test net uh string URL for that and yeah so we've got the API key copied um that's all we need from inferior for right now so I'm just going to close this out and we're going to go into our project and what we're going to do is we're going to update our DOT EnV files so we have a EnV file over here and what we're going to do is we're just going to rename this uh to dot EnV and at that point this project stops tracking it remember you do not want to upload this type of sensitive information and yes your node uh API key is sensitive information um this right here not really this is just gonna indicate to our application since it's a mono repo and it needs to do some magic I just need to tell it what chain that we're going to be dealing with and I'm picking Linea because I've got some linear test eth already oh and that's one thing I should show you real quick let's reopen up uh infuria and I just wanted to show you at the top here that if you go to faucets um you can get test eth for sepolia or Linea you just click the right button here at the top sorry I'm on Hotel Wi-Fi it's a little bit slow so you got sepolia and you got Linea here and you just put your wallet number in there I think I've already done mine today so I can't do it plus I don't have metamask enabled right now but just put your wallet public key in there and yeah it should send you some eth uh hey do it every day for like a week and and get a little bit saved up so you can play around with with Linea or reach out to me HTTP junkie on Twitter and if you really need it I can send you some but uh try to get it yourself uh but if you need it we can get it to you contact me or Emily all right next we want to do the same thing in our uh in our blockchain folder here so let me go ahead and rename this as dot EnV now this one's a little bit more sensitive because it needs the infuria project ID so let's go ahead and copy that and paste it over here the reason why we need it in two places is because Veet needs V public as an environment variable to use in our app and blockchain doesn't I'm sure there's other ways to do this where I can get the same one from one EnV but I'm lazy I did it this way um but the private key here we're going to need to kind of start up metamask in order to get that so let me do that really quickly I'm going to go in here and enable metamask and log into that real quick thank you so copy that and uh not we're not going to paste in here so you don't want to just copy that and paste it in that's just your public address right so what you need to do and I'm going to show you how to do this on one of my um these are imported accounts so these come uh these front come from ganache so it's okay to show you here that you go to Account Details and then you do export private key and then you type in your metamask password right here and then it'll give you a private key back so that's how you do it and what I'm going to do is I'm going to pause my recording really quickly so I can get mine and paste it in there without showing the whole world so just one moment and okay so I went and got mine I put it into my DOT EnV Y and so I've I've got both the values there I've got my inferior and my private key in there remember to never share your private key never share your seed phrase uh never share your dot EnV files make sure that they're always in your git ignore right we can look at see what that looks like right we don't want our EnV to be uploaded to GitHub someone will take your private key they'll first drain your wallet if not they if there's nothing in it they will set up a bot and they will take anything if ever gets put into that wallet it's not good um ask me how I know um okay so good to go uh we've got our EnV files taken care of now we're kind of off the races we just need to build deploy and run our application so at this point I'm going to go ahead and do npm run build at the root of the directory and let's I think I've done everything we need to should be good here cool compiling contracts um one thing I'm going to note here is that uh one thing that we'll see already is that in our lib folder we've got this contract abis um so I'm having these outputted from my my truffle config so right here is where I Define those so if you have a project set up like mine you can have it you know output those files into your web directory so that you can get at them and I'll show you why we need to do that here in a moment but if we go and look at um our eth tickets one uh right now our contract for this uh that we're going to be deploying is eth tickets and it's just basically on-chain svgs you can take a look at this on your own I'm kind of assuming that most people know a little bit about solidity at this point but if if you're not super familiar with solidity we've got some other great content on Emily's Channel um uh so yeah you can go through here we've just basically got this mint nft function and then we create our uh our nfts as svgs and we store them on chain um it's again for this workshop for the for the idea around this contract it makes sense because these are tickets that are going to be unique that anyone can generate and maybe you can get them into a conference or a party or whatever right um so take a look in there but the contract needs to get built and we need to get abis out into our web directory and inside there if you um let's see we'll just go ahead and collapse a few of these and we'll see this networks now notice that networks is empty right now I'm going to come back to this file in just a moment uh whenever I run these next few commands so the next one is we've got deploy contract on linear or Mumbai so we're going to do Linea we're actually going to do both of them just to show you kind of what happens here but let's go to my terminal and let's go ahead and deploy the Linea remember since I put my private key into that EnV file that is the wallet that's going to um get charged for this deployment so to speak but it's all test eth so no no worries let's go ahead and deploy that we'll see that it gives us a contract address back and um and I'm going to do this kind of the hard way so I'm going to just copy this and go put it into my config file but you can get around that uh and I'll and I'll I'll tell you I'll tell you how to do that so this might take a moment all right so we've got this contract address here I'm going to go ahead and copy that so that's where that's this is the contract address that uh from our contract that got deployed and in here in our config I'm just going to pop that into linear right here all right and then hey let's go ahead and run the Moon by one also so it like I just deployed out to linear let's also deploy to Moon by real quick just so I can show you how this work if you if you don't kind of know how these abis work or how um kind of deploying contracts Works we're not going to actually run our application against this one I just want to show you what happens so we're going to go into this contract apis um ethickets.json well let's wait for this to finish for a moment so let's copy this contract address let's go ahead and put that into our config um now I can show you how to not have to copy this stuff so what you can do is let's look at that networks again scroll to the top here we might have to this got generated again so if we go down here to networks you can now see that we've got 59140 that is the Linea chain ID and eight thousand uh 80 0001 that is the Mumbai chain ID and you'll see that they're the exact same address numbers so what we could do in this config file is we could up here um oops let's see we could do an import and then we could do eth tickets and we want to get that actually from forward slash lib forward slash contract apis forward slash eat tickets dot Json right and then what we could do is we could use this down here and what it would look like is something like uh uh let's go back here we would have uh networks yeah so we would do networks and then we would do done and we have a a number in there it would be like you know eighty thousand one whatever for Mumbai and then of course at the end here you could just do um contract address right so it already finds it here so um yeah I just wanted to show you how you could do that we're not going to do that right now the reason I kind of uh go in and copy these in here and kind of show you that is just so you know where to find all this stuff because everyone's going to have a little bit different deployment especially if you're deploying out to production you may not have the same setup you may build your front end and your and your uh blockchain app separately and therefore you would need to uh kind of figure out how to deploy um and migrate your contracts uh you know out to the test net how to get that contract address how to put that ABI into your client so it could be you could do it a couple different ways let's go ahead and move on here so after we've deployed uh we're pretty much good to go we can run this command which will so this is called npm run Dev testnet and let me just show you what that's doing here in our turbo repo so turbo is a way of kind of being able to have like workspaces in a mono repo so if we go into web we can notice here in the package.json um we've got like scripts right um and in the blockchain one we have deploy uh garyly deploy Mumbai deploy Linea right and then also we can run uh npm run Dev test net and that will just kind of ensure that whatever whatever we've put in our EnV file for this network uh ID this is the hex version of that network ID that it uses that that chain in order to set some things in our project um you can dig into the project and see all that works I'll go over a little bit with you but just know that once you set your network ID here like when we run this npm run Dev testnet you can be sure that the application is going to know like that's the chain that we need to be on and if they're not on it with their wallet when they when they hook up their wallet then we'll go ahead and give them a button to switch over to it so you can see here Dev colon testnet and all that's saying is hey go into my web folder in my web workspace and run npm run Dev which would then come in here and run npxvite and again in context will be that chain ID our application is going to kind of know that that's what that's what we're running on and you'll see that here in a moment so let's go ahead and run that I'll go ahead and open up my wallet here because we're going to test both the browser extension and the mobile and then we're going to have a look at the code and just kind of try to look at as much of the code as possible before our time Runs Out we've got a got a window for this Workshop but I think this project is a great starting point for you if you're building a Dap and you want to deploy to any test net hopefully Linea hopefully you're working on the linear Bounty and you want to use the SDK to kind of do both bounties hopefully you can take this workshop and you know put on your computer strip some stuff out put what you want in but it'll all work right or at least you'll have some good examples of how it could work all right so let's go ahead and open this up in a browser and um let's just do a hard refresh here um okay so we have our metamask wallet ready to go and I'm going to start it actually on a different network so even though we deployed the Moon by I told it that we're running on Linea in the environment variable file so I'm going to switch to Moon by before we connect because I want to make sure that once I connect with metamask that it recognizes that hey you're on the wrong chain so let's go ahead and connect here and it does so see this switch chain so you can see linear right here and if we click on this we'll get our contract that we deployed we'll be able to open it up on um unblock Scout which is where you can this is um kind of like The Ether scan for for Linea test net um and then also the the wallet it shows the wall it's connected it shows my balance of testes that I have but notice it says switch chain because I am not on Linea and it wants me to be on Linea and nothing's really going to work unless I'm on linear so let's go ahead and hit switch chain that'll pop my metamask and it'll tell me to switch and then that will go away and now everything it's kind of happy with everything now and I have less eth on linear than I do Mumbai all right so we want to test a few things before we start minting tickets right we want to since we're connected to two different accounts right now we want to be able to switch to another account and see that the application is um is responding correctly right so that's a big thing about connecting to uh metamask in any application uh and here we're on a react application so we want to build some type of a context provider some Global state if you will so that we can keep our wallet in sync with our application so that if we change something in the wallet that it changes there so you can see I've changed over to test 2 account and then if I disconnect test two it should go back to the uh the first one and it does I can see that up there already so I can close that go back to one and you can see that one's still connected um and then I can you know again I can change this and it's going to tell me to switch chains again hey switch back to uh to Linea great and uh finally I want to be able to disconnect here and it should take me back to connect metamask great so that works um and we'll see how some of that code works here in a few minutes so let's go ahead and connect back to metamask again we're just going to connect to One account this time the one that we actually want to use the one that we have our test lineage on that we got from the Linea faucet and now what we're going to do is we're going to Mint a ticket um so before you connect to metamask if you try to Mint one of these tickets these buttons are actually disabled and again I'll show you some of the code of how all that stuff works but basically we know whether we're connected to metamask or not we know whether we're on the right chain we also can know if we're connected to metamask Mobile versus metamask extension I'll show you some cool stuff you can do with that right because we have to make all these decisions in our application of you know what button to show you know I got to show the connect metamask button if nothing's connected I've got to connect to the mobile if they don't have extension um if they're not on Linea if they're on Mumbai I need to switch them over right we want to try and do as much for the user as possible so that they don't have to go oh I'm on the wrong chain pop up something that says you're on the wrong chain go into your wallet and change it yourself no let's let's change it for them right cool so let's go ahead and hit mint ticket and then I'll pop this up and we'll have a little confirmation here and we'll confirm and notice I can't click on this while it's minting again um when minting we want to put the component in a loading State and make sure that we disable that button now when this comes back online this button will also within about a second or two we'll see that yep there we go oh it kind of showed up beforehand oh interesting so this is the ticket that we just minted now this is a unique SVG on chain there's no ipfs right we've got an SVG stored on chain and it's Unique it's you there's no other ticket like this this contract always creates a unique ticket because they've either got a general admission or a VIP they've always so this is ticket number 1000 the next one will be 1001 and then also we print out their public address on the ticket there's a date on it and there's a name of an event right so um yeah it's kind of contrived a little bit but this is a unique SVG and every nft that this application generates is unique so that's pretty cool let's print a VIP one so one more cool thing about the tickets is that if it's GA or VIP they're going to be different colors right so that's just and all that stuff is done inside that contract that contract I've created so uh the contract when it creates a general admission and it knows whether your general admission or VIP by the amount of eth that you paid so it's it's really cool uh it's it's kind of hacky but at the same time kind of cool that if you mint uh 0.

01 ticket was 0.01 eighth you get a general admission ticket if you uh spend 0.02 you get a VIP ticket um and of course they you wanna they they want to go through the application uh we don't want to just be sending random amounts of eth uh to that contract even though I don't think you can I think you can only send those two amounts but yeah it gives us you know a different color a different uh ID a different kind of type of ticket date all that stuff is configurable in that contract so very cool right um we're trying to show you ways that you can create good UI good ux right now this isn't the greatest application in the world but with the things that we're showing you in here it enables you as the developer to be able to um to be able to make these decisions to be able to like when I meant a ticket shouldn't I see that ticket immediately and know which ones this wallet has um created um notice I don't know why they just switched around like that real quick but um notice if I switch over to another account um like this one and connect to it these are going to disappear right because now I'm on a different address and the application knows about that it says hey you just switched your address you're no longer this other eth address anymore you're this new one and you haven't bought any tickets yet but if I go back to it and I go back to account one boom there's my tickets back right so um the tickets that show up here are the ones that this wallet has uh minted and it will always be that way all right so now that we have done that I think the next thing to test would be to click on manage extensions here and I've got another wallet with a different address so let's go ahead and kill metamask by the way I'm using metamask flask this is just a developer version of metamask it is in no way different than the regular version so don't be confused by the purple icon it's still metamask um if you're a snaps developer you'll know exactly what I'm talking about that's bad I got the disconnect from metamask mobile so we saw a little flash of something weird there all right um cool so let's let's first of all you know I've been testing this before before I did the workshop so I probably left a connection open there yep all right so now the wallet that I'm going to use um is my metamask mobile wallet so um when I don't have metamask enabled and this is how the SDK works right now we're trying to make it to where the user always has the option of choosing metamask mobile or the browser extension but right now the way it works is that if metamask SDK does not detect a browser extension it's going to try to connect you to metamask mobile it's going to give you a QR code and I can just go into metamask on the top right there's a QR code button and I can scan this and then I don't know how well you'll be able to see this but you can see that the transaction has come up here and if I click okay on that we're gonna see that I'm connected here now with a new wallet um cool well we're not going to go through all the other stuff that we went through with uh with the regular wallet we're just going to try and mint nfts now just to make sure that our application is still working um cool mint ticket we're going to get another prompt here in our metamask mobile uh sometimes it takes a minute there it is so I'm gonna go ahead and hit I'm doing this through the camera okay cool so it looks like a transaction submitted waiting for confirmation and there we go so it takes a minute for it Community to communicate back with the DAP but as soon as it does we're gonna see a ticket pop up hopefully if our application works well so one thing to know about metamask mobile and especially when you're testing it is it does take a little bit longer right one I'm on a hotel connection two is my application is communicating with a mobile application all the more reason to make sure that you have loading States in your components so that the uh that the page knows when you are today did I accept that transaction all right transaction complete finally um something weird just happened here let's go ahead and try this one more time right that so when you disconnect from metamask that comes up and let's just go ahead and refresh here cool so we're going to connect with metamask mobile this time and when we click on that we're going to be able to get a QR code here and we can um scan that with metamask and then we're going to get we're going to be able to connect and now we'll see our information up on the screen there that's the right address that I'm connected to and um I'm going to go ahead and mint a ticket see there is the the ticket before that that came up I don't know what I did there I think I had disconnected when I was accepting it I think I somehow disconnected don't know what happened uh Hey live demo sometimes things don't go as we planned but um I think next we'll try to Mint a VIP ticket just to make sure everything's still working okay all right so transactions submitted waiting for confirmation foreign before I started recording so I'm hoping it's not something oh no there it goes great um awesome yeah and it went away that time so yeah it was something that I did on my phone um you know the thing here is you gotta test uh when you're dealing with metamask browser extension versus metamask mobile right you need to test both wallets out right you need to find these edge cases uh you know find out if there's any difference between the two in there actually is so let's go back and look at the code real quick and what I'm going to do is give you a quick tour through the code we don't have a ton of time but I'm going to take you through as much as possible um I shouldn't have I shouldn't have got out of that but we can come back in a moment um so the first thing I want to show you is kind of how our client-side application is set up and we have um this components directory here and we also have this hooks directory so our app.tsx has a metamask context provider around the entire application inside that we have a navigation a display area which is like the middle area of the application and a metamask error oh that's one thing I didn't show if I like reject connecting the metamask you'll see a nice little thing come at the bottom we can test that in a few minutes it's another component another reason to have state in your application right we want to track all of the metamask state now this is a little bit daunting of a file and there's a lot going on here we can't go over at all but if you're you know good with JavaScript and typescript all of this should make sense um we switched it over so that's not using any reducers or anything and it's pretty cut and dry what's going on there's a connect to metamask function there's a use effect that connects to the SDK and creates a metamask SDK instance basically once you do that in your application the provide the injected provider kind of gets taken over by metamask SDK and no matter whether you connect to the browser extension or metamask mobile um like when you connect to metamask mobile it kind of replicates that injected provider for you and that's how we're able to connect to both from adapt use deep linking if we needed to um and then I think the next thing we want to look at is this use effect here so here we are making sure that the SDK is initialized um we're calling update wallet and accounts uh which is a basically a function up here which um we are getting the the eat accounts from our wallet and also doing any updates so we can either we might be updating our wallet or our account at any time and we're just setting up a bunch of event listeners the thing that I'll point out here is that initialized uh connect these these two right here these are specific to metamask mobile accounts changed chain changed these are specific these are not specific to metamask mobile these apply to both metamask mobile and metamask browser extension and then disconnect is also associated with just metamask mobile so our docs will be updated with all the information on how all this works but it's good to know that because um if you've ever used these uh listener events before these might be the only two that you've ever ran into and when we were only connecting to the metamask browser these are the only two that we would use um and so these other ones uh you need to know about those for metamask mobile but we can set them all up here and we can break them all down um in a use effect the way that you kind of uh clean up is through a return function so we're removing those listeners and we've got a bunch of dependencies here we we've got to run this code at certain times and so I'm sure you know how dependencies work for use effects and then we have our metamask context provider which these are all the things that we might need any component in our application to be able to use or know about so the wallet has like address and balance and chain ID and all that stuff in there that's how we're able to when the wallet changes the application changes right those components are subscribing to the state and when one of these states change the component gets re-rendered it's how react Works one-way dataflow awesome it's why we always react um cool um we also have this use networks uh switch or use switch Network which is used by our switch Network button you saw that pop up when I was on the wrong chain um but let's go into our navigation real quick so um we have a navigation this is kind of the first place to start so we have some basic code set up here it's actually not a lot we've just got we're just pulling in that use metamask so this used metamask allows us to get access to that wallet is connecting connect metamask function and this one called SDK connected this is the one I wanted to show you so if I uncomment this code here um I could do something based on whether or not I'm connected to metamask browser extension or metamask mobile and so I wanted to show you this because you might do something a little bit more in your application that I haven't done which you need to know like hey am I connected to the browser extension or am I connected to their metamask mobile you know iPhone or Android app and this um this SDK connected uh will will tell you that now one more thing to note is that use metamask and our our our Hooks and our provider that we have in this application these are all things that we plan on giving you from the metamask SDK but it's going to come in a different package called like SDK react right and you're going to have uh components that do all of this conditional rendering for you but I still think it's cool to show you like uh all of the different conditional rendering I'm doing here based off of the context provider that I've created in order to be able to manage your state keep your wallet in sync with your application it it provides some data about the wallet to other components like this navigation and I can make decisions based off of you know different things so I can you know I can give you the switch Network button if the accounts length is more than zero which means we have a wallet address but you're not on the supported Network right we set the supported Network at the beginning and that dot EnV file and we said Linea so if they're not on Linea this thing's going to pop up if they're connected if SDK connected which is just what I called it this should really be called like a mobile SDK connected so and you can rename that if you want then we would show Mobile versus extension that's what I'm going to show here in a moment um also if we have a wallet in the accounts link there's more than zero we're going to show the chain information we're going to let them link out to that blink that block Explorer and we're going to uh show their address of their wallet in a formatted uh kind of way and then let them link out to etherscan to see their wallet um just some things I want to do here's where the balance is is being shown so not a lot going on here um it's basic stuff now let's go ahead and run our test Net One More Time and what I'm going to do is I'm going to um I'm actually going to turn my extension back on and I'm going to refresh just to make sure all right so what I wanted to show you now is we're going to connect to metamask and go ahead and connect all right so now we see extension here right so then let's go ahead and manage extensions let's go ahead and kill that so let's and then I'm going to refresh and then keep leaving this Connection open there is a way also I I've got some of the code set up to where you can actually create a button that'll disconnect the metamask mobile um but it's not hooked up in here so we're just going to deal with that thing popping up for a moment all right so I'm going to go ahead and connect and now we see mobile up here right so cool like this is awesome the ability to be able to connect to metamask uh mobile or extension from adapt um I've shown you some code um I've showed you how to take this repo clone it down get started we've only got a few minutes left any questions okay cool um since there are no questions I think I will just uh oh I'll show you the metamask error uh we can we can do that real quick so again let's disconnect from metamask mobile so I'm going to go in here I'm going to go to manage extensions and just hit disconnect all clear and look cool little thing pops up lets you know you're leaving and then what I'm going to do is I'm going to turn I'm going to turn the regular one back on because it's easier to redirect reject a connection from and like show you in real time so we'll go ahead and oh you gotta refresh I think connect I'm gonna do this again well everyone knows how long my password is now um cool this is my test wallet don't care so I'm gonna go ahead and hit cancel and notice down here at the bottom we get this error user rejected the request right because we have all of this stuff considered in this application right we have on our app like we have this metamask error that's at the bottom it hugs the bottom of the page and if you click on it it goes away right so if there's ever any error while uh dealing with metamask it'll show up down there when you're minting it'll show up right underneath the the mint button so we're just trying to think of everything we could anyway so um that's really all that I have um I just want to thank you all for uh checking out our Workshop remember uh check out Emily Lynn go back to the beginning of the video if you don't have her information uh she's awesome uh she's gonna be at eath Global Waterloo with me uh and also you know I want you guys to sign up for the Linea and metamask SDK uh bounties and with that see you later