Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancements and Fixes for Suite application #168

Merged
merged 2 commits into from
Oct 6, 2023
Merged

Enhancements and Fixes for Suite application #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f7e45c
Msig minor bug fixes (#167)
Ayagoumi Oct 2, 2023
dc6e944
fix: add handleCloseSidebar for desktop view (#169)
Ayagoumi Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Footer/LoadWalletVersion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const WalletVersionComponent = () => {

return (
<>
<div ref={ref} />
<span ref={ref} />
</>
)
}
Expand Down
19 changes: 13 additions & 6 deletions src/components/Navbar/LoginButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
43 changes: 36 additions & 7 deletions src/components/Navbar/NetworkSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 */}
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand All @@ -122,7 +151,7 @@ export default function NetworkSwitcher() {
</MenuItem>
))}
<MenuItem
onClick={handleOpenModal}
onClick={openModal}
sx={{
typography: 'body1',
width: '100%',
Expand All @@ -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}
Expand Down
17 changes: 12 additions & 5 deletions src/components/Navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ export default function Navbar() {
}
}

const navigateToLogin = () => {
navigate('/login')
handleCloseSidebar()
}

useIdleTimer({
onIdle,
timeout: TIMEOUT_DURATION,
Expand Down Expand Up @@ -84,7 +89,7 @@ export default function Navbar() {
<MHidden width="smUp">
{!auth && (
<Box
onClick={() => navigate('/login')}
onClick={navigateToLogin}
sx={{
display: 'flex',
alignItems: 'center',
Expand Down Expand Up @@ -120,7 +125,7 @@ export default function Navbar() {
>
<Box>
<ThemeSwitcher />
<IconButton onClick={() => navigate('/login')}>
<IconButton onClick={navigateToLogin}>
<Icon path={mdiWalletOutline} size={1} />
</IconButton>
</Box>
Expand All @@ -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} />
Expand Down Expand Up @@ -160,7 +167,7 @@ export default function Navbar() {
) : (
<>
<AliasPicker />
<LoginButton />
<LoginButton handleCloseSidebar={handleCloseSidebar} />
</>
)}
</>
Expand Down
3 changes: 2 additions & 1 deletion src/hooks/useNetwork.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion src/layout/RoutesSuite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />} />
Expand Down
14 changes: 9 additions & 5 deletions src/views/settings/Links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
Expand All @@ -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>
)
}
}
Loading