Indexing DEX workshop data using Subsquid

This article is an extension of the Decentralized Exchange on ICE Blockchain workshop. Here we are going to index the supply of custom ERC20 token from the DEX workshop and build a stats page in the frontend, where we will show graph plots of ERC20 token supply vs Time.

Indexing custom ERC20 token using subsquid

Subsquid is a framework for indexing or querying data on Substrate-based blockchains. We have already indexed ERC721 token transfers in the Indexing data on ICE/SNOW with Subsquid article. Following this article, we have already developed a squid that indexes ERC20 as well as ERC721 and ERC1155 token transfers. We will use this squid to query the price of the custom ERC20 token that we had deployed during the DEX workshop.

NOTE: If you haven’t gone through the DEX workshop, now is the time to look into it - DEX on ICE

Let us start with running the subsquid.

Note: If you have any difficulties in running the squid, you can refer to the previous article on Indexing on ICE/SNOW with subsquid

• Fork the GitHub repository: ICE/SNOW Subsquid
• Installing Dependencies

npm ci

The required schema is already defined in the repository and the models have already been generated.

So, let us get started with launching the databases.

• Run the following command in your terminal to launch the databases.

docker-compose up -d

• Build the code.

npm run build

• Remove previous migrations.

rm -rf db/migrations/*.js

• Generate and apply the migrations so that tables are created on the database.

npx squid-typeorm-migration generate
npx squid-typeorm-migration apply

Now, let’s run the archive which is already configured for you with Arctic RPC endpoint.

docker-compose -f archive/docker-compose.yml up

Now to launch the processor, you can run the following command in a new terminal:

node -r dotenv/config lib/processor.js

Finally, in a separate terminal window, launch the GraphQL server:

npx squid-graphql-server

Now you can visit localhost:4350/graphql to access the GraphQL console where you can run your desired queries.

Building the query

Before building the query, we will require the contract address of the custom ERC20 token and Exchange contract. In our case:

ERC20 token : 0x1d03ebb7894b67ec6aa1cccdfd0e3898d069fc11
Exchange contract: 0x6218F77faDcddf600AdDa2bC2b66B54F1c3bC469

Let us start with building the queries.

In the GraphQl console, you can build the following queries:

• Query 1

Query 1

Result of Query 1

The above query returns the details of tokens transferred from the Exchange Contract(i.e. Liquidity Supply). Here, 0x1d03ebb7894b67ec6aa1cccdfd0e3898d069fc11 is the contract address of ERC20 token and 0x6218F77faDcddf600AdDa2bC2b66B54F1c3bC469 is the address of the Exchange contract that we deployed. So this query returns the amount of custom ERC20 tokens transferred from the Exchange contract along with its timestamp.

• Query 2

Result of Query 2

The above query returns the details of tokens transferred to the Exchange Contract(i.e. Liquidity Supply)

• Query 3

Result of Query 3

The above query returns the list of token owners. Here we have used the following filters to filter out some addresses:

id_not_contains: "0x6218F77faDcddf600AdDa2bC2b66B54F1c3bC469", which is contract address of Exchange contract

id_not_startsWith: "0x0000000000000000000000000000000000000000", which is the null address that was used to mint token at time of token creation.

Adding Stats page in DEX Frontend

Now let’s head to the add-stats-page branch of the DEX workshop GitHub Repository.

Fork the above repository into your GitHub account.

Run the frontend with the following command

npm install && npm start

Here we have built a page called Stats in src/pages/Stats.js which displays the following information:

• Graph plot of token supply (token transferred from/to Reserve with its timestamp)
• Information regarding tokens sent, received and the current balance in reserve.
• A table holding the addresses and tokens of the owners.

Fetching the indexed data from GraphQL API

The following snippet example can be used to fetch the indexed data from GraphQL API:

const query = `query MyQuery {
ftTransfers( where: {token: {id_eq: "0x1d03ebb7894b67ec6aa1cccdfd0e3898d069fc11"}, from: {id_eq: "0x6218F77faDcddf600AdDa2bC2b66B54F1c3bC469"}}) {
  amount
  timestamp
 }
}`;

const getStatsData = async () => {
  const response = await fetch('http://localhost:4350/graphql'{
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ query }),
  });
  const result = await response.json();
  const data = result.data;
  console.log(data)
};

We have used recharts to plot the graphs based on the data fetched. The graph with a red line indicates tokens transferred to the reserve (i.e Liquidity supplied) and the graph with the purple line indicates tokens transferred from the reserve.

Then we calculated the token sent and received and displayed it in a box.

Lastly, we have displayed a table that contains the data fetched by Query 3.

Summary

Hence, we indexed the custom ERC20 token data from the DEX workshop using Subsquid and used the GraphQL API provided by Subsquid to query the indexed data and displayed the relevant information on the DEX frontend dApp.