Token - Gating - SDK

A Simple and Modern SDK For Implementing Token - Gating in your webpage , in just few steps.

Demo

A Full Demo Video can be looked up here :

https://www.loom.com/share/136962ce378145a8a46271271415206d

The REPLIT TEMPLATE for a Next.js Application with token-gating-sdk can be found here : Replit-Template

Introduction

Website owners can verify the ownership of NFTs and Tokens in the users wallet , and accordingly grant or restrict the access to a Webpage with the help of this SDK.

It is Ready to use out of the Box , for all type of Applications , Next , React, etc. with just simple configurations steps , can be followed in the tutorial below.

Features

1 . Supports all the Major Networks (Mainnet) :

Ethereum
Polygon
Optimism
Arbitrum One

2 . All wallets supported :

Metamask
Rainbow
Wallet Connect
Coinbase

3 . Easy to set up and integrate with just 3 steps

4 . Highly Customizable , Configure access based on multiple conditions

Installation

Install token-gating-sdk from CLI , in your project's root directory.

  npm install token-gating-sdk

  or

  yarn add token-gating-sdk

NOTE : Installation might take 2-3 minutes sometime , as there are lot of dependencies included in the package .

Types

There are 3 kinds of Wrappers as follow :

NextGatingWrapper for Next.js
ReactGatingWrapper for React.js
UniversalGatingWrapper for other applications

Usage

For Next.js applications

1. Import the Next Gating Wrapper and styles

Under _app.tsx

import { NextGatingWrapper } from "token-gating-sdk";
import "@rainbow-me/rainbowkit/styles.css";

Wrapper Inputs

config

Create the config file as the tutorial below

type configDataType = {
  path: string,
  methodName: methods,
  network: networks,
  data: {
    contractAddress: string,
    tokenId?: string,
    amount?: number,
    attributes?: { value: string, trait_type: string } [],
  },
}[];

Parameter	Type	Description
`config`	`configType`	Required. configData

ALCHEMY API KEY

Get an API key from Alchemy

const API_KEY: any = process.env.ALCHEMY_API_KEY;

Parameter	Type	Description
`alchemyApiKey`	`string`	Required. Api key from Alchemy

2. Import inputs

Under _app.tsx

import { configData } from "../config/config";
const API_KEY: any = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;

3. Wrap the App with the Next Wrapper as follows

Under _app.tsx

export default function App({ Component, pageProps }: AppProps) {
  return (
    <NextGatingWrapper config={configData} alchemyApiKey={API_KEY}>
      <Component {...pageProps} />
    </NextGatingWrapper>
  );
}

Andd !! BOOM ✨ , You just Token Gated your website

NOTE:

For other Wrapper Types , the guide is similar , just the import wrapper is changes to implement the functionality

Run

To run the project , run local dev command

In Next Apps

  npm run dev

How to create the Config File ??

This is a very important step , where you can configure , that which page , should implement what conditions or requirements , to allow the access to the end User.

Create specific config for each page type , with the following format :

configDataType = {
  path: string;  // path name
  methodName: methods;  // methods
  network: networks; // network
  data: {
    contractAddress: string;  // contractAddress of Token or NFT
    tokenId?: string;  // Token Id of the NFT (if req.)
    amount?: number;  // Amount of tokens (if req.)
    attributes?: { value: string, trait_type: string } []; // Array of NFT Attributes (if req.)
  };
}[]

Methods

There are currently 5 methods available , as follows :

NFTWithTokenID for NFT with a Specific Token ID from a collection, E.g. BAYC No. 8378

Need to add contractAddress and tokenID of the NFT

{
    path: "/page",
    methodName: methods.NFTWithTokenID,
    network: networks.Ethereum,
    data: {
      contractAddress: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
      tokenId:"8378",
    },
  },

NFTCollection for NFT from a particular NFT Collection, E.g. BAYC

Need to add contractAddress of NFT Collection

{
    path: "/page",
    methodName: methods.NFTCollection,
    network: networks.Ethereum,
    data: {
      contractAddress: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D"
    },
  },

TOKEN for a particular Token , E.g. USDC

Need to add contractAddress of Token

{
    path: "/page",
    methodName: methods.TOKEN,
    network: networks.Ethereum,
    data: {
      contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
    },
  },

TOKENwithAmount for an amount of a Particular token , E.g. 100 USDC

Need to add contractAddress and amount of the token

{
    path: "/page",
    methodName: methods.TOKEN,
    network: networks.Ethereum,
    data: {
      contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
      amount: 100000000,
    },
  },

NFTWithAttributes for NFT with an Specific Attribute (trait type and value) from a collection, E.g. BAYC. Fur -> Pink.

Need to add contractAddress and an array of attributes of the NFT

{
    path: "/page",
    methodName: methods.NFTWithTokenID,
    network: networks.Ethereum,
    data: {
      contractAddress: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
      attributes: [ { value: "Pink", trait_type: "Fur" } ]
    },
  },

These can be accessed by importing methods

export enum methods {
  "NFTWithTokenID",
  "NFTCollection",
  "TOKEN",
  "TOKENwithAmount",
  "NFTWithAttributes"
}

Networks

We Support 4 Mainnets currently:

Ethereum
Optimism
Polygon
Arbitrum One

These can be accessed by importing networks

export enum networks {
  "Ethereum",
  "Optimism",
  "Polygon",
  "Arbitrum One",
}

Example

Here is an example config File , for all the 5 types of Methods. Refer the same for more info -

import { configType, methods, networks } from "token-gating-sdk";

export const configData: configType = [
  {
    path: "/privatenft",
    methodName: methods.NFTWithTokenID,
    network: networks.Ethereum,
    data: {
      contractAddress: "0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85",
      tokenId:
        "5691999065095808972681467169397940732013218209247626737760195198340626795922",
    },
  },
  {
    path: "/privatecollection",
    methodName: methods.NFTCollection,
    network: networks.Ethereum,
    data: { contractAddress: "0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85" },
  },
  {
    path: "/privatetoken",
    methodName: methods.TOKEN,
    network: networks.Ethereum,
    data: { contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48" },
  },
  {
    path: "/privatetokenamount",
    methodName: methods.TOKENwithAmount,
    network: networks.Ethereum,
    data: {
      contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
      amount: 100000000,
    },
  },
  {
    path: "/privateattributes",
    methodName: methods.NFTWithAttributes,
    network: networks.Ethereum,
    data: {
      contractAddress: "0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85",
      attributes: [ 
      	{ value: "letter", trait_type: "Character Set" },
      ],
    },
  },
];

Screenshots

Appendix

The package is just live with an initial version , there might be some upcoming changes .

Contact: contact.dhruvagarwal@gmail.com

Tech Stack

Backend: React, Next, Rollup, React-router-dom, React-dom

Packages: Alchemy SDK , Rainbowkit , Wagmi , Ethers

How we built it ??

Token - gating was implemented by simply checking the conditions set by the Website manager in the config , based on the data from blockchain . Here Alchemy - SDK , came into play , which was used to fetch the needed data , and because of the different API endpoints available , made it easy for us to just simply add this part. We used verifyNftOwnership , getOwnersForNft and getTokenBalances methods , to get the needed data and check the logic , to authorise or restrict the user from accessing the website. This also helped us to enable this service on 4 Main-nets , Ethereum , Polygon , Arbitrum One & Optimism. RainbowKit + Wagmi were used to handle wallet and other network logic , this enabled the user to use most of the major wallets out their in the market , to connect with.
I had worked with Token-Gating prior to this , therefore I knew the method to add the code to a website , but converting that code into a usable component, that could be integrated to a new website in Simple Steps was the key . So the next step was to figure out the approach to implement Token-gating to any website which was the most challenging part of the bounty , We had multiple ones in mind , But finally we finalised to create an SDK , that could be used in Next , React and other web Applications.
We created an SDK or React Library with wrapper components in TypeScript , to ensure the best experience for the developers to interact with it. Our main aim was to make it as simple as for a newbie to add it to a website. We achieved this by handling most of the logic and extra steps on our component side , in order to make it just plugin & play. We also added an extensive documentation for the developers , to integrate the SDK .
Next we had to figure out the Page Routing or Navigation , Luckily , Next had Next/Router , which handles all these things , in the backend ,we just had to get the Routers current route and check the conditions to allow access. Moreover for React applications , we used , window.locationproperty from Browsers. We will be adding React-router-dom support too in near future .
We created an UI component too , that would ensure that non authorised users are not allowed to view the content of protected page , we used Styled-Components & chakra-ui. The UI - UX was kept simple , for the best end user experience . Pure CSS could not be used , as we were not able to configure the bundler for bundle CSS files.
Then came the next big challenge to actually bundle the Components , make the package as small as possible , We used Rollup here and some extra plugins to bundle the whole thing together , we had to resolve a lot of big errors here , as it was the first time developing a full scale UI SDK. But after creating 10 versions , the final working version was live. We bundled into ESM types , meaning it supported ES6 syntax, which now most of the browsers support. Setting Up package.json with the exports , files , module and configuring it to point to dist is an important step too , while building SDKs.
Andd !! In this way we created this token-gating-sdk in almost a week of work , lot of research and solving bugs 😅 to produce the best final version. This was indeed a great learning experience , to work around with SDKs and React Libraries along with a Web3 twist. and a lot of other packages like Alchemy-SDK , Wagmi , Rainbowkit , etc.

Looking forward for more such experience and a Big Thanks to Alchemy & Replit Teams for giving me this great opportunity .

Acknowledgment

Built in Partnership with Alchemy and Replit under the Bounty
Alchemy SDK was used to fetch the needed data from blockchain. We used verifyNftOwnership ,getOwnersForNft and getTokenBalances methods , to get the needed data and check the logic , to authorise or restrict the user from accessing the website. This also helped us to enable this service on 4 Main-nets , Ethereum , Polygon , Arbitrum One & Optimism.

Authors

@0xdhruv
@arcsh7

Contributing

Contributions are always welcome!

Create a Pull request with the details of the changes made and how they could help the project improve

Please adhere to this project's code of conduct.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Token - Gating - SDK

Demo

Introduction

Features

Installation

Types

Usage

1. Import the Next Gating Wrapper and styles

Wrapper Inputs

config

ALCHEMY API KEY

2. Import inputs

3. Wrap the App with the Next Wrapper as follows

NOTE:

Run

How to create the Config File ??

Methods

Networks

Example

Screenshots

Appendix

Tech Stack

How we built it ??

Acknowledgment

Authors

Contributing

Files

README.md

Latest commit

History

README.md

File metadata and controls

Token - Gating - SDK

Demo

Introduction

Features

Installation

Types

Usage

1. Import the Next Gating Wrapper and styles

Wrapper Inputs

config

ALCHEMY API KEY

2. Import inputs

3. Wrap the App with the Next Wrapper as follows

NOTE:

Run

How to create the Config File ??

Methods

Networks

Example

Screenshots

Appendix

Tech Stack

How we built it ??

Acknowledgment

Authors

Contributing