まいにちDappsではこれまで、発行したNFTに対してトークンゲートでユーティリティをつけて付加価値を付ける実装について解説をしてきました。
NFTのビジネスモデルの中で継続的なインカムを得るためには二次流通時のロイヤリティや新規販売くらいしかないという認識が一般的ですが、今回はオンチェーンのプロダクトで継続課金をする方法を見てみましょう。
Thirdweb×Unlockで有効期限付きNFTを作成する
Unlock ProtocolにSubscription機能を持ったMembershipのコントラクトがあります。こちらの使用方法については Thirdwebとユウキさんの素晴らしい記事があるのでこちらにお任せします。
要点としては有効期限と延長する関数を持ったNFTをmintでき、有効期限が切れた場合、有効期限切れのNFTを所持しているという状態になります。NFTがburnされたりTransferされるわけではないですが、balanceOf()を実行すると、有効期限切れのNFTをつ保有している場合 0 が返ってきます。Token-gated Application Architecture
また、有効期限を延長するにはユーザーがトランザクションを発生させる必要があり、自動延長みたいなことはできないです。
ちなみにNFTベースのサブスクリプションについて考察されている記事があったので貼っておきます。
Are Subscription NFTs the Future? Exploring the Pros and Cons of Web3 Online Subscriptions
SuperfluidでERC20トークンでのサブスクを実装する
Superfluidは世界中のDAOや暗号ネイティブビジネスに対してサブスクリプションを可能とするスマートコントラクトのフレームワークです。Superfluidでは既存のトークンをSuper TokenというERC20標準の拡張トークンにwrapします。Super Tokenは定期支払い機能を持っていて、1回のトランザクションだけで定期支払いを開始することができ、デポジットも必要ありません。
まずはどんなものかテストネットで触ってみます。
https://app.superfluid.finance/ を開きます。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2Fd98277812c3113e5e7bf8f878cee468c7bd2061f-2486x1476.png%3Fw%3D2000%26auto%3Dformat&w=3840&q=75)
Get Testnet TokensでClaimボタンを押しましょう。Matic、fUSDC、fDAIがfaucetからもらえますが、通常のfaucetと違うのはこの時点ですでにsuperfluidでのstreamが始まっている点です。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F38dd2b22746d9f42c5b2f23b21bfa0de44f83aa8-1350x1034.png%3Fw%3D1350%26auto%3Dformat&w=3840&q=75)
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F2981782e15c211eda4b3c54e5512f8910911222c-2940x1912.gif%3Fw%3D2000%26auto%3Dformat&w=3840&q=75)
fUSDC、fDAIが毎秒少しずつ送られてきているのがわかりますね。
Streamingをキャンセルすると、その時点までのトークンがもらえます。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F31b24eb818932aa2df9a5a2996f7a10a1bb1527a-1618x990.png%3Fw%3D1618%26auto%3Dformat&w=3840&q=75)
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F5e07d8903ec9c058a39c7977d59e40bd2a2ab32a-1532x914.png%3Fw%3D1532%26auto%3Dformat&w=3840&q=75)
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F02d43500ccca1f2e46235cbebcf2985f4528e17c-1416x664.png%3Fw%3D1416%26auto%3Dformat&w=3840&q=75)
自分でStreamを作成して送信してみます。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2Fe4f8c087d81555e9b5a95de899e284ed3c2f1ebf-2190x1550.png%3Fw%3D2000%26auto%3Dformat&w=3840&q=75)
トークンが送られて残高が減っていくことが分かります。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2Fe2a3b6ad26e3528afe6b70472f72e9f12f904472-2940x1912.gif%3Frect%3D10%2C201%2C2930%2C1711%26w%3D2000%26auto%3Dformat&w=3840&q=75)
次に自分のアプリにウィジェットを組み込む方法をみてみます。
Checkout Builderというツールが用意されているので開きます。
https://checkout-builder.superfluid.finance/builder
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F379c68d174b68c9b5102a37ade9357130ed709ca-2908x1586.png%3Fw%3D2000%26auto%3Dformat&w=3840&q=75)
UIも調整できるので便利ですね。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F6c44d0f2b454bb65a052f6b83e4be56df7a50c27-2900x1564.png%3Fw%3D2000%26auto%3Dformat&w=3840&q=75)
JSONをダウンロードしておきます。
Next.jsのプロジェクトを立ち上げて必要なモジュールをインストールします。
yarn add @superfluid-finance/widget wagmi @superfluid-finance/tokenlist
こちらのコードを移植していきます。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2F33d749f2e67e1b110a26f6af6cdef80fedd7cec1-2412x1588.png%3Fw%3D2000%26auto%3Dformat&w=3840&q=75)
drawerはできたのですがConnect Walletボタンを押してもWallet Connectが立ち上がらないというバグが発生してしまいました。
publish IPFSのほうでは上手くいったのでこちらを掲載しておきます。
![Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffrqcsxz2%2Fproduction%2Fa152789db334b3b7e723eeb33cddff77a6304082-942x396.png%3Fw%3D942%26auto%3Dformat&w=3840&q=75)
https://checkout.superfluid.finance/QmebDU9Kx61wNtamDpEhb8EtESfNAejNFzSdG9uZmmXRL4
まとめ
弊社Pontechはweb3に関わる開発を得意とするテック企業です。サービス開発に関するご相談はこちらのフォームからお願いいたします。
また、受託開発案件に共に取り組むメンバーを募集しています!ご興味のある方はぜひお話させてください!