thirdwebで、宝箱を開けるとFT, NFTを取得できるPackコントラクトを作ってみよう。
こんにちは、CryptoGamesのユウキです。
本日は、こちらの記事をもとに、Packコントラクトを作ってみたいと思います。
宝箱を開けると、ランダムでERC20やERC1155を取得することができます。
なお、ERC721で行うことも可能です。
では、やっていきましょう。
1 ERC20を作成する
では、まずthirdwebを使って、ERC20を作りましょう。
まずは、thirdwebのExplorerのページに行きます。
「Token」を選択します。
「Deploy Now」を選択
名前などのメタデータを設定して、「Deploy Now」
では、トークンをミントしていきましょう。「Mint」を選択
今回は「100」で設定し、「Mint Tokens」
このように、ミントされました。
2 ERC1155を作成する
では、宝箱を開けた時に出てくる、ERC1155も作っていきましょう。
「Edition」を選択
「Deploy Now」を選択
メタデータを設定して、「Deploy Now」
「Mint」を選択
こちらのアイテムと数量をそれぞれ設定していきます。
https://blog.thirdweb.com/guides/create-an-nft-lootbox/
なお、個数などは違う値でも大丈夫ですが、その場合、コードも修正が必要なので、最初はこの数字のままやるのが簡単だと思います。
下のようにして、８つのアイテムをミントしていきます。
なお、私の場合は何度かエラーが発生しました。
相関関係はわかりませんが、Nameに空白を入れないで実行したところ、うまくいきました。
このようにして、ミントができていきます。
3 コードを準備する
では、ERC20とERC1155の準備ができたので、コードを作成していきましょう。
こちらをGit cloneします。
下のようになりました。
続いて、yarn installを行います。
次に、「.env」に秘密鍵を設定します。
必ず「.gitignore」にも忘れずに、「.env」を設定します。
4 Packコントラクトをデプロイする
では、Packコントラクトをデプロイします。
「primary_sale_recipient」を自分のウォレットアドレスに変えた上で、次のコマンドで実施します。
node ./scripts/deployPack.mjs
これにより、表示されているのが、Packコントラクトのコントラクトアドレスです。
5 Packコントラクト使い方を見てみる
ではどのように使われているか見てみましょう。
その前に、下のようなパースエラーが出ているかもしれません。
その場合は、下のようにして修正ができると思います。
{
"extends": ["next", "next/core-web-vitals", "prettier", "next/babel"]
}
では、コードを見てみましょう。
まずは8~10行目を先ほど作ったコントラクトアドレスに変更します。
そして、16行目あたりから、ERC20,ERC1155がPackコントラクトのアドレスに対して、承認(setApprovalForAll)を行っています。
これにより、Packコントラクトがトランスファーができるようになっています。
また、Packを作成する際に、このように、ERC20,ERC1155を設定しています。
数量を変えた場合はこの辺りも変えていきます。
なお、create関数は公式で、次のように確認することができます。
https://portal.thirdweb.com/typescript/sdk.pack.create
下のように、ERC721も扱えそうですね。
https://portal.thirdweb.com/typescript/sdk.pack.create
では、中の確認ができたので、次のようにして、パックを作っていきます。
node ./scripts/bundleTokens.mjs
下のように、できたようです。
6 ページの表示を確認する
では、うまく実行されるか見ていきたいと思います。
「useContract」をPackコントラクトのアドレスに変更します。
そして、useOwnedNFTsでNFTを取得しています。
なお、実際の使い方はこのように公式からも確認できます。
まだ、ベータ版のようですね。
https://portal.thirdweb.com/react/react.useownednfts#useownednfts-function
下の箇所のコントラクトアドレスもPackコントラクトのアドレスに変更します。
また、Packを開けるためにopen関数が使われています。
このように使われています。
https://portal.thirdweb.com/typescript/sdk.pack.open
7 実際の動きを確認する
では、yarn devをして、実際に動かしてみましょう。
このように、表示されていました。
なお、実施前にメタマスクのパスワードを入力し、ロックを解除している状態にしておく必要があります。
では、宝箱を開けるために、「Open」を押します。
反映されないときは、下のように、処理が失敗していないかも確認してみてください。
うまくいけば、このように中身が出てきます。
なお、これにより、開けたPackはバーンされます。
今回は以上です。
ぜひやってみてください。
Discussion