An example of an NFT Gated Website for thirdweb's NFT Gated Website Guide

Related tags

Learning resource react javascript edition nft-collection nft-drop edition-drop
Overview

NFT Gated Website

"One of the more dynamic use cases for NFTs is using them as a membership pass to the NFT holders. Let’s assume you want to create a website for your community that is gated by having access to a specific NFT from a collection..."

An NFT Gated Website starter template created using thirdweb's React SDK. Follow along with this repository on our guide on How to create an NFT-gated website

Preview

App Screenshot

Installation

First, install the required dependencies:

npm install
# or
yarn install

Then, run the development server:

npm start
# or
yarn start

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/index.js and src/App.js. The page auto-updates as you edit the file.

On src/index.js, you'll find our ThirdwebProvider wrapping your app, this is necessary for our hooks to work.

on src/App.js, you'll find the useMetamask hook that we use to connect the user's wallet to MetaMask, useDisconnect that we use to disconnect it, and useAddress to check the user's wallet address once connected.

Learn More

To learn more about thirdweb, React and CRA, take a look at the following resources:

You can check out the thirdweb GitHub organization - your feedback and contributions are welcome!

Feedback

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

You might also like...

A website that acts as a guide about the universities to potential students whole throughout the globe.

A website that acts as a guide about the universities to potential students whole throughout the globe.

Apr 15, 2022

A light-weight user's step-by-step guide for your website using Vanilla JS.

WebTour JS A light-weight user's step-by-step guide for your website using Vanilla JS. Features User's walkthrough - can be used to guide user's to yo

Nov 21, 2022

Example of a ceramic app to showcase dynamic NFT capability

This is an example application that uses Ceramic, based on Next.js. Fork it freely. Getting Started Install dependencies. Create local ENV file with y

Sep 6, 2022

Solidity NFT whitelist contract example using MerkleTree.js for constructing merkle root and merkle proofs.

MerkleTree.js Solidity NFT Whitelist example Allow NFT minting only to whitelisted accounts by verifying merkle proof in Solidity contract. Merkle roo

Dec 29, 2022

NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

Feb 11, 2022

Dead simple program to upload NFT data to IPFS via nft.storage

Dead simple program to upload NFT data to IPFS via nft.storage

NFTP The simplest way to publish files and folders to IPFS, with one command. 100% FREE to upload as much files as you want, powered by nft.storage. N

Dec 11, 2022

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop (IN BETA) Intro Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minu

Dec 15, 2022

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

🔎 Moralis NFT Snapshot Moralis NFT API will only return 500 itens at a time when its is called. For that reason, a simple logic is needed to fetch al

Jun 23, 2022

Create your own custom NFT minting page using thirdweb's NFT Drop contract

Customizable NFT Drop Minting Page In this example, you can create your own NFT Drop minting page just by customising the template with your branding,

Dec 24, 2022
Comments
  • Error: invalid hexlify value (argument=

    Error: invalid hexlify value (argument="value", value="", code=INVALID_ARGUMENT, version=bytes/5.7.0)

    I cloned the repo and did yarn dev ... this error is showing

    error - Error: invalid hexlify value (argument="value", value="", code=INVALID_ARGUMENT, version=bytes/5.7.0) at Logger.makeError (T:\smash\smoosh\nft-gated-website\node_modules@ethersproject\logger\lib\index.js:238:21) at Logger.throwError (T:\smash\smoosh\nft-gated-website\node_modules@ethersproject\logger\lib\index.js:247:20) at Logger.throwArgumentError (T:\smash\smoosh\nft-gated-website\node_modules@ethersproject\logger\lib\index.js:250:21) at hexlify (T:\smash\smoosh\nft-gated-website\node_modules@ethersproject\bytes\lib\index.js:200:19) at new SigningKey (T:\smash\smoosh\nft-gated-website\node_modules@ethersproject\signing-key\lib\index.js:20:82) at new Wallet (T:\smash\smoosh\nft-gated-website\node_modules@ethersproject\wallet\lib\index.js:120:36) at Function.fromPrivateKey (T:\smash\smoosh\nft-gated-website\node_modules@thirdweb-dev\sdk\dist\thirdweb-checkout-cb55a273.cjs.dev.js:16091:20) at ThirdwebAuth (webpack-internal:///./node_modules/@thirdweb-dev/auth/next/evm/dist/thirdweb-dev-auth-next-evm.esm.js:121:69) at eval (webpack-internal:///./auth.config.js:9:113) at Object../auth.config.js (T:\smash\smoosh\nft-gated-website.next\server\pages\index.js:54:1) { reason: 'invalid hexlify value', code: 'INVALID_ARGUMENT', argument: 'value', value: '', page: '/'

    opened by BOBseal 2
Owner
thirdweb examples
thirdweb examples
GitHub
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

null 3 Sep 21, 2022
Token-gated repositories via GitHub API.

GateRepo About | Implementation | License About Simple implementation of ERC20 token-gating GitHub repositories. Fueled by Mike's tweet. Implementatio

Anish Agnihotri 114 Oct 16, 2022
Decentralized, token-gated discussion platform for DAOs

ETHCC Hackathon 2022 -- Debate3 This is the official ETHCC Hackathon 2022 submission for our project Debate3 ?? . Project Description Debate 3 is a De

Dennis Zoma 8 Nov 8, 2022
🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

?? Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued

Braian D. Vaylet 17 Oct 22, 2022
Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

?? Fullstack Dynamic NFT Mini Game ?? ?? Using Diamond Standard Play On ?? ?? ⏩ http://diamond-dapp.vercel.app/ Project Description ?? Fullstack Dynam

Shiva Shanmuganathan 21 Dec 23, 2022
NFT Marketplace framework to build standalone NFT marketplace or inApp/inGame NFT marketplace

NFT Marketplace This project is a decentalized NFT Marketplace framework which is to be the baseline for you to build standalone NFT marketplace or in

Reddio, inc. 14 Dec 19, 2022
Example-browserstack-reporting - This repository contains an example of running Selenium tests and reporting BrowserStack test results, including full CI pipeline integration.

BrowserStack reporting and Selenium test result example This repository contains an example of running Selenium tests and reporting BrowserStack test

Testmo 1 Jan 1, 2022
Example auto-generated OpenAPI client library and an accompanying example Angular app.

To utilize this demo Head into petstore_frontend\petes_pets Run npm install Go to frontend_client_lib\out Run npm install Head back into petstore_fron

Alan Gross 1 Jan 21, 2022