NFTゲートウェブサイトをつくる方法

NFsのためのよりダイナミックなユースケースの1つはNFTホルダーへのメンバーシップパスとしてそれらを使用しています.あなたがコレクションから特定のNFTにアクセスすることによってゲートウェイされるあなたのコミュニティのためにウェブサイトを作成したいと仮定しましょう.NFTへのアクセスでダウンロード可能なコンテンツや隠しページを保つことができます.
このガイドでは、我々はコンテンツをNFTを使用して反応を使用してコンテンツを制限するウェブサイトを作成します.
あなたは、我々の例組織から最終的なプロジェクトのコピーをつかむことができます.check it out here .

Mint an NFT Drop

NFTゲートウェイのウェブサイトを作成するにはNFT Collection ,畝NFT Drop ,畝Edition , またはEdition Drop ブロックは既に配備されています.作成していない場合は、1つを使用して作成することができますTypeScript SDK またはThirdweb ' sdashboard .

If your NFTs are an NFT Drop or Edition Drop contract, set up claim phases before using the claiming functions mentioned later in the guide.

私たちの例では、クッキークラブのメンバーのためのクッキークラブというNFTドロップ契約を使用しています.🤫
あなたはクッキークラブnftドロップを表示することができますthirdweb dashboard.

テンプレートリポジトリ

始めるにはcra-javascript-template これはすでに動作しているSDK設定を含んでいます.このテンプレートは簡単に学び、時間を節約するときに私たちのプロジェクトを開始します.

If you’d prefer to use your own template, you can install the latest version of our SDK in your project with npm install @thirdweb-dev/sdk react ethers oryarn add @thirdweb-dev/sdk react ethers

まず、cra-javascript-starter GitHub repository をクリックして“このテンプレートを使用して”コピーを作成します.

プロジェクトの名前、説明、およびその他の設定を追加し、ローカルデバイス上でクローンします.ディレクトリを開いて実行するnpm install すべての依存関係をインストールするために、あなたの端末で.

ブロックを設定する

インサイドsrc フォルダを開きますindex.js ファイル.最初に、私たちのNFT低下のチェーンにチェーンIDを変えます.このプロジェクトについてはRinkeby 私たちのNFTドロップ契約はRrinkeby Testnetにあるので.

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-vitals
reportWebVitals();

接続ウォレットボタン

同じフォルダにはapp.js ファイル.この1つでは、我々はユーザーにアプリケーションに接続し、我々のユーザーの財布のアドレスを取得できるようにしたい.フロントエンドでは、Metamaskとユーザーが接続できるボタンを作成します.財布が接続されている場合は、対応するアドレスが表示されます.

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;

我々のアプリのように見えるし、実行していることを確認してみましょうnpm start 端末で.

条件付きコンテンツをレンダリング

同じApp.js ファイルは、ユーザーの接続状態に基づいて特定のページをレンダリングする条件を追加します.彼らがNFTをすでに持たないならば、我々はユーザーにドロップからNFTを造ることができて欲しいです.接続されたユーザーが1を持っているならば、我々は若干の祝辞テキストを表示します.
として、私たちの短縮財布のアドレスを表示するヘルパー機能を追加しましたtruncateAddress . お気軽に追加したり、アプリでも同様にこれを省略します.

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;

USE効果を追加して状態変化をチェックする

最後に、私たちはuseEffect 機能は、我々はアプリの最新の状態と最新の状態にしてください.この関数は、依存配列の変更時に毎回トリガされます.例えば、ユーザのアドレスまたはnftDrop 切断または変更、我々はリフレッシュし、それに応じて更新したい.

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;

プロジェクトへのリンク

このプロジェクトのコピーを作成できますexample repository.

おめでとう！

レッツゴー!あなたが反応を使用してNFTゲート会員のウェブサイトを作成しました.あなたのNFTコミュニティのメンバーのためにこの新しいページの後ろにいくつかのダウンロード可能なコンテンツや秘密の更新を追加してください!