Enhancements and Fixes for Suite application (#168)

* Msig minor bug fixes (#167) * fix: Update "platform" to "Network" in settings & rename route to "manage-multisig" * fix: Eliminate <div> within <p> bug & fetch aliases only for logged-in users * fix: close drawer when executing an action * fix: add handleCloseSidebar for desktop view (#169)
chain4travel · Oct 6, 2023 · 2039e10 · 2039e10
1 parent 4998168
commit 2039e10
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 26 deletions.
diff --git a/src/components/Footer/LoadWalletVersion.tsx b/src/components/Footer/LoadWalletVersion.tsx
@@ -10,7 +10,7 @@ const WalletVersionComponent = () => {
 
     return (
         <>
-            <div ref={ref} />
+            <span ref={ref} />
         </>
     )
 }

diff --git a/src/components/Navbar/LoginButton.tsx b/src/components/Navbar/LoginButton.tsx
@@ -15,21 +15,31 @@ import MHidden from '../@material-extend/MHidden'
 import { LoadAccountMenu } from '../LoadAccountMenu'
 import AliasPicker from './AliasPicker'
 
-export default function LoginIcon() {
+interface LoginIconProps {
+    handleCloseSidebar: () => void
+}
+
+export default function LoginButton({ handleCloseSidebar }: LoginIconProps) {
     const cAddress = useAppSelector(state => state.appConfig.walletStore?.activeWallet?.ethAddress)
     const auth = useAppSelector(state => state.appConfig.isAuth)
     const dispatch = useAppDispatch()
     const navigate = useNavigate()
     const account = useAppSelector(getAccount)
     const theme = useTheme()
     const logout = async () => {
+        handleCloseSidebar()
         await store.dispatch('logout')
         dispatch(updateAccount(null))
         dispatch(updateAuthStatus(false))
         dispatch(changeActiveApp('Network'))
         navigate('/')
     }
 
+    const navigateToSettings = () => {
+        navigate('/settings')
+        handleCloseSidebar()
+    }
+
     const handleKeyDown = e => {
         e.stopPropagation()
     }
@@ -38,7 +48,7 @@ export default function LoginIcon() {
         <>
             <MHidden width="smUp">
                 <MenuList sx={{ backgroundColor: 'transparent' }}>
-                    <MenuItem onClick={() => navigate('/settings')}>
+                    <MenuItem onClick={navigateToSettings}>
                         <IconButton>
                             <Icon path={mdiCogOutline} size={0.8} />
                         </IconButton>
@@ -67,10 +77,7 @@ export default function LoginIcon() {
                             label="beta"
                         />
                     </MenuItem>
-                    <MenuItem
-                        onClick={logout}
-                        sx={{ display: 'flex', justifyContent: 'space-between' }}
-                    >
+                    <MenuItem onClick={logout} sx={{ display: 'flex' }}>
                         <IconButton>
                             <Icon path={mdiLogout} size={0.8} />
                         </IconButton>

diff --git a/src/components/Navbar/NetworkSwitcher.tsx b/src/components/Navbar/NetworkSwitcher.tsx
@@ -21,7 +21,11 @@ import AddNewNetwork from './AddNewNetwork'
 import SelectedNetwork from './SelectNetwork'
 import useNetwork from '../../hooks/useNetwork'
 
-export default function NetworkSwitcher() {
+interface NetworkSwitcherProps {
+    handleCloseSidebar?: () => void
+}
+
+export default function NetworkSwitcher({ handleCloseSidebar }: NetworkSwitcherProps) {
     const {
         handleChangeNetwork,
         handleEditCustomNetwork,
@@ -38,6 +42,31 @@ export default function NetworkSwitcher() {
     } = useNetwork()
     const theme = useTheme()
 
+    const changeNetwork = networkName => {
+        handleChangeNetwork(networkName)
+        handleCloseSidebar()
+    }
+
+    const editNetwork = () => {
+        handleEditCustomNetwork()
+        handleCloseSidebar()
+    }
+
+    const removeNetwork = () => {
+        handleRemoveCustomNetwork()
+        handleCloseSidebar()
+    }
+
+    const openModal = () => {
+        handleOpenModal()
+        handleCloseSidebar()
+    }
+
+    const closeModal = () => {
+        handleCloseModal()
+        handleCloseSidebar()
+    }
+
     return (
         <>
             {/* Mobile */}
@@ -62,7 +91,7 @@ export default function NetworkSwitcher() {
                                 alignItems: 'baseline',
                                 color: theme.palette.text.primary,
                             }}
-                            onClick={() => handleChangeNetwork(network.name)}
+                            onClick={() => changeNetwork(network.name)}
                         >
                             <Stack
                                 direction="row"
@@ -93,10 +122,10 @@ export default function NetworkSwitcher() {
                                 <Box sx={{ flexGrow: 1 }} />
                                 {!network.readonly && network.url !== activeNetwork.url && (
                                     <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-                                        <IconButton onClick={() => handleEditCustomNetwork()}>
+                                        <IconButton onClick={editNetwork}>
                                             <Icon path={mdiPencilOutline} size={0.8} />
                                         </IconButton>
-                                        <IconButton onClick={() => handleRemoveCustomNetwork()}>
+                                        <IconButton onClick={removeNetwork}>
                                             <Icon path={mdiDeleteOutline} size={0.8} />
                                         </IconButton>
                                     </Box>
@@ -122,7 +151,7 @@ export default function NetworkSwitcher() {
                         </MenuItem>
                     ))}
                     <MenuItem
-                        onClick={handleOpenModal}
+                        onClick={openModal}
                         sx={{
                             typography: 'body1',
                             width: '100%',
@@ -136,11 +165,11 @@ export default function NetworkSwitcher() {
                         </IconButton>
                     </MenuItem>
                 </MenuList>
-                <DialogAnimate open={open} onClose={handleCloseModal}>
+                <DialogAnimate open={open} onClose={closeModal}>
                     <DialogTitle>Add New Network</DialogTitle>
                     <AddNewNetwork
                         networks={networks}
-                        handleClose={handleCloseModal}
+                        handleClose={closeModal}
                         switchNetwork={switchNetwork}
                         edit={edit}
                         networkToEdit={networkToEdit}

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -49,6 +49,11 @@ export default function Navbar() {
         }
     }
 
+    const navigateToLogin = () => {
+        navigate('/login')
+        handleCloseSidebar()
+    }
+
     useIdleTimer({
         onIdle,
         timeout: TIMEOUT_DURATION,
@@ -84,7 +89,7 @@ export default function Navbar() {
                     <MHidden width="smUp">
                         {!auth && (
                             <Box
-                                onClick={() => navigate('/login')}
+                                onClick={navigateToLogin}
                                 sx={{
                                     display: 'flex',
                                     alignItems: 'center',
@@ -120,7 +125,7 @@ export default function Navbar() {
                                 >
                                     <Box>
                                         <ThemeSwitcher />
-                                        <IconButton onClick={() => navigate('/login')}>
+                                        <IconButton onClick={navigateToLogin}>
                                             <Icon path={mdiWalletOutline} size={1} />
                                         </IconButton>
                                     </Box>
@@ -129,9 +134,11 @@ export default function Navbar() {
                                         <Icon path={mdiClose} size={1} />
                                     </MIconButton>
                                 </Stack>
-                                {activeNetwork && <NetworkSwitcher />}
+                                {activeNetwork && (
+                                    <NetworkSwitcher handleCloseSidebar={handleCloseSidebar} />
+                                )}
                             </Box>
-                            {auth && <LoginButton />}
+                            {auth && <LoginButton handleCloseSidebar={handleCloseSidebar} />}
                         </Drawer>
                         <MIconButton onClick={handleOpenSidebar}>
                             <Icon path={mdiMenu} size={1} />
@@ -160,7 +167,7 @@ export default function Navbar() {
                             ) : (
                                 <>
                                     <AliasPicker />
-                                    <LoginButton />
+                                    <LoginButton handleCloseSidebar={handleCloseSidebar} />
                                 </>
                             )}
                         </>

diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts
@@ -34,6 +34,7 @@ const useNetwork = (): {
     const [open, setOpen] = useState(false)
     const [edit, setEdit] = useState(false)
     const [networkToEdit, setNetworkToEdit] = useState('')
+    const isAuth = useAppSelector(state => state.appConfig.isAuth)
 
     const networks: AvaNetwork[] = useAppSelector(getNetworks)
     const activeNetwork = useAppSelector<AvaNetwork>(getActiveNetwork)
@@ -56,7 +57,7 @@ const useNetwork = (): {
             }
             await store.dispatch('Network/setNetwork', network)
             dispatch(changeNetworkStatus(Status.SUCCEEDED))
-            await store.dispatch('fetchMultiSigAliases', { disable: false })
+            if (isAuth) await store.dispatch('fetchMultiSigAliases', { disable: false })
             dispatch(updateShowButton())
             dispatch(
                 updateNotificationStatus({

diff --git a/src/layout/RoutesSuite.tsx b/src/layout/RoutesSuite.tsx
@@ -75,7 +75,7 @@ export default function RoutesSuite() {
                     <Route path="/settings" element={<SettingsLayout />}>
                         <Route index element={<Settings />} />
                         <Route path="save-account" element={<Settings />} />
-                        <Route path="create-multisig" element={<MultisigWallet />} />
+                        <Route path="manage-multisig" element={<MultisigWallet />} />
                     </Route>
                 </Route>
                 <Route path="/login" element={<LoginPage />} />

diff --git a/src/views/settings/Links.tsx b/src/views/settings/Links.tsx
@@ -1,10 +1,11 @@
-
 import React, { useEffect, useState } from 'react'
 
 import Box from '@mui/material/Box'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 import { useNavigate } from 'react-router'
+import { changeActiveApp } from '../../redux/slices/app-config'
+import { useAppDispatch } from '../../hooks/reduxHooks'
 
 function a11yProps(index: number) {
     return {
@@ -14,15 +15,18 @@ function a11yProps(index: number) {
 }
 
 export default function Links() {
+    const dispatch = useAppDispatch()
     const [value, setValue] = useState(0)
     const navigate = useNavigate()
     const path = window.location.pathname
     const handleChange = (event: React.SyntheticEvent, newValue: number) => setValue(newValue)
     useEffect(() => {
         if (path === '/settings') setValue(0)
-        else if (path === '/settings/create-multisig') setValue(1)
+        else if (path === '/settings/manage-multisig') setValue(1)
         else setValue(0)
-    }, [path])
+        dispatch(changeActiveApp('Network'))
+    }, [path]) // eslint-disable-line react-hooks/exhaustive-deps
+
     return (
         <Box sx={{ display: 'flex', cursor: 'pointer', width: '100%', maxWidth: '1536px' }}>
             <Tabs
@@ -46,11 +50,11 @@ export default function Links() {
                     className="tab"
                     disableRipple
                     label="Multisignature Wallet"
-                    onClick={() => navigate('create-multisig')}
+                    onClick={() => navigate('manage-multisig')}
                     {...a11yProps(1)}
                     sx={{ '&::after': { display: value === 1 ? 'block' : 'none' } }}
                 />
             </Tabs>
         </Box>
     )
-}
+}