diff --git a/src/components/Footer/LoadWalletVersion.tsx b/src/components/Footer/LoadWalletVersion.tsx index 89f2eec5..7c70f12f 100644 --- a/src/components/Footer/LoadWalletVersion.tsx +++ b/src/components/Footer/LoadWalletVersion.tsx @@ -10,7 +10,7 @@ const WalletVersionComponent = () => { return ( <> -
+ ) } diff --git a/src/components/Navbar/LoginButton.tsx b/src/components/Navbar/LoginButton.tsx index ff20461c..17f6b027 100644 --- a/src/components/Navbar/LoginButton.tsx +++ b/src/components/Navbar/LoginButton.tsx @@ -15,7 +15,11 @@ 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() @@ -23,6 +27,7 @@ export default function LoginIcon() { const account = useAppSelector(getAccount) const theme = useTheme() const logout = async () => { + handleCloseSidebar() await store.dispatch('logout') dispatch(updateAccount(null)) dispatch(updateAuthStatus(false)) @@ -30,6 +35,11 @@ export default function LoginIcon() { navigate('/') } + const navigateToSettings = () => { + navigate('/settings') + handleCloseSidebar() + } + const handleKeyDown = e => { e.stopPropagation() } @@ -38,7 +48,7 @@ export default function LoginIcon() { <> - navigate('/settings')}> + @@ -67,10 +77,7 @@ export default function LoginIcon() { label="beta" /> - + diff --git a/src/components/Navbar/NetworkSwitcher.tsx b/src/components/Navbar/NetworkSwitcher.tsx index 1a537064..9b5d25ba 100644 --- 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)} > {!network.readonly && network.url !== activeNetwork.url && ( - handleEditCustomNetwork()}> + - handleRemoveCustomNetwork()}> + @@ -122,7 +151,7 @@ export default function NetworkSwitcher() { ))} - + Add New Network { + navigate('/login') + handleCloseSidebar() + } + useIdleTimer({ onIdle, timeout: TIMEOUT_DURATION, @@ -84,7 +89,7 @@ export default function Navbar() { {!auth && ( navigate('/login')} + onClick={navigateToLogin} sx={{ display: 'flex', alignItems: 'center', @@ -120,7 +125,7 @@ export default function Navbar() { > - navigate('/login')}> + @@ -129,9 +134,11 @@ export default function Navbar() { - {activeNetwork && } + {activeNetwork && ( + + )} - {auth && } + {auth && } @@ -160,7 +167,7 @@ export default function Navbar() { ) : ( <> - + )} diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts index 113da5e1..feb37fe3 100644 --- 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(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 index 61050483..4ca54c5f 100644 --- a/src/layout/RoutesSuite.tsx +++ b/src/layout/RoutesSuite.tsx @@ -75,7 +75,7 @@ export default function RoutesSuite() { }> } /> } /> - } /> + } /> } /> diff --git a/src/views/settings/Links.tsx b/src/views/settings/Links.tsx index 43423669..9bea9591 100644 --- 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 ( navigate('create-multisig')} + onClick={() => navigate('manage-multisig')} {...a11yProps(1)} sx={{ '&::after': { display: value === 1 ? 'block' : 'none' } }} /> ) -} \ No newline at end of file +}