text: import React, { useEffect, useState } from "react";
  import "./styles/App.css";
  import twitterLogo from "./assets/twitter-logo.svg";
  import { ethers } from "ethers";
  import myEpicNft from "./utils/MyEpicNFT.json";
  
  // Constants
  const TWITTER_HANDLE = "jtbitt";
  const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
  const OPENSEA_LINK =
    "https://testnets.opensea.io/collection/squarenft-vp2doc6d12";
  const TOTAL_MINT_COUNT = 50;
  
  const CONTRACT_ADDRESS = "0x758dF45E24B6F9Fb7650d877b77D10F7ef098A20";
  
  const App = () => {
    const [currentAccount, setCurrentAccount] = useState("");
    const [mintCount, setMintCount] = useState();
    const [mintInProgress, setMintInProgress] = useState(false);
  
    const checkIfWalletIsOnRinkeby = async () => {
      const { ethereum } = window;
  
      if (!ethereum) {
        console.log("Make sure you have metamask!");
        return;
      }
  
      const chainId = await ethereum.request({ method: "eth_chainId" });
      console.log("Connected to chain " + chainId);
  
      const rinkebyChainId = "0x4";
      if (chainId !== rinkebyChainId) {
        alert("You are not connected to the Rinkeby Test Network!");
        return false;
      }
      return true;
    };
  
    const checkIfWalletIsConnected = async () => {
      console.log("hi", currentAccount);
      if (currentAccount.length) {
        console.log(currentAccount);
        return;
      }
  
      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) {
        // make sure wallet is on rinkeby network before going forward
        const onRinkeby = await checkIfWalletIsOnRinkeby();
  
        if (onRinkeby) {
          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]);
  
        // make sure wallet is on rinkeby network before going forward
        const onRinkeby = await checkIfWalletIsOnRinkeby();
  
        if (onRinkeby) {
          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
          );
  
          // 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 getTotalNftsMintedSoFar = 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 check the current amount of NFTs minted so far..."
          );
          let nftTxn = await connectedContract.getTotalNFTsMintedSoFar();
  
          console.log(`${nftTxn} minted so far!`);
          setMintCount(nftTxn.toNumber());
        } else {
          console.log("Ethereum object doesn't exist!");
        }
      } catch (error) {
        console.log(error);
      }
    };
  
    const askContractToMintNft = async () => {
      setMintInProgress(true);
      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}`
          );
  
          setMintInProgress(false);
          // getTotalNftsMintedSoFar();
        } else {
          console.log("Ethereum object doesn't exist!");
        }
      } catch (error) {
        setMintInProgress(false);
        console.log(error);
      }
    };
  
    useEffect(() => {
      getTotalNftsMintedSoFar();
      checkIfWalletIsConnected();
    });
  
    // Render Methods
    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">My NFT Collection</p>
            <p className="sub-text">
              Each unique. Each beautiful. Discover your NFT today.
            </p>
            <a href={OPENSEA_LINK}>
              <button className="cta-button view-collection-button">
                View the Existing Collection
              </button>
            </a>
            <br />
            {currentAccount === ""
              ? renderNotConnectedContainer()
              : renderMintUI()}
            <p className="sub-text">Minted so far: {mintCount}/50</p>
            {mintInProgress ? (
              <p className="sub-text">Mint in progress...</p>
            ) : (
              <p></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"
            >{`@${TWITTER_HANDLE}`}</a>
          </div>
        </div>
      </div>
    );
  };
  
  export default App;
  