How to create an NFT-gated website

import React from "react";import ReactDOM from "react-dom";import App from "./App";import reportWebVitals from "./reportWebVitals";import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";// This is the chainId your dApp will work on.const activeChainId = ChainId.Rinkeby;ReactDOM.render(  <React.StrictMode>    <ThirdwebProvider desiredChainId={activeChainId}>      <App />    </ThirdwebProvider>  </React.StrictMode>,  document.getElementById("root"));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();

import { useAddress, useMetamask } from "@thirdweb-dev/react";import "./styles.css";const App = () => {  // get address of user & allow them to connect with metamask  const address = useAddress();  const connectWithMetamask = useMetamask();  //if there isn't a wallet connected, display our connect MetaMask button  if (!address) {    return (      <>        <h1>Welcome to the Cookie Club</h1>        <button className="btn" onClick={connectWithMetamask}>          Connect MetaMask        </button>      </>    );  }  // if an address is connected, display address  return (    <div>      <p>Your address: {address}</p>    </div>  );};export default App;

import { useAddress, useMetamask } from '@thirdweb-dev/react';import { useState, useEffect } from 'react';import "./styles.css";const App = () => {    // get address of user & allow them to connect with metamask    const address = useAddress();    const connectWithMetamask = useMetamask();    // add nft Drop contract    const nftDrop = useNFTDrop("0x66463b3C1EBf08b9dE889BCc0A5cbf29dc0e2B7a");    const [hasClaimedNFT, setHasClaimedNFT] = useState(false);    const [isClaiming, setIsClaiming] = useState(false);    // function to claim NFT    const mintNFT = async () => {        try {            setIsClaiming(true);            await nftDrop.claim(1);            setHasClaimedNFT(true);        catch (error) {            setHasClaimedNFT(true);            console.error("Failed to mint NFT", error);        } finally {            setIsClaiming(false);        }    }    //if there isn't a wallet connected, display our connect MetaMask button    if (!address) {    return (      <>        <h1>Welcome to the Cookie Club</h1>        <button className="btn" onClick={connectWithMetamask}>          Connect MetaMask        </button>      </>    );  }    // if the user is connected and has an NFT from the drop, display text    if (hasClaimedNFT) {    return <h2>Congratulations! You have a Cookie NFT! </h2>;  }  // helper function to truncate the address so it displays in a nice format  function truncateAddress(address) {    return `${address.slice(0, 6)}...${address.slice(-4)}`;  }    //if the user does not have an NFT, show their address and mint an NFT button    return (    <>      <p className="address">        There are no Cookie NFTs held by:{" "}        <span className="value">{truncateAddress(address)}</span>      </p>      <button className="btn mint" disabled={isClaiming} onClick={mintNft}>        Mint NFT      </button>    </>  );}export default App;

import { useAddress, useMetamask, useNFTDrop } from "@thirdweb-dev/react";import { useState, useEffect } from "react";import "./styles.css";export default function App() {  // allow user to connect to app with metamask, and obtain address  const address = useAddress();  const connectWithMetamask = useMetamask();  //  const nftDrop = useNFTDrop("0x66463b3C1EBf08b9dE889BCc0A5cbf29dc0e2B7a");  const [hasClaimedNFT, setHasClaimedNFT] = useState(false);  const [isClaiming, setIsClaiming] = useState(false);  useEffect(() => {    // If they don't have an connected wallet, exit!    if (!address) {      return;    }    const checkBalance = async () => {      try {        const nfts = await nftDrop.getOwned(address);        setHasClaimedNFT(nfts?.length > 0);      } catch (error) {        setHasClaimedNFT(false);        console.error("Failed to get NFTs", error);      }    };    checkBalance();  }, [address, nftDrop]);  const mintNft = async () => {    try {      setIsClaiming(true);      await nftDrop.claim(1);      setHasClaimedNFT(true);    } catch (error) {      setHasClaimedNFT(false);      console.error("Failed to mint NFT", error);    } finally {      setIsClaiming(false);    }  };    //if there isn't a wallet connected, display our connect MetaMask button  if (!address) {    return (      <>        <h1>Welcome to the Cookie Club</h1>        <button className="btn" onClick={connectWithMetamask}>          Connect MetaMask        </button>      </>    );  }  // if the user is connected and has an NFT from the drop, display text  if (hasClaimedNFT) {    return <h2>Congratulations! You have a Cookie NFT! </h2>;  }  // truncates the address so it displays in a nice format  function truncateAddress(address) {    return `${address.slice(0, 6)}...${address.slice(-4)}`;  }  // if there are no NFTs from collection in wallet, display button to mint  return (    <>      <p className="address">        There are no Cookie NFTs held by:{" "}        <span className="value">{truncateAddress(address)}</span>      </p>      <button className="btn" disabled={isClaiming} onClick={mintNft}>        Mint NFT      </button>    </>  );}export default function app;