Buidl Guidl 🏗 Introduction to BUIDLing with Scaffold ETH 2 🛠 - Kevin Jones

foreign [Music] we're going to get started right on time because we're going to get through a lot of cool stuff today guys thank you so much for coming uh my name is Kevin Jones I'm a developer relations engineer working for engine node working on the graph and I'm also a advocate for scaffold the eighth part of the build Guild or the Biddle giddle as you might have heard uh today I'm going to be talking about scaffold eat though it's basically this kind of awesome tool kit that kind of gets you up and started quickly for building dapps so it's really really useful for hackathons because it is just a really good starting point this is all my contact info uh feel free to connect with me on whatever you prefer I'm on Twitter telegram I'll be here around two as well I'll be at the the graph Booth so if you guys have questions about the graph or about scaffold eat after this be happy to help you guys out so please connect with me um on Army slides we're gonna pretty much do like real-time demo here but first of all I kind of want to talk about scaffoldeth there's two versions of scaffold I'm going to be mainly focusing today on scaffold E2 which is the newest uh flavor of scaffold beef uh there was a lot of cool improvements that have been made to the project and more specifically it comes with Nexus uh it's kind of revolves around typescript uh it also uses rainbow kit and wag me and it also uses hard hat we're in the process of making a cool build that actually might support Foundry as well but for everyone here this is kind of what you get with it it's a GitHub repository so if you just search scaffold D2 it's going to show up as the first kind of uh thing you can come in here you can template this and kind of copy it over to your own GitHub that's usually what I recommend and then you can kind of use that as kind of like your project for the hackathon um so we're just going to kind of get started so uh I'm using tmux which is just like a terminal multiplexer it kind of always has uh it has the ability to have like multiple windows in one kind of console but you could just use multiple windows you kind of always need three windows with scaffoldeth uh because you're have your backhand which is running hard hat and you have your front end which is running next JS react and then you have this kind of like third window where you're doing your deploys and kind of pushing your changes right so uh I went ahead and just checked out the repository already ahead of time and I've also gone ahead and did a yarn install so your yard install is going to basically install all of the dependencies for you and get you up and running uh once you're ready to go you just do yarn chain so yarn chain is going to spin up again a copy of hard hat is going to give you these kind of like hard hat accounts that are available for you to toy around with and start messing around with uh the evm and start testing your smart contract and then in the second window we're going to run our our front end so you're going to start okay so yarn start is going to do exactly that it's going to start up uh next.js on localhost 3000 we'll open that up in a second real fast a huge improvement over scaffoldeth one which use just straight react nextgs is just really really fast and awesome um and then same thing in this third window we're going to use for like all of our deployments okay so we're going to do a yarn to play now what that's going to do is actually uh scaffolding comes with a smart contract so we can see that our contract got deployed we did a transaction we created our contract and it tells us how much gas we use because we're console logging that stuff into hard hat which is really cool and we also see that scaffold our hard hat mind that block right and then we see like yeah we can optimize our contract based on gas because we know that's there we see our contract address let's take a look first of all uh we'll I'll bring up vs code we'll get to that in a second but let's go ahead and load up the application so we're going to use let's see where's it at scaffold youth here we go so scaffolding is like I said it's next.js so this is kind of what you get when you launch uh scaffold eat and one of the things you'll notice is that we got this kind of uh wallet that's automatically integrated so scaffold youth has this concept of burner wallets so you don't necessarily have to use metamask you can just use the burner wallet it's ready to go and we have this kind of identity that we can start testing with so I could grab some funds from the faucet by just clicking that that sends some funds from hard hat into my burner wallet and I'm ready to start interacting with my contract so where's my contract well it injects it automatically here into debug contracts so it basically takes the ABI for the smart contract which is kind of like the interface right that tells your smart contract and your front end how to talk to each other and it creates all and populates all these fields for you so you can start doing testing against your kind of uh functions and you instantly get an output on your variables right so you see like all right cool we have a greeting variable looks like a string we have an owner variable which is an address we have a Boolean that's set to false and then we have like a counter and then we have this like reads functions as well we also see our contract address here we see if it has any funds we see what network we're on and we can come in here and say like all right well let's change the ingredient so we have this like right contract so we can tell right now there's a set greeting function in our smart contract and I can change it to whatever so Fubar and hit send and now I've updated the state of the contract so we have this kind of like it's like a hello world contract really basic um let's take a look at what it looks like so let's go ahead and load up the directory for for scaffoldeeth mainly uh the beauty of scaffolding is everything revolves around yarn so there's like a package.json file that has these kind of commands for you to just navigate and do stuff in scaffold eth but more importantly there's the the two packages it's a it's a a lunar repo so you have a hard hat repo and you have a Nexus repo so we can go right into hard hat and we could go into our contracts and go into the year contract and then we can see our contract so this is kind of like I said the hello world contract we can kind of start like hacking away at our contract so I just kind of want to show you guys how this works so we see here that we have like this owner variable let's go ahead and like dump that I always like to kind of get the contract let's also get rid of the Constructor because we're going to make like an empty Constructor and we're also going to get rid of this modifier and let's just say you made all these changes right we're also going to get rid of this uh withdrawal function and we're gonna save that and then we could try to do a deployed now now if we wanted to we could do a yarn deploy if it just sends changes in the uh contract it would give you a new contract but we're getting an error and the reason why I want to highlight this is we had this Constructor and we were passing some arguments in it and because scaffold ethuses hard hat we also need to fix the deploy script so if you take out this Constructor which I did I kind of I kind of ripped out the contents of it made it empty we also got to go into the deploy script and look at the actual deployment so uh if you're not familiar with hard hat it's a you know JavaScript basically it uses ethers to deploy a contract and we'll see here that there's a uh we're getting a copy of our contract or we're actually deploying our contract here which is called your contract and we're using some arguments that we're passing into the Constructor so it's basically complaining about that so I'm just going to wipe that out because we were using the deployer account to set a variable at the in the Constructor so I'm just going to save that and kind of redeploy again so if you ever want to like force now it was successful if you ever want to like force your contract to deploy as well like if you do a yarn to play again it's going to see that uh well you don't need to actually read upload the contract because it's the same but you can also uh force a contract by doing yarn deploy dash dash reset and it will basically force a new contract to be deployed okay so let's let's take a look now so now ruis automatically changed right we've gotten rid of this owner variable we've gotten rid of uh you know the the withdrawal function and now we're kind of in this new state where we can start kind of like building out whatever we want right so we could see what that might kind of look like um so let's close the deployer script because we're we're not going to mean to really mess with that at all but we could actually instead of using so earlier we had this like modifier and we had this concept of like access control that's one of the things you'll learn when you're building on ethereum you need to have some kind of access control for certain functions well you can just actually import the existing ownable smart contract which is an open Zeppelin contract just by importing it like this and then we can take our contract and then inherit that right so we import own Bowl which is just this uh open Zeppelin contract if you're not familiar with open Zeppelin it's kind of like a collection of contracts that are you know for different use cases and they're kind of like vetted and and widely adopted and then we can just import that and use it here or sorry inherit that as here and then save that so when we make those couple changes again we're going to do our change and then deploy a change and see if it goes through which it was successful and then we we you're kind of in this feedback loop with scaffolding so you're editing your front end right with uh your editor you're deploying your changes using uh hard hat and using using the yarn command and then you're coming in here to the UI and reflecting and seeing your changes and so you could start to do interesting things like maybe we want to see now that we have access to um the ownable we also have this transfer ownership function so we might be able to call that in our deploy script like let's say if we want to transfer ownership to another address or we want to renounce ownership of the contract we can call the renounce ownership which allows you to throw away the contract so you can kind of use composable contracts that are already available from open Zeppelin to kind of start your project so if you're going to use erc20 token or credit erc20 token then you can get the open Zeppelin one or if you're going to do an ft you can get 721 or 1155s and just import those and they'll just show up here in uh in scaffold Dave um and then we have this example UI which is pretty cool it's just gives you like some examples like one thing I always hear from developers is like all right I'm really good at like writing smart contracts but I don't know the front end components so we're going to dive a little bit into that and show you kind of what that looks like but there's a lot of components that are already written for you that make it easy to build your dap and this is just a really good example of like all right well we have this kind of window we have this like greeting option we can actually say hello world here like this and hit send and it will like update that by sending some transaction and then what we'll notice here is we our counter increase right we get our new new state kind of coming over there and then if we go back to debug contracts we can see that now we've been able to actually send some Ethan to the contract because this example UI not only does it allow us to change the state but it also has a value that it attaches to it right so we're actually sending in some value we're paying for the gas and we're kind of creating this you know interesting function it's not that interesting but it's cool just to kind of see how it works um and so let's let's dive a little bit more into the code of of uh scaffold east's front end so again if you're if you're editing your contract it's in your hard hat contracts your contract you can kind of hit come in here and do whatever you want if you're new to like uh building on solidity what I always tell people do is go to solidity by example celebrity by example is just a really cool place to get examples so like an example would be like you don't you want to get like a mapping right you can come in here grab the mapping paste it into your smart contract uh right here right oh copyright uh tab boom save it deploy and then we'll see that we got a new copy of our contract and then we'll see that we have this new mapping available in our front end right here it is it's a my map and then we can like check this balance or something like that like grab this and see if there's some kind of map to a value there's none but maybe you do that in the Constructor right maybe you at the time you deploy something you set a value so you can start doing interesting things just by grabbing examples from solidity by example and kind of pasting those in your contract um uh okay so slender by example is great um let's go a little bit more into the UI so like I said the magic to to scaffold eat is it build that debug contract tab for you which allows you to kind of get up and running start doing some some testing you can also do something like this where you say like all right new incognito window go to localhost 3000 and then you get this like new identity so you not only do you have you know this kind of like burner wallet here but you also get access to a burner wallet here and you can start kind of testing different personas that are using your dap um and so that's really useful because the burner wallet is actually stored inside of the browser session so if I was to come here and close this again and then also open up another incognito window we would get this kind of new identity right and a new murder wallet right so you can really kind of toy around with like access control or whatever kind of functions that you want with another identity okay so let's look at the front end so next JS is you know awesome it's a little bit um you know if you're if you're just good with solidity then it can be kind of a little bit challenging when you start writing uh you know your front end but the cool thing is under Pages we have this kind of example UI which references the components example UI and then we have this contract data which allows us to get all of the contract data from our smart contracts and there's kind of some examples in there and then also like a contract interaction as well which shows you how to do like uh use scaffold Eat Right which is like a you know a hook that you can use and so you can come in here and kind of like use this you can see like with scaffold youth we have these hooks so we have like one for like using the contract reading the contract uh subscribing to events or seeing the history so there's all this kind of Interest stuff and then again we use wag me so like let's kind of start hacking away at like a front end so you can kind of see what we would do so what I always tell people is I like if you're building an app use the index TS TS file which is this kind of like home thing which originally just set up to kind of show you like where you should go to do stuff oh also real quick there's a block Explorer which is really interesting it's new uh but it also shows you like all your transaction history which is really cool you can see like you know what what you called what function was called um it's just kind of interesting to see like the the history of that um but yeah so if you want to edit this thing this is index.ts right so we can come in here and we can like just kind of wipe out some of this stuff so let's get rid of this and save that so we save it well right we get this kind of like clean slate so you can kind of think of it like you're building your dap inside of this home folder and it's going to be available inside the middle section but you still get access to all the you know everything the Trap grounds Capital deep okay so um let's just say that we want to do something like this we could say like I don't know um we'll do const and then we say like all right address we want to get the address uh of the smart contract for wagme so we can use uh sorry from uh use account right and my IDE basically automatically imported wagweed for me here so um I'd have that enabled so we can see we have used account access and then we're able to access that and so one example would be like let's uh use uh one of the components that comes with scaffolding is called address so we can say address we say address equals address like this and then close it off and save that address equal oh I need to import that yeah so let's see it's we can go through opponents example UI I think it's under use a recap said you know yeah maybe it'll pop up yeah on where yeah we'd like to last letter or Harris oh here there we go thank you I'm still learning like vs code I mean I'm like a a terminal kind of guy so I'm using the Vim you know so this is all new for me um okay so yeah that's just an example so here we can see we got access to the count which is like just a component right and so we can get that we could also do something like um grab the balance so we can say like all right well const uh let's grab the balance and by the way I'm not a front-end guy either I'm still like uh pretty much green so uh we can say use uh acute balance right it's gonna also import that for us and then we can also create another one so let's be slow here and see if it actually takes it there we go did it and the same thing we can pass the address in here um and so learning this AI stuff too I got this Auto completion did I spell that no didn't cause it right but you get the idea so there's some components are available so now we have the uh address here and then we can also get access to the balance right so there's all these interesting like components in there um I'm not going to get too far into it because you know it takes a while to build out a full UI uh but I but I would say go into the uh examples uh here in the the contract data contract interactions and then you can start kind of doing some stuff um but I also want to showcase one other thing so as you guys know I also work for Edge node working on the graph and so I wrote this blog post which is also quite interesting because there there is a bounty available for the graph and so if you want to use scaffold Ethan you're also are interested in using the graph the graph is kind of like this API layer I wrote a good blog post that walks you through how to set up scaffold eth and there's a special package of scaffoldeth uh or I should say a special branch called subgraph package uh for scaffolding two and and inside of here there's a complete dockerized version of the graph that you can set up and so my blog post actually walks through like basically all this stuff with scaffold eat that I went through at least the basics of like deploying your contract making some changes but it also goes into like how you actually spin up uh the graph and how you create a subgraph using the uh command line stuff there's again there's also these yarn commands written for you so make it really easy that you can generate a subgraph based on your smart contract so if you write your smart contract all you got to do is just run these yarn commands and it will generate all the subgraph information for you and then you can publish that to Docker so the one caveat to this solution is it runs in Docker so if you want to use scaffoldeth and you want to run it locally this is a really cool way to do that and then you don't have to deal with the internet connection uh if there's any issues but you can also take your sub graph at some point oh that's what I want to show you guys next so let's say that you want to deploy this to a test net right everything we've been doing kind of is local the the next thing you might want to do and which time do I get 10 minutes the next thing I want to do is actually do a yarn generate uh and actually generate a deployer account so you don't want to use hard hat accounts to deploy your smart contract because everyone has the private key right so you need to generate a new uh private key so we store that in an environment file uh locally and then you can just do a yarn account and you can fund this uh account so you get access to the address and you can just fund it like you could just go on your phone like if I pulled this up right into I could send some test and eat there and then you can do a yarn deploy uh like this net Dash Network and sapolia or go early or whatever test net you want right so that's really useful because you can use hard hat as that Catalyst just to push your contract to a test net and then you could use uh if you stop by the graph Booth there's a sheet that walks you through how to deploy a subgraph using the CLI and you can deploy it to a test net as well so there's this kind of like seamless and options for you on how you deploy your smart contract and then on top of that you can come into the the front end and and if we go to the next JS directory and we go to this scaffold config there's a change a Target network uh key value or uh setting so I can change this to whatever I want so if I want to switch this to sepholia like this hit save and then take go to my UI again uh it's going to tell me that well first of all it's going to get rid of my burner wallet because we don't have access to the burn roll anymore so then we're going to say I have to actually connect to metamask so we have that option and we can see now that I have my metamask connected I got 10 sepolia eth and now my dap is hooked to spoila right so it's that easy you just um you know change deploy your contract to the test net using the deployer account update your UI then you can take your um uh your application your front end and you can do a yarn uh verse cell YOLO like that and basically it'll take your um your thing if I did it right now I would say like all right we need to authenticate uh oh I already did it earlier so then it's taking my contact uploading it to versel and then I have my front end available so that my team can start interacting with it right so this is kind of full seamless solution where you use scaffold it to kind of kind of do everything um so what else can I show you guys okay um so one thing I would say too is I don't know if you guys are familiar with speed run ethereum so this Shameless plug but speedrunner theory was an awesome way like after the hackathon if you kind of want to get more involved in uh uh the ethereum community and and the building Community uh Speed Run ethereum is this kind of like set of challenges where you can go through and do different like projects and deploy different things the first one is like an nft then you create a staking app and then you create a token vendor and then eventually you can actually get invited to the build Guild which the build Guild is kind of this collection of developers or group of developers community that are all kind of working with scaffold eth and helping the community grow forward and uh so far there's about 770 Builders there's been 784 builds of scaffold youth won and scaffold E2 and then on top of that we have certain developers that want to be really involved in the community and you can actually get a stream and you can actually be be funded as a developer to create and use scaffold ether you know promote scaffolding or build on top of scaffolding and help the ecosystem so that's a really really cool thing um I also have a pull-up so I would love for you guys to get my pull-up after this um yeah so I think right now I think maybe we can open it up for questions and see if anyone has questions about scaffoldeth or anything that I showed gotta be at least one question yeah so we are working on uh the the core developers of scaffolding 2 are working on a kind of a cool like Adventure uh Choose Your Own Adventure style thing where like you might check out the repository and say oh I want to actually use Foundry or I want to use I don't know whatever different component right so we're looking to do more stuff like that and that's in the in the works so that'll be coming coming soon uh oh I didn't really actually tell tests show as well there are yarn tests so we use hard hat so there's some like urine tests that you can do oh at least there was I'm a big hour of them actually uh so maybe that's part of like the plan is we're going to use you know Foundry tests or something like that yeah I think that's a great question so the question was about the branch being behind on the main branch yeah that's something probably I need to work on and merge it all up um but I haven't gotten a chance to do it I didn't actually write that Branch uh Simone from Imagine node wrote it which is super awesome um but uh yeah it's okay to use it it's missing the block Explorer uh and I can't think of anything else that's really drastically changed everything else is very it's very it's a very close uh in commits that's not that far better yeah so yeah the question is uh you know we use we utilize an older style of deploying next.

js app and create next JS app um I don't think there's an option that I know of to change that uh that would that would be something that like you know we would look to you know the community for people that want to be involved maybe that's something you could you know be part of the build Guild and help with something like that but I can't think of anything that you can do right now um maybe in the future we'll switch everything over uh scaffolding 2 is kind of a really fast prototyping mode right now there's a lot of developers working on it so they're doing a lot of future stuff but maybe that's something that's coming that I just don't know about so yeah fair enough yep another question uh do people in building do client projects like work for clients uh yeah absolutely yeah so if there's certain uh projects that you need help with um you know we can work with you on that kind of stuff um just come find me afterwards and I can get you in touch with uh with someone that can help you with that yeah thank you I thought I saw another question yeah I love it thank you that's awesome yeah cool yeah yeah and it's also worth noting that speed around ethereum right now all the challenges are actually written with scaffoldeth one uh so there you might notice there are some differences if you're going through like what I did but the good thing is there's like tons of videos online for your scaffolding version one that we'll walk you through that stuff so awesome any other questions no thank you guys so much for coming appreciate it [Applause]