Ethereum Foundation: Web2 dev to Web3 dev with 🏗scaffold-eth with Austin Griffith

hi guys welcome back and uh with me is austin griffith and all around awesome builder on ethereum uh i know that uh many of you enjoyed his last workshop at xerox poland uh so let's learn some more from griffith today from austin hey thanks for having me thanks for having me so i think today's talk is going to be very much focused on kind of like taking a web 2 developer and turning them into a web 3 developer and thinking through that mental model are you are you headed out am i taking full screen here what do we do is that what that was thank you antec thank you very much i'll see you in an hour all right what's up i'm austin griffith i think we're going to talk through kind of just like mental model shifts and thinking of someone who is a pretty decent developer in the web 2 world and kind of getting the the mental model downloaded to them of what being a web3 developer looks like uh let me just start sharing my screen and let's let's dive into it so for sure like very very open session like throw questions in the chat throat i i don't think i can see uh youtube chat but i can see uh this chat here so yeah word i'm austin griffith i'll paste that in there austin austin griffith on twitter and today mostly most of our work will uh revolve around scaffold eve and i will paste that into the chat also so scaffold eat is kind of a freestanding app that lets you sort of um tinker with a dap that's all there first and make small changes let's just get um right into it first so i'm going to bring up a local instantiation of the master branch of scaffold eth just to kind of zoom in on like the most important feature first and then we'll kind of zoom back out and and look at things uh from a higher level so so zooming in the the the crux of the the development platform is right here where we have we've got our we've got our smart contract right here and then we're going to have a front end right here and we're going to be able to make small changes to our smart contract oh i've got i've got a chain somewhere still running there it is there we go back over here fire up our chain and uh so we're gonna have a smart contract and we're gonna have a front end and we're gonna be able to put in a little bit of solidity and kind of play around with this this new storage layer right and figure out the storage and execution layer and figure out what's going on so so you can pull down scaffold eth just google it there's there's a nice repo with a good video but the quick start is right here yarn install for that first terminal to bring up your dev server and yarn start then then you'll do a yarn chain and you'll bring up your hard hat node so that's kind of like our back end here when we're thinking web 2 mental model this is kind of like our front end it's a react dev server and this is kind of like our back end it's a very very expensive asynchronous uh database right highly replicated with with decentralized consensus so so this is going to be our storage layer this is going to be our back end this is going to be this is our kind of fake block chain that lives on our machine and works exactly the same as ethereum works so we can kind of like deploy things and poke at things and see how they work and let's just go ahead and do that so the first thing you do is is you do a yarn deploy and you kind of deploy this uh stock uh smart contract that i have set up and if we look at that we can see that there's a little bit of storage here and then there's a function that so we're we're storing a string called purpose just some sort of arbitrary string purpose and then we've got a nice function to sort of update that purpose so we have a storage and we have a little bit of execution that allows us to update that storage that's our smart contract that's it right and then if we see what comes up on the front end there we go we we see our app i'll grab some gas from the faucet real quick and show that we can set uh the purpose to hello world there we go all right let's just look at how accounts work while we're here so if i bring up an incognito window and we go to localhost also you'll notice that you get a burner wallet on page load see this little blue guy a little different than this green guy right we could copy this address and we can bring up this wallet maybe send this guy 10 bucks so so now they both have kind of money to move around and operate on the local chain uh this guy can set the purpose like this would be maybe purpose two rope proof rupees two there we go so both people can set it both people can read it both people are interacting with the same contract uh let's let's toss that one out for now and just kind of like look at solidity and kind of think through this going back to this web two builder right so you you've uh if you're a pretty decent programmer you've you've probably gotten into react you've probably gotten into just javascript you can run services you're you're a web to guru maybe even like kubernetes who knows but but now it's like ethereum is this new thing and how do i build with ethereum and that how does it how does it translate basically and so if we think about ethereum like this expensive storage layer it's it's kind of like our back end but it's kind of like a special kind of magical back end where it's not like a database that you can store stuff to in terms of think think of database replication when we have one database and a bunch of people come to our app and they start using it the database falls over okay now we need replication we'll have two databases and we'll have a backup maybe we split reads and writes we read from one side we write to the other side we can scale both of those but eventually some other thing could shut it down or even like we could shut it down if we wanted right like we've got all of our databases stood up even if we're a company some jabroni within that company can get in there and and kind of nuke the whole setup probably right so so what it takes to shut it down or what it takes to knock it over is kind of a question that we want to ask here so thinking of ethereum it's it's not you think of chains of chains of blocks right what is blockchain you think of chains of blocks but really it's it's more like this substrate right it's more like this big network of thousands of nodes that are all connected to each other peer-to-peer no one's the boss no one's no one's saying this is how we do things basically they're all operating uh completely uh distributed and decentralized so they're coming to a consensus and that we don't want to dive into too far but uh basically they come to a consensus every 15 seconds or so and we kind of get this uh next uh block of our chain but that's basically just kind of like updating our database right our expensive database but what do we get from that layer that huge layer of thousands of nodes that that are all storing this well when we deploy this this smart contract we're not deploying it to one of them or two of them or five of them the the contract lives on all the machines and when we say hello world we're crafting a transaction we're getting it mined into a block and then everyone across the network updates their version of our smart contract to hello world so they all have a copy of it we can ask we can do this read we can read from any of those nodes on the network so you kind of get this censorship resistance you get this this network that can't be knocked over there's a lot of really cool things that we get out of ethereum but like it's also very expensive to use and some other things right now right so so why like why are people settling like why are people using this this really expensive settlement layer so we can get into it but let's just think of let's go back to the mental model of you are a decent developer you've got scaffold eth up now uh the first place i usually send people is just to like look at some solidity read the docs but also uh let's go to solidity by example one of my favorites really nice clean solidity examples that we can get into and kind of look at first of all let's just look at primitives and data types what i want you to be able to do is just grab something like this and paste it in here and then do a yarn deploy and see it show up and so there's a problem here already i can see that this isn't a public variable so let's go ahead and make this address public there we go then if we save that we should get our address in the front end let's see hit save here you would deploy now what we're watching for is this hot reload that happens over here so over here in our app it should detect that we've deployed this new contract locally and it should update and there you go there's that address okay so this this is our dev loop this is this is how we're going to learn solidity we're going to uh start looking at examples figure it out we're already a good programmer right we know what a bool is we know how true and false works uh this uint is a little bit interesting too right it looks like there's unsigned ins and ins and it should be it should be easy enough for you to sort of like test your assumptions and play around here so let's just grab one of these u n's and get in here and again it's not public i don't know why they're examples you you it's a public blockchain first of all right so this layer that we're all reading from anyone can read from it the the access whether it's public or private has to do with what contracts can talk to what variables but it's not like if we make this public anyone can get it and set it so let's uh let's make this public let's call this counter let's set it equal to five and let's go ahead and deploy right yarn deploy we get in this nice dev loop we start trying we're tinkering around with and i should probably make that a little bit bigger and our app reloads okay so now we've got this counter we can't really do anything with it but all the nodes on the network are storing this little counter for us and and so let's think of this uh this storage layer as as this like expensive and simple kind of evm it's the evm it's like this um it's like a little virtual machine that you give a little program to and it runs that program and updates but everyone on the network has one of those little evms and when you run your program or you run a little piece of your program they all run the same thing and they all come to the same answer and that's kind of how we we reach consensus with with with proof of work and eventually proof of stake but let's uh let's think of this as like kind of like an embedded controller almost like a punch card right we're programming this kind of like low-level expensive uh database so let's create just like an increment function that is going to uh just go ahead and take our counter plus plus right like super super simple programming but let's get our footing and figure out like but make sure this works the way we think it does okay now there we go now we've got our counter it's at five now we have this new increment and when we click that it crafts a transaction sends it to the network gets mined into the blocks everyone updates their copy of our contract and now we've got like a counter system okay i mean like super simple but i'm starting to get it i'm starting to get it all right let's let's do something a little weird here let's create a decrement function and let's do a minus minus and what i want to show here is that this really is kind of like this little embedded controller there really is like memory allocation going on here and there are bits under here and we gotta we we need to be very uh understanding of what these bits are doing so we can increment right we can take it up to six and we can decrement down five four three two what i wanna do is get to right here to the zero and i want you to think about what's going to happen when i subtract 1 more from 0 what are we going to get well we get underflow we get 255 which is since since we created a u n 8 we're using 8 bits there right and if all those bits are 0 and we subtract one from that they actually go all high again right and it goes to 255 so there's kind of this roll around that happens if you're not paying attention because of how memory allocation works and how we need to like it works the way it's supposed to right all of this works exactly the same everywhere we just need to be we just need to understand what's going on thinking of this is kind of like this little embedded controller that everybody has right so like everybody has a little computer on their fridge or whatever and all their fridges are connected and coming to consensus we want to think of this as a simple little computer and actually this is an eth2 node right here right so they don't have to be like these really beefy machines we want it to be able anyone on the network to be able to run it pretty easily so we don't want it to be too complicated and that creates decentralization right okay so we've got this counter we're able to add and subtract from it everyone on the network is holding it for us like it has these really cool properties of censorship resistance it's it's expensive like that that increment decrement at 62quay what's that gonna cost me like 20 no not 20 like five six seven eight bucks yeah it's not it's not cheap but it's like a couple of beers like that's a lot of money just to increment a counter right so you would need to be deploying things here that need that kind of censorship resistance or like nfts you that layer of ownership like an nft there's nothing stored on change just like a little certificate that says you own that jpeg right but that's a perfect layer that's a perfect thing for ethereum it's it's just like a little ownership pattern that says this owner owns this id and you write that to chain and everything else is stored somewhere else but that provenance on chain is what ethereum is so good at is we can program that layer really easily then you then it's like okay what if we want two owners and we want royalties to be split between them right that's a bang out a couple more lines of ethereum deploy that thing and you've you've created that that really cool uh network of all these people uh running their little micro controllers and coming to the same consensus but it's on top of ethereum and you as a developer don't have to worry about all that junk you have to worry about this right here right you have to worry about i'm gonna i'm gonna write the rules and i'm gonna deploy that thing and it might be kind of expensive but it's gonna do what it's what it's a program to do and and that is uh very powerful so let's let's get rid of our counter this is pretty cool let's go ahead and copy our address and bring it in here so let's say that we're going to start keeping track of an owner now so kind of like thinking about a database thinking about role-based access let's start writing some rules and start understanding what we can do with this thing i don't know what there are some errors failing back here and i don't know exactly what where oh you know what there's probably some front end open somewhere else there it is that was it okay here we go so now we've got we're keeping track of some arbitrary value i don't think anybody has posted any chat okay good we're keeping track of some arbitrary owner right we we could name this whatever we want it's not like owner is some keyword this could be me uh i'm gonna put it back to owner just because it makes more sense okay so we've got an owner now let's write a rule so so right now anyone can get in here and set this purpose let's let's write a rule here and let's require that the message.sender is equal to the owner and what is the message.center the message.sender is a global variable that says you know the person calling this function so we can say whoever calls this function can't get past this line unless they are the owner and if they're not the owner it's going to revert and the transaction is going to fail and everything's going to roll back so let's go ahead and deploy that and let's test it out right how do we test out that only we can set this purpose well let's make sure let's let's test the happy path right the happy path is we should be able to get in here and set the purpose now let's go back to our incognito attacker guy right and and you'll notice it's a different it goes away let me that was a purple guy let's do another one let's do another one you you get a new burner wallet every time and you destroy it every time you close it when you're in incognito okay so we've got kind of purple green guy grab some funds from the faucet uh attack right this guy wants to try to set the purpose not the owner right he's he's unable to set the purpose because we've built this really cool require statement here that says only this address that we're tracking can get in here and set this purpose dope dope dope that's cool but this is kind of like centralized it's kind of like this attestation contract right it's just like a single contract out there and whoever owns the private key for this address is allowed to get in here and set this purpose so let's get a little bit more intricate with our rule here and instead of saying message.sender let's look at message.

value and so what we're going to do is we're going to say instead of this thing being an attestation machine where anybody where this one guy can get in and attest to something let's set it up so people can pay for it maybe make it more of like a vending machine right so let's say this is greater than or equal to .001 ether right and we'll say not enough all right so and now and one last thing we need to make it payable we need to add this uh payable string here because all so smart contracts are trying to be as safe as possible if you send money to if we tried to send money to this contract right now it would fail because we don't have a receive function you need to to to explicitly put a receive function into your smart contract for it to be able to receive funds and you also need to explicitly say eat any function that's going to take value needs to be payable okay so we've got our payable function there let's go ahead and yarn deploy so now we've got more of like a vending machine less of like an attestation machine let's go ahead and bring in uh our our other kind of other dude to make sure it's like not the owner that's setting this stuff and let's go set the purpose with this dude so he grabs some funds from the faucet he sets the purpose to hello world but there's this extra field right scaffolding has detected that this is a payable function and that you can send in some value okay so we've got it at 0.01 i need to hit this button right here to take it times 10 to the 18 and that's going to give us a second to talk about way versus eth and i bet there's like just like a perfect little graph that's going to show this uh oh finance academy fantastic there we go so so uh thinking of these little machines all over the network uh they they don't want to eff around with floating poor point math right like having to do decimals is complicated so what we do to make this machine simpler and easier is we say everything is an integer and oh oh i feel like i'm getting bad bandwidth let me make sure oh we're okay okay i feel like air me is being mean to me if we have bad bandwidth i can just shut off my eth2 node you guys let me know in the chat if the bandwidth is bad yikes okay okay anyways all these machines on the network they've got to keep track of these little computers for us right these little smart contracts for us so it would be nice if the math that they had to do is pretty simple and and everyone on the network that has one of these notes doesn't have to do complicated math so the way we threw out for they they threw out floating point math and they said let's just do everything as an integer so so what we'll do to have decimals is we'll say one ether is actually this many way 10 to the 18 right so when i write a 1 in my smart smart contract i'm not saying one ether i'm actually saying this is one way right which oh nice that's a cool little thing okay so and one way is actually uh 10 to the 18 eth right so one each is that many way okay cool and one way is like 1 over 10 to b you get it basically if you when you're going into the machines you need to multiply everything times 10 to the 18 and when you're coming out you kind of need to divide it and show show the humans like a nice decimal of each but talk to the machines uh in a way so so we've got it in way and we're going to send point zero one eth and let's hit send uh oh oh we don't we don't have enough money hold on let's let's hit the faucet give ourselves some cash okay there we go now let's try it there we go awesome okay so we were able to set the purpose to hello world and something else interesting has happened here our smart contract now has value and this kind of like opens up that ah ah these smart contracts actually hold value too and they can send money around so this sort of like magic database and execution layer also is like a money layer right money is built into it they can hold money they can send money around uh and so what can we what can we do with this next so we're basically charging someone to get in here and set this our contract has now held value but uh we are the owner but we have no way to get this money out of here let's go stare at this smart contract for a second and figure out how the heck we get the money out of here and looking at this i'm not seeing any way to do it so basically that 6101 that we just sent that 0.1 eth to that is locked up forever in that in that contract but luckily it's just like a local host contract and we're not too worried about it so what we need to do is add one more function here called withdraw right and that withdraw function will use a require statement uh message.sender right we'll go back to message.

sender needs to be equal to the owner or we say not the owner and then we're gonna do something really weird we do message dot sender which is who's coming into the the function dot transfer and if we put a one here we would send one way from the contract to the person who called this function so what we need is basically address this pretty weird line of code dot balance so so you can do any address dot balance or any address dot transfer or any address dot call they're kind of like and and let's go back to solidity by example i think it shows that nope it does not uh but these addresses are kind of like these really cool like first class citizens within solidity where we can talk to them as if they are their own account and we can send and we can get their address but so we we have this balance and we're transferring it and only the owner can get in here so i think we're set let's try let's see if this thing deploys to production uh hopefully what we can do oh nope i broke something uh oh it needs to be public right how about that there we go all right so our contract has deployed our front end should hot reload uh on both and then uh yep so now this is the new contract this dude can get in here and set hello world we can add some value to the transaction to pay for it and we set it now the contract uh gets value and watch this so now we're the owner we have 9.46 we should be able to withdraw that 0.1 and we should see our balance go up yep and the contract get emptied there we go cool so we've kind of built this little kind of um vending machine that lets anyone get in here and pay some amount of money to set some uh string and and uh basically if they're incentivized to get in there and set the string they can get in here and pay maybe maybe we could do something like have the price increase maybe we could add uh some kind of nft ownership and whoever the most recent is owns the nft the the kind of the fun stuff with ethereum is taking things like this or taking things off the shelf and adding one or two new rules to it and then you kind of create this new financial mechanism for some new thing right so so it's all about the fact that any developer can make small changes and and tweak things and make brand new things pretty easily it's it's it's a test bed for innovation so let's see what is next we've kind of gone through uh addresses i think we kind of looked through our primitives and data types so the next thing i usually do is send people on homework to look at a mapping so if you've gotten this far you're following along uh kind of if the scaffold eth repo also talks about this let me find it but the next thing to learn is sort of mappings and a mapping is uh from it's a mapping of one data type to the other let's just pull it up real quick so here is yeah if you follow the readme if you just go to scaffolding follow the readme it's going to take you through initial setup and then like here's the stuff to learn with solidity uh but if you wanted to learn this in solidity yeah here it is yeah let's let's create a decentralized bank let's create a mapping of address to balance and so this one smart contract can keep track of uh any number of individual balances just by using some kind of little mapping right here right let's throw that in here and let's call this your balance right and then uh yep it'll be an address to a uint256 and then let's have some kind of deposit we're just going to kind of copy this set purpose function because it has a lot of what we need let's put in a deposit and there won't be any arguments it will be payable and what we're going to do is when you deposit money we're going to take your balance of the message.sender right that's the person who's calling it and we're gonna plus equalmessage.value okay so there's a deposit function anybody can call it they can send value along with it and when they send value we keep track of their individual balance like very very simple stuff we're like changing a couple lines of code here and like totally changing how their smart contract works and like what it's what its purpose is okay so now we're gonna deploy this thing we should be able to deposit into it and let's let's check our balance so checking our balance at first to zero okay let's deposit 0.

001 even smaller amount of eth send that in okay now let's check our balance again there we go we've got and it's in way of course but we've got a balance now uh within this contract now i don't there's there is a withdraw function that lets us pull out all the money so this withdraw function works for us because we're the owner but if someone else were to get in here and deposit they're not going to be able to withdraw their funds so let's just build a quick little withdrawal function real quick too let's pull out let's leave the purpose who cares we're just gonna make a messy smart contract the goal is to get you exposed to it and let you kind of uh figure out how to tinker around here okay so withdraw it's not going to be anything there it's going to be let's keep track of some uint256 amount actually no let's let's let's do it wrong first and i'll be able to explain the atomicity of transactions so uh what do we really need to do we saw how to send it earlier you do dot message.sender.tran and you send them whatever their balance is right so we're gonna send them their balance and then we're going to zero out their ballots now this uh is uh vulnerable to re-entrance and we'll talk about that in a second but let's just go make sure it works first and then we'll come back here and kind of circle up on the atomicity of transactions so let's see let's bring in all this blue jabroni here he's about to deposit and withdraw some money he's got a hundred bucks let's give him more money too it's it's more fun when you're on localhost uh let's see let's give him a million right one two three one two three boom synonym all right there we go so now blue guy over here has a million dollars and he is going to deposit uh to eath okay into the contract there we go now we should see the contract holds to eth now this guy over here he's gonna deposit let's give him let's give him some some cash too right he's just gonna deposit maybe like point one eth okay so we've both deposited into this contract oh how do i not oh man heath is expensive there we go okay so we we deposited our eighth now we have 2.01 eth in total in the contract two of it is one guys and .01 is another guy and you don't want them to be able to uh you know pull each other's money out but if we go to withdraw now uh let's see what's going to happen what's going to happen it's going to transfer the balance and then it's going to zero it out so technically i should get my two eth back when i do this the balance should go down to 0.

01 okay so it works people are able to deposit and withdraw obviously if you're really building a decentralized bank there's a lot more to it you would want to be paying yield you want to be keeping track of time stamps when they deposited and when they withdrew so you knew how long that was in there and how to how to pay interest on that and then with that capital that's sort of sitting there you'd want to lock it up in in some kind of d5 strategy right okay but our our uh our bank is is good and it's working and we're able to deposit and withdraw but we've got uh uh vulnerability here and it it at the heart of the vulnerability is the fact that all transactions are atomic and they roll back but uh you can uh you can talk contract to contract and there's one other thing i think that we need to get to before i talk to the atomicity of of contract is is the receive function we talked about sending eth directly to the contract let's do that real quick to show that that doesn't work and then kind of come back around and get it to work so if i take if i just copy the contract's address i pull up my wallet and i just try to send it ten dollars it's gonna fail and say that we don't have a receive function right so we need one other thing here and we need e i v receive and it needs to be an external payable and notice the the syntax there it's very much like the constructor payable external okay so now just by adding that if i go ahead and deploy that anyone can now send money directly to our ether address instead of calling the deposit function you can send eth directly to it so i can set up austinsbank.eth and then anyone can just yolo eth to it and let's do that so let's grab this uh let's pull up our wallet and let's send ten dollars and let's hit go and it worked this time awesome so we actually we didn't deposit funds if i go check my balance uh i still have zero in terms of uh keeping track of whose balance is what but the smart contract balance went up so i sent money in but it didn't recognize it we need to add one other thing to this receive function and it is basically triggering a deposit when someone send money in so your smart contract is able to receive funds and actually like execute do a little bit of execution not much but just a little bit of execution and within that little bit of execution we're just going to trigger the deposit function and increment their balance so now when i grab this dude's address and i yolo him 10 bucks i'm not not going to adapt i'm not doing anything i just pull up my wallet send it to austinsbank.ed or whatever we we do get the 29 and then our balance goes up cool okay so now we can send eth to the contract that's that's kind of like an important piece here and and we can get it to deposit and it's it's reacting it's reacting automatically when we put money in it's like hey there's a receive function he's allowing money to come in let's call this deposit function we bounce down here we increment their balance like something magic is happening there when the eath is landing and that's going to be key to understanding re-entrance so here we go so a lot of a lot of understanding how attacks on ethereum works uh or even just like understanding how ethereum works is like it's good to look through the attacks and there's a whole list here on solidity by example but we're going to look at re-entrancy and and uh you can get in here and look at these real quick but i'm just going to give it like a quick tldr of reentrance re-interesting is basically uh when we do this function right here this transfer it's going to actually send eth to this address okay so what i want you to imagine for a second oh here we go let's let's pull up a little let's let's do a little uh sandbox eath build thing here what i want you to imagine is here is our bank contract right and we've deposited some money in and now uh we we're calling withdraw okay and the way we're going to do is we're going to set up an attacker contract let's make it red oh yeah oh yeah attacker contract so instead instead of me depositing and withdrawing from an externally owned account i'm going to deposit into an attacker contract and then that attacker contract is gonna deposit into uh our our bank and and that's great if we were to go to the bank and say what's the balance of me it would be zero but if i said what's the balance of my attacker contract it would say hey yeah you've got one each right so here's here's the trick then we're going to uh call a withdraw function on our contract and our contract is going to call withdraw uh on on the bank right and then the bank is going to transfer money to our contract so we'll do a little green line showing money coming across now what happens when money lands in our attacker contract if we have a receive function there it's going to execute a little bit of code so right in here we get the chance to execute just a little bit of code and what we're going to do is say hey is there any money left in the bank and if there is we're going to call withdraw again from there and it's going to get right back into here and it's going to say oh transfer your balance and it's going to send us the money again and we're going to do that again and we're going to keep looping on this until this contract is totally empty and then finally it's going to stop its execution and it's going to send that money out to us and we've just drained that entire contract because of this line right here and here's why uh a a transaction is atomic and a contract can react to a transaction hitting it and so what we need to do is do uh our internal state changes first and then our external calls second so we need to update this state before we send that money so then when they enter back in again their balance is going to be zero and here's how we do it very very simple fix to this problem we uh set their we keep track of some amount right we zero out their balance and then we send them the amount very very stupid simple change but what we do is we update our local state first we make sure we get our local state solid before we ever do any of these external calls so then if they try to enter back in their balance is already going to be zero and we've protected ourselves from this reentrancy and there we go we can go ahead and yarn deploy that and send it off now we talked about transactions being atomic and we talked about having this require statement basically this require statement can be anywhere right it could be down here and and it would set the purpose it would console log it would admit the event and then finally it would check to see if you did the right thing and if you didn't it would roll everything back so it's going to roll things back uh no matter what even even if this is the very last line so you you kind of have like this atomicity where it's going to either all work or not but you have to be very careful with this whole re-entrance thing so you kind of want to do things in order anyways even though it is an atomic transaction okay cool so we've looked at uh uh setting up your smart contract interacting with things kind of some gotchas thinking about the the mental model of this like big expensive network that you're deploying this thing to thinking about it kind of like a substrate for making small innovations on code and then having people be able to use this sort of cold code is law layer to execute and and run that code so uh what i want to do now for like the last probably maybe 15 10 or 15 minutes is kind of close the loop let's let's deploy this bank to production and then i'll show you some other links uh where to go so what does production look like uh we can we could go to a test net we could go to a side chain it's kind of uh let's let's finish cleaning up our app let's make sure we're ready for production right okay we fixed that we fixed that uh i guess we're gonna have a purpose also and we're gonna let people pay this is a weird contract uh yeah okay so it's like it's like a bank that people can deposit and withdraw from but it also has some purpose i don't know but if we're going to go to production we don't want uh the console log so with with uh hard hat you get console log let's go see that real quick just just to show it off real quick is the set purpose function still here if i set the purpose to hello world let's see we want to have this up and i pay 0.01 there we go so what we see over here see that we get a nice console log if i can oh gosh oh gosh we get a nice console log here so so while you're debugging your solidity which it can be super difficult sometimes like why i'm doing this math and it's like rounding off remember like the no floating point math like if you're trying to do some kind of ratio and you're like why is this math not working throw a console log in here you can kind of console log some different variables there and then they'll show up over here on your hard hat uh blockchain node but we're gonna take that out to go to production so i'm gonna pull that out pull that and that just it just makes our smart contract a lot less let's see it was 0.03 there no it barely barely it'll clean up some code if we go to verify it on on some uh test net blockchain but i guess our test net block explorer but i guess it's really not that big of a deal okay so we've cleaned out our contract we're ready to go to production so we don't have uh with with within hard hat we sort of had this uh this first account of the hard hat node so our back end has a bunch of wallets that kind of come with it and those wallets can be used they're full of ease so they can just you can just go borrow like like we did we grabbed a million dollars from that from that setup right which wait why is that zero don't i don't even know i don't even wait let's make sure he this dude can send to this i feel like that number is just wrong right is that gonna work yeah it does okay so his balance is wrong whatever whatever whatever okay we don't have these local accounts though so so when we want to go to a let's let's pick a public network i don't i really don't think we should deploy this to mainnet it's it's kind of expensive right now but we can pick uh any number of networks xdi is one of my favorites i'll probably go with xday but there's matic there's a bunch of test nets they're all in here what you do is you go to your contract and you go to your hard hat config and you put in what network you want to go to or you just do dash dash network but what we want to do is a yarn deploy here now when we go to xdi or any of these side chains there's not going to be these fancy accounts so what we're going to need to do is generate a deployer account so if i type yarn generate it's going to give me an account it's it's going to create a mnemonic in my hard hat folder 12 word seed phrase and if i do yarn account it's going to display uh the corresponding account for that and i'm just going to use a punk wallet here so punk wallet dot io built with scaffold eath it's uh it uses punks to uh display uh identity it's a really cool way to kind of show off crypto and show off signing crypto and you can get on any different network but i'm going to send this dude 10 cents in x die awesome there it goes okay so we should have we have our deployer account now we have money on that network we're ready to deploy so let's double check that this is xdi and let's do a yarn deploy here we go all right we're going to production go into production okay cool so now we got this uh this address and okay so our front end is not attached it's it's it doesn't know it's like who's the owner who's the purpose i don't know where's the contract i can't find it anymore so there's kind of two satellites we we turned we turned the deployer satellite and we pointed it at xdi but our local host satellite is still pointed locally it's still trying to find our contract locally on our machine so we need to get into our app and change one thing here this nice oh what why is it dot localhost who changed this why i hope this works when i do this oh man uh maybe it doesn't look like let's try this man people messing with my master branch that worked well whatever that is okay whatever okay so uh we we needed to change both satellites now they're both pointed at x die we deployed our smart contract to xdi and now we're reading from xdi to see uh our contract now we should be able to uh interact with it so notice that when i changed from localhost to xdi my balance changes everything on the app see this is localhost everything on the app changes to x guy if we were to go if we were to go mainnet or we were to go gourlee or rinkaby your whole app is going to change but now i have ten dollars if i connect my meta mask it's going to say hey you're you're on mainnet bro you need to be on xdi i'm going to pull this up uh click on xdi right there we go awesome wow that should have been a button to put me on x die anyways anyways okay uh let's go ahead and deposit some x die as austin griffith.

eath right so let's put in what do you think 10 cents 10 cents of x die and let's deposit it and conf oh wait why was that oh no it worked that worked it worked we got deposited there we go we have a real transaction going uh if we were to kind of maybe click the contract's address now we see block scout right we see the block explorer for that app uh ooh i feel like yup there we go so the transaction is confirmed now let's go check my balance on x oh man what did i do yeah i mean it oh oh it's not yeah this is this is we should go to a different network yeah i don't have time i think maybe the rpc endpoint of x die is getting wailed on let's see it has some notice like it's not loading in the values here okay real quick what if we point this thing at like covan or some other net uh i don't want to do it too much work too much work come on load up xdi all right let's go to kovan let's uh let's see i'm going to need to send some covan eth to this dude right and let's yeah let's set this to cover grab this paste this send this dude point one okay so our deployer should have some coven eth we've got our network set to covan let's deploy this thing to govern let's see if this goes and then uh we're going to need to change our app to be covan right and now we've just totally switched networks we deployed to a completely different public network there we go so now we've got our app out on coven the rpc endpoint works and it gives us information back uh now let's try depositing some funds does this did it all just work let's make sure let's let's click this oh no wait i don't think that yeah i did look at that oh it's the same address because it's the same account on two different networks cool cool cool cool all right so the contract is out there it's on covan let's deposit let's try this again 0.01 covan go uh should be popping up metamask right there it is there it is here we go sending the transaction transaction has started transaction has succeeded wow just the network just works a lot better i wonder what's going on there all right now let's check our balance yes 0.01 there we go so we we were able to build an app we were able to tinker kind of think of this as our expensive database we're able to kind of play around try things out locally then eventually we can send it to a test net now when you are ready to go live and uh everyone to be able to use this on mainnet there you go you just change that to mainnet if you want to deploy you just change this to mainnet or you do network mainnet and you're deploying to mainnet so this is exactly the same as mainnet it's just cheap cheaper and quicker over here right but like all the assumptions are the same everything will work the same when you're ready to go so now you've kind of got that full dev loop you can clone downs you can search for scaffold eth bullet pull up uh kind of the the commands where you do a yarn install on a yarn start a yarn chain to run your back in a yarn deploy to deploy your contract you can tinker with solidity here using solidity by example where you can kind of just copy and paste examples throw them in play around with them deploy them and then kind of have your your interface here where you're playing around with it now eventually you won't want to have your end users have to like take things times 10 to the 18 and stuff like that and that's where the the ui comes in there's just a ton of ui built into scaffold eat like every hackathon project i would go to i would spend the first day just getting my environment set up and all the things like like this address input right like i know i'm gonna need an address input in my app and i probably want it to do ems resolution right i probably want it to have a nice little blocky preview i probably wanted to have a qr code scanner i'd like to be able to type in 100 usd and like switch back and forth between eth right all these things that you find yourself i just said vitalik some coven for some reason all these things that you find yourself doing uh in a hackathon they're kind of like all these components that are you can just take off the shelf with scaffolding so a lot of that even the front end stuff is built in here and you'll get in and start working on an example but there's there's all these example buttons there's example events let's go ahead can we set let's see let's call one of these set the purpose with the value no it's not it's not going to let us is it let's oh maybe it's going to let us do this one let's see i think this button and you can get in here and go to views and go to example ui what was the button we just called another example there's a button in here i think it's oh yeah right here right here we did this transaction here where we crafted up some uh call data it's like a normally when you call a a function on a contract oh it failed anyways you do write contracts.yourcontract.the function you want to call this is just a button to make that call there's a transaction wrapper to do the little notifications but something broke anyways you'll you'll get to building your app uh kind of the react and stuff but at first you kind of want to focus on poking at your contract learning solidity getting getting getting your solidity uh solidified idk idk but getting getting it solid and getting your app working the way you want it to i need i need this to store here i need to be able to keep track of balances get that all working test it out here and then you kind of carve out that scaffolding ui and you build up a real ui for your users and what's neat is when they land on your site they're gonna have all the cool things like burner wallets they're gonna have all those uh they're gonna have that wallet where they can you know send vitalik some money if they want uh they're gonna have all these kind of ui components so your app really like comes standing up out of the box and you can make small changes to it with just like a couple minutes left i wanted to run through uh some different uh branches so so this is kind of like a hidden thing with with scaffolding there's 180 branches and in those branches are everything you can think of say you wanted to learn what commit reveal is there's three different commit reveal tutorials right say you wanted to mess around with chain link there's four different branches for chain link right let's just go click on one of those and look at it oh okay this is one that i did so this is a vrf nft so it takes our nft branch uh and then when it goes to mint the nft it uses vrf from chain link to randomly uh get some stats right and if we get in here and go to packages hard hat contracts everything within every single scaffold eth branch is very similar in terms of like where things are and what components you get and if we dive in here we can see yep sure enough they bring in vrf consumer uh they they set it up in the constructor you you call get random number and then it fulfills the randomness and then we have a mint function right so kind of what you would expect to see there so let's see uh let's see final final closing branches that i would go check out uh is let's see so there's the simple nft example i think right here so there's these three these two challenges uh build a staking app and build a token vendor so if you're looking for next best place to get started get your footing with scaffold eath and then dive into these challenges this challenge has helps you build a staking app where timing is important you can kind of think of these things like these state machines and you put it into the you put it into one state and then you wait for everyone to to to deposit and if you get enough deposited within enough time then you go to the active state if not you kind of roll back so really really good demo app to build here to kind of get your footing uh and then and then there is the token vendor where you deploy an erc20 but then you deploy a second contract that thens that that sells that token and by building that second contract it teaches you contract to contract interaction it teaches you kind of some of that stuff we got into with re-entrance uh and then the simple nft example this is where it really starts to open up you can you can uh with with a couple lines of code you can build and i think i have it up and running over here i could probably do a let's see it's probably yeah if i do a yarn mint is this just gonna start minting yeah this is there's probably too much we don't have enough time but there's a great nft example to set you up with uh an nft a simple nft example where it mints a bunch of nfts uh from that like if you search nft there's probably 15 branches from that nft we did like a buyer uh yeah buyer mints in ft so in the first example you had to pay the gas in this example it sort of saves the minting of the nft for the buyer it shows the gallery and then you go to buy and then it mints it so a bunch of branches there but it goes it goes way farther there are so many branches so if you get on uh biddlegiddle.

com i'll paste it into chat oop if you get into biddlegiddle.com you can see what build guild i'm just going to call it build guild what am i what what are we doing you can see a whole bunch of examples that we've built recently like maybe you need a meta multi-sig wallet right kind of like a gnosis safe but you want to build it yourself understand it nifty inc is an art platform we built a simple stream is just like an east stream to someone and that's what's controlling uh these streams to these builders here so each of these builders are are uh buddies of mine that were working on scaffold eath and i'm just gonna stream them eth for building cool things tons tons and tons of builds there's the punk wallet uh jump on here check it out there's going to be a bunch more getting added in but really scalable google scaffolding bring up the repo follow the readme if you're looking for something fun check out all of these branches if you go to branches and go to active you can kind of see what we're up to and see what we're building recently like signatorio is a new one that we just put out uh it's just like a little signing app if i go to signatorio signator.io you're gonna see oh this is this looks like a scaffold ethe app sure enough i'm logged in and it's just like a simple app to let people sign things and this is like what we're doing like find all these uh simple builds that the ecosystem needs that raises all boats and just build all of them and and have tons of tutorials and all that stuff so that's the plan with scaffold eath thanks for checking it out if you're a web 2 dev there's no better time than now pull down scaffolding start playing around with with tinkering with solidity start tinkering with building apps um let's see what else there's the punk wallet i think i think that's about it there's not a whole lot of questions i'm i'm uh austin griffith on twitter and my bm's are always open so shoot shoot me something there uh i think there yeah thank you for having me this is this has been great yeah i had like four other demos but we just don't have time sorry i took so long already hopefully that's good i don't see any other questions uh thank you antec for having me thank you xerx poland hopefully you guys go build something awesome and use scaffold eat if you need to pull it off the shelf yeah thanks a lot silstein uh i love the knowledge and i love your energy and i hope we'll have a chance to have you soon back yeah hopefully let's let's do it in person i want to have a beer in poland it's probably beer time in poland right now it's only 8 a.m and the limitations the coffee limitations are getting lifted so maybe we'll have a chance soon soon i'm down yeah thank you very much see you uh so we're gonna have a short break and next up we have uh alex from balancer uh to tell us more about the d5 primitives see you in a bit