The Graph 🛠 Indexing your smart contract with The Graph - Pranav Maheshwari

foreign [Music] Audible audible all right so we're gonna talk the list and do the most number of code developments we can so if you have a laptop just open it because uh it's gonna be a lot of fun hopefully by the end of this particular Workshop you should be able to deploy a subgraph and understand what the graph does which is basically indexing blockchain data so what is basically indexing indexing means getting information which is already existing in the in in the database in a more skewed format so that you can get it for your own like you know needs for example there is so much data that exists in the world right but you just need data that is required for your particular application for example when you see a ethereum block you should be able to see there is so much data that exists in one particular ethereum block there is make a DOT transaction in one particular ethereum block there is uni swap transaction in what one particular ethereum block there is a obvious transaction and let's say you are a uni swap developer and you just need information about uni swap how do you get that that's what is indexing so basically indexing information is that all the blockchain has all the data but you just need information for your own needs and for that you need to create a middleware such as sub graphs so that the smart contract which has all the data can get the information that is required to your UI using a middleware and that middleware is called a subgraph so in tldr a subgraph is basically a middleware which gets the information that exists on the blockchain for your own needs and uh that's about it so basically this idiom blockchain is converted to such simple databases which can be queried via graphql apis that's what is the graph in in one word we can also say the graph is actually Google of web3 in Google we have web to data there is so much web to data that exists but Google if we just search it Tokyo it Tokyo it will only give me things that are related to eat Tokyo and the reason behind that is there is so much web data but we just need information for our own needs and that's where Google indexes all the web web to data to give you what you need in the graph as well there is so much web3 data the blockchain data is basically open source you can do whatever you want with it you can actually get in whatever information you need but there is so much data you just need information let's say of all the arbitrary Arbitrage position that is between pancake Swap and uni swap for that you just need to have your concentrated information on for that you will be creating your own subgraphs so uh there are two ways to do it the first way is you create your own indexer uh burn the whole dap and that's how you create it that's normally the web three-way but not the correct way all right there are better ways to actually get the information to your UI and that is by using this middleware known as a graph by creating a subgraph so that you can get that information for your own needs so that's about it I'll stop talking and let's go together all right I'll start from the very Basics we'll first of all deploy a smart contract and then we will create a sub graph out of that smart contract then I will do a transaction on that particular smart contract so that at the end you can see that that subgraph has indexed that particular smart contract and you can get the information you need for your smart contract all right let's do it let's go to remix.com if you have a laptop right now just open it up and at the end if you're able to create a subgraph with me uh we have some exciting Rewards which are different from bounties so first of all I just create a subgraph let's say an ERC 721 which is mintable okay we create this remix subgraph this smart contract all right we have the smart contract everybody has seen this ERC 721 nft basic mintable smart contract I have not created it I've just gone to remix and just you know taken the uh the code template so this smart contract is with us now what we do is just deploy it let me check that I'm not on ethereum midnight otherwise the workshop is very expensive for me okay I'm on guardly and I deploy this smart contract inject web3 deploy the smart contract send transaction uh can somebody send me some girly eighth send transaction come on network is busy oh my God okay let's do it on sepolia which is the new test net it's a live demo Anything Can Happen by the way I wanted to make announcement a right after the end that sepulia is now on the graph but now you know I'll be deploying a smart contract on civilia and then doing a subgraph on that so the big news is that the graph is now integrated with sepulia chain and you can deploy your smart contracts in simple yeah and we're gonna do it right now so let's just do it this is sepolia testnet hopefully this works if this is not then I am texting ethereum Foundation that we need to talk so okay so the smart contract is being deployed by then what we do is we on the go on the graph Studio we go on the grass Studio and uh basically just log in with our metamask once we have done that I'll create a new subgraph and I'll name it Iris who's sitting right there yeah my colleague from the graph and use sepulia testnet create a subgraph so Iris sub graph which is a iris nft is uh uh is is having this kind of a UI which is a studious UI right and if you are new to the graph the first thing you have to do is have the libraries installed globally so npm install.g graph protocol slash graph CLI this is this particular thing that you have to deploy once you have that you will be on Terminal and if you do just graph you should be able to see all this if you have this that means you have all the global libraries that are required okay I hope that the transaction is done and we have ours smart contract and we need to actually like verify this particular smart contract okay so I flattened the file first of all this is the Smart contract I flatten the file a little bit not little bit totally flatten the file and verify single file 0.18 I hope I'm not very speeding up if you are coding with me just be able to code along and then I just deploy I'm not a robot verify okay so my smart contract is verified now I can just go here and be able to check I'm also gonna tell you specifically why I verified my particular smart contract so basically with the graph we created tools so that you don't have to like write a subgraph from scratch most of the things most of the events are already catered upon and you just have to make changes so that your UI needs are fulfilled all right so we have just a small tldr we had uh we had a nft called as Iris that we deployed right and then we deployed it on the sepulia network and we actually verified that particular smart contract and it's verified now and we also logged into the subgraph studio so that now we can do the next things right we go on the terminal now and I create a mkdir known as Iris nft you're getting very famous today Iris yeah I need some money after this okay Iris nft so we are inside now I'll do graph init dash dash index events so that all the events that exist in a ERC 721 721 open Zeppelin smart contract which is equivalents all the events that exist which is transfer approve and approve for all all these events are actually indexed by the uh by the subgraph so basically sub graphs index events and in all the smart contracts we have events so that we can show that to the front end but there is no way to actually show that so you create a subgraph so that the events can be indexed right so in a ERC 721 we have three events transfer approve approved for all and all these events will be indexed by the subgraph by just this magical command Dash Dash from index from contract and then I paste the contract address which is this one that should be okay wait graph in it okay uh this is it this should be able to so this is a evm chain sepolia is a evm chain by the way the graph is also on Cosmos near uh and other places but we'll this is poly as a evm chain so we'll just deploy it there this is sub graph studio and the slug name is Iris again this is sepolia so we'll choose sepolia and this is a smart contract so you see fetching ABI so basically I've verified my particular smart contract so that the the graph command could fetch all the events from the ABI because I verified it right it could not fetch the start block so I'll just take the Smart Start block from here this is the start block contract name is contract and this should be able to just generate a subgraph for us so an ERC 721 has three events right and those three events will have one subgraph so that we can index all the activities happening on the iris nft uh how many of you have been able to reach till here okay nobody wow I like it no problem you have a lot of time we can always talk after this Workshop as well but this can be a great introduction to this amazing piece of infrastructure which is going to be the Google of web3 all right we go inside okay so you see the sub graph is already created and I'll go in a little depth to explain you what are the parts of a subgraph right there is first of all a yaml file which actually defines what's inside uh the graph what is inside the sub graph what that means is that a sub graph has three things the first is you need to define the network where you are deploying it right which is sepolia if it is on Godly this would be girly if it was on a polygon it would be magic if it was on no system it would be no sustain so on and so forth so first of all you need to define the network the second thing is you need to define the address you are actually the smart contract address that you're actually indexing then the start block and then there is this mapping file right which is always come up in that there are these entities this is the most interesting part of the sub graph uh what are these entities are the schemas basically you see here they're already created by the sub graphs by that graph init index event file so basically when you have a smart contract it has events approve approved for all transfer I showed you that and according to that it creates its schemas for us so that we can you know basically query these so when when I actually go on this this particular smart contract and hit transfer that means I have done an event right and that needs to be indexed so that I uh so that you know at the end the dashboard of your UI can show that this Iris nft id1 was transferred from my address to some other address in your nft Marketplace for example right so basically you create these schemas so that you can tell that okay An approved function was done a transfer function was done that will be required for your UI so the first thing is you always Define the schema right here are the schemas with all the things that you want and the second thing is the events right you are actually indexing events and then converting them to schemas so basically what happens in ethereum is that you get events right and those events give you data that data needs to be put in such a way that it can be queried so basically these events have raw data and the mapping file converts those raw datas to schemas right and that's about a sub graph you define a subgraph in yml file then you have these mapping files so that these events which have the raw data can convert the data into schemas which are such good looking so in the mapping.ts file you actually Define in typescript that how do you want to convert the the data from the event which is raw data to these schemas that's it so mapping.

ts file is the major file where you Define logic that's it so this is all about it we have everything that's required and now we will ah the schema is defined by like it's by default but if you want let's say just a uni swap position so I'll just delete everything and just have an LP position with ID transaction from transaction 2 and stuff like that so whatever you want to query you just Define in schema and according to that you set the mapping.ts file which is the logic for the event so that the schema can be created that's it well great question by the way so this is about it now we will deploy the subgraph and see the magic of how you index information in such good formats we do the graph auth this is my key don't use it guys if you do then you are really bad people so the I do the auth then I do code gen and graph build okay everything works and at the end I just deploy this sub graph in the studio one zero point one so you see it took 20 minutes for a person to have a smart contract have information via graphql apis so the subgraph is deployed and I can just go on the playground which I cannot see right now okay it's deployed and just refresh Maybe yeah you can see that the subgraph is deployed I can go on the playground and check it's empty right this is cool I can just go to transfers and I can still see uh let's say from idn2 and it's still empty wow so much work and nothing done why because we have not done any transactions guys come on you're not paying attention let's do a transaction and then I'll show you that the that that indexing happens in a second if you don't use a sub graph you'll have to create a whole indexer have an event being you know tracked every time and pay 100K to AWS but the AWS office just around that corner so don't tell them uh so this is it I'll just I'll just save mint and rsnft for myself is that okay Iris okay uh so I just go here and do and do one and just do a safe mint so I've transferred one nft into my particular account and now the transaction once it is successful you can you'll be able to see that the sub graph is able to catch that event get all the information from to ID and whatever you need and be able to serve you is the transaction successful not yet we need a layer to two test Nets too I guess who's building one okay the transaction is successful and it took 31 seconds and now you just go here boom you see the information right so as soon as the transaction is successful you see the indexing happening and now you have this amazing graphql API over here and you want to query anything around you know let's say Iris nft or let's say you have board API club nft right and you want to know that who is the top most holder right you want to know who owns this particular ID nft and at what point in time he bought it at what point in time scram he bought it you can get everything just by indexing that particular smart contract so this is the power of creating a subgraph at the end you need a subgraph as a middleware between your smart contract and your UI so that you can put in all the information from the smart contract to your UI so that's the missing piece in creating a full stack decentralized application this is about it guys this is about it why do you need the graph because there are 15 million blocks in ethereum and if you want to create your own indexer you'll have to scan every particular block and get the information who uses the graph everybody who has good brains and good devs so that means uni swap has a info.uniswap page right you all might have seen that all of you are who are billionaires because of crypto has seen it so who has seen it okay just uh Marcus Maybe so yeah so you see this particular info.unisa page right and all the information here is just smart contracts interacting so you are a user you go to uniswap you interact you USD to usdc swap and that swap is a smart contract event that's tracked by us uni Swap subgraph and you get the information here see this is a uni swap subgraph I'll just expand it a little bit if I can but yeah this is a API dot the graph.uniswap so basically uni swap has created a sub graph so that they can get in all the information from their uni swap smart contract into this UI page so basically as I was telling you the tldr is if you have a smart contract and you want to create a application which is used by humans not junkie developers you need to create a UI and for that there is a middleware known as sub graphs so that you can use it right so this is about it we also have sub streams coming by next month right but you can still use it basically uh indexing events for really fast scenes like polygon and ZK sync right now coming it's like a one second block and you need to index everything and if you have let's say 10 000 transactions in every block then it's it becomes a little tough to scale it and with the current subgraph infrastructure that's why we have substreams with sub graphs you can only index events with substreams you can also index every granular data for example you can index addresses so basically you can give your Degen score to a particular address by all the interactions it has done on the blockchain all the transfers it has done on blockchain everything there is something known as on chain reputation which is becoming very big right now and you need to compute and addresses on-chin reputation based on what it has done and for that you can use substreams it is already coming along it is a different stack but I just wanted to introduce this because we have bounties right good good bounties this 1800 bucks can get you some good meals in Shibuya crossing right I went there yesterday good good place uh so if you create a new subgraph you can get 1800 bucks 1400 bucks or thousand bucks based on your capacity and how you developed it or what you can do is be a little more intelligent like me yeah and uh create use the existing subgraph for dashboards for example I'll I'll give you an introduction to that as well for example there is so I have a repo in which I have Crea you know named all the top sub graphs right this is the repo misari erc721 lens protocol sub graph so if you are using lens and you want to just you know use something for your dashboard for a simple hack let's say you want to find out which lens address is the biggest camera or something like that you can just use the lens protocol sub graph and use it for uh you know creating good dashboards one good example would be in eth India somebody created a Arbitrage bot for all the uni swap sub graphs so basically what you did is uni swap is deployed on three chains and let's say usdc eat price on polygon is more than it's it is on ethereum so we just queries the sub graph and it shows it on the dashboard that there's the Arbitrage opportunity there is arbitrage opportunity right these kind of innovating things you can do just by using a subgraph already created by unisarp team or misari team and do your own thing so this is about it this is how you create a subgraph and index information for your UI that's about it and this is about me if you have any questions I'll be here for three days if I'm not uh you know going out and drinking Saka so you can find me here and by the way this was the last thing that I introduced the first a news that the graph now indexes sepulia testnet because graph test net costs girly test net costs a lot of money this is about it thank you