Skip to main content

Token Gate User By Certain Fan Token

In this tutorial, you will learn how to build token gate feature to limit access to a certain fan token holders by calling the Moxie Protocol Subgraph API.

Include User's Vesting Addresses

Moxie protocol users have Moxie token currently vesting in their vesting contract. A huge portion of them use these to bid on auctions and buy/sell fan tokens on the Moxie protocol.

Therefore, it is important that you include the user's vesting addresses in the query when building token gate feature to limit access to a certain token holders. To get user's vesting contract addresses, click here.

Pre-requisites

Install dependencies graphql and graphql-request to your project :
npm install graphql graphql-request

Step 1: Add The API Query To Your Code​

To build token gate feature to limit access to a certain fan token holders, you can use the following query:

query MyQuery($userAddresses: [ID!], $fanTokenSymbol: String) {
users(where: { id_in: $userAddresses }) {
  portfolio(where: { subjectToken_: { symbol: $fanTokenSymbol} }) {
    balance
  }
}
}
With this GraphQL query, you can add it to your source code and call the API with the graphql-request library:
index.ts
import { gql, GraphQLClient } from "graphql-request";


const graphQLClient = new GraphQLClient(
  "https://api.studio.thegraph.com/query/23537/moxie_protocol_stats_mainnet/version/latest"
);

const query = gql`
query MyQuery($userAddresses: [ID!], $fanTokenSymbol: String) {
users(where: { id_in: $userAddresses }) {
  portfolio(where: { subjectToken_: { symbol: $fanTokenSymbol} }) {
    balance
  }
}
}
`;

const variable = {
"userAddresses": [
  "0x00d620def6ccb76c92dbfc87bc2bebab7637ec53"
],
/**
 * There are 3 types of fan tokens, here's how the symbol is formatted:
 * - USER -> fid:<fid>
 * - CHANNEL -> cid:<channel-id>
 * - NETWORK (Only for Farcaster) -> id:farcaster
 */
"fanTokenSymbol": "cid:fitness"
}


try {
  const data = await graphQLClient.request(query, variable);
  console.log(
  // Check if the user has a balance greater than 0
  Number.parseInt(data?.users?.[0]?.portfolio?.[0]?.balance) > 0
);
} catch (e) {
  throw new Error(e);
}

Step 2: Execute Your Code​

Once you have your code ready, you can execute it by running the following command:

ts-node index.ts

If it runs successfully, you should see the data returned in the terminal:

true // true if balance is greater than 0, otherwise false

Congrats! 🥳🎉 You've just fetched user's balance of a certain fan token and use it to build token gate feature to limit access to a certain fan token holders!

Developer Support​

If you have any questions or need help with other use cases, feel free to join the /airstack Warpcast channel and ask your questions there.

Our team is always ready to help you with any questions you may have.