Buidl Guidl 🛠 Build Full Stack Dapps with Scaffold-ETH 2

[Music] is a workshop about scaffold eth um I'm also a core member of the build Guild uh who here has heard of the build Guild few people yeah yeah uh I see some familiar faces here uh great to see you welcome to eth Glo Istanbul it's great to kick this off with some uh full stack dap talk so uh scaffold e anyone who doesn't know scaffold eth uh scaffold eth is an open- Source toolkit uh really designed like making the onboarding experience to like build AAP really easy um it was originally created by Austin Griffith uh who is one of the uh founders of the build Guild and the concept is you know basically rapidly prototyping being able to build adapt quickly and efficiently so if you go to scaffold eat.io I know that's hard to read um sorry about that but uh if you go to scaffold eat.io you'll get a couple options on how you can install it so you can install it with Git by just checking out cloning their repository or you could Fork it and you know build in your own in your own repository uh or you can run npx create eth um that's the the kind of like in beta but it's it's pretty stable um and the npx just is a little bit more uh intuitive in the sense that it gives you this kind of like choose your adventure type experience so we're going to use that um and we're going to go in here and we're going to start hacking away so we're going to do npx create eth at latest right and uh basically that's going to ask you like hey do you want to install the the newest version of create eth uh you want to click yes obviously I already have that done so it didn't prompt me for that but then you can just name your project so you can just say uh we'll say Istanbul and then it's going to ask you what found uh what what chain you want to use um so if you're familiar with hard hat you can choose hard hat if you want to write your tests and like solidity uh then you probably want to use Foundry uh it's really just up to you I personally still like hard hats so I'm going just going to go Ahad and say hard hat uh and then it's going to ask you if you want to install the packages so this is going to download uh scaffold eth automatically kind of like bootstrap the environment install all the dependencies with yarn uh and then also initialize a git repository so then you could just check it in your own uh git configuration um this takes probably about a minute depending on the internet connection hopefully there's not a bunch of hackers right now downloading packages and uh we can get started here quickly um but yeah so this is it's it's going to install everything you need to get started um let's go ahead and give that just a second while that's installing um the other option like I said before is you can you can just go to get you can clone the repository I'll talk really briefly about the requirements you need nodejs installed on your computer obviously uh and you need yarn package manager make sure you're using like a newer version of yarn and not like the old one uh like if you have if you're running Linux sometimes there's some old version of yarn that gives issues so just update it uh and then obviously you need get um and all the instructions that I'm going to go through are in the GitHub repo um and I also did a really good Workshop that you might want to check out uh that kind of shows how you can do a uh a graph integration as well and this is available at bit.ly stack dap and it kind of walks a little more in depth in depth uh on how you like do some of the Full stack stuff uh because of time today we're going to try to get as far as we can but we'll go from there so it is still installing so I knew that might be a problem so actually went ahead oh there it goes sweet all right so um it scaffolded everything for me and then it just tells me okay what do I need to do next well I need to go into the estem buul directory and then I need to run my chain so uh everything is it's a yarn monor repo so it's designed with this concept of like you know just yarn this yarn that yarn that and there's all these scripts that are already written for you to do things easily um so I'm using t-u which basically allows me to kind of split my screen up um if you you aren't using t-u you can just do this in like separate windows so if you see me kind of breaking stuff up that's why um but yarn chain is going to do that it's going to spin up your chain so it's going to spin up founder your heart hat depending on which one you chose and then it's going to uh spin up the obviously the the accounts that you can start testing with um and all of the associate private keys are there so you could like copy and paste those into metamask if you wanted to or something um but then in the second window we're going to do yarn starts okay so yarn start is going to to spin up the front end which is basically react with nextjs uh all the code is pretty much written in typescript but you can also write JavaScript as well um typescript is a little bit better in my opinion but it is up to you um so that's it so now the front end's up and then in this next window same thing we're going to go into the assemble directory and do yarn deploy so yarn start yarn chain yarn deploy that's kind of like the pattern and we can see here that we basically got uh the contract deployed and we see some output on Console log which is from hard hat and we see that our front end recompiled and we see that we get a contract address and we told it told us how much gas we used so there's a lot of cool output that we get how much how many solidity files were compiled and then our contract's been deployed so uh let's take a look real quickly briefly at uh the code and show this so it's it's a monor repo so there's two packages there's hard hat and nextjs uh the hard hat directory is going to have uh the um the contract in there in the contracts folder and so we can come in here and see it's a very basic contract that comes with scaffold eth it's basically this kind of uh greeter we call it a greeter or like a hello world contract that keeps track of a greeting right there's some other stuff here I'm not going to get too much into that but for the most part it's a very uh basic uh greeter contract it also has uh a modifier it also has a function to update the greeting so you can pass in a new greeting and then you can also make it's payable so you can send some funds but it's got this stuff in here so let's take a look at scaffold eth real quick so let's Lo load up scaffold eth on Port 3000 this is scaffold eth so um the first thing you'll notice is that you get this kind of like Hello World page it's like the index. TSX file this is kind of where you're going to want to build your app out when you start hacking away um and you can kind of think of it like as the the homepage and it's it's like going to be your dap inside of scaffold eth and that way you can keep the header you can keep the footer and then you just build around it inside of this index TSX file and we'll get to that in a second but I want to talk about this debug contracts tab this is kind of like the sweet sauce of scaffold eth um and it's what's really cool is every time that you do a yarn deploy you generate an ABI right so what uh scaffold eth is doing is just reading in the new ABI every time you make a change to your smart contract and then automatically building a UI for you so this is really useful because you don't have to start you know writing uh react code uh no one uh I don't know who here's a react developer few most people are like oh I don't want to touch react unless I actually have to you want to experiment on your smart contract that's the fun stuff um and so this is cool because it just creates these things for you so we already know without looking at this contract that there's a a counter we also know that there's a a right function that allows us to uh change the greeting and we can it accepts value and then there's a withdraw function and we see all of the variables here as well um and then up here in the top you'll see there's this connect wallet option but there's a burner wallet option so the burner wallet is cool because like let's say I want to change the greeting to istan buul like this and I hit send it's going to tell me I don't have funds to pay for that transaction I can just grab some funds inside of the burner wallet I don't even need to connect metamask which is really useful because metamask can give you these like nons errors when you're deploying locally so yeah you got everything you need here and then you can uh do the transaction and then there you go we updated the state of that greeting so uh and then you get a receipt right so you can see like basically uh you know what happened with the transaction uh you can see like if there was any issues or something like that um and then we also have this uh withdraw function so if I was to send some value in here we could say like 0.

05 eth now you think you could just hit send that's going to tell me well it's a big in right if we know if you've done some solidity stuff you might know that you need to transact in way so there's this cool button here that will do the math for you so you it will multiply what you want in etimes 10 to the 18th power and then you can just transact in way right uh so it's a really cool little developer experience and then we hit send and then it was successful and then we can see here that our contract has a balance as well so we're getting the contract balance as well so everything's really Tui and fluid and easy to do um and then you would also see this uh withdraw function so let's try to hit that it's going to tell me I'm not the owner of the contract so who's the owner of the contract does anyone want to tell me who what this address is yes in the front Round of Applause so that's the hard hat account so the reason why that's important is if you first start messing with scaffold eth you'll be like who owns the contract well there's a deploy script right below the contracts folder and here uh we basically get a CO a list of all the named accounts right here and then we do the deploy and we pass in an argument uh as the deployer so because we have if we look back at our smart contract there is a ownable kind of well not ownable but there's an U um Access Control pattern in here it's it's kind of hardcoded you probably want to use ownable here from open Zeppelin but we've kind of like hardcoded one in where we actually pass in the owner of the uh contract here we have our own little modifier here and we're basically checking for that on the withdrawal function so if we go right here it says well you you have to be the owner right of the contract so the reason why I'm saying that is you can come in here and you can grab your burner wallet so we can copy the address and then we can just paste that in here save it now we can redeploy so now if you want to redeploy you can do yarn deploy again if you haven't made a change to your smart contract you'll notice that it doesn't compile uh and that's because like it just detects that if you want to force a new contract you can do D- reset and it will always force a new contract and so that's really useful if you just want to like reset everything and kind of guarantee that you get a deploy you'll notice that you continue to kind of keep getting a new contract so so now if you look at the owner it matches the burner wallet right so we have this thing so if you're about to launch to a test net you probably don't want hard hat to have access to the contract you probably want to have your own deployer account which we're going to get to in a second but um now we are able to to do that so now if I actually do some value so first of all I want to bring up a new incognito window and and if I'm going too fast for people this has been recorded many times um and it also is live streamed so you guys can go back and watch it or I'll be here to to answer any questions you guys have but if you notice in in a new incognito window I get a new burner wallet so I can come in here grab some e change the greeting to yo what's up like this send some value I could send 0.05 eth send and if I try to withdraw here it's going to say I'm not the owner but if I come over to this one now now I can like refresh come to the bottom I see there's a balance and I can withdraw it and it was successful so you can kind of start messing you see how we start tinkering around um and yeah so the next thing I want to talk about is uh if you want to take your contract from here and then you want to like push it to a testnet because like local stuff is great but at some point you're probably going to want to collaborate with your team um you don't want to use the hard hat accounts to do that because those are shared hard hat accounts everyone has the same private keys and so the minute you try to fund one of those accounts to do your deploy it's going to fail because someone's going to uh withdraw all the funds from that deployer account so there's a a a function in here where you can do yarn run generate or I think just yarn generate works too uh but what it's going to do is it's going to generate a private key for you a deployer account in the environment file locally and then it's going to give you a public address so then you can basically take that and you can fund it so let's say you want to let's say we want to deploy to sapoia right now right so we can do yarn account and we can kind of see what's going to pop up here it's going to bring up a QR code for us so we could like scan it on our phone if we had some test net funds on our phone and then it's going to give us a public address and it's also going to go out and check balances for all the accounts okay so we could take this address now because this is the account that I just generated I could come over here to metamask if I have some funds in my metamask which I have a lot so I'll send some some AIA eth uh I'll send 0.05 sure okay next confirm so Baba I was able to uh send this from my metamask to my deployer account and if we just give that a second and then do another YN account and then we can see I hope that was on spolia was it it was M net no yeah yeah was let me just make sure yes okay so there it is so the balance has been updated so we see here that we get a balance right z uh 0.05 so now what we can do is do yarn deploy D- Network Saia so that's going to take our contract it's going to see that there's nothing to compile but it's going to deploy it to sapoia for us using that deployer account that we generated so really seamless experience to start writing a contract deploy it to the test net and obviously that's going to be a lot slower than hard hat so we might have to wait just a second here but we will give that a sec there it go so now it deployed so we've deployed our contract so we have the address here right here so we can look it up on spolia ether scan and we can paste it in and see if it deployed right and now the contract is deployed it was deployed 19 seconds ago but if you look right here it's also already verified but chances are your contract is not going to be verified because you probably have made some changes I didn't do any changes to my contract uh but if it wasn't there is a yarn verify uh uh-- Network um seoa and it will take the contract uh compile it and then compare the bite code uh with ether scan to verify it basically to make it trustworthy and then it's going to give you that green check box so the reason why that's important is if you're going to go for the graph Bounty you probably want to create a subgraph for your uh uh contract and you'll want to have the ABI uh on and available in ether scan and so that is a real simple command to do that and then you'll be ready to do the graph bouncy so you guys can get two things for one okay so um yeah so that's already verified the next thing we want to look at is like how we update our front end a little bit so I only have like five minutes so this is like uh speedrun scaffold eth uh so we look in the nextjs folder I'm going to briefly touch on it but there's a couple config files the first one is the scaffold config so if you come here there's a chains. hard hat so we can change that to sepolia and then save it and then if we come back to scaffold eth and refresh we'll get kicked out of our burner wallet here but then we can connect metamask so we can say metamask now we're on metamask and I have my contract on sapoia right here the Network's been updated so now I'm ready to interact with my contract on sapoia right so I could set a greeting to eth istan buul like this hit send it's going to ask me to pay some gas this is going to be you know be an actual transaction that I'll have to sign so we were able to update our front end deploy a contract uh do that kind of stuff and then we could also deploy if we wanted to take this and share it with our teammates we could do a yarn versell that's going to basically package up the entire front end for us uh set up and deploy yes uh which one do I it if you haven't logged into verell it's going to ask you to log in or create an account here it asks you if you want to link it to an existing project what you want to name the project where the source code is it's going to set it up and then upload it for us so it's going to actually deploy your front end and then go from there so really seamless experience to then take your app and put it on a uh you know public web server that you can then share with your team and start doing some some more uh collaboration so it's building this might take a second so I'm not going to stick on this but just so you know at the end of this it's going to give us a a URL that we can access our dap and any of you guys could have been able to go there um I want to touch on a couple of things real quick because this is really important so inside of the uh Pages directory there's an app TSX directory this is kind of like the the main app file for scaffold eth uh but if you look into the uh see here index TSX file this is probably where you want to start building your app um we use scaffold E uses wag me and it also uses rainbow kit uh and uses typescript nextjs uh and it has a bunch of of hooks and components available already so first of all you can use wag me to get the account information or to get balances or whatever you want to do all of the wag me hooks are listed on the docs uh for wagy and they're available here instead of scaffold eth so if you want to start doing front end stuff you can reference that and then if you go to docs.

scaffold doio there's a section that does that talks about all the components so like there's an address component so you can get this kind of like pretty little ens resolution with the copy button uh there's also a balance so you can get like a pretty uh balance that you can convert from eth to US Dollars just by clicking um there's an address input that does enss resolution right so you can type in an ens name and it will resolve it for you so there's a lot of these hooks or sorry components built in and then there's also scaffold eth hooks um so if you go here to scaffold eth hooks there's a a a hook that allows you to read from your smart contract there's a hook that allows you to write to your smart contract like here you can pass in some arguments like maybe you want to set the greeting and then you need to set the value as an argument so everything's written for you to make it easy to actually start writing your front end and uh it yeah it's pretty seamless to do uh normally at this point I would start kind of showing you guys how to write some front end stuff but I think uh the docs is really good and uh I think there's lots of examples there you guys you guys won't need that so I have one minute for questions so anyone have a question yeah yeah yeah I can I'm sorry I can't hear you can you speak up uh can you yeah display the transaction receipts in the UI yeah yeah yeah you should it it comes back as an object I don't know if there's a um a hook for that um I mean I know you can like look at events theu show me earlier oh like the actual like uh pull drop down thing yeah like yeah that pulled on like yeah I'm not sure where that is I'd have to look but let's connect offline and I'll I'll look it up for you yeah the other question is can you deploy the contract in multi multiple chain uh with the same address from I'm sorry can you speak up I can't hear you it's really hard can you uh can you deploy the contract uh into the multiple chain with the same address from scaffold multiple chains uh no we don't have any support for that it would be single chain so you could I guess technically you could keep deploying to multiple chains and keep updating them or like just use different commands but the UI can only point to one chain you would have to write you'd have to create a fork of scaffold eth and build something cool like that but that would be awesome so yeah