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>
}