Ethereum Foundation 🛠 Shipping Ethereum Apps

[Music] today I'm going to be showing off scaffold eth 2 it's a great way to build let me get the chat going yeah yeah it's a good way to uh build things on ethereum it's a good way to prototype uh it's a good starter kit for a hackathon if you're uh thinking about what stack you're still going to build check out scaffolding and what we have going on here just because it's uh it's fine-tuned and built for things like hackathons but it will get you to production too you can take uh your scaffold eth kind of prototype and ship it to production quickly and we're going to try to do that today so I'm G to start from complete scratch I'm G to grab if if you Google scaffold eth you'll end up here I'm gonna grab this MPX create eth though you can clone the repo or you can do this create eth the reason why I'm going to do this I'm just going to make some like owner changer we're going to make some app where we change the owner or something like that uh but the cool thing here is it gives us the option between hard hat and Foundry uh so this time I'm going to try Foundry uh sometimes I do hard hat sometimes I do Foundry it kind of depends on on what what I'm building but this gives you the option uh as the Builder to really make that decision yourself and if we CD into this owner changer directory and we go look at the code whoops that wasn't what I wanted there we go then you're going to notice kind of two main directories you'll have your Foundry directory and then you'll have your nextjs directory your Foundry is of course your your chain and all your deployment orchestration and then your next JS is your front end where you're going to build your app uh really nice integration between oh someone's drawing on my screen whoa really nice integration between uh the the smart contracts and the front end and we'll we'll show that in a little bit okay so it finished up we can CD in uh what it wants us to do is do a yarn chain so that's going to bring up our Foundry and I think it's Anvil right it's going to run Anvil and then a yarn deploy we we'll do here and that's going to deploy our kind of template smart contracts then the other thing I need to do is this yarn start here and that yarn start is going to fire up our front end and give us this kind of nice interface over here okay so here we go we've got uh our smart contract over on this side in Foundry and then we've got our front end over here and this is where really kind of the the heart of scaffold eth is you you're able to Tinker and you're able to add things to your smart contract and then uh have those changes reflected over here in your front end over in this debug contracts tab so let's just look through this a little bit and just kind of look at what we have for our smart contract and and you'll get a kind of an idea of how you can tinker and how you can get started so if we go to uh oh man there's some some chats getting flooded I don't know what that is okay so uh let's Tinker around with this let's see how this works we've got a bunch of primitive data types right or you've got addresses strings bools U for numbers we even have a mapping from an address to a uent that's like a counter per user we've got events we've got a Constructor we've got a modifier really a lot of the real Core Concepts and also you can find those at solidity by example if you go to solidity by example.org there's a ton of examples let's say uh we wanted to just learn mappings today or we're thinking about using a mapping in our smart contract but we're not sure if we want to use a mapping or an array of structs we could kind of just bring that mapping in and as soon as I paste that over here and hit save it's ready to go I can hit yarn deploy now watch this our whole contract should change over here and now there's this new my mapping so you're able to make small changes to your smart contract and test your assumptions and try things out and see how they work if we go over here and then kind of put our address in here we'll see that the results zero but then I don't know let's go to the Constructor and let's say my map and let's grab our address here and uh let's set it equal to you know 420 or something itk and then let's deploy it so now our contract should deploy we should get a new address here yep we've got a new smart contract and now when I ask the my mapping about my address hey it worked right we can kind of go in to end and really test things okay so I don't really care about that mapping let's kind of look into this smart contract a little bit more it lets us like set a greeting um and then uh there's this premium flag here which is kind of interesting there there's a premium flag that the scaffold e developers have added here and it's just to show you kind of how this code works and what little kind of tweaks we can make but it looks like the set greeting function is a payable function and so if this function is payable money is going to come in and we're checking the value if the value is greater than zero we're setting to premium okay now we're going to get to Tinker with wallets and uh so as soon as I say hello world here and I try to add some value it's going to yell at me and say I don't have any uh money in the faucet it's not giving me that it should give me a warning about not having gas because I've got zero gas in my burner wallet here I can gas up that burner wallet and now I should have gas so now if I try to say hello world sure enough our greeting gets updated and that that premium gets set to True right because there's this extra little thing here looking for value and even the value of the smart contract let me reload there yeah is 01 okay and let's let's just see that again if I say hello world 2 and I set the value at at a little bit 0.1 right it's going to stay premium we're gonna see money go into the contract we're going to see the greeting update Okay cool so this is kind of how you get in that Loop of tinkering where you're you're adding things to your smart contract you're testing your assumptions you're deploying it and then you're poking at it with this kind of auto updating uh front end and this is going to be such this is such a powerful tool in terms of prototyping and figuring out how to build your app let's say we know exactly what our want what we want our app to be at this point we've tiker tinkered around for a long time and what we've decided is we're going to reimplement our own ownership pattern and of course you shouldn't do this we have open Zeppelin right here you can import open Zeppelin and use their ownables uh you should do that right you should not reroll your own uh unless you are like some you know huge Optimizer or something if you're just building a product and getting it out the door uh to save yourself some time you probably want to just import this but instead we're g to do it our own we're going to build our own we already have an owner here and I think there's already a modifier here that's making sure that the owner is set right so really what we need to do is since this is immutable I'd like to add a new function that lets me update the owner right so I'm going to go ahead and create a new function called update owner right and it almost figured everything out you'll notice the one thing it did wrong here is it didn't add this modifier we only want the existing owner to be able to update the new owner now it's probably going to yell at us for one other thing here because this is immutable right if I yarn deploy it's probably going to get mad and say that's immutable yeah yep that's exactly it okay so we got to get that immutable out of there which is really good for saving gas but then if you want that variable to change you need to pull that immutable out of there okay awesome now we have basically a working function well working we haven't tested it yet but we have a function in our contract that should let us update the owner if we're the owner right so if we want to in here we have this new update owner if we want to set the the new owner to vitalic this is going to fail but let's see what it fails with okay not the owner we're we're not the owner because if we look there is an owner that's getting set in the Constructor so what we need to do is pass in our whatever address we want in this Constructor so if we dive into the scripts this will be a little bit different between hard hat and Foundry but basically you dive into your deploy script and you figure out where it's instantiating your contract and it looks like it's setting it's using the deployer private key and getting the address from it and setting the deployer which is also this this faucet address it's the zero address right of the chain uh so instead of setting that address as the owner let's go ahead and set our addresses the owner so I'm going to get in here and I'm going to do uh address did I put it in quotes I can't remember if I put it in quotes or not we'll be able to find out in a second oh yes I take it out of quotes I bet let's try that and deploy let's see if this works please work second try yes okay now let's go look at our app let's go look at our owner it's us okay it's working we're doing what we need to do we've got our owner set as us and now if I go over here and I try to update the owner to vitalic yes it works okay this is all I wanted to build this is this is the point let's just pretend like I've spent hours and days uh slaving over my uh uh solidity here getting it just right working working like a dog and then finally I've got it working exactly like I want I'm ready to ship this thing as an app right we probably don't want to give our users this interface this interface is great for us but what we really want is probably some kind of uh like nice looking UI and there's there's a example UI here I'm going to go ahead and redeploy my contract so it's nice and clean here but there's an example UI here and this just gives you uh it shows you in react code how you can build a pretty front end that talks to your smart contracts again we can set the greeting hello world I can hit send it's going to send a transaction uh and pay the gas notice we're still using burner wallets here right we're on Foundry or we're on our local chain whether it's Foundry or hard hat I'm not using metamask you'll notice there's no you know dialogues coming up here asking me to switch chains and figure out the the kns and a bunch of issues that you might have with Local Host editing with metamask we're using burner wallets here so it's fast easy and quick so it helps you debug and get things to production quicker so let's make a pretty UI it's not going to look this pretty uh but let's go over to our home screen and let's start working on uh some kind of react if you're an application Builder and you're putting decentralized apps in people's hands you're going to spend more time I hate to say this you're going to spend more time on the react than you are on your smart contracts and that's a a sad reality of building decentralized apps right now but let's dive in and uh edit our index page here all right so and if I hit save there and we go back over here we should have like a nice clean canvas right we've kind of we have a nice clean canvas here so what I want to build let's let's do let's do a few things here let's start with uh wag me right so uh what I want to do is get the address of the logged in user and I think that's use account right and that should come in it came in automatically from wag me uh but if you ever want to just check the docs right we'll go to wagm sh and we'll look up you know use account or something like that right you're you're you're looking through all the hooks look at through look at these awesome hooks you can use all sorts of uh really cool hooks come out of the box with wag me and you can hit those docks and grab that but basically I want this right here right use account I could I could bring in these other variables of is connected or is not connected or whatever uh but uh we're just going to do use account and then we're going to have address over here right and then let's just make sure this is all working right let's throw uh our address in here and make sure it shows up on the page there we go wow that's super ugly but it's there right okay so since that's super ugly uh scaffold be comes with a bunch of UI components to to make this look a lot prettier out of the box if I say address and that's going to automatically import it from scaffold eth and then I just do address equals oops I don't want all this stuff this is from scaffold e one and my co-pilot likes to fill it in really all you need is this right here let me show that off again address and then you plug in the address right and if I hit save look at that awesome component we get we get blocky preview we get the address we get a copy uh if there's an ens Avatar it's going to Overlay it there this is going to take us to our local block Explorer right but as soon as we point this app at something else all these addresses will now point to whatever the block Explorer the app is on so your app you can change what network your app is on with a single variable uh in this scaffold config right here right let's let's just do it real quick let's just say we're going to put it on nosis chain right now our app oh no it's not going to work because I need this to be false basically I need burner wallets to be in here because I'm using a burner wallet but now look what happens when I click on this address where's it going to go it's going to go to the nosis chain block Explorer right so that's the value of this address component not only is it pretty uh it it has all these standards and all these nice things where you can uh make these small changes to your app and your whole app is going to change because you have these nice components okay so looking back at our app we have the address of the user okay now I want to make like a card here I want to make this look a little prettier so I'm going to go to Daisy UI uh UI card right Daisy UI is what we're using here for our components so we have Tailwind for our CSS and then Daisy UI here here's the Tailwind right and then we have Daisy UI for components right I'm just looking for a card I want to make this look pretty I'm going to go here and I'm going to grab this jsx and I'm just going to paste it in just just give me this whole thing here here hit save oh grab this address I'm not going to want this image anymore let's say it's gonna say shoes yeah perfect okay and this we're gonna say this is update update owner oh yeah that's looking nice and then uh we'll probably do something like have this address in here okay so there's our address and let's say you know your address maybe let's put a div with a little bit of padding around it yeah you just got to think about these things you got to make your app look nice okay and then we'll stick that there how's that looking your address okay cool now I want the owner address okay so we want to go to the smart contract and we want to ask it for the owner the way we do that we could use we could use uh wag's used contract read but scaffold eth has has a a set of hooks that abstract even more away from you they take care of network and wallet and chain ID and some of those extra things you can just do use scaffold contract read and that's going to use some of the other things that you have already around you in scaffold eth to kind of fill in fill in most of the details what you're going to have to give it is let's see you're going to have to give it a contract name and that's going to be your contract notice the the type safety here and the typescript stuff is is giving me exactly the function name and telling me you know watch this if I hit yeah look at that it's it's Autos suggesting the function names that I just wrote in the smart contract so you add a add a function to your smart contract and it's going to show up here and what I want to know is the owner right and there's no args sometimes there's an args ver here but we don't need that there's no arguments coming in here and then we can go here we could say okay so data is coming in and we're going to change the name to owner so we're going to do a read to your contract and we're going to ask for the owner and we're going to put that in the state of this variable called owner and now I can pay that in right here and there we go our app should show your address and the owner address is the owner really that right now that's a kind of a bad example yeah it is us okay so let's let's let's update the owner a man let's update the owner let's just set it to vitalic real quick I'm gonna have to redeploy my contract anyways but let's just make it so yeah there we go so now your address is this the owner address is this okay so now what we need is some kind of input that lets us put in a new address right and scaffold e has a really handy uh component for this it's called address input right if we just bring that in let's see did that come in that didn't come in automatically I think I did something wrong with how I brought that in but if I do this oh whoa yo uh uh what am I doing let's make sure it didn't come in oh it did come in address input okay so it came in automatically uh it's going to have some value right yep and the value will be some variable new address that we haven't set up yet and then onchange it will set new address and watch that watch this now that I have these two variables co-pilot's just going to say oh I can tell that you're trying to do that that's so nice yes import react okay so now we have an input variable let's even like give it a new address new owner right here's our new owner and then if we type in you know let's not set it to let's say set owner or update owner is what it's called right I kind of don't want this is weird how this is set up what if I just do like w full does this just make a big old button maybe I need to do W full here too oh that's nice okay cool and let's do a little bit more padding here gotta or margin maybe right margin four there oh that's ugly margin top for there we go I don't know these little little tweaks I've only got 10 minutes left I need to ship this thing let's go okay so uh when you click the button what do we want it to do we need it to do a contract write and so you could use uh wag's uh use contract right right but we're going to use scaffold eth because we have some you know extra magic and wrappers there so if I do I don't know what we're going to get out of this but it's going to be use scaffold contract right okay and we're going to have the same stuff here right we're g to have oh did this not come in let's make sure we import that okay and then we have uh what's it gonna say what do we need what do we need here we need contract name your contract we need the function name that we want to call okay oh look at this it was trying to get me to do transfer ownership right pay attention here if I do that it's it's not called transfer ownership it's called update owner because I made my own junkie function to do it right and then uh args new address right so we have this uh cool I think it's right async that we're GNA rename to update owner that lets us talk to our contract calling the update owner function with this new address that we're tracking and so then finally we need to do like an onclick over here and then it everything should be wired up on click is going to be equal to and I'm just going to do like an arrow function here and call our update owner I think I think we might be wired up I think we might be set here let's see what we have okay and then let's do a yarn deploy let's deploy a fresh contract okay and it's going to start with us as the owner and then it is going to allow us hopefully to set a new owner and if this works we are ready to ship this thing to production come on update what am I waiting for here I got to hit reload I don't know why that's not loading faster let's try it again oh no now I can't do it I'll have to connect as me to to do it okay uh but it it looks like it's working it's a little slow I don't know why that was so slow uh but basically you're able to use this new UI that you've written to see your address see the current owner and then let's see if I reload now and then do atg doeth I'm trying to figure out why this thing isn't Auto oh there we go I don't know there's something with the hot reload and uh then subsequent reloads there that's that's happening okay we're ready to ship this thing we got seven minutes left we got to take an app all the way from zero to production uh how do you ship it right okay there's going to be two things we need to do we need to take our smart contract and we need to put it out on a live Network and then we need to take our app and put that out on a live URL so to go to a live Network you're not going to be able to use this faucet as your deployer anymore you can't just deploy to a local chain and it pays for things we're going to need to do a yarn generate that's going to create a local pneumonic and it's gonna hide it in an EnV file that's already get ignored and it's going to give us a nice temporary wallet address that we can fund on any network and deploy uh to so let's see where do we want to go I don't know should I put this on Main net that would be kind of silly let's do maybe a cheaper Network I don't know mainnet would be pretty cool uh I don't know how much time do I have five minutes okay we're g to put this on mainnet that's silly I should not uh but let's see it can't cost more than 30 USD right let's go all right so I'm gonna send 30 USD to this uh nice burner wallet that has been generated here we're going to wait for uh that to go through blindly speeding up as fast as I can we got a live demo we're going to mainnet with it why are we going to main net with it I don't know there we go confirmed all right yarn deploy Network D- Network here we go here we go deploying to main net hold on to your butts here we go boop boop boop boop boop a live demo of a smart contract that I just wrote in 15 seconds and then deployed on mainnet this is a terrible idea don't do this at home audit the heck out of your contract uh there's a testing Suite here go go get all of your tests and all of your audits done first and and all of that don't just yellow things to production like Austin that's a it's a bad decision but now our app is on mainnet we've got a mainnet app and if I were to go to debug contracts it's still pointing to the old contract because we have to go back over to that scaffold e config file you can do a command p and kind of just look for scaffold eth and it's right here it's this thing we changed earlier yeah we we on Main net now and let's go ahead and speed up that hot reload and I'm even going to let you have burner Wallets on mainnet which is also probably a bad idea okay so now notice when I just changed this one thing to mainnet our entire app switches over to mainnet ethereum and now when I click on this person's address I get the ether scan on Main ether scan right so so this is uh uh we're able to deploy a smart contract we're able to switch our app to mainnet now we have just a couple minutes left I'm going to do a verel let's see yarn verel YOLO prod we're just G to ship this thing all the way to uh no no this is called owner update it's the silliest little app you've ever seen uh yes okay so someone is able to come into your app and technically there's like a greeting and I can say hello world anybody can set this greeting and I can pay real money I'm about to make a real mainnet transaction with a burner wallet this is a bad idea uh and oh I I should have sent some money in there actually too because I wanted some money to be in the contract too and show that we can withdraw from it but there we go there's a main net transaction that's saying hello world on our smart contract uh and if money were to go in there only the owner can withdraw it if we go back and look at our smart contract here there's some withdraw function down here and it's only owner right so whoever is this owner right here is going to be able to pull this money out of the contract okay hello world for real for real for real this time I'm gonna pay 0.001 eth and put it in the contract okay nice we're just making main net transactions paying real money on a main net uh smart contract woe okay so now our smart contract has money in it right and as soon as this app ships anyone will be able to go to the app anyone will be able to interface with the smart contract that we've created and anyone will be able to use this nice simple uh interface if they're the owner they could set a new owner let's do it let's set uh let's set the new owner to at. and I'm going to hit this update owner button I'd be doing this on our live build but I'm still waiting for the live build to go so we're just going to have to watch this happen on let's go check out the transaction oh yeah main at ethereum how much am I paying for this let's see 17 guay I mean it's that's relatively relatively hot 14 guay there we go so I paid 63 cents I paid 63 cents as uh this guy to update the owner to Austin Griffith and uh now if uh Austin Griffith comes in here he should be able to withdraw he should be the owner right let's test that this doesn't work as me if I hit this withdraw button it's just going to say not the owner it's going to revert okay oh our app is up here we go owner update check it out if you go to owner update.

verel doapp we've got two minutes left and my app is live I'm gonna go ahead and connect my metamask to this now okay and if my metamask for some reason is on the wrong Network right if I'm on whatever this is it's going to say hey switch to ethereum yeah that's funny that metamask puts that Network in there but wouldn't put any of the other chains in there for the last three years okay there we go so we can see that my address is Austin we can see that the owner address now if I wanted to make vitalic the owner right I could hit this button right here and I'm quite confident that it's going to throw me a little popup to make vitalic the owner but I'm going to reject that because I want to go steal this money out of here right I want to rug the contract there's there's a162 I'm going to pay more money than I am going to get it out but I want to prove that since we did that work and we set Austin Griffith as the owner with our nice UI that we built just now uh I can withdraw this money I'm going to spend more money than uh I will make but let's go let's go do it there we go I'm going to spend 92 cents to collect a162 out of the smart contract but that's it that's scaffold eth you can Google scaffold eth and find this nice page you can Fork it uh you can use npx create eth and that's going to give you that that choice of hard hat and Foundry uh you can debug your contracts you can use uh solidity by example to kind of get your contracts right play around with this test your assumptions uh and then uh you can deploy your contract to any evm compatible network you can deploy your app to verell and it's going to use all the modern stuff like rainbow kit typescript wagy VM all that cool stuff and you can have an app ready to go live for your users perfect for a hackathon if you're doing an online hackathon let's say for like the next month let's say and you need a quick way to prototype and build apps I think you should try scaffold e too it's pretty sweet check it out thank you all for coming along on this journey should I go set the owner should I go set the owner to alic now let's go let's let's make vitalic the owner after all this here we go and then I'm out there we go make him the owner all right done 76 cents best 76 cents I spent my whole life