Full Stack Dapp Development With Scaffold-ETH and The Graph

[Music] all right welcome everybody it's great to see all you guys thank you so much for coming to my talk uh my name is Kevin Jones I am a developer relations engineer working for Edge and node working on the graph protocol uh I am also one of the members of the build Guild uh working on scaffold eth so this talk is actually kind of like geared at both uh subjects but more importantly we're going to be talking about uh how to build a subgraph with scaffold eth and also how to build a subgraph with a studio it's going to be a bit of a speedrun so uh I hope you guys are ready because we're not going to do a lot of slides and a lot of talking and it's going to be actually like setting everything up so um this is kind of what we're going to build uh basically scaffold eth is a toolkit that you probably have heard of it's got everything you need to basically build AAP really quickly so it's it's really good for hackathons it's really good for prototyping and there's a direct integration called the subgraph package which is available as a branch in GitHub that we're going to use um the the value ad here is that we're going to use nextjs as our front end uh so we react with nextjs we're going to use hard hat for our back end for writing a smart contract and then we're going to use the graph as a a middle wear layer to basically do all of our indexing uh the reason we want to do this is because really uh the ethereum blockchain is not ideal for reading data um and you have this issue where uh it's not easy to interface with the Json RPC and so you really need something like the graph to do that and uh that's the value uh proposition for what we're going to do I only have one more slide and this is what the graph is so uh if you haven't heard of the graph the graph is a decentralized indexing protocol for a lot of different blockchains ethereum one of those and it essentially takes uh the the design Theory where you build a Dap and instead of querying for data from the smart contract uh via ad Json RPC you write your transactions like you normally would uh via you know the normal blockchain uh and you know that's incentivized for rights really and as your smart contract emits EV events um those events are picked up by graph node and those are indexed using uh a wasm module uh that's written in assembly script this is uh then stored on postgress inside of a database running on the indexers and then it's exposed with a graphql API so the value is that you can utilize graphql for blockchain data right that's the only two slides I got uh we're just going to kind of dive in so you know scaffold eth is an open- Source toolkit it's available on GitHub you can go to scaffold eat.io uh you can basically there's two ways to install scaffold eth you can install it with uh git or you can install it using npx npx is in beta and if you want to do this subgraph package you're going to want to use git because it's a special Branch um and right now there's no way to uh set up the graph with the npx way so you're going to want to just click on the GitHub link right here and when you come here you can see uh scaffold eeds so you can see here this is the main branch it's got like all the kind of walkth through the read me how to set it up uh but then there's a special Branch right here called subgraph package so you can just select that uh and this is going to be a special branch of scaffold eth that comes with the graph so it's the same uh it's pretty much up to date with the main branch of scaffold eth but it's just got an additional uh package uh called the subgraph package so um I've gone head and I've basically already checked out the repository um I'm using t-mo which is a terminal multiplexer so it just allows me to give three windows open here um everything you do in scaffold eth you kind of have a few windows open so that's why I've got four uh we're going to need one for our back end we're going to need one for our front end we're going to need one to do deploys and then we're going to need one to run the graph infrastructure that I just talked about so we can set this up if you do a yarn install it's going to go in there once you check out the package it's going to install all the requirements that you need okay um that takes you know anywhere from a minute to two minutes depending on your internet connection and then you're pretty much up and running um then you can do a yarn chain so yarn chain is going to do exactly that it's going to spin up your chain uh if you're using the subgraph package that's hard hat if you use the npx command that could be Foundry if you choose there's an option for that uh but for this sake we're going to be using hard hat so it spins up hard hat on Local Host and it also gives you all of your your accounts like to basically play around with with fake eth right uh then what we can do is in the second window here we're going to do yarn start so this is going to spin up react with nextjs and uh pretty much all the code base is in nextjs it uses app router and it also uh is written primarily in typescript but it also does support JavaScript if you want to write in JavaScript but as you can see it's nice and snappy super fast right we're up and running so we're always going to keep kind of those windows up um the next thing we can do is we can do a deploy so um as you can see everything's kind of like around these yarn commands to make it easy so the next one is to do yarn deploy so yarn chain spin up your back end yarn start for your front end yarn deploy to take your smart contract that's in the in the package and deploy it so it does come with the smart contract that we're going to look at in a second and you can see that we got our deployment uh basically was successful we can see the address for it we can see that it uh created the types in typescript um and the cool thing is is it actually as you deploy your contract it injects the ABI into scaffold e as well which I'll show in a second and it gets you kind of up and running uh the last thing that we want to do is spin up the graph node infrastructure so on top of the front end and the back end we also want to spin up uh the stack for graph node so the stack for graph node we just do yarn run- node so this is going to be all running in Docker so you need Docker installed on your machine uh obviously when you want to ship to like a test net or to like main net ethereum then you can move it to the decentralized network if we have time we're going to deploy a contract there as well but you can see here that uh the graph node uh is basically coming up you can also see that ipfs is coming up and you can also see that post grass is coming up so that is the stack for the graph it is graph node which is written in Rust it is postgress which is for the database and then it's ipfs for all of the uh configuration files and the manifests right so that's it so we were able kind of with these three Windows set up a complete environment for doing some local development okay so let's go back to our browser and let's go to Local Host 3000 which is where scaffold eth is running right so scaffold eth uh again it is a react app you can see here that we've got scaffold eth up and running it kind of gives you some hints on how you can get started editing your application by going to page TSX tells you where your contracts is located uh and then really what's really cool is this debug contracts folder the debug contract conts basically uh is automatically generated based on your smart contract so if you make a change in your smart contract redeploy it you will automatically get all of the read and the write functions and all of the reads for your variables as well so we can instantly know what our contract does without even looking at the Smart contract it's a very basic contract that has a read to get a counter it has a write function to basically write uh a greeting a new greeting and then it has a section to add value to the transaction as well and it has a function to withdraw funds from the smart contract and then it has a greeter called building Unstoppable apps it has an owner variable that's set up so it has some kind of like Access Control out of the box some booleans and a counter so we could come in here and say all right Biddle week like this and hit send it's going to basically tell me that I don't have funds to pay for this transaction okay uh out of the box you'll notice too that we don't really need to connect metamask because we have a burner wallet in the top right corner so you can see here that it's it's actually empty doesn't have any eth so I don't have any gas to pay but I can just hit this little button right here and get some funds from the faucet so I'm instantly able to do that again and then hit send and then now we can see that that state variable was updated right so really easy we can start prototyping so let's let's take a look real quick at the code base so that you guys can see what it looks like okay uh it is a mono repo so what that means is that you have a base yarn package uh you know repo and then inside of that packages folder you have like sub repos like within repos within that main repo and so we have three we have hard hat which is our you know our chain we have nextjs and then we have the subgraph okay so if we go to hard hat and we go to contracts and go to your contract we can see that contract so here we have a contract that's basically uh called year contract it has that string that is the greeter function right here and then it has an event that gets emitted every time that the greeting changes okay and that's that's the important important thing that we're going to talk about right now and it also has a function here that allows us to set a greeting by taking it in as a new value right so that's what allowed me to you know make my change on the friend end right there right so um let's say now at this point we wanted to be able to see the data for these we we've made some transactions and we want to actually see that data right what how do we get that data Well normally you would need to have a listener and you would need to subscribe to all the events that are happening on your smart contract but in this case we want to do that because that's a little inefficient because we would need to Loop over and like uh create some kind of like um you know uh for Loop to get all that data uh so we're not going to do it that way we're actually going to use the graph so if we go back to our uh package and go to the subgraph package we can look at what the subgraph looks like so as we have a subgraph we have a sorry a smart contract that is already written for us we also have a subgraph that's already written for us so out of the box you have one here that is exactly matches what needs to be for your smart contract and so really a um uh a subgraph is three files it's the Manifest which is this kind of like main yaml configuration that we're looking at now it's a uh a schema which is basically how you want to store that data and organize it which is written in like graphql so if you're familiar with graph ke you've probably seen this before and then you have a mappings which is the assembly script that is compiled down into wum to process the data so this highlevel subgraph yaml is basically telling you okay well what network do we care about so this is Local Host right what contract address do we care about it's right here it's also injected when we do a deploy well what entities do we care about well we we want to track the greetings as they change and we also want to track the senders like who actually sent the greeting and then we also want to tell it exactly what handlers to run right so this is what needs needs to happen every time that an event happens so here we're going to say okay here are entities and this is what should happen every time that this particular event is fired off okay so we're going to say here handle this event and process these data types so we can see here we have a greeting change it has an address string booon and then an unside integer and those match exactly what is inside of our smart contract uh sorry yeah our smart contract so if we go to the event that's exactly what we see here in these values so what we can do is take this subgraph and take this map mapping module and we can deploy it to the graph node infrastructure so we can do that also with simple yarn commands so we can say yarn local DC create which will you only need to run this once but what it does is it takes your subgraph and it deploys a uh instance of it on your graph node instance and you only need to do that once then you just need to do yarn local uh- ship and what this is going to do is it's going to uh read in the subgraph configuration again it's already written for you it's going to compile it down it's going to check to make sure there's no errors in it um and then it's going to ask you to deploy it so you can see here we have this uh sorry that might be hard to read but on the very bottom there's a version that it wants to know so just like you make changes to your smart contract you also need to make changes to your subgraph and because your your smart contract's evolved they add new events you also need to add new events to your subgraph so this version might change we can just do one now it's going to take the subgraph and deploy it so now we can see here that our subgraph is taking the data from hard hat and it's pulling all that data and dumping it into postgress for us in the back end so and it's also going to give us a query URL which is right here so we can grab that query URL and we can load that up on our browser and we can start looking at the data so if we go to explore the cool thing about graphql is graphql gives you the ability to kind of like you already know what the data is going to look like based off the schema which is here and uh we can see that there's two entities greetings and senders and so if we come here to explore we can start to explore that data uh again this might be hard to read let me zoom in but you can see here we have greetings so let's go to greetings and we can say okay well I want to get the first five or first 10 greetings I want to order them a certain way we can do by the transaction date or created at we can do it order ascending or descending we can choose what we want to get so we can get the greeting ID the premium whether it was paid how much value and then we can hit play and then we can get this data back in a single query so this is a lot more efficient than having to do a listener where you're actually like having to pull the Json RPC uh over and over and over and over and over again to get the data instead we can just do one simple HTTP query against the graph node instance and get back that data okay so this data as you can see there's it's the first 10 that I did I kind of spammed it at the beginning and we can basically load that into our front end um so if we look back here I want to touch base on this real quick too so what's what's the magic what's what's the magic that's doing this well it's really this assembly script code uh this is kind of like the power to like how the graph Works uh what it's basically doing is it's ingesting all of the um the ABI and it's basically creating uh types to Bas basically interact with those using graph TS and then it allows you to do things with those so you can see here we have one Handler that is called handle greeting change and if we look back at the uh subgraph yl that's what's uh referenced here so if we go to the mappings again we can see that what happens is we every time there's an event called greeting change we check to see uh um what the sender is uh the sender string and then if it if it uh if it if it if it's there it basically loads it in based on the string if it's null it basically creates an object here and it sets all the data for those uh the key values so in this case we have the sender the message sender the address of who actually set the greeting uh who uh when it was created based off the time stamp from the ethereum Block and then the counter which is one now if this already existed in the database then it would actually increase that counter by one right so it's doing some logic here and then we also do the same thing with the greeting we uh create a uh transaction basically ID and then we load in all the parameters from the events here so the greeting the sender the premium the value the timestamp and then we uh put the transaction hash as a trans uh a hex value and then we save it so like these last two steps is basically where it saved inside of postgress on the index exert now this is all local development right um what we could do is we could then deploy our smart contract to an actual test net or to a main net and then we could uh create a subgraph from there so that would be the kind of like the next steps uh the other thing I just want to show off too is like nextjs if we go to nextjs we're using the app router version of nextjs and you can see that there's a subgraph uh section here and if we go back to uh the UI and go here sorry uh here there's this subgraph tab and we can see uh kind of the same kind of hints tells you how to start the node how to create it how to ship it and how to clean up data if you want to like reset everything but what's more importantly is down here on the bottom we have a table that is basically indexing that data so if you want to kind of see what it looks like to put in your front end you can reference this subgraph page that's here and it kind of shows you exactly how it's getting the data it's basically a component that is uh making the query which is here formulating the query it's using uh gql and use Query to basically get that data back if there's no data then it just displays nothing if there is data then it kind of parses that and put uh displays it in a nice pretty table so um yeah really easy out of thebox experience now as you start getting more into subgraph development you might make some changes um what I would recommend that you guys do is go to the gra.com and go to products and you can go to uh subgraph studio and you can create a subgraph on any contract that we support um so you can just say create subgraph name it whatever you want like Biddle hit create subgraph and it's going to give you all the instructions you need to create a subgraph from this portal so this is very useful because if you let's say you want to use uh like earlier I did one on the buff ofor uh buff aorn bidle Brigade so I have it here deployed we can take a look at it I index the buff aorn uh nft contract and we can see that I did it 7 hours ago it's fully synced all the data is there and now I can go to the playground and I can do the same thing I can say all right well let's get the events for all of the transfers so I can say all right what are the transfers for the first 10 order by uh transaction timestamp and Order descending and then actually let's just grab the very first one and let's get the two and from and ID and you can see how easy it is to get the data you want and hit play and then so now we can see that the um the very first uh based on timestamp descending data for a NF uh being transferred was here which is 4210 it's the token ID so it's really seamless uh experience developer experience um to basically create a new subgraph from scratch um there's also other subgraphs so you can go to subgraph Studio you can go to graph Explorer and there might be already be a subgraph so if you're like building let's say a defi aggregator or you're building like a a no code or like a a dashboard or something for dii you might search for a specific uh you know subgraph so in the most popular one is unis swap we can click that and we can start to get interesting data about Unis swap you can also see sometimes that there is a uh link to the source code so that you can go there and see how it works you can look and see how a subgraph is created on their on their end and then um yeah then you can start exploring the data here um and then from there you might get to the point where you actually want to Signal your subgraph put it on the network uh and then it would be picked up by the decentralized network and so the the value proposition here is that the graph aims to make uh data for blockchain truly decentralized uh by Distributing all this data um across the blockchain uh the indexer sorry indexer Network and yeah so I hope that was useful and uh I'll be here to answer any questions that you guys have because I only have 12 seconds left but uh I hope that was useful thank you guys