NFT Gated Website

This project demonstrates how you can restrict content on your website to only those users who own an NFT from your collection.

We use an Edition Drop contract to enable users to claim one of the NFTs, and show users the restricted content once we detect they have at least one of the NFTs claimed.

Tools:

• thirdweb React SDK: To access hooks such as useAddress to view the connected wallet address, useMetamask to connect user's wallets, and useEdition to interact with the Edition Drop we deployed via the dashboard.
• thirdweb TypeScript SDK: We're using the ThirdwebProvider to configure the Network we want our user's to be on, and to check the NFTs that the user owns from our collection using the getOwned function.

Using This Repo

• Create an Edition Drop contract via the thirdweb dashboard on the Polygon Mumbai (MATIC) test network.

• Clone this repository.

• Replace the address in useEditionDrop with your Edition Drop contract address from the dashboard.

npm install
# or
yarn install

• Run the development server:

npm run start
# or
yarn start

• Visit http://localhost:3000/ to view the demo.

Guide

Setting Up Magic Link WalletConnector

Inside index.js, we are wrapping our application with the ThirdwebProvider component, which allows us to configure the Network we want our user's to be on, which we have set to ChainId.Mumbai in this demo.

<ThirdwebProvider desiredChainId={activeChainId} walletConnectors={connectors}>
  <Component {...pageProps} />
</ThirdwebProvider>

This allows us to access all of the React SDK's hooks throughout our application.

Connecting User's Wallets

We're using the useMetamask hook to connect user's MetaMask wallets.

const connectWithMetamask = useMetamask();

We can detect when a user's wallet is connected to the site using the useAddress hook.

const address = useAddress();

If the address is undefined, we show the user a welcome page, and ask them to connect with their MetaMask wallet.

Checking User's NFTs

We use the Typescript SDK to check the user's NFTs using the getOwned function.

const nfts = await editionDrop.getOwned(address);

If the user has at least one NFT, we show the user the restricted content!

Minting a new NFT

When the user doesn't have an NFT from our collection in their connected wallet, we show them a page that allows them to mint a new NFT.

We use the claim function to mint a new NFT for the user.

await editionDrop.claim(0, 1); // 0 is the tokenId, 1 is the quantity of NFTs to mint

Join our Discord!

For any questions, suggestions, join our discord at https://discord.gg/thirdweb.