Merge pull request #422 from bugout-dev/main

Fix signup

frontend/pages/index.js

@@ -501,7 +501,7 @@ const Homepage = () => {
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
                           [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer txpool button`,
                         });
-                      toggleModal(MODAL_TYPES.HUBSPOT);
+                      toggleModal({ type: MODAL_TYPES.HUBSPOT });
                     },
                   }}
                   elementName={"element1"}
@@ -560,7 +560,7 @@ const Homepage = () => {
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
                           [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer exchanges button`,
                         });
-                      toggleModal(MODAL_TYPES.HUBSPOT);
+                      toggleModal({ type: MODAL_TYPES.HUBSPOT });
                     },
                   }}
                   elementName={"element2"}
@@ -621,7 +621,7 @@ const Homepage = () => {
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
                           [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer smartDeveloper button`,
                         });
-                      toggleModal(MODAL_TYPES.HUBSPOT);
+                      toggleModal({ type: MODAL_TYPES.HUBSPOT });
                     },
                   }}
                   elementName={"element3"}
@@ -675,7 +675,7 @@ const Homepage = () => {
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
                           [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer analytics button`,
                         });
-                      toggleModal(MODAL_TYPES.HUBSPOT);
+                      toggleModal({ type: MODAL_TYPES.HUBSPOT });
                     },
                   }}
                   elementName={"element3"}
@@ -783,7 +783,7 @@ const Homepage = () => {
                     isExternal
                     w={["100%", "100%", "fit-content", null]}
                     maxW={["250px", null, "fit-content"]}
-                    onClick={() => toggleModal("register")}
+                    onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
                     size="lg"
                     variant="solid"
                     colorScheme="orange"

frontend/pages/welcome.js

@@ -130,73 +130,7 @@ const Welcome = () => {
                 borderRadius="xl"
                 boxShadow="xl"
                 py={4}
-              >
-                <Accordion allowToggle>
-                  <AccordionItem borderWidth={0}>
-                    <h2>
-                      <AccordionButton borderWidth={0}>
-                        <Heading as="h4" size="md">
-                          UI navigation basics
-                        </Heading>
-                        <AccordionIcon />
-                      </AccordionButton>
-                    </h2>
-                    <AccordionPanel pb={4} borderWidth={0}>
-                      <Stack dir="column">
-                        <Text fontWeight="semibold" pl={2}>
-                          Use the sidebar on the left for navigation:
-                        </Text>
-                        <chakra.span fontWeight="semibold" pl={2}>
-                          <Text fontWeight="bold" display="inline">
-                            Subscriptions
-                          </Text>
-                          Set up addresses you would like to monitor.{" "}
-                          <i>
-                            NB: Without any subscriptions, Moonstream will feel
-                            quite empty!
-                          </i>{" "}
-                          No worries, we will help you set up your
-                          subscriptions.
-                          <i>
-                            NB: Without setting up subscriptions moonstream will
-                            have quite empty feel!{" "}
-                          </i>{" "}
-                          No worries, we will help you to set up your
-                          subscriptions in the next steps!
-                        </chakra.span>
-                        <chakra.span fontWeight="semibold" pl={2}>
-                          <Text fontWeight="bold" display="inline">
-                            Stream
-                          </Text>{" "}
-                          This view is similar to a bank statement. You can
-                          define a date range and see what happened with your
-                          subscriptions during that time. You can also apply
-                          filters to it.
-                        </chakra.span>
-
-                        <chakra.span fontWeight="semibold" pl={2}>
-                          <Text fontWeight="bold" display="inline">
-                            Stream Entry
-                          </Text>{" "}
-                          - See a detailed view of stream cards with specific
-                          and essential data, like methods called in smart
-                          contracts etc
-                        </chakra.span>
-
-                        <chakra.span fontWeight="semibold" pl={2}>
-                          <Text fontWeight="bold" display="inline">
-                            Analytics
-                          </Text>{" "}
-                          - This section is under construction. Soon you will be
-                          able to create dashboards there. Right now you can
-                          fill out a form to tell us what analytical tools you’d
-                          want to see. We’d really appreciate that :)
-                        </chakra.span>
-                      </Stack>
-                    </AccordionPanel>
-                  </AccordionItem>
-                </Accordion>
-              </Stack>
+              ></Stack>
             </Stack>
           </Fade>
         )}

frontend/src/components/LandingNavbar.js

@@ -89,7 +89,7 @@ const LandingNavbar = () => {
               <Button
                 colorScheme="orange"
                 variant="solid"
-                onClick={() => toggleModal(MODAL_TYPES.SIGNUP)}
+                onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
                 size="sm"
                 fontWeight="400"
                 borderRadius="2xl"

frontend/src/components/Sidebar.js

@@ -89,7 +89,7 @@ const Sidebar = () => {
             <>
               <MenuItem
                 onClick={() => {
-                  ui.toggleModal(MODAL_TYPES.SIGNUP);
+                  ui.toggleModal({ type: MODAL_TYPES.SIGNUP });
                   ui.setSidebarToggled(false);
                 }}
               >

frontend/src/components/SignIn.js

@@ -95,7 +95,7 @@ const SignIn = ({ toggleModal }) => {
           cursor="pointer"
           color="blue.800"
           as="span"
-          onClick={() => toggleModal(MODAL_TYPES.SIGNUP)}
+          onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
         >
           Register
         </Box>

frontend/src/components/SignUp.js

@@ -1,7 +1,4 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import {
   Text,
@@ -17,19 +14,17 @@ import {
 import CustomIcon from "./CustomIcon";
 import { useSignUp } from "../core/hooks";
 import PasswordInput from "./PasswordInput";
-import UIContext from "../core/providers/UIProvider/context";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 
 const SignUp = ({ toggleModal }) => {
   const { handleSubmit, errors, register } = useForm();
   const { signUp, isLoading, isSuccess } = useSignUp();
-  const ui = useContext(UIContext);
 
   useEffect(() => {
     if (isSuccess) {
-      ui.toggleModal({ type: MODAL_TYPES.OFF });
+      toggleModal({ type: MODAL_TYPES.OFF });
     }
-  }, [isSuccess, toggleModal, ui]);
+  }, [isSuccess, toggleModal]);
 
   return (
     <>
@@ -95,7 +90,7 @@ const SignUp = ({ toggleModal }) => {
         </Button>
       </form>
       <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
-      <Text textAlign="center" fontSize="md" color="gray.1200">
+      <Text textAlign="center" fontSize="md" color="gray.1200" pb={8}>
         Already have an account?{" "}
         <Box
           cursor="pointer"

frontend/src/core/providers/OverlayProvider/index.js

@@ -35,6 +35,7 @@ import {
 import UserContext from "../UserProvider/context";
 import UIContext from "../UIProvider/context";
 import useDashboard from "../../hooks/useDashboard";
+import SignUp from "../../../components/SignUp";
 const ForgotPassword = React.lazy(() =>
   import("../../../components/ForgotPassword")
 );
@@ -206,8 +207,7 @@ const OverlayProvider = ({ children }) => {
               {modal.type === MODAL_TYPES.LOGIN && (
                 <SignIn toggleModal={toggleModal} />
               )}
-              {
-                modal.type === MODAL_TYPES.SIGNUP && (
+              {modal.type === MODAL_TYPES.SIGNUP && (
                 <SignUp toggleModal={toggleModal} />
               )}
               {modal.type === MODAL_TYPES.UPLOAD_ABI && (