Scaffold-eth

[Music] [Applause] [Music] let's kick off with our first talk of the day i want to welcome austin who's going to dig right into scaffolding so austin welcome thanks for having me kartik excited to do a whole day of dev tools this is really neat there's a lot of gigabrains you guys have uh amassed here together to to talk about tools and ethereum i like you said i will dive right in i'm a builder on ethereum and i work on this tool called scaffold eath with a great community of folks but just to zoom out just a little bit this is a great landing spot ethereum.org is a great place to go for a big picture learn learn the how and the why and if you get in here uh for developers there's uh the tools that we're gonna a lot of the tools that we're gonna see today are are here uh listed somewhere somewhere on this so you can get uh started and i'm going to be talking about scaffold eath but scaffolding is just a collection of a lot of other tools like like hard hat and ethers so we'll hear from them uh later today too so let me jump into scaffolding so scaffold eat is uh it's a dap template i found that like creating my whole stack took a lot of time at every hackathon so scaffold eath is a template where you have everything freestanding and working at right out of the box and you can kind of tinker and learn and and go from there and and what i mean by that let's just go ahead and get it started here so i i've got my front end so so if you go to i don't know a few let's see let's let's google scaffolding there if you google scaffold it's gonna drop you right into the repo here and you can follow this uh basically you'll you you will need like note and yarn and get and uh that that can take some time to set up make sure you get the right yarn if you're on linux uh i go through that a lot with developers whereas just getting the environment right it takes takes a little time then you'll clone down scaffold eth yarn install and yarn chain and yarn chain fires up hard hat so it has a hard hat note on the back and it has a bunch of wallets for us that are loaded up with eth and then you'll yarn start and that will bring up your dev server your react server your front end so we kind of have a back end and a front end and then the last step is to yarn deploy and what that's going to do is take this stock contract this kind of like example contract for you and it's going to deploy it to the front end if i bring this down let's see i don't even know what i'm doing here let's let's put that there then we get our this interface and this interface is the key piece to scaffold each being able to have your smart contract here and your front end here and be able to do things like let's grab this person's address and let's make an address public owner and set it equal to that and hit save and then yarn deploy and you get in this iteration loop where you're you're you're testing uh your assumptions you're building on uh your smart contract you're learning solidity and kind of this front end is kind of auto adapting to your changes as you as you write your contract and figure out kind of how that's that's going to work and look so uh one one fun uh uh thing i like to do on a mentorship session is just set it up so maybe like the owner can can edit this first or so the owner can set the purpose first right so we're going to make sure that the what message.sender has to equal equal the owner right and if it's not then we will say not the owner simple simple solidity we're testing it out we're trying it out how do we go about testing this well this this leads us to how wallets work in scaffolding so if i bring up a incognito window oh not the loogies if we go to localhost there we go and not i think it's 3000 there we go got a lot of got a lot of apps running here okay so if you bring a up a an incognito window see how we have this like green account here and then over here on my other window there's kind of like this purple account and there's this big annoying button that helps you grab funds from the faucet for any of these accounts kind of as they come up but no this is just like a burner wallet eventually you can connect your meta mask or or some other wallet and that's going to be there for you but at first just testing what you want to do is just kind of use a burner wallet and kind of just click and and make these transactions quickly for example if i wanted to send some funds from from purpleguy to green guy i can kind of just copy this address and then over here in the wallet i can paste it in and i can see visually that we have the the the correct address and i could send ten dollars and notice how it's in usd right like scaffolding is doing a lot of stuff here with these components so it it makes a dap just feel and work better right we can we can click back and forth between each but for the user they're like yes i just want to send the 10 bucks and i just want it to go right so notice no meta mask prompt we we have notifications locally and that'll fill in with block native eventually when you go to a public network but you can see that i can send money between those two wallets so now these two wallets are interfacing with our smart contract so if from this uh dude right here who is actually the owner we can see if i say hello world and i send that in we get hello world to change and if we do a read there we see it and this should fail right i think if we did everything right yep not the owner awesome okay so it yells at us that it's not the owner we kind of tested that line and made sure it works but we also kind of learned how wallets work along the way right so let's just kind of let's see the the the the thing that i like to explain about ethereum is that it's like this massive multiplayer game and that this this is kind of centralized what's more fun is if we think about our smart contract as like this vending machine right that we want to access and so i always do this payable example next where instead of requiring that it's the owner let's let's trigger off of the value let's make this thing in from an attestation smart contract into more of like a vending machine smart contract and and we make it payable and we set the message dot or and we double check the message.value is greater than or equal to like 0.001 uh ether right something like that and we'll say not enough and uh on the other side we deploy that and we should see our smart contract load in and now even the bad guy if the bad guy wants to participate in our smart contract can play along right this this should work now but it should cost me some money and let's let's send in just this and here's a new here's another developer learning point here where you have to take this times 10 to the 18 right in my ui i force the developer to go through that clunky process so they realize we're switching into way here as we're sending it to the smart contract and once you do that there we go so it did work and something interesting has happened here though right this contract is now uh has some value right and what we would do is probably move on to build some kind of withdrawal function or something that lets the developer pull those funds out of the contract but whoops i close it up let's let's dive into that's that's kind of like the tldr of getting started with scaffoldees right you can pull that down from the repo you can get in you can start tinkering with your smart contract and your your front end is going to auto reload let's dive in and just like look a little bit more at scaffolding kind of just look at how it's set up so uh you'll have these major packages and it's hard for me to show here but it's really small but the the packages that it comes with are hard hat and react those are the two like major packages and your react.

jsx is kind of like where you start to build your app it's kind of what's this deploy displaying all this stuff and and it kind of sets up all your wallet stuff it sets up all your providers and then there's a bunch of handy hooks here like use balance right you put in your provider and your address and then you just have the balance of that address on that network kind of stored up in your state and and kind of digging in a little bit more of how we're working on scaffolding we're kind of working on that like a um kind of global context like a single context for all the web 3 stuff so it's not as messy as this so we are cleaning this up and working more and more on the repo and and to dive in that in a little bit more i'd like to talk about each hooks for a second so we as we build out scaffold eath we realized that there was this all these hooks that we were using that were really uh really useful and we wanted them to be at their own library basically right like having them in scaffolding is really handy because we can edit them live but it's much better if we carve those out and kind of give them back to the ecosystem as a library that anybody can use in any project and so that's eth hooks so we took the hooks out of scaffold eth wrote them in typescript cleaned them up put them up in their own mpm package and so now scaffolding just brings that in but you can use it as a dependency in your app too and there's tons of handy hooks that you'll find when you get in and try to try to build a dap and a web3 app is going to just need a lot of this information right so just know that eath hooks is there and it kind of is carved out of scaffolding and we're trying to do that more and more there's there's components here we would like to carve out and then like eat services there's all these uh like do you want to use ethers to pop like create a hundred wallets and drop five dollars to each one like that's a little service right or even just like an ssl proxy in front of your dap so we'd like to have a services repo uh soon too but diving in a little bit more to this front end uh things like network display right if i'm if i'm on the wrong network i'd like for it to prompt me and and how to let me have a little button right your dap needs all those things out of the box so that's why scaffolding has that built in so when you go to put your product out there people you know get a warning about being on the wrong network and that you know they see their blocky previews and there's an address input with a qr code scanner so tons of handy hooks and components and services that we found that we needed as we built out scaffold eats that you as the wonderful developer home can use to build your next decentralized app uh so they'll see grab funds from the faucet so we have this nice faucet down here that kind of represents the the hard hat uh accounts that are loaded up with cash and they can send some money out you can even open up the wallet of that and send like a whole bunch right so so we got our wallets there uh let me look i'm gonna show off this right here so this component is the contract component this is what's rendering this contract here so so you kind of have this solidity here you have your your contract here then you're deploying it there there's some hard hat config that you you'll get into and you'll learn hard hat and then over in the front end it's kind of injecting it into this contract component and it's doing that live every time you deploy your contract so it lets you really tinker with things right out of the gate but then eventually you'll want to build an example ui right you'll want to set it up so maybe you uh let's see can i do that you can hit a button and it will update that the the let's go back so i just paid for that one right so i just clicked a button that went to the contract and called that function on the contract and you can see that uh here in views if we go look at that i just do a ton of examples trying to show you all the different ways you could possibly do this so here here is that button right there that we just clicked and basically it calls uh it wraps it in a transaction so we get those notifications you can also send raw things to that transaction but they give it more like a notifier and then we reach out to our uh your contract and we set the purpose and you'll notice we throw this override in there where we send value along and that's using ethers uh rickmove will talk more later uh but but we we use that here in scaffold eats so that uh that knowledge will be uh transferable there okay so let's see so you've got your contract you've got your app you're able to tinker for a while then eventually you go ahead and you build out some ui and then you've got let's say your app here and it's kind of like ready to go right what's what's the next step to push this thing to to production or to a live site so what we'll do is we'll need to deploy this contract to a live network right and to do that we can't use our hard hat so i'm going to use a yarn or we can't use the there's like accounts that are loaded up with value on our hard hat chain we can't like have a free account that's loaded up with value on a public network right so i'm going to yarn generate oh i should make that bigger i'm going to yarn generate and that's going to create a local mnemonic here within my scaffolding directory and then if i do yarn account i can i can see that account and see if it has any funds anywhere and i'm just going to go ahead and fund that on some test and it looks like we're already on rinkeby let's go with it so let's send this dude what point one ring could be real quick hope this works let's go all right so so now our deployer within 15 seconds should have some funds and we should be set to do something like yarn deploy dash dash network rinkeby and you can also fit in and uh edit this hard hat file right here where your network is pointed but we're going to uh deploy with dash dash network rinkeby and let's see if this goes please work first try this is using hard hat deploy from wikilog i think i'm saying his name right it's a deploy plug-in for hard hat so you know really cool ecosystem around hard hat there and a lot of cool plugins there and you'll have access to those as you build out with scaffolding too all right let's get this contract deployed okay so once we've got our contract deployed we need to start talking about our front end we've got our contract out there and technically our app is live and people can talk to our app by just talking to the smart contract but we'd like to build a front end around that right and so over in your app.jsx at the top there is this little network selector right and what do we want to do we want to switch our network over to rinkivy and if i hit save there our app should hot reload and now it's pointed at rinkavy except for my contract's not getting deployed maybe maybe i could call an audible and go to uh a little bit different contra oh oh there we go there it goes there it is okay so now we're out on rinkeby and now's the time like maybe we don't want to use burner wallets maybe you want to connect in our meta mask and i can set the purpose to hello world and i can pay point zero zero one ringer b and of course you wouldn't have your end user have to hit that little button that's for developers you'll build a better uh ui as you build it out whoops oh man should it cache those all right here we go 0.001 can i do it on rinkiby you'll notice we get now we get the metamask prompt and i can confirm that we'll get a nice uh block native notify dialog down here in the bottom right it'll track our uh public blockchain transaction right that could have been a deployment to mainnet if we wanted to so it looks like it's all working i'm going to do a yarn build that's going to build up my local react app and it's going to have this whole thing as a static app and i'll be able to push that out to surge and and and use that app give that app out to other folks now there's a few things that you'll want to do before you go to production there's some constants like inferior ids that you'll probably want to update probably don't have those pointing to the stock one that will fall over really quickly in production but that's that's zero to one with scaffolding that's how you bring it up that's how you tinker with solidity that's how you start learning and that's you know once you have something it's just a couple more commands and you've got that as like a production app on a production network so let me just dive into like what you do with that tool you basically that tool starts you off you have the license to learn at that point so in the last five minutes here i just want to cover like where to go once you have the license to learn and so uh the first place like of course we'll you'll look at your contract you'll look at your front end you'll you'll work on your develop your deploy script uh but then check out the documentation there's really good documentation for scaffold eat uh an eath online video right at the top perfect right happy bowtie friday by the way so in here you you've got all the scaffolding stack it kind of explains a lot of what i'm explaining already but does it in text form and then it kind of like gets you started with with what's next right so so once you once you've got the the app and the everything figured out uh you kind of want to go on this this tour of duty is what what we're calling it where there's challenges and and uh some some other stuff and let me just dive in let's see okay let's back up for a second make sure make sure i cover the readme uh sequentially learning solidity a great way to learn solidity is just to have uh there's a lot of great apps out there too but just have solidity by example up and just like go through these uh these topics and kind of learn and what i mean by that is like okay how do let's learn how a mapping works let's grab a mapping out of this mapping smart contract example and let's paste it into our contract and let's yarn deploy it and let's see what it looks like and then let's poke at it over here when we have that up so so diving into solidity that will get you the up the dunning krueger you feel like you can do anything but then it's time to go on a tour of duty and learn kind of everything there is to to learn about how what works on ethereum and what doesn't work and all the weird gotchas right and so that kind of is here and i i have this thing that i shill called the ethereum dev speed run so if you are a web 2 developer or you know web 2 devs and they're thinking about getting into ethereum just tell them to go speed run ethereum and and hopefully when they type in speedrun ethereum or whatever i typed in there they will get uh this medium article that talks about what we just talked about getting scaffolding up and running getting the the uh the syntax down but then it jumps you into all these cool example branches so something that has come out of having this template for building dabs is a ton of daps and a ton of branches so there's 250 different branches here ranging from nfts to different starter kits and different uh tutorials there's a zk thing there we're seeing like these lists this composable nft is awesome i wish i had more time to talk about it but getting into svgs and nfts and nfts that go in nfts and render their like parents that render the children it's really cool how it all like hierarchically renders an nft in all on chain in solidity but that's a whole different that's the side quest uh as you get scaffolded down you can go to any of these branches and all all of all the smart contracts all the front end everything is going to be kind of the same language everything's going to be kind of in the same place so once you know one good branch of scaffolding you kind of know where everything is on all of them and you know you know how the wallets work and you know how to interface with a smart contract and you know kind of like what that context looks like okay so uh from these branches though uh the speed run once you have the syntax once you're ready to get in i recommend doing the simple nft example in a simple nft example i think i have right here will take you through the same setup we just went through but then you'll edit this mint script and you'll let's see can i is this what do i have well a couple minutes let's let's just go look at this uh localhost 3001 you'll do the same thing where you probably want to create uh let's see a yarn deploy well i did i have a yarn chain any yarn deploy let's see if i can get it to work uh everything's in the same place right guess what your here's your smart contract right in that folder instead of your contract it's called your collectable and it's this super simple nft example straight from uh and and you can get in here and deploy that and once you deploy it you have a mint script and it says grab your front end id and paste it in here and when you run yarn mint hopefully uh those uh nfts show up here there we go let's see if we can get an nft to show up all right and then i'm gonna grab whoops i'm gonna grab this address there they are and i'm gonna paste it in here and i'm gonna grab [Music] this dude's address and i'm gonna send him this buffalo let's make sure that oh i don't have any gas gotta go to the faucet first there we go now send him this buffalo oh i still don't have any gas what do they do wrong there oh i sent that guy gas that's funny uh now send them the buffalo no don't use my camera send them the buffalo isn't that nice that you have a qr code scanner though right on all your address inputs all right cool cool cool so so uh the simple nft example is your first step to kind of get context and move on to how like all these different branches work then start taking on some challenges take on challenge one it's gonna build you're gonna be building a staking app where you have to get a bunch of jerks to coordinate and if anything breaks down there then they can all withdraw you don't want jerks to be able to grief each other but if they all uh do coordinate the moon money moves on to another contract and and uh you're you're staking around kind of state machine moves on then challenge two is about a token vendor and building a contract you learn contract to contract you'll learn uh like contracts talking to contracts you'll learn erc20 you'll learn the approve pattern if you if you sell your tokens back and then the third challenge is a little bit more open-ended build build the decks and it's it's actually pretty easy using this article but you build a very like mvp decentralized exchange and learn about reserves and and then uh kind of move on to take the buyer mints and start branching out right take some of these branches and take them to the next step or learn the thing that you want to learn next and there's a whole kind of like funding mechanism with build guild where i'm funding developers that are building these tutorials so there's there's kind of funding available for folks that are kind of building on on top of this let's see if we can get right back to our app real quick and see if i do a yarn surge here i think our our app is built and ready to go and uh what domain this will this will be it's like a rink purpose so i'm just gonna say our purpose p-u-r-p-o-s-e let's see if i can upload our this dap go from kind of zero to one and have the dap fully deployed it will be at what our purpose dot surge sh no one like front run me and you can get get something on screen or anything i think we're we're i'm i'm open for questions now we've got the app deployed uh reach out to me i'm austin griffith on twitter and telegram hey hey hey this is our purpose and i'm paying oh i don't have a wrinkly i need to connect here we go here we go connect my app in and say hey hey hey and actually pay some rinkaby let's see if this works yes there we go so i went from zero to one i took took an app idea brought up scaffold eath uh built the contract out deployed the contract then i deployed an app uh that talks to that contract out to a public network where anybody could go to that url right now and it'll probably fall over pretty quickly but you can use that to to interface with the smart contract and there we go it's hey hey hey and so yeah again check out the ethereum dev speed run it'll take you through scaffold neath at first but then it will move you oh i've been missing the chat i was supposed to be watching the chat sorry kartik oh it looks like it looks like we're good actually you'll follow through a bunch of these branches a lot of these gotchas random numbers on chain and uh how how defy and swapping and lending work and how signed messages work there's lots of little gotchas that you'll learn build a multi-sig wallet and learn how that works good luck everybody happy bow tie friday kartik thanks for having me uh any any closing questions or anything i need to do on this side i think uh there you go um a lot of i mean a lot of amazing comments from the chat i think uh the easiest thing would be maybe you can just log in on youtube.tv and answer some of those quick questions uh mostly it's people requesting you should have your own live stream 24 7. call austin.

org and you can just always showcase catholic uh one question i'll ask you is uh what is uh what's kind of getting you excited about things that you want to add to scaffolding in the future what are some of the things that that matter is what's so cool about it is it's it's all these it's random things all the time like right now the thing that i'm most excited about is this uh svg nft library in scaffolding so there's you know there's defy and there's governance and there's compo there's coordination tools there's all these different branches but really the one that i'm most excited about is like what i made loogies with which was just like a little spg nft but it's like you get into the smart contract and you see like this is the json like it's it's building it's crafting the json and the solidity and then it's crafting the svg and the solidity and we're doing something where you can send the nft to another nft and then when it renders itself it calls the render function of all the other ones so then you see all the little nfts inside of there like moving around super fun stuff that that's like i i don't know why that gets me so excited but i am super excited for svg nfts thank you for actually standardizing that then in that case um cool well someone else did it i just made it easier to fork that's the that's what i'm here for thank you kartek thanks austin we are ready to move on to our [Music] [Applause] [Music]