【完全保存版】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」のコントラクトを作成しました。
具体的な処理についてご不明の場合は、こちらの記事をご確認ください。
２ チェーンの設定を行う
次に、thirdwebのコントラクトの「Build」を確認します。
すると、具体的にどのように接続するかの記載がされています。
それに沿って、「_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」を使用します。
使いたいプロパティを、このように指定します。
あとは、使用したいと宣言したものを使うだけです。
これで以上です。
よかったらやってみてください。
最後までありがとうございました！
いいなと思ったら応援しよう！
