add notification bar

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 ? (
+    <Alert status="info">
+      <AlertIcon />
+      <HStack flex={1}>
+        <Text>Share feature requests, report bugs and be the first to</Text>{" "}
+        <Text fontWeight={"semibold"}>try beta versions</Text>
+        <Text> by joining us on</Text>
+        <Link
+          href={"https://discord.gg/4VTnuVzfmm"}
+          color="cyan.300"
+          isExternal
+        >
+          <HStack>
+            <FontAwesomeIcon icon={faDiscord} size="1x" />
+            <Text>Discord</Text>
+            <ExternalLinkIcon />
+          </HStack>
+        </Link>
+      </HStack>
+      <CloseButton
+        alignSelf="flex-start"
+        position="relative"
+        right={-1}
+        top={-1}
+        onClick={() => setIsVisible(false)}
+      />
+    </Alert>
+  ) : (
+    <></>
+  );
+}
+
+export default NotificationBar;

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 (
-    <Container my="16" minW={["0", "0", "2xl", "2xl"]}>
-      <Flex>
-        <Spacer flex="1" />
-        <TenderlySettings
-          tenderlyForkId={tenderlyForkId}
-          setTenderlyForkId={setTenderlyForkId}
+    <>
+      <NotificationBar />
+      <Container my="16" minW={["0", "0", "2xl", "2xl"]}>
+        <Flex>
+          <Spacer flex="1" />
+          <TenderlySettings
+            tenderlyForkId={tenderlyForkId}
+            setTenderlyForkId={setTenderlyForkId}
+          />
+        </Flex>
+        <AddressInput
+          showAddress={showAddress}
+          setShowAddress={setShowAddress}
+          setAddress={setAddress}
+          setIsAddressValid={setIsAddressValid}
+          bg={bgColor[colorMode]}
+          isAddressValid={isAddressValid}
+          selectedTabIndex={selectedTabIndex}
+          isConnected={isConnected}
+          appUrl={appUrl}
+          isIFrameLoading={isIFrameLoading}
+          updateAddress={updateAddress}
         />
-      </Flex>
-      <AddressInput
-        showAddress={showAddress}
-        setShowAddress={setShowAddress}
-        setAddress={setAddress}
-        setIsAddressValid={setIsAddressValid}
-        bg={bgColor[colorMode]}
-        isAddressValid={isAddressValid}
-        selectedTabIndex={selectedTabIndex}
-        isConnected={isConnected}
-        appUrl={appUrl}
-        isIFrameLoading={isIFrameLoading}
-        updateAddress={updateAddress}
-      />
-      <NetworkInput
-        primaryNetworkOptions={primaryNetworkOptions}
-        secondaryNetworkOptions={secondaryNetworkOptions}
-        selectedNetworkOption={selectedNetworkOption}
-        setSelectedNetworkOption={setSelectedNetworkOption}
-      />
-      <TabsSelect
-        selectedTabIndex={selectedTabIndex}
-        setSelectedTabIndex={setSelectedTabIndex}
-      />
-      {(() => {
-        switch (selectedTabIndex) {
-          case 0:
-            return (
-              <WalletConnectTab
-                uri={uri}
-                setUri={setUri}
-                bg={bgColor[colorMode]}
-                isConnected={isConnected}
-                initWalletConnect={initWalletConnect}
-                loading={loading}
-                setLoading={setLoading}
-                reset={reset}
-                legacyPeerMeta={legacyPeerMeta}
-                killSession={killSession}
-                web3WalletSession={web3WalletSession}
-              />
-            );
-          case 1:
-            return (
-              <IFrameConnectTab
-                networkId={networkId}
-                initIFrame={initIFrame}
-                setInputAppUrl={setInputAppUrl}
-                inputAppUrl={inputAppUrl}
-                bg={bgColor[colorMode]}
-                isIFrameLoading={isIFrameLoading}
-                appUrl={appUrl}
-                iframeKey={iframeKey}
-                iframeRef={iframeRef}
-                setIsIFrameLoading={setIsIFrameLoading}
-                showAddress={showAddress}
-              />
-            );
-          case 2:
-            return <BrowserExtensionTab />;
-        }
-      })()}
-      <Center>
-        <TransactionRequests
-          sendTxnData={sendTxnData}
-          setSendTxnData={setSendTxnData}
-          networkId={networkId}
+        <NetworkInput
+          primaryNetworkOptions={primaryNetworkOptions}
+          secondaryNetworkOptions={secondaryNetworkOptions}
+          selectedNetworkOption={selectedNetworkOption}
+          setSelectedNetworkOption={setSelectedNetworkOption}
         />
-      </Center>
-    </Container>
+        <TabsSelect
+          selectedTabIndex={selectedTabIndex}
+          setSelectedTabIndex={setSelectedTabIndex}
+        />
+        {(() => {
+          switch (selectedTabIndex) {
+            case 0:
+              return (
+                <WalletConnectTab
+                  uri={uri}
+                  setUri={setUri}
+                  bg={bgColor[colorMode]}
+                  isConnected={isConnected}
+                  initWalletConnect={initWalletConnect}
+                  loading={loading}
+                  setLoading={setLoading}
+                  reset={reset}
+                  legacyPeerMeta={legacyPeerMeta}
+                  killSession={killSession}
+                  web3WalletSession={web3WalletSession}
+                />
+              );
+            case 1:
+              return (
+                <IFrameConnectTab
+                  networkId={networkId}
+                  initIFrame={initIFrame}
+                  setInputAppUrl={setInputAppUrl}
+                  inputAppUrl={inputAppUrl}
+                  bg={bgColor[colorMode]}
+                  isIFrameLoading={isIFrameLoading}
+                  appUrl={appUrl}
+                  iframeKey={iframeKey}
+                  iframeRef={iframeRef}
+                  setIsIFrameLoading={setIsIFrameLoading}
+                  showAddress={showAddress}
+                />
+              );
+            case 2:
+              return <BrowserExtensionTab />;
+          }
+        })()}
+        <Center>
+          <TransactionRequests
+            sendTxnData={sendTxnData}
+            setSendTxnData={setSendTxnData}
+            networkId={networkId}
+          />
+        </Center>
+      </Container>
+    </>
   );
 }
 

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() {
             <ExternalLinkIcon />
           </Link>
         </Heading>
+        <Center pt="1">
+          <Link
+            href={"https://discord.gg/4VTnuVzfmm"}
+            color="twitter.200"
+            isExternal
+          >
+            <FontAwesomeIcon icon={faDiscord} size="2x" />
+          </Link>
+        </Center>
       </VStack>
       <Spacer flex="1" />
     </Flex>