![見出し画像](https://assets.st-note.com/production/uploads/images/91862261/rectangle_large_type_2_f3a5d872803a635dfbad2706be4253a1.png?width=1200)
コミュニティ内でNFTトークンを機能させるためにやった3つのこと
こんにちは、オープンコラボレーションハブ、LODGEです。
LODGEでは、LODGE内のfabスペースに日々持ち込まれる実験プロジェクトでのノウハウを「レシピ」として公開し、オープンソースで発信していく有志の取り組み『LODGE Toaster』を公開しています。
この取り組みは、Discord経由でどなたでも参加することができ、Discordでの参加の仕組みとしてNFTトークンを採用しています。
今回は、NFTトークンをベースとした仕組みを構築するにあたりLODGE内で議論したこと、実行したことをまとめようと思います。
こういうものを作りました
LODGE Toasterのサイト上でウォレットを接続し、トークンを発行できる仕組みを実装しました。
![](https://assets.st-note.com/img/1669266822349-BbYWztHJq5.png?width=1200)
OpenSeaなどのMarketplaceを利用する方法もありましたが、将来的に展開を考えると、サイトを軸にNFTトークンの発行ができた方が良いということで、サイト上でNFTを発行できるようにしました。
やったこと
トークンのビジュアル
サイト上でウォレットを接続し、トークンを発行できる仕組みを作る
トークン保有者のみ閲覧できるDiscordチャンネルの設定
トークンのビジュアル
チームのデザイナーである市川がBlenderでササッと作ってくれました。
トーストがテーマなので、
ある程度のリアリティはありつつも、マーケットプレイスに乗ったときにも浮かない適度なデフォルメ感
というコンセプトで制作しています。
![](https://assets.st-note.com/img/1669240519385-lYGZq0PIx0.png?width=1200)
サイト上でウォレットを接続し、トークンを発行できる仕組み
これが一番時間がかかりました。
というのも、作る中でいくつも論点や、技術選定が発生したためです。
ここでは、作業をする中で考えたこと、考慮しなければいけなかったところを中心にお話ししていきます。
まず大前提として、ThirdwebというNFT発行SDKを提供しているツールを利用してToasterサイトに以下機能を埋め込んでいきました。
Thirdwebのコアな機能の一つに、スマートコントラクトのテンプレートを選び、トークンの運用ができる、というものがあります。トークンを発行するところまでは、画面ぽちぽちで進めるのですが、その前に、チームの中でいくつか取り決めをする必要がありました。
![](https://assets.st-note.com/img/1669241369560-J6w6D7jxd8.png?width=1200)
論点① どのトークン規格を採用するか
トークンには、ERC20, ERC721, ERC1155など様々な規格がありますが、
どのテンプレートを使ってトークンを発行するかは、プロジェクトによって異なります。
どのような情報を付加するのか、2次流通までサポートするのかといった条件で、最適なテンプレートが決まってきます。
どこでトークンを手に入れたかのパラメータを付与したい
後々の展開を考えて、OpenSeaでも取引できるようにしたい
同じトークンを複数個保有できるようにしたい
といった要件を考慮して、今回はERC1155を採用することにしました。
論点② どのネットワークを使用するか
Ethereum Main, MATIC, テストネットなど、ネットワークの種類も様々です。これもトークンの発行前に決定しておく必要があります。
今回はコミュニティの運営を目的としたトークンのため、投機要素が薄いこと、とはいえトークンの価値が全くの0でもコミュニティに悪影響が出ると考え、本番ネットワークの中でも安価なMATIC(Polygon)ネットワークを採用することにしました。
トークンの発行に演出を加える
トークン発行のUIを少し遊び心を加えて、画面上のトースターのレバーを引くことでトークンが発行される演出を加えています。
![](https://assets.st-note.com/production/uploads/images/91863175/picture_pc_acd06be0e3c25c3f2b38d38ebfcad889.gif?width=1200)
トークン発行のUIはthree.js(React/Next.jsで制作しているのでReact Three Fiber)で少しリッチに見せたりしています。WEB3系のプロダクトではデジタルアセットに重みや説得力を持たせるための様々な演出を目にします。その中でも、3Dを使うというのは一つの有効な手段であると感じます。
近年、React Three Fiberなどのライブラリのおかげで、モダンなweb環境でも、3D表現が非常に身近になってきました。three.jsを勉強する上ではthree.js journey というTutrialが非常に勉強になりました。
GAS Less Transactionを実現する
トークン発行の際には、トランザクション処理の手数料としてGAS代が必ず発生します。
ユーザーにGAS代を課す場合、初心者にとっては、 あらかじめウォレットにGAS代用の通貨(MATIC)を用意しておくのは、なかなかハードルが高いです。
そのため、Toasterコミュニティでは、サービス運営者がGAS代を肩代わりできる仕組みを設けています。(GAS Less Transaction)
これはThirdwebのSDKに元々機能が用意されており、GAS代を肩代わりするwalletのアドレスを設定しておけば、新規ユーザーが来るたびに、そこからGAS代が引き落とされるようになっています。
<ThirdwebProvider
sdkOptions={{
gasless: {
openzeppelin: {
relayerUrl: process.env.NEXT_PUBLIC_OPENZEPPELIN_URL,
},
},
}}
desiredChainId={desiredChainId}
>
マルチシグウォレットの設定
複数人でDAOを運営していく場合、資金の入ったウォレットをある個人が管理しているのは望ましい状態ではありません。その場合は、gnosis safeのようなマルチシグウォレットと呼ばれるウォレットを使うことで、DAOの資産を共同管理することができます。
最初は2人で運用するため、2人の承諾が得られないと、資金を移動できないような設定にしました。
トークン保有者のみ閲覧できるDiscordチャンネルの発行
これは比較的すぐできました。
Collab.Landというサービス上で、先ほどThirdwebで作成したスマートコントラクトとトークンを登録します。
これにより、自分が発行したトークンとDiscordのチャンネルの入退出権限を結びつけることができます。
![](https://assets.st-note.com/img/1669254707167-KKySiRIHgf.png?width=1200)
参加者目線で見ると、参加者はDiscordに入室後、Botからウォレットに接続するよう求められます。ここで手持ちのトークンを認証できると、参加できる部屋が増えるようになります。
![](https://assets.st-note.com/img/1669257237381-JhWtrcDztP.png?width=1200)
さいごに
ここまで、トークンをサイト上で発行して、コミュニティ内で機能を持たせる方法をご紹介しました。
Toasterコミュニティの中では、トークンは価値を保有するものというよりは、コミュニティを盛り上げる演出装置の一つというスタンスで取り扱っています。
LODGEでは今後も、WEB3技術を用いてより良いコミュニティを作る方法を色々と検証していきたいと思います。