Design layout

package.json

@@ -16,14 +16,20 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/aos": "^3.0.4",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "aos": "^2.3.4",
+    "bootstrap": "5.1.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0-rc.0",
     "react-countdown": "^2.3.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "sass": "^1.42.1",
     "styled-components": "^5.3.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

public/index.html

@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-icon-180x180.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.css

@@ -1,3 +1,15 @@
-.App {
-  text-align: center;
-}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: #000;
+  color: #fff;
+  font-family: Helvetica;
+}

src/App.tsx

@@ -1,7 +1,11 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
 import "./App.css";
+import React, {useEffect} from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
 import { useMemo } from "react";
 
-import Home from "./Home";
+import Home from "./pages/Home";
 
 import * as anchor from "@project-serum/anchor";
 import { clusterApiUrl } from "@solana/web3.js";
@@ -82,6 +86,11 @@ const App = () => {
     []
   );
 
+  useEffect(() => {
+    AOS.init();
+    AOS.refresh();
+  }, []);
+
   return (
       <ThemeProvider theme={theme}>
         <ConnectionProvider endpoint={endpoint}>

src/components/About.tsx

@@ -0,0 +1,47 @@
+import {Col, Container, Row} from "react-bootstrap";
+import React from "react";
+import './about.scss';
+
+export interface AboutProps {
+  name: string;
+  image: string;
+  text: string;
+}
+
+const About = (props: AboutProps) => {
+  return (
+      <div id="about" className="about">
+        <Container className=" h-100">
+          <Row className=" h-100">
+            <Col
+                lg="6"
+                className="d-flex align-items-center justify-content-center"
+                data-aos="fade-right"
+                data-aos-duration="2000"
+            >
+              <div className="aboutimg">
+                <img className="img-fluid about-img" src={props.image} alt=""/>
+              </div>
+            </Col>
+            <Col
+                lg="6"
+                className="d-flex align-items-center"
+                data-aos="fade-left"
+                data-aos-duration="2000"
+            >
+              <div className="about-text">
+                <h1 className="title text-uppercase">
+                  What is {props.name}?
+                </h1>
+                <p className="mt-3 subtitle">
+                  {props.text}
+                </p>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+  );
+}
+
+export default About;

src/Home.tsx → src/components/ConnectionMintButton.tsx

@@ -1,33 +1,27 @@
-import { useEffect, useState } from "react";
-import styled from "styled-components";
+import React, {useEffect, useState} from "react";
+import {Button, CircularProgress, Snackbar} from "@material-ui/core";
 import Countdown from "react-countdown";
-import { Button, CircularProgress, Snackbar } from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
-
+import {LAMPORTS_PER_SOL} from "@solana/web3.js";
+import styled from "styled-components";
+import {WalletDialogButton} from "@solana/wallet-adapter-material-ui";
 import * as anchor from "@project-serum/anchor";
-
-import { LAMPORTS_PER_SOL } from "@solana/web3.js";
-
-import { useAnchorWallet } from "@solana/wallet-adapter-react";
-import { WalletDialogButton } from "@solana/wallet-adapter-material-ui";
-
+import Alert from "@material-ui/lab/Alert";
 import {
-  CandyMachine,
   awaitTransactionSignatureConfirmation,
+  CandyMachine,
   getCandyMachineState,
   mintOneToken,
   shortenAddress,
-} from "./candy-machine";
+} from "../candy-machine";
 
-const ConnectButton = styled(WalletDialogButton)``;
+import {useAnchorWallet} from "@solana/wallet-adapter-react";
 
+const ConnectButton = styled(WalletDialogButton)``;
 const CounterText = styled.span``; // add your styles here
-
 const MintContainer = styled.div``; // add your styles here
-
 const MintButton = styled(Button)``; // add your styles here
 
-export interface HomeProps {
+export interface ConnectionMintButtonProps {
   candyMachineId: anchor.web3.PublicKey;
   config: anchor.web3.PublicKey;
   connection: anchor.web3.Connection;
@@ -36,12 +30,16 @@ export interface HomeProps {
   txTimeout: number;
 }
 
-const Home = (props: HomeProps) => {
+const ConnectionMintButton = (props: ConnectionMintButtonProps) => {
   const [balance, setBalance] = useState<number>();
   const [isActive, setIsActive] = useState(false); // true when countdown completes
   const [isSoldOut, setIsSoldOut] = useState(false); // true when items remaining is zero
   const [isMinting, setIsMinting] = useState(false); // true when user got to press MINT
 
+  const [itemsAvailable, setItemsAvailable] = useState(0);
+  const [itemsRedeemed, setItemsRedeemed] = useState(0);
+  const [itemsRemaining, setItemsRemaining] = useState(0);
+
   const [alertState, setAlertState] = useState<AlertState>({
     open: false,
     message: "",
@@ -53,23 +51,24 @@ const Home = (props: HomeProps) => {
   const wallet = useAnchorWallet();
   const [candyMachine, setCandyMachine] = useState<CandyMachine>();
 
+
   const onMint = async () => {
     try {
       setIsMinting(true);
       if (wallet && candyMachine?.program) {
         const mintTxId = await mintOneToken(
-          candyMachine,
-          props.config,
-          wallet.publicKey,
-          props.treasury
+            candyMachine,
+            props.config,
+            wallet.publicKey,
+            props.treasury
         );
 
         const status = await awaitTransactionSignatureConfirmation(
-          mintTxId,
-          props.txTimeout,
-          props.connection,
-          "singleGossip",
-          false
+            mintTxId,
+            props.txTimeout,
+            props.connection,
+            "singleGossip",
+            false
         );
 
         if (!status?.err) {
@@ -132,86 +131,99 @@ const Home = (props: HomeProps) => {
     (async () => {
       if (!wallet) return;
 
-      const { candyMachine, goLiveDate, itemsRemaining } =
-        await getCandyMachineState(
+      const {
+        candyMachine,
+        goLiveDate,
+        itemsAvailable,
+        itemsRemaining,
+        itemsRedeemed,
+      } = await getCandyMachineState(
           wallet as anchor.Wallet,
           props.candyMachineId,
           props.connection
-        );
+      );
+
+      setItemsAvailable(itemsAvailable);
+      setItemsRemaining(itemsRemaining);
+      setItemsRedeemed(itemsRedeemed);
 
       setIsSoldOut(itemsRemaining === 0);
       setStartDate(goLiveDate);
       setCandyMachine(candyMachine);
     })();
   }, [wallet, props.candyMachineId, props.connection]);
 
+
   return (
-    <main>
-      {wallet && (
-        <p>Address: {shortenAddress(wallet.publicKey.toBase58() || "")}</p>
-      )}
-
-      {wallet && (
-        <p>Balance: {(balance || 0).toLocaleString()} SOL</p>
-      )}
-
-      <MintContainer>
-        {!wallet ? (
-          <ConnectButton>Connect Wallet</ConnectButton>
-        ) : (
-          <MintButton
-            disabled={isSoldOut || isMinting || !isActive}
-            onClick={onMint}
-            variant="contained"
-          >
-            {isSoldOut ? (
-              "SOLD OUT"
-            ) : isActive ? (
-              isMinting ? (
-                <CircularProgress />
-              ) : (
-                "MINT"
-              )
-            ) : (
-              <Countdown
-                date={startDate}
-                onMount={({ completed }) => completed && setIsActive(true)}
-                onComplete={() => setIsActive(true)}
-                renderer={renderCounter}
-              />
-            )}
-          </MintButton>
+      <div>
+        {wallet && (
+            <p>Wallet {shortenAddress(wallet.publicKey.toBase58() || "")}</p>
         )}
-      </MintContainer>
-
-      <Snackbar
-        open={alertState.open}
-        autoHideDuration={6000}
-        onClose={() => setAlertState({ ...alertState, open: false })}
-      >
-        <Alert
-          onClose={() => setAlertState({ ...alertState, open: false })}
-          severity={alertState.severity}
+
+        {wallet && <p>Balance: {(balance || 0).toLocaleString()} SOL</p>}
+
+        {wallet && <p>Total Available: {itemsAvailable}</p>}
+
+        {wallet && <p>Redeemed: {itemsRedeemed}</p>}
+
+        {wallet && <p>Remaining: {itemsRemaining}</p>}
+
+        <MintContainer>
+          {!wallet ? (
+              <ConnectButton>Connect Wallet</ConnectButton>
+          ) : (
+              <MintButton
+                  disabled={isSoldOut || isMinting || !isActive}
+                  onClick={onMint}
+                  variant="contained"
+              >
+                {isSoldOut ? (
+                    "SOLD OUT"
+                ) : isActive ? (
+                    isMinting ? (
+                        <CircularProgress/>
+                    ) : (
+                        "MINT"
+                    )
+                ) : (
+                    <Countdown
+                        date={startDate}
+                        onMount={({completed}) => completed && setIsActive(true)}
+                        onComplete={() => setIsActive(true)}
+                        renderer={renderCounter}
+                    />
+                )}
+              </MintButton>
+          )}
+        </MintContainer>
+        <Snackbar
+            open={alertState.open}
+            autoHideDuration={6000}
+            onClose={() => setAlertState({ ...alertState, open: false })}
         >
-          {alertState.message}
-        </Alert>
-      </Snackbar>
-    </main>
+          <Alert
+              onClose={() => setAlertState({ ...alertState, open: false })}
+              severity={alertState.severity}
+          >
+            {alertState.message}
+          </Alert>
+        </Snackbar>
+      </div>
   );
-};
+}
 
 interface AlertState {
   open: boolean;
   message: string;
   severity: "success" | "info" | "warning" | "error" | undefined;
 }
 
-const renderCounter = ({ days, hours, minutes, seconds, completed }: any) => {
+const renderCounter = ({days, hours, minutes, seconds, _completed}: any) => {
   return (
-    <CounterText>
-      {hours} hours, {minutes} minutes, {seconds} seconds
-    </CounterText>
+      <CounterText>
+        {hours + (days || 0) * 24} hours, {minutes} minutes, {seconds} seconds
+      </CounterText>
   );
 };
 
-export default Home;
+export default ConnectionMintButton;