🐙

thirdwebで作成したコントラクトに、My JSON Serverにホストしたメタデータを設定してみよう!

2022/12/01に公開約3,000字

こんにちは、CryptoGamesの高橋です。

本日は、こちらの公式のブログを元に進めていきます。
https://blog.thirdweb.com/guides/release-an-erc721-drop-with-centralized-metadata/

また、あらかじめthirdwebの「NFT Drop」でコントラクトの作成を行っておいてください。
やり方が不明でしたら、こちらのハンズオンもご参照ください。
https://www.youtube.com/watch?v=951rbH51kLM&t=611s

1.開発準備を行う

まずは、こちらのGithubからGit cloneを行います。
https://github.com/thirdweb-example/updatable-nft-metadata

下のように、できました。

次に、フォルダを移動した上で、下のどちらかで、dotenvをインストールします。

npm i @thirdweb-dev/sdk dotenv # npm

yarn add @thirdweb-dev/sdk dotenv # yarn

下のようにできました。

2.メタデータを設定する

次に、metadataを確認しましょう。

下のように、「db.json」に入れて、Githubに登録することで、「My JSON Server」で取得ができるようになります。

3.「.env」ファイルを作成する

「.env」ファイルを作り、秘密鍵を入れます。

「.gitignore」ファイルに「.env」が入っていることを確認してください。

4.Githubに登録する

現在、下のように、.git/configのoriginにthirdwebが入っています。

自分のGithubに登録したいので、次のようにして、消していきます。

git remote rm origin

Githubで、下のように新しいレポジトリを作成します。

このようにできました。

では、次のコマンドで、Githubに登録していきます。

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin <YOUR_REPO_URL_HERE>
git push -u origin main

次のように、実行しました。

Githubにも、このように登録されました。

5.My JSON Serverを確認する

すると、下のURLを確認すると、My JSON Server上にホストされていることがわかります。

https://my-json-server.typicode.com/<your_username>/<your_repo_name>/nfts/0

下のようになっています。

6.スクリプトを実行する

では、あらかじめ作成しておいた、コントラクトのアドレスをコピーします。

下のように、getContract内にアドレスを設定します。

ここで、createBatch関数も見てみましょう。
下のように、メタデータを設定しています。

これで、完了です。
では、下のコマンドでスクリプトを実行してみましょう。

node scripts/upload-nfts.mjs

これで、下のように、メタデータが反映されました。

今回は以上です。

ぜひやってみてください。

Discussion

ログインするとコメントできます