Full Stack dapp Workshop with Scaffold ETH and The Graph

Transcript

[Music] [Applause] [Music] all right thank you guys so much for coming uh really excited to be here I love Chicago I've been waiting for this event for a while um so thank you so much for having me and thanks for coming uh good luck hacking this weekend um real quickly my name is Kevin Jones I am a developer relations engineer working at eode uh but I'm also highly involved in the build Guild or the little GID as you may have uh heard it before um and so I'm kind of actually just doing a talk about like the full stack dap kind of experience um and kind of melding those things too together um so we're going to actually do a lot of like stuff on the keyboard I I do have some slides

but not a lot um we're going to do it in two parts first we're going to set up scaffold eth walk through it and then we're actually going to go through and kind of like uh build a Dap and build a uh a subgraph for that so it's it's kind of that full spectrum uh and talk a little bit about the benefits of using uh the graph as well I also have this cool poop so make sure you come find me scan my thing I'll give you guys a cool poop East Chicago um so uh this is a really good link this is the the workshop I did for uh uh at the house of web 3 in San Francisco for Ed and node uh it's kind of a more uh thorough I would say Workshop probably takes more like two hours maybe to go

through um we're going to kind of go through some of it today so it's a good resource for you guys if you aren't following along uh which I a lot of people are eating right now so it's hard to hack and follow along so uh you guys can use this uh to get started uh after you're done today um some reason the slide always new problems okay so scaffold e architecture uh essentially is your front end and your back end kind of all baked together in a yarn package uh repo so it's a mono repo so it does cons consist of nextjs uh rainbow kit we use hard hat you can also use um found which I'll showcase that as well uh and then it also uses wagm and typescript so uh there's a lot of assumptions that are

made with scaffold e but they're they're kind of good assumptions uh when I first got started building in ethereum I was like all these different tools and like how do I put them together and so the aim of scaffold e is to do that exactly it's just to get you up and running so it's perfect for hackathons because you literally can just spin it up and you're ready to start hacking away your smart contract in your front end and we'll get into it and show show what that looks like uh so let's kind of stop here for the slides uh so yeah getting started with scaffold e is pretty pretty easy you can go to scaffold eat.io right and that will take you to this page um and then you can also uh go to here and get the GitHub there's some docs there's two

ways to start it up you can either use npx create eth which is an npx command to like spin up it's kind of in beta right now but if you want to use Foundry that's that's the the way to go uh that's the only way you can really use Foundry right now uh or you can just use git to kind of check check out the repository so um I can kind of show show this off if you want it's very basic let's let's actually do it real quick in like a new window um we can go npx create eth at latest and it's kind of this like uh Adventure uh as you go kind of a scenario where you can like kind of pick what you want to install uh so you can just type that literally uh it's going to install any kind of dependencies that

you need and then it's going to ask you what you want to name your project so we could just say like Chicago uh and then it's going to ask you what chain you want so you can use hardout or Foundry so let's just say we want to use Foundry uh and then it's going to ask you if you want to install the packages um I'll just say no so we can actually just kind of set the repo up and show you what it looks like to manually install the packages uh and it's going to go out there it's basically going to check out all the files that it needs to get scaffold d 2 up and running and then it just gives you instructions so you can just go CD Chicago and you can do a yarn install yeah sorry that I just realized that you guys probably can't read it

very well so uh yeah so you go into the directory where you created your project and you do a yarn install and it's going to install the dependencies for you so that's kind of the benefit of using yarn uh in a monor repo Styles is it just goes and grabs everything you need uh this will take you know somewhere between 30 seconds to a minute depending on your internet connection and uh your computer obviously um and this is going to install pretty much all the front end all the backend stuff that you need uh all of the Frameworks for connecting your uh chain to your front end and then a bunch of other boiler Co Boiler boilerplate code that will get you up and running so at this point we could actually just kind of start uh deploying our chain so we could say yarn chain and

that's going to spin up Foundry for us and it's going to spin up all of our test wallets and all that good stuff um but I'm going to show you the other way so that that is one way you can do it uh we're going to be using a special um build of scaffold e today so if you go to the GitHub uh for scaffold e 2 so there's two versions of scaffold e there's kind of the older version which was just react uh the newer version uses nextjs the older one also didn't have rainbow kit uh it didn't have wagy so there's been a lot of uh work to put into scaffold D2 to make it a little faster and a little more performant and a little bit more lightweight so we recommend using scaffold D2 you could use scaffold e one um but for the most

part scaffold e 2 is just the more actively developed Branch okay but what I want to show to show is the subgraph package so there's a special branch of scaffold that was written by Simone from me node uh where it's basically uh just an additional uh repo inside of the monor repo for the subgraph configuration um so we're going to be using that today so I've gone ahead and already did the checkout all the steps for this again are in this kind of Workshop so I've gone ahead and kind of checked it out this way using just like uh a specific Branch when I cloned uh let me Zoom that in a little bit so I I I I I just checked the repo already and I've also gone ahead and did the yarn install for you okay so we did that so

if we come over here we can kind of uh I'm using t-mo which is a just a terminal multiplexer it's just allows me to have like different windows open in one screen you can do this All in multiple windows and the reason why you need multiple windows is because you always have certain things running with scaffold like you need to run your chain you need to run your your uh front end and then you also need to run uh if you're using the graph subgraph package you need to run it in Docker so uh that being said you kind of need a few windows open and then you kind of need the fourth window to do your deploy so you can just keep these up in separate Windows I'm going to go ahead and start it up so let's do a yarn chain right so

yarn chain is going to do exactly that it's going to spit up in this case I'm using the subgraph package which is using hard hat it's going to spin up uh that for us and just that's it just yarn chain then on this next window we do yarn start so that's going to spin up react with nextjs and going to start listening on Port Local Host uh 3000 and that's it so we always kind of keep those two open for sure um and then uh let's just take a quick look at the code and let me show you kind of what it looks like so there is this kind of main package Json which has all of these commands that I'm typing in here so if you want ever want to reference this you can look at that um like if you don't if you want to know what yarn chain does

this is exactly what it does is it references the monor repo but anyways let's dive into it so inside of the packages folder is where all of the um boiler plate code is essentially and so um there is inside the subgraph configuration there is already a Docker composed file for us that's going to spin up the graph so um I'm going to spin it up right now we'll take a closer look at the graph in a little bit but I just want to explain to you that that's what I'm doing here I'm going to do a yarn run- node which is going to do Docker compose up if anyone doesn't know what Docker is it's just Docker containers that have all the infrastructure you need uh for whatever project you're working on and in this case the graph is three three containers it's ipfs postgress database and the

graph node uh binary so the cool thing is you don't really need to know Docker you just run yarn run node and it's going to spin it up for you but if you need to troubleshoot anything with Docker like you can kind of go in here and see what it does so now we have uh the subgraph configuration going and then in this next window we'll just is where we'll do our deploys so the first thing I want to do is do a yarn deploy and do D- reset so you can do a yarn deploy if you ever want to force a new contract you do a Yar deploy reset and it will kind of force uh scaffold to give you a new copy of your contract um and so it's just kind of a an extra thing there but you can see that when

when we do the deploy we get a transaction we get uh the contract address and then we get like an kind of like some feedback that shows us how much gas was used and you can also see that up here in the corner as we do a deploy we get some output into hard hat console because we're using hard hat console in our contract and I'm going to show the contract in a sec and we see like some logging that we're doing keeps track of stuff for us um so let's go back to the codebase real quick and go into scaffold eth's package so uh or sorry into the hardap package so inside the hardap there's this contracts folder and inside there we have your contract.

so this is kind of a like I said starting contract it's it's really just a reader contract and a and and a state contract that allows us to update a variable uh nothing crazy nothing fancy in here we have a string that we're defining essentially here which is currently set to building Unstoppable apps and then we have like an event that keeps track of as the changes happen to the smart contract we have some stuff like we we said an owner and the The Constructor but really the the main purpose of the contract is here in the set greeting function and all it does is it takes in a new string that is payable and it updates that and does some other stuff in here like setting a Boolean if they paid some value and it it does some checks um uh or Sor increases the count

C uh and keeps track of the counter for all the different senders so there's just some like basic stuff in here that shows you how to do it and then it emits this event right so we can actually load up scaffold eth now so we've deployed it so let's go ahead and load up scaffold eth so here we go so it's on Local Host 3000 and the the main like benefit to scaffold eth again is not only this like yarn package that you can just spin up really quickly but a lot of the boiler plate code like I said before is already written for you and there's a really cool functionality in scaffold eth where you can just go to this debug contract so this home fold homepage is kind of exactly that it's it's just kind of like a uh some interesting like you know

telling you where to go for stuff later on you can actually start building your app in here this is basically the index TSX file which is it tells you where it is but the D.A contracts is really like the the secret sauce for for scaffold e because what it does is it actually uh as you deploy your smart contract it injects the Abi into the front end for you and it builds out a UI for you so you don't have to go in there and start kind of building out uh some kind of like uh fields for functions that you might change later and then you have to go back into your front end and change them you can just start tinkering around with your smart contract right here out of the box basically so we have and we also have these readers which keep track

of the variables that are coming from the contract we have the contract address how much balance it has in ether dollars and it tells you what's Network be on so if I come here and I say okay well we see there's a right function called set greeting which I I showed you guys earlier we can update something so let's say Foo like this hit in and it's going to tell me like I don't have enough gas to pay for the transaction so the first thing you think is maybe I need to connect metamask but you actually don't need to because scaffold eth also comes with Burner wallets so this concept of burner wallets is basically an in browser wallet where uh private key has been generated for you and you don't need to worry about metamask or non issues or anything like that you just come in here and say give

me some gas this little icon gives me some eth and then I can update my my greeting also gives me like a transaction receipt so I can see if there's some kind of information I want to see that came back from the Json RPC I can look at that but for the most part we can see now that the greeting has been updated just by calling that function so nothing nothing crazy nothing fancy and then there's this also this example UI which has some kind of examples of how you would uh create like a button how you would create a field object and how you would trans you know trans trans uh uh submit a transaction and then you can see here that like this example also send sends some value So currently like the de the premium is set to false if I come in here and say uh

bar hit send now it's going to increase the counter by two it's going to show me some like little pretty UI and if I go back to debut contracts we can see that that Boolean was changed based on the logic in the smart contract so you can see how like you can get up and started pretty quickly with scaffold e using this um and so uh one thing I want to talk about let's kind of go back to uh the architecture slide real quick and kind of go through um a little bit more detailed about why the graph is useful as well so uh I think everyone knows what a smart contract is I can probably skip this slide uh but for everyone knows that that the ethereum virtual machine is a state machine right so smart contracts are what kind of like

govern that state right we have essentially this kind of data object that keeps track of uh updated information in this case we're looking at like the Crypt Punk example where we have all these nfts that essentially are saved in the blockchain uh as these kind of like data store objects right um and we keep track of the values for each particular thing that we care about in this case it's an nft so we want to know who the owner is what the nft ID is and then like where the URI is for the U metadata right uh and as you kind of make we we did some transactions we know we want to update the state and uh most smart contract Engineers know that if you create a function you also want to create an event that is broadcasted that

keeps track of that information for your front end and also uh so that it's uh if someone's able to listen to it essentially right um but there's one problem particularly just with out of this out of the box using the ethereum network um and that's mainly that uh there's lots of transactions going on right if you can if you look at these protocols these are this is just an example of various protocols uh there's a lot of noise in the ethereum uh blockchain and especially if you have like a front end and you're trying to get like detailed information about different protocols um it's really hard to find the data that you need by calling an RPC um really when it comes down to it the blockchain initial architecture was you you would write

your front end and something like you know nextjs or whatever and you have your your your HTML your CSS your JavaScript and then you uh read and write from the blockchain right you propose transactions and and then you do like RPC calls to read the data from the blockchain uh but there's issues with that mainly because uh the ethereum virtual machine is really incentivized more for rights like the security model for the consensus is really okay you pay some gas to update the state but there's no incentive layer for reading the data and so and it's really not designed like if the Json RPC endpoint was really not designed to be uh used by front-end applications it was really designed to manage uh the the node really right so there's this problem and there's also

this problem with latency because if you want to get large amounts of data or if you want to get like um a lot of you want to make a lot of calls you have to do multiple RPC calls and so it's inefficient and so we've seen actually in the wild like something like this where someone is going through and like in this case uh the developer wanted to get all of the nfts that a specific smart contract uh owned uh and if we if you do something like this uh each RPC call can take 100 milliseconds so the minute someone has more than 10 or 20 or 30 nfts in their wallet uh this could easily take 10 20 seconds load time in their frontend application so it's it's kind of inefficient um and so you also have this problem like of historical data too like

if you want to get like let's say for the Crypt puns example like you want to see like who owned the crypto Punk at a specific state or specific point in time it's very difficult to do that with an RPC you have to know the exact block number you got to go through all the blocks and find out when it was transferred and it's just it's a mess it's it's pretty much impossible to do um and that's why this is a data like blockchain data is a huge problem and it's hard to solve but hopefully the graph will will explain to you why that why that's beneficial and so really what we want to do is get something like this we had our our our data object that keeps track of the IDS the owners metadata but we also want to see like historical data like what happened at a

certain block number or what happened at a certain time uh on the blockchain so this is where the graph kind of comes in into uh the graph is a decentralized network so the concept is that we give apis or subgraphs that are configured for uh the actual um blockchain data that you care about if you're a subg subgraph developer uh we also index data for like ipfs and now R weave uh so there's a lot of power there to actually index the data in an API way in a decentralized way um and currently the graph serves anywhere between 1 to two billion queries per day so it's it's it's highly used I mean that's a lot of traffic for uh for any application um and so specifically for like web 3 it's

pretty pretty powerful um and so we also what we actually want to do is something like this right where we we have a modern architecture where we still use our front end right which is nextjs or your JavaScript application maybe it's deployed to something like ipfs or filecoin or some some other like you know static file file serving you still have the blockchain and you're still writing your transactions to the blockchain but for like reading the data uh you have this kind of separate layer where the graph sits in which is like an index protocol so what the graph does is exactly that is you define some configuration uh for how you want to index your event data on your smart contract and then you expose it in a graphql API it's easier to use and so

what you ended up with with the the first example where we have this kind of for Loop that we're doing to get all these RPC calls gets into this like very pretty and who's here as a front- end developer okay so you guys probably have seen something like like this this is uh a graphql query and so uh the graph highly relies on graphql to efficiently like serve right it is a query language and so it's optimized for querying data and so it's very powerful when you have like something like blockchain where there's lots of data right so it is a decentralized protocol um there's over 400 indexers worldwide that are indexing this data um and the the idea is like the network is is a open decentralized network that everyone

one owns the data uh there's no like concept of like centralization um uh the data is redundant right you can deploy your data onto the uh the the network and it can be replicated right across all these indexers and it makes it extremely fast and very cheap um and so the concept is like we want to lean towards a global API for blockchain data so truly Des sensorized apps is kind of like what we are like aim is like the best vision for uh developers and so when you're when you're thinking about today like building apps think about it how can I make my app fully decentralized right truly open permissionless all the core concept of uh building AAP so what is a subgraph so

I talked about it briefly but basically a subgraph you can think of it as a data database or a data object uh that's stored all of the information that you really care about as a developer so if you're writing a smart contract you write a subgraph and the subgraph essentially keeps track of all of the event data and keeps it in a easy to query uh postgress database on the indexers uh and exposed with a graphql API okay so this kind of like mess that we see with like all these transactions going on uh you can think of it as something like this each particular uh protocol or application uh has its own unique subgraph with this organized uh data structure where you can query that

and by the way there there are example subgraphs for all of these available as well um on the the graph. Explorer I think that's the oral but it's the graph Explorer and you can actually query this stuff now um as well so this is kind of what the architecture looks like um you have you still have your front end right so you have your dap your front end uh application right and you still have your smart contract deployed right on ethereum but instead of having to uh do reads from the blockchain you're still proposing transactions to your smart contract like you would normally do through the DAP but as that smart contract cont trct emits events there is a process called graph node and graph node is kind of like the Workhorse that keeps track and listens using a uh uh some configuration

files that I'm going to show to index that data that data is then stored um inside of the uh uh cluster in postgress and then exposed with a graphql API right and then as you uh program your dap instead of using our eth calls to get data you essentially just do one simple graph ql AP call to get the the data that you care about um and this magic really happens here in this kind of like mapping configuration uh which essentially is a written in assembly script and it is a uh web assembly uh module and so what happens is the as you deploy your subgraph you also deploy a mapping and the mapping is kind of like we call it the Handler it handles all of

the events that happen processes them and then puts them in the data store and and then exposes them with graphql so so this is live footage of what a subgraph actually does I I still want to know how this works if anyone can tell me no one's been able to tell me yet so I don't know I'll give you weight okay weight all right it's very powerful I don't know so yeah so we get the idea um so let's see so let's kind of dive a little bit more so let's go back to what we were doing um and let's take a look at the code real quick so we we have this basic um your contract. soul right that we have it's emitting we know it's

emitting an event right because we can come up here we can see the event right and I I mentioned it already I think everyone knows what an event is but an event is really everything you care about that's happening in your function so in this case we're keeping track of everything we're keeping track of the who set the greeting what the new greeting was we're keeping track of whether there was a premium paid so was it a the Boolean true or was the bullion false in other words did they send some value uh and then how much that was that value if it exists right so we're keeping track of all that stuff in the event and then we emit that event right here right where we say like all right there's been a greeting change the person that sent the the transaction is the sender the

message. sender uh this is a global variable available inside of solidity so message. sender is who signed the transaction for that function when it was called we have the new greeting that's passed along as a string right then we have the value which is also a um uh Global variable and then we have uh some some values that are set u if it's greater than zero otherwise zero so we we're emitting that stuff here um and then we can take a look at at the subgraph configuration and we can go to we already showed graph node which is the docker composed file you don't really need to understand that just know that everything is running in Docker and then

we can go to here and look at the sub graph yl so a a graph ql configuration is is really three things so there's this thing here which is called the Manifest it's like kind of what ties everything together um and the main things that exist in the Manifest that are important is the contract address so in this case we have the contract address we have what network it's on so if you guys are running like scaffold e is all Local Host so we're using our stack is in uh Docker running local host we have our backend running host so you can just use local hosted here at this point if you wanted to switch to a test net you can do that um I don't really cover that in the workshop but I Do cover that in the other Workshop link

and there's a video there that explains that in detail of how to get to that point but um and then we have the entities we care about so you can think of entities uh as the the data objects or like you know what are the what are the things you care about inside of what you're um uh trying to trying to organized in in a schema format which we'll get to in a second so in this case we have the greeting that we care about and then we have the sender of the greeting who who updated The Greening and then we have this Handler oh sorry we have the ABI the ABI is also important uh the ABI as you guys know is the application binary interface it's really how you it's kind of like the map to your smart contract right um and then

we have this Handler so I mentioned this earlier so the Handler is assembly script and it uh is what handles all of uh uh anything that happens in the the smart contract it's kind of listening for those events and then processing that um and so we can we can kind of say this is just like like I said the Manifest it's kind of like the overall High Lev view right then we can look at the schema so if we go to source and go to schema then we have the the data object so anyone who's familiar with graphql or deployed graphql probably uh recognizes this uh it's basically in this case we have two entities so the the type is the entity name so earlier we cared about the sender and the greeting right because we have this this

this contract that's emitting those events and we can organize that data in a way that we care about so we can care about the ID which is generated randomly based off the block uh or the hash of the transaction we have the sender who sent the transaction what their greeting was what was the Boolean the the the premium was it was it true or false and you can see how there's defined things like you basically are defining what kind of data data you want to uh store and so this is already written for you um and my my workshop that is on the link walks you through creating a new event and creating new schema and all that stuff so it's a good way to to kind of understand this a little more um but then you can see like when it was created and then we also have this one

which is a uh the greeting which is derived from so here we're keeping track of all the senders and then we're also keeping track of all the greetings that they update right uh so these are kind of like linked entities uh I'm not really going to get too much into that but these are derived from from entities which means that they're they have a relationship data inside of the graphql uh uh query so that that's very useful for um optimizing data but I'm not going to get too much into that and then we have the mapping file this is probably the most confusing part of the whole thing um because it is kind of uh uh so it assembly script is a is a subset of typescript so uh it's looks very similar to typescript so anyone who's with typescript probably can recognize and kind of make their make their way around

this file to do things but the important thing is is we have inside of our subgraph configuration we have a event that's being emitted and then we have this handle greeting change which is the Handler which is defined inside the mapping so what we do here is we import uh the contract uh the greeting change object from the contract we also import the schema which is here so we know how how we want to store the data right and then inside of this we just have this one function that is a Handler that's going to be executed and executed on graph node when we deploy it that's going to be listening essentially so it's listening for events that are called greeting change and it's it's

doing things right it's converting some stuff like to hex string we see if it already exists the sender already exists if we do we load that sender if the sender is null then we create a sender so there's some interesting logic in here but the the the the the base thing is is we're basically listening for the events taking the data we care about and then importing them and then the most important thing is right here at the bottom where we save both of the entities so we take that data object and then save it in and then that's going to save it into postgress and it's going to expose it uh graph node is going to then expose it in the graphql API as a data object so let's see it in the wild so um we already have we've kind of walked through the basics of like setting up

the front end the back end our Docker container we've deployed our contract we've made some changes to our our contract but now we want to actually ship our subgraph which is already written for us so we can do that by just doing yarn local create first you only need to do this once what it's going to do is basically create the subgraph uh configuration inside of the docker that's going to expose the um graph iql endpoint so that we can query it and kind of experiment with it and then we just need to a do a yarn local ship so what that's going to do is uh has anyone here deployed a subgraph before no not showing hands Okay cool so I'm excited everyone here should do this at

some point tonight uh or tomorrow because it's really really easy uh you'll see uh to quer the data we care about so uh it's basically going to go through it's going to copy across like the ABI it's going to just make sure that this the subgraph configuration is free of like any errors like you may have like messed something up if there's an error it's going to tell you like hey something's missing from the Handler or something like that there's no maybe a variable is missing but basically it's going to go through and compile it and then it's going to want to deploy it and then it's going to ask you what version you want to use so in this case we want we can you can think of the versions of your subgraph should be lined up to your smart contract's versions so as you add

a new function to your smart contract you should probably iterate on the version of your subgraph so we'll just do one so it's going to compile it it's going to send it over to uh the Manifest and all the files to ipfs it's going to then expose um the data object here inside of this URL so we can grab that and let's go to here paste that in okay so we have this pretty graphql query uh thing and we can we can um let's just close these and let me show you something here so we can say new and we can go to explore so graphql is very powerful because based on the

schema it builds this kind of cool Explorer for you so the you can explore the data so we could go in here and say okay well we want to look at the greetings uh we can say I want the first five or first 10 in this case I want to know what the ID was I want to know what the greeting was what the premium was uh and then I also want to know the sender what was the sender's address uh and then hit play and then we were able to just get uh that data right exposed in one easy to query graphql API so we don't have to do any eth calls we don't have to do this looping thing we just make one HTTP call at the endpoint uh and we can get the data object that we care about and then we can parse that so

what does that look like in your front end so let's go back to uh vs code and I haven't really touched on the front end yet but uh the cool thing about scaffold e is it does come with all the boiler plate code for you and those kind of uh uh you know debug contracts tabs and way for you to explore the data um we can we can assume that uh if you're a front-end developer if you have a front- end developer then you can kind of hand it off and he can start doing some stuff and I'm going to get into like some some reference for that to make it easier for your team but more importantly is I just want to show the Pages directory so inside of the the nextjs folder there is a two a couple things that are worth note one is the scaffold config so here

you can update the chain so if you want to switch to like gly or Saia or something like that you can change that here uh which is really useful and then you can also deploy your you can just deploy your contract to a test net but I want to touch on the front end so if we go to pages and then we go to uh example UI inside of uh sorry not Pages components so there is Pages which has the index TSX file and there's also the example UI there there's the debug contracts folder that kind of shows you how it how it works but inside the components folder so we do use components there's an example UI folder and then inside there's a contract data TSX file and if we go into here we can actually look and see how you query the

data with graphql so if we come down um here we have a uh const which is just a variable that defines what our uh query is and so you can see here I've just basically put in the the graphql query into the uh variable and then I've used uh gql and use Query to essentially formulate a graphql uh uh request you can set a poll interval if you want like if you want a pull the data over a certain amount of milliseconds in this case is uh th000 milliseconds and then we can see here that we're actually console logging that data in a greetings data object okay so the example is really here for you already um none of the the the frontend really is using

that data but let's take a look at what it looks like so if we go to scaffold eth and then we go to example UI and then we go to view developer uh view Source oh sorry not not source uh view developer developer tools and then we go to console and hit refresh and we can see here that we're actually logging the contract data inside of here I know it's really hard to read oh there we go so we have this greetings data object and we look inside there we can see the data here it is and then there's two greetings and here they are in an array so then you could take this data and displayed in your front end however you want right so if you care about like

the first 50 objects or or whatever then then you're kind of set okay so um inside of my uh repo the workshop all the way at the bottom there's kind of like some uh detailed documentation for like if your team wants to be able to you know interact with wagi this is a list of all the wagi hooks that are available because we use wagi um there's also so scaffold e has its own set of hooks uh and so if you want to understand how those hooks work you can go into there we AA also has its own components that are available as where so these these top three things are really useful if you're a front-end developer and you want to learn how to like build some stuff uh out there um and then there's also a bunch of other

resources here so these are really really valuable um since we have some time let's actually go through and like add some changes to our smart contract and so inside of our example we have um we can actually probably get through and actually showcase how to add uh an event and add a new subgraph configuration so let's do that so let's say we want to add a new event okay and a new function so we want to Let's assume for a second we want to send a message on the blockchain this is probably not the most ideal way to do it um but we can create a function called send message and then we can take in a value of who that address is going to go to or who the message is going to go to and then we can also take in a uh a

message as a string over uh call data and then we can make that externally available and then we can emit an event based on the data that's passed in that uh transaction so let's do that real quick let's go to our uh hard hat packages folder go to contracts your contract and let's just create that stuff so we we have our contract here uh let's just go right below and we'll add an event and we'll add a new function so here we can see we have uh highlighting so we know that everything looks pretty good uh let's save that so again this is just going to take in an address take in a string and then send it across as an event in the the contract so if we have a new um deploy we can just do yarn deploy sorry Das

reset so it's going to take our smart contract that's been updated recompile it update it it's going to inject the ABI into our front end for us automatically and it's going to allow us to start testing so we can go over here and we can go to debu contracts and we'll get a new new new block right now we have this new send message so let's send vitalic message M so you can see here we got this cool like functionality as well where we do ens resolution so it will resolve the ens address for us um and then we can say like hey what's up like this and hit send so uh there we go and we get a receipt so we know it was sent but we don't have anything in

our front end like where did it go it went on the blockchain it was an event um but we don't really have anything to show for it so let's instead start querying the data for our messages with with a subgraph so inside of my again inside my workshop we have the steps to do that um let's go here and I'll walk through them with you um so the first thing is we need to create the the schema that we care about so in this case we have some more objects that we care about we have the message we have a messenger and then the receiver so we have kind of now we have three objects so we can grab the uh the the the schema the schema and entities and we can come over to our uh subgraph configuration so in this case we'll go to subgraph we'll

go to source and we'll go to the schema and we'll just add these additional ones that's it so we just added those to existing ones that we already have so again if you had a smart contract you might care about certain things you would design your schema around the stuff you care about we'll save that then we need to add the entities here to our our our manifest so again we we we talked about it before but we have this subgraph yaml configuration which defines the address we care about it defines the network we care about it it also uh defines the entities for that we want to that we want to actually index and store so in this case we'll put those in

here so we have the message message the messenger and the receiver which are all defined in here I saved that y uh now we can also add a Handler so as I mentioned before if you want to process data in in the graph then you need to uh handle that data so we just add an additional Handler we still care about the greetings in this contract because the the function's still there but we also want to add this new Handler which is going to track track the send message function and here you can see it takes an address another address and a string and we're going to use the Handler called handle message right we can save that and we're good so if you've started making changes to your contract um you're going to need to regenerate the ABI because we've changed the Abi the

old ABI is not going to work anymore so ABI copy is a command that's going to take your new ABI and inject it over to the subgraph package for you and then code gen is going to generate all of the uh code configuration that it needs so we can do that there we go so it successfully generated it uh and then we can come in here and then we can start adding the mapping so the mapping like I say probably the most complex thing when you start building subgraphs um but uh we can load it up and kind of I'll walk you through it here so let's say we have our mapping here so we're going to use the same mapping file but the the main difference is that we want to actually uh import the send message now from the

schema or sorry from the contract so we're going to uh import the send message which is just the you know the event essentially and then we're also going to uh import the uh stuff from the schema so in this case we're just going to add to the existing one that we have here so we can just replace this line but we already have the greeting the sender and you can see that uh uh it's basically detecting that we're not using it that's why it's light blue um but we're going to that that'll change as we add our Handler so we're can save that and then the last thing is the Handler so I'm not going to walk through the whole Handler but it it's it's a it's pretty easy to use uh or to understand if you kind of walk through it one by one essentially all we do is listen for

the event send message we set some strings based on the values that are coming from the event so the from the two and we're converting them to hex string so that we have them in string format we're seeing if the messenger exists if it doesn't we load it or if it does we load it otherwise if it's null we create it and we create some interesting values about it like it's address and stuff like that um and then we increase the count as well then we have a receiver same thing we load the receiver if the receiver doesn't exist we create it uh same thing with the message we see if it's available uh uh oh sorry the message there's always going to be a new message so here we're not checking to see if the message exists we're just taking the message that comes from the event and we're just

processing it and putting it in the uh post and that's it so we saved that so we now we have these three the whole new subgraph configuration so now we can take it and deploy it so we can do yarn uh local ship and it's going to do thing it's going to check it make sure it's good compile it and then it's going to ask us what version so we'll do two as we've reiterated on our smart contract so we've done that and then now we can come back to our thing here and we can do a search and in this case let's refresh it real quick go to explore and we see that we get new data objects so now we can go we we care about the we care about the messages yeah so let's go to messages we want to see the first

five we can we want to know who they came from the address and we want to know uh uh who they came to the address and we want to know what the message is play there we go so there's my message to vitalic locally but it's already ingested so graph node is running behind the the the um you know inside Docker listening for the events that are on my Smart contract and injecting them um yeah so that's pretty much a good walkthrough of scaffold eth I know there's a lot there to unpack uh the benefit is like I said going through this Workshop probably take you like an hour or two to do it on your own um but it's it's pretty easy to do um and Hope if you guys have problems I'll be around um yeah happy to help you guys and thank

you guys for coming do you guys have any questions yes oh hold on one sec let's get a mic for so uh say you're already comfortable building with uh your smart contracts with like Foundry um and maybe you just want to use scaffold for your front end so that you don't have to deal with building your own uh functionality with uh you know setting up wagm yourself or your own input that validates addresses or uh you know uh currency amount um like is is that also I guess with scaffold be of enough

value if if you're already if you don't want to do the full stack using scaffold um I mean sounds me like you're mostly interested in the front end benefits of scaffold e um so I mean I would just probably use the um the this thing the MPX command to spin it up because there's an option for Foundry there uh so it's kind of the same thing uh there would probably be some editing that you would need to do for the base version to get it to work um but I'm sure it could be done it just might take you more time than it's worth than just using the npx command okay thank you yeah no worries oh think he had a question uh I'm just wondering what is

hard hat what is hard hat okay great that's a good question I probably should spef specified that so hard hat and Foundry are both like virtualized essentially ethereum virtual machine virtual virtual machines uh it's just a way to simulate evm so it simulates all the calls that are compatible on ethereum network uh so you can deploy your contract there it also has a bunch of tooling as well so like I didn't really get into it but like you can do testing so I think it's there I don't know if they added it yet but you can do like yarn test oh sorry see if it's there uh yarn test is going to like actually test your smart contract uh it's going to fail because oh it did pass um so there's some testing built into there that you can write with uh JavaScript to be able to

test your contract Foundry also yarn test Works uh and it uses smart contract um solidity testing as well so it's really the they're kind of like toolkits for um developing on ethereum so you can kind of pick which one you want um hard Hat's kind of older but um I think it's more feature complete right now but Foundry is very popular because people like to use the solidity testing that's in uh Foundry which is pretty powerful too because you can write your test in solidity and you don't have to know JavaScript hopefully that answers your question thank you yeah any other questions yep uh what was the URL for that repo the full yeah so just scaffold eat.io will take you to uh the repository link but it's just if you just Google search

scaffold E2 it'll pop up the youl from my workshop is that yeah sorry uh it is so if you go to bit.ly fullstack DAP that will take you there okay sweet thanks yeah no worries I need a QR code for it oh you know I can just bring the QR code too let me do that real quick there we go cool another question oh can you pass in the mic thank you um I was going to ask about the indexers and what it takes to actually host one uh to host what indexers that oh for the graph yeah for the graph yeah yeah yeah uh we have entire Indo indexer Community uh I think the best thing to do would be to go on the Discord server for the graph uh there's an indexer Channel um there's

also some documentation um right now there's a a a something called Launchpad which is a kubernetes kind of solution to deploy uh an indexer uh it's called Launchpad um I personally have not set an indexer up because it's kind of complicated um they kind of recommend that you have like some devops experience um but it's definitely a cool thing to do for the community and if you're interested um we can chat more about it afterwards yeah cool awesome another question no awesome thank you guys so much for coming uh I hope this was valuable and good luck hacking guys