text: import React, { useEffect, useState } from "react";
  import { useDispatch, useSelector } from "react-redux";
  import { connect } from "./redux/blockchain/blockchainActions";
  import { fetchData } from "./redux/data/dataActions";
  import * as s from "./styles/globalStyles";
  import styled from "styled-components";
  import i1 from "./assets/images/1.png";
  
  export const StyledButton = styled.button`
    padding: 10px;
    border-radius: 50px;
    border: none;
    background-color: #ffffff;
    padding: 10px;
    font-weight: bold;
    color: #000000;
    width: 300px;
    cursor: pointer;
    box-shadow: 2px 8px 4px -2px rgba(250, 250, 0, 0.5);
    -webkit-box-shadow: 2px 3px 10px -2px rgba(250, 250, 0, 0.5);
    -moz-box-shadow: 2px 8px 4px -2px rgba(250, 250, 0, 0.5);
    :active {
      box-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
    }
    :hover {
      -webkit-box-shadow: 2px 3px 40px -2px rgba(250, 250, 0, 0.9);
    }
  `;
  
  export const ResponsiveWrapper = styled.div`
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: stretched;
    align-items: stretched;
    width: 100%;
    @media (min-width: 767px) {
      flex-direction: column;
    }
  `;
  
  export const StyledImg = styled.img`
    width: 200px;
    height: 200px;
    @media (min-width: 767px) {
      width: 300px;
      height: 300px;
    }
    transition: width 0.5s;
    transition: height 0.5s;
  `;
  
  function App() {
    const dispatch = useDispatch();
    const blockchain = useSelector((state) => state.blockchain);
    const data = useSelector((state) => state.data);
    const [feedback, setFeedback] = useState("What Personality will your Bee have?");
    const [claimingNft, setClaimingNft] = useState(false);
  
    const claimNFTs = (_amount) => {
      if (_amount <= 0) {
        return;
      }
      setFeedback("Preparing your Twee the Bee NFT...");
      setClaimingNft(true);
      blockchain.smartContract.methods
        .mint(blockchain.account, _amount)
        .send({
          gasLimit: "285000",
          to: "0x2e3631E3fb32Cc9f17bBE61881C057fD982FB476",
          from: blockchain.account,
          value: blockchain.web3.utils.toWei((.02 * _amount).toString(), "ether"),
        })
        .once("error", (err) => {
          console.log(err);
          setFeedback("It seems the transaction was cancelled.");
          setClaimingNft(false);
        })
        .then((receipt) => {
          setFeedback(
            "Woohoo! You just helped save the Bees! Visit Opensea.io to view your randomly generated NFT!"
          );
          setClaimingNft(false);
          dispatch(fetchData(blockchain.account));
        });
    };
  
    const getData = () => {
      if (blockchain.account !== "" && blockchain.smartContract !== null) {
        dispatch(fetchData(blockchain.account));
      }
    };
  
    useEffect(() => {
      getData();
    }, [blockchain.account]);
  
    return (
      <s.Screen style={{ backgroundColor: "var(--black)" }}>
        <s.Container flex={1} ai={"center"} style={{ padding: 12 }}>
          <s.TextTitle
            style={{ textAlign: "center", fontSize: 36, fontWeight: "bold" }}
          >
            The Bee NFT Minting Hive
  
          </s.TextTitle>
          <s.SpacerMedium />
          <ResponsiveWrapper flex={1} style={{ padding: 12 }}>
            <s.Container flex={1} jc={"center"} ai={"center"}>
              <StyledImg alt={"example"} src={i1} />
              <s.SpacerMedium />
              { blockchain.account !== "" && blockchain.smartContract !== null ?
                <s.TextTitle
                  style={{ textAlign: "center", fontSize: 26, fontWeight: "bold" }}
                >
                  {data.totalSupply}/10
                </s.TextTitle>
              :
                <s.TextTitle
                  style={{ textAlign: "center", fontSize: 26, fontWeight: "bold" }}
                >
                  Please connect your wallet
                </s.TextTitle>
              }
            </s.Container>
            <s.SpacerMedium />
            <s.Container
              flex={1}
              jc={"center"}
              ai={"center"}
              style={{ backgroundColor: "#000000", padding: 12 }}
            >
              {Number(data.totalSupply) == 10 ? (
                <>
                  <s.TextTitle style={{ textAlign: "center" }}>
                    The sale has ended.
                  </s.TextTitle>
                  <s.SpacerSmall />
                  <s.TextDescription style={{ textAlign: "center" }}>
                    You can still buy and trade TBC NFTs on{" "}
                    <a
                      target={""}
                      href={"https://testnets.opensea.io/collection/the-bee-hive"}
                    >
                      Opensea.io
                    </a>
                  </s.TextDescription>
                </>
              ) : (
                <>
                  <s.TextTitle style={{ textAlign: "center" }}>
                    1 Bee NFT costs .02 ETH
                  </s.TextTitle>
                  <s.SpacerXSmall />
                  <s.TextDescription style={{ textAlign: "center" }}>
                    -excluding gas fee-
                  </s.TextDescription>
                  <s.SpacerLarge />
                  <s.SpacerSmall />
                  <s.TextDescription style={{ textAlign: "center" }}>
                    {feedback}
                  </s.TextDescription>
                  <s.SpacerMedium />
                  {blockchain.account === "" ||
                  blockchain.smartContract === null ? (
                    <s.Container ai={"center"} jc={"center"}>
                      <s.TextDescription style={{ textAlign: "center" }}>
  
                      </s.TextDescription>
                      <s.SpacerSmall />
                      <StyledButton
                        onClick={(e) => {
                          e.preventDefault();
                          dispatch(connect());
                          getData();
                        }}
                      >
                        CONNECT WALLET
                      </StyledButton>
                      {blockchain.errorMsg !== "" ? (
                        <>
                          <s.SpacerSmall />
                          <s.TextDescription style={{ textAlign: "center" }}>
                            {blockchain.errorMsg}
                          </s.TextDescription>
                        </>
                      ) : null}
                    </s.Container>
                  ) : (
                    <s.Container ai={"center"} jc={"center"} fd={"row"}>
                      <StyledButton
                        disabled={claimingNft ? 1 : 0}
                        onClick={(e) => {
                          e.preventDefault();
                          claimNFTs(1);
                          getData();
                        }}
                      >
                        {claimingNft ? "Busy..." : "Buy 1 NFT"}
                      </StyledButton>
                    </s.Container>
                  )}
                </>
              )}
            </s.Container>
          </ResponsiveWrapper>
          <s.SpacerSmall />
          <s.Container jc={"center"} ai={"center"} style={{ width: "70%" }}>
            <s.TextDescription style={{ textAlign: "center" }}>
              View the existing collection on {" "}
              <a
                target={""}
                href={"https://testnets.opensea.io/collection/the-bee-hive"}
              >
                Opensea.io
              </a>
            </s.TextDescription>
            <s.TextDescription style={{ textAlign: "center", fontSize: 18 }}>
              50% of all proceeds go towards Charity for the bees.
            </s.TextDescription>
            <s.SpacerSmall />
            <s.TextDescription style={{ textAlign: "center", fontSize: 14 }}>
              Bee Rewarded to help Save the Bees #BEEToken<p/>*.*.*Launching_Soon*.*.*
            </s.TextDescription>
          </s.Container>
        </s.Container>
      </s.Screen>
    );
  }
  
  export default App;
  