How to follow transfers of a Fan Token

Tracking Fan Token movements on Chiliz Chain is a great way to monitor the activity of your favourite tokens. By using it as a building for a potential dashboard, you can streamline data to provide insights into what's popular and what's not.

How to do it using The Graph?

The Graph is especially useful for tracking fan token movements on Chiliz Chain Mainnet or Spicy Testnet, without manually scanning the blockchain. It provides an easy way to query smart contract data through dedicated APIs known as subgraphs.

Let's see for instance how we could use The Graph to follow tranfers of the PSG Fan Token...

Indexing the PSG Token on Chiliz

1. Initialize a subgraph project

Create a subgraph on Subgraph Studio⁠

Go to the Subgraph Studio and connect your wallet. Once your wallet is connected, you can begin by clicking “Create a Subgraph”.

When choosing a name, it is recommended to use Title Case: “Subgraph Name Chain Name.”

You will then land on your subgraph’s page. All the CLI commands you need will be visible on the right side of the page (you might need to scroll down a bit):

Install the Graph CLI⁠

On your local machine, run the following:

npm install -g @graphprotocol/graph-cli

Initialize your Subgraph⁠

You can copy this directly from your subgraph page to include your specific subgraph slug:

graph init --studio <SUBGRAPH_SLUG>

The --studio tag is optional. In this example, we ran:

graph init docs-psg-followup-chiliz-chain

You’ll be prompted to provide some info on your subgraph, like this:

You need to have your contract verified on the block explorer, and the CLI will automatically obtain the ABI and set up your subgraph. The default settings will generate an entity for each event.

Note:

• If the contract uses a proxy, like the PSG Fan Token does, then use the implementation contract's address instead. You'll see it in the "read contract" tab on the block explorer page of the contract.

• If the Start Block isn't automatically obtained, you can manually enter the block number where the contract was created. You can obtain this from the block explorer.

• If you had to enter a proxy's implementation contract address, then once the project is set up, go to the manifest file (subgraph.yaml) and change the contract address to the proxy's address.

2. Deploy & Publish

Deploy to Subgraph Studio⁠

First run these commands:

$ graph codegen
$ graph build

Then run these to authenticate and deploy your subgraph. You can copy these commands directly from your subgraph’s page in Studio to include your specific deploy key and subgraph slug:

$ graph auth --studio <DEPLOY_KEY>
$ graph deploy --studio <SUBGRAPH_SLUG>

You will be asked for a version label. You can enter something like v0.0.1, but you’re free to choose the format. Once that's done, you'll see the subgraph start to sync in the Studio page.

Test your subgraph⁠

You can test your subgraph by making a sample query in the playground section. The Details tab will show you an API endpoint. You can use that endpoint to test from your dapp.

Publish Your Subgraph to The Graph’s Decentralized Network

Once your subgraph is ready to be put into production, you can publish it to the decentralized network. On your subgraph’s page in Subgraph Studio, click on the Publish button.

It'll trigger a transaction through your wallet to publish your subgraph as an NFT on the Arbitrum One network.

Note: The Graph's smart contracts are all on Arbitrum One, even though your subgraph is indexing data from Chiliz, Ethereum any other supported chain.

This subgraph can be found here on the network.

3. Query your Subgraph

Congratulations! You can now query your subgraph on the decentralized network!

For any subgraph on the decentralized network, you can start querying it by passing a GraphQL query into the subgraph’s query URL which can be found at the top of its Explorer page.

The PSG Token subgraph above was published here.

The query URL for this subgraph is:

https://gateway-arbitrum.network.thegraph.com/api/[api-key]/subgraphs/id/7x2xzF58Mr694MiAQxCK6fiXux1vaBQm5SdYhbv1LNGE

Now, you simply need to fill in your own API Key to start sending GraphQL queries to this endpoint.

Getting your own API Key

In Subgraph Studio, you’ll see the “API Keys” menu at the top of the page. Here you can create API Keys.

Appendix

Sample Query

This query shows all transactions of PSG token.

const axios = require('axios');

//the graphql query
const graphqlQuery = `{
  transfers {
    from
    to
    value
    transactionHash
  }
}`;
const queryUrl = 'https://gateway-arbitrum.network.thegraph.com/api/[api-key]/subgraphs/id/7x2xzF58Mr694MiAQxCK6fiXux1vaBQm5SdYhbv1LNGE'

const graphQLRequest = {
  method: 'post',
  url: queryUrl,
  data: {
    query: graphqlQuery,
  },
};

// Send the GraphQL query
axios(graphQLRequest)
  .then((response) => {
    // Handle the response here
    const data = response.data.data
    console.log(data)

  })
  .catch((error) => {
    // Handle any errors
    console.error(error);
  });

Sample code

{
  "data": {
    "transfers": [
      {
        "from": "0x26a3e78fa4d2cbebf6b59b2f84b8fb7c61b52d28",
        "to": "0xdca23d02923d01779fb22959bd2575d64eab4535",
        "value": "1500",
        "transactionHash": "0x000309e9cd3f550e8965381bbd83a35c5cee18f26c33a357f9dbb57450d594ea"
      },
//      ...
  }
}

Passing this into the query URL returns this result:

{
  transfers {
    from
    to
    value
    transactionHash
  }
}

This query shows all transactions of PSG token.

Additional resources:

• To explore all the ways you can optimize & customize your subgraph for a better performance, read more about creating a subgraph here.

• For more information about querying data from your subgraph, read more here.