Skip to content

Commit

Permalink
refactor: minor styling and refactor in menu transitions (#1657)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AMIRKHANEF
AMIRKHANEF authored Nov 16, 2024
1 parent ed9d845 commit f061cf6
Show file tree
Hide file tree
Showing 11 changed files with 275 additions and 282 deletions.
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { AccountContext, ActionContext, Warning } from '../../components';
import { useAccountAssets, useBalances, useCurrency, useFullscreen, useInfo, usePrices, useTokenPrice, useTranslation } from '../../hooks';
import { getValue } from '../../popup/account/util';
import HistoryModal from '../../popup/history/modal/HistoryModal';
import { AccountLabel } from '../../popup/home/AccountLabel';
import AccountLabel from '../../popup/home/AccountLabel';
import ReceiveModal from '../../popup/receive/ReceiveModal';
import { ASSET_HUBS, GOVERNANCE_CHAINS, STAKING_CHAINS } from '../../util/constants';
import getParentNameSuri from '../../util/getParentNameSuri';
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import React, { useContext, useMemo, useState } from 'react';
import { AccountContext } from '../../../components';
import { useAccountAssets, useChain } from '../../../hooks';
import QuickActionFullScreen from '../../../partials/QuickActionFullScreen';
import { AccountLabel } from '../../../popup/home/AccountLabel';
import AccountLabel from '../../../popup/home/AccountLabel';
import getParentNameSuri from '../../../util/getParentNameSuri';
import AccountInformationForHome from './AccountInformationForHome';

Expand Down
4 changes: 3 additions & 1 deletion packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ interface Props {
minWidth?: string;
}

export default function Currency ({ color, fontSize = '22px', height, minWidth, dialogLeft=260 }: Props): React.ReactElement {
function Currency ({ color, fontSize = '22px', height, minWidth, dialogLeft=260 }: Props): React.ReactElement {
// export default function Currency ({ color, fontSize = '22px' }: Props): React.ReactElement {
const theme = useTheme();

Expand Down Expand Up @@ -106,3 +106,5 @@ export default function Currency ({ color, fontSize = '22px', height, minWidth,
</>
);
}

export default React.memo(Currency);
271 changes: 134 additions & 137 deletions packages/extension-polkagate/src/partials/AccountMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@

/* eslint-disable react/jsx-max-props-per-line */

import type { TransitionProps } from '@mui/material/transitions';
import type { HexString } from '@polkadot/util/types';

import { faAddressCard, faGem } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Close as CloseIcon } from '@mui/icons-material';
import { Divider, Grid, IconButton, Slide, useTheme } from '@mui/material';
import { Dialog, Divider, Grid, IconButton, Slide, useTheme } from '@mui/material';
import React, { useCallback, useContext, useState } from 'react';

import { ActionContext, GenesisHashOptionsContext, Identity, MenuItem, RemoteNodeSelector, SelectChain, SocialRecoveryIcon, VaadinIcon } from '../components';
Expand All @@ -22,10 +23,13 @@ interface Props {
setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;
isMenuOpen: boolean;
address: string;
noMargin?: boolean;
}

function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): React.ReactElement<Props> {
const Transition = React.forwardRef(function Transition (props: TransitionProps & { children: React.ReactElement<unknown>;}, ref: React.Ref<unknown>) {
return <Slide direction='up' ref={ref} {...props} />;
});

function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const theme = useTheme();
const options = useContext(GenesisHashOptionsContext);
Expand All @@ -35,7 +39,6 @@ function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): Re
const [genesisHash, setGenesis] = useState<string | undefined>();

const onAction = useContext(ActionContext);
const containerRef = React.useRef(null);
const hasPrivateKey = !(account?.isExternal || account?.isHardware);

const onForgetAccount = useCallback(() => {
Expand Down Expand Up @@ -93,143 +96,137 @@ function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): Re

const vaadinIconStyle = { color: `${theme.palette.text.primary}`, height: '18px' };

const movingParts = (
<Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt='46px' px='46px' sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'>
<Grid container item justifyContent='center' my='12px' pl='8px'>
<Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={35} showSocial={false} subIdOnly />
</Grid>
<MenuSeparator />
<MenuItem
disabled={isDisabled(IDENTITY_CHAINS)}
iconComponent={
<FontAwesomeIcon
color={isDisabled(IDENTITY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}
fontSize={19}
icon={faAddressCard}
return (
<Dialog
TransitionComponent={Transition}
fullScreen
open={isMenuOpen}
>
<Grid bgcolor='divider' container height='100%' width='357px' zIndex={10}>
<Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt='46px' px='46px' sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'>
<Grid container item justifyContent='center' my='12px' pl='8px'>
<Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={35} showSocial={false} subIdOnly />
</Grid>
<MenuSeparator />
<MenuItem
disabled={isDisabled(IDENTITY_CHAINS)}
iconComponent={
<FontAwesomeIcon
color={isDisabled(IDENTITY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}
fontSize={19}
icon={faAddressCard}
/>
}
onClick={onManageId}
text={t('Manage identity')}
withHoverEffect
/>
}
onClick={onManageId}
text={t('Manage identity')}
withHoverEffect
/>
<MenuItem
disabled={isDisabled(PROXY_CHAINS)}
iconComponent={
<VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
}
onClick={onManageProxies}
text={t('Manage proxies')}
withHoverEffect
/>
<MenuItem
disabled={isDisabled(SOCIAL_RECOVERY_CHAINS)}
iconComponent={
<SocialRecoveryIcon
color={
isDisabled(SOCIAL_RECOVERY_CHAINS)
? theme.palette.text.disabled
: theme.palette.text.primary}
height={22}
width={22}
<MenuItem
disabled={isDisabled(PROXY_CHAINS)}
iconComponent={
<VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
}
onClick={onManageProxies}
text={t('Manage proxies')}
withHoverEffect
/>
}
onClick={onSocialRecovery}
text={t('Social recovery')}
withHoverEffect
/>
<MenuItem
disabled={false} // We check NFTs across all supported chains, so this feature is not specific to the current chain and should not be disabled.
iconComponent={
<FontAwesomeIcon
color={theme.palette.text.primary}
fontSize='22px'
icon={faGem}
<MenuItem
disabled={isDisabled(SOCIAL_RECOVERY_CHAINS)}
iconComponent={
<SocialRecoveryIcon
color={
isDisabled(SOCIAL_RECOVERY_CHAINS)
? theme.palette.text.disabled
: theme.palette.text.primary}
height={22}
width={22}
/>
}
onClick={onSocialRecovery}
text={t('Social recovery')}
withHoverEffect
/>
}
onClick={onNFTAlbum}
text={t('NFT album')}
withHoverEffect
/>
<MenuSeparator />
<ProfileMenu
address={address}
closeParentMenu={closeMenu}
/>
{hasPrivateKey &&
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
}
onClick={onExportAccount}
text={t('Export account')}
withHoverEffect
/>}
{hasPrivateKey &&
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
<MenuItem
disabled={false} // We check NFTs across all supported chains, so this feature is not specific to the current chain and should not be disabled.
iconComponent={
<FontAwesomeIcon
color={theme.palette.text.primary}
fontSize='22px'
icon={faGem}
/>
}
onClick={onNFTAlbum}
text={t('NFT album')}
withHoverEffect
/>
<MenuSeparator />
<ProfileMenu
address={address}
closeParentMenu={closeMenu}
/>
{hasPrivateKey &&
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
}
onClick={onExportAccount}
text={t('Export account')}
withHoverEffect
/>}
{hasPrivateKey &&
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
}
onClick={onDeriveAccount}
text={t('Derive new account')}
withHoverEffect
/>
}
onClick={onDeriveAccount}
text={t('Derive new account')}
withHoverEffect
/>
}
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
}
onClick={onRenameAccount}
text={t('Rename')}
withHoverEffect
/>
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
}
onClick={onForgetAccount}
text={t('Forget account')}
withHoverEffect
/>
<MenuSeparator />
<SelectChain
address={address}
defaultValue={currentGenesisHash ?? options[0].text}
icon={getLogo(chain || undefined)}
label={t('Chain')}
onChange={onChangeNetwork}
options={options}
style={{ width: '100%' }}
/>
<RemoteNodeSelector
address={address}
genesisHash={genesisHash ?? currentGenesisHash}
/>
<IconButton
onClick={closeMenu}
sx={{
left: '15px',
p: 0,
position: 'absolute',
top: '65px'
}}
>
<CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} />
</IconButton>
</Grid>
);

return (
<Grid bgcolor={theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'} container height='100%' justifyContent='end' ref={containerRef} sx={[{ mixBlendMode: 'normal', ml: !noMargin ? '-15px' : undefined, overflowY: 'scroll', position: 'fixed', top: 0 }]} width='357px' zIndex={10}>
<Slide
container={containerRef.current}
direction='up'
in={isMenuOpen}
mountOnEnter
unmountOnExit
>
{movingParts}
</Slide>
</Grid>
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
}
onClick={onRenameAccount}
text={t('Rename')}
withHoverEffect
/>
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
}
onClick={onForgetAccount}
text={t('Forget account')}
withHoverEffect
/>
<MenuSeparator />
<SelectChain
address={address}
defaultValue={currentGenesisHash ?? options[0].text}
icon={getLogo(chain || undefined)}
label={t('Chain')}
onChange={onChangeNetwork}
options={options}
style={{ width: '100%' }}
/>
<RemoteNodeSelector
address={address}
genesisHash={genesisHash ?? currentGenesisHash}
/>
<IconButton
onClick={closeMenu}
sx={{
left: '15px',
p: 0,
position: 'absolute',
top: '65px'
}}
>
<CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} />
</IconButton>
</Grid>
</Grid>
</Dialog>
);
}

Expand Down
12 changes: 5 additions & 7 deletions packages/extension-polkagate/src/partials/HeaderBrand.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,16 +212,14 @@ function HeaderBrand ({ _centerItem, address, backgroundDefault, fullScreenURL =
<Divider sx={{ bgcolor: 'secondary.main', height: '3px', margin: '5px auto', width: '138px' }} />
}
</Container>
{isMenuOpen &&
<Menu
setShowMenu={setOpenMenu}
/>
}
{isAccountMenuOpen && address &&
<Menu
isMenuOpen={isMenuOpen}
setShowMenu={setOpenMenu}
/>
{address &&
<AccountMenu
address={address}
isMenuOpen={isAccountMenuOpen}
noMargin
setShowMenu={setShowAccountMenu}
/>
}
Expand Down
Loading

0 comments on commit f061cf6

Please sign in to comment.