Day3. 使用 javascript 建構 DAO

設置 NFT 數據

好的，現在我們將實際部署與我們的成員資格NFT關聯的元數據。我們還沒有這樣做。到目前為止，我們所做的只是創建ERC-1155合約並添加一些基本元數據。我們實際上還沒有建立我們的會員NFT，讓我們這樣做！

移至並新增：scripts/3-config-nft.js

import sdk from "./1-initialize-sdk.js";
import { readFileSync } from "fs";

import dotenv from "dotenv";
dotenv.config();

const bundleDrop = sdk.getBundleDropModule(
    process.env.BUNDLEDROP_MODULE_ADDRESS
);

(async () => {
  try {
    await bundleDrop.createBatch([
      {
        name: "DevDAO apprentice",
        description: "This NFT will give you apprentice rolls to DevDAO!",
        image: readFileSync("scripts/assets/apprentice.png"),
      },
    ]);
    console.log("✅ Successfully created a new NFT in the drop!");
  } catch (error) {
    console.error("failed to create the new NFT", error);
  }
})()

我們要做的第一件事是訪問我們的模組

然後，我們使用createBatch在 ERC-1155 上設置實際的 NFT。我們需要設置一些屬性：

名稱：我們 NFT 的名稱
描述：我們NFT的描述
圖像：我們 NFT 的圖像。這是NFT的圖像，使用者將聲稱能夠訪問您的DAO

💡 *請記住，因為它是ERC-1155，我們所有的會員都將鑄造相同的NFT。*

請務必新增自己的圖像， image: readFileSync("scripts/assets/apprentice.png") 並將 apprentice.png 更換為自己的圖片檔案名稱，運行此腳本：

node scripts/3-config-nft.js

👋 Your app address is: 0xa002D595189bF9D50D5897C64b6e07BE5bdEe9b8
✅ Successfully created a new NFT in the drop!

設置聲明條件

現在，我們需要實際設置我們的鑄造條件

可以鑄造的NFT的最大數量是多少？
使用者何時可以開始鑄造NFT？
一次可以交易多少個？

這通常是您需要寫入合同的自定義邏輯，但在這種情況下，thirdweb使它變得容易，我們可以使用它們的函數並指定一些參數

在以下檔案新增：scripts/4-set-claim-condition.js

import sdk from "./1-initialize-sdk.js";

import dotenv from "dotenv";
dotenv.config();

const bundleDrop = sdk.getBundleDropModule(
    process.env.BUNDLEDROP_MODULE_ADDRESS
);

(async () => {
  try {
    const claimConditionFactory = bundleDrop.getClaimConditionFactory();

    claimConditionFactory.newClaimPhase({
      startTime: new Date(),
      maxQuantity: 50_000,
      maxQuantityPerTransaction: 1,
    });

    await bundleDrop.setClaimCondition(0, claimConditionFactory);
    console.log("✅ Successfully set claim condition on bundle drop:", bundleDrop.address);
  } catch (error) {
    console.error("Failed to set claim condition", error);
  }
})()

這實際上將與我們部署的鏈上合同進行交互並調整條件。請記住 - 使用ERC1155，我們可以讓多個人鑄造相同的NFT。在這種情況下，每個人都鑄造了一個帶有ID的NFT，而擁有這個NFT的人都被我視為DevDAO 的學徒。

運行此腳本：

node scripts/4-set-claim-condition.js

👋 Your app address is: 0xa002D595189bF9D50D5897C64b6e07BE5bdEe9b8
✅ Successfully set claim condition on bundle drop: 0x31c70F45060AE0870624Dd9D79A1d8dafC095A

我們已經成功地與我們部署的智慧合約進行了交互，併為我們的NFT提供了它必須遵循的某些規則如果複製粘貼列印捆綁包投遞位址並在Etherscan進行搜索，您將看到我們與合同互動的過程

檢查使用者是否擁有學徒NFT

接下來我們現在要做的是：

如果我們檢測到我們的用戶擁有NFT會員資格，請向他們顯示我們的"DAO dashboard"屏幕，他們可以在其中對提案進行投票並查看DAO相關信息
如果我們檢測到用戶沒有我們的NFT，我們會給他們一個按鈕來鑄造一個（通常情況我們可能希望成員達成一些條件才有資格鑄造NFT，不過我們這邊從簡）

前往 src/App.jsx 並新增以下：

import { ThirdwebSDK } from "@3rdweb/sdk";
const sdk = new ThirdwebSDK("rinkeby");

import dotenv from "dotenv";
dotenv.config();

const bundleDropModule = sdk.getBundleDropModule(
    process.env.BUNDLEDROP_MODULE_ADDRESS
);

const App = () => {
  const { connectWallet, address, error, provider } = useWeb3();
  console.log("👋 Address:", address)

  const [hasClaimedNFT, setHasClaimedNFT] = useState(false);

  useEffect(async () => {
    if (!address) {
      return;
    }

    const balance = await bundleDropModule.balanceOf(address, "0");

    try {
      if(balance.gt(0)) {
          setHasClaimedNFT(true);
          console.log("🌟 this user has a membership NFT!");
      } else {
          setHasClaimedNFT(false);
          console.log("😭 this user doesn't have a membership NFT.")
      }
    } catch (error) {
        setHasClaimedNFT(false);
        console.error("failed to nft balance", error);
    }
  }, [address]);

  // ... include all your other code that was already there below.

在這裏我們用thirdweb提供的SDK幫助我們可以輕鬆的讓前端與之前佈上rinkeby的合約交互，所需要的只有我們部署的ERC1155合約的位址，thirdweb就會為我們提供了一個小對象，讓我們可以很容易地用它來與我們的合約進行交互

接著我們要檢查使用者是否有我們的NFT，這實際上將查詢我們部署的智慧合約以獲取數據。如果你還記得我們的學徒資格NFT的tokenId 0。白話來說，在這裡我們問我們的合約，「嘿，這個用戶擁有id為0的令牌嗎？」

刷新此頁面時，您將看到如下內容：

OK！我們可以在瀏覽器的開發者工具看到這樣的訊息，確實符合我們的設想。接下來，讓我們創建一個鑄造按鈕，讓使用者鑄造一個成員資格NFT Day4. 使用 javascript 建構 DAO

Samumu.eth

Day3. 使用 javascript 建構 DAO

設置 NFT 數據

設置聲明條件

檢查使用者是否擁有學徒NFT

Samumu.eth