Web3 Unleashed

Web3 Unleashedのストリームで使用する基本的なNext.jsアプリケーションです。

ブランチは残りの実装のためにステージで作成されます。

設定

レポジトリインストール

git clone git@github.com:yoshis2/Nextjs-Starter.git
npm install

今後はこのコマンドで起動

npm run dev

指示

基本的なレイアウトとコンテキストプロバイダーを持つNext.jsアプリケーションが提供されます。あなたの目標は、Metamask APIを使用して、ユーザーが操作できるアプリケーションを作成する方法を学ぶことです。

初期設定と制約について、いくつか注意点があります：

• 追加の依存関係は必要ありません。
• コンテキストプロバイダはすでにセットアップされているので、componentsおよびpages配下のreactコードは、フックを使用してコンテキストにアクセスできます。
• コンテキストはreducerを使って状態を管理するので、アクションをディスパッチして状態を更新することができます。必要に応じて、自由にリデューサーを編集して追加してください。
• Next.jsは複数の環境で動作しますが、Metamaskはブラウザでしか使えないことを覚えておいてください。

楽しんでください！

1 基本：ユーザーとの接続

Next.jsアプリケーションとMetamaskの使い方に慣れていきましょう。

• ユーザーがMetamaskをインストールしているかどうかを確認します。インストールされていない場合は、Metamaskのサイトにリンクします。(ヒント: window.ethereum オブジェクトを使用します)
• ユーザがMetamaskをインストールしている場合、ユーザにウォレットを接続することを提案し、この情報をコンテキストに保存する。(ヒント: window.ethereum.request メソッドを使用する)

2. 初心者: Metamask APIを使ってユーザーの情報を取得する

• ユーザが接続できるようになったら、ウォレットのアドレスと残高を表示する。

3. 中級者： Metamask との双方向通信

• ウォレットアドレスと残高の変更をリッスンし、それに応じてUIを更新する。
• 新しいトークンをウォレットに追加するオプションを追加する。

4. ボーナス/上級： UXグッズ

• ウォレットのアドレスと残高をローカルストレージに保持する。
• ウォレットを切断するボタンを追加する。

5. クリーンアップ：

• 切断されたらイベントリスナーを削除する