Zenn
🌟

CryptoMaidsで学ぶSolidity①~ミントサイトの全体像~

2022/08/29に公開
Solidity
NFT
tech

前置き

CryptoMaidsというNFTプロジェクト内に
開発部という技術についてゆるーく活動するチャンネルを作りました。
せっかくなので、CryptoMaidsのコントラクトを基にSolidityを学べたらなーと思い、色々書いてみます。

概要

以下のような内容を書く予定ですが、気分によって変わります
①ミントサイトの全体像：本記事
②セールコントラクト：近いうちに書く予定
③NFTコントラクト：近いうちに書く予定

ミントサイトの全体像

CryptoMaidsの場合は大まかに以下のような構成になっていました。
バックエンドのところに※が付いている理由は、セール中に確認し逃して存在するか不明のためです。
この辺りについては後述します。

フロントエンド

今回はSolidityに焦点を当てているためそして全く詳しくないため、技術詳細は割愛します。
個人的に特に気を付けたいなと思った点は、複数の環境に対応する必要があることです。

MetaKawaiiのMODの方が取られていたアンケートでは、PCとPhoneを使用している方が半数ずつと言う結果でした。

Android、iOSでの動作確認は必須と言えそうです。

また、CryptoMaidsのセール時には、

  • Braveの場合、MetaMaskとコネクトできない
  • MetaMask以外のウォレットとコネクトできない
    といったトラブルも見受けられました。

Braveの問題については、
設定→ウォレット→Default cryptocurrency wallet→なし
に変更することで解消できるようです。

MetaMask以外のウォレットに接続できない問題については、どのウォレットに対応すれば良いのか？が絞れず、技術的に解決が難しいように思います。
推奨環境を提示するなどの運用でカバーする方が良いような印象です。

バックエンド

ミントをしようとするユーザがWLを持っているかを判定する材料であるMerkleProofを提供する役割です。
（MerkleProofについては別の記事で触れたいと思います）

MerkleProofは

  • バックエンド側で保持しておくパターン
  • フロントエンド側で保持しておくパターン
    の2パターンがあり、プロジェクトによってまちまちなようです。

前述した通り、CryptoMaidsではどちらのパターンで実装しているか不明だったため、ここでは各プロジェクトや記事の状況をまとめたいと思います。

  • MetaKawaii
    開発者の方が記事を書かれており、バックエンド側で保持しているとのこと。

  • Using Merkle Trees for NFT Whitelists
    MerkleTreeについて解説しているYouTube動画。こちらのコメント欄では、FirebaseやAWSといったバックエンド側に持っておくとの情報がある。

  • NFTBoil
    AstarCatsやEdo2022の開発を手がけているHayattiさんが作成されたジェネレーティブNFTコレクションのテンプレート。
    こちらではフロントエンド側で保持する実装がされている。

セールコントラクト

フロントエンドからコールされ、

  • NFTのミント価格の設定
  • そのユーザがWLを持っているか
  • セール開始時間になっているか
  • ミント可能条件を満たしていれば、NFTコントラクトのmint関数を叩く

などを処理する役割を担います。

詳しいコードは次の記事で見ていきたいと思います。

NFTコントラクト

セールコントラクトからコールされ、NFTをmintするする役割を担います。
mintなどの関数はセールコントラクト以外から呼ばれないよう設定されているため、セールコントラクトでのWL持ちチェックをクリアできた場合のみmintが可能です。

  function mint(address to, uint256 tokenId) public onlyOperator()  {
    require(totalSupply() < MAX_ELEMENTS, "Exceed Max Elements");
    _supply++;
    _safeMint(to, tokenId);
  }

    modifier onlyOperator() {
        require(hasRole(OPERATOR, msg.sender), "Must be operator");
        _;
    }

また、当然ながらTransferやApproveなどの基本的な機能を持っています。
詳しいコードは次の記事で見ていきたいと思います。

Discussion