feat: refactoring related to wallet connection

Author: EchoDex

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 { 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) {
@@ -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 renamed to 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/Header/ConnectedWallet.tsx renamed to src/components/WalletButton.tsx

@@ -16,9 +16,9 @@ import BN from "@src/utils/BN";
 import { getExplorerLinkByAddress } from "@src/utils/getExplorerLink";
 import { useStores } from "@stores";
 
-import ConnectedWalletButton from "./ConnectedWalletButton";
+import WalletAddressButton from "./Header/WalletAddressButton";
 
-const ConnectedWallet: React.FC = observer(() => {
+const WalletButton: React.FC = observer(() => {
   const { accountStore, notificationStore, balanceStore } = useStores();
   const { disconnect: disconnectWallet } = useWallet();
 
@@ -89,12 +89,12 @@ const ConnectedWallet: React.FC = observer(() => {
         </Column>
       }
     >
-      <ConnectedWalletButton isFocused={isFocused} />
+      <WalletAddressButton isFocused={isFocused} />
     </Tooltip>
   );
 });
 
-export default ConnectedWallet;
+export default WalletButton;
 
 const Icon = styled.img`
   width: 24px;

src/hooks/useWallet.ts

@@ -7,7 +7,7 @@ import { useStores } from "@src/stores";
 export const useWallet = () => {
   const { fuel } = useFuel();
   const { accountStore } = useStores();
-  const { connect, isConnecting } = useConnectUI();
+  const { connect, isConnecting, dialog } = useConnectUI();
 
   const [isConnected, setIsConnected] = useState(false);
   const [wallet, setWallet] = useState<Account | null>(null);

src/screens/ConnectWallet/ConnectWalletDialog.tsx

@@ -16,8 +16,6 @@ type IProps = Omit<IDialogPropTypes, "onClose"> & {
   visible: boolean;
 };
 
-// TODO: refactor account store, minting and save address in local storage
-
 const ConnectWalletDialog: React.FC<IProps> = observer(({ onClose, visible }) => {
   const { settingsStore, mixPanelStore } = useStores();
   const theme = useTheme();
@@ -61,6 +59,8 @@ const ConnectWalletDialog: React.FC<IProps> = observer(({ onClose, visible }) =>
     }
   };
 
+  if (!visible) return;
+
   return (
     <Dialog
       title={

src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx

@@ -12,6 +12,7 @@ import Slider from "@components/Slider";
 import Text, { TEXT_TYPES } from "@components/Text";
 import TokenInput from "@components/TokenInput";
 import Button, { ButtonGroup } from "@src/components/Button";
+import { ConnectWalletButton } from "@src/components/ConnectWalletButton";
 import SizedBox from "@src/components/SizedBox";
 import { SmartFlex } from "@src/components/SmartFlex";
 import { DEFAULT_DECIMALS, MINIMAL_ETH_REQUIRED } from "@src/constants";
@@ -206,8 +207,8 @@ const CreateOrder: React.FC = observer(() => {
           <TokenInput
             amount={vm.inputPrice}
             decimals={DEFAULT_DECIMALS}
-            displayDecimals={priceDisplayDecimals}
             disabled={isInputPriceDisabled}
+            displayDecimals={priceDisplayDecimals}
             label="Price"
             setAmount={handleSetPrice}
             onBlur={vm.setActiveInput}
@@ -264,7 +265,7 @@ const CreateOrder: React.FC = observer(() => {
         </SliderContainer>
         {renderOrderDetails()}
       </ParamsContainer>
-      {renderButton()}
+      <ConnectWalletButton connectText="Connect wallet to trade">{renderButton()}</ConnectWalletButton>
 
       <OrderTypeSheet isOpen={isOrderTooltipOpen} onClose={closeOrderTooltip} />
     </Root>