Scaffold-ETH - The Ethereum Hackathon Stack - Austin Griffith

so without further ado i'm just we're just going to say thank you for opening ceremonies we're going to jump right into our main stage content for the day and that is starting with my favorite biddler colorado bound his name is austin griffith he needs no introduction and he is going to start us off with east bittle i believe uh or 8th build whatever he's doing nowadays i can't even keep track so austin you've got it have fun guys what's up everybody what up eat denver got my buffacorn uh bow tie rockin poppin and floppin i just came down from the mountains to show you guys uh some scaffold eath but let's let's just go up to a higher level thank you john thank you uh eath denver and everybody who has already presented really awesome stuff uh this this one is for the builders so if you uh you are thinking about getting into it theory let's be honest you if you're here on this live stream you're already here right you've already gotten in but you know a friend you know someone who's thinking about getting into ethereum i'd like to just like present to start out like where to show them to go right ethereum.org and i think i have my screen shared i don't know should we jump into screen sharing there we go okay awesome there it is no it's over here if you just just send them to ethereum.org it's it's it's so good it's gotten so good land here look through it there's so much great content but uh look it's just oh it's so good i love the vibe i love the information they're doing such a good job of onboarding onboarding new folks into the space but we're talking developers so uh if you click start building and you get in here there's tons of great content i will tap on eath build just for a second if you go to learn by coding uh my my first shill is for eath build get in here and check out the fundamentals learn hash functions and key pairs and transactions and encryption and distribute a ledger and byzantine generals and blockchain and transactions and smart contracts just kind of get the uh the fundamentals down uh each one of these you can get in and get it get into the builder there's also a fun playlist to walk through if you need the fundamentals spend spend two hours with me spend two hours with six months ago austin and and uh have a good time uh let me just you can also get in here and really build these things i always like to pull up the the byzantine's generals problem here and show uh this whole uh architecture that is created but what we have is like general bob here and he's got these soldiers and they're all jamming away on uh this hash here let's see if i can speed it up there we go so we've got this this uh general trying to find leading zeroes for for uh this this soldier trying to find leading zeroes for general bob so eventually he can broadcast his attack plans with with some kind of proof proof of ability to to wage war so we kind of get in we talk about consensus we talk about a lot of the underlying fundamentals like your key pair but eventually this gets to smart contracts and if you're in here in each build actually like compiling smart contracts and deploying them using this there's a better way let me let me drop that out and we'll head back to setting up your local environment lots of other great stuff here so uh i i'm i'm being kind of opinionated but let me just like step back and say use the tool that gets the job done best for you right like there's there's a lot of great tools uh we we've kind of gone through a winter of building and we've built some amazing tools that are amazing to use so get in here and just use use what's best for you uh i would say like if you need to just get like a very very very starting point download ethers make a wallet make something where it will check your balance uh generate a key pair save that locally where you can load it in uh check your balance be able to send stuff to it and see that update then try to send stuff out of there right that's a good first checkpoint then i get into hard hat and i'd start messing around with can i compile a contract can i uh can i script some of this can i uh you know orchestrate some of this stuff and also learn just by tweaking tweaking some solidity and then finally the the smooth chill jump on into scaffold eats so scaffold eath is this repo that i've been working on for the last nine months or so trying to kind of create this hackathon stack there were so many hackathons that i went to where uh i spent like the first 40 of the entire hackathon just getting my tool set calibrated and ready to go uh scaffolding kind of does that out of the box for you it's going to bring in ethers yes it's going to bring in hard hat it's going to bring in react it's going to wire those things together then it's going to get provide a whole component library and a hook library to help you kind of just really jam and create a decentralized app uh quickly uh let me steal that let's jump over here to i'm actually going to go through just like a quick setup of scaffold eat if you haven't said it seen it yet so uh the the repo is right here you follow the instructions yarn install then you'll yarn start that's gonna bring up your dev server then you'll yarn chain oh i kind of got my uh yarn chain that's going to bring up your hard hat so now we've got our react up we've got our hard hat up which is a local block chain with a bunch of wallets then we're going to do a yarn deploy so the repo comes with everything you need for a decentralized app it's like a it's like a dap that's just kind of like standing up ready to go and and the good thing about that is it allows you to just make small tweaks and kind of see those changes and kind of iterate so now that we've deployed our contract we see it kind of show up over here in the front end let me do that deploy one more time watch this contract address right here we should see that hot reload uh it is not i must have killed my web server let's try it again it's it's it's important to be able to see that loop let me deploy one more time what we got we've got e7 f1 now we should have nine f something something there we go so we've got a brand new contract and it's about this iteration loop it's about being able to get in here test your assumptions try some things and see see what happens uh two links that i have right here in the repo other than the local host is solidity by example and solidity global units this is like this is where i start when i when i sit down like okay i'm gonna build an nft project with some bonding curves and some cool stuff this is this is where this is my landscape to begin right i i have uh all three of these terminals up i'm able to deploy i'm able to see the app show up in the front end but i also have solidity by example and my global units available if i need to kind of look that stuff up solidity by example is just so clean so pretty you get in here find what are we looking at let's just look at primitives and data types right we've got bools we've got you ins we've got addresses uh maybe something more advanced like you're getting into mappings and then then after that you probably want to look at structs and even arrays of structs and uh building kind of uh once you have arrays of structs then it's like you are off to the races and you can build a lot of this cool stuff there's there's a bunch of applications here like a multi-sig wallet you can learn how that magical uh call line works where is that in that execute function there it is ah such a cool line of code uh then then they talk about the hacks right uh reentrancy uh you can look at honey pots front running lots of fun stuff here but this this is this is my this is my stack i want to set you up with clone down scaffold eath run through this installation you don't have to get yarn you have to get note if you have a problem hit me up hit the chat there's there's a i think there's a support button right here that will take you to telegram and there's going to be a bunch of people in here who have been building on scaffolding with me for months and they can help answer questions also but have this all up here's your code so the first very first file we're looking at is scaffold eth packages hard hat contracts so we're looking at your contract and i just have this simple contract set up where there's just some purpose that we have just some string and then some set purpose function that lets us set that string super simple just like attestation contract right and and we can get over here uh first thing you'll see is a call to action we go there we say hello world now we're going to craft up a transaction and send it to our local chain send it to our local uh contract and prove that kind of we can uh set the purpose cool now let's i think i have i think i have some oh yeah look at this this is cheap mode i have some like undo where i'm going to just undo there we go so let's say you want to throw in a counter you want to play and play around with you ins this is kind of the demo i do all the time i go to primitives and data types uh i take a minty through these different data types but we look at see now i've got this counter see how my front end auto adapted as i added that new counter now let's just decrement through that and we're on solidity six seven or something so we don't have built-in safe math yet so what's gonna happen underflow cool you want to know what the bits are doing under there you want to see that again no problem you just go to yarn deploy you get a fresh contract you get a fresh form it feels like you're just kind of interfacing with your contract there's that underflow again cool okay another thing i want to show here is just different accounts so when you go to localhost 3000 when your scaffold eat is up and running you'll notice that i have a different account here in the top let's see can i make that a little bit bigger see for the viewers at home let's make that a little bigger all right so now we've got two accounts you can see this guy's like the c715 and this guy's like this d75b but they're both talking the same contract uh you can get funds from the faucet you can also like pull up a full-on wallet and send yourself like a million dollars right uh so what i want to show here is that you get a burner wallet on page load so your app users when when you deploy this thing they're they're going to be instantly onboarded and then you can kind of work them through whatever system you need so let's just like send some value from like this dude to this dude so uh just to show off kind of some of these components that you get out of the box with scaffolding this is an address component right it shows the blocky address and gives you a nice little copy link so anytime you're going to put in an address you use this address component in react and it handles everything for you let's jump over here and let's send look at that look how i i paste it in and i get a nice blocky preview right i can even click this and scan a qr code let's let's send a hundred bucks we should see that jump across there we go so we can send funds back and forth we have like these nice wallets now i'm just gonna show you let's lean into this so this this uh this this component this address input does uh ems resolution right i can type vitalik.e and i can send in one dollar from my local test net for some reason but just all that stuff that's going to come out of the box for you as a builder so you can focus on whaling your product building something really neat in this ecosystem not wrestling with a stupid migrate script that you can't figure out right like get the get the environment solid first use scaffold eat as a good kind of starting point get into this this kind of rhythm where you can you can basically uh just write some code over here let's let's play around with the ownership pattern right let's let's create not the owner let's create uh an owner of this contract and let's set it up so only the owner can set the purpose so that's going to mean that it's more like an attestation contract it's kind of censorship resistant some person with some private key is going to be allowed to dive in here and oh uh oh what did i do i've got some oh let's just keep maybe yep there we go 20 minute 20 minutes ago me mess that up here we go let's deploy and we should get a hot reload over here and this time we're going to start tracking an owner and you'll see that i just like pasted my address right in there there we go we've got now now i'm the owner and i should be able to set the purpose right hello dubs all right and then this bad guy over here all see uh uh this this should not work right right i should get like some nice error not the owner all caps right in the front end okay cool so i'm kind of getting this feel for how this is going to work okay so we've made this attestation contract it's pretty centralized i mean it's a decentralized contract that's censorship resistant but any given price like this the private key that goes to this address is the only one that can attest to anything so it's not that interesting let's make something more interesting right thinking of ethereum like the greatest massive multiplayer rpg ever created let's think about making this thing more multiplayer let's think about making this more like a vending machine instead of an attestation machine a vending machine in the sky that anybody can access decentralize permissionless i'm going to set it up instead to make this set purpose function payable and let anybody set the purpose if they're economically incentivized right all right that gets a little bit more interesting so there we go now we deploy this thing you'll notice that the ui is going to auto adapt to this it's going to say oh this is a payable function i'm going to add this new transaction value and if i come over here and i say hello wait wait let's do this as a bad guy because we want to prove that we're we're all jerks and you have to think very adversarially when you're building on ethereum hello no no i'm going to say hello jerks love it love it okay now if i send in not enough ethereum we are going to see it fail saying not enough but if i send in the right amount and by the way look at this isn't this clunky this is kind of clunky right i'm putting in the amount in each and we can see in a smart contract i uh yes i have it set up to to be point zero zero one ether but i force the developer i force the developer to have to hit this stupid green button over here to take it times 10 to the 18 to realize the mental model the difference between whey and eath and how they have to convert it to whey going into into the machines but humans like seeing it like this but machines don't like effing around with floating point math there we go so this guy was able to pay to set the purpose uh he uh put money in and we find something really neat happening here right so this guy can read it hello jerick's right it's all working but look at the smart contract balance now right going going leaning into this massive multiplayer rpg now the smart contract itself has value right it's a player in this game also and it can kind of dictate where those funds go and we can write code that everybody can see and it's going to do exactly what that code says so awesome this this is kind of like the quick and dirty dive into it there's so much cool stuff that you can do uh with scaffold ethan i just want to explore a little bit more i think we're okay i i wanted to end a little bit early just because we're a little bit behind schedule but i feel like closing the loop on some of the ui stuff is that is the next thing i want to show so if i just i'm actually going to trash we're going to go a little a little off-road here so uh first of all we were looking at that ownership pattern right we were kind of writing it ourself and that's a little messy you might want to start bringing in inheritance right we could we could import this uh ownable uh function instead of creating our own ownership pattern but i think i want to do something a little different let's let's go ahead and like look at what we have from open zeppelin i think i want to grab one of their tokens maybe we'll just do like a simple erc20 token but but kind of showing this idea of stuff coming off the shelf is is is kind of important here there's a ton of composability a kind of stuff that's already been uh created for you uh let's see where where am i going here what am i gonna let's grab a token let's grab this guy it's weird i don't see oh that's what i wanted right there i think i just want that string right and we're going to go here something along the lines of that something along the lines of that we're going to say our contract is an erc20 and what else do we need to do we need to say erc20 uh your we're just going to call this your token uh yt and then we'll mint ourselves some and let's just go ahead and make this front end guys some here oops and what is it parse what do we want how much the thousand times 10 to the how many a thousand ether i don't i don't know let's do 10 10 to the 20 since it's a token and not the 18 i mean okay cool let's see that let's see that go all right let's make sure this deploys i don't know if it even will let's see we don't want console log there oh i didn't even show the console log oh man okay so if i go over here and i do .001 and i pay for it oh no oh no no oh yeah it's not gonna let me do that it's gonna make me do that first there we go and i pay for it something neat happens over here we get a console log look at that so from our smart contract we were able to console log and we see that over here uh in in the console should have should have hit that first okay let's see where are we at we need a semicolon how's our code looking can we deploy this thing all right there we go so our token is deployed locally and we can get in here and maybe like check the balance of this dude right that's what we wanted to see awesome okay so he has a balance that's pretty interesting the the next thing to do usually and i have a bunch of stuff on my twitter i run through this create a vendor contract right set it up so the token mints to the vendor and then the vendor can sell those tokens and you kind of have some set price and and that's cool because you just basically set up a buy tokens and you do some message.

sendermessage.value stuff but then the next phase is have it buy and sell tokens create liquidity in that vendor and when when you create that liquidity then someone is going to have to do this whole approval pattern and you're going to go through the approved pattern and it's good to like see that in the uh it's it's good to go through the approved pattern as a developer and see it and feel it and understand the ux so then once you get to the point of building an app uh it's sort of like in your head what the mental model is going to look like and speaking of building an app once you kind of have this contract working the way you want it to you uh you are ready to sort of get into your example ui and in the example you i have all these examples of how to you know display an ens address display an address uh display a balance and different like big numbers and small numbers and how you can show it in in usd then i have all these uh buttons that show you like all the different ways you can uh set the purpose on this set purpose function oh yeah i think it's already yep i've already broken it because we're already on to deploying a token and that's fine okay uh so your uh your front end is going to be the biggest the hardest part i i know it sounds crazy but uh writing solidity is technically like very like writing solidity is very easy writing a secure system of solidity is like very very very very complicated but getting the solidity down and getting it working the way you need is actually probably the easiest part between building the ui and getting it in people's hands and seeing how they use it seeing you know what needs to change so so scalability tries to get you to that as fast as possible and i want to show that here let's see if we made a transfer function here uh oh no we don't have time for that we don't have time for that if i made a transfer function i would just put basically let's say let's say i was deploying deploying this token as an app i would i would deploy the contract like it's deployed and then i'd get in here and i'd set up some kind of uh ui that lets me do the transfer so so technically where's that do we still have our uh do we still have our uh this dude our bad guy nope new bad guy new bad guy okay but we're going to transfer him some tokens all right so let's grab bad guy's address go to the transfer send 10 of our thousand tokens and they're sent so now if bad guy goes and checks his balance of he's got ten okay this this ui is just for you it's for you as a developer to poke around calibrate get get set up then you start carving this stuff out you start looking at this example ui and you build a good ui what what what this needs this token right now it needs this wallet ui right it needs an address input where i can say austingriffith.eth or i can hit the scanner button or or uh i can type in 100 usd instead of you know going between eath and back right these these handy little components so so if i was deploying this as an app i would build that out next then the next thing you want to do and by the way let's go look real quick at you've got your app.jsx with tons of hooks and things from the front end you've got components and and a lot of other and there's the example ui view there okay but let's go back to deploying real quick i'm just going to point this at a live network i was thinking mainnet they i don't want to deploy a token to mainnet though i just i just can't do it i think the gas is too expensive for me right now i'm going to go to x die so look at this so what are we doing we're deploying a token with a ui to x die let's say uh uh eat denver 2021 what had food trucks and we were there what would the system look like if you wanted to buy food at the food trucks well you would create this token right and you would uh deploy it to xti so to do that i'm just going to do well i'll have to do a yarn deploy but i think i need to generate an account here he's going to the burner wall i'm going to have to grab a burner wall actually i'm going to use instant wallet.io it's a wallet built with scaffolding and i'm going to do a yarn account here and i'm going to send some money from my burner into this deployer account [Music] oh yeah you guys knew you'd see some qr codes here i'm going to send this dude 25 cents all right there we go so we got 25 cents in xdi on my deployer account now i can do a yarn deploy and hopefully this token just goes to xdi [Music] okay now i could copy this and i could go to some disinterested third party like block scout my token is up right but when you're building an app there's kind of two satellites there's your contract and your front end right and this is pointed up at xdi now you need to point that guy up at xdi and we're going to do that right here first line of your front end is what network do you want to talk to i'm going to point that bad boy at x die now when our app reloads we're going to see okay so here's our contract 4d f3 yeah let's click on it what happens when i click that address oh it took us to block scout instead of taking us to ether scan it detected the network and took us to the correct block explorer out of the box that address uh component knows oh you you you switched contacts here i'm gonna i'm gonna take care of you right so uh we've got our app it's out on xdi this dude probably has a thousand tokens yes very nice okay so you've got your app it's ready to go it's time to show the judges right i'm going to do a yarn build and that is going to take a minute because it's going to build the static site so i can't deploy this thing all the way to production quite yet so in the meantime i just want to show let's see what else do we have to talk about so thinking about how these structures we're talking a lot about structures of coordination uh with scaffold eath there's tons and tons and tons of branches but one of those branches is the build guild and the build guild is basically streaming to these developers to help build more cool branches and tutorial info about scaffold eath and build things in the space that sort of push things forward and look into new things just check out the active branches on scaffold eat when you get a chance we've we're playing around with our tokens the diamond standard chain link denial of service chain link main net minimal proxy lender honeypot staking example and that's all from just the last week there's the challenge there's a uniswapper there's uh there's a vrf for chainlink there's a lending example so a good like direct ave integration uh props props to all the builders for for putting all this stuff together i used to just call out adam but now there's like seven of them that are in here just wailing things bonding curve ipfs demo commit reveal demo uh ave we've got uh some some fun ones a streaming meta multisig and what's cool about these is these repos are actually tutorials when you get in here boy i should make that a little bigger i'm sorry when you get in here it tells you how to set it up but then it tells you how to like work through this branch and how to learn from this specific piece of code so all of this stuff like everything we build with scaffold is like a combo move of can i make things better for the next guy can i teach someone new can i show something off that's really interesting and so that's all uh on that those active branches i wanted to keep going here forwarder meta multisig all the way to emoji support so the very first branch and the active uh is emoji support let's say you wanted to run a quadratic funding round check it out here's emoji support just fork this thing and and set up your different uh companies i've got bear market liquors at the top here not anymore right bull run where's where's that walkie with his hair she'll colorado look at this oh it was only 400 we're not we're talking about price here we are developers talking about price anyways you've got tons and tons of great branches that you can uh fork clone run with one of one of my uh metrics of success is what kind of like weird forks of my stuff is showing up uh uh simon dlr with with neolastics this is so cool uh nifty inc is is probably like more of a slow pitch fork but we made we made nifty ink to be like automatic artist onboarding an artist like with with uh with nothing more than a tablet can use a meta transaction to get in here and draw some mountains for each build and put some blue and say eth denver and mint four of those and hit go look at that i have no i have no gas i have no even idea of what blockchain is you can see that i got a burner wallet when i landed there uh i got in here i just sketched some things and hit mint and uh hopefully that goes in a second but uh let's go back and see how our build is going there we go okay so our build is done our app is ready we're going to do one one more command and that's going to be yarn surge it's going to take my static app with my great apples that's actually let's let's let's we're going with great apples that's wonderful but now this app is live it's going to be up here anyone can go to great apples in that like five minute 10 minute period i sat down made a token deployed it and then made this really junky you should do a better job junkie app to be able to see uh kind of let's go ahead and even transfer on xdi to this guy let's send this guy 10 tokens please work first try oh look at that we've got that nice block native notification coming up matt i'll be talking soon props oh that's so good and what happens when i click that does it take me a block scale ah it's so clean okay so now if i grab this dude i go balance of there we go boom all right so awesome we were able to deploy an app all the way to production uh really stood something up quickly tried something out put it in someone's hands let them play with it uh let me see what else i think i've got to be about uh done here let's see anything else uh oh it did mint by the way eat denver it did mince i'm gonna put this look at this i i am an artist and i have not done anything in terms of ass or anything i've just built some i drew something cool and i'm gonna go ahead and set the price of this for ten dollars so as an artist with the burner wallet i've been instantly onboarded if someone buys this i'm gonna have xda i'm gonna have money i'm gonna be part of this network already uh okay challenge yes so if you go to scaffold eth there's challenge number one once you think you've got it you've you've tinkered with solidity by example and scaffold eth you're ready to build an app or at least test your knowledge so here we go uh if you want there's challenges so the first challenge is just to build a decentralized staking app you'll you'll you the deliverable is literally pasting the url of your app into our a telegram group of ours and showing us what we have showing us what you've built showing us that ux okay this is where i want to end look at this jabroni so this jabra this jabroni was at east denver 2018 february 6 2018 sporting the bow tie but also a sport coat like some linkedin jabroni but here we go i want to talk to this guy real quick there's there's this thing called the dunning krueger and and you kind of you think that you're a genius that at the top it's it takes a long time to learn solidity to really build something cool you're just getting started there's a whole tour of duty you need to go through of learning building failing getting told no trying failing building again you will build many many things and it's okay it's okay to throw things away it's okay to try again don't go in the dark don't build something in the dark build something cool show it off build something cool show it off that should be that should be what you're after okay i think i've just about got it i don't think i have anything left i'm austin griffith if you have any questions oh i forgot mainnet forking in scaffolding you can just do yarn fork or something like that i think it's yarn fork and you just get a main net fork so lots of cool stuff with scaffold eat come check it out build with it hit me up i'm i'm on twitter i'm at austin griffith the dms are always open uh if you have a friend you know you have a friend like a great dev that's like oh it's time it's time for this great dev to get into ethereum hit me up send them to me i got this all right cool thank you guys very very much sorry i ran so long john it's good to see you man it's good to see you too man you you always make the bow ties look good i'm glad we could make sure that there's a permanent fixture in a g's closet we love it it's true thank you your story i mean the the jabroni that you were talking about like i don't think i would let you in this year if you were aware like i mean exactly isn't it funny though like when was the last time you actually saw a sport coat like the proof of sport coat the last time it happened that rare nft that's that's i want that tweet right there that's a cool po-op to have yep i wore a suit coat to to eat denver 2018.

i was that guy thank you so much for having the only guy that we get away from with that now is patricio and that's only because he's a good style of course of course thanks austin you're the best man thank you happy eat denver