# BuidlGuidl - Intro to Ethereum Development, Build & Deploy your first dApp

- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2025-10-07
- Duration: 1:27:53
- Watch: https://streameth.org/watch/yt-Bs5XGxE7ZGc
- YouTube: https://www.youtube.com/watch?v=Bs5XGxE7ZGc

## Description

**Morning Workshop (10-11:45 am)**

Jump into Ethereum development with a hands-on introduction to Scaffold-ETH 2 and its powerful extension system! 

We'll show you how to set up your development environment and how to use state-of-the-art tools to deploy live apps that people can use, while introducing you to the essentials of blockchain development.

No prior experience needed—perfect for those eager to start building in Web3. Let’s get your first Ethereum dApp live!

## Transcript

[Music] uh build gild Dow and we are focused on developer education uh in particular we have this stack scaffold eth and this curriculum speedrun aum.com uh if you are interested in learning how to build on ethereum or you even have friends that are interested in building on ethereum tell them to go speedrun ethereum I see some familar faces that were at the last sessions uh it's a lot of the same similar content today we're just going to start with scaffold eth and build something simple and then I'm GNA hand it off to Kevin Jones and he's going to do a uh like an extensions build I think so we're going to kind of try to wrap two sessions into one here I'll do the intro to scaffold eth and then uh he'll do that extensions and I think maybe we'll even have like a little Q&A possibly in the middle of them too while he's getting ready so uh scaffold eth is our stack of choice and uh it's great for prototyping oh look at that we still got our nft up I got to close stuff out here holy cow sorry boop boop boop boop boop boop boop boop boop boop okay here we go so scaffold eth you can find it at scaffold E.O it's uh it's a prototyping tool but you can also push to production uh it's good for tinkering and and we'll get into it here so there's two ways to do it you can kind of Clone the repo and that's kind of the old way to do it and the new way to do it is with npx create eth and uh npx create eth is sort of like the step toward our extension system so we'll be using that uh mostly today and uh yeah I think just to level set real quick we probably I probably didn't introduce this very well uh we're g to have like a whole day here I think we're in this room like all day today till like 6:30 tonight or 5:30 or something like that so we're going to do introductory content right now I'm just going to quickly show you how to build and ship an app uh then Kevin will do the extensions then I think we'll take a lunch break and we'll come back and we'll build uh a few more things and then we're going to have a CTF later today so a capture the flag where you actually have to like hack some contracts and mint some Flags so it's it's going to be a lot of fun if you're more technical the afternoon will be better if you're just getting started uh the morning will be better I so sorry to all the people that I keep seeing at all these talks you guys keep coming to my talks and I keep doing the same builds like I need to like innovate a little bit here I try to do something a little different every time just to make it more interesting but thank you guys for coming out and supporting okay let's go let's get uh scaffold eth going here so uh we're going to run MPX create eth and it's going to be kind of like a little uh Choose Your Own Adventure here it's going to take us through let's see this is Devcon app I'm going to call it Devcon app 3 I think is where we're at right now and uh this is kind of like one of our more controversial things we kind of still have defaulted to hard hat it's taking us a while to like really get Foundry the way we want in scaffold e but you can choose between hard hat and Foundry and Foundry is almost going to be the default soon but uh it's up to you you can choose either one both are good uh Foundry you're going to spend more time writing uh your tests in solidity and so if you're building just like a super complicated protocol like Foundry is probably the option that you should take because you're going to need to write lots of tests um and those tests run in solidity if you choose hard hat it's a great option still uh I think the deployments are a little smoother and everything's in typescript so I think hard hat leans a little bit more toward like the app Builders uh and they're doing a good job at like speeding up too I think maybe one of the concerns was that Foundry was just a lot faster than hard hat and I think they're they're improving a lot of those things I just pick one randomly I think did hard hat for my Devcon app number one and I think I did Foundry for my Devcon app number two and I'm just randomly back to hard hat for Devcon app 3 but it doesn't matter whether you choose Foundry or hard hat it's still going to be the same commands we're going to do a yarn chain to bring up a chain yeah what's up which one did you say iscript uh that's F uh hard hat hard hat is all your tests will run in typescript so like when you build out a test Bank in typescript you know go query this amount make sure it's that amount write to the contract and make sure it wrote correctly you're going to be writing that in typescript and so that makes it really nice if you're going to also be building an app because you can get in and kind of copy that code right into your app so if you're an app builder sometimes writing those tests in typescript make sense but it seems like the gigar brains are moving toward solidity as a testing you know what I'm saying like I can tell that they're smarter than me and they know what they're doing but I don't know exactly why but they're they they're they're on to something so I think that like the The Foundry and testing with solidity is like the future and probably where we'll go uh but as an app builder I feel like I can relate uh with typescript and JavaScript more and like I said like when you can copy paste right into your app it's really nice okay so once everything is installed and shout out to the organizers this is cool like I've been to conferences before where I've done demos and the internet was not good enough to install this whole stack and we just installed the whole stack just now so shout out uh to Skylar and the team and the Devcon team nton okay and of course all of you guys that are doing all the work behind the scenes okay here we go we're going to spin up our local blockchain so like I said whether you're using hard hat or Foundry it's the same command with scaffold e we kind of abstract it away a little bit and just give you the commands that you need that command was yarn chain so I ran a yarn chain and that basically spins up my local blockchain and then I can do a yarn deploy and that's that's going to deploy a uh the kind of like the template smart contract that comes with scaffold eth and then we're going to do a yarn start in another terminal here so it's kind of like launching a rocket you got a few you got a few uh a few things here it feels it feels overly complicated but once you figure out that this is kind of like mixing two packages together and you sort of have this back end that is the the uh blockchain and then you have the front end which is like your next JS it starts to make sense how this works and scaffold eth uh particularly does a good job with taking your artifacts from your smart contract and injecting them into your front end and I'll show that when we start writing the front end it's really nice because it starts to give you hints and it knows everything about your contract already Okay so let's get into the code I'm going to use cursor or code whatever if you guys use code you just do code dot right but I like cursor even if I'm not using the AI feature I just use it as my IDE most of the time but it's really nice because it has this tab over here where you can pull it out and be like yo build some buttons and GPT or claw will just like inline write the code for you so definitely if you haven't checked out cursor go go grab it it's a great uh code ID okay so if we look at our packages we have hard hat and then we have nextjs like I said that's kind of like your back end and your front end and if we get into hard hat we can find the contracts scaffold e starts with this kind of generic contract that has a little bit of everything just to get you started a lot of times you might just like carve it out right that's why we called it scaffold e you kind of need the scaffolding but then as you get the thing built that you want you can kind of tear down some of the scaffolding oh I think my little mic is going weird okay here we go so uh let's get into this contract and look at it and let's just Tinker around I think one of the first things to show off with scaffold eth is just this this kind of Dev Loop you'll get into and let's let's look at that okay so we've got some let's look at this smart contract is that big enough you guys can see that okay yeah yeah okay so uh you've kind of got your primitive data types whether you're tracking addresses or strings or bools or numbers uh there's mappings between these primitive data types like for any given address you can keep track of a number like a balance or something uh events The Constructor even a modifier here which is a little goofy you you can kind of get the syntax uh I would recommend solidity by example if you uh are feeling like you need a little bit more uh help figuring out the syntax and just getting a little bit better at just writing your your first you know few smart contracts definitely check out solidity by example and just like go through each of these examples and just copy paste them into scaffold eth and and they're they're really great examples to learn from like for instance like if we were going to go learn what a mapping is all about we could get over here and we could copy this mapping and we could paste it into our smart contract and then go dinker around with it right that's that's kind of like a good Loop to get into let me specifically get to this contract and Dink around with it but I just wanted to show off solidity by example as kind of a tangent here whenever you're writing your smart contract if you're writing it yourself and not just prompting AI you probably want to like go to solidity by example and find some of these uh kind of nice copy paste examples but I'm going to close that out we're we're going to go for memory here okay so uh I want to look at this set greeting function it looks like we pass it in some greeting a classic you know greeting contract this guy's kind of waving around am I okay here there we go uh classic greeter contract we're going to set some string uh but this is the the neat little code block that I want to test basically it's if you send money in when you set the greeting it sets its little premium flag to true and I think that's going to be what what we'll do here in a second okay so once we have our backend up and we have our front end up let's go visit our app here it is so scaffold e kind of comes with you're going to write some solidity and then you're going to have this debug tab here let me make this a little wider there we go see that debug tab there we go this debug Tab and this is going to give you this really nice interface where you can kind of just point-and-click try things out you can poke at your contract you can test your assumptions so let's go look at that greeting contract let's go set the greeting right and that's going to teach us about burner wallets and eth to way couple of the initial Concepts uh let's let's just try to set it it's going to yell at us so if I say hello world and I hit send it's going to say something like you don't have any money and so right up here there's a nice little uh when you're on Local Host it recognizes you're on Local Host and it gives you a nice little faucet button but as soon as you push this thing to a live Network that faucet will disappear so I'm just going to click that and that should give me some eth right now we've got some some money to work with now the second thing I want to bring up is burner wallets uh you'll notice there's a wallet here and I could my metamask if I wanted but when we're doing local development when we're doing uh quick Dev I want to be able to just like hit a button and send this transaction I want to just be able to click it and have it go right did you see that like that was a transaction there's a transaction that's a transaction that's a transaction you get a transaction you get a transaction so it's just faster and it's a lot easier to kind of test what you're doing to not have metamask popping up and uh switching the chain ID and a bunch of other things that you'll run into but this thing's all ready to go so by the time we push this thing to a public network we'll be able to bring metamask in and we'll be able to hide those burner wallets but for now it works really good for Dev and let me just triple down on the burner wallet thing real quick if I open up an incognito window and I go to Local Host see I get this account this sort of one a55 let me do that again Local Host and it's a new account right because it's in uh Incognito and it's keeping the private key at local storage you're getting a new one each time you bring up that incognito window which which is super nice for testing and and I'll show you that in a little bit but basically you could say you have this function that you only want the owner to be able to call with this uh with these burner wallets you can kind of bring up the good guy burner wallet bring up the bad guy burner wallet make sure the good guy can do the thing make sure the bad guy can't do the thing it's not like an exhaustive test but it's a great way to quickly test your assumptions okay here we go let's go hello world hello world 3 that's what I'm oh whoops hello world three send it okay so I want to get this premium flag see over here these are all the like uh read it's reading from our contract all these different values and there's this premium flag here that's still false so what I want to do is send in some money right the contract is still empty it doesn't have any money what we're going to do is we're going to send in 0.001 and here's the next weird thing about building on blockchain is this whole idea of eth verse way and again solidity by example has a really good ether verse way explainer here and uh when you put a one so when I'm in a smart contract and I put uh you know a one right here that is one way right and so if I wanted to send one E I need to send one times oh get out of here 1 time time 10 to the power of 18 right that is 1 e and the reason is the evm is a super simple little computer computer it doesn't want to mess around with floating Point math so you don't do decimals in solidity you have to basically do whole numbers so sometimes when you need to do something like uh take a thing and add 5% to it you can't just like multiply 1.05 you have to like do some like numerator denominator stuff uh but the the thing is is right here we have this little button and it does that for you now only would a developer need this like once you start building your front end you need to do the eth toway conversions all in the background and the user should not know about it you should just be like I want to spend 01 eth go and it goes right or even better uh the USD value of that 0.01 eth and then maybe the 0.01 eth underneath it or something like that but if I if I try to send this right now with a 0.01 it's going to give me like a big int error it just doesn't like that right developers need to remember and this is why we put it into scaffold eth you have to hit this button and you have to take it times 10 18 and then you hit send and there we go we made a transaction and what I wanted to show off was if we send in money it should set this premium flag to true and it did it's true now right and if we zero that out and send it again does it does it zero I don't even know but we can test our assumptions we can just try it and see what it does yep so now premium goes back to false okay so let's write a quick little smart contract app and specifically I want to show you the sort of like core game Loop that you'll get into with scaffold eth and that's basically uh let's get out of here you'll add some thing right like what do we want to build do we want to build uh let's do I like the the idea of the beneficiary that one I I I've got this like prediction like simple prediction Market that I want to build but I haven't like fully thought it out and I don't think I should just figure it out on stage so I think what I want to do is do like a beneficiary and set it up so the beneficiary receives some money and we have like a little front end where we can update the beneficiary just set something in a smart contract and that whoever that beneficiary is will will make the money okay so we're going to have a public address Ben oh look at that thank you beneficiary okay and it's set to the zero address right now if I were to deploy deploy this it's going to be the zero app that is the beneficiary but we do have a beneficiary now but it's the zero address right so let's start that off with I think I'm going to do uh let's go to address Vision atg doeth I want to make this guy the beneficiary yeah that dude right there okay and then I'm going to paste that into the contract right here there we go okay so now we have this beneficiary and we're going to need probably some function that lets us set the beneficiary and let's make that um we have this owner I don't know we're just going to make this public so this is another thing I do sometimes when I do these demos is I make a very insecure app and deploy it to production and I think I'm probably going to do that here basically I'm going to let anyone set the beneficiary and then I could I could delete all this stuff probably but I'm mostly going to leave it but there's this withdraw function here and in this withdraw function only the owner can withdraw the funds and I don't want to do only owner actually I want to kind of get rid of this idea of the owner and I want to require beneficiary there we go man co-pilot is on point all right so and then I want the beneficiary to get the money okay and let's go test it out right like I just made some changes to the code and like this is a smart contract that's going to be moving money around and I want to be a little bit more confident that I did the right thing there so that's what this like core Loop is about is like testing those assumptions I've said that so many times I need to come up with a new phrase uh but let's go set or let's go set the beneficiary to now watch this uh scaffold eth has these components out of the box like this address input field which are really nice because they do ens uh resolution ens avatars you got the blocky you have the address but let's see what happens there okay I was able to set vitalic as the beneficiary and I think I can set anyone of you right I can do send now someone should be able to hit withdraw and pull the money out right so let's say a bunch of people came in here and said hello world and they paid 01 and they hit the button and they send it right and now the smart contract actually has money in it right there's $32 sitting in that smart contract now and we just want the beneficiary to be able to get in here and hit withdraw and we want to make sure that money disappears and shows up over here I didn't watch very closely but I'm going to assume uh no let's not assume let's figure it out let's let's let's prove it real quick uh let's set another greeting send some more money in so we're at 988 I'm G to re reload that all right 9882 now if I withdraw I'm watching here what like that decimal right there right we got to make sure that yeah 99 okay good so this is not an exhaustive test right you want to build a whole test Bank to make sure uh this thing does what it needs to do and there aren't any weird edge cases where you're going to lose money or get money locked up but in terms of our little smart contract I now am able to like keep track of some beneficiary and anyone in the world could set that beneficiary and when they come in only the beneficiary is able to withdraw the money and it goes to them it's a simple little app uh you you guys are the solidity developers you'll spend more time building things uh I'm going to build a silly little example but this you're deploying an an always is on app that will last forever possibly longer than you and it's uh you know nation state level hardness so don't get thrown off by my silly little examples like there's there's world changing Tech here and uh sorry for my simple examples but we're just going to build like this little beneficiary system okay so it's sort of working it does what we needed to do I can set the beneficiary uh there's some other functions here that I'm just going to leave the Ben can do the withdraw what I want to do now is go start working on the front end so just to recap the the beginning of this is about tinkering with your smart contract and putting in some some solidity here and then testing it out over here in scaffold eth uh in this front end in the de debug contracts Tab and you'll do that for a lot longer than I did I'm kind of like time boxed here to a short window uh but you'll uh you'll get in this mode of tinkering with solidity and getting things right here and that will take longer of course but once you've got it and let's just pretend I do let's pretend that I have built my whole app I've tested it it works great it's very secure I'm about to put it on a blockchain forever uh and it's awesome I'm gonna actually take this import out too I hate deploying that on chain and paying for it let me take that out here there's there's some nice console log debugging you can do with with hard hat and and that'll spit out over here whenever there's a console log in your code you'll see it over here in your blockchain and really nice for debugging especially when you're like why isn't this decimal working I thought I thought I could do that yeah okay I just wanted to take that out and redeploy let's see if everything's happy here okay we're happy so you'll spend more time on your smart contract I just did a quick smart contract let's pretend that it's all good to go now we're thinking about our front end what do we want we have this beneficiary and we can set the beneficiary and we can withdraw I think I want some kind of front end that lets me put in an address and set the beneficiary and then another address and then another button underneath that that lets me like withdraw the money or something like that so we're going to read and write from the chain in our in our front end and let's go let's go start working on that so this is kind of phase two you're starting to your contract is pretty solid you may come back to your contract and add some events in maybe add some read functions but generally the functionality is working you're good to go uh so most of the time now we're going to be over here in react land and normally I would definitely just prompt GPT I would not be writing this code uh but I feel like that's kind of like lazy like I don't think it's I I it feels weird to be prompting GPT in front of 30 40 50 people and be like bro please full full files only like I feel like that uh that is a weird experience to do in front of a bunch of people so it still makes sense to for me to maybe just like Live code this thing rather than uh ask GPT but if I was at home and it was just me I would be uh yelling at the GPT to get it to work and not actually writing my components myself but we're going to write them oursel and we're not actually going to write them oursel I'm going to go to the docs and I'm going to copy paste so scaffold eth we go to the docs there's this tab over here called interacting with your contract and there's external contracts too but interacting with your contracts is kind of the first thing and here it is there's here's how you read from your contract and here's how you write to your contract and this is using wag me so you could always use wag me from VM and look at their docs and go learn some things uh We've wrapped it slightly because scaffold eth handles some wallet stuff and other things so it's it's using the use read contract from wag me but we called our own function use scaffold read we just it takes a couple less arguments and we fill those things in for you it's a simple piece of exraction but we we think it's the right right move okay so what we want to do is read from our contract we have this smart contract that's keeping track of this beneficiary and I want to display the beneficiary on my page okay and so far all we have is the connected address oh shoot I got to go show the page so we've all we've been on debug contracts the whole time but if I hit home here this is going to take me back to the page and I've cleaned out all the stuff that was here so now it's just down to this and let's see what's uh welcome to this is going to be called uh I don't know Devcon Devcon app 3 con app 3 uh the Benny beneficiary beneficiary oh man I didn't spell it right come on help me a r y did I get it oh there we go thank you okay and now that should change over here there we go okay and it's showing us our connected address uh has that little blocky and everything but now what we want to do is read who the beneficiary is from the smart contract and I've got that piece of code copied already so I'm going to bring it in right here and paste okay so this is where I was talking about it's really nice because scaffold eth knows about your contracts so as soon as I hit uh one of these buttons here uh let's see I think I just open the quotes maybe it's going to start H it's not which button is it h it should autocomplete to whatever the value is in the contract something is not right let's see oh we need to import it here we go let's try that is that what's happening basically when I open this quote it should give me there we go that's what I want so this little list is the stuff from my smart contract so as I'm banging away on that solidity and I write out my smart contract it knows about all that stuff and it can set it here so instead of going to the smart contract and being like what's that variable I want to read I'm kind of in line just like oh I'm going to your contract and then I want the beneficiary and I don't think there's any arguments and let's hit save and then uh we want to name it beneficiary okay and it's yellow because we're not using it yet but let's go down here and put a div o what what was that I like that yeah okay but I don't want to use the address component it yet I want to show it off raw first and then it will help us understand what we want to do next okay so now we should be reading from our smart contract whoever that address is that is the beneficiary and we should be displaying it right down here let's go look and see how that looks oo looks good right almost it it's working it's displaying the beneficiary but this is kind of a gross it's kind of like a full address a full hex address kind of ugly looking what you'd like to do is do NS resolution and a lot of things like that so what you do is instead of just doing beneficiary like this you wrap it in an address component and this address component comes out of the box with scaffold e there's an address and an address input and a few others and I can show you in the docs where to find those if you go to components here there's all those uh handy components and uh to extend that we have an extension system that uses a lot of other components like the like onchain kit from Bas so if if you wanted like a swap component you could use the extension system to bring in the onchain kit and just add that in too so we have like lowlevel components and then the extension system will have like some nicer level components and uh Kevin Jones will show that off here in a little bit when I get done speedrunning this okay so how is our front end looking let's go we have oh doesn't that look so much nicer let's let's do that again so whoops so this this is like at the eye doctor you know number one or number two number one number two doesn't that just look gross and then when we do just this quick change and we hit save and this looks so much nicer I love it okay so we are we're displaying who the beneficiary is and we know who the connected address is and then okay now we need to uh let's see we want to write to the chain and I think maybe we could H maybe let's just make uh withdraw button first I think that's the move that's the move so let's go back to scaffold e docs so now we want to write to our contract we're able to read from our contract but now we want to write to our contract so what you do is you set up this like async contract writer and that goes in with your hooks there okay and that's going to talk to our contract it's already named your contract o we need to install it okay and then write your contract async Okay so we've got this object now that we can write to so then here is a button I'm going to copy that button exactly and I'm just going to use it and let's go down here maybe set up like some divs uh let's do a div first there we go then the button then hit save okay so what is this doing it's writing to the contract and it's calling set greeting so we don't want to do the greeting though what do we want to do we want to call what I don't even know what set beneficiary set greeting withdraw I think we want with draw let's go with with draw okay and then there's no arguments or value I think I can Trash both of those and let's see call this withdraw and hit save and let's see if we have a button in our app now who get out of here yeah cool now we have a withdraw button man my front ends are so ugly scaffold e does as good as it can to like make this look nice but I just tear it up and it looks terrible okay uh can I hit withdraw here it can't because I'm not the beneficiary right because Austin Griffith is the beneficiary I need to set this dude as the beneficiary and we'll make some front end to do this but let's just go do it in the debug tab real quick just to test that this withdraw function Works yep it does Okay cool so now we're reading and writing from our block from our smart contract right we kind of tinkered around with our smart contract in phase one and we kind of built the app that we wanted to build in terms of the solidity like I said you might come back and add some events but you're pretty much done there then we kind of move over in the front end land and we start tinkering with how we want our front end to look we've read the beneficiary from the smart contract we've used wagm to tell us who the connected address is and then we've written to the the chain with this nice withdraw button here so the last thing I want to add here is a little address input field that lets you put in a new beneficiary and save them and I think let's see how am I going to do this maybe down here let's just make another div down here it's kind of weird uh let's see I will want no I want an address I'm just going to go copy paste it from the docs just go copy paste it here we go normally I would uh prompt the AI with like examples and just have it write it all for me but let's do it this way I want address input okay so I want to grab this okay it looks like there's a state oh yeah yep I want all that I want that right there so you have some kind of state over here Boop and then you have your address input right here on change it'll set the address okay let's see how this looks do I need to install this yes I think I do let's see how we're looking let's see what our app looks like now now uh oh uh oh U State we've got US state is not defined we need to go to that U state from react and make sure we import that oh open Apple period there we go react bring it in let's go let's go all right how's our app looking now o there we go okay there's a semicolon floating around there I don't know what that is I'll go get it in a second but now you should be able to type in vitalic doe and you should get that ens preview you should get boy I need some padding this this this app looks terrible uh how do I do that maybe some like class name yeah oh we might even Center the div what does that do oh wow yeah okay let's get rid of that weird uh semicolon too I don't know where that's coming from uh right here we don't need that okay and I kind of like this class right here I'm going to bring that and I'm going to give that to all these other divs just so this thing starts looking a little bit better one for you one for oh maybe oh oh oh maybe we do let's do a div here and do that class name yeah and then close the div here oh I think it tried to close it for me the AI can just write code better than I can I just I shouldn't be doing this there we go doesn't that look nice H we need a little padding but I'm gonna I'm going to go with it boy this is a really ugly frontend okay so we have the withdraw that's working uh we have the address input that's working it's tracked in state I think what we need to do is one more WR function where we uh set the beneficiary so we're going to need one more write function I'm just going to copy paste uh actually that's all good I can just use that right async so let's go get another button from the docs oh here I have it right here I'll just copy this button here right this dude okay H I'll take the whole div okay and we're going to put another button underneath this and this is going to set the beneficiary and then for the function we need set beneficiary and there we go it wants to give us some args that's what we want is a dress the thing that we're keeping in the state it is okay I think think we might be happy let's see what we have here okay well it looks ugly but let's see can we set vitalic as the beneficiary boy a little padding would go a long ways there yeah it worked right now vitalic is the beneficiary all right let's try that again at. set him as the beneficiary there it is okay so it's working all right uh and then if you are the beneficiary like this dude is then once that updates to that you should be able to hit withdraw and that should work uh but if you're not let's go back and do atg e again set him now if I hit withdraw it should fail right because I'm using the burner wallet yep not the beneficiary okay cool um just want a little padding here it's just driving me nuts let's see p yeah there we go there and there how's that look yeah it's a little better it's still ugly okay and and another thing we might do is only display the withdraw button if the uh connected address is the beneficiary like we should probably only show this withdraw button if these two are the same address and here's a great chance to just prompt the GPT to do this but we could say something like uh please only show the withdraw button if uh let's see what do we have if beneficiary is equal to Connected address right there we go let's go yeah thank you and then it's just going to give us the code and we apply that and save and let's go see now let's test it out out okay so it looks like that withdraw button is gone now that's okay but if we set us to the beneficiary does the withdraw button come back that's what we want to test yes it does all right GPT you got on the first try thanks bro all right awesome so this is kind of we're we're nearing the end of phase two basically we've in phase one we worked on our smart contract we tinkered with it we went back and forth we got our solidity right in phase two we did a lot more react kind of getting our buttons things wired up we're reading and writing from our smart contract phase three is now deploying we want to put this thing out into the world and to do that we'll have to deploy both the smart contract and the front end so to do that we're going to need to yarn generate and yarn generate will create a deployer account so you don't you want to be very careful with these deployer accounts you really don't want to be like copy pasting private keys they really should be like living encrypted on your box uh so so when we generate this account this is like a one-time use account basically like I'm only this this account should only ever have enough money in it for me to deploy this contract once or twice so there's my uh address then I'm going do yarn account to show it okay there we go and now I'm going to send some money in there and we're going to put this thing on a live blockchain let's go okay let's see I'm going to use a Punk wallet uh app built with uh scaffold eth Let's see we had it on optimism yesterday base let's see if I have any base in here I think I'm going to deploy this to base okay so I just select base I scan my QR code and I'm going to throw uh dollar at it right it should be enough shouldn't be too expensive oh time to retweet shutter block I got you yeah let's go re retweet on stage okay so hopefully I just sent some money here actually yeah I did okay let's do yarn account and it'll even like give us our balances on the different accounts in his base in there somewhere Local Host arbitrum let's just see we're hoping I have some base in somewhere ah there's only oh there it is yep we got that we have 03 E Okay so we've created a uh one-time use deployer account we've put a dollar in it and now I'm going to do a yarn deploy just like I was before but instead of yarn deploying locally I'm now going to do the Das Das Network and I'm going to go with base this time now hopefully this works but let's see what if it complains about anything we may just put a smart contract out on a live Network that's looking pretty pretty good y'all Okay cool so our app though still says hard hat up here we need to get in and change our app over to base and what that means is the whole app is going to change network so right now if I click on this dude's address it's going to take me to a local block Explorer which is cool and nice for local debugging but this is also really awesome as soon as I set this thing to Bass then all of my address components all throughout the app will now link to the Bas scan block Explorer let's do that real quick so I'm going to hit open Apple p and find the scaffold config and from the scaffold config I'm going to change it right here and you can even do like a comma separated list here you can have multiple networks like you could deploy your smart contract to optimism and bass and let your users pick which one they want to use even it's pretty nice uh but we're just going to go with base now watch this as soon as I hit save here the whole app now switches over to base and it doesn't let me use burner wallets anymore and that uh faucet is gone right by just setting that one thing from Local Host to base your app now knows that it's like oh we're you know it's it's time to sit at the big kids table we're going to go use like our real wallets and real money here and let's do that okay yes there we go okay so we are now talking to our live contract on base but we're still at Local Host so a second step that we'll get to in just a second will be to deploy that the app live to versell uh but first let's just Tinker around and make sure everything's working uh on chain correctly uh so let's see can we set vitalic to the V beneficiary real quick just to prove that we can and I'm actually going to pay real money to do this right I'm going to pay like you know a fraction of a penny no no more more like 32 cents dang there we go but and now hopefully vitalic will become the beneficiary I'm going to hit reload I'm impatient there we go cool and it's working okay and our withdraw button disappears too looks pretty good okay so then let's I I don't know let's set me back to the beneficiary and then maybe let's put some money in the contract and then withdraw from it make sure everything's pretty solid and then we'll ship our app you know what actually I'm going to start shipping the app now because it takes some time so uh kind of the commands if if we go through the whole stack of commands here we did yarn install yarn chain yarn start uh to get your account we do yarn generate and then yarn account uh and here we're going to do yarn this is the best command out of all of them versel YOLO Das dasr like please do not check anything just ship it and that's what we're going to go with here yes got to do the Choose Your Own Adventure here of like picking the scope and the account and all that o it's very slow no no Devcon 3 okay so that will take a couple of minutes to ship but now that it's shipping it's nice because we can go back can Tinker around with these these few mechanics that we were worried about here so can I set me back to the beneficiary take basically take control back uh of the contract and then uh let's maybe even send some money into it right let's do a greeting that says hello Devcon we nope I'm gonna do hearts hearts hearts classic hello Devcon hearts hearts hearts and I'm going to send in some money and technically this money could be stolen like anybody out there could go to the smart contract set themselves at the beneficiary and hit withdraw I don't think they'll do that but maybe they will let's find out what happens okay yeah $3 to be had if you want to steal it you'd have to go find the thing out on Bas scan or something like that right like if we go look at the contract here it's probably not even verified yet but remember that contract component all I have to do is click here and it takes me right to the Bas scan right the correct block Explorer for whatever chain you're on and here is the Smart contract but it is not verified yet yep okay so I would need to verify the contract before anybody is probably going to attack it I don't think anybody is going to figure out how to attack it right now except for maybe you guys out here which kind of have the alpha on it so please come steal it like I I would happily uh lose my $3 to anyone in here who wants to steal it because that means you guys are way ahead of the game and really paying attention uh let's go here uh Devcon hearts hearts hearts we got in here NOP I need to say hit send here wait didn't I hit send there why isn't there any money in here let's reload this real quick okay maybe I didn't hit send I wasn't paying attention let's try one more time Devcon no it's right there it's right there hearts hearts hearts premium is true oh man what if someone already stole the money like it's not in the contract what yeah someone did look at that look at this address this is not my address this is someone else's address someone got in and got it right away wow that's really impressive that's neat okay well someone stole my $3 all right all right that's that's pretty awesome to be honest like I uh that's really cool so that's like probably like a a bot that's like watching for contracts to get deployed and looking at the bite code and man that's really cool ah I know I don't even that's so cool like I don't even I'm like thinking about how like we could we could definitely defend this right we could set up a require statement here that says only you know certain people could set the beneficiary there is this idea of this owner and we could say the owner is the only one that can set the beneficiary let's just do that let's just do that all right so we learned a lesson here about the Dark Forest okay you know what I don't care no we're shipping it this is this is more fun like this let's just leave it how it is the app is going everything is good uh kudos to whoever is running that bot and taking my $3 I'm probably going to send them a couple more bucks here for a little bit but check this out so now our app is live and you can go to versell and set up a domain on this thing so within 30 minutes you can kind of roughly crank out a smart contract get a front end going and then deploy the thing not just to base but also to verel and there is a live URL so yeah within 30 minutes we kind of built this whole app and I'm going to go donate another $3 to this uh attacker just cuz uh I don't know that's that's pretty cool let's see what are they doing let's go look at this address real quick I'm going well look at all those zeros oh this is definitely a some nerd they have how many is that that is impressive yeah it's like an me bot that has a bunch of leading zeros that is so cool oh it's a contract we can even go dink around with it oh maybe not okay anyways uh let's let's set the beneficiary back to hg. eth and let's see if it like front runs me or what it does that is so cool uh oh here I have to I don't know why I have to keep keep hitting this I don't know if I need to like hard code the gas limit or something metamask is just not happy with me with gas okay and now hopefully I am the beneficiary and it shouldn't it shouldn't steal it now right like there's no Financial incentive for them to set themselves as a beneficiary right now what they want to do is wait until there's money in the contract and then almost like in a batch transaction set themselves at the as the beneficiary and sweep the money all in one transaction automically and basically like you only do that if you wo Portman you only do that if you uh like can make the money right so the me bot is probably sitting there like we're going to do all of these transactions and we're only going to execute them if it works works and we make money and if anything else goes wrong or we don't make any money don't do it right so as soon as I put money in here it's going to disappear again which is pretty cool but not great but pretty pretty neat uh let's see what man really I feel like we could if a bot is that sophisticated I might like start making this as part of my like curriculum where actually you like know that a bot is going to handle something for you and you can have them like be like rolling the dice for you and some game or something like that I'm going to think about that okay here we go uh oh please take my money Mr all it could be Mrs too yeah right right I'm G say miss m all zeros all right right right it needs to be right right so it's costing about 30 cents to set the beneficiary right so then another transaction maybe 60 cents like it's got to be yeah within like a dollar or something we did 0.00001 last time I think and that was enough maybe we do 05 just to see let's see what this does it would be really funny to like calculate it just right and see like at what point the bot takes over but yeah here I go I'm gonna donate another couple bucks to this bot probably okay let's see there's the transaction and does the money stay in the contract or not let's see I'm assuming it will be immediately swept if Yep they're the beneficiary already that is so cool oh man I'm G to use this for something that is neat okay so this is kind of the stack this is scaffold eth this is how you can get started building apps uh this is the way you would go about tinkering with solidity kind of in our first phase we used solidity by example uh we wrote the solidity how we thought we wanted it we left it very very accessible and uh attackable uh but you'll do a better job of that when you're building real contracts don't do what I do uh build a good contract in phase one and then in phase two we kind of built out the front end and then in phase three we deployed the whole thing so now uh I think I'm going to hand it over to Kevin Jones to show off extensions in a little bit but let me just like pause here just to see if there's any questions maybe we could do like four minutes of Q why four minutes four no a couple minutes of Q&A if anybody has any quick questions and and in the meantime I'll hand it over to Kevin Jones and he can do the same thing but he's going to use an extension system probably graph or onchain graph yeah that's what got got a sh got a sh okay any quick questions yeah what was the the yarn command to deploy it was yarn deploy D- Network base oh the versel oh yeah okay yeah and also this is in the docs but it's versel it's yarn versel colon YOLO space-- prod and that's what uh shipped the app to for sale yep yeah yeah yeah I did I'm pretty impressed I like that means that someone is watching base for contracts to get deployed they're decompiling the bik code and they're looking for aack Val vors where they can make money and they're even doing this like batch transa let's go see let's go see if he batched the transaction or not she it could it could let's see where is it yes you do so uh yeah so when you deploy a smart contract to any live Network the code isn't out there yet you have to go to the block Explorer and upload your code and then on their side they compile it and make sure it compiles to the same thing and then they display the code so if I to go look at like we what say one more time the the block Explorer needs to yeah so see how this contract has like the green check and we can get in there and actually like see the code for what we how it works yep yep so they have to verify right because like they couldn't trust you to do the verification you you send you can send any code to them but it has to compile down to the exact bite code that's on chain for them to display that codee up here does that make sense uh it's not free I don't think it's it's just like a really nice Cloud hosting service uh I think it's probably less decentralized we're a bunch of Cipher punks here and versell is great for quick front ends you can even like this code is all open source and forkable so if anybody wanted this code or to dink around with it they could just deploy their own front end if they wanted so like you could create infinite copies of this front end so so to me it's like good enough decentralized but also like you probably want to if you're hardcore about this deploy your site to ipfs also and have it live in some kind of distributed storage that people can access without even if versell goes down you know you can have that stuff pinned in ipfs but yes versel is a hosting service I think we pay for it build Guild has a paid account but you can get started probably pretty cheap lots of lots of guys can answer that question better than I can here too we'll have a whole day of build Guild people here so uh like come just come hang out and ask ask them some more and we can show you around for sure okay any last questions before I hang it out off to Kevin Jones I'll be up here again after lunch and we're going to do speedrun ethereum we'll go through your first five apps on ethereum yeah what was your question there is a verify command but I think you have to have your API key and I don't want to like go digging through my credentials right now but if I do yarn let me try it yarn verify D- Network base let's just see what happens here my guess is it's going to say you need an API key yep I think so there probably is some like base scan API that I need to put into my config but I don't want to go like digging through that right now and expose like a key in front of everyone uh but I think yarn verify probably without even anything on the network I don't yeah it's not going to work yeah this is this is trying to do it locally but yes yarn verify is the command okay you how you guys feeling feeling good you want to go let's go all right all right thank you all I'll be back in a little bit we'll be in this room all day today this afternoon we're going to be playing a CTF Capture the Flag it's going to be awesome highly technical we're going to give away prizes probably like thousands of dollars thousand a thousand of dollars we're going to also give away a node we have a Precinct build Guild node so if you go to client. build Guild we've made our own build Guild client it actually runs uh gu and Lighthouse and these exist kind of all around the world and it's like this opt-in system where you can become a distributed RPC for build Guild uh but we're going to be giving some of these away so you can get a box from us and take it home and plug it in and it's going to look like this it's going to have W and Lighthouse sinking automatically and lots of nerdy desktop stuff okay thank you very much we'll be here all day for [Music] thank you so much ohy hello welcome can you guys hear me okay yeah seems a little low but that's all right all right cool thank you you guys so much uh my name is Kevin Jones uh I actually work in Devil for the graph so I work on the graph protocol uh which is totally appropriate because I'm going to show you guys the graph extension for scaffold eth and talk a little bit about the extensions um I'm also core member of the build Guild do a lot of workshops uh with the rest of the crew here and uh yeah so um if you that was an awesome Workshop by uh Austin uh he covered really all the basics of scaffold Le so I won't focus too much on that but we will talk uh specifically about uh some stuff that's on the on the actual doc site so if we go to the docs uh there's a section here for extensions so you can come there uh it gives you some uh basically like kind of overview of what the extensions is you can have like a GitHub repo with the extension configuration and then you can just execute it with this- e flag um and so there's a lot of like Community extensions if you go to I think it's the build Guild website so if you go to ble.com uh and you kind of scroll down a little bit uh there's a section uh here at least there used to be maybe it's on the scaffold e website actually let's see yeah here it is so scaffold e uh there's a whole area here uh where or like check out available extensions and we did a hackathon I think not too long ago so there's a lot of really cool ones that have been built uh the very first one was the subgraph one which is really cool it's basically got a um you know scaffold one of the cool things about it is it's this very local development kind of environment where you're just like able to hack away without pushing anything to a test net and so the sub graph extension uh is exactly that as well we actually can spin up a virtual um infrastructure of the graph on our machine test our subgraph configurations just all locally using hard hat so we're going to show it off and so what it looks like uh but there's a bunch in here right there's one for Ponder if you prefer that and then there's like erc20 as Austin said there's the onchain kit which is cool it's got a swap extension uh so yeah and you could write your own we'd love for people to build on that um if you go back to the dock and you go to extensions there's a list of all the available extensions that kind of we supported building uh the build Guild has supported but you can also get the list from you know the scaffold teth website and then here there's an extion U an explanation of how you create your own so I personally have never created my own U it's definitely on my to-do list but I think it's pretty easy I think it's very simpler to how you create a a package with the npx command you can also do that uh using this uh extension development utility so you can come in here you can either uh clone the repository or so you do need to clone the repository which it's a special um Branch here it's under the same scaffold eth account but it's called Uh create eth uh so you can clone that create eth package install all the dependencies and then run this kind of like build script uh and then there's a CLI that allows you to create new uh extensions so the subgraph extens or the uh the extension system is really cool um it really allows to kind of make these custom reusable um environments all built around scaffold eth right so let's just take a look at the the the graph one so it used to be that we would have like a special branch of scaffold eth but we're moving away from that model right we're we're moving to this extension model which was designed by the core uh build Guild team um and it's you know basically this create eth uh extensions repository so you can think of it this this way there's the create eth pack pack AG which is the way that you install uh scaffolds with npx right um and then there's the Crea extensions which is like if you want to build your own supported extension in the build Guild Community you might do that so we have all of our ones that we worked on here and uh you know the very first one again was the subgraph extension so if we come here and go to the branch and choose subgraph there's this nice read me that kind of explains it right uh this is read me I wrote which kind of shows you exactly how to set it up so anyone who wants to follow along can do this but I'm going to actually spin it up and show you guys how it works um show of hands here who is hacking at the hackathon few of you just a few huh um okay so you know there is a graph Bounty so one of the uh things I always tell people is you could qualify for the Bounty with this package um and use it as kind of like a good starting point uh who here has used the graph before who who has used created a subgraph few of you guys few of you who here knows what the graph does few of you some people from the graph are here which is great um well let me kind of preface it this way first real quick because I think it makes sense just to understand the context this is not a talk about the graph but it makes sense to why we would use this graph extension scaffold e is like this right it's got a front end it's got a back end it's got all this cool boilerplate code written it's got these um you know all the proper packages you need to build and create a a package um or an app pretty rapidly um and it's really the the quintessential way that applications on ethereum have been written pretty much uh since Inception um but there is kind of like this like missing Gap when it comes to reading data from the blockchain now scaffold eth is really good it has these really cool like Hooks and uh be able to like get the data that you need just if you want to read it directly from the you know RPC provider but if you want to get like lots of data you know if you're building a defile application or if you're uh building something like an nft platform with lots of users uh the more users you have the more scalable your data issue is so using something like the graph is kind of like a a solution to that problem so you can think of it like this we're still going to use scaffold eth but we're going to use nextjs and hard hat and then in the middle we're going to have this kind of uh graph infrastructure so we're GNA like we're going to simulate this all inside of Docker so the only difference here is we're still using all the packages that Austin used but we're we have a a a layer that's going to run in Docker so uh let's just spin it up so you guys can see this is how you do it so you just do npx create d e at latest and so we do npx create D at latest - e subgraph so same kind of method we just use the MPX create e command asks us what we want my internet connection locked did I do something uhhuh like like a VPN oh tether oh I see what saying I have a tether yeah let's do this let's just try VPN happen almost got disrupted right now that was very scary I was like I've never seen that error before Okay cool so it's working now thank you so much see build Guild homies got my back all right so um it's going to do the same thing it's going to give you this kind of like Choose Your Own Adventure method right so we're going to do I don't know like um uh Devcon sure uh hit enter and same thing we get to choose a package should we support both uh I personally like hard hat just because it's been around for a while and I'm just so used to writing the stuff in typescript but you might choose Foundry like Austin said if you want to write solidity test it's the way to go uh or you might just not use a chain at all maybe you just want to use the graph for like doing some data stuff you could do that as well um so it's going to go through install the packages for us um again it's going to scaffold out an environment now Austin mentioned that scaffold e is this kind of like mono repo right it's got the hard hat or The Foundry and then it's got the nextjs package well this is just going to give us one additional package right it's going to give us this additional folder called subgraph right um and it's going to lend that by going through and basically using you know this uh where is it right here using all the boiler plate code that comes in here so if we go to extension and we go to packages and we go under there you'll see that there's this new subgraph folder right so let's give it a second on VPN is probably even a little bit slower uh I'm using a cool tool called t-mo just lets me split my screen up uh this doesn't obviously need to be that way um we can just do that in different windows but let's do that so Devcon CD Devcon okay cool and while that's loading up let's just take a look at the code because it should at least be there for the most part okay so we see this packages folder and then we see there's an additional folder so in this case we have this cool extension that we can use uh called subgraph we can go in there and we can start to see what's available to us so it's the same exact thing uh for scaffold eth we have the contracts folder we have the same exact sample contract and then on top of that we have the nextjs folder with the same exact code the difference is we also have template in in some cool uh additional code so an example would be like in this case we wanted to have this like subgraph uh route so uh scaffold E uses um the app router functionality of nextjs so we have this subgraph fold and then inside of there we have this dedicated folder uh or this dedicated page with all the uh each the the the code for the front end and I you'll see what this looks like in a sec as soon as it's done installing the packages uh it's a little slow right now um and then let's take a look at the graph so without doing a full overview of the graph I just want to kind of explain like within a few words what a subgraph is a subgraph is really just an API right it's basically a uh an API layer for any kind of blockchain data right it's this middleware layer um and so we basically want to create what are called subgraphs to organize the data so just like we have uh a contract here called your contract and we have this concept of updating the greeting which Austin showed off right where you can like update the greeting pay some gas pay some value that greeting has an event right so it has this basic event so that event says who set the greeting what the greeting was whether they paid some value or not true or false and then what that actual value was so this event is kind of like what it's like a log on ethereum right we want to keep track of something and we probably want to display that in our front end um so we could just query that directly using scaffold eth there's a there's a hook for that if you go to scaffold eat.io and you go to interacting with your smart contract there is a uh event history and then there is also a watch contract event so there's two two ways you can get information lots of information or if you want to just like watch all the the events that come off you can also do that so it's easy to get like small bits of data but if you want to get like all of the events that happen since you deployed your dap maybe you want to get thousands of events it's not effective to use something like this because it's going to be too slow right so uh we can take this event data and as it gets emitted off of the blockchain right here right we can index it that's what the graph is it's an indexing protocol right so if we go to that subgraph folder and we go to the subgraph configuration it it's already pre predefined for us this example comes with the network we care about and the address of the smart contract it also comes comes with the concept of what are called entities and again we're not going to go too far down that rabbit hole but it's how we want to store the data and then we have this Handler and all of this stuff it's three it's three files it's the configuration file it's the uh schema which is like how we store the data and it's the Handler which is like how we process the data which is run runs an assembly script you don't need to understand that stuff but that's what a subgraph is it's those three things created to process data so if we want to write our own custom subgraph we can um but we're just going to use the one that comes with this package for Simplicity we're not going to change the contract at all we're just going to show how everything works so scaffold is done installing so let's go up here let's go into the Devcon folder let's do yarn uh start oh sorry yarn chain sorry yarn chain yarn start and yarn deploy now the difference with uh this package because we have a third um you know package that we're using the subgraph package we also want to have another window right so we still need our chain we still need our front end we want to do our deploys in this window this last one is where we're going to simulate the graph in Docker okay now you don't need to know what Docker is but uh Docker is basically a virtualization layer that allows you to Virtual run what are called containers uh it's kind of like running virtual machines but they're very very small uh and so we're going to use the graph's power or sorry the docker's power to do that uh inside of what are called docker containers again you don't need to know that but to do that all we need to do is do yarn run- node so that's going to there's like a a file that's on there called a Docker compos file that has all the configuration defined for creating a graph uh node on your machines and all the infrastructure you need so you need an ipfs node and you need a uh database postgress database so it's it's pretty much all configured you don't need to change anything so we're doing that now we're spinning up everything inside of Docker so you need to have Docker installed and that's just one example of one of the extensions uh I think it's the most relevant especially if you're going to hack at a hackathon and you want the graph Bounty uh who who doesn't like bounties right so use the graph graph one so you know it's working um at least the graph uh infrastructure is set up when it says downloading latest blocks from ethereum so we have right here so that basically means that the graph node so graph node is the the the thing that processes data it's what all the indexers run it's a rust based implementation of like data indexing uh that is all running when that says ready to download uh data's blocks so so we have our chain we have our front end we have the graph running now we just need to uh deploy our subgraph so we again we already have a subgraph that's here and this subgraph keeps track of all the events that come off of the greeting and when those events happen it takes in the data types and it processes those over whatever Network we want so this is Local Host it puts those uh data type ENT as objects or I should say values into a database in a certain data type which are these and it basically stores them and makes them available via graphql so that's the power of the graph is it creates an API for event data which is super powerful uh and it does that using assembly script mappings right and so if you come into your this assembly script we'll see that nothing's actually uh been generated yet so we need to generate these types we use assembly script with the graph which is a subset of types scripts so it's kind of like types script but it's a little bit more um simple you can't do like Imports of just standard types script libraries needs to be an assembly script library but it's super powerful in the sense that you can use the type safety of your Imports so we need to generate these so let's go to scaffold eth so if we go to scaffold eth and let's go to the subgraph extension by the way how much time do I have any know no like 30 minutes 20 minutes something like that okay uh if I need to stop just let me know all right so this subgraph tab here is is this new tab we get right because we're using this new repo we've we've kind of templated in uh some some code and so now we can do some additional stuff so you'll see on the bottom is I there's a very basic read me that shows you how to get started so to spin up the the environment you do yarn run node I already did that to create a subgraph you run yarn local create to deploy your subgraph you do yarn local ship to build out assets for your front end you run yarn graph client build because we use graph client and then to clean up the database if you need to you can clean the node clean node so it tells you exactly what you need to type so let's do that um we don't have any data in our contracts maybe we make some uh let's do some things real quick let's send some greetings uh let's do uh yo Devcon and send we don't have any funds let's get some some value all right so Kevin was here I'm just sending a couple things so we have that thank you cool so I've sent a couple things but they're kind of like lost in the ethos of like ethereum like how do I get that data well we could use the hook right to get that data but if there's like thousands of of events that have happened well it's going to be pretty clunky right so let's use the graph cool so the next thing we need to do is we have the infrastructure set up to simulate the graph we're going to do a yarn uh local DC create like this boom so that's going to uh create like kind of like a a skeleton environment for our subgraph that's just like a very simple command you need to type that once then we're going to actually like generate the code build uh the subgraph and then try to ship it uh with a few commands so we do that by doing yard local ship so what this does is it generates all the types for the subgraph it builds the sub graph into a wasm module right because we use wasm in the graph and then it ships it to the uh graph node instance and it puts all the stuff into ipfs that it needs to and it creates a a graphql AP Pi endpoint for you and it just does everything uh using the graph infrastructure and then it asks you what version you want to uh use as well so just like you have versions in your software your subgraph evolves over time you add a new event to your subgraph then you add a new version right so let's do 0.0.1 hit enter it's going to check if there's any errors in the code right if there was like something missing that was not properly generated then it's going to give you an error but it deployed successfully we can see here that the graph is indexing data cool let's go back so uh first of all we'll go to the subgraph tab and there we go we get the commands or the data here on the bottom um I'm kind of surprised it actually has the data already um if you make change to your subg graph you might have to regenerate the types which is doing this uh we use graph client which graph client is like a front-end framework it's it's similar to like Apollo uh or um I forget the other one URL uh I like graph client because it has it's very simple you can do some interesting things for like um working with graph ql it's just a little bit more optimized I think so we use graph client so there's this additional command that you might need to run to generate the types but as you can see the data is already there uh and so if we look at that code real quick let's go to the ne uh nextjs folder app subgraph there's the main subgraph page and you'll see here we create a table so we do this greeting table which is down here at the very bottom right here so we go to a greetings table and go to the components of that greeting table here it is so we use uh we're doing using some state where we have this kind of uh query that we do by calling a get creating document which is probably somewhere in here here it is it's just a graphql query so if you're not familiar with graphql graphql is like a query language that allows you to to query exactly what you want in a very optimized way for front ends and so we are using the graph for that and so um we're using this kind of custom query that gives us all of the data back in one single HTTP query right instead of calling the RPC over and over and over and over and over again to get all the events um we're just doing it in one simple query and we're also getting uh the greeting count and the address of that uh of that person that sent the greeting so we're getting a lot of Advanced Data just with one query right uh and so yeah so what else do I want to show off real quick so uh oh and also it's going to give you this like URL uh which is right here so let's grab that real quick real quick I want to show that off uh so if we go to Boom time 12 minutes I have I have enough time to actually probably go over the subgraph config if anyone's really interested or I can ask questions answer questions about extensions but let's let's first of all I'll show this off so this is called graph iql graph iql is kind of like this um way that you can like test your graphql configuration so again the graph uses graphql heavily right that's that's what we rely on for people being able to access the data in a in a reliable way so if we click Explorer here on the left and sorry this might be hard to read but we can see that there's these data objects that match what's in our schema so these are kind of like what's in the database basically so if we look at this the graph graph ql configuration for the subgraph and go to the schema these are going to match so in our case we have this greeter and so we have greetings that happen and then we have senders that send those greetings and we kind of like build a database for all that stuff and so all this data is what we're storing in postgress and exposing via graphql and that's what you're going to see over here is these these entities so if I want to get all the greetings maybe I want to get like the first I don't know one th000 for some reason and I want to order them by the uh when they were created and I want to do it descending and I want to skip over the first hundred for some reason or maybe the first thousand you know you have a lot of flexibility here I want to know when they were created what it was the ID and I want to know who sent it what their address was and how many they've sent and then I can hit play and I can get that data back that's not working oh because I skipped over let's not skip there we go so because I skipped the first thousand there was no data but here we go this is all my data so this is a graphql query for uh that I'm that I'm creating and this is the response that I'm getting so what we're parsing in our front end on over here um sorry in in here is the data that's coming back from the Json response over graphql cool hopefully that wasn't too fast that was good um so I can also talk a little bit about the the graph configuration but why don't we like pause for a second and see if anyone has questions first uh about the extension system uh or about the graph or anything that I uh talked about right now so far any questions ber ber no okay then let me let me talk about the graph q a little bit uh the subgraph configuration a little bit more um definitely we we would love for people to to build cool extensions so if you're in the crowd and you are you know working on a protocol that can take the the scaffold eth and and create an extension for it come talk to us we'd love to hear what you want to build uh and we can get it listed maybe on the on the on the docks um but yeah please please uh let us know if you think this extension system is useful and like if you would like to see any features or any if you want to see a cool extension built let me know uh but let me talk a little bit more about the graph so because I think it's probably the most confusing thing of everything I just talked about um but I want to cover this part a little bit more because I didn't really go too much into this assembly script um one of the powerful things about the graph is it allows you to uh do some like interesting things like during the time that an event happens so the primary way we get data is events we also have the ability to do what it called substreams where we can get like more block data um but in this case uh the cool thing about about assembly script is again it's a subset of typescript so it's pretty easy to to to understand but let's walk through it a little bit so when we uh write our our contract just like scaffold eth generates the ABI right to be able to interact with our uh contract well the same thing goes for the graph it needs uh the ABI as well so we take the ABI and then we generate all of the assembly script uh types that we need and store them into these files so in this case there's a generated folder it has the name of the contract and then it has the schema types as well so how we want to store the data so this is kind of like how we want to read the data and then this is how we want to write the data right so these are the types this other thing here is what we want to do with the data so we use the graph TS package to maybe we want to like um read in addresses uh from the uh the thing and store them a certain way uh in typescript we need this like package right so that's why in this case we're using the big int package to do like numbers uh to use big inss and so in this case we only have one function that the contract is uh sending and so we have this ability to uh sorry one event uh the greeting change event so we take in the event here as part of the the function right here greeting change and then we create a a unique identifier for the values of that actual uh string so we do that by converting it to a hex string then we try to load it in the database so we try to see if it's available if it's not available here uh like it's like if it's the first person Whoever has sent a greeting we just create a new one right and then we actually like set who that person that that sent it is what the time stamp was and then we do here this is where we use the big int package to actually set the value for the very first time as one right so we do some interesting stuff where we're actually storing the greeting count offchain right we're not sorting it on chain so the graph is really good for that because if you have stuff you want to like process like defi related uh metrics uh and you want to like just store that in an easy to access way that's where the graph is very powerful and then if this person has come in and sent a greeting before well they'll actually have a count of one plus an additional one so it'll count that and add that too right uh and then the same thing goes for the greeting like we do we create a an identifier for the greeting create a new one using the string the uh that heex string and then we set all those variables for the greeting the sender the premium the value the Tim stamp and the transaction hash and then here is where all that data gets saved so it's kind of simple um and the cool thing about the graph actually if you use the CL it will generate all this stuff for you so you don't need to write this stuff but it's good to understand how it works um cool all right so uh I know it's that part's probably a little complicated but at least you guys get an idea of why you would use the extension uh why you would use the graphic extension and yeah uh any questions at all there's got to be at least one question come on no no no yes personally what is it that you most excites you about this project and and the new things that it enables scaffold e or the graph the graph the graph the graph well the graph is great because um you know it really allows you to uh you know improve the usability of the data from the blockchain um and so you can build some interesting stuff uh I think what I'm most excited about is you know the advancements that we're making in indexing with like substreams um and yeah just the the the Network's getting the network is very secure uh distributed decentralized and we're like sticking very much to that ethos right where we believe that decentralized is super important and so about I know was six months ago maybe not that that long we used to have a hosted service we've completely moved away from that and everything is on the decentralized network and we're we're moving to continue that uh and and focus on decentralization so thank you yep thank you cool we got four minutes any other questions yep back there let's get you mic uh back there green sweatshirt okay so first one uh maybe it's because I don't know the graph and so on but you can run mutations like in graphql or is only for indexing data and fets from uh the blockchain sorry I missed the first part can you say it again yeah in graphql you can do querium mutations and here in the graph you are able to run mutations in the same way or computations yeah yes okay yeah you so you can essentially do like in there I mean I'm doing like a plus or I'm just adding some stuff uh there's time series data you can do with the graph where you can like have like uh something happen over a certain period of time and aggregate um so there's some stuff you can do automatically with some some base stuff but yeah it's more yeah you can do computation you just can't do like you can't like it's not an oracle where you could go out and like fetch some information and get that back um it's just stuff that you can do locally inside of assembly script and process and store okay and the second one uh how much uh is autogenerated by the Avi is only the the types from the schema or also in the Handler we are autogenerating on yeah so if you use so that's a good question so the so the thing is it won't generate the the the it won't generate all the assembly script code for you it will just generate the types but the CLI like the graph CLI if you go to the gra.com and install the CLI that will read in all of the types and then build out a very basic kind of uh one for you okay thank you yeah good question Cool any other questions no awesome cool thank you guys so much for coming uh we're going to be here uh we might take a small lunch break I think soon and we will be back here later so thank you so much guys appreciate you I think uh they do have a Q&A here where you can scan this QR code and ask questions so if anybody wants to you can scan this QR code and it's going to show up right here on the screen so feel free to ask more questions here but we're here all day and if you find any of these black shirts you can ask ask any questions I think now we're going to take a break though right it's a lunch break time is that right if the QA shows up we'll answer it yep yep yep yep yep if questions show up here we will answer them uh but yeah don't feel to what stress to do that the the key is