HashLipsで作成したデータを基にthirdwebでNFTを作成する
すでに色々なサイトで記事がありますが、自分でやってみたという記録の意味でまとめてみました。
※2023/06/24時点での内容となります。
また、HashLipsで作った結果をthirdwebにアップロードできる形にするコードも最後に書いています。
作成の記録
画像とメタデータの作成
画像とメタデータはHashLipsを使って作成しています。
作成に使用したデータは、以下に登録しています。
https://github.com/two-pack/hashlips_art_engine/releases/tag/example_stick_figure_1
コントラクトの作成
まずはthidwebのサイトを開いて、Go to Dashboard からダッシュボードへ移動します。
Browse contracts を探してクリックします。 Explore からでも行けます。
NFT Drop を探してクリックします。
Deploy now をクリックします。
コンストラクタのパラメーターを設定していきます。
まずは、Imageをクリックしてイメージ画像を設定します。
Name , Symbol , Description を順に設定していきます。
Symbol はトークンのシンボル名になります。
次にロイヤリティーと一次販売での受け取りの設定です。
- RoyaltiesのRecipient Addressに受け取るアドレス
- RoyaltiesのPercentageにロイヤリティーの割合
- Primary SalesのRecipient Addressに一次販売での収益を受け取るアドレス
最後にチェーンを選択します。今回はGoerliテストネットにデプロイします。
Deploy Now ボタンを押すとデプロイが開始されます。
以下のような画面が表示されてから、Metamaskで確認を求められます。
トランザクションが通ると、Deploying contractにチェックが入って、ダッシュボードへの追加が開始されます。ここで、Metamaskで署名が求められます。
完了するとダッシュボードに追加されています。
画像とメタデータのアップロード
ダッシュボードでコントラクトを開くと、Contract checklistとして残作業が表示されています。これに従って次は画像とメタデータのアップロードを行います。
NFTsを開きます。
Batch Uploadボタンを押すと以下の画面になるので、用意しておいたフォルダをドロップします。
ドロップしたフォルダに入っているメタデータと画像が表示されます。
結果を確認してNextボタンを押すと以下の画面になります。
リビールの有無を選択します。
- リビールなしならReveal upon mint
- リビールありならDelayed Reveal
リビールなしの場合は以下のように表示され、そのままアップロードに移ります。
リビールありの場合は、リビール画像の設定を行います。
また、最後のチェックボックスをチェックすると、CSVで指定した内容をシャッフルしてアップロードしてくれます。
Uploadボタンを押すとMetamaskで確認が求められます。
トランザクションが通るとリビール前のNFTが完成です。
クレーム条件の設定
Claim Conditionsからクレーム条件を設定します。
Add Phaseボタンを押すと、PublicやAllowlist Onlyなど、クレームのフェーズが表示されます。ここではPublicを選択してみます。
ここで販売価格やミント数上限などを設定します。
それぞれ設定したら、Save Phasesのボタンを押します。
Metamaskで確認がでます。トランザクションが通ると設定完了です。
必要に応じて、別のフェーズも追加設定できます。
埋め込みのコードを使ってミントする
Embedからサイトに埋め込むためのコードをコピーできます。
適当なサイトに埋め込んでみた感じが以下です。
実際にミントしてみると、テストネットのOpenSeaで以下のようにミントされている事がわかります。
リビールする
リビールするには、NFTsのReveal NFTsボタンを押します。
リビールの設定をした際のパスワードを入力して、Reveal NFTsボタンを押します。
Metamaskでトランザクションを確認するとリビールが完了します。
OpenSeaでもリビール後の画像を確認できました。
おまけ：HashLipsのビルド結果からthirdwebのBatch Upload用のデータを作る
Batch Uploadには、画像とメタデータのCSVファイルをアップロードする必要があります。
HashLipsで画像とメタデータを作成している場合、そこからアップロードするデータを作成できると便利と考えてスクリプトを書きました。
コードは以下です。featuresブランチを使うと機能が入った状態のHashLipsを使えます。
https://github.com/two-pack/hashlips_art_engine/commit/a45bfdfb6bb00c3a07a356f5049140b8f13e0252
使用方法は、ビルドした後にexport_thirdwebスクリプトを実行します。
実行すると、buildフォルダを基にexportフォルダへ、Build Uploadでアップロード可能な状態のフォルダを作成します。
npm run build
npm run export_thirdweb
ここまで説明してきたものも、このスクリプトを使って作成しています。
2023/06/25追記
CSVファイルを作成するexport_thirdwebスクリプトについて書いていますが、
ビルドした結果のimageフォルダに_metadata.jsonを入れるだけで、imagesフォルダを使ってthirdwebにBatch Uploadできました。
なので、わざわざCSVファイルを作る必要はなかったですorz