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

update network switcher placment #173

Merged
merged 1 commit into from
Dec 18, 2023
Merged

update network switcher placment #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 16 additions & 0 deletions src/components/LongString.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Typography } from '@mui/material'
import React from 'react'
import { displayFirstPartLongString, displaySecondPartLongString } from '../utils/display-utils'
const LongString = ({ value }) => {
const content =
value && value.length < 12 ? (
<Typography>{value}</Typography>
) : (
<Typography>
{displayFirstPartLongString(value)}&hellip;
{displaySecondPartLongString(value)}
</Typography>
)
return <>{content}</>
}
export default LongString
134 changes: 85 additions & 49 deletions src/components/Navbar/LoginButton.tsx → src/components/Navbar/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
import { mdiCogOutline, mdiLogout } from '@mdi/js'
import { mdiCog, mdiLogout } from '@mdi/js'
import Icon from '@mdi/react'
import { Chip, IconButton, MenuItem, MenuList, Select, Typography, useTheme } from '@mui/material'
import { default as React } from 'react'
import { Chip, MenuItem, MenuList, Select, Typography, useTheme } from '@mui/material'
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import store from 'wallet/store'
import {
getNameOfMultiSigWallet,
getPchainAddress,
isMultiSigWallet,
} from '../../helpers/walletStore'
import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
import { changeActiveApp, getAccount, updateAccount } from '../../redux/slices/app-config'
import { updateAuthStatus } from '../../redux/slices/utils'
import MHidden from '../@material-extend/MHidden'
import { LoadAccountMenu } from '../LoadAccountMenu'
import AliasPicker from './AliasPicker'
import ThemeSwitcher from './ThemeSwitcher'

interface LoginIconProps {
handleCloseSidebar: () => void
}

export default function LoginButton({ handleCloseSidebar }: LoginIconProps) {
const cAddress = useAppSelector(state => state.appConfig.walletStore?.activeWallet?.ethAddress)
export default function Account({ handleCloseSidebar }: LoginIconProps) {
const auth = useAppSelector(state => state.appConfig.isAuth)
const [_, setWalletName] = React.useState('')

Check warning on line 26 in src/components/Navbar/Account.tsx

View workflow job for this annotation

GitHub Actions / yarn-build 

'_' is assigned a value but never used
const dispatch = useAppDispatch()
const navigate = useNavigate()
const account = useAppSelector(getAccount)
Expand All @@ -35,6 +41,11 @@
navigate('/settings')
handleCloseSidebar()
}
useEffect(() => {
if (isMultiSigWallet()) {
setWalletName(getNameOfMultiSigWallet() || getPchainAddress())
} else setWalletName(getPchainAddress())
}, [auth])

const handleKeyDown = e => {
e.stopPropagation()
Expand All @@ -44,17 +55,20 @@
<>
<MHidden width="smUp">
<MenuList sx={{ backgroundColor: 'transparent' }}>
<MenuItem onClick={navigateToSettings}>
<IconButton>
<Icon path={mdiCogOutline} size={0.8} />
</IconButton>
<MenuItem
sx={{
typography: 'body2',
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
gap: '8px',
}}
onClick={navigateToSettings}
>
<Icon path={mdiCog} size={0.8} />
<Typography variant="body1">Settings</Typography>
</MenuItem>
{auth && (
<MenuItem>
<AliasPicker />
</MenuItem>
)}
{auth && <AliasPicker />}
<MenuItem>
<LoadAccountMenu type="kyc" />
</MenuItem>
Expand All @@ -67,27 +81,44 @@
position: 'absolute',
fontSize: '12px',
height: '16px',
top: 0,
right: { xs: '0.3rem', sm: 0 },
top: '5px',
width: '50px',
left: 'calc(100% - 55px)',
}}
label="beta"
/>
</MenuItem>
<MenuItem onClick={logout} sx={{ display: 'flex' }}>
<IconButton>
<Icon path={mdiLogout} size={0.8} />
</IconButton>
<Typography variant="body1">logout</Typography>
<MenuItem
onClick={logout}
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
gap: '8px',
}}
>
<Icon path={mdiLogout} size={0.8} />
<Typography variant="body2">Logout</Typography>
</MenuItem>
</MenuList>
</MHidden>
<MHidden width="smDown">
<>
{cAddress && (
{auth && (
<Select
value={!account ? cAddress : <LoadAccountMenu type="" />}
value={
!account ? (
<Typography>Account</Typography>
) : (
<LoadAccountMenu type="" />
)
}
renderValue={() =>
account ? <LoadAccountMenu type="" /> : `0x${cAddress}`
account ? (
<LoadAccountMenu type="" />
) : (
<Typography>Account</Typography>
)
}
sx={{
maxWidth: '13rem',
Expand All @@ -98,23 +129,6 @@
handleKeyDown(e)
}}
>
<MenuItem
onClick={() => navigate('/settings')}
onKeyDown={e => {
handleKeyDown(e)
}}
sx={{
typography: 'body2',
width: '100%',
maxWidth: '326px',
justifyContent: { xs: 'flex-end', sm: 'center' },
}}
>
<IconButton>
<Icon path={mdiCogOutline} size={0.7} />
</IconButton>
<Typography variant="body1">Settings</Typography>
</MenuItem>
<MenuItem
onKeyDown={e => {
handleKeyDown(e)
Expand All @@ -141,13 +155,36 @@
position: 'absolute',
fontSize: '12px',
height: '16px',
top: 0,
right: { xs: '0.3rem', sm: 0 },
top: '5px',
width: '50px',
left: 'calc(100% - 55px)',
}}
label="beta"
/>
<LoadAccountMenu type="kyb" />
</MenuItem>
<MenuItem
onClick={() => navigate('/settings')}
onKeyDown={e => {
handleKeyDown(e)
}}
sx={{
typography: 'body2',
width: '100%',
maxWidth: '326px',
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
gap: '8px',
}}
>
<Icon path={mdiCog} size={1} />
<Typography variant="body2">Settings</Typography>
</MenuItem>
<AliasPicker />
<MenuItem>
<ThemeSwitcher />
</MenuItem>
<MenuItem
onKeyDown={e => handleKeyDown(e)}
onClick={logout}
Expand All @@ -156,14 +193,13 @@
width: '100%',
maxWidth: '326px',
display: 'flex',
justifyContent: { xs: 'flex-end', sm: 'center' },
gap: '0.3rem',
alignItems: 'center',
justifyContent: 'start',
gap: '8px',
}}
>
<IconButton>
<Icon path={mdiLogout} size={0.7} />
</IconButton>
<Typography variant="body1">logout</Typography>
<Icon path={mdiLogout} size={1} />
<Typography variant="body2">Logout</Typography>
</MenuItem>
</Select>
)}
Expand Down
28 changes: 19 additions & 9 deletions src/components/Navbar/AliasPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import { mdiClose } from '@mdi/js'
import { mdiClose, mdiOpenInNew } from '@mdi/js'
import Icon from '@mdi/react'
import { Box, DialogContent, DialogTitle, Divider, Typography, IconButton } from '@mui/material'
import {
Box,
DialogContent,
DialogTitle,
Divider,
IconButton,
MenuItem,
Typography,
} from '@mui/material'
import React, { useEffect, useState } from 'react'
import store from 'wallet/store'
import { getMultisigAliases } from '../../api'
import { useAppSelector } from '../../hooks/reduxHooks'
import { getShowButton } from '../../redux/slices/app-config'
import DialogAnimate from '../Animate/DialogAnimate'
import MainButton from '../MainButton'
import LoadMyKeysComponent from './LoadMyKeysComponent'
import LoadSaveKeysComponent from './LoadSaveKeysComponent'

Expand All @@ -31,14 +38,17 @@ const AliasPicker = () => {
}, [showButtonState])
if (!load) return <></>
return (
<>
<MainButton
variant="outlined"
<MenuItem
sx={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '8px' }}
>
<Icon path={mdiOpenInNew} size={1} />
<Typography
variant="body2"
onClick={handleOpenModal}
style={{ width: '100%', whiteSpace: 'nowrap', padding: '0.5rem 1rem' }}
style={{ width: '100%', whiteSpace: 'nowrap' }}
>
Switch Wallet
</MainButton>
</Typography>
<DialogAnimate open={open} onClose={handleCloseModal}>
<DialogTitle sx={{ m: 0, p: 2 }}>
<Typography variant="h4" component="span">
Expand Down Expand Up @@ -74,7 +84,7 @@ const AliasPicker = () => {
<LoadMyKeysComponent />
</DialogContent>
</DialogAnimate>
</>
</MenuItem>
)
}

Expand Down
15 changes: 9 additions & 6 deletions src/components/Navbar/LoadMyKeysComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useRef } from 'react'
import { Box } from '@mui/material'
import { styled } from '@mui/system'
import React, { useEffect, useRef } from 'react'
import { mountKyesComponent } from 'wallet/mountKyesComponent'
import { useAppDispatch } from '../../hooks/reduxHooks'
import { updateNotificationStatus } from '../../redux/slices/app-config'
import { useEffectOnce } from '../../hooks/useEffectOnce'
import { styled } from '@mui/system'
import { Box } from '@mui/material'
import { updateNotificationStatus, updatePchainAddress } from '../../redux/slices/app-config'

const StyledBox = styled(Box)(({ theme }) => ({
display: 'flex',
Expand Down Expand Up @@ -40,13 +40,16 @@
const LoadMyKeysComponent = () => {
const ref = useRef(null)
const dispatch = useAppDispatch()

const [walletSwitched, setWalletSwitched] = React.useState('')
const dispatchNotification = ({ message, type }) =>
dispatch(updateNotificationStatus({ message, severity: type }))
useEffectOnce(() => {
mountKyesComponent(ref.current, { dispatchNotification })
mountKyesComponent(ref.current, { dispatchNotification, setWalletSwitched })
}) // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
dispatch(updatePchainAddress(walletSwitched))
}, [walletSwitched])

Check warning on line 52 in src/components/Navbar/LoadMyKeysComponent.tsx

View workflow job for this annotation

GitHub Actions / yarn-build 

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array
return (
<StyledBox>
<div ref={ref} />
Expand Down
31 changes: 31 additions & 0 deletions src/components/Navbar/LoggedInAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { mdiWalletOutline } from '@mdi/js'
import Icon from '@mdi/react'
import React, { useEffect, useState } from 'react'
import {
getNameOfMultiSigWallet,
getPchainAddress,
isMultiSigWallet,
} from '../../helpers/walletStore'
import { useAppSelector } from '../../hooks/reduxHooks'
import { getPChainAddress } from '../../redux/slices/app-config'
import { getActiveNetwork } from '../../redux/slices/network'
import LongString from '../LongString'

const LoggedInAccount = () => {
const [walletName, setWalletName] = useState('')
const pChainAddress = useAppSelector(getPChainAddress)
const activeNetwork = useAppSelector(getActiveNetwork)

useEffect(() => {
if (isMultiSigWallet()) {
setWalletName(getNameOfMultiSigWallet() || getPchainAddress()[0])
} else setWalletName(getPchainAddress()[0])
}, [pChainAddress, activeNetwork])
return (
<>
<Icon path={mdiWalletOutline} size={1} />
<LongString value={walletName} />
</>
)
}
export default LoggedInAccount
Loading
Loading