Announcing our Token Gating Components

Token gating is an exciting use case for NFTs. With a token gate, you can section off a part of your web or mobile application and make it available to addresses who hold a certain token.

Despite its promise, token gating today is still pretty hard to do. And there's no room for error. Those are just two reasons why we're excited to announce that our token-gating API is in private beta today.

What?

Let's build something and token-gate it. For today's example, let's build a chat app that's only viewable to holders of a certain token. We'll build this as a React component, and for the purposes of this demo, the chat app will be represented by this component:

<ChatApplication tokenId={tokenId} />

tokenId represents the tokenId that the user holds.

const Page = () => {
  return (
    <main>
      <ChatApplication tokenId={tokenId} />
    </main>
  );
};

OK, now, how do we gate it? Let's gate it off and make it accessible only to holders of a certain token. We'll use the useTokenGate React hook:

useTokenGate({
  network: 'ethereum-mainnet',
  address: 'user_address', // replace this with the user's address
  requireAsset: {
    // User
    address: '0x79FCDEF22feeD20eDDacbB2587640e45491b757f',
    tokenId: (tokenIds: Array<string>) => true,
  },
});

What does this do? requireAsset takes two parameters: 1) the token address, and 2) a block that receives a list of all token IDs the user holds in that collection.

Now, let's put it all together:

import { useTokenGate } from 'nft-react';

const Page = () => {
  const address = ''; // the user's address
  const { isAuthorized, isLoading, tokenId } = useTokenGate({
    network: 'ethereum-mainnet',
    require: {
      address: '0x79FCDEF22feeD20eDDacbB2587640e45491b757f',
    },
    address,
  });
  if (isLoading) {
    return (
      <main>
        <div>Checking your token...</div>
      </main>
    );
  }
  if (!isAuthorized) {
    return (
      <main>
        <div>This is only accessible to token holders.</div>
      </main>
    );
  }
  // If they get to this block, they've matched and have a token.
  return (
    <main>
      <ChatApplication tokenId={tokenId} />
    </main>
  );
};

Want to use this?

Hop in our discord or email omar@center.app and we will add it to your API portal.

Happy hacking!