connect button

README.md

@@ -1,22 +1,15 @@
-
 Testnet deployment: [AxeTracker](https://axetracker.netlify.app/)
 
-
-
-***YOU MUST BE CONNECTED TO MUMBAI (POLYGON TESTNET) TO INTERACT WITH THE APP***
-
-
+**_YOU MUST BE CONNECTED TO MUMBAI (POLYGON TESTNET) TO INTERACT WITH THE APP_**
 
 ## Track Your Axe
 
-
-Track Your Axe is a blockchain-based platform designed to bring transparency and security to the provenance of musical instruments. 
+Track Your Axe is a blockchain-based platform designed to bring transparency and security to the provenance of musical instruments.
 
-With the current system of provenance relying heavily on fraying documents and hearsay, it's difficult for musicians, collectors, and buyers to accurately gauge the worth of a prospective instrumental purchase, which can range into the hundreds of thousands of dollars. Track Your Axe aims to change that by providing a tamper-proof and easily verifiable way to track the history and ownership of musical instruments. 
+With the current system of provenance relying heavily on fraying documents and hearsay, it's difficult for musicians, collectors, and buyers to accurately gauge the worth of a prospective instrumental purchase, which can range into the hundreds of thousands of dollars. Track Your Axe aims to change that by providing a tamper-proof and easily verifiable way to track the history and ownership of musical instruments.
 
-By using the transparent and permanent database of a blockchain, Track Your Axe ensures that the information about an instrument is immutable and can be easily accessed and verified by all parties. This means that musicians, collectors, and buyers can have peace of mind knowing that the information about an instrument's provenance is accurate and reliable. 
+By using the transparent and permanent database of a blockchain, Track Your Axe ensures that the information about an instrument is immutable and can be easily accessed and verified by all parties. This means that musicians, collectors, and buyers can have peace of mind knowing that the information about an instrument's provenance is accurate and reliable.
 
-Track Your Axe also enables easy transfer of ownership, making buying and selling of musical instruments more efficient and secure. With Track Your Axe, you can trust the authenticity of your instrument and prove its provenance. 
+Track Your Axe also enables easy transfer of ownership, making buying and selling of musical instruments more efficient and secure. With Track Your Axe, you can trust the authenticity of your instrument and prove its provenance.
 
-
-Track Your Axe is currently deployed on `Mumbai`
+Track Your Axe is currently deployed on `Mumbai`

pages/index.js

@@ -48,9 +48,9 @@ function App() {
             a blockchain-backed provenance and verification solution for <br />
             instruments and musical items
           </h3>
-          {chainId && chainId != 31337 ? (
+          {chainId && chainId != 80001 ? (
             <h4 style={{ color: "red" }}>
-              PLEASE CONNECT TO LOCALHOST IN YOUR WALLET TO CONTINUE
+              PLEASE CONNECT TO MUMBAI IN YOUR WALLET TO CONTINUE
             </h4>
           ) : null}
           <Row>

src/components/ConnectWalletButton/ConnectWalletButton.js

@@ -7,7 +7,7 @@ import { useUserContext } from "../../context/UserContext";
 import greenCheckMark from "../../../public/images/green_checkmark.png";
 
 // styles
-import { Button, Image, Dropdown } from "react-bootstrap";
+import { Button, Image, Dropdown, Modal } from "react-bootstrap";
 import styles from "./ConnectWalletButton.module.css";
 import { truncateAddress } from "../../hooks/utils";
 
@@ -22,10 +22,29 @@ const ConnectWalletButton = () => {
     connectWallet,
   } = useUserContext();
 
+  const [showModal, setShowModal] = useState(false);
+  const [showConnectButton, setShowConnectButton] = useState(true);
+
   useEffect(() => {
-    if (mainAccount) setConnectionErrorMessage("");
+    if (mainAccount) {
+      setShowConnectButton(false);
+      setConnectionErrorMessage("");
+    }
   }, [mainAccount, setConnectionErrorMessage]);
 
+  useEffect(() => {
+    let timeoutId;
+
+      setShowModal(true);
+      setShowConnectButton(false);
+      timeoutId = setTimeout(() => {
+        setShowModal(false);
+        setShowConnectButton(true);
+      }, 1500);
+
+    return () => clearTimeout(timeoutId);
+  }, [ setShowModal, setShowConnectButton]);
+
   return (
     <div>
       {mainAccount ? (
@@ -60,37 +79,11 @@ const ConnectWalletButton = () => {
           <p className={styles.buttonText}>Connect Wallet</p>
         </Button>
       )}
-      {connectionErrorMessage ? (
-        <p style={{ color: "red", marginLeft: "200px" }}>
-          {connectionErrorMessage}
-        </p>
-      ) : null}
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+          <Modal.Body>{connectionErrorMessage}</Modal.Body>
+        </Modal>
     </div>
   );
 };
 
 export default ConnectWalletButton;
-
-/*
-
-<div>
-<Button className={styles.button} id="connectButton" onClick={connectWallet} disabled={mainAccount} >
-
-{mainAccount ? `Account: ${truncateAddress(mainAccount)}` : "Connect Wallet"}
-
-{mainAccount ? 
-<Image 
-className={styles.checkmarkImage}
-src={'images/green_checkmark.png'} 
-alt="checkmark"/> : 
-<Image 
-className={styles.checkmarkImage}
-src={'images/Red_x.svg'} 
-alt="checkmark"/>}
-
-<hr />
-{`Chain Id: ${chainId}`}
-
-</Button>
-
-*/

src/components/ConnectWalletButton/ConnectWalletButton.module.css

@@ -5,7 +5,6 @@
   padding: 15px 32px;
   text-align: center;
   font-size: 15px;
-  max-width: 30%;
   max-height: 100px;
   font-weight: bold;
   float: right;
@@ -34,3 +33,16 @@
   font-size: 25px;
   margin: 0 auto;
 }
+
+.alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/NavBar/NavBar.module.css

@@ -29,3 +29,4 @@
 #incoming {
   color: red;
 }
+