💂Token Gate Content

Require token ownership to access content or a webpage.

In this guide, we will create a "Token Gated" window in our app that can only be viewed if the connected wallet holds a predefined token.

We are building this in Bubble, if you don't have an account already you can sign up here.

What Is Token Gating?

Token gating is the act of granting access to content or app features only to users who own a specific token in their connected wallet.

Why is this only possible with Blockchains?

Blockchains are completely transparent.

The Blockchain is simply an open distributed database where everyone has read access, this means any wallet's token balances can be read by anyone using their public wallet address.

When a user connects their wallet to your app you will have access to their public wallet address.

User Steps

A user will connect their wallet to your app.
The wallet is queried for the balance of a specific token.
If the balance meets the requirements, access is granted.

Reading a user's balance of tokens will not require any gas fees to be paid by anyone.

Use Cases

Restrict access to content for users who hold a predefined token.
Allow existing holders of your token the ability to participate in the next mint.
Create "members only" areas of your app for token holders.

Learn more about token gating here.

Prerequisites

You need a few things before we get started.

Choose A Gate Token

The first step is to choose a gate token that the user needs to hold in order to access the gated content. This can be any ERC-20, ERC-721, or ERC-1155 token.

You can also specify a minimum balance of a token, this is helpful when using an ERC-20 token as your gate token.

For this example, we will use The Web3 Toolbox "Proof-of-Onboarding" ERC-721 NFT as the gate token. This NFT can be claimed for free by completing our Web3 Onboarding.

User Interface

Bubble has a drag-and-drop UI builder that is very intuitive to use. To keep this guide short and sweet, we will start with all the visual elements on the page.

Get creative as you like in designing the User Interface to fit your project.

You can view our project editor here.

Set-Up

We need to set a few things up before we start building out the workflow logic.

Install The Web3 Toolbox

The first step is to install The Web3 Toolbox free plugin using the plugin tab on the left side of the screen.

Add The Plugin Element To The Page

Now we need to make sure that we have the wallet actions element on the page.

Find the element in the visual elements menu on the left side of the screen and drop it onto the page anywhere. They will not be visible when your page is being viewed.

This element will allow us to access all the wallet actions we need in our workflows.

Connect Wallet

Now that we have our UI and plugin set up, the next step is to set up the wallet connection action.

Connect Wallet Window - This will allow the user to connect their wallet if it is not already connected. It will be hidden if the wallet's balance of the gate token is sufficient.

First, start/edit workflow on the connect button.

Now we will use the "Connect to Web3 Modal" action.

This action will open a modal that will allow the user to connect their wallet using MetaMask, Wallet Connect, or Fortmatic (email wallet).

The next step is to use the "Wallet Connected" event to trigger the wallet query action.

To query the wallet we will use the Fetch Balance of ERC-721 action.

As you can see we need to input an RPC URL for the network the gate token is on. In our case, the gate token is on the Polygon network so we will use the public Polygon RPC.

We also need to input the ERC-721 smart contract address for the gate token, plus the wallet address we want to query.

This action will query the specified wallet's balance of NFTs from this particular smart contract, not ownership of a single specific ERC-721.

If you wanted to check if the wallet owns a specific ERC-721 NFT, use the Fetch ERC-721 NFT Owner action and check if the connected wallet is the same as the result.

Verify Balance

The next step is to use the "ERC-721 Balance Ready" event to continue our workflow.

Once this event triggers, we can verify if the returned token balance is sufficient to show the gated content by making changes to the UI.

In our case any balance greater than 0 is sufficient.

Make sure to add the conditional statement in the "Only when" box.

We will also show a failure message if the wallet returns a balance that is not sufficient.

It could be a good idea to have a wallet disconnect button in this error display in case the user is connected with the wrong wallet. We will skip this step for this example.