text: import "./styles/App.css";
  import twitterLogo from "./assets/twitter-logo.svg";
  import React, { useEffect, useState } from "react";
  import { ethers } from "ethers";
  import myEpicNft from "./utils/MyEpicNFT.json";
  import loader from "./images/loader.gif";
  
  const TWITTER_HANDLE = "kaylieghface";
  const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
  const OPENSEA_LINK = "https://testnets.opensea.io/collection/halloweennft-v2";
  const TOTAL_MINT_COUNT = 50;
  
  const CONTRACT_ADDRESS = "0xdADC9BbcbB8695307A0c38AD27d5e52B6f91F1b9";
  
  const App = () => {
    // state variables
    const [currentAccount, setCurrentAccount] = useState("");
    const [currentMintCount, setCurrentMintCount] = useState("?");
    const [mintMessage, setMintMessage] = useState("");
    const [loading, setLoading] = useState(false);
  
    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);
  
        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!");
        }
  
        setCurrentAccount(account);
  
        setupEventListener();
      } else {
        console.log("No authorized account found");
      }
    };
  
    /*
     * Implement your connectWallet method here
     */
    const connectWallet = async () => {
      try {
        const { ethereum } = window;
  
        if (!ethereum) {
          alert("Get MetaMask!");
          return;
        }
  
        /*
         * Fancy method to request access to account.
         */
        const accounts = await ethereum.request({
          method: "eth_requestAccounts",
        });
  
        // set current account
        console.log("Connected", accounts[0]);
        setCurrentAccount(accounts[0]);
  
        // set current NFT mint count if not already initiated
        checkMintedCount();
  
        // listen for emit event from contract
        setupEventListener();
      } catch (error) {
        console.log(error);
      }
    };
  
    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
          );
  
          // THIS IS THE MAGIC SAUCE.
          // This will essentially "capture" our event when our contract throws it.
          connectedContract.on("NewEpicNFTMinted", (from, tokenId) => {
            console.log(from, tokenId.toNumber());
            const message = `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()}`;
            setMintMessage(message);
            checkMintedCount();
          });
        } else {
          console.log("Ethereum object doesn't exist!");
        }
      } catch (error) {
        console.log(error);
      }
    };
  
    const checkMintedCount = 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 count = await connectedContract.getTotalMinted();
          setCurrentMintCount(count.toNumber());
        } 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
          );
          let message = "";
          setMintMessage(message);
          console.log("Going to pop wallet now to pay gas...");
          let nftTxn = await connectedContract.makeAnEpicNFT();
          setLoading(true);
          console.log("Mining...please wait.");
  
          await nftTxn.wait();
          setLoading(false);
  
          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();
      checkMintedCount();
    }, []);
  
    const renderNotConnectedContainer = () => (
      <button
        onClick={connectWallet}
        className="cta-button connect-wallet-button"
      >
        Connect to Wallet
      </button>
    );
  
    const renderMintUI = () => (
      <button
        onClick={askContractToMintNft}
        className="cta-button connect-wallet-button"
      >
        Mint NFT
      </button>
    );
  
    return (
      <div className="App">
        <div className="container">
          <div className="header-container">
            <p className="header gradient-text">Halloween Collection</p>
            <p className="sub-text">
              Each unique. Each spooky. Discover your NFT today.
            </p>
            <p className="sub-text">
              {currentMintCount} of {TOTAL_MINT_COUNT} minted so far
            </p>
            <a href={OPENSEA_LINK}>
              <button className="cta-button opensea-button">
                🌊 View Collection on OpenSea
              </button>
            </a>
            <br />
            {currentAccount === ""
              ? renderNotConnectedContainer()
              : renderMintUI()}
  
            {loading && (
              <div className="loading">
                <img id="loader" src={loader} alt="loading..." />
                <span>
                  <em>Your NFT is being minted, please wait...</em>
                </span>
              </div>
            )}
  
            <p>{mintMessage}</p>
          </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 by @${TWITTER_HANDLE}`}</a>
          </div>
        </div>
      </div>
    );
  };
  
  export default App;
  