Scaffold ETH 🛠️ Building dApps Quickly

[Music] silent disco okay uh I am Austin gri oh what do we have here this is kind of a weird screen I guess that'll work I'm Austin Griffith uh I work for the build Guild Dow we do uh education prototyping and Grant giving uh our education product is speedrun ethereum if you have technical people technical web 2 people if you have nerds coming into the space and they're trying to figure out how to get started and kind of learn the AHA moments tell them to go to speedrun ethereum speedrun ethereum is just like this condensed curriculum that will take your technical folks uh straight through those aha moments that are really important not just teaching you kind of the how but also the why uh let's get metamask out of there uh but after our educational stuff uh you know you'll build a decks you'll build State channels you'll build all of these uh apps that are really applicable to the space and help you get an idea of like what kinds of things you actually build on ethereum not just using it like a an expensive database for instance building a DEX is really important it's going to teach you about hyper structures and LPS and stuff like that uh but then once you're done learning we have this tool called scaffold eth which is made for prototyping and building apps which I'll show today in a real quick speedrun uh and uh we also build a lot of apps with scaffold e uh ABI ninja is a way to like it's like an instant front end for any contract uh hacked wallet recovery came from our community it's like a flash Bots tool that takes a wallet that's been hacked and packages up a flash Bots uh bundle to sweep any remaining assets that that are locked in that account uh and then what was the other one here I think it is address vision is another like little utility we have that's written in scaffold e that's just a handy public good for the ecosystem let me close all those out and then uh on on the other end we do a lot of Grants we give a lot of small grants on the edge to small hackathons and uh Builders uh working for open source but today it's all about building apps quickly and I'm going to dive into scaffold e 2 uh I've already done this part right here but let me just show you one more time uh what you do is you can Fork the repo by going to uh GitHub and and stealing that or you can run this whoops I didn't want to do that or you can run this MPX create eth either of these commands work and what's going to happen here is it's going to give you kind of a Choose Your Own Adventure here it'll you know we'll name our project London or something like that but this is the important part here you kind of have this choice between hard hat or Foundry and it lets you choose which one you want to use some teams want one some teams want others we just want to have the optionality there uh I've already chosen hard hat for this project I've given it a name uh I've spun up scaffold eth uh there's like three different commands you'll see it in the repo but you have to do a yarn start and that brings up your front end you have to do a yarn chain and that brings up your uh blockchain and then you do a yarn deploy and that is going to ship your template contract out to your local network and this is this is the most important part of of scaffold eth right here so you have your smart contract here and let's add a public address delegate right so this this is just a no not delete there we go we're going to create a delegate right and if I hit save there and I redeploy this now over in scaffold eth I have a front end that's Auto adapting to my smart contract live as I'm deploying things so this lets me really Tinker with and understand how I want uh my smart contract to work uhoh looks like something didn't work here what' I do WR here address public right I wrote it wrong here we go all right let's try that again please work second try and what we're going to see is this new delegate shows up right okay so now we have this uh new delegate I probably should just show you the smart contract real quick just so you uh have a lay of the land we kind of put in a handful of things in this template smart contract just to give you an idea of like Primitives and data types just to kind of get you started with solidity quickly uh if if you already know solidity you're going to be able to just jump in here and start hacking but if you don't you can go to solidity by example and use the examples from solidity by example and copy them in here and Tinker with them uh but let's see we have a greeting classic greeting contract here uh a really interesting thing it looks like it's a payable function and if the value is greater than zero we set some premium flag let's go do that real quick just to do a Hello World and I'll grab some money from the faucet and I'll hit send and we see our greeting change there right but what we want to do is let's pay a little money too I'm going to pay 01 eth and notice this is kind of clunky you might think this is like a a ux DX kind of thing we want the developer to have to know what's happening here I can't put in 01 because we don't have floating Point math it's in in the evm so what you have to do is hit this little button and you have to take it from eth to way and of course you would not want your end user to do that but here while you're tinkering as a developer you absolutely need to do that so you have it in your mind what's going on and you know what is Wei and what is eth uh and there we go we just paid a little money our little premium flag went to true we're able to set the greeting to hello world so that's basically it's just a greeter contract so let's say this is your hackathon project it's time for you to build something cool right so uh you can get in here and uh add things to your smart contract right I'm going to start with adding a delegate and then I'm going to create a function that lets me like I don't know know update the delegate let's see what are we doing here there we go set delegate yep up looks good I'm just going to let anybody do it too so it's like a per it's like totally public function that anybody can set and it's kind of just this arbitrary delegate I don't know exactly what I'm doing here maybe I would have the delegate like receive money as people are setting the greeting but I don't have time for that we have like 14 more minutes left so I got to just kind of ship something small so uh it makes sense so we have this new delegate address that we added to our smart contract and then we added a set delegate function and if I go ahead and deploy that let's see uh if we can Tinker with it in the front end there we go and now we have this new set delegate function here right and if we want to set vitalic to the delegate look at that it does this nice like ens Avatar preview you have a nice blocky preview it just looks nice uh and if we hit send here what happens there we go now we've set vitalic as our delegate now let's pretend like this contract is solid and it's what we want obviously you've got all weekend you would spend a lot more time getting your smart contract the way you want but since this is just kind of a compressed uh demo let's just pretend like I just spent a couple hours working on my contract and I've tested it and it all looks good and now it's time to ship our app so this this is kind of you kind of shift modes you kind of go from tinkering here where you're making changes to your smart contract and you're tinkering with it and testing your assumptions in the front end to let's build a front end that our users could use right so I just want to bring in this delegate and this set delegate functionality into just the react app and show you guys Hooks and how quick it is to build apps with scaffold e so uh let's go into our so we were in the hard hat mostly there now we're going to go into the nextjs and we're going to go into the app and we're going to write some stinking react and you'll find if you're building a hackathon project or anything that people use you'll spend about this much time writing your smart contract and about this much time doing stupid react but that's what it's that's the game that's the name of the game if you want to build consumer apps and things that people use you got to spend a lot of time on that on that ux okay so uh let's see our landing page kind of lets us know who's connected it gives us some guides I'm probably just going to tear most of that out let's see let's just delete some stuff here whoa maybe to there let's see no one more how's that look did I clean it up there we go nice okay so uh what I want to do now is I want to display the delegate so we need to do a read from the contract to display it here so when you go to do a read you're going to use a hook and by the way let's look at this hook right here this use account Hook is from wag me so if you uh end up like needing more documentation there you can always go to wagm Dosh and learn more about their hooks but we've even wrapped their hooks into something even more abstract because we deal with like the wallets and the network and stuff for you so really you uh you can use our Hooks and I'll get to that in a second uh let's let's do that let's get in here so this is the wag me hook and it's giv us the connected address and that's how we're displaying this here and notice this nice address component again just like in the input uh we have these really nice components that are going to do things like ens out of the box to help you build your app quicker okay so let's do let's make a hook that is going to use scaffold contract read that's what I want there we go it's kind of a mouthful but it's a really powerful and nice function uh what I'll do here is I'll put in a contract name and look at that it autocompletes with my contract so if I have a bunch of contracts they're going to uh autocomplete in there right we want your contract and then uh function name and what are we going to call hopefully it does look at that it does some nice completion here what do we want delegate own greeting I think I want the delegate right okay and no arguments will go in and what's going to come back out here is going to be some data that we can rename to delegate wow it's good thing I didn't try to do a prediction Market I'm not going to have enough time I'm barely going to get this thing deployed I was thinking about doing a little prediction Market but we re reverted to just doing this delegate okay and then let's grab this address component it's okay paste this in here and we'll say the delegate [Music] address is this dude's address right here and let's see if it worked yeah it's metallic okay so we're displaying the person who's connected we're displaying the delegate address from the contract so reading a value from the contract now I want to demonstrate writing to the contract right so what we're going to need is probably some input form uh that we'll TR probably track in the state and then we'll do some uh use contract right so maybe let's see let's just start working on this UI and see if it kind of unfurls for us here so we want to what like set set delegate okay and then we're going to have an address input component yeah and let's see uh let's call this new delegate and then on change we'll do something like set new delegate okay uh oh I want that to be new delegate oh new address I think that works and then let's see if it like recognizes that I need some State here yes it did all right cool and I need to import use State oh where we at now something still oh I need to close the address input there we go so I think oh is it still broken y nice so now we have this input form and if I put in atg doeth it should oh no it's not uh let's see it's not tracking the value somehow oh this needs to be value I think there we go there we go Okay then if I do atg doeth okay and now we need a button so we're tracking that state now we have this nice input component that let's us put in an address and then uh it yeah resolves it and everything but now what we need this little button we can hit right here that says set delegate and does a right on the contract and so that will use we're going to do const uh use scaffold contract write this time we're going to write to the contract and it's going to be shaped the same it's going to have this object with this contract name right and we also need some function name of what's the what do we want to call we want to call set delegate right and then uh for the args we're actually going to have args here it will be new delegate right how's that looking okay and then what do we have like a right async that comes back here yes and I'm going to rename that to set delegate so so with this hook right here we're reading the delegate from the contract uh and with this hook right here we're going to write a new delegate to the contract so you're reading and writing from your contract from these nice hooks right in your front end let's go wire up that button and see if we can get this thing to work let's see div I don't even know what I'm doing uh button definitely oh give me a class name a come on class name equals BTN BTN Das primary oh there it is there it is almost the AI is making me think for myself I hate it all right and we'll do slash button there we go all right and is it set delegate yes we call set delegate right it wired it up correctly so it should call this function all right let's go find out if it works and then if we have six minutes we'll ship it live oh wow that's really ugly but we we don't have time to make that look pretty so what I want to do is make sure I can do atg doeth and then hit set delegate and then what we're looking for is this delegate address yes okay it works all right so we've tinkered with our smart contract for a couple hours and we got it right maybe we wrote some tests then we tinkered with our front end there was kind of this moment where we're tinkering with our smart contract and poking at it and that iteration is really going to help you get your contract figured out then we moved over to the front end and we kind of built out an app that's more like user facing now it's time to deploy this thing live right so if we want to go live we're going to need to put both a smart contract up and then an app on whatever Network we go to and we are running out of time so let's hope uh let's see so uh when it's local you're on your own local blockchain so it's uh free basically to deploy right but if we want to deploy to like base or optimism or or main net we're going to have to pay so to do that you create a new account you do a yarn generate and this creates a a local account that's already get ignored that's isolated to just your deployer so you only send it just enough money to deploy you already have this private key hidden so you can't leak it uh so what we're going to do is I'm going to get this account and I'm going to send it some base and we will deploy and I'm going to use a punk wallet which is uh just like a quick web wallet that was written with the original version of scaffold e uh thankfully we have scaffold e 2 now and we have the builders in the audience and it's a much cleaner much nicer Tool uh let's go let's go base oh man I don't have very much base you don't need very much I don't need very much vase that's a good point let's see how much uh oh yeah 20 bucks is going to be enough right boy I hope so okay five cents to deploy a whole contract yeah all right all right let's go the blobs blobs yeah I love them all right so now just like we were doing that yarn deploy I'm going to do a yarn deploy but I'm I'm going to add D- Network base and cross my fingers that all this works the live demo gods and what this hopefully does is take that smart contract we've been tinkering and deploy it to base live which I think it did right it deployed right here should we go to Bas scan and see how much that cost real quick just for the blob check that was two cents to deploy that smart contract oo wo we're entering a new time where mass mass adoption and cool kids from California are building apps on base boy something new is a something new is about to set off okay so our contract is out but our app isn't out yet and we have three minutes left so I better get cooking here uh what we need to do is uh first I need to switch my front end over to notice it still says hard hat this is another really nice thing about scaffold eth is there's a scaffold config and with one button I always switch that over with one button you can switch your whole app over to a different chain so watch this if I change this to Bas and hit save our app automatically now uh is on base and oh man I don't I don't think I want metamask I'm going to go back to burner wallets uh false save you don't usually use burner wallets in production but I'm going to okay so now our app just by putting it on base our app is on base now so look what happens when I click on this address remember all those address components and all those things when I click on that address it's going to take me to base scan now so if I wanted to go to optimism I'm going to change one variable there and deploy my app and my app's on optimism and it's ready to go right so a lot of these things are going to be handled for you also if I come in with my metamask and I'm on the wrong Network it's going to bump people over to the right Network I don't know if most wallet providers do that do they do that out of the box now yeah like web 3 modal do they switch I okay okay all right so here we go we got to do one last thing our contract is live I don't think my app is going to get deployed in time but what I do is yarn versel YOLO prod and what that's going to do is put my app out on versel uh yes no London it's never going to finish in time there's no way that's going to finish in one minute uh but we might have to just pretend a little bit so we were able to iterate on our smart contract using this nice adaptive front end then we were able to write a nice little UI that's kind of ugly but you can spend a little bit more time on it this weekend uh and then we were able to deploy that app live to Bas and then deploy the front end oh yes no no no no I don't want to modify the settings just work okay so this is going to take a couple minutes to deploy and I think I'm going to have to be out of here uh but this should help you quickly build your hackathon projects it's going to have the stuff that you need out of the box it's a very clean build Carlos doesn't let anything get merged into this thing that doesn't belong so know that this is a very forkable very uh quick and light and lean tool but also very powerful you can build production apps okay thank you all very much go check out scaffold eth go speedrun ethereum [Music]