使用 ThirdWeb 製作自己的 NFT Mint Site
搭上NFT熱潮,發現有一些網站開始主打不用自己寫智能合約,也可以製作NFT,ThirdWeb就是其中一個。
但我們用ThirdWeb上傳好NFT之後,看到他提供給消費者Mint的介面有點陽春,好在他們本來就是主打可以自己使用api的方式去打他們的各種功能,例如Mint、連結錢包、查詢NFT數量之類的。
可以串接api的方式他們有提供很多種:
- Javascript SDK
- React SDK
- 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裡面會有這些資訊:
- name
- description
- image
- seller_fee_basis_points
- fee_recipient
- merkle
- 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打造自己的方法喔!
發表評論
想要加入討論嗎?請盡情發表您的想法!