token-gating

npm-package-token-gating

How to get started:

React project:

run to install the package and all neccessary node modules:

npm i token-gating @thirdweb-dev/react @thirdweb-dev/sdk @vitejs/plugin-react

or for yarn

yarn add token-gating @thirdweb-dev/react @thirdweb-dev/sdk @vitejs/plugin-react

add the thirdweb provider to your main.js or index.js file and set the desired Chain ID:

import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react"

// Add the chain ID of the chain your gating contract is on`
const activeChainId = ChainId.Goerli

  <React.StrictMode>
    <ThirdwebProvider activeChain={activeChainId}>
      <App />
    </ThirdwebProvider>
  </React.StrictMode>

if you use Vite you also need to add the following to your vite.config.js:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: "globalThis",
    "process.env": {},
  },
})

import the connect buttton component into your App.js file

import TokenGatingBot from "token-gating"

add an state Variable "access":

import { useState } from "react"

const [access, setAccess] = useState(false)

use the gating component on top of your app:

<TokenGatingBot
        contractAddress= //Address of the gating contract here
        alchemyAPIkey=// your alchemy AIP Key here
        setAccess={(newAccess) => setAccess(newAccess)}
      />

Gater the contetn you want to gate buy using

{
  access && <div>Your gated content here</div>
}