Solana NFT 開發第三話 Mint UI

  • FrankFrank
  • /
  • 5 分鐘閱讀
  • /
  • Jun 3, 2022
  • /
  • - views

上一篇文章我們已經完成了 Solana Candy Machine 的設定和上載 assets,並且已經可以用 Command Line 鑄造 NFT。 但距離一個能夠讓別人前往夠買的 NFT 項目專案還差了一步,那就是一個友好的前端界面,本文我們就來解決這個問題。

可喜的是,metaplex 已經包含了一個 UI 可供使用,而且開源社區亦有很多 UI 前端界面,可以直接拿來使用。只需要簡單的設定即可。

本文中,我們使用 candy-machine-v2-responsive-ui 這個開源 UI。

git clone https://github.com/Fulgurus/candy-machine-v2-responsive-ui.git

cd candy-machine-v2-responsive-ui

在資料夾中我們看到有 .env.example 檔案,將其重命名為 .env 並打開他。

mv .env.example .env

vi .env

我們需要修改 .env 中的 REACT_APP_CANDY_MACHINE_ID的設定, 改為我們自己的 Candy Machine ID。

REACT_APP_CANDY_MACHINE_ID=   <-- 改為我們自己的 Candy Machine ID
REACT_APP_SOLANA_NETWORK=devnet   <-- 指定測試網路
REACT_APP_SOLANA_RPC_HOST=https://api.devnet.solana.com <- 測試網路RPC


# ADDITIONAL PARAMS TO SET IF USING SPL-TOKEN AS MINTING CURRENCY ONLY :
# Spl-Token symbol to display next the price
#REACT_APP_SPL_TOKEN_TO_MINT_NAME=

# Spl-token decimals place defined on creation (default is 9)
#REACT_APP_SPL_TOKEN_TO_MINT_DECIMALS=

# To avoid harmless compilation warnings generating a build error, keep CI set to false
CI=false

修改完成後保存即可。

接下來我們可以運行 UI 試試看。

yarn install
yarn start

啟動後,訪問 http://localhost:3000/  ,就可以看到 UI 已經完成了。

這個 UI 已經是一個能夠完全正常運作的界面,可以基於這個 UI 根據自己的需要進行修改。

至此,一個能夠正常運作的 Solana NFT 已經完成了。 接下來,我們將繼續探討 NFT 的進階功能。下一篇文章,將講講怎樣做到白名單鑄造。