Indexing Smart Contract Data with The Graph - ETHGlobal Singapore 2024

Very good. Uh, I'm going to talk about The Graph. The Graph is one of the most important development and infrastructure tools in Web3. We'll see how to query an existing subgraph for your data needs and how to create one. Okay, let's do this very quickly.

I always want them to have their phones and cameras ready because I have a lot of QR codes to show them. This is the first QR code you should scan if you are developing in The Graph. Here we have all the information, as well as the important repositories for working with The Graph. We have many amazing rewards. So yes, I hope that motivates them.

First of all , what is The Graph? The fundamental problem when creating The Graph, what we understood, is that blockchains are amazing. They are immutable databases, but they are very difficult to query. It is impossible to get blockchain data to the frontend without overloading the RPC just to get the information, and it is very expensive. Therefore, frontends always have problems with data.

It is very difficult for frontend developers to obtain information; Imagine you want a CryptoPunk from 2021, the RPC would have to go through 3 years, find which CryptoPunk you are looking for, locate it in that block and give you the required data. That's really not feasible. It's like making a consultation today and getting the results in three days. That's why, you know, it's not a great thing. That's why we created something like The Graph.

The Graph is a middleware between your blockchain and your frontend to obtain the data. Basically, you can think of The Graph as something that gets the data for you, stores it in a middleware layer, of course in a decentralized way, and then you can query the data as you need and how you need it, right? The reason we wanted to create the network, a protocol, a decentralized network for this, is because sometimes there are centralized indexers that you can use, of course, to get the data. But then, why are you using a blockchain, right? The blockchain is for storing data in a decentralized way, and therefore no middleware should be able to manipulate the data.

That's why you need something like The Graph, which is decentralized and managed by The Graph network, to ensure that data integrity remains intact and that your frontend gets the most important data in real time as quickly as possible. Good quickly as possible. Good . Now let's understand what subgraphs are. Subgraphs are basically a way of telling our infrastructure, the Graph Node, to index the data you need.

Let's say you are a CryptoPunks holder and you want to index all the people who also own one. So, you would basically tell Graph Node: "Hey, this is my smart contract; this is the data I 'm looking for, could you give it to me?" And that's basically a smart contract program . Subgraphs are basically a program written in TypeScript to tell everyone, "This is the required data, can you get it for me?" You can think of subgraphs as the programming language or standard you create to tell the Graph Node, "That's the data I need," and simply get it.

You can watch a live recording of how a subgraph basically works how a subgraph basically works , right? You can think of all these balls as Uniswap data, protocol data, Aave data, you know, all sorts of data mixed up on a blockchain, and think of these pieces of wood as a subgraph these pieces of wood as a subgraph . They diversify everything and give you what you need directly so you can consult it. So, what is part of the subgraph? What's basically inside the subgraph, right?

A subgraph basically contains three files. The first file is the YAML file. This is basically the presentation of your subgraph. In a YAML file, you specify the smart contract address, the start block, and the controllers that will handle the data. The logic file is the mapping file, where you get the event data and convert it using that mapping file.

Basically, you can consider the schema file to be the one you should use for your own data needs. Let's go back to the CryptoPunks example, let's say you're looking for the top 10 sales. So I'll create a sales scheme, right? The sale ID, the timestamp of the sale, and the amount of ETH needed to buy that CryptoPunk will be part of the scheme, CryptoPunk will be part of the scheme, right? First, I will create that schema and obtain the data through sales events within the CryptoPunk smart contract.

In the mapping file I will write the logic to ensure that this sale, which is an event, is converted to the schema here. Good. So these are the three files. The YAML file will be built beforehand when we run graph init. I'll show them to you in a moment.

The schema file is the data you expect to get from that particular smart contract. And the mapping file can basically be considered as the logic for converting the smart contract event data to the schema. I hope that's clear. First of all, let's look at subgraphs. It is not always necessary to create your own subgraph.

If you need your own data, if you're creating a smart contract and writing your own dApp from scratch, then you need to create your subgraph. If you are querying an existing dApp for your data needs existing dApp for your data needs , you can simply query the existing subgraph. Let's say you want to get data from Uniswap to understand the different, you know, prices of the Uniswap USDT-ETH pair on different chains. Uniswap is deployed on five or six chains. You want to have that data.

How do you obtain that data that data. How do you obtain that data ? Uniswap subgraphs exist in all of these chains. You can consult these smart contracts and obtain the data yourself. Basically, you don't have to create a new smart contract.

TRUE? And for that new smart contract. TRUE? And for that , the most important part for consulting an existing subgraph for your panels in this particular hackathon, we have two prizes. First prize and second prize, $3,750 prize and second prize, $3,750 .

That's the first prize, and then $1,250. If you become a finalist. TRUE? So how do you query a subgraph? Let's look at this.

This is the legendary explorer from The Graph who also has UNCX Alex. Yeah Graph who also has UNCX Alex. Yeah . Good. Brilliant.

Uh, and how do you get your data? First of all, you're looking for the protocol you're looking for, right protocol you're looking for, right ? And let's say I want to query BitgetWorld. I'll just check it that way . Let's see that.

Let's say I want to have, uh, UNCX data, for example. How do I get that? I just, you know How do I get that? I just, you know , go to UNCX, look up whatever it is I'm looking for, get it here, and I can check it out right here. Good.

So, let's say I'm looking for data, I just go to subgraphs again, I look for... Get Messari's best subgraphs, the subgraphs are the best that have been created. Uh, you can just go and get this consultation and get things going. Here, you can see that there is something called an API, right? You will need to extract this API from Subgraph Studio.

I'll go to the studio and I'll be able to create my own API. It's pretty, pretty standard. There are no mental calculations or a crazy amount of work required to do that, so it 's pretty straightforward. First of all, set up your API key once you have identified the protocol from which you want to query the data. Get that particular subgraph from the explorer, go to the subgraph study, get the API key, access the data, and, you know, earn $3,750.

Simple, right? Are we on schedule? Okay, I think we're doing well. Secondly, this is how you query the data. Let's do an example to query the CryptoPunks data.

I want to get the top 10 sales. The first 10 CryptoPunks that were sold. Let 's try to find out. So, here I go to the subgraphs. Here.

Come on. CryptoPunks. Let's do this. The first 10 sales, right? Do you remember?

So , here are the first 10 sales that were made of CryptoPunks. There is a sales entity here. See? Sales of the first 10. Let's close this.

Bot accounts. Let's just look at the top 10 sales of CryptoPunks. Top 10. So here they all are. But let's say we just need to sort by, well, not sort by.

Oh, let's see the amount, you know, the amount for which they were sold. Amount. It gives us all the CryptoPunks that were sold in ascending order, right? This is the amount for which the CryptoPunks were sold , that is, the value at which they were sold, you know, from the cheapest to the most expensive. And I can actually correct this in the browser.

I go to the Etherscan explorer browser. I go to the Etherscan explorer , you know, I put in this ID, this ID here. Do you see this? This is the NFT that was purchased, which is a CryptoPunk. Since this is not very visible and some other transactions were made with this.

This is a wrapped CryptoPunk. Someone did some weird things with this. So maybe we'll check out another CryptoPunk. Look, this is the CryptoPunk we're talking about, traded for $69,000. So yes, this is all you can check.

So if you're looking to create a CryptoPunks dashboard, all you need is this particular subgraph and this particular API, and you'll be able to create the best CryptoPunks information dashboards. This is all about consulting subgraphs. Now let's move on to creating a subgraph. TRUE? If you're creating your own DAP, if you 're deploying your own smart contract, you definitely need to create your own subgraph.

Again, two prices, $3,750 and $1,250. The architecture of what a DAP looks like when you create your own subgraph is something like this . First, you have the blockchain, which can be Ethereum or any layer 2 on which The Graph is deployed. We are on 39 chains. Secondly, you'll have the smart contract you're writing.

And to get the smart contract data to the front-end, there's a middleware called a subgraph that you'll be building. Good. So let's build a subgraph very, very quickly. I will deploy a test ERC20 smart contract very quickly. This is a smart contract, right?

ERC20, coinable and combinable, right? Let's deploy it. Okay, I have something that should be okay, I hope. Let's deploy. The estimated gas supply will fail.

The gods of demos are not with me today. Good. So, what we'll do is do it on the main Arbitrum network. I'll spend my own money on this. Good.

Thank you. Thank you all. Let's deploy. Oh, not again. Decline.

Good. Maybe we'll create a new one. New contract. Let's get to this. Let's create a new one, create a new template.

That it be ERC20 coinable and possible. Yes ok. My token, as you can see here, I created it. My token has everything we need, let's deploy this to Arbitrum very, very quickly, compile, compile, now let's deploy, for that I need to disconnect MetaMask and reconnect just because it's web3x. Connect account.

Connect. Confirm. Come, I unfolded it. Now I need to add the address and deploy the smart contract in Arbitrum. Oh, wait.

I need to inject MetaMask. I hope it works now. Disconnect. Reconnect . Okay, I hope it works.

Now let's deploy the contract on the Arbitrum mainnet. Come, I deployed the smart contract first on Arbitrum. You can see that this is the smart contract that has been deployed, and you should be able to see it as well. Okay, let's see. Let's go to the smart contract that has been deployed.

Arbiscan search. So I deployed a smart contract. This is the smart contract that you can see has been deployed. Good you can see has been deployed. Good .

Now we're going to index this particular smart contract. To do that, what I need to do is go to my browser and basically type cd, cd desktop. Oh no, downloads, downloads, graph demo, mkdir sg. Here graph demo, mkdir sg. Here , I'll do...

first of all, uh, what you need to do is have the graph library installed, right? As you can see, I've already installed the graph library, but it's very easy to install the graph library locally with npm. Once the graph library is installed Once the graph library is installed , I will do graph init in Ethereum subgraph studio and I will call it uh ERC20 uh new and I will be on arbitrum 1. This is the address of the smart contract, it is this. This is the address of the smart contract.

I'll give you the address of the smart contract. You cannot obtain the ABI. So I'll have to get the ABI; You usually get it if you have verified the smart contract. But if you can't do that for some reason, because the etherscan APIs are down, I can get those APIs for you. So basically I get the ABI and store it somewhere.

Then I create a new ABI code folder. [ __ ]. Oh, let's use a new terminal. Good. CD desktop.

Uh, CD MKDIR new ABI CD new ABI code I save the ABI here ABI ABI.json I save this here. I copy the ABI file, copy the path, and put it in our terminal, which is this one. I can simply say no, no, okay, this is the route. You see, it got the smart contract that needs to be created and we'll have the smart contract created in just 1 second.

TRUE? So basically I put in the smart contract address and the start block and it will create the subgraph for me. That's how graph tools are truly amazing. Now let's deploy the subgraph in Subgraph Studio. This is the subgraph studio.

Let me connect my metamask. Create the subgraph. Name it erc20 new. Create the subgraph. Come, I created the subgraph.

I already performed the global installation of the graph protocol, right? I already did graph init. Now I need to do graph auth. Let's do graph auth. Okay.

CD. I enter the subgraph. I do graph auth. Now I need to do code generation to ensure that all the code is being compiled. And now I'll show you what the subgraph looks like.

Do you see this? This is the subgraph. I showed them that it will have three important files. The first one is the schema file. The second is the yaml file and the third is the logic file, which is the mapping file.

Here you can see the schema; the YML file contains the smart contract address and the start block, as well as our ERC20 smart contract events. Then there's this schema file, because we want to get approved information from our ERC20 approvals, ownership transfers, potential coin transfers, all this information we need. So we created the scheme for that. And the third thing is, of course, the mapping file. This is the mapping file that has converted the event data into our schema data.

These are the three things that are required. Once this is done, I will now deploy my smart contract in the browser. Which one was it? Yes, this one. I'll just deploy the subgraph of the smart contract, I mean, and it should work.

So, I've deployed my smart contract, deployed my smart contract, right? Now I have deployed my subgraph right? Now I have deployed my subgraph , and it will give me an API, which is this particular API, that I can use to query my interface. Okay, these three things are ready. Now they can happily create their decentralized application and, of course, earn $3,750.

TRUE? My subgraph is created; Now I can play with him. As you can see, right now it has, let's see if I have approval, approval. Let's go to approval. Right now, there's no approval.

Now, if I make a particular transaction with approval here, let's do an approval. Let's get it approved. Oh, wait. Approval. This is the direction I am seeking to approve.

Approval. And let's say the value is 100, and we carry out the transaction. maximum approval. So this data also needs to be indexed by a subgraph because we've triggered an event, right? So when I see this, this is the smart contract I deployed.

I should have the data. Come on, basically they can have a smart contract deployed, a subgraph deployed, and query it with their interface. If that's clear, then that's all there is to it. You can, you know, definitely subscribe to the newsletter and thank you very much. If you have any further questions, we are at the booth.

We have many great gifts and many great rewards. Thank you.