lesson-2_WEBアプリの初期状態をセットアップしよう
🐰 Web アプリケーション から NFT キャラクターを Mint する
前回のレッスンでは、Webアプリケーションからユーザーのウォレットアドレスにアクセスする機能を実装しました。
これから、Webアプリケーションから、コントラクトを呼び出しNFTキャラクターをMintする機能を実装していきます。
下記に、Webアプリケーションのレンダリングロジックを記します。
シナリオ 1. ユーザーが Web アプリケーションにログインしていない場合
👉 WEBアプリ上に、"Connect Wallet to Get Started" ボタンを表示します。
シナリオ 2. ユーザーは Web アプリケーションにログインしており、かつ NFT キャラクターを持っていない場合
👉 WEBアプリ上に、SelectCharacter
コンポーネントを表示します。
シナリオ 3. ユーザーは Web アプリケーションにログインしており、かつ NFT キャラクターを持っている場合
👉 WEBアプリ上に、「Arena Component」を表示します。
- 「Arena Component」は、プレイヤーがボスと戦う場所です。
それでは、上記のシナリオを実装するロジックを構築していきましょう。
🧱 SelectCharacter
コンポーネントを作る
ターミナルに向かい、client/src/Components/SelectCharacter
フォルダに移動してください。
client
ディレクトリ上で下記を実行すると、スムーズに移動できます。
cd src/Components/SelectCharacter
SelectCharacter
の中に、SelectCharacter
コンポーネントのロジックと、スタイルを保存していきます。
それでは、SelectCharacter
フォルダの中にindex.js
というファイルを新しく作成しましょう。
ターミナル上で、SelectCharacter
フォルダにいる状態で、下記を実行すると、index.js
が簡単に作成できます。
touch index.js
VS Codeでindex.js
を開いて、下記のコードをは貼り付けましょう。
import React, { useEffect, useState } from "react";
import "./SelectCharacter.css";
// setCharacterNFTについては、あとで詳しく説明します。
const SelectCharacter = ({ setCharacterNFT }) => {
return (
<div className="select-character-container">
<h2>⏬ 一緒に戦う NFT キャラクターを選択 ⏬</h2>
</div>
);
};
export default SelectCharacter;
index.js
が更新できたら、App.js
を編集して、条件つきレンダリングを実装していきます。
👁 レンダリングロジックを構築してシナリオを実装する
まず、client/src/App.js
ファイルをVS Codeで開き、新しく作成したコンポーネントをインポートしていきましょう。
import './App.css';
の直下に下記を追加してください。
// SelectCharacter に入っているファイルをインポートします。
import SelectCharacter from "./Components/SelectCharacter";