import "./App.css"; import React, { useState } from "react"; import { createStyles, makeStyles } from "@material-ui/core/styles"; import checkMyNFTImage from "./images/checkMyNFT.png"; import TwitterSection from "./components/TwitterSection"; import HowItWorksSection from "./components/HowItWorksSection"; import NFTResourcesSection from "./components/NFTResourcesSection"; import FooterSection from "./components/FooterSection"; import SupportSection from "./components/SupportSection"; import ModalForm from "./components/ModalForm"; import HeroSection from "./components/HeroSection"; import ResultsSection from "./components/ResultsSection"; import FeaturedInSection from "./components/FeaturedInSection"; import WhatIsMetadataSection from "./components/WhatIsMetadataSection"; import FAQSection from "./components/FAQSection"; const useStyles = makeStyles((theme) => createStyles({ root: { flexGrow: 1, }, loaderStrong: { backgroundColor: "rgba(196, 196, 196, 1)", "& .MuiLinearProgress-barColorPrimary": { backgroundColor: "#16CA48", }, }, loaderMedium: { backgroundColor: "rgba(196, 196, 196, 1)", "& .MuiLinearProgress-barColorPrimary": { backgroundColor: "#EDD820", }, }, loaderPoor: { backgroundColor: "rgba(196, 196, 196, 1)", "& .MuiLinearProgress-barColorPrimary": { backgroundColor: "#FF6161", }, }, loaderUndefined: { backgroundColor: "rgba(196, 196, 196, 1)", "& .MuiLinearProgress-barColorPrimary": { backgroundColor: "#C4C4C4", }, }, modal: { display: "flex", alignItems: "center", justifyContent: "center", outline: "none", }, paper: { backgroundColor: theme.palette.background.paper, borderRadius: "20px", padding: theme.spacing(4, 4, 4, 4), outline: "none", }, }) ); let defaultImgState = { imageURIURL: "", image: checkMyNFTImage, loading: false, }; function App() { // used in hero results and modal const classes = useStyles(); const [tokenID, setTokenID] = useState(""); const [nftInfo, setNFTInfo] = useState({ owner: "", tokenURI: "", symbol: "", name: "", address: "", tokenID: "", protocol: "", uriURL: "", }); // used in hero and results const [imageInfo, setImageInfo] = useState(defaultImgState); const [nftAddress, setNFTAddress] = useState(""); const [fetchError, setFetchError] = useState(""); const [errors, setErrors] = useState({ nftAddress: "", tokenID: "", }); // used in modal and results const [open, setOpen] = useState(false); const [arweaveMetadataUploadedURL, setArweaveMetadataUploadedURL] = useState( "" ); const [arweaveImageUploadedURL, setArweaveImageUploadedURL] = useState(""); return ( <div className="App" style={{}}> <ModalForm componentProps={{ classes, open, setOpen, arweaveMetadataUploadedURL, arweaveImageUploadedURL, nftInfo, }} /> {!nftInfo.level ? ( <React.Fragment> <HeroSection componentProps={{ classes, imageInfo, setImageInfo, nftAddress, setNFTAddress, tokenID, setTokenID, nftInfo, setNFTInfo, errors, setErrors, fetchError, setFetchError, }} /> <FeaturedInSection /> <WhatIsMetadataSection /> <HowItWorksSection /> <FAQSection /> <TwitterSection /> <NFTResourcesSection /> <SupportSection /> <FooterSection /> </React.Fragment> ) : ( <React.Fragment> <ResultsSection componentProps={{ classes, imageInfo, setImageInfo, setNFTAddress, setOpen, setArweaveMetadataUploadedURL, setArweaveImageUploadedURL, setTokenID, nftInfo, setNFTInfo, setErrors, setFetchError, }} /> </React.Fragment> )} </div> ); } export default App;