使用 ThirdWeb 製作自己的 NFT Mint Site

搭上NFT熱潮,發現有一些網站開始主打不用自己寫智能合約,也可以製作NFT,ThirdWeb就是其中一個。

但我們用ThirdWeb上傳好NFT之後,看到他提供給消費者Mint的介面有點陽春,好在他們本來就是主打可以自己使用api的方式去打他們的各種功能,例如Mint、連結錢包、查詢NFT數量之類的。

可以串接api的方式他們有提供很多種:

  1. Javascript SDK
  2. React SDK
  3. Python SDK

本篇選的是React SDK

所以首先你必須要有一個react專案:

$ npx create-react-app mint-site
$ cd mint-site

 

安裝SDK

安裝步驟可以參考官網

$ yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

資料夾結構大致上是

index.js
-- App.js
-- pages/
---- Home.js

Provider包在App.js

import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
import Home from "pages/Home";
const App = () => {
   return (
        <ThirdwebProvider desiredChainId={ChainId.Rinkeby}>
            <Home />
        </ThirdwebProvider>
   );
 };

這邊補充:因為我使用的測試鏈是 Rinkeby,也就是說我領 Rinkeby 的測試以太幣,然後去 ThirdWeb 創建 Rinkeby 鏈下的 NFT 項目,因此在這邊我才會傳入ChainId.Rinkeby

在Provider的範圍內連結錢包

import { useAddress, useMetamask } from "@thirdweb-dev/react";
const Home = () => {
  const connectWithMetamask = useMetamask();
  const address = useAddress();
  return (
    <div>
      {address ? (
        <h4>Connected as {address}</h4>
      ) : (
        <button onClick={connectWithMetamask}>Connect Metamask Wallet</button>
      )}
    </div>
  )
}

因為我創建的項目是 NFT Drop,先顯示出我的項目詳細資料。

import { useNFTDrop } from "@thirdweb-dev/react";

const Home = () => {
  const nftDrops = useNFTDrop(`這邊放你的NFT合約地址`);
  const [metadata, setMetadata] = useState(null);
  const handleInit = async () => {
    setMetadata(await nftDrops.metadata.get());
  }
  useEffect(() => {
    handleInit();
  }, []);
  return (
    <div>
      <img
        src={metadata?.image}
        width={100}
        height={100}
        alt={metadata?.name}
      />
      <h3>{metadata?.name}({metadata?.symbol})</h3>
      <p>description: {metadata?.description}</p>
    </div>
  )
}

metadata裡面會有這些資訊:

  1. name
  2. description
  3. image
  4. seller_fee_basis_points
  5. fee_recipient
  6. merkle
  7. symbol

新增一個Mint按鈕

要先檢查使用者連結的小狐狸錢包,鏈是不是跟你創建的NFT項目使用的鏈一樣。

例如我創建的鏈是Rinkeby,那麼我連結小狐狸時,如果選的不是Rinkeby,網站就要跳出提醒。

檢查是否同一個鏈,使用useNetworkMismatch hook

Mint方法使用nftDrops裡面的claim(),傳入參數是我們一次要Mint的數量。

import { useNFTDrop, useNetworkMismatch } from "@thirdweb-dev/react";

const Home = () => {
  const nftDrops = useNFTDrop(`這邊放你的NFT合約地址`);
  const [metadata, setMetadata] = useState(null);
  const isMismatched = useNetworkMismatch();

  const handleMint = async () => {
    await nftDrops.claim(1);
  };

  const handleInit = async () => {
    setMetadata(await nftDrops.metadata.get());
  }
  useEffect(() => {
    handleInit();
  }, []);
  return (
    <div>
      <img
        src={metadata?.image}
        width={100}
        height={100}
        alt={metadata?.name}
      />
      <h3>{metadata?.name}({metadata?.symbol})</h3>
      <p>description: {metadata?.description}</p>

      <button
        disabled={isMismatched}
        onClick={handleMint}
      >
        {isMismatched && `切換到Rinkeby測試鏈才能`} Mint
      </button>
    </div>
  )
}

補充幾個常用方法:


await nftDrops.getAllUnclaimed(); // 列出還沒被Mint出來的項目,回傳陣列

await nftDrops.getAllClaimed(); // 列出被Mint走的項目,裡面會顯示owner地址,可以用連結錢包地址過濾,顯示出自己擁有的NFT項目,回傳陣列


前端基本上用Javascript SDK還是比較方便,因為官方文檔幾乎都寫在Javascrip SDK,react SDK文件比較陽春XD

差別就在react SDK有包成hook給你用的差別而已,對hook熟的人也可以自己用javascrip SDK打造自己的方法喔!


如何領測試幣?

0

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。