text: import React, { useEffect, useState } from 'react';
  import './SelectCharacter.css';
  import { ethers } from 'ethers';
  import { CONTRACT_ADDRESS, transformCharacterData } from '../../constants';
  import myEpicGame from '../../utils/MyEpicGame.json';
  import LoadingIndicator from '../../Components/LoadingIndicator';
  
  const SelectCharacter = ({ setCharacterNFT }) => {
    const [characters, setCharacters] = useState([]);
    const [gameContract, setGameContract] = useState(null);
    const [mintingCharacter, setMintingCharacter] = useState(false);
  
    const mintCharacterNFTAction = (characterId) => async () => {
      try {
        if (gameContract) {
          setMintingCharacter(true);
          console.log('Minting character in progress...');
          const mintTxn = await gameContract.mintCharacterNFT(characterId);
          await mintTxn.wait();
          console.log('mintTxn:', mintTxn);
        }
      } catch (error) {
        console.warn('MintCharacterAction Error:', error);
      } finally {
        setMintingCharacter(false);
      }
    };
  
    // ページがロードされた瞬間に下記を実行します。
    useEffect(() => {
      const { ethereum } = window;
      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const gameContract = new ethers.Contract(CONTRACT_ADDRESS, myEpicGame.abi, signer);
  
        setGameContract(gameContract);
      } else {
        console.log('Ethereum object not found');
      }
    }, []);
  
    useEffect(() => {
      // NFT キャラクターのデータをスマートコントラクトから取得します。
      const getCharacters = async () => {
        try {
          console.log('Getting contract characters to mint');
          // ミント可能な全 NFT キャラクター をコントラクトをから呼び出します。
          const charactersTxn = await gameContract.getAllDefaultCharacters();
          console.log('charactersTxn:', charactersTxn);
    
          const characters = charactersTxn.map(transformCharacterData);
          setCharacters(characters);  
        } catch (error) {
          console.error('Something went wrong fetching characters:', error);
        }
      };
  
      const onCharacterMint = async (sender, tokenId, characterIndex) => {
        console.log(`CharacterNFTMinted - sender: ${sender} tokenId: ${tokenId.toNumber()} characterIndex: ${characterIndex.toNumber()}`);
        if (gameContract) {
          const characterNFT = await gameContract.checkIfUserHasNFT();
          console.log('CharacterNFT: ', characterNFT);
          setCharacterNFT(transformCharacterData(characterNFT));
          alert(`NFT キャラクーが Mint されました -- リンクはこちらです: https://rinkeby.rarible.com/token/${gameContract}:${tokenId.toNumber()}?tab=details`)
        }
      };
  
      if (gameContract) {
        getCharacters();
        gameContract.on('CharacterNFTMinted', onCharacterMint);
      }
  
      return () => {
        if (gameContract) gameContract.off('CharacterNFTMinted', onCharacterMint);
      };
    }, [gameContract]);
  
    const renderCharacters = () =>
      characters.map((character, index) => (
        <div className="character-item" key={character.name}>
          <div className="name-container">
            <p>{character.name}(index: {index})</p>
          </div>
          <img src={`https://cloudflare-ipfs.com/ipfs/${character.imageURI}`} alt={character.name} />
          <button
            type="button"
            className="character-mint-button"
            onClick={mintCharacterNFTAction(index)}
          >{`Mint ${character.name}`}</button>
        </div>
      )
    );
  
    return (
      <div className="select-character-container">
        <h2>⏬ 一緒に戦う NFT キャラクターを選択 ⏬</h2>
        {characters.length > 0 && <div className="character-grid">{renderCharacters()}</div>}
        {mintingCharacter && (
          <div className="loading">
            <div className="indicator">
              <LoadingIndicator />
              <p>Minting In Progress...</p>
            </div>
            <img src="https://i.imgur.com/JjXJ4Hf.gif" alt="Minting loading indicator" />
          </div>
        )}
      </div>
    );
  };
  export default SelectCharacter;