Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)}… | ||
| {displaySecondPartLongString(value)} | ||
| </Typography> | ||
| ) | ||
| return <>{content}</> | ||
| } | ||
| export default LongString |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| import { mdiCogOutline, mdiLogout } from '@mdi/js' | ||
| import Icon from '@mdi/react' | ||
| import { Chip, IconButton, 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 Account({ handleCloseSidebar }: LoginIconProps) { | ||
| const auth = useAppSelector(state => state.appConfig.isAuth) | ||
| const [walletName, setWalletName] = React.useState('') | ||
| 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() | ||
| } | ||
| useEffect(() => { | ||
| if (isMultiSigWallet()) { | ||
| setWalletName(getNameOfMultiSigWallet() || getPchainAddress()) | ||
| } else setWalletName(getPchainAddress()) | ||
| }, [auth]) | ||
|
|
||
| const handleKeyDown = e => { | ||
| e.stopPropagation() | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <MHidden width="smUp"> | ||
| <MenuList sx={{ backgroundColor: 'transparent' }}> | ||
| <MenuItem onClick={navigateToSettings}> | ||
| <IconButton> | ||
| <Icon path={mdiCogOutline} size={0.8} /> | ||
| </IconButton> | ||
| <Typography variant="body1">Settings</Typography> | ||
| </MenuItem> | ||
| {auth && <AliasPicker />} | ||
| <MenuItem> | ||
| <LoadAccountMenu type="kyc" /> | ||
| </MenuItem> | ||
| <MenuItem sx={{ position: 'relative' }}> | ||
| <LoadAccountMenu type="kyb" /> | ||
| <Chip | ||
| color="secondary" | ||
| size="small" | ||
| sx={{ | ||
| position: 'absolute', | ||
| fontSize: '12px', | ||
| height: '16px', | ||
| top: 0, | ||
| right: { xs: '0.3rem', sm: 0 }, | ||
| }} | ||
| label="beta" | ||
| /> | ||
| </MenuItem> | ||
| <MenuItem onClick={logout} sx={{ display: 'flex' }}> | ||
| <IconButton> | ||
| <Icon path={mdiLogout} size={0.8} /> | ||
| </IconButton> | ||
| <Typography variant="body1">logout</Typography> | ||
| </MenuItem> | ||
| </MenuList> | ||
| </MHidden> | ||
| <MHidden width="smDown"> | ||
| <> | ||
| {auth && ( | ||
| <Select | ||
| value={ | ||
| !account ? ( | ||
| <Typography>Account</Typography> | ||
| ) : ( | ||
| <LoadAccountMenu type="" /> | ||
| ) | ||
| } | ||
| renderValue={() => | ||
| account ? ( | ||
| <LoadAccountMenu type="" /> | ||
| ) : ( | ||
| <Typography>Account</Typography> | ||
| ) | ||
| } | ||
| sx={{ | ||
| maxWidth: '13rem', | ||
| '.MuiOutlinedInput-notchedOutline': { border: 'none' }, | ||
| '.MuiSvgIcon-root': { color: theme.palette.text.primary }, | ||
| }} | ||
| onKeyDown={e => { | ||
| handleKeyDown(e) | ||
| }} | ||
| > | ||
| <MenuItem | ||
| onKeyDown={e => { | ||
| handleKeyDown(e) | ||
| }} | ||
| sx={{ typography: 'body2', width: '100%', maxWidth: '326px' }} | ||
| > | ||
| <LoadAccountMenu type="kyc" /> | ||
| </MenuItem> | ||
| <MenuItem | ||
| onKeyDown={e => { | ||
| handleKeyDown(e) | ||
| }} | ||
| sx={{ | ||
| typography: 'body1', | ||
| width: '100%', | ||
| maxWidth: '326px', | ||
| position: 'relative', | ||
| }} | ||
| > | ||
| <Chip | ||
| color="secondary" | ||
| size="small" | ||
| sx={{ | ||
| position: 'absolute', | ||
| fontSize: '12px', | ||
| height: '16px', | ||
| top: 0, | ||
| right: { xs: '0.3rem', sm: 0 }, | ||
| }} | ||
| label="beta" | ||
| /> | ||
| <LoadAccountMenu type="kyb" /> | ||
| </MenuItem> | ||
| <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> | ||
| <AliasPicker /> | ||
| <MenuItem> | ||
| <ThemeSwitcher /> | ||
| </MenuItem> | ||
| <MenuItem | ||
| onKeyDown={e => handleKeyDown(e)} | ||
| onClick={logout} | ||
| sx={{ | ||
| typography: 'body2', | ||
| width: '100%', | ||
| maxWidth: '326px', | ||
| display: 'flex', | ||
| justifyContent: { xs: 'flex-end', sm: 'center' }, | ||
| gap: '0.3rem', | ||
| }} | ||
| > | ||
| <IconButton> | ||
| <Icon path={mdiLogout} size={0.7} /> | ||
| </IconButton> | ||
| <Typography variant="body1">logout</Typography> | ||
| </MenuItem> | ||
| </Select> | ||
| )} | ||
| </> | ||
| </MHidden> | ||
| </> | ||
| ) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.