【完全保存版】thirdwebを使って、zkSync Era用のフロントエンドを作ろう（他のチェーンもやり方は同じです。）

０　はじめに

今回は、thirdwebで「zkSync Era Testnet」などのさまざまなチェーン用のフロントエンドを作成する方法を書いていきます。

なお、今回の内容は、こちらのGithubにあります。

そのため、下のように、「git clone」 を行い、

git clone https://github.com/ytakahashi2020/thirdweb_era_gallery.git

「yarn」を行い

cd thirdweb_era_gallery
yarn

「yarn dev」を実行することで、立ち上がります。

yarn dev

このようになりました。

では、具体的な部分を見てみましょう。

１　zkSync Era Testnetのコントラクトを作成する

まずは、このように、「zkSync Era Testnet」のコントラクトを作成しました。

https://thirdweb.com/zksync-era-testnet/0x0929624DFbFdA73cdC67dfEEA269003d380A4D1e/nfts

具体的な処理についてご不明の場合は、こちらの記事をご確認ください。

２　チェーンの設定を行う

次に、thirdwebのコントラクトの「Build」を確認します。

すると、具体的にどのように接続するかの記載がされています。

https://thirdweb.com/zksync-era-testnet/0x0929624DFbFdA73cdC67dfEEA269003d380A4D1e/code

それに沿って、「_app.tsx」のチェーンの設定の箇所を、下のように変更します。

これで以上です。

とても簡単でした。

その他のthirdwebの連携部分を確認したい場合には、こちらの記事をご確認ください。

３　Context APIについて

以下、このコードのWeb3以外の部分です。

私自身、Reactにまだまだ不慣れのため、自分の勉強も込めて、こちらに書いていきますが、ご存じの方は、以降は不要だと思います。

コンポーネントツリー全体を通じて、データを共有する、Context APIについて書いていきます。

１　Contextの作成

今回、共通した値を使いたいので、Contextを作成します。

検索に使用したコントラクトアドレスを保持するために使います。

デフォルト設定として、searchContractに空文字を、「setSearchContract」に空の実装を入れています。

２　プロバイダーの作成

下の部分で、「ContractsProvider」という関数コンポーネントを定義しています。

その中身に入る前に、ContractsProviderが受け取るプロパティ（props）の型を定義します。

なお、「children」はコンポーネントが別のコンポーネントをラップするときに内側のコンポーネントを参照します。

ここは、後ほど見てみましょう。

「ReactNode」型についても見てみましょう。

こちらはReactが描画できる全てのものを表す型で、今回のように、childrenを使うケースでよく使われます。

では、コンポーネント部分を見てみましょう。

「React.FC」の部分で、関数コンポーネント（Function Component）であることを示しています。

そして、受け取るプロパティが「ContractsProviderProps」の型を取ることを表しています。

では、 renderメソッドを見てみましょう。

「ContractsContext.Provider」の「Provider」の部分で、子コンポーネントに値を渡すための特殊な役割を与えています。

そして、valueの部分で子コンポーネントで使うプロパティを設定します。

これにより、子コンポーネントでは、「searchContract」「setSearchContract」を使用することができます。

下のように、childrenもプロバイダーに挟んでいます。

３　プロバイダーの適用について

次に、このプロバイダーを適用している部分を見てみましょう。

まず、AppPropsはNext.jsが提供する型で、「Component」と「pageProps」を持ちます。

Componentは現在のページのコンポーネントを表しています。

また、pagePropsは、そのページのコンポーネントに渡すプロパティを表しています。

また、スプレッド構文（…の部分）を使って、全てのプロパティを渡しています。

そして、このComponentを「ContractsProvider」の子コンポーネントとして使用しています。

４　Contextの使用について

これで準備ができたので、あとは使ってみましょう。

Contextのプロパティを使うためには、「useContext」を使用します。

使いたいプロパティを、このように指定します。

あとは、使用したいと宣言したものを使うだけです。

これで以上です。

よかったらやってみてください。

最後までありがとうございました！