From fe874585f0f5a1362b8679d521c25265ed87f362 Mon Sep 17 00:00:00 2001 From: Peter Sparacino <72105234+psparacino@users.noreply.github.com> Date: Mon, 16 Jan 2023 01:25:42 -0500 Subject: [PATCH] connect button --- README.md | 19 ++----- pages/index.js | 4 +- .../ConnectWalletButton.js | 55 ++++++++----------- .../ConnectWalletButton.module.css | 14 ++++- src/components/NavBar/NavBar.module.css | 1 + 5 files changed, 46 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index bd28c53..3778524 100644 --- a/README.md +++ b/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` \ No newline at end of file +Track Your Axe is currently deployed on `Mumbai` diff --git a/pages/index.js b/pages/index.js index 2d790af..0361958 100644 --- a/pages/index.js +++ b/pages/index.js @@ -48,9 +48,9 @@ function App() { a blockchain-backed provenance and verification solution for
instruments and musical items - {chainId && chainId != 31337 ? ( + {chainId && chainId != 80001 ? (

- PLEASE CONNECT TO LOCALHOST IN YOUR WALLET TO CONTINUE + PLEASE CONNECT TO MUMBAI IN YOUR WALLET TO CONTINUE

) : null} diff --git a/src/components/ConnectWalletButton/ConnectWalletButton.js b/src/components/ConnectWalletButton/ConnectWalletButton.js index 3d744b6..f364771 100644 --- a/src/components/ConnectWalletButton/ConnectWalletButton.js +++ b/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 (
{mainAccount ? ( @@ -60,37 +79,11 @@ const ConnectWalletButton = () => {

Connect Wallet

)} - {connectionErrorMessage ? ( -

- {connectionErrorMessage} -

- ) : null} + setShowModal(false)}> + {connectionErrorMessage} +
); }; export default ConnectWalletButton; - -/* - -
- - -*/ diff --git a/src/components/ConnectWalletButton/ConnectWalletButton.module.css b/src/components/ConnectWalletButton/ConnectWalletButton.module.css index b433ab7..ecca115 100644 --- a/src/components/ConnectWalletButton/ConnectWalletButton.module.css +++ b/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; +} diff --git a/src/components/NavBar/NavBar.module.css b/src/components/NavBar/NavBar.module.css index 824185d..c4b5266 100644 --- a/src/components/NavBar/NavBar.module.css +++ b/src/components/NavBar/NavBar.module.css @@ -29,3 +29,4 @@ #incoming { color: red; } +