HashLipsで作成したデータを基にthirdwebでNFTを作成する

## HashLipsで作成したデータを基にthirdwebでNFTを作成する
すでに色々なサイトで記事がありますが、自分でやってみたという記録の意味でまとめてみました。
※2023/06/24時点での内容となります。

また、[HashLips](https://hashlips.io/)で作った結果を[thirdweb](https://thirdweb.com/)にアップロードできる形にするコードも最後に書いています。

## 作成の記録

### 画像とメタデータの作成
画像とメタデータはHashLipsを使って作成しています。
作成に使用したデータは、以下に登録しています。
https://github.com/two-pack/hashlips_art_engine/releases/tag/example_stick_figure_1

### コントラクトの作成

まずは[thidwebのサイト](https://thirdweb.com/)を開いて、**Go to Dashboard** からダッシュボードへ移動します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/c50d761c-f978-44bc-5b48-83bbc2a99e22.png">

**Browse contracts** を探してクリックします。 **Explore** からでも行けます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/678221ba-4bb4-effb-3f2a-7d35171ad4e8.png">

**NFT Drop** を探してクリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/7607e2f7-0c5d-fae6-77fd-1f5f5fba2de0.png">

**Deploy now** をクリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/38e84867-5d0b-7be3-65cb-c207920e7495.png">

コンストラクタのパラメーターを設定していきます。
まずは、**Image**をクリックしてイメージ画像を設定します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/6283dd6b-5621-92a0-1c4e-732efbff0cf8.png">

**Name** , **Symbol** , **Description** を順に設定していきます。
**Symbol** はトークンのシンボル名になります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/0fd8b43b-bdbc-0481-e186-b78b7d12089d.png">

次にロイヤリティーと一次販売での受け取りの設定です。
* **Royalties**の**Recipient Address**に受け取るアドレス
* **Royalties**の**Percentage**にロイヤリティーの割合
* **Primary Sales**の**Recipient Address**に一次販売での収益を受け取るアドレス

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/7b1611f4-000e-a749-8962-c3bb2e682e51.png">

最後にチェーンを選択します。今回はGoerliテストネットにデプロイします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/3a8055a8-f033-7c48-50a3-e24ada0939fb.png">

**Deploy Now** ボタンを押すとデプロイが開始されます。
以下のような画面が表示されてから、Metamaskで確認を求められます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/404e1f26-7248-c665-188f-9ac0d782175d.png">
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/1a7e4670-9f7c-ef01-f93b-b94771124ee7.png">

トランザクションが通ると、**Deploying contract**にチェックが入って、ダッシュボードへの追加が開始されます。ここで、Metamaskで署名が求められます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/c23b5159-d34c-704d-cb04-200dcc3ab331.png">
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/32cdf358-4676-64bd-cfaa-ed2a6dc0176e.png">

完了するとダッシュボードに追加されています。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/df84f734-ad8a-49b7-4e99-2981b488e245.png">

### 画像とメタデータのアップロード

ダッシュボードでコントラクトを開くと、**Contract checklist**として残作業が表示されています。これに従って次は画像とメタデータのアップロードを行います。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/30244c44-ef65-18a8-a3fb-9bbf0b6547a4.png">

**NFTs**を開きます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/e0cdd034-84af-ae1c-4d6d-ef300dff9b02.png">

**Batch Upload**ボタンを押すと以下の画面になるので、用意しておいたフォルダをドロップします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/8a0dfefb-fd93-f28b-3eea-f9721f8e88d5.png">

ドロップしたフォルダに入っているメタデータと画像が表示されます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/0a1ab466-fbee-3ba9-3800-62bfcf10516e.png">

結果を確認して**Next**ボタンを押すと以下の画面になります。
リビールの有無を選択します。
* リビールなしなら**Reveal upon mint**
* リビールありなら**Delayed Reveal**

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/09353254-b314-041f-4a4f-426f1a4f5a4f.png">

リビールなしの場合は以下のように表示され、そのままアップロードに移ります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/b00b6dfa-ba87-fdf7-dca1-382590dc99cf.png">

リビールありの場合は、リビール画像の設定を行います。
また、最後のチェックボックスをチェックすると、CSVで指定した内容をシャッフルしてアップロードしてくれます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/8579abb1-a8d5-97bc-5fe8-414c8a9ae389.png">

**Upload**ボタンを押すとMetamaskで確認が求められます。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/50921461-bc2f-11a7-2ba6-73fb86998662.png">

トランザクションが通るとリビール前のNFTが完成です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/f1d5800c-e062-2c3c-0a96-871f509f89e4.png">

### クレーム条件の設定

**Claim Conditions**からクレーム条件を設定します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/c14b3554-c7e3-c235-b223-ae94e215b7c3.png">

**Add Phase**ボタンを押すと、**Public**や**Allowlist Only**など、クレームのフェーズが表示されます。ここでは**Public**を選択してみます。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/73132f90-25a2-ebf6-29a6-2b0757a47aba.png">

ここで販売価格やミント数上限などを設定します。
それぞれ設定したら、**Save Phases**のボタンを押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/b4e20ace-dc77-2957-c1a4-a9725d50d96c.png">

Metamaskで確認がでます。トランザクションが通ると設定完了です。
必要に応じて、別のフェーズも追加設定できます。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/af3ea964-6687-16b2-f798-905b07e638f9.png">

### 埋め込みのコードを使ってミントする

**Embed**からサイトに埋め込むためのコードをコピーできます。
適当なサイトに埋め込んでみた感じが以下です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/8d6f87c9-d0b9-1aa8-21ea-08c4911e2c24.png">

実際にミントしてみると、テストネットのOpenSeaで以下のようにミントされている事がわかります。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/c0eda76d-3b5c-f504-4eaa-e45a822646cb.png">

### リビールする

リビールするには、**NFTs**の**Reveal NFTs**ボタンを押します。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/37bb8986-ba8a-252f-d491-f92bbf0a80bb.png">

リビールの設定をした際のパスワードを入力して、**Reveal NFTs**ボタンを押します。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/f59d590c-e9d1-5f47-8beb-617bcdb1b64b.png">

Metamaskでトランザクションを確認するとリビールが完了します。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/e34816eb-6530-e439-a42a-a96467c7b57a.png">

OpenSeaでもリビール後の画像を確認できました。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30716/53abf959-2c07-d1cb-1bbb-1ad3b3b03e07.png">

## おまけ：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