[15xx] Fixes for several bugs

src/App.tsx

@@ -10,17 +10,22 @@ import Header from "./components/Header";
 import { PWAModal } from "./components/PWAModal";
 import { SplashScreen } from "./components/Splashscreen";
 import { usePrivateKeyAsAuth } from "./hooks/usePrivateKeyAsAuth";
+import ConnectWalletDialog from "./screens/ConnectWallet";
 import UnderConstruction from "./screens/Errors/UnderConstruction";
 import Faucet from "./screens/Faucet";
+import SpotScreen from "./screens/SpotScreen";
 import { SwapScreen } from "./screens/SwapScreen";
-import TradeScreen from "./screens/TradeScreen";
+import { MODAL_TYPE } from "./stores/ModalStore";
 import { DEFAULT_MARKET, ROUTES } from "./constants";
+import { useStores } from "./stores";
 
 const isUnderConstruction = false;
 
 const DEFAULT_SPOT_ROUTE = `/spot/${DEFAULT_MARKET}`;
 
 const App: React.FC = observer(() => {
+  const { modalStore } = useStores();
+
   usePrivateKeyAsAuth();
 
   if (isUnderConstruction) {
@@ -31,7 +36,7 @@ const App: React.FC = observer(() => {
     <Root>
       <Header />
       <Routes>
-        <Route element={<TradeScreen />} path={`${ROUTES.SPOT}/:marketId`} />
+        <Route element={<SpotScreen />} path={`${ROUTES.SPOT}/:marketId`} />
         <Route element={<SwapScreen />} path={ROUTES.SWAP} />
         <Route element={<Faucet />} path={ROUTES.FAUCET} />
         <Route element={<Navigate to={ROUTES.ROOT} />} path="*" />
@@ -40,6 +45,7 @@ const App: React.FC = observer(() => {
       <SideManageAssets />
       <PWAModal />
       <SplashScreen />
+      <ConnectWalletDialog visible={modalStore.isOpen(MODAL_TYPE.CONNECT_MODAL)} onClose={() => modalStore.close()} />
     </Root>
   );
 });

src/components/Button.tsx

@@ -4,15 +4,17 @@ import styled from "@emotion/styled";
 import { TEXT_TYPES, TEXT_TYPES_MAP } from "@components/Text";
 import { media } from "@src/themes/breakpoints";
 
-const Button = styled.button<{
+export interface ButtonProps {
   green?: boolean;
   red?: boolean;
   text?: boolean;
   black?: boolean;
   grey?: boolean;
   fitContent?: boolean;
   active?: boolean;
-}>`
+}
+
+const Button = styled.button<ButtonProps>`
   text-decoration: none;
   white-space: nowrap;
   display: flex;

src/components/ConnectWalletButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+import { useStores } from "@src/stores";
+import { MODAL_TYPE } from "@src/stores/ModalStore";
+
+import Button, { ButtonProps } from "./Button";
+
+interface Props extends ButtonProps {
+  connectText?: string;
+  children: React.ReactNode;
+}
+
+export const ConnectWalletButton: React.FC<Props> = observer(
+  ({ connectText = "Connect wallet", children, ...props }) => {
+    const { accountStore, modalStore } = useStores();
+
+    if (!accountStore.isConnected) {
+      return (
+        <Button green {...props} onClick={() => modalStore.open(MODAL_TYPE.CONNECT_MODAL)}>
+          {connectText}
+        </Button>
+      );
+    }
+
+    return <>{children}</>;
+  },
+);

src/components/Header/Header.tsx

@@ -3,29 +3,29 @@ import styled from "@emotion/styled";
 import { observer } from "mobx-react";
 
 import Button from "@components/Button";
-import ConnectedWallet from "@components/Header/ConnectedWallet";
 import DataBase from "@src/assets/icons/dataBase.svg?react";
 import Logo from "@src/assets/icons/logo.svg?react";
 import Menu from "@src/assets/icons/menu.svg?react";
 import useFlag from "@src/hooks/useFlag";
 import { useMedia } from "@src/hooks/useMedia";
-import ConnectWalletDialog from "@src/screens/ConnectWallet";
+import { MODAL_TYPE } from "@src/stores/ModalStore";
 import { media } from "@src/themes/breakpoints";
 import { useStores } from "@stores";
 
+import { ConnectWalletButton } from "../ConnectWalletButton";
 import { AccountInfoSheet } from "../Modal";
 import { SmartFlex } from "../SmartFlex";
+import WalletButton from "../WalletButton";
 
-import ConnectedWalletButton from "./ConnectedWalletButton";
 import { MenuNav } from "./MenuNav";
 import MobileMenu from "./MobileMenu";
+import WalletAddressButton from "./WalletAddressButton";
 
 const Header: React.FC = observer(() => {
-  const { modalStore, accountStore, quickAssetsStore } = useStores();
+  const { modalStore, quickAssetsStore } = useStores();
   const media = useMedia();
 
   const [isMobileMenuOpen, openMobileMenu, closeMobileMenu] = useFlag();
-  const [isConnectDialogVisible, openConnectDialog, closeConnectDialog] = useFlag();
   const [isAccountInfoSheetOpen, openAccountInfo, closeAccountInfo] = useFlag();
 
   useEffect(() => {
@@ -44,30 +44,16 @@ const Header: React.FC = observer(() => {
     }
   };
 
+  const openConnectModal = () => modalStore.open(MODAL_TYPE.CONNECT_MODAL);
+
   const renderWallet = () => {
     const dataOnboardingConnectKey = `connect-${media.mobile ? "mobile" : "desktop"}`;
 
-    if (!accountStore.address) {
-      return (
-        <WalletContainer data-onboarding={dataOnboardingConnectKey}>
-          <Button fitContent green onClick={openConnectDialog}>
-            Connect wallet
-          </Button>
-        </WalletContainer>
-      );
-    }
-
-    if (media.mobile) {
-      return (
-        <WalletContainer data-onboarding={dataOnboardingConnectKey} isVisible={!isMobileMenuOpen}>
-          <ConnectedWalletButton onClick={openAccountInfo} />
-        </WalletContainer>
-      );
-    }
+    const walletButtonContent = media.mobile ? <WalletAddressButton onClick={openAccountInfo} /> : <WalletButton />;
 
     return (
-      <WalletContainer data-onboarding={dataOnboardingConnectKey}>
-        <ConnectedWallet />
+      <WalletContainer data-onboarding={dataOnboardingConnectKey} isVisible={!isMobileMenuOpen}>
+        <ConnectWalletButton fitContent>{walletButtonContent}</ConnectWalletButton>
       </WalletContainer>
     );
   };
@@ -123,11 +109,8 @@ const Header: React.FC = observer(() => {
         isOpen={isMobileMenuOpen}
         onAccountClick={openAccountInfo}
         onClose={closeMobileMenu}
-        onWalletConnect={openConnectDialog}
+        onWalletConnect={openConnectModal}
       />
-      {isConnectDialogVisible ? (
-        <ConnectWalletDialog visible={isConnectDialogVisible} onClose={closeConnectDialog} />
-      ) : null}
       <AccountInfoSheet isOpen={isAccountInfoSheetOpen} onClose={closeAccountInfo} />
     </Root>
   );

src/components/Header/MobileMenu.tsx

@@ -1,19 +1,16 @@
 import React from "react";
-import { useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 import { observer } from "mobx-react-lite";
 
-import Text from "@components/Text";
 import { useStores } from "@src/stores";
-import { media } from "@src/themes/breakpoints";
 
 import Button from "../Button";
 import MenuOverlay from "../MenuOverlay";
 import SizedBox from "../SizedBox";
 import { SmartFlex } from "../SmartFlex";
 
-import ConnectedWalletButton from "./ConnectedWalletButton";
 import { MenuNav } from "./MenuNav";
+import WalletAddressButton from "./WalletAddressButton";
 
 interface IProps {
   isOpen: boolean;
@@ -23,8 +20,7 @@ interface IProps {
 }
 
 const MobileMenu: React.FC<IProps> = observer(({ isOpen, onAccountClick, onWalletConnect, onClose }) => {
-  const { accountStore, quickAssetsStore, mixPanelStore } = useStores();
-  const location = useLocation();
+  const { accountStore, quickAssetsStore } = useStores();
 
   const handleAccountClick = () => {
     onAccountClick();
@@ -36,9 +32,9 @@ const MobileMenu: React.FC<IProps> = observer(({ isOpen, onAccountClick, onWalle
     onClose();
   };
 
-  const renderWalletButton = () => {
+  const renderWalletAddressButton = () => {
     return accountStore.address ? (
-      <ConnectedWalletButtonStyled onClick={handleAccountClick} />
+      <WalletAddressButtonStyled onClick={handleAccountClick} />
     ) : (
       <Button green onClick={handleConnectWallet}>
         Connect wallet
@@ -57,7 +53,7 @@ const MobileMenu: React.FC<IProps> = observer(({ isOpen, onAccountClick, onWalle
           <Button data-onboarding="assets-mobile" onClick={() => quickAssetsStore.setQuickAssets(true)}>
             ASSETS
           </Button>
-          {renderWalletButton()}
+          {renderWalletAddressButton()}
         </FooterContainer>
       </Body>
     </MenuOverlay>
@@ -74,19 +70,6 @@ const Body = styled.div`
   background: ${({ theme }) => theme.colors.bgPrimary};
 `;
 
-const MenuItem = styled.div<{ isSelected?: boolean }>`
-  cursor: pointer;
-  padding: 12px 32px;
-
-  ${Text} {
-    width: fit-content;
-    color: ${({ theme, isSelected }) => (isSelected ? theme.colors.textPrimary : theme.colors.textSecondary)};
-    ${media.mobile} {
-      font-size: 16px;
-    }
-  }
-`;
-
 const Container = styled(SmartFlex)`
   flex-direction: column;
   background: ${({ theme }) => `${theme.colors.bgSecondary}`};
@@ -103,7 +86,7 @@ const FooterContainer = styled(SmartFlex)`
   width: 100%;
 `;
 
-const ConnectedWalletButtonStyled = styled(ConnectedWalletButton)`
+const WalletAddressButtonStyled = styled(WalletAddressButton)`
   width: 100%;
   height: 40px;
 `;

src/components/Header/ConnectedWalletButton.tsx → src/components/Header/WalletAddressButton.tsx

@@ -15,7 +15,7 @@ interface Props {
   onClick?: () => void;
 }
 
-const ConnectedWalletButton: React.FC<Props> = observer(({ isFocused, className, onClick }) => {
+const WalletAddressButton: React.FC<Props> = observer(({ isFocused, className, onClick }) => {
   const { accountStore } = useStores();
 
   return (
@@ -26,7 +26,7 @@ const ConnectedWalletButton: React.FC<Props> = observer(({ isFocused, className,
   );
 });
 
-export default ConnectedWalletButton;
+export default WalletAddressButton;
 
 const ArrowIconStyled = styled.img`
   transition: 0.4s;

src/components/MenuOverlay.tsx

@@ -22,6 +22,8 @@ const MenuOverlay: React.FC<IProps> = ({ isOpen, children, top = 0, offsetTop =
     };
   }, [isOpen]);
 
+  console.log(zIndex);
+
   return (
     <Root fullOffset={fullOffset} isOpen={isOpen} top={top} zIndex={zIndex}>
       {children}