text: import './styles/App.css';
  import twitterLogo from './assets/twitter-logo.svg';
  import { ethers } from "ethers";
  import React, { useEffect, useState } from "react";
  import myEpicNft from './utils/MyEpicNFT.json';
  
  const TWITTER_HANDLE = '_buildspace';
  const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
  const OPENSEA_LINK = '';
  const TOTAL_MINT_COUNT = 50;
  
  // I moved the contract address to the top for easy access.
  const CONTRACT_ADDRESS = "0x64C7d635C21a2a2709FbE234562E40bF7bE4759b";
  
  const App = () => {
  
      const [currentAccount, setCurrentAccount] = useState("");
      const [name, setName] = useState("");
      
      const checkIfWalletIsConnected = async () => {
        const { ethereum } = window;
  
        if (!ethereum) {
            console.log("Make sure you have metamask!");
            return;
        } else {
            console.log("We have the ethereum object", ethereum);
        }
  
        const accounts = await ethereum.request({ method: 'eth_accounts' });
  
        if (accounts.length !== 0) {
            const account = accounts[0];
            console.log("Found an authorized account:", account);
  					setCurrentAccount(account)
            
            // Setup listener! This is for the case where a user comes to our site
            // and ALREADY had their wallet connected + authorized.
            setupEventListener()
        } else {
            console.log("No authorized account found")
        }
    }
  
    const connectWallet = async () => {
      try {
        const { ethereum } = window;
  
        if (!ethereum) {
          alert("Get MetaMask!");
          return;
        }
  
        const accounts = await ethereum.request({ method: "eth_requestAccounts" });
  
        console.log("Connected", accounts[0]);
        setCurrentAccount(accounts[0]);
  
        // Setup listener! This is for the case where a user comes to our site
        // and connected their wallet for the first time.
        setupEventListener() 
      } catch (error) {
        console.log(error)
      }
  
  
      
    }
  
    // Setup our listener.
    const setupEventListener = async () => {
      // Most of this looks the same as our function askContractToMintNft
      try {
        const { ethereum } = window;
  
        if (ethereum) {
          // Same stuff again
          const provider = new ethers.providers.Web3Provider(ethereum);
          const signer = provider.getSigner();
          const connectedContract = new ethers.Contract(CONTRACT_ADDRESS, myEpicNft.abi, signer);
          let chainId = await ethereum.request({ method: 'eth_chainId' });
          console.log("Connected to chain " + chainId);
          
          // String, hex code of the chainId of the Rinkebey test network
          const rinkebyChainId = "0x4"; 
          if (chainId !== rinkebyChainId) {
            alert("You are not connected to the Rinkeby Test Network!");
          }
  
          // THIS IS THE MAGIC SAUCE.
          // This will essentially "capture" our event when our contract throws it.
          // If you're familiar with webhooks, it's very similar to that!
          connectedContract.on("NewEpicNFTMinted", (from, tokenId) => {
            console.log(from, tokenId.toNumber())
            alert(`Hey there! We've minted your NFT and sent it to your wallet. It may be blank right now. It can take a max of 10 min to show up on OpenSea. Here's the link: https://testnets.opensea.io/assets/${CONTRACT_ADDRESS}/${tokenId.toNumber()}`)
          });
  
          console.log("Setup event listener!")
  
        } else {
          console.log("Ethereum object doesn't exist!");
        }
      } catch (error) {
        console.log(error)
      }
    }
  
    const askContractToMintNft = async () => {
      try {
        const { ethereum } = window;
  
        if (ethereum) {
          const provider = new ethers.providers.Web3Provider(ethereum);
          const signer = provider.getSigner();
          const connectedContract = new ethers.Contract(CONTRACT_ADDRESS, myEpicNft.abi, signer);
  
          console.log("Going to pop wallet now to pay gas...")
          let nftTxn = await connectedContract.makeAnEpicNFT(name);
  
          console.log("Mining...please wait.")
          await nftTxn.wait();
          console.log(nftTxn);
          console.log(`Mined, see transaction: https://rinkeby.etherscan.io/tx/${nftTxn.hash}`);
  
        } else {
          console.log("Ethereum object doesn't exist!");
        }
      } catch (error) {
        console.log(error)
      }
    }
  
  
    useEffect(() => {
      checkIfWalletIsConnected();
    }, [])
  
    const renderNotConnectedContainer = () => (
      <button onClick={connectWallet} className="cta-button connect-wallet-button">
        Connect to Wallet
      </button>
    );
  
    const renderMintUI = () => (
  
  <div>
    <label style={{color: "white"}}>Enter Name here:</label>
    <br></br>
  <input value={name} onChange={
  e => setName(e.target.value)
  
  }/>
  <br></br>
  <button onClick={askContractToMintNft} className="cta-button connect-wallet-button">
        Mint NFT
      </button>
  </div>
  
  
    )
  
    return (
      <div className="App">
        <div className="container">
          <div className="header-container">
            <p className="header gradient-text">My NFT Collection</p>
            <p className="sub-text">
              Each unique. Each beautiful. Discover your NFT today.
            </p>
            {currentAccount === "" ? renderNotConnectedContainer() : renderMintUI()}
          </div>
          <div className="footer-container">
            <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
            <a
              className="footer-text"
              href={TWITTER_LINK}
              target="_blank"
              rel="noreferrer"
            >{`built on @${TWITTER_HANDLE}`}</a>
          </div>
        </div>
      </div>
    );
  };
  
  export default App;