thirdwebを使い、有効期限付きのNFTを発行し、それをアプリに適用させてみよう
こんにちは、CryptoGamesの高橋です。
本日は、こちらの記事を参考にして、有効期限付きのNFTを発行し、実際にそれをアプリで使っていきます。
1 Unlock Protocolのコントラクトを作成する
では、有効期限付きの「Unlock Protocol」のコントラクトを作ってみましょう。
まずは、thirdwebのページに行きます。
「The Lock contract」を選択します。
「Deploy Now」を選択
内容を入れていきます。
今回は「Membership Duration」に有効期限の秒数を入れ、「Name of your contract」にコントラクトの名前を入れています。
他の値段などの部分は今回はデフォルトのまま進んでいきます。
チェーンを確認した上で、「Deploy Now」
ウォレットで「確認」などで進めていくと、下のようにコントラクトができました。
こちらのコントラクトアドレスを後で使っていきます。
2 コードを準備する
では、テストアプリを作成するために、コードを準備しましょう。
こちらのGithubを使います。
下のように、git cloneしましょう。
yarn installで依存関係を入れていきます。
「index.tsx」の「contractAddress」に先ほど作ったコントラクトアドレスを入れます。
これで準備は完了です。
3 コードを見てみよう
では、今回の大事な部分を見てみましょう。
下のように、「useContractRead」という関数が使われています。
これはコントラクトの読み取り用の関数を使うことができる、非常に汎用性の高い関数です。
公式はこちらです。
このように、コントラクトに加え、関数名とその関数が必要としている引数を渡すことで実施することができます。
https://portal.thirdweb.com/react/react.usecontractread#usecontractread-function
今回は、有効なキーを持っているかどうかを確認する、「getHasValidKey」という関数を渡していました。
これは、下のように、実際にコントラクトの読み取り用の関数として存在しています。
では、下の、useContractWrite関数も見てみましょう。
これは先ほどのWrite版です。
公式のページがこのようになっており、書き込むための呼び出しを行うことができます。
https://portal.thirdweb.com/react/react.usecontractwrite
こちらも実際にコントラクトに「purchase」という書き込み用の関数が存在しています。
4 挙動を確認してみよう
では、実際の挙動を確認してみましょう。
yarn devで立ち上げてみます。
下のように、立ち上がりました。
「Subscribe」を選択して、NFTを購入してみましょう。（今回は無料で作成しましたが）
取得ができると、有効期限内のNFTを所有していることになるので、有効なNFTを持っている人だけが見られる文言が現れます。
今回、有効期限を15秒としたので、15秒後にブラウザを再度読み込むと、このように無事に表示が消えました。
有効期限が過ぎたのですね。
5 OpenSea(テストネット)
下のOpenSeaのテストネットでも、実際に取得ができたか見てみましょう。
下のように、取得ができていました。
なお、有効期限が過ぎても、NFTがなくなるわけではなく、有効期限の過ぎたNFTを所持しているという状態になります。
今回は以上です。
ぜひやってみてください。
Discussion