text: import './styles/App.css';
  import twitterLogo from './assets/twitter-logo.svg';
  import React, { useEffect, useState } from "react";
  import { ethers, providers } from 'ethers';
  import myEpicNft from './utils/MyEpicNFT.json';
  
  // Constants
  const CONTRACT_ADDRESS = '0x857E54251c9e7A6cC19fd26CbCdf15C5f5979F4c';
  const TWITTER_HANDLE = 'snedsas';
  const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
  const OPENSEA_LINK = '';
  const TOTAL_MINT_COUNT = 50;
  
  const App = () => {
  
    const [currentAccount, setCurrentAccount] = useState("");
  
    const checkIfWalletIsConnected = async () => {
  
      const { ethereum } = window;
      if (!ethereum) {
        console.log("Make sure you have Metamask installed on your device.");
        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);
        setupEventListener();
      } else {
        console.log("No authorized account found.");
      }
    }
  
    const setupEventListener = 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);
  
          connectedContract.on("NewEpicNFTMinted", (from, tokenId) => {
            console.log(from, tokenId.toNumber())
            alert(`Hey there! We've minted your NFT and sent it to your wallet. Here's the link: https://testnets.opensea.io/assets/${CONTRACT_ADDRESS}/${tokenId.toNumber()}`);
          });
          console.log("Setup event listener!");
        } else {
          console.log("Etheruem object doesn't exist!");
        }
      } catch(error) {
        console.log(error);
      }
    }
   
    const connectWallet = async () => {
      try {
        const { ethereum } = window;
  
        if (!ethereum) {
          alert("Must have Metamask installed on your deivce to connect wallet.");
          return;
        }
  
        const accounts = await ethereum.request({ method: "eth_requestAccounts" });
  
        console.log("Connected", accounts[0]);
        setCurrentAccount(accounts[0]);
      } 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();
  
          console.log("Mining...please wait.")
          await nftTxn.wait();
  
          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);
      }
    }
  
    // Render Methods
    const renderNotConnectedContainer = () => (
      <button onClick={connectWallet} className="cta-button connect-wallet-button">
        Connect to Wallet
      </button>
    );
  
    useEffect(() => {
      checkIfWalletIsConnected();
    }, [])
  
    return (
      <div className="App">
        <div className="container">
          <div className="header-container">
            <p className="header gradient-text">Sam's First NFT Collection.</p>
            <p className="sub-text">
              Thanks to @_buildspace.
            </p>
            {currentAccount === "" ? renderNotConnectedContainer() : (
              <button onClick={askContractToMintNFT} className="cta-button connect-wallet-button">
                Mint NFT
              </button>
            ) }
          </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"
            >{`from @${TWITTER_HANDLE}`}</a>
          </div>
        </div>
      </div>
    );
  };
  
  export default App;
  