Scaffold-ETH-2: the best new way to build apps on ethereum

Transcript

[Music] ready now go okay hey how's it going I'm Austin Griffith uh I'm gonna do this kind of like armpit mic thing so I can talk at the same time that I type uh I want to introduce today a couple of Concepts the the main important thing is scaffold eat two scaffold E2 is a modern tech stack for building decentralized applications if you view scaffoldeth one before uh you know it has the same experience you're going to have a contract you're going to have a front end it kind of Auto adapts to your front end but it also makes it really easy to deploy apps live once you're ready the the cool thing I want to show off to add to that today is MPX create eth so MPX create eth is a new command that we have

that will spin up a scaffold E2 environment for you but it also gives you a little bit of Choose Your Own Adventure and it has a templating system with it so I'm going to start with that hopefully the Wi-Fi holds up and we get something built here uh let's see I'm going to build I'm going to try to build an optimism from a test Station app or something like that I'd like to go live with it so I did an MPX create eth at latest that's going to give me the latest code and then op a test I guess is what I'm going to call it and I have a choice here of hard hat or Foundry it's up to you either one works I'm gonna try Foundry today and we'll get that installing so while that's installing it'll take just a second I kind of want to just chill the build

Guild just for a second so the build Guild is a Dao in ethereum and our job is focusing on developer education and onboarding with a kind of combo move where we build a lot of little prototypes and stuff like that so I just wanted to show off buildguild.com if you are a builder thinking about getting into ethereum you should check out speedrun ethereum this is our first call to action here Speed Run ethereum is a way where we take scaffold Ethan we build a bunch of common components within web 2 or with web3 including like a DEX and a multi-sig but also simple things like token vendor in a staking app it really shows you the types of things that you can actually build on

ethereum instead of trying to use ethereum like a database it really teaches you here here's how to actually use ethereum and here are things that you actually can build with it and it really helps you kind of speed run the AHA moments uh and then scaffold eth2 right that's what we're going to be talking about today and then down the kind of tail here where we're supporting up and coming high impact devs so we spend a lot of time looking for uh these up and coming high impact devs and we try to give developer Ubi we try to stream to them we try to host hack our houses uh so that's my show for the build Guild let's dive in and build this thing uh so we're going to CD into the directory I've already done the MPX this is the first command MPX create eth now I'm

going to CD in and uh let's see the first thing I need to do is do a yarn chain that's going to fire up uh our Anvil chain I think on in Foundry and then I'm going to get another window going and we're going to do a yarn start if you use scaffold eat before this is very familiar that'll that'll give us our front end right now over here we can do a yarn deploy and this is going to deploy our template smart contract to our local network and really give us this nice little environment where now we can kind of Tinker around we can build and we can test our assumptions so let me open up the code here so we can see that hope this microphone is loud enough it seems like it's working I'm hearing a slight enough Echo that I think I've got the mic working here the

armpit mic okay so uh you'll notice two packages that install either Foundry or hard hat and then next JS for your front end and then so you'll dig into Foundry to find your contract and this kind of just comes with a nice little template contract there's a ton of stuff here let's let's go Tinker with it in a second and then here's your front end that sort of uh will Auto adapt to your smart contract so if I click over to debug contracts this is a cool screen I get so what I'm going to do is I'm going to add one little thing to my smart contract over here we're going to have some address public boss and we're going to set it equal to and I'm going to go grab my address from my front end and just paste it in there let's just deploy

this I just want to show the the develop Loop the the feedback loop that I want you to get into here's let's just do another yarn deploy so what we're doing here is we're editing our solidity and our front end is auto adapting as we do that deploy see how we knew that we have that new boss there so now if I had some function here like set boss right hopefully the AI just handles it thank you for me and then we go ahead and deploy that again right so we're in this Loop where we're like testing our assumptions we're trying things we're seeing how we want the solidity to work and then over here we get this new feature right let's set you know me to the Box oh we'll need some gas first uh gas is right here this little button here grabs you funds and send and now

I'm the boss right so you can kind of Tinker around with solidity you can figure out what you want to write as you're writing it you can figure out how it works as you're writing it uh it I think it comes with like this greeting it's a greeter contract right it has a change greeting event and and it has some ownership pattern stuff and some withdrawal stuff just a handful of little things in solidity to teach you about data types and things but I think I'm going to just kind of clear this stuff out let's see oh man I'm probably going to regret doing this but I'm going to just pull everything out of here and what I want to do is just make like a quick attestation app so let's see we'll have a mapping from an address to another address and basically

um this will be my cold wallet so what I want what I want to do is I want to build an app that I could give to you today that you could open up and it will have a hot wallet but you'll be able to type in your cold wallet and hit go and I'll have to send you some optimism to get that to work you have to have optimism in your wallet so I don't know exactly how we would do this but let's let's just go with it for as an app to build right and we're going to need some function that allows you to set your cold wallet right there we go yeah so for the message dot sender yeah very very very very simple app here and I think this isn't going to deploy because uh Constructor arguments or something he'll yell at us yeah okay so

then I need to dive into my deployment here depending on if you have a Foundry or hard hat this will be a little bit different but what I'm going to do is let's see take out this argument here and then I'm going to probably carve out some stuff in my test Suite too I don't want to do any tests I want to get straight to it let's go I need to deploy this thing okay let's see if it goes oh one more thing wait where is that is that a test wrong argument functions oh it's right here it's right here sorry Okay so we've let's say we've built our

contract we've tinkered with it for a long time uh we've got it working the way we want we've got basically this contract that lets us let's see what it does so it it lets us look up some cold wallet and then we could set some cold wallet right so this is my hot wallet here and if I wanted to set my cold wallet to vitalik.eath I should be able to just hit send there and then if I go look up the cold wallet for this address it should be vitalik.eath right and then if I update it to atg.heath and then go check Okay cool so it's just kind of like a little storage record for a hot wallet or whatever obviously you guys are the solidity to developers you'll figure it out from here you guys can write some awesome solidity the app will

Auto adapt to that it will get you this far but you'll probably want to eventually build something more like this example UI where it looks a lot nicer and you can dig into this and you can find all the hooks that we have we have tons of hooks and components available uh I will try let's see I'm going to try to make just a tiny little bit of UI here okay so this is our home page and I'm going to carve that out just a little bit uh you'll find that you spend way more time writing react than you do writing solidity which is really sad when it comes to building decentralized apps that we have to spend more time on our front ends than our smart contracts but uh you you will sometimes so let's go look at pages I think there's a home page here let me

just carve a few things out of here oh boy that's probably too much about to there or more all right and then I hit save and our home page should probably disappear cool and so let's see uh the first thing I usually do is I do like a use account from wag me right I use wagme's use account whoops looks like it already imported it that's what I want I don't even know what comes in from that but that's what I want there yeah there we go so now this is the address right and if I throw that in here we should see the address that I'm logged in as is that right yes very cool okay but this is super ugly right this is

whenever you start building an app you see a lot of this right someone has a 0x blah it's just sticking out there and there's it's ugly and it's bad HTML so what you can do with scaffold eth is you can use some of these pre-built components that we have check out this address component right if I bring that in and set the address to address I don't think I want any of this stuff I think my AI is being a little bit extra there we go so now we have this nice address component and when I click on that address it takes me to the block Explorer or when I oh boy when I you know I have a nice little copy button I have a nice little blocky there right so all of these components come out of the box with scaffold these should make your

ability to Tinker with solidity a lot easier and also build out apps so we've got our address there what I'd like it's almost like a QR code let's see do I have a QR code no I don't think I do I don't think I'm gonna do that okay so uh let's say you're logged in as your address but then you need to put in a new address so let's do an address input that's a different kind of component that's going to require some State here uh let's see so we're going to say uh yeah we're gonna need an uh some some use State here right we're going to need a um let's see we'll say value equals new address

and we'll say on change is set new address to new address and a nice little placeholder yeah now is it smart enough to know that I want that state right there yes thank you very much that's so awesome and then oh we need to import this yeah all right rad so did we get it nice so now I can put in atg dot oh boy what was that on change oh I think on chain is just set new address let's try that oh man I don't know I don't know what I'm doing

there we go okay so our address component is there it has that nice like ens preview it has a nice blocky preview I think maybe the internet is not working or something I don't know why it's not resolving the ens but there's also an ens there uh okay so uh I don't know why it's doing that I'm not sure I feel like I almost want to pull that UI out just deploy this thing uh let's see so and we're gonna need a button right so we have an address input we're tracking the address now we need one other thing we need like a button in our app that calls a function uh on our smart contract and that button

will have probably some class I think that's it how does that look oh yeah there's there we go we got a button and we say save right so now we've built like a UI that says you're logged in as this person wow we should really use some spacing here but it's not happening I'm just gonna have an ugly UI sorry so we have like our our logged in account then we have some other address that you can enter and then we have a save button and now what we want to do is have that save button call the save function on our contract right so what we need to do is create a new hook or we're going to use a hook called use scaffold contract right and we're going to write to

our smart contract using this hook so scaffoldeth along with the components that it comes with it comes with a bunch of these handy hooks that help you write to your contract so our name is contract our method it's not set address though is it what's the name of our con our function over here oh oh let's use autocomplete we've got typescript here it's it'll tell us okay so let's go back to our uh index page here and let's go right to this spot right here and I think if I put in a quote and then uh uh huh I wonder which one of these it is

it's like a key command that I don't have okay damn it or look at the contract I wanted the autocomplete to work but I didn't know the key okay so it's set cold wallet is our function so we're going to call set cold wallet in our function and arguments why is the same method uh uh maybe it's function maybe it's not method should really give me better hints

okay uh I think it's function name yeah oh yeah there there that's what I wanted okay and then when I do this does it give me the autocomplete no it doesn't lame should normally I don't know what I'm doing wrong okay so we have we're gonna go to our wallet we're gonna set the cold wallet to whatever this new address is that we're tracking and then this is there uh commands control space that's what I okay so if I do control space right here tell me it says set cold well there we go okay it's control space I couldn't find it there we go now it's Auto completed okay and then we get in here and we control space and we're looking for the right async function there we go and we'll set that to uh

uh set new address there we go okay so we have this function called set new address and we want to have that happen on click of this button right so the on click of our button will be set new address oh it's not liking it uh why not uh uh huh I'm not sure this is this is also weird that let's just say do set address just in case I'm doing something weird

with like the function or something yeah lowercase on click needs to be lowercase no way the do set address this I'm not sure I'm not sure what I'm doing wrong here let's see if it actually does it right let's see if I do atg.e and I hit save oh it actually does it what the heck so it's just giving me an error oh man okay one other thing I want to do is just read from that we have time to build this const something's going to come in I'm going to use a use scaffold contract read because I want to get the current

value this is the same way it's going to have an object you'll do contract name you'll do function name let's figure out let's see control space oh maybe I need to bring this in now if I control space here yeah my cold wallet that's what I wanted okay and I don't think there's any arguments save that and this would be the data and it'll be called my cold wallet and then we can display that so we'll have an address that shows our address

we'll have an address that shows our cold wallet we'll have an address input that lets us put in a new wallet and notice it's not set yet okay so then if I say let's see reload make sure this looks good I don't know what that is if I do atg.eth and hit save we should get a transaction and this should update to atg.e but I don't know if it is old wallet I don't know why it's like yelling at me for this stuff either uh okay Okay so the uh I wanted to find the cold well

yes it is a function name because it's a getter right so I want to read this function right here this right it's that mapping so I'll pass in oh so I'll have to pass something in it's got an argument to it right there's an argument here there we go this needs to be address I think okay let's there we go there we go there we go and then if I say you know I switch my cold wallet to my pump wallet Maybe yep there we go okay and then it should update that okay perfect all right we have our app built sorry sorry it's so slow so so you Tinker around with your smart contract you spend a lot of time getting you know writing solidity

tinkering with it with this debug page figuring out you know okay how is this going to work how do I want it to work uh then then you lean into writing some UI you'll build a beautiful UI this is my best UI I have for right now it still looks nice though this still looks nice than like a crappy HTML thing like some spacing would be nice but basically you have this nice like address thing you have the nice address input with ens Avatar if it will load uh so you have a nice front end you can Tinker with this but now it's time to deploy it right let's shift this app all the way to production so the next piece is we need to put our smart contract out on uh an L2 and I'm going to go ahead and just comment this out I don't I don't think

we need the console log stuff there's probably a bunch of stuff that comes with that let's just do one last yarn deploy locally to make sure it's going to work okay okay okay we're happy okay so now it's time to deploy uh to uh probably optimism so I'm going to say yarn generate and I need to create an account this will be my deployer account I'm going to do yarn account and it's going to give me a nice QR code I can send it some optimism uh what do you think ten dollars how much does it cost to deploy a contract on optimism ten dollars is probably pessimistic I should have been more optimistic it's probably like four dollars to deploy this little event

okay so now I'm assuming this dude has some optimism and I'm gonna do a yarn deploy okay now this is we're still working on there's like a little bit of difference between if you pick hard hat or Foundry if you pick hard hat you do have to do dash dash Network and then your network but with Foundry it's just yarn deploy and then our Network so I'm going to yarn deploy optimism pray to the demo Gods this takes a little bit right here yeah I don't know hey hey it's happening it's going this is uh this is good we may have an app out on optimism okay and there's two things we have to change there's you have to deploy your live contract but you also have an app and you have your app pointing to a network

right so what we need to do is point our app at optimism you'll notice that when I click any of these buttons here uh they're going to the local blockchain the local block Explorer so our contract has to go to optimism but then our app has to be appointed at optimism also so there's a scaffold config file in your it's right here it's in your next JS folder but this is like kind of your you can control things here two things I'm going to control I want to set burner wallets so we can use burner wallets and production and then I want to set this to optimism there we go okay now just by hitting that one save button

the whole app changes over to optimism now when I click on this address component that we had from earlier that's going to go to the optimism uh block or block Explorer right so you can point your whole app at the other network by just changing that one value okay so we should have a contract out on optimism and we should have our app here that's pointed to optimism and let's test oh I'm going to have to send some money to this dude real quick we need to send some optimism to this dude's account let's see uh oh man how do I change the network and super super intuitive

okay and then let's see where's optimism here there we go all right and then I want to send a little optimism to this dude uh sure oh that looks better that used to look worse for optimism because it had the two L2 fees I guess it they combined them somehow I don't know okay so now this dude should have optimistic eth in a second he should be able to update his uh cold wallet to atg.e let's see what happens here oh oh burner wallet making a transaction could work could work oh you know what I also want to change my polling time to like five seconds

because optimism is a lot faster than main that youth oh oh he logged me in I don't want to do that I want to still have that burner wallet there we go and it is set to Austin Griffith okay so I was able to use my burner wallet and I was able to set my cold wall I was able to use the app okay we got like 10 minutes left I'm gonna get this thing out there even quicker so now we've deployed our contract it's on optimism we want to yarn versus YOLO prod yeah I'm just gonna do that uh sure uh no let's create a new project right

no uh what is this op a test or something like that yes okay cool so now my app is going to uh compile down and get uploaded to versl and we'll have a URL that other people can go visit right and that would be really cool if you guys could open up your phones go to the URL and attest but you'll need optimism on your phones which is going to be tricky probably next next demo I'll think of something where you don't need gas I'll do a gasless demo where you can just open it up and hit a button but the the goal here is to go from tinkering with a smart contract to I have a live app on an L2 that I could give to my friends

and they could use and or we'll get there uh as soon as this uh versel goes up and we can Tinker around with it um let's see overall uh hopefully I've made it clear like uh scaffolding 2 is a really good new tech stack to use if you're building apps with your smart contracts if you're tinkering with smart contracts if you're just getting in and learning uh dive into scaffold E2 and try it out speedrun ethereum is going to be using scaffold E2 right now I think it's still on scaffold eat one but we're upgrading it uh as as fast as we can and so uh come visit visit buildguild.com come find all of these resources uh speed run ethereum if you want to get started

scaffolding two if you're you know getting into building more apps and you like to have like a front-end deployed for folks um with scaffold E2 we were able to kind of Tinker with our smart contract we were able to test our assumptions by poking at it with this nice debug screen uh all these nice handy components come with scaffolding too then we were able to deploy our contract uh kind of build a little crappy front end and then oh and then uh we were able to hopefully put our app out on to a live network but we're waiting on versal now right it's got to build it and upload it to versel and I

think that's going to take just a little bit longer uh so I can be open to questions now too if you guys have any questions about anything uh mainly check out scaffolding 2 Go Speed Run ethereum uh hit up the build Guild if you've gone through all of these things and you're looking for your next steps uh usually what happens is Builders go through speedrun ethereum uh then then they go and they build like a DEX and a multi-sig and some more complicated things then uh either I reach out or someone from the build Guild reaches out and we get them on a call and we start like a mentorship session where sometimes that involves developer Ubi or some kind of like streaming eth to a developer sometimes that's just connecting folks but here we go here's our production app

and it gives you a burner wallet so if you go to opatest.versell.app let's see let me I'll go to I'll go to each build real quick this is an old build I showed off here in Paris like five years ago or something yeah what I want to do is get this QR code though I always use it for QR codes now there we go so if you were to scan that with your phone let me see if this works if you're to scan that with your phone you should get an app that lets you connect your wallet yeah so that's the thing we just built right we should be able to connect our wallet um oh if you don't connect your wallet if you just go there with your phone notice it's I I enabled burner wallets you don't usually do this with a lot of apps

but I do have a burner wallet there that is already logged in so what I need to do is like get money to this burner wallet which luckily I can copy paste money around but you will probably have a harder time on your phones I have this here I bet I can just do something like that yep and I can send this dude five bucks Okay cool so so I went to the app uh I got a burner wallet on the app I sent .0026 optimism to that burner wallet now I'm going to go to the app and I'm going to say atg.e is my cold wallet and I'm going to hit save and after some time it should set that as my cold

wallet on a live app that I just deployed on a live L2 network with real money uh using scaffolding 2 in like 20 minutes so this this can really help you speed up your process can help you prototype quickly it can help you get a web 3 prototype in your users hands faster can help you Tinker with things there's there's a lot of fun stuff coming out of this stack and I just want to make sure you guys know about there we go yeah it's set so I think that's it I think that's my whole thing I think I I'm supposed to go to like 3 30 maybe I don't know how much longer I'm supposed to go but five more minutes yeah but yeah just open to questions now if anybody has any questions or anything else you'd like me to this is awesome like super sick

I am curious if this Gap I think anything personal effort I'm curious if the scaffolding is templated like so that necess is not the only thing that using as your like modern UI language personally because I have like really nice yeah so we don't have a spelled version so it's it's not as templated like it's it's pretty it's it's pretty opinionated in terms of we didn't use felt or angular or any of those but there's a lot of things that like I don't know dig into it and maybe we can work on a spelled version like like reach out yeah that'd be great my DMs are open let me know that'd be awesome

yeah this one is using the next page router and I guess okay because the new next version of the operator so like in terms of migration to the newest version so maybe do you offer like a chance so currently when you want to start the next project you are offered with a video with an options to actually like put everything in source for folder choose between the routing options so like um it would be good I mean the same thing that he has said like okay uh so like providing options like where there's the option for a hard hat yeah Foundry how about an option for yeah for different front-end libraries yeah both Frameworks but both the version of routing regarding next or setup of the project maybe it would be

cool like to see in the upcoming world for sure so you're saying not even next but just like I want the latest version of next if you guys don't have it yet yeah yeah because it's actually opened cool yeah we're scrambling to get Foundry in here well we'll get next we'll get the next version of next soon though it'll be there but I see what you're saying yeah definitely yes he said yeah I know yeah I'm so okay for sure are you using VM yes yes we just moved to VM yep one yeah version one okay yep which is cool because like when you're looking for like how do I do this thing you can just go to the wag me docs and look or the VM docs and find that stuff too so yeah yep

I can go show you one I don't know I don't know the answer of that like how customizable they are if I go to components and I go to scaffold eat and I look at this address component it looks like this but I don't know exactly it's probably not using uh any templated headless it's probably just oh yeah it's tail yeah tailwind and Daisy UI is what we're using yeah oh that's okay okay cool cool sorry I don't know I don't even know how to answer the question luckily so the the cool thing is I built the version one of scaffold B version two of scaffoldeth is built by much better developers than me and they're much more meticulous and it's uh it's a lot harder to PR junk into it and stuff like that right so this is just a much cleaner nicer stack so that's why I it takes me

a little bit to find the right questions but yeah this is like a Tailwind thing there isn't it yeah cool anything else yeah are there more kind of like objectives or missions whatever you want to call it in Speed Run ethereum since V1 are you guys like expanding that so uh oh this is this is cool I'm glad that you asked that because it's something that uh I usually share on a call with people once they get past the speed run but I'll just share it with everyone anyone if you scroll way down here there's this thing there's this like little Tech tree thing right here and this is kind of like my next thing this this is like we're working on this eat Dev Tech Tree where it's like yes the speed run has five or six challenges and that's cool

but what what you really need is like a whole Tech Tree of things right and we like this is this is a crazy let me see if I can zoom out of here yeah this is like a Charlie crazy it's like a mural board right now oh man I don't know what the buttons are to move how do I move in a mirror oh whatever oh there we go I can just okay yeah this is this is definitely like this giant tree that I have of like different builds and different areas depending on like uh you know all the way from apps to tokenization to infra to ux to like you know down to the event pool and stuff and then I've rebuilt this a couple times oh man this is so hard to navigate without a mouse uh uh there there there's Zoom okay and

then I want to zoom back over here I think but I have this area yeah it's right over here yes yes right here okay I'm so close there we go okay so speedrun ethereum build your own CLI there's like a handful of things that we're building this into a tech tree so you see some of the challenges there but then there's a whole bunch more challenges right like go figure out a price feed from optim or from chain link and then once you have a price feed then you know how to do decentralized lending because you can do the feed with it and have the the liquidation right so yes but it's it's on its way but there's like this crappy version here in this mural board that's like here are here are the bunch of next challenges past the speed run that you can do but they're less curated than the

the speed run is very like very well curated there's like a telegram chat for each challenge you can ask questions in there this is a little bit more open-ended it's like hey go explore price feeds on chain link and that's about all that it gives you as a description but it's like as a builder in web3 you need to know how to do that so it's like I've got to get all of these things in here and send people to do this here I can probably zoom out and get a better it's it's not very good this is uh not a great format but probably next year when I present here I'll have the beautiful Tech tree that people can follow through the ethernet code Arena yeah it kind of ends up out here right curta a lot of cool new challenge stuff or up here with

ZK research and uh Dark Forest but yeah more challenges coming to the speed run soon in the form of eth Dev Tech Tree anything else awesome okay thank you guys [Music] thank you [Music] foreign [Music]