搭上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文件比較陽春ＸＤ

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

---

如何領測試幣？

小狐狸 metamask 如何領取 Rinkeby 測試用以太幣