BuidlGuidl - Build Your first five apps on Ethereum

[Music] you are a builder uh go to speedrun ethereum to learn how to build on ethereum uh this will help you with your first five apps and we're going to speedrun the speedrun today I've uh written a bunch of code this will probably be a little less code writing and more just like going through the tutorials and talking about some of the AHA moments you have along the way uh just to like Zoom all the way out we are the build Guild uh we are focused on developer education and tooling our main tool of choice is scaffold eth and we use that to build a bunch of things uh but that is also the heart of speedrun ethereum which is our curriculum and we're going around the world teaching people how to build on ethereum and anybody can just go to speedrun ethereum and get started today and we're going to kind of just speedrun the speedrun today I'm going to go through the challenges and just kind of talk through the kind of the AHA moments you'll have but hopefully you can go home and speedrun ethereum on your own time and really kind of go through this at your own pace but I'm going to go through it quickly just to kind of cover like oh here's you know here's the stuff to look out for basically uh let's let's do just real quick if you guys could give me a show of hands how many of you have deployed a contract on mainnet before oh yeah we got five or six mainnet deploys all right how many of you have deployed on an L2 actually less I think right less people okay we're going to change that today for sure we got to get you ready for that scaffold I deployed one to base earlier and someone attacked it stole my money it was pretty fun okay how many of you are software developers okay those look at those I would say that was almost all the hands oh I just got goosebumps I'm excited okay this is awesome so I'm going to just do the speedrun probably 20 30 minutes I'm going to speedrun the speedrun uh and then I'm going to hand it off to Eda and she's going to do I think like an nft build right cool awesome okay so um just just in case you've missed me shielding scaffold eth I've been shiing it all week but it's a really great tool for prototyping but also deploying to production it's really nice because you can make small changes to your smart contract and those changes are sort of represented live in your front end so you like a new variable and boom it shows up in your front end and then say you uh set up a require statement that says only the owner can get into this function and then to go test that instead of writing and eventually you will write lots of tests but instead of writing all of those tests up front what you can do is just create a burner wallet and try it as the good guy and make sure it works and then try it as the bad guy and make sure it doesn't work scaffold e gives you that opportunity to try it and it it lets you tinker and test your assumptions okay but today we're using scaffold eth within speedrun ethereum and let's just look we're just going to look at each one of these quests and go through these then I'll hand it off to Eda then we'll do a Q&A maybe we'll do a quick set of questions before yeah I'm going to do that I'm going to do like 20 minutes then we'll do five minutes of questions then Eda will take over then there's like this Q&A thing where they put up a QR code and you shoot it and ask like anonymous questions or something but we we might get to that too at the end okay so building uh on ethereum here we go the the very first tutorial kind of points out that you probably need to have some solidity already uh if if you don't if you're a coder I saw all those hands there's a lot of coders in this room it's basically everybody if you're a coder you can go to solidity by example or just go to the solidity docs and you're going to pick up the language pretty quickly you're going to pick up the primitive data types you're going to pick up the mappings and arrays but just like go through this and kind of learn these Concepts uh for instance ether verse way is a thing that we'll talk about today um there there's a few other just kind of like aha moments you have but you got to first get the syntax and so you can get the syntax from the docs or you can get it from solidity by example or you can just prompt cursor to write it for you too okay so uh that's the basics um also there's a web two to web 3 Series that can help you get your wallet ready and do some of those you know first beginner actions uh you know what how many people have deployed to a test Network so the main net was two okay okay okay yeah that's like 50 60% have people have deployed to a test Network that's really great okay so with that in mind I'm probably going to double speedrun the speedrun and I don't want to like bore you guys too much and we can really get to to the heart of building something with with ETA and then after this let me make sure I show this uh the live stream will actually shut off and we're going to do a capture the flag and knowing that there are so many good devs in here already I would recommend sticking around uh it's going to start at 2:30 and it's going to go till 5:30 there's going to be these 12 Flags in this nft contract that you'll mint uh we're going to give away $1,000 in eth to the winner $500 second place 250 to third something like that I think the prizes are here uh yeah there we go but we're also going to give out we have fully synced uh ethereum nodes we have this thing called the build Guild client where you can run a build Guild you can run an ethereum node with a single line and then we've been syncing nodes ourselves and we bring them these events so the winner will win a fully synced W and Lighthouse node not not a Staker like it doesn't have 32 eth sitting on it but it is a node that you can like run an indexer against or something like that uh also also uh if you uh are interested in running one of these nodes we're looking for more node Runners uh specifically in South America Africa and Southeast Asia we only have a few of them here and we're trying to get these numbers up so come come talk to me after if you might be interested in running one of those you might just get a free node that we send you we don't have that many but we have a few that we synced and we brought we'd love to get some some more participants but that's for the CTF that starts in a couple hours uh about an hour and 10 minutes but first let's speedrun the speedrun at speedrun speeds so the the first challenge that you'll take on with scaffold eth is just a simple nft contract you don't even have to write any code it's more about just getting your environment calibrated you'll clone down this repo you'll CD in you'll check out that first Branch I'm going to uh bring this up because I want to start looking at this stuff in git I want to have that up but it this one's super simple and it kind of goes through some of the um basic concepts that you get from scaffold eth for instance burner wallets uh you've probably heard me talking about burner wallets if you've been to any other session but they're really great for local development if you're building something locally and you need to make a bunch of transactions it's way easier if you have a local burner wallet and just every time you hit a button it just makes a transaction and you don't have to like have the popup and have the chain ID set with metamask and all that stuff so burner wallets are another one of our little secret superpowers built into scaffold eth and it has you you know go to the faucet load up your Bur burner wallet and then I think it has you even like send it around right in scaffold eth you can open up multiple windows and since that burner wallet has a private key in local storage you can open up uh an incognito window and it's like a whole new account so if you ever need like a bad guy to try to see if he can you know do something in the only only owner block of your code you just bring up a burner wallet fund it and then go try it and then you go to your good guy and have him run and make sure it it works for them works for the good guy fails for the bad guy right that's that's how burner wallets are really handy built into scaffold eth so I think what you do is you get in here you go to the faucet and you get some eth and then you go ahead and mint these silly little uh little animals and then it has you send them around so you'll create another account and you'll send one of the nfts to the other one and you you just kind of it's really nice it's like this it's it's like a Goosebumps moment when you like hit send and it disappears over here and then a little Buffalo pops up over on the other one it's a lot of fun then it'll you deploy it to I think sapoia or maybe even base sapoia optimism sepolia something like that Yep looks like sapoia there yep and I think there's even a second test net on this so you don't have to use sapoia I think we have a second I think it's Bas ofoia but I don't know yeah I don't know and there's some side quests here but that's the the first Challenge and then what you'll do is you'll hit submit challenge you'll put in your site so you're going to deploy a live site that lets people mint nfts on sepolia and you can run through this pretty quickly like a a good Builder could run through this first tutorial in like 20 minutes probably so if if you're a decent Builder you can probably dive in and actually like put an app out live with within an hour so you'll put the app URL there and then you'll put your smart contract URL there and we have an autog grader so the autog grader it it goes and it I think it downloads your contract and runs it or maybe it goes and talks to your contract on sepolia and makes sure everything works correctly so each one of these challenges are autog graded with like a testing system so you can kind of like level up as you go through each challenge not really a whole lot of aha moments here it's more like we're building up the the base knowledge right so let's go to the next challenge and that would be the oh no NOP go to go to challenge one and yesterday I went through and built uh this one fully uh during a video you could go look back at that one from yesterday I think was maybe called the same thing as this uh but yeah if you go to the Devcon schedule search Austin it's going to be like the second video there and I go through the the staking app uh but let's let's speedrun through it right now just kind of looking at it so I think this is probably the most uh this is the most important challenge uh not I I would say the decks is the most important challenge but this is the the real like heart of it this is the beginning of like figuring out what kinds of things you want to build on chain and and what kind of things like belong on chain and I think a real aha moment you know you're you are deploying these apps that live forever they have nation state level hardness credible neutrality but it really starts to make sense to me when I think of uh an adversarial group of players trying to coordinate they want to coordinate maybe uh in this case what we're going to do is we're going to get everyone to pitch in like 0.1 eth and if we get enough eth put together then we'll be able to go do this second action like go buy this thing or invest in something right and what you need to do is build the smart contract in a way that they can't grief each other they can't steal each other's money but if they do choose to coordinate they can coordinate and I think that's a really powerful mechanism and so uh you'll you'll write this Staker doou and you'll build a stake function and you'll allow people to stake money into your contract and you'll need to keep track of each person's balance because if they don't end up coordinating correctly then you'll have to refund everybody and you need to allow everybody to be able to withdraw from the smart contract so that's kind of like starting to syn in like what kinds of things you might be putting on chain this is kind of like a coordination mechanism with people that don't totally trust each other it's slightly Financial but doesn't have to be uh but you have to write all these rules and I think one of the first aha moments for me is that none of this is automatic it's when you think of blockchain or Dows and autonomous agents you just kind of think that there's like this magic thing that is handling a whole bunch of things in the background and it certainly is a magic technology but to make something happen on chain someone has to make the transaction happen it's it's not like the smart contract is working in the background and and and doing things right the smart contract does what it's supposed to do but someone's got to make a transaction against the smart contract to get the the the thing to work so in this uh particular build you're kind of building a state machine if we want to imagine a a a state of so there's this open Period right and there's at this point anyone can stake anyone in the world can stake in in this in this open Period and then at some threshold or I'm sorry at some uh time maybe timeout I don't know what do we call it here let me make sure deadline so at some deadline you need basically the contract to be ready to go into the next state so you sort of have the open staking period and then at the deadline you set up an execute function that checks to make sure that the deadline has passed and that no one else has run execute yet and then in that execute function we need to check and see did we get enough money in the contract so there's an open Period people are yoloing in money we have some threshold that we need to get to and some deadline of time that we need to hit and once that deadline of time is hit someone's got to poke the thing and if they hit the button or they make the transaction and there's enough money in the contract we move into kind of what we'll call the Happy State where the money actually gets invested wherever we wanted to go in this case there's just like an example contract and it moves the money into the example contract and calls a function on it but that contract could be anything you're kind of just imagining that that is something more advanced maybe you're buying an nft or something more fancy but so you're open State you hit the threshold or you hit the deadline you check to see if the money is above the threshold and if it is then you're in the Happy State you move that money into the contract and you trigger the next thing but if you didn't get enough money together then you need to kind of go into the maybe the sad State or the withdraw State you some people have already YOLO money in and you didn't get to the threshold so you need to basically you have this open for withdraw and the open for withdraw will is is kind of another mode and that means anybody who has put money in and now that we didn't get to the threshold and now it's withdraw time now they can get in and withdraw their money back basically and that's that's kind of how these apps work right they need to kind of think of it like a state machine you need to make it so uh we're not sending the money back to everybody they have to get in and withdraw it right because there's gas involved with that and we're not going to run that system so that's that's kind of the best the best like quick first build in ethereum like this this will be I guess if we call the nft app your first build this will be your second build and this build is really going to start Illuminating the kinds of things that you want to put on chain uh I think you end up putting it out on yeah sapoia and you basically deploy a staking app and uh you learn learn along the way so the next challenge is the token vendor this will be your third app and the token vendor uh really into erc20 tokens uh if you uh have ever minted an erc20 token you know that there's this transfer function but there's also this approv function and when you want to actually send a token into a smart contract you don't just send it and it does stuff you actually do this really weird thing where you go to the Token contract and you approve the smart contract to take the money and then you make a second transaction on the smart contract that says hey I've approved you to take my money please do so and do some other things and so it's a kind of a complicated thing to get your mind around at first but that's what you'll do here you'll build you'll deploy your own meme coin basically and then you'll make a a vending machine smart contract that lets people buy that token at some exchange rate you'll say maybe a 100 tokens per eth and then they get in and YOLO some eth and then you send them some tokens it sounds simple but it's actually pretty tricky if you think about the different transactions that have to happen there and how these different smart contracts are interacting with each other let me see I think the approved pattern is a big one here contract to contract interaction is a big one here just just this idea that like let me I think it says it right here like smart contracts are kind of like always on vending machines that anyone can access I think that's just like a really cool way to think about it it's like a vending machine in the sky that anybody can get to that's that's pretty cool and not even like nation states can censor it that's really powerful okay so uh those are your first three builds your fourth build is going to get a a little gamly it's going to be a dice game and so dice G the dice game really shows you how Randomness on a public deterministic blockchain is kind of tricky uh you can't really get Randomness in in the way that you might think of when you just go to like hey JavaScript give me a random number right you can't get that from the evm it doesn't do that uh but what you can do and this is not a good idea you can use the previous block hash so there's a lot of entropy in the block hash because it has to do with like proof of work Mining and now it's you know validating and different but it's it's basically a random string of hex characters and so you can use that previous block hash for a very SE insecure form of Randomness and there's really cool ways to do Randomness on chain with oracles and uh other ways that even like we have this really cool way where you submit a previous header and it uses the block difficulty which which is now randow so there are like very good ways to do Randomness uh this is not one of them this is a bad this is a bad way to do Randomness basically the way it works here is you're going to put in like 0.1 eth and it's going to roll the dice basically just looking back at the previous block hash and doing a mod of that you know like mod six and it's like a one die roll right but if you win you'll win like 6X back if you lose your money stays in the contract and you can play the app and you could probably load it up with some eth and it would play for a long time but this thing is attackable you can attack this by creating a second uh attack contract I think it's called rigged rooll is what we called it yeah you build a rigged contract and the way this works is the Smart contract knows about the other smart contract and knows how it's deciding it knows okay if we're on block eight we know that this guy's going to be looking at block seven and doing a mod six on it or something like that so you basically recreate that math in your rigged contract and then when you go to roll you basically only roll if it's a winner and so you can basically drain the dice contract with this rigged contract and and that'll be your uh third or fourth build that'll be your third build where are we at here that'll be your fourth build all right let me see if there's any other little aha moments in here that I want to talk about a really fun game though you get to roll this die like you got all these cool just scaffold EF makes it look cool and the build Guild team has done a really good job designing this making it look nice and making it flow really smoothly some side quests in there looks like you end up deploying IT contract verification looks good go do this at home you'll learn you'll learn a lot all right the fifth app and I think the most important uh and then I can hand it off here in a little bit is a DEX and aex is um a way to swap it's a decentralized exchange it's a way to swap between some token and eth or maybe token to token but the way this worked before was like an order book system if you wanted to swap with someone someone would sign a message that they they would be the maker and then there would they would be looking for a taker right and the maker would say something like I have five of these tokens and I would like one eth and I've signed a message and that goes into an order book and then someone else could take that submit that message and submit it on chain and send their tokens in and get the eth back right so you could swap but there's like this centralized order book there and that order book can get down go down that order book could get regulated there's a lot of reasons why the centralization sort of falls apart you have this really awesome decentralized blockchain and then you're you know running this centralized service on top of it so uh the Dex brings this all onchain it makes it uh fully decentralized and really the the the trick here is to have reserves of both loaded up in the contract so what you do is you'll put in a whole bunch of of tokens and a whole bunch of eth at the ratio of whatever those tokens are worth and then when people want to swap they'll swap much smaller amounts between the two and there's a really nice kind of like drawing in here you'll see the constant product stuff uh what this thing right here this thing right here so I'm going to put in token a and get back token B right and that curve is the price curve and with each trade the sort of dot moves up and down that curve and there's a really nice visual uh uh uh curve here it actually like plots this for you let me see if I can find it where is that thing yeah well here it is but it's not there oh wait is that a video no that would be cool uh you you'll see this curve and you'll see it move up and down and as you swap you know if I put in a whole bunch of tokens it's going to run down the line and if I put in a whole bunch of eth it's going to go up the curve and and the price is wherever that dot is and the amount of slippage is how far that kind of triangle comes out it's you kind of have to dink around with it but once you start dinking around with it and scaffold e it's like it it becomes pretty obvious how this works so your fifth app the most important app is this Dex and what you do is you build a smart contract and you have to write the code you have to figure out how to set up the Swap and how to make it uh figure out based on the reserves what the price is and uh you have to uh like really write the code and learn and you'll have to get in here and do this it takes the time it takes a little bit of time by the way this Dex doesn't have slippage protection don't deploy this uh on you know on Main net or something this is like a play play decks you need to build more things into it to make it secure to put uh online on chain but it's it's good enough for you to learn here yeah here's how you calculate the price right there's this constant product where you figure out the the token to eth mixture and then like there's the token to eth on the way in and then the token to eth on the way out and they have to basically be equal okay so uh you the there's the swap right you can go from token to eth or eth to token but there's also a couple more functions on your decks and they're around putting these reserves in you need to basically load it up with tokens and load it up with eth and when you do that you get minted another token that represents your claim on the reserves that you're storing in that contract and this is a really important concept because what's going to happen here is that the reserves are going to earn you money if you own eth in that contract you have that token that represents that money as people swap like 03 or something like that of that token gets left behind each time so actually if you look at a DEX with reserves in it if someone swaps back and forth a bunch of times the deck sort of slowly gains value it actually earns fees so for you as the liquidity provider you're earning fees and this is what's called expansive in in the term of hyper structures so I want to hit you up with this one uh go look up a hyper structure and spend some time uh reading this this paper because it's really inspiring and it helps uh kind of lean you toward building on chain and thinking about how you put things on chain and what kinds of things can be successful on chain uh it need to be unstoppable free valuable expansive that's what I was talking about about the LPS why would someone want to lock up all this money like the more reserves you have the better the swap is uh but what's my incentive for doing so right you have to incentivize folks uh it's permissionless it's positive sum it's credibly neutral check out check out a hyper structure so yes you will create the smart contract you'll be able to do eth to tokens tokens to eth you'll be able to put liquidity in you'll kind of like learn all these intricate details there there's the curve right there I knew it was here somewhere and uh you'll end up shipping this to a test net and you can just get in there and swap you can get in there and put liquidity in pull liquidity out it's really like a little sandbox Dex that's you know the the starter kit for building something like Unis swap okay so those are your first five apps you want to go speedrun these uh we are always in the telegram channels there's a telegram channel for each one we're in there answering questions so if you have questions we're there and we can um yeah yeah help you speedrun those if you have any questions I think the last few challenges let's just go look at those real quick just so I can highlight those uh you you get to join the build Guild once you complete the decks and that's basically we have like onboarding batches we do a small grants program we basically prepare you to go ship something in the space uh State Channel application looking at signatures looking at l2s looking at offchain interactions a multisig wallet would be having multiple signers that could all transact or you need maybe like two out of three signers to be able to make a transaction happen so this is really nice if you need like something more secure uh a lot of good developers in the room I've seen that if you're holding eth in large amounts you want to have it in a multisig right you don't want to have it in uh like an app or a hot wallet you want to have it in a smart contract that has rules based on you know if uh if if you want to move money out of this smart contract I'm going to need a signature from your phone and I'm going to need a signature from your laptop and I'm going to need like a signature from your Hardware wallet right you have to get all of those together or maybe two out of three of those together to make the transaction happen and that's just much safer it keeps the money safer locked up in the smart contract wallet in the multisig and then the last last one is a fun the little just like SVG nft we started out with that first nft and you'll get in here and you'll learn about ipfs and you'll realize that like the thing gets deployed to ipfs and the only thing that goes on chain ends up being the link to the ipfs so the thing that's on chain is more like a little Json file that tells you where the the stuff is you're not actually putting the image on chain so in this last challenge we actually have you make an nft where the actual SVG nft is Ren from the smart contract which is probably more nerdy than anything but it's just cool to do and it'll be a good lesson to learn so that was like a bonus basically your first five apps go up to the decks and the rest of these are kind of bonus uh challenges but I would recommend you take time to go through them when you have some free time at home or maybe just some free time uh around here but you'll have to sit down and focus and actually write code there there's a lot of moments where you have to think for yourself it'll say hey you need to do you need to you know make this thing happen but there's not going to be code that you can copy paste you'll have to write the code yourself it it gives you lots of help but in the moment of figuring it out like you have to figure it out yourself and that's it's it's going to help you learn like that's the way to learn this okay so that's speedrun ethereum uh I'm Austin Griffith we're the build Guild uh we are going to uh do the CTF after this but I think Eda is going to come up and um do some nfts next you going to do an nft app awesome okay and I don't want to close my laptop but I'm good to go when you guys are good yes thank you thank you I should have I should have done a question session but we'll do a question session after this we'll double the questions down okay is my microphone working okay perfect hey Jan how are you okay so hi guys now we're going to do some nftd apps which Austin talked about using scaffold e um and it's going to be a quick session so I have 30 minutes and 45 seconds um so what we're going to be doing is we're going to be using scaffold e and it's similar to the first challenge of the speedrun ethereum where you build an nft application uh and I'm just going to try to walk through each step on how we can do it how we can deploy the contract set up our new contracts and kind of showcase how it works uh so hopefully it will be a nice preparation for the capture the flag challenge this afternoon um and yes let's directly get started because we don't have a lot of time um so all I did and I want to show you what I did um now all I did was I went to scaffold and I just downloaded so then we can save on time and make sure there's no error um you're welcome to follow along if you have Lo laptops opened um and yeah I took MPX crate EAT latest and I created my own scap application I did nothing else all the other steps we'll be going through together okay so where's my terminal cool so I named it nft Workshop you can see over here I have the project let's kind of start our chain uh I also didn't deploy the contracts actually so like let's deploy what we have just to see what's going on in our app and then I'm going to do a yarn start and I kind of went fast but I basically have three terminals over here one running my local chain uh I chose Hound Foundry when I set up the sca lead application but you're welcome to choose hard hod if that's your preferred development environment um and then I deployed the first contract we have this is like a basic smart contract um it's a hello world smart contract we which we'll just look into very shortly and then I did a yarn start to start my application and let's open where I have too many browsers here so I'm going to do like this I'm going to open my Local Host here I actually want like an an in Cognito window Okay Okay cool so this is what you get with all the speedrun ethereum challenges you use the same toolkit so once you kind of go through the first one I think it makes you familiar so the rest will come more easier uh and what I have over here is this is like a sample front end to get started with and then debug contracts tab which makes it really easy which Austin was talking about as well um you know you can kind of have this is the initial contract which we just deployed it's a greeting contract you can see the details like the address the owner um all of like all the functions available are displayed here and what we're going to do is um I want to add a new contract to our application because you probably want to have more than one contracts so this is like a basic contract but what scaffold it makes you do is you can also have multiple contracts in your same app so this way you can kind of work through them like have them send each other messages or kind of link to each other and that's what I'm going to Showcase today it's going to be an Asic basic nft contract and we're also going to be building a small front end as much of as my front end skills allow now I I have it ready too so no worries I think it will work um okay so what I did and just to show you my app as well uh this is what we just downloaded I had it opened um and I'm I have The Foundry folder but if you choose choose hard hat when you do the wizard which starts your application you will see it as hard hat and um I will basically have over here my this is the your contract which we just saw and is this good enough shall I zoom it's good okay okay perfect so this is the your contract which comes as the basic you can see the details here and I'm going to add a new contract and I'm going to show you exactly how to do that and one other thing so I'm walk I'm talking about what I'm doing but the docs are pretty uh clear and show you all the step by step so um any questions you have about scaffold you can basically come to the docs what I basically just did before like well just now as well was to set it up using the CR latest and then it tells you all the details it tells you the details about the extensions as well so um you can definitely go like default to the docs if you have any questions they should definitely have your answer and I'll be going to the docs a lot during this presentation Okay cool so let's get started now as I said I want to have an new NFD contract and I'm going to go to Foundry because I chose Foundry and I'll basically be using the soulmate like I'm going to create an NFD with soulmates all I am I'm at The Foundry docs and they have like where is this exactly okay they have the tutorials here so I'm just going to like copy and follow the tutorial to add the nft contract and then that'll basically be my application too and I come over here so um because we're using Foundry I do need to install like soulmates and I think we have the open Zeppelin contracts but let's let's make sure to install like what it requires to create this NFD contract Okay cool so this is I'm back to my terminal let's just close this for a bit um I'm actually not sure I need to go to The Foundry folder to install the dependencies oh but yeah it doesn't allow so I'll just do like a no commit so this should be fine oh and I actually didn't mention that and I probably should have mentioned it before I started too but you can totally follow along what I'm doing in GitHub I have over here a rep repo to explain what we're going to be doing now so you can totally follow this along as well uh if you want to I think it's fine like we'll go to the steps but I'll provide this link but yeah Devcon 24/ CLS so it has the steps which I'm going to be running through today um okay so I'm installing the dependencies I need okay this was pretty fast and I'm going to go back here I'm going to do a yarn chain just so that we have this running um um all I did was I went and installed The Foundry dependencies um I'm just kind of following this tutorial over here and I want this contract so um this is like a basic nft smart contract it has like a a name a symbol and then the Minto and token URI functions here and all I'm doing is I'm going to take it and put it in my scap application so to do that now we have over here the your contract I'm going to create like a new uh file here let's call this nft contract okay um and I just copy pasted the code we directly took uh because we inst the dependencies we should be fine so now all I did was I added like a new Contra like a new NFD smart contract to our same application but this will not automatically deploy I also need to edit my deployment scripts because when you do a yarn deploy it only deploys your contract by default which is this one over here so whenever you add a new contract you need to update your deployment scripts or like let say you know like you change the your contract Constructor then you need to add that to the deployment script details so then it deploys all together and where did we add that okay I think it's scripts okay so this is the deploy deploy your contract this is the initial script which deploys the your contract smart contract I'm basically going to copy this and create the same one for my NFD smart contract uh command copy command V I'll call this uh Loy okay I didn't do anything I just copied it I'm going to change the your details to nft nft contract da da da deploy it's also so cold in here okay I think this is fine uh now this is actually not enough you also need to add it to the deploy script so I created like a new deployment script for my nft contract but I also needed to add it to this main deployer script and you can actually also add it here but this makes it just a bit easier so then you can like add change things without like messing the structure a lot um so this is like my new script which we just created from zero called NFD contract do like deploy NFD contract. s.o and I'm I'm going to add this to the main deployer so then it also actually deploys because by default when I run like yarn deploy it only like this is the folder which gets run and um thank you to devs who added the notes here um and I will copy this and I will do a deploy nft contract okay I think I need to also import this but my uh my copilot should actually have told me this but okay so for some reason co-pilot was slow but we got it so I think this should basically deploy our new nft contract and let's kind of see if that works and if not we'll figure it out but I think it should work so uh by the way like when you deploy you like you um you can gen like I generally do a yarn reset to make sure that nothing gets saved oh okay I remember so um I think there's an issue with The Foundry like the solidity version for from our nft contract this is like quite old so I think if I do this 20 this should work um this is an error of Visual Studio I don't know why this keeps giving me like import errors but I think this should work like it was it was 8.

10 but that's pretty outdated so I think this should now uh okay so this is fine I think this is like a or I can just call the other one nft I'll actually call this one uh so this was called nft but I think it should be called nftd contract I think this is better since we named our file NFD contract it's always hard to do online Dem but um I didn't edit the Constructor so our Constructor is probably empty so that's why it's giving an error um so okay oh no it's on not empty I need to give it a name and a symbol so because I just copy pasted I should have actually checked where my what the Constructor takes and in my deployment script I didn't add any of the constructors so over here all I need to do is I need to add my Constructors so I'll just call my my token whatever name and then I'll give it a symbol right is it name symbol or symbol name name and symbol symbol and the name will be like eda's I don't know if this creates like legal problems but Eda because my name is Eda um okay cool hopefully this should work now right let's make sure that we don't have any errors this is at Line This Is Here we give the arguments here I don't think there's any more issues to be honest do I have it wrong here okay one second I'm going to like just cheat over here I think we should add it here though Okay cool so I added my um Constructor arguments at the wrong place uh but basically the issue was I need to give my um when I run the contract because my Constructor takes two arguments the name and the symbol I was wasn't doing that correctly um so now we basically deployed like a new contract and let's look at it on our application which I think is the cool part so as I didn't edit any front end all we were doing was we added a new smart contract it was a bit stressful but we managed so we have like a new deployment script and we have a new smart contract and then over here it directly comes on our um on our front end so as you can see that now there's like two contracts the York contract and the nft contract and I kind of can play around with this without making any other changes um so this yeah I think this is pretty cool like when I was like first starting and I wanted to draw like multiple contracts I found it quite hard like you need to like manage the dependencies like all the new libraries and stuff like that but by this like you can just add like a new smart contract you don't need to like um you can of course like write the test and everything but it automatically appears on your front end before doing anything else and let's let's see how this works so um I I directly click this button but what this does is it g me gives me some funds from the faucets uh if I hadn't clicked it it would have given me like a gas error it would say like you have no money to pay for gas so um I directly clicked it but let me let me show you what happens if you don't click it too oh this one I'll go to like my browser over here it's burner wallets so it generates on new browsers so this one has like zero eth right now so I can go to the debug contracts tab I can go to nfts like let's say I want to like mint mint 2 and I give this my address let's give this this address and then the the Val like I don't want to give any money right now I send but it gives me gas error so that's why I had automatically click that uh burn like the the the faucet yeah grabs funds from the faucet button hopefully now it grabs funds um it's all from my anual local chain so we're just on Local Host right now cool so as you can see I minted an nft to this address and I can send it to like this um this address the green purple the orange one as well and this is kind of how it works and let's do this again on this person um I'm not going to say any send any money to it but you can perfect so it's pretty easy to like add a new contract and uh when you go through the challenges you'll either like modify the existent smart contracts or you'll you'll be adding like new smart contracts and this is kind of like how you can work with Foundry and add like new dependencies and then create your new contract and what I want to do is so we have this inter like this web page but let's say you built like an nft app like you don't want to show this web page to your users you want to have like something better um that's why we kind of have the the initial page to get you started as well so I have like 15 minutes and 6 seconds left so I'll try and like build a small front end where you can automatically mint nfts from that page instead of you know sending this page to your users and being like hey like go to debug contract subab and then mint from there okay time goes by much faster when you're in a rush I guess cool so yeah this the error is the dependency error I think like uh Visual Studio code or like my extension gives it an error but it's actually like we have the contracts in the lip folder I don't know why I had the problem earlier so what I'm going to do is now I'm done with Foundry folder we have our smart contracts everything's working if I want to add more I will add more actually we will be adding more because it doesn't have like it doesn't set a maximum Supply the default uh just like you don't set a maximum Supply in the nft contract so I kind of want to do that if we have time so what I'm going to do is I go to the nextjs the app and then I'm going to create a new folder here and I'll call it nft and then I'm just going to copy this page. TSX but this is and then I'm just going to paste it here or I'll just like remove everything from here what I'm doing is uh I want to create a new page which we can go to like localhost nft and this is kind of the the way nextjs arranged it and I just want to create that let's just call this uh NFD I think this should be fine okay so I I'll be editing all this but let's let's make sure that it works cool so uh what we did with we uh right now you only have the home and debug contract I create like a new folder in my um in my nextjs app and then it goes to like by default the nft extension because that was the name of my folder and I have a page. jsx there which displays this uh but I don't want to display this so let's just delete this and let's just show hello and let's actually like remove the secondary background cuz that's not nice cool so um okay so we kind of have an initial app we have like an initial web page now what I want to do is I want to pull the pull the nft contract information here so then it gives you a button to just like you know you see the nft you click it and you mint it and for that I'm going to go to Daisy UI uh scaffold uses Daisy UI so you don't need to like work a lot on your front ends like I I don't build many front ends so this makes it very easier to just like go and get the components and have them be displayed on your app um and I'm going to go over here to the components and you can directly use any one of this uh I'm going to use the card component the card is somewhere here oops I just take the card so this is what it gives me let me just copy paste this um you can use any components like it has different different like headers and you know bubbles countdowns stuff like that it makes it really easier like I highly suggest it if like it's if you have any other framework you use that's obviously fine but I'm just going to go and paste this here so this is the shoes card uh I'm going to go to the nft tab cool so all I did was I got let's open it here actually all I did was I went ahead and I got this shoes card component and what I wanted to do is I I don't want like a night advertisement but instead I want to have my nft details there and then it will show like nft and then this button will be mint now and then let's actually like Center that too okay so the image image we should change and then nft mint here this is not a funny joke and then you do a mint here uh I think I can do item [Music] Center okay I didn't manage this but okay for now this is fine let's just make it working and then we can like send like do all the other details also remove this night picture cuz it's kind of Okay cool so nft mint here and then the mint muton should be our nfts and what we want is we actually should see the NFD details right like what what's the token name what's the how many nfds are left Etc so I do really want to see that information uh and to do that I need to read from my smart contract so um I'm going to go over back here to scaffold DET talks to show kind of how you do that but scaffold Heath has built-in hooks so you can directly use the hooks which um kind of allow you to interact with your smart contracts um by the way I mentioned like it directly uses wag me and wag me hooks so it's kind of easier to use the scaffold hooks when you kind of work with it and daui details you can kind of find over here as well but I'm going to go over here uh this gives you a shortcut like in like recipes gives you a shortcut too but I'm just going to show the read contract hook so um I'm just going to copy this what this does is it allows like it directly provides a hook for me to read my smart contract data and then I'm going to add it here do dot dot and then I'm going to just change it it's going to tell me I need to import it let's just do that and then it's going to be my nft contract and then I let's I don't remember what we had on our nft contract but over here let's get the the current token ID let's just show that for now there is no arguments I think I can just delete this and then I do the token I also want to get my address let's let's show like the connected address and I I like everything is on the docks over here so it makes it very easier to like get your connected address as you can see we directly use use wagm like use account from wagm um but I also want to show the address when we go to the like when we go to our nft page and I'm going to do this address this is going to import from wag me and then let's let's add it here um let's add like a H1 I I probably need to wrap the token ID to a an integer or something like that but let's see oh okay I need to do it's a client side because I'm using client components on my nextjs app I do need that um okay so cool it shows me my connected address but uh instead of like showing it like that uh I want to use directly the scaff address component it just makes it look better like as you saw it was doesn't look really nice you don't you probably don't want to have this so um I think there's directly an address or account is this like Okay cool so I'm I'm going to delete this it will give me like a blocky and an avatar automatic ens resolution um this is just perfect so now okay so there's no ens resolution because we're on like um Local Host but as you can see it's kind of gives me just a better view over here with my connected address and then the token ID I think I need to like wrap this in like a second something an integer cool because uh it resolves like big numbers so the big number format doesn't match so you can't you need to like convert it to a like a a number format but Okay cool so basically we directly use a scav um address component we now have this here and we want to have like the mint button working cuz right now it does nothing uh but what we what we were able to do is we use like we added a new smart contract now we have like a new page which displays the details of that smart contract it's token ID here NFD mint here and then the mint M what it should do it should mint an NFD and then once it does like you'll automatically see the ID increase and I have five minutes left but that it should be okay um so I'm going to over here to the sca docs again I have too many tabs open and then interacting with your smart contract uh I came back here because we were using the read hook before now we need a write hook because basically we're going to make change like we're going to uh like mint a new token um so we need to like interact with our smart contract so a read is not enough at that point um and it's it's quite simple to like use the use scaffold right contract hook I'm going to directly copy like this is you need to Define this up here quite similar the way we did like the use scaffold read contract it's just going to be a use scaffold write contract we need to import this let's do that and then it's going to be like uh nft contract because this is the new contract which I'm working with um okay so I basically pulled in like a right hook and now I want my mint button and uh all I do is it gives you like an example usage over here so I'm going to Tech copy this and then we'll just edit it the mint button I think we can just okay I'm going to delete this mint button the function name is is it mint two the function is called mint two and it takes an address so I'm not going to forget to add the address the function name is mint two the args are going to be the address and we don't we don't need to pass any value but if you say you know like mint for one e you can add that probably want to add that to your front end too uh but all I'm going to do is I'm going to like for now like actually just pass in the connected address um I can just do like this this should be fine oh I don't need these maybe okay I think this should work so basically what we did is we pulled the right contra hook we added like a new button and the button is called well not set greeting but let's call this mint here and then uh I don't I don't want it at the end and then uh yeah this should work let's see so when you mint here basically it should increment the token ID because we minted a new token and then uh um you should be able to see that transaction completed so the token ID is now incremented because we were able to Mint an nft now of course you probably want to show like a receipt over here of how many nfts left but because I have only 2 minutes left what I'm going to do is I'm going to quickly modify a smart contract to have like a total Supply and display that on the web page I think we should have enough time for that uint all I'm doing is like a new uint like let's call this Max Supply let's say 10 10 is enough and then this should like have a new require okay so I edited my smart contract because by default it doesn't have a Max cap right now and I want only 10 nfts to be minted I also then want to display this on my front end too um so I'm going to do that but let's first redeploy our smart contract to make sure that or I think it's it's okay we didn't do much changes but now we have a Max Supply but I'll just redeploy because then it will give me an error when I try to add Max Supply is not there okay so I quickly edited my smart contract I now have a Max Supply and I want to display that detail on my uh front end so then you can kind of have like a counter which is a bit more fun um I'm going to use the read hook because it's just like a a value which we read so we don't need the right one and this is called Max Supply and then I'm going to call this Max Supply d and then what do we do over here the token ID instead of we don't need the token ID let's say Supply I'll like left nfts left well nfts left is Max Supply minus the ones we've minted so uh I'm going to do that minus um let me first display Max Supply and then we'll do the subtraction do we do the max Supply wrong but this is the max Supply oh thank you thank you I should have this right the max Supply yeah okay perfect 30 seconds left but this should work okay so now we have 10 and then we mint well the max Supply is still 10 but what we can do is we can quickly add like a minus I'm not sure I can do the operation here do I need to do like it here okay my eyes are not working now oh okay got it I'm finished okay okay it's working woo that yeah we can show that too I have I actually have 10 more seconds left you did it it was great you want to hang out up here oh yeah if you have any question next is a Q&A and you can shoot this QR code and send questions to the board but also like you can just Yeet them out and we'll hear you and answer the questions too also there's like 10 build gilders all over here with these things on you can just come talk to us and we can answer a lot of questions for instance if you're bringing up scaffold e and you have some like debugging error or something just bring it over here to these guys and they can help out but yes if you have any open questions there is a QR code also you'll notice that if you go through speedrun ethereum within each one of the challenges there's a telegram group and in that telegram group we're sitting there listening to you so if you have any questions we're there and we can help so questions maybe hands maybe you H shoot the QR very open here I think we'll do like 10 minutes of questions and then we will start the CTF we can have questions hearts hearts hearts uh any resources for python maximalist so that's going to be different you're probably going to want to use Viper which is a different language solidity is uh more like typescript right so if you are a python maximalist I would go look at Viper and at a spefic specifically look at Patrick Collins work he does a lot of Viper work and he's a really really good teacher and a really good devil so look up Patrick Collins and Viper if you are a python maximalist hi question yes sir where are you right here oh there we go um so you use Daisy UI on the front end how hard would it be to use something else like Shad Cen instead what would we lose some what would we lose and what would we get uh nothing you could just bring in that other it's sort of like we provide the scaffolding and it's kind of a pretty opinionated scaffolding but you can carve out our stuff and put in your stuff you can try different things it what what is can anybody over on the scaffold e team do you guys know anything about putting Shad CDN into scaffold eth has that been something we've talked about oh he's busy do you know shiv if we're thinking about putting Shad CD in into scaffold eth or how hard it would be to use Shad CDN bring yeah yeah like you could actually it's compatible so like you could install shat CN and start using it so yeah so it seems like a thing you might have to carve out some Daisy and put in some Shad but it seems like I mean both both Works directly yeah I think the one what you should do is make an extension yeah that if you make a scaffold eth extension that uses Shad CDN and then we can cross-promote it between the two of us that could be cool that was the next question because looks like some nerds are arriving for the CTF that is a good thing to see I love to see some nerds coming in with some backpacks think about doing some hacking hell yeah yeah so great question yeah there were already um components like the account display I would lose those I'd have to rewrite those myself with I think so uh no those aren't yeah you might have to rewrite those for Chad CDN yeah yeah darn it yeah cool but do that and make it open source and let us uh cross promote it with you so people who like Shad CDN could go use those so what would you do would you for it create a create a branch and then contribute it there's a really good video by Hunter I think he's here somewhere on how to build extensions I think the first thing I would do is I would just Fork scaffold eth and make it work and then I'd take the work that I put into that and uh put it into uh scaffold eth extension and there's a video that kind of takes you through how to make an extension and then you're kind of it stays state-of-the-art so you could use scaffold e plus whatever extension you've added and we can kind of cross promote it and show it off to people thank you cool thank you we got a hand here oh you got him go ahead y so uh we we have used hardit and fond right so is there any advantage or limitations between these two yes so the two are different uh they're great for you said hard hat and Foundry right just to make sure okay so uh hard hat is a little bit older uh it's a little bit slower it's more typescript tests but they're starting to carve things out and uh act more like Foundry Foundry is faster it's written in Rust and I think the key thing there is you're using solidity to write your tests whereas with Foundry you were using typescript to write your tests and so as a solidity developer writing those tests in Native solidity just makes a lot more sense and a lot it's a lot smoother however if you're an app developer you want that typescript because you want to copy and paste it into your front end so having uh hard hat is also kind of good for the the front end folks too so the the answer is found is the state-of-the-art best tool hard hat is a really good tool and before hard hat we had truffle and it was awful sorry to the Truffle guys it was fine it did what it needed to do uh but uh also hard hat is catching up they're starting to use revm which is the technology uh the chain underneath Foundry they're starting to rewrite some stuff in Rust uh I would say that their deployment process is a little smoother but uh I kind of just randomly pick them depending on like if I'm going to do a lot of like yarn Forks I'll usually use use uh Foundry but kind of sometimes I default back to hard hat just cuz I'm used to it but the difference is kind of this the the testing in solidity versus testing in typescript I think is the key thing and foundaries a little faster still got it got it thank you okay there's one over here somewhere there we go yeah uh what's up with the build gu gu ethereum node is it like a normal node or yeah so you can go to client. build Guild or client. Bittle gittle and what it is is it's a process that runs that spins up ref and lighthouse in the same node and then there's even like this opt in that you can do where you can opt into our distributed RPC Network and you start earning some credits that have no value it's just numbers in a database but you earn credits for serving RPC requests to our apps so we build a bunch of apps on chain and we use the bill Guild RPC and it's served by this sort of uh distributed set of nodes and we pay them back in credits but that's not a real thing yet and it doesn't have any Financial value right no no not ever not ever but uh it's just an easy way it's like a oneline command you can run a oneline command and it brings up a whole cool ethereum node but you'll need like a couple terabytes of space right 1.

two or two just straight up two okay and Spencer's theand to talk to about that he wrote that software good good question did that answer your question I think it did right how can I how can I run the notes uh you just go to client. build.com and copy paste that command into your terminal and it'll run okay wait is that a Windows machine though what is that Linux oh Mac it's a mac oh yeah just copy just there's like a oneline command copy the oneline command in your terminal and you'll have a node running the thing is it'll just take up a lot of space okay I have one more question how do you pronounce the name of the build Guild build I just say build Guild but definitely it is bidle gitt right it's misspelled on purpose and it's like the hotal meme right the hotal meme and then the bidd meme so yes it is B oh look at these nerds coming in for the cpf yes yes this is we're going to set this off this is going to be great we might need more chairs uh yeah I just say build Guild but it is spelled bidle giddle but I don't know uh oh do we have more questions here do you guys have scaffolds for other Frameworks like angular no it is just react we are I think someone made a spelt I think bite at a time made scaffold spelt if you go to build Guild like bid.com you can go to the app and you can look through all our builds and within those builds you could search for spelt but I don't think there's one for angular nerds yes why is there not enough what was that top one soccer oh sockets where are there no oh no do we like plugins back there is that what you're talking about yeah we didn't think we were going to have this many people I think well we'll we'll have to figure something out uh maybe some other people will clear out before the CTF starts please don't please stay please hack but if we need more Outlets we'll have to figure it out we'll uh maybe call the man or something but yeah there are not a lot of power outlets in here that might be tough not sure what we can do about that but we'll talk to them vuejs no uh it's it's all uh it's all react how hardcore of a Dev do you have to be to participate in the CF okay that's great we will answer that question in just a second but the tldr is uh even the worst Dev can figure out the first couple levels but even the best Dev in here is going to have a hard time with the last couple levels so it's you're going to have a very easy entry into the CTF but it's going to get very hard toward the end I think building a multi-user communication dap scaffold eth is easy maybe I mean that sounds complicated but maybe 35 seconds okay we got 30 seconds and then we're going to switch to the CTF which means I need to grab my laptop uh can you can you do the CTF without a laptop I think you're going to need a laptop yeah that might be a bit hard is this my machine okay okay got 10 seconds left you want to take that I got it any last questions come on in get ready for the CTF there's also a PO app collect the PO app if you are here collect it okay oh my God if we could bring up my screen here is good can oh that's not me and I think we're actually shutting off the live stream right I don't think we're live anymore or are we still live we're still live oh I hold it hold the mic or hold oh oh oh this is being weird okay oh hey here's my build Guild client right here see it running so it's sinking still but you can see dis activity network activity CPU load you can see uh the lighthouse [Music]