🏗 Introduction to Scaffold ETH - Kevin Jones

[Applause] [Music] what's going on eat mexico how are you all [Applause] super excited to be kicking this off uh as long as we can fix that accent okay okay uh super excited to be kicking this off um a little bit about me my name is kevin jones uh you might see me running around here i'm actually the photographer for the event as well uh do a lot of fun stuff but i'm also a developer um you can follow me pretty much uh with this qr code it'll bring out my contact and all my socials um i full-time job i work for web 2.0 web 2.0 company called nginx you guys may have heard of it before but i'm also a developer advocate for scaffolding and that's what i'm here to talk to you guys about it's basically a toolkit for prototyping and building on ethereum quickly i also um i started a non-profit for blockchain education i also teach a kind of a solidity course through a company called growic and yeah again i'm a photographer and filmmaker so if you want your picture tape and come find me later pretty much scaffolding is an open source toolkit uh it's available on github if you do a search for google for scaffolding first thing is going to come up is the the github link it's basically uh a collection of different tools that you're going to utilize to essentially get up and running with a development environment to build on ethereum right hard hat react some hooks pretty much all the plumbing you need to be able to quickly deploy quickly test your smart contracts and quickly kind of build and prototype applications so it's perfect for hackathons or uh you know basically trying to create prototypes really quickly um there's been tons of other projects that have actually utilized scaffold eth even uh the actual build guild which is what i'm a member of uh is using uh scaffolding as well there's also what's called speedrun ethereum which is kind of like this way to do challenges and go through and learn about how to program and how to build smart contracts and how to build dabs um but there's been lots of other successful applications that are built on um scaffolding so it's definitely worth checking out um eventually once you start messing around with scaffolding you'll you'll check it out you build some daps um you'll start messing around and toying around with things like solidity by example right so you might go to solidity by example and uh start kind of like pasting um you know uh stuff from solidity by example into your smart contract deploy those changes you can do things like define primitive data types define variables start to learn solidity right like deep deep dive into solidity and how it works but eventually uh if you want to get deeper and you want to kind of want to test your skills you'll go to speedrun ethereum speedrun ethereum is this again it's this kind of experience that you go through and you go through these challenges so like the first one is you actually build an nft it's a simple nft example then you build a dex a decentralized staking application you bring it build a token vendor a dice game and then eventually you actually become a part of the build guild uh and the build guild is just basically like i said a collection of developers that want to build and and build on on ethereum uh so definitely check that out that's my quick show about speedrun ethereum um everything you need to know about scaffoldith is pretty much available here so if you guys scan this it'll give you the link to the github it'll give you the link to build guild speedrun ethereum the twitter that you can follow pretty much everything is available here and uh if you guys have any questions or anything like that i'll just gonna throw my info again if anyone wants to connect with me i'll be running around happy to help you guys but anyone that's at home wants to connect on my socials please do so um what does the architecture look like so this is kind of like a real real rough look at how it how it's set up um we scaffold heath uses yarn so the only dependencies really on your on your on your machine is going to have git to be able to check out the repository yarn to orchestrate and run some commands to get up and running and to kind of do things like deploy if you're not familiar with yarn it's basically like a package manager but it also has this cool scripting functionality where you can like write special yarn commands to execute commands uh from other different uh uh applications so it's really great for like tool kits because you can just make all these yarn commands to do everything you need and the per you know the developer like yourself don't really need to understand uh what's going on in the background you just need to know like okay yarn start is gonna spin up my react app yarn chain is gonna spin up my hard hat node yarn deploy is gonna deploy my changes so to get up and running it's super easy go to the github check out the repository right do a yarn install the yarn install is kind of like going to depend install the dependencies right everything you need to get up and running after that's done then you're going to do yarn chain to spin up your hard hat node then you're going to do a yarn start to spin up react because we use react and then do a yarn deploy to deploy your smart contract so what does that look like let's uh let's just go right into demo mode here um so i've basically gone ahead and i've already kind of checked out the repository so hopefully you guys can see this out there um i've gone ahead checked it out and i've already also done the yarn install but in case you need to install any dependencies you'll need to make sure that you do that make sure you're using uh the newest version of yarn package manager there's like an old version of yarn make sure you're using the newest version of yarn package manager make sure that you have no node.js installed on your machine i think it's 16 or above do the yarn install you're good to go all you got to do next is just do a yarn chain okay so yarn chain is going to essentially spin up a copy of hard hat running on localhost available and that's it you're ready to go you have a blockchain set up right so everything you do in scaffolding basically the result revolves around like kind of a couple windows open you keep the hard hat chain open and that just is always running that's kind of doing your your uh you know evm kind of uh simulation right and then you open up a new window go to the same directory and do a yarn start that's gonna spin up uh react react takes a little while to first get up and running so that's gonna excuse me take about a minute so we'll come back to that and then what you're going to do is just open a third window and the third one is really the one you're mainly going to be utilizing to do your deploys so all you got to do is do a yarn deploy so what that's going to do is it's going to take there's an existing smart contract it's kind of like a hello world smart contract that has everything you need to kind of just understand how basics of of a smart contract work so we can see that it deployed successfully after i did the deploy and we can also see that where it was deployed to we can see how much gas was used which is you you useful if you're trying to like optimize for gas uh during your deployment and then you can also see that it published a sub graph so if you're into the graph or you're familiar with graphql apis sub graph is basically a graphql api for all of your events so you can actually use that and that's also comes with scaffolding as well it's you have to do some docker stuff but it's available for you there so during the deploy that's that's taken care of so now we have scaffolding up and running we've done the deploy um we've got our ui here so real basic kind of run through real quickly you'll see there's some tabs basically in the in the ui the first tab is where you're going to build out your app like your app so imagine it's like an app within scaffolding which is an app right so you're going to start building there's a special directory structure i'll show you where you go there and edit that home.jsx file and that's where you can start building your app but all the other stuff for like connecting your wallet and getting up and running with scaffolding as far as as far as developing and testing is already set up so you don't have to worry about like it uses ether's js so that's already piped up it's got this burner wallet in the top right corner you'll notice so you could connect to like metamask but if you don't want to mess with metamouse you can just use the burner wallets that come with scaffolding and it's just basically in-browser wallet so what happens is you get this kind of random generated mnemonic inside the browser and then you're able to start transacting right away so i can just come over here to debug contracts and i can see the functions of my smart contract so before we get into that let's open up text editor with the directory structure so i can just give you guys like a real kind of over overlook on what it looks like um so this might be hard to see for you guys and i'm not sure if i can zoom it in but i can just walk you guys through it so there's a packages folder inside the packages folder there's really two places you'll be working mostly hard hat folder and in the react app folder okay react app obviously everything with the front end hard hat is everything with the back end right so inside this contracts folder inside hard hat is that hello world smart contract it's just a real basic smart contract what it does is sets the version of solidity we're going to use with the pragma we import what's called hardhat console which is so we can print out uh logs to the hard hat console if we need to see what's going on during the deploy or during your transaction uh and then there's the smart contract is called your contract and we can see that there's a set purpose event and we can see that there's a string defined like a variable named purpose and we can also see the constructor's empty so we're not doing anything fancy during the deploy and then we just have this basic function and the function just is allowing us to change that that variable that we've set set there so we can test it out let's just we've already deployed our changes so we can actually test that and see what that looks like so um you'll notice if i try to come over here and i say like uh east mexico like that try to hit send it's going to tell me i don't have any money i don't have any funds i can't you know my accounts are at zero so all i got to do is click this little thing grab months punch from the faucet and then instantly it's going to take money basically ether from the hard hat instance put it into my browser wallet so now i can operate now i can send a transaction and we can see that i updated the purpose so what's cool about scaffolding is it's giving you your contract in this ui so you can start testing kind of your assumptions and your you know your ability to transact in the application um so we can see the contracts there we can see that it doesn't have any value we can see its address we can see that purpose but now we can kind of start touring around and changing some things so first let me minimize this and let me go back over here and actually let's let's change some things let's uh first of all let's i don't know let's just do something uh silly like setting set an owner variable so we could say like uh address public owner equals and then we can grab our address from the browser which is this one all right and then we can set that in there save that then we can come over here and just do a redeploy now if you've made a change to your smart contract you can just do deploy um if you didn't make a change to your smart contract and you want to force a new contract to be deployed you can do a yarn deploy reset and it will just give you a brand new version of the contract so you can keep doing that over and over and over again but we just made that simple change and we can see now we have a new variable we have an owner variable called address right so what could we do with that well we could like do something like a require statement right we could say like require that the message um sorry message.

sender which is the global variable is equal to owner otherwise uh you are not the owner like this boom right and that and let's do a another deploy so what we can do now is we can open up a new incognito window right we can go to our app again which is on localhostport3000 and we can see now that we have a copy of the of the app on both ones and we have two different accounts we got the account that is the owner which is right here and then we got this kind of like a purple blocky dude right here so they've got to grab some funds to this kind of like another um account and then i can come over here and say all right well let's let's make a change like uh this is so cool and hit send and just going to tell me i'm not the owner even though i have some money i want to interact with that contract i've done some kind of level of access control using that that require statement and defining the variable um that's a proper way to do access control so let's let's change that let's actually do it like this let's say let's get rid of this variable and let's do what's called inheritance instead so you can see you can kind of see what i'm doing i'm toying i'm messing around setting some variables testing to make sure that my my functions are working now i'm going to do what's called inheritance i'm going to inherit open zeppelin's copy of what's called ownable ownable's like kind of like a set way to do access control it's a it's a smart contract that was designed or created i should say by open zeppelin it's kind of like the standard de facto way that you do access control so i'm importing that then i can do your contract is ownable like this inherit from that other smart contract and then what i can do is i can require instead something like this only owner so that's a function that's a modifier it's called a modifier so i'm i'm grabbing the modifier from the ownable smart contract um and i'm inheriting the smart contract so that way i don't have to like set that um hard-coded right but if we do that let's go ahead and try to do that deploy do another deploy boom okay so what's different here well if you look closely the owner does not match my burner wallet the reason why is because uh scaffolding uses utilizes hard hat our hard hat by default uses the very first uh like account of like toy ether that it has for it to deploy it's used called the deployer so it's the first account so right now we have a smart contract that we have no control over so um the next part that you get into as you start building around scaffolding is you'll find this deploy con folder right and inside that deploy folder what's really important in here is you get an instance of the contract right and you do the deploy here so you can do things like pass arguments like let's say you wanted to pass like a supply or a variable or something like that you could do that and pass those across in the constructor but most importantly we can do what's called uh like a transfer so it's already here we can just paste it in and what we can do is grab the [Music] address again and then we can paste it in which i think this time you have to actually put it in quotes let's see if that works so um one one additional function that you get when you inherit ownable is called the transfer ownership function so all we're doing is getting a copy of the smart contract as we're deploying it and then when we do that it's called the the copy of the contract is your contract then we're calling that transfer ownership function and transferring it to this address so we can say save that and then redeploy again and let's see if that worked the deploy worked it transferred it hopefully and it did so you can see now that we deployed the smart contract with hard hat but then we took control of it with our because we have this kind of like identity right in our browser um if you were deploying to like a test net or like a main net you wouldn't probably use the burner wallet you'd use like metamask or some other kind of a wallet to kind of take ownership but you get the idea so we're kind of going through and we're doing these tests um let's do some more stuff let's just let's have some fun here so we've already transferred the ownership we can do the access control but it's not a very interesting this isn't a very interesting smart contract like just for one person to change a purpose uh it's kind of centralized right so let's remove that and let's just let anyone call that function but what we can do instead is we can do a require statement okay so you know solidity has these these global variables one of them is message sender which is the the person that's calling the transaction but you also have message.value right so we can say that the message.value needs to equal some new variable that we're going to create called price and say not enough money otherwise if they don't send the the value then we'll say not enough value okay so then we could come up here create a new variable we could do uint public price equal and then we'll do .001 ether like that so if you start start deploying and building smart contracts you'll learn that everything you do is in ether or it's in whey and most of the time everything that you do in your application you have to kind of like calculate how much weigh is how much ether but you can hard code the ether here or you could hard code it as just whey we're just going to be make it easy on us and we're just going to say ether so 0.001 ether so we'll save that and let's deploy it and let's see if it works oh so we also have to make this payable as well i believe see if that works there we go so i always do that i always forget to make the function payable so we've made we've made this function now able to accept value right we've required that someone that wants to interact with this particular function they can come in here and they can change it if they want but they'll have to pay a price so this is the way that i told you about so .

001 ether is equal to this much way right so if i want to come down here and i want to change it to eth mexico again you'll see that the the front end's automatically adapted and now it knows that hey we got to send the value with the actual purpose so we can say like eat mexico and we could now there's this cool thing i could just copy paste the thing because i know what it is here right like this or you could type it in .001 ether with this little green button it's kind of a cool tool and it will just do it for you so if you're just kind of thinking about ether you just boom obviously in your ui you wouldn't want the user to have to type in one zero zero zero right um but let's do it did it work it does if if we wanted to change it again and we didn't put enough let's say just say we let's say we set 999 and test send not enough value right so now we've created this kind of like cool functionality and what's happened well our smart contract has some value right now we're able to actually like use the smart contract as a bank we haven't created any way to withdraw the money so it's a little bit of a black hole right now because there's no withdraw function but you guys get the idea but we could do something else cool we could like say well let's um let's require the value but then let's change the value after someone submits it so we could do something like price just with one change price equal price uh times 101 divided by 100 see if that works i think that should work so basically we're going to increment it by one percent every time someone goes through and calls the function successfully so now if i come in here and say well let's change it to uh scaffold ease whatever scaffolding and let's call the right amount that we need paste it in there send boom so what's happened well we've got a new price we can see that it's incremented so with just one little small change we're able to completely change the behavior of the smart contract but you can see what we're doing here is we're going through and we're doing things um you know and testing out so if you're if you're getting started with scaffolding well first of all it's going to be easy to just like get all your teammates set up because you can just be like go check out this version check out this branch and you're going to be up and running right then it's really easy to kind of start testing and you know maybe one person's in charge of certain functions um and then you guys could just share your code and distribute and drop it into into the branch as you need it um so if you want to learn more i would suggest you know going through solidity by example coming through here and kind of like you know like learn how variables work right like learn what the what the different kind of variables are local versus state versus global and actually like come over here and put them in here right and copy paste them into your smart contract and test from there another cool thing is well first of all the the the base version of scaffolding is just the start actually um after you kind of get up and running and with the basic version and you're you want to kind of venture out into like doing more advanced things like you've kind of just you've started building and learn how solidity works you might want to do something like an nft right you might want to build an nft so um if you go to the the base version of scaffolding i should say the base path for the github you'll notice there's this challenges directory i talked about it earlier it's the speed run ethereum challenges all of the challenges have their own repository that you can basically build off of and like a good example is the very first one which is the simple nft example it's basically just a uh erc 721 smart contract and it already has a lot of functionality to create nfts so let's spin that up real quick and show how easy it is so i shut down my other instance and i've already gone ahead and checked out this version for you guys so you guys don't have to wait for the yarn install because it takes a while especially if you're on bad internet connection but let's just make sure boom everything's good um we can also so we can also do git branch just to make sure that we're in the right branch so i'm in the challenge 0 simple nft branch same thing goes for just real quick let me show you real quick when if you're in the basic scaffolding directory and you go here you can do a search for all the different branches here right so like if you say nft there's a simple nft with next js there's a ticket nft there's also like let's see if we just do erc 720 1155 there's an 11 55 there so my point is if you're going to get started on a project that's going to use like a certain starting point just build off of that branch and you don't have to waste all your time like importing whatever version of open zeppelin and testing it's going to be ready to go and you can build from there that's why scaffolding is here for you right so i've already done the checkout we did the yarn install let's do the yarn chain and we'll do the yarn uh start and we'll do yarn deploy and we're going to have to give it a second but that's okay let it deploy so it's going to let us deploy even though react is not up and then now let's open up this version of the of the code um and then i do want to show a couple other things so first of all let's look at the contract the contract is sorry let me close all these other ones i was obviously in there earlier so the contract's a lot different it's not just the hello world right purpose it's an erc 721 pretty much turin complete ready to go to build your smart contract off it has all the functionality to mint an item it has the you know the functionality for the uri it also has some cool stuff where you can um it just automatically allow you to upload metadata to in the in the ui i'll show you in a second but the whole point is it's ready to go so if you're building an nft project you would start here and then i want to show real quickly before the the app comes up is the react app so inside the source directory there's the app.gsx folder which is like that main application it's called the scaffolding app right but inside of views is where you'll edit like other things like this well actually you won't go into the example ui you'll go into uh index.js i believe well this version doesn't have like a home directory so but on the other version there will be a home directory for you i can just show it real quick yeah here so if we go to react source views home so this is where you kind of build out your app right and these are all those examples that we saw in the ui so anyways react is a whole nother beast but we're not going to go too much into that but let's see if the ui showed up and it did let's close this thing we can keep that open actually so now we'll notice that we have this your collectibles tab right so i got three minutes so what's cool is we can just grab some funds min and nft and just like that we got an nft and it's this cool little buffalo that austin griffith colored at home so yeah basically then i can come over here grab this address transfer it transfer come over here refresh and now i got the buffalo on the other account so you can see you automatically have this ability to create nfts mint them around move them around the metadata for all this is editable so you can like change the image you can change the uri it doesn't have to be a bison there's a bunch of different ones we can actually mint some more see what else is cool it's gonna see what other cool nfts i'm gonna create dot dot oh zebra cool what's next so yeah you get the idea um and this is all coming from like a i think a json file that's kind of in there so you can edit that and build as many kind of layers to that nft as you want to but um yeah start with this branch and then you'll be good to go uh so that's pretty much my demo pretty much here uh does anyone have any questions i got enough time for like two minutes for a question that'd be cool if you had a question someone huh anyone anyone know which one rinkami oh yeah so uh everything we're doing here is localhost that's a good question so you could totally ship this to a test net um oh it's just a matter of changing a few variables um inside of the source files so one is inside of the app.jsx file you just have to change the network to whatever network you want so it'll be like network.

localhost we can actually look at it real quick uh so if we go to uh views let me grab the other one because this one's so we can go to uh home and then we can go to app.jsx and we can see here that we have the network localhost so we could just change that to wrinkybee if we want right and then that app is pointing at rinkaby same thing goes for the deployment you can change it in the deploy as well so like if you come up here and we say um in the deployment i'm trying to remember where it is but it's inside the hardhat config so you can do it either by specifying a dash dash network flag when you deploy or you can just come in here and change this to ring could be like that and then that will deploy the ring to me uh so the yeah the brows not speedrun ethereum but the burner wallet so it's it's also a um so the question was we didn't have to use metamask why is that that's because scaffolding uses a burner wallet functionality that's also available as a separate source code inside of this repositories folder and it's just a burner wallet um which i think where it is that's the punk wallet i know it's in here somewhere but there yeah it's basically a burner wallet functionality that comes with scaffolding yeah so that we don't have to use like worry about nonces or anything like that or transaction problems yeah all the dependencies are are going to automatically be deployed um but they're available in the package json you can see like what needs to be installed but it'll do it for you so but you just need to have github react node.js sorry node.js get and yarn and then you'll be good thank you guys good luck hacking [Applause] you