thirdwebを利用してOasysのテストネットにエアドロップ用のNFTをデプロイ

# はじめに

ノーコードツールのthirdwebを利用してOasysのテストネットにNFTをデプロイします。

今まではSolidityとopenzeppelinでNFTのコントラクトをスクラッチ実装していたが、基本的な処理をするコントラクトはthirdwebがラインナップとして提供しているものがあるので、そちらを利用した方が開発が楽にできそうであった。

今回はNFTのエアドロップを簡単に設定可能な、「NFT Drop」をデプロイする。

https://thirdweb.com/thirdweb.eth/DropERC721

# 事前準備

## 1. ウォレットの準備とthirdwebアカウントの作成
thirdwebを利用するためにはWeb3のウォレットが必要となる。今回はMetamaskを利用してthirdwebを利用する。

Metamaskは、ChromeウェブストアからChrome拡張ダウンロードし、アカウントを作成する。

https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=ja

ウォレットの作成手順は以下のリンクなどを参照。

https://gamewith-nft.jp/guide/p2755

ウォレットの準備ができたら、thirdwebにアクセスする。

https://thirdweb.com/dashboard

アクセス後「Connect Wallet」よりウォレットとの接続を行う。

![スクリーンショット 2023-09-24 11.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/893f96de-e324-4893-aede-6f1d74394b4a.png)

利用するウォレットを選択する画面が表示されるため、「Metamask」を選択する。

![スクリーンショット 2023-09-24 11.42.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/678e23b7-414e-7588-1966-225cc9aab7d9.png)

初回の場合、サインインの要求画面が表示され流ので「Sign In」を選択する。

![スクリーンショット 2023-09-24 11.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/e7fb8764-54a1-8683-654f-a40e8982620e.png)

その後Metamaskの拡張機能が開き、thirdwebのページに対して署名が要求されるため、「署名」を選択する.

![スクリーンショット 2023-09-24 11.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/3a2c4d98-e86a-7b12-fe69-29f00329ae6c.png)

ダッシュボード画面に遷移する。画面右上にMetamaskのアイコンが表示されていれば、正常に接続されている状態となる。

![スクリーンショット 2023-09-24 11.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/d9589100-97a0-03ad-cabc-301e6590719a.png)

## 2. OasysのTestnetに接続

Metamaskに設定を追加し、Oasysのテストネットに接続する。今回はOasysのテストネットの一つである、[HUB-Testnet](https://gamewith-nft.jp/guide/p2755)に接続する。

Metamaskの詳細メニューより、「設定」 > 「ネットワーク」を選択する。
現在接続可能なネットワークの一覧が表示されるので、「ネットワークを追加」を選択する

![スクリーンショット 2023-09-24 21.21.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/c2b03a5b-1ab9-3948-4521-c90fb02d9c58.png)

以下のネットワークの追加画面に遷移する。一般的なネットワークであれば検索エリアから追加が可能だが、Oasysのテストネットは検索では出てこないため、「ネットワークを手動で追加」から手動で追加する必要がある。

![スクリーンショット 2023-09-24 21.22.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/97d906c8-ca05-36a8-040e-c5fc6dc83bb7.png)

testnetの情報を入力する。「ネットワーク名」は任意の名称で、それ以外は[こちら](https://docs.oasys.games/docs/staking/rpc-endpoint/1-1-rpc-endpoint#testnet-hub-layer)の情報を入力する。

| 項目 | 入力内容 |
| - | - |
|　ネットワーク名 | 任意の名称。今回は「Oasys Testnet Hub」を選択する |
| 新しいPRC URL | https://rpc.testnet.oasys.games |
| チェーンID | 9372 |
| 通貨記号 | OAS |
| ブロックエクスプローラーのURL | https://explorer.testnet.oasys.games/ |

![スクリーンショット 2023-09-24 21.33.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/9dc9d759-27a9-b10f-e5dc-dd16b5e370bf.png)

ネットワークが追加されたらポップアップが表示されるので、「Oasys Testnet Hubに切り替える」をクリックする。

![スクリーンショット 2023-09-24 21.35.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/4a96e481-b21e-ee98-1b54-c2d49e3631b9.png)

画面左上を確認して「Oasys Tesnet Hub」と表示されていることを確認する。

![スクリーンショット 2023-09-24 21.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/51cef85a-1ff2-dd13-6537-aaae63709e70.png)

デプロイに必要なサンプルのトークンは以下のURLから取得する。「Address」の箇所に自身のウォレットアドレスを入力する。

- https://faucet.testnet.oasys.games/


![スクリーンショット 2023-09-24 21.42.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/80338517-fd7b-8900-6ad9-62708778ca7d.png)


## 3. OasysのテストネットにNFTのデプロイ

NFTをOasysのテストネットにデプロイする。はじめに[Explore](https://thirdweb.com/explore)のページに遷移する。

![スクリーンショット 2023-09-24 21.09.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/c6d2d57c-af14-e696-3009-03cf65d786e0.png)

「NFT Drop」を選択し、詳細画面の「Deploy now」をクリックする。

![スクリーンショット 2023-09-24 21.10.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/18ecbd4a-e651-9a7b-8260-e554cb632372.png)

メニューが表示されるので、必要情報を入力する。

| 項目 | 入力内容 |
| - | - |
| Image | (オプション)コントラクトのアイコン(オプション) |
| Name | (必須)コントラクト名、任意の名称 |
| Symbol | (オプション)コントラクトが発行するトークンの通貨。Metamask上でトークン数の後に`10BTC`や`10ETH`のように、単位として表示される |
| Description | (オプション)トークンの概要 |
| Royalties | (必須)NFTの二次販売のロイヤリティを受け取るアドレス。デフォルトで自身のウォレットアドレスが表示される |
| Primary Sales | (必須)NFTの初期販売のロイヤリティを受け取るアドレス。デフォルトで自身のウォレットアドレスが表示され |


![スクリーンショット 2023-09-24 21.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/a6c54102-146b-8314-3df7-5779f354b0cc.png)

「Network / Chain」の項目には、先ほどMetamaskで登録したものと同じ、Oasysのテストネットの情報を入力する。入力が完了したら「Add Network」をクリックする。

![スクリーンショット 2023-09-24 22.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/f200a8d3-2512-db0d-f751-9030ad965313.png)

設定が完了したら「Deploy Now」をクリックする。

![スクリーンショット 2023-09-24 22.13.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/29c336a7-877b-1ac2-abd1-5ca88c164509.png)

Metamaskが起動してガス代の見積もりが提示されるため、「確認」をクリックする。

![スクリーンショット 2023-09-24 22.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/11253220-42ad-06ed-65f4-082f999556b2.png)

再度Metamaskが起動し、署名が要求されるため「署名」をクリックする。

![スクリーンショット 2023-09-24 22.25.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/afc94850-b245-6d95-b7fc-c2e97a52f585.png)

デプロイが成功し、以下のダッシュボードが表示されたらNFTの作成完了。

![スクリーンショット 2023-09-24 22.26.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/ac601e58-a8c9-e8b2-b10c-98025cb4251a.png)

## 4. NFTのMint

サイドバーの「Extensins > NFTs」をクリックする。

![スクリーンショット 2023-11-24 16.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/311db1c9-0560-8a23-f2da-7bae178cad53.png)

その後「Single Upload」にNFTをアップロードする。複数ファイルを同時にアップロードするときは、隣の「Batch Upload」を利用する。

![スクリーンショット 2023-11-24 16.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/cd20deeb-efbc-227d-c633-ded76d0cc156.png)


デプロイが完了したので早速NFTをMintする。「Name」だけ必須項目でそれ以外は任意入力。今回は「Select file」にこのアカウントのアイコンをアップロードする。
※「Select file」でファイルアップロードしても、画面は更新されていない

![スクリーンショット 2023-11-24 16.15.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/9ce5c350-a9cb-146a-1e07-de37590b5809.png)

完了したら「Lazy Mint NFT」でNFTをMintする。Metamaskの承認を許可し、しばらく待つとNFTが発行される。ダッシュボードに以下のように表示されれば作成が完了となる。

![スクリーンショット 2023-11-24 16.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/65f65c98-293f-ca1c-0c55-456d3e47d4b3.png)

## 5.請求情報(Claim)の設定

現時点では、デプロイしたNFTは誰もエアドロップできない状態になっている。エアドロップできるようにするには、コントラクトにNFTの販売価格や購入可能なユーザを指定など、請求条件を設定する必要がある。

「Claim Conditions > Add Phase」よりNFTの請求条件を設定する。今回は誰でも請求できるように「Public」を指定する。

![スクリーンショット 2023-11-24 16.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/ba3a87b8-3b8b-302c-0c9c-db7e3555bf16.png)

その後詳細な設定を入力していく。

![スクリーンショット 2023-11-24 16.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/f32a3af4-1cba-2a64-8a2d-c6ccb4d600b0.png)

各設定項目に入力する内容は以下の通り。
| 項目 | 入力内容 |
| - | - |
|Name| 管理者が識別するための名前、任意の名称で良い |
|When will this phase start? | この請求情報が有効になる日 |
|How many NFTs will you drop in this phase? | この請求情報でドロップ可能なNFTの数 |
|How much do you want to charge to claim each NFT? | NFTのドロップに必要な、手数料を除いたトークン数 |
|How many NFTs can be claimed per wallet? | 1つウォレットが獲得可能なNFT数 |

今回は特に指定せず、デフォルトのまま利用し「Save Phase」をクリックする。Metamaskの承認が完了ししばらくすると請求情報が一覧に表示される。

![スクリーンショット 2023-11-24 16.45.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/babe8f93-7881-240a-7d4c-67b372219843.png)

こちらで「Claim」の設定が完了となる。

## 6. エアドロップの実行

準備ができたので、エアドロップを試してみる。NFTsのダッシュボードの「Claim」ボタンから実行する。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3136333638302f36356636356339382d323933662d636131632d306335352d3435366433653437643462332e706e67 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/e681615a-65c1-a0c1-fa32-e73cc670ac8b.png)

「Claim」の数量を聞かれるので「1」を入力し、「Claim NFT」をクリックする。

![スクリーンショット 2023-11-24 16.23.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/84b693f4-1add-9106-e64b-6e8481062e73.png)

実行するとNFTの`Owner`が自分のウォレットアドレスになっている。

![スクリーンショット 2023-11-24 16.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/5ddad3e3-32b4-b057-63da-68ed7e927377.png)

Oasysのテストネットにエアドロップ用のNFTをデプロイできた。

# おわりに

thirdwebを利用することで、簡単にNFTを作成~デプロイまで実行できた。今までSolidityでスクラッチ開発していたが、よほど特殊な機能を持たない限り、こういったノーコードツールで実装できると良さそう。

thirdwebはSDKも充実していいるので、そこらへんも紹介したいですね。

フルスクラッチで実装する場合

https://qiita.com/sey323/items/6701b34d66a2e8c5ea17

　コントラクトをPythonで実行する場合

 https://qiita.com/sey323/items/81fd07947dc34cf84644