diff --git a/src/components/Body/NotificationBar.tsx b/src/components/Body/NotificationBar.tsx new file mode 100644 index 0000000..8942033 --- /dev/null +++ b/src/components/Body/NotificationBar.tsx @@ -0,0 +1,61 @@ +import { useState, useEffect } from "react"; +import { + Alert, + AlertIcon, + CloseButton, + Text, + Link, + HStack, +} from "@chakra-ui/react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; +import { ExternalLinkIcon } from "@chakra-ui/icons"; + +const CLOSED_KEY = "discord-notif-closed"; + +function NotificationBar() { + const isClosed = localStorage.getItem(CLOSED_KEY); + + const [isVisible, setIsVisible] = useState( + isClosed === "true" ? false : true + ); + + useEffect(() => { + if (!isVisible) { + localStorage.setItem(CLOSED_KEY, "true"); + } + }, [isVisible]); + + return isVisible ? ( + + + + Share feature requests, report bugs and be the first to{" "} + try beta versions + by joining us on + + + + Discord + + + + + setIsVisible(false)} + /> + + ) : ( + <> + ); +} + +export default NotificationBar; diff --git a/src/components/Body/index.tsx b/src/components/Body/index.tsx index 82215ea..31d19a4 100644 --- a/src/components/Body/index.tsx +++ b/src/components/Body/index.tsx @@ -30,6 +30,7 @@ import WalletConnectTab from "./WalletConnectTab"; import IFrameConnectTab from "./IFrameConnectTab"; import BrowserExtensionTab from "./BrowserExtensionTab"; import TransactionRequests from "./TransactionRequests"; +import NotificationBar from "./NotificationBar"; const WCMetadata = { name: "Impersonator", @@ -744,83 +745,86 @@ function Body() { }; return ( - - - - + + + + + + + - - - - - {(() => { - switch (selectedTabIndex) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - } - })()} -
- -
-
+ + {(() => { + switch (selectedTabIndex) { + case 0: + return ( + + ); + case 1: + return ( + + ); + case 2: + return ; + } + })()} +
+ +
+ + ); } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index abad185..23ecf0d 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -10,11 +10,12 @@ import { HStack, Box, Stack, + Center, } from "@chakra-ui/react"; import { ExternalLinkIcon } from "@chakra-ui/icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconProp } from "@fortawesome/fontawesome-svg-core"; -import { faTwitter } from "@fortawesome/free-brands-svg-icons"; +import { faTwitter, faDiscord } from "@fortawesome/free-brands-svg-icons"; const Social = ({ icon, link }: { icon: IconProp; link: string }) => { return ( @@ -76,6 +77,15 @@ function Footer() { +
+ + + +