Mint Solana NFTs by Metaplex

Metaplex 是目前 Solana 上最大的 Marketplace 開發工具,本文透過 Metaplex 的第二版糖果機快速上傳 NFT,並透過官方的預設的 Mint 頁面串接。

1. Prerequisites

Solana CLI 的部分安裝好要加一下環境變數才行
export PATH=”/Users/USER_NAME/.local/share/solana/install/active_release/bin:$PATH”

# Yarn
npm install -g yarn
yarn --version

# Typescript
npm install -g typescript
npm install -g ts-node
ts-node --version

# Solana CLI
sh -c "$(curl -sSfL https://release.solana.com/v1.10.23/install)"
solana --version 

2. Prepare Solana Dev Account

更多 Solana CLI 的用法請看這篇:

Solana CLI Note

第一次使用的話可有案按照下面這些指令
快速產生一個開發帳號,切換到 Devnet ,並空投 2 顆 Solana 給自己
不論是新建合約或是呼叫合約都會需要 Solana 的

solana-keygen new --outfile ~/.config/solana/devnet.json
solana config set --keypair ~/.config/solana/devnet.json
solana config set --url devnet
solana airdrop 2

3. Clone Metaplex and Run

新建一個資料夾並切換到資料夾下
接著 clone Metaplex 最新的 tag 來使用,筆者寫這篇文章的時候是 v1.2.0

mkdir solana-metaplex-nft
cd solana-metaplex-nft
git clone -b v1.2.0 https://github.com/metaplex-foundation/metaplex.git

Clone 完畢後不用切到 metaplex 資料夾下
直接在根目錄進行 yarn install
因為安裝過程會比較久一些,避免 timeout 中斷我們在後面下較長的時間
若你是 clone 跟我相同版本的 metaplex,那麼 candy machine v2 的版本會是 0.0.2

yarn install --cwd metaplex/js/ --network-timeout 600000

# 0.0.2
ts-node metaplex/js/packages/cli/src/candy-machine-v2-cli.ts --version

4. Prepare NFT Assets

接下來用 VSCode 打開專案並新增一個 assets 的資料夾來存放 NFT 圖片和 MetaData
注意編號是從 0 開始,且圖片和 MetaData 的編號要 1 對 1 Mapping 好
然後把 MetaData 下 creators 的 address 換成自己的 solana public key

{
    "name": "Anya Forger Bored APE #0",
    "symbol": "ANYA",
    "image": "0.png",
    "properties": {
      "files": [
        {
          "uri": "0.png",
          "type": "image/png"
        }
      ],
      "creators": [
        {
          "address": "<YOUR WALLET ADDRESS>",
          "share": 100
        }
      ]
    }
  }
metaplex-nft-assets

5. Candy Machine Config

接下來就是重頭戲,新增 Metaplex 糖果機的設定檔
我們只要透過這個設定檔,就可以達成各種 mint NFT 所需要的功能

最基本要設定的參數是這幾個:
price、number、solTreasuryAccount、goLiveDate、storage
有很多其他的好用參數,比如白名單、IPFS、AWS 等等
筆者這邊多設定了一個 endSettings 來做測試和簡單 Demo,詳細可參考官網說明
https://docs.metaplex.com/candy-machine-v2/configuration

{
    "price": 0.1,
    "number": 3,
    "gatekeeper": null,
    "solTreasuryAccount": "<YOUR WALLET ADDRESS>",
    "splTokenAccount": null,
    "splToken": null,
    "goLiveDate": "01 June 2022 09:00:00 GMT",
    "endSettings": {
        "endSettingType": { "date":true },
        "value":"05 June 2022 23:59:00 GMT"
    },
    "whitelistMintSettings": null,
    "hiddenSettings": null,
    "storage": "arweave",
    "ipfsInfuraProjectId": null,
    "ipfsInfuraSecret": null,
    "awsS3Bucket": null,
    "noRetainAuthority": false,
    "noMutable": false
}

6. Upload NFTs by Candy Machine

就這樣!新增完糖果機的設定檔之後
接著就能將糖果機 deploy 出去並且上傳 NFT 到 Metaplex 平台!
上傳完可以再接一個驗證指令,驗証是否有正確上傳

# Upload
ts-node metaplex/js/packages/cli/src/candy-machine-v2-cli.ts upload \
    -e devnet \
    -k ~/.config/solana/devnet.json \
    -cp config.json \
    ./assets 

# Verify
ts-node metaplex/js/packages/cli/src/candy-machine-v2-cli.ts verify_upload \
    -e devnet \
    -k ~/.config/solana/devnet.json
metaplex-candy-machine-deploy
上傳成功的 Terminal 畫面

過程如果出錯就可以再檢查這幾件事
– NFT 圖片和 MetaData 都放在 assets 下,且編號一對一
– 錢包裡有 Solana
– config.json 的設定和路徑正確

成功後在 .cache/devnet-temp.json 可以看到糖果機的 ID 以及所有 NFT 在 Arweave 的網址

metaplex-candy-machine-config

7. Frontend Web

前端的部分 Candy Machine V2,官方的範例比之前完整許多
我們只需要將剛剛產生出來的 Candy Machine ID 設定到 web 資料夾下的 .env 即可
先把範例檔名後的 example 去掉:.env.example => .env
metaplex/js/packages/candy-machine-ui/.env.example

REACT_APP_CANDY_MACHINE_ID=<YOUR CANDY MACHINE ID>
REACT_APP_SOLANA_NETWORK=devnet
REACT_APP_SOLANA_RPC_HOST=https://api.devnet.solana.com
cd metaplex/js/packages/candy-machine-ui
yarn install && yarn start

8. Source Code & Demo

metaplex-candy-machine-web
Metaplex Candy Machine v2

Github:https://github.com/scissor/Metaplex-Candy-Machine-Web
Demo:https://metaplex-candy-machine-web.scissorlee.repl.co/

Leave a Reply