Merge branch 'main' into fix-login-error

frontend/src/components/LandingNavbar.js

@@ -89,7 +89,7 @@ const LandingNavbar = () => {
                 </Button>
               </RouterLink>
             )}
-            {!ui.isLoggedIn && (
+            {/* {!ui.isLoggedIn && (
               <Button
                 colorScheme="whiteAlpha"
                 variant="outline"
@@ -100,7 +100,7 @@ const LandingNavbar = () => {
               >
                 Get started
               </Button>
-            )}
+            )} */}
             {!ui.isLoggedIn && (
               <Button
                 color="white"

frontend/src/components/Navbar.js

@@ -6,7 +6,6 @@ import { Flex } from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 const ForgotPassword = React.lazy(() => import("./ForgotPassword"));
 const SignIn = React.lazy(() => import("./SignIn"));
-const SignUp = React.lazy(() => import("./SignUp"));
 const LandingNavbar = React.lazy(() => import("./LandingNavbar"));
 const AppNavbar = React.lazy(() => import("./AppNavbar"));
 const HubspotForm = React.lazy(() => import("./HubspotForm"));
@@ -27,7 +26,7 @@ const Navbar = () => {
       overflow="hidden"
     >
       <Suspense fallback={""}>
-        {modal === "register" && <SignUp toggleModal={toggleModal} />}
+        {/* {modal === "register" && <SignUp toggleModal={toggleModal} />} */}
         {modal === "login" && <SignIn toggleModal={toggleModal} />}
         {modal === "forgot" && <ForgotPassword toggleModal={toggleModal} />}
         {modal === "hubspot-trader" && (

frontend/src/components/Sidebar.js

@@ -94,7 +94,7 @@ const Sidebar = () => {
       )}
       {!ui.isLoggedIn && (
         <SidebarContent>
-          <Menu iconShape="square">
+          {/* <Menu iconShape="square">
             <MenuItem
               onClick={() => {
                 ui.toggleModal("register");
@@ -103,7 +103,7 @@ const Sidebar = () => {
             >
               Sign up
             </MenuItem>
-          </Menu>
+          </Menu> */}
           <Menu iconShape="square">
             <MenuItem
               onClick={() => {

frontend/src/components/SignIn.js

@@ -13,6 +13,7 @@ import {
   InputGroup,
   Button,
   Input,
+  Link,
   InputRightElement,
 } from "@chakra-ui/react";
 import CustomIcon from "./CustomIcon";
@@ -84,18 +85,6 @@ const SignIn = ({ toggleModal }) => {
           Login
         </Button>
       </form>
-      <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
-      <Text textAlign="center" fontSize="md" color="gray.1200">
-        Don`t have an account?{" "}
-        <Box
-          cursor="pointer"
-          color="primary.800"
-          as="span"
-          onClick={() => toggleModal("register")}
-        >
-          Register
-        </Box>
-      </Text>
       <Text textAlign="center" fontSize="md" color="gray.1200">
         {" "}
         <Box
@@ -106,6 +95,22 @@ const SignIn = ({ toggleModal }) => {
         >
           Forgot your password?
         </Box>
+        <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
+      </Text>
+      <Text textAlign="center" fontSize="md" color="gray.1200">
+        {/* Don`t have an account?{" "} */}
+        We are in early access. If you would like to use Moonstream,{" "}
+        <Link href={"https://discord.gg/V3tWaP36"} color="secondary.900">
+          contact us on Discord.
+        </Link>
+        {/* <Box
+          cursor="pointer"
+          color="primary.800"
+          as="span"
+          onClick={() => toggleModal("register")}
+        >
+          Register
+        </Box> */}
       </Text>
     </Modal>
   );

frontend/src/layouts/RootLayout.js

@@ -1,9 +1,14 @@
-import { Flex } from "@chakra-ui/react";
-import React, { Suspense } from "react";
+import { CloseIcon } from "@chakra-ui/icons";
+import { Flex, Center, Text, Link, IconButton } from "@chakra-ui/react";
+import React, { Suspense, useContext, useState } from "react";
+import UIContext from "../core/providers/UIProvider/context";
 const Sidebar = React.lazy(() => import("../components/Sidebar"));
 const Navbar = React.lazy(() => import("../components/Navbar"));
 
 const RootLayout = (props) => {
+  const ui = useContext(UIContext);
+  const [showBanner, setShowBanner] = useState(true);
+
   return (
     <Flex
       direction="row"
@@ -25,6 +30,56 @@ const RootLayout = (props) => {
         <Suspense fallback="">
           <Navbar />
         </Suspense>
+        {!ui.isAppView && (
+          <Flex
+            w="100%"
+            h={showBanner ? ["6.5rem", "4.5rem", "3rem", null] : "0"}
+            minH={showBanner ? ["6.5rem", "4.5rem", "3rem", null] : "0"}
+            animation="linear"
+            transition="1s"
+            overflow="hidden"
+          >
+            <Flex
+              px="20px"
+              w="100%"
+              minH={["6.5rem", "4.5rem", "3rem", null]}
+              h={["6.5rem", "4.5rem", "3rem", null]}
+              placeContent="center"
+              bgColor="suggested.900"
+              boxShadow="md"
+              position="relative"
+              className="banner"
+            >
+              <Center w="calc(100% - 60px)">
+                {" "}
+                <Text
+                  fontWeight="600"
+                  textColor="primary.900"
+                  fontSize={["sm", "sm", "md", null]}
+                >
+                  Join early. Our first 1000 users get free lifetime access to
+                  blockchain analytics. Contact our team on{" "}
+                  <Link
+                    href={"https://discord.gg/V3tWaP36"}
+                    color="secondary.900"
+                  >
+                    Discord
+                  </Link>
+                </Text>
+              </Center>
+              {/* <Spacer /> */}
+              <IconButton
+                position="absolute"
+                top="0"
+                right="0"
+                icon={<CloseIcon />}
+                colorScheme="primary"
+                variant="ghost"
+                onClick={() => setShowBanner(false)}
+              />
+            </Flex>
+          </Flex>
+        )}
         {props.children}
       </Flex>
     </Flex>