Skip to content

Commit

Permalink
refactor: use SimpleModalTitle component (#1557)
Browse files Browse the repository at this point in the history 
* refactor: use SimpleModalTitle component

* chore: add proxy icon
  • Loading branch information
@Nick-1979
Nick-1979 authored Sep 28, 2024
1 parent b3cf569 commit 90aae9f
Show file tree
Hide file tree
Showing 7 changed files with 192 additions and 230 deletions.
51 changes: 14 additions & 37 deletions packages/extension-polkagate/src/fullscreen/governance/Toolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0

// @ts-nocheck
/* eslint-disable react/jsx-max-props-per-line */

import type { DecidingCount } from '../../hooks/useDecidingCount';
Expand All @@ -25,14 +24,14 @@ interface Props {
decidingCounts: DecidingCount | undefined;
}

const MENU_DELAY = 150; // mili sec
const MENU_DELAY = 150; // ms

export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSelectedSubMenu }: Props): React.ReactElement {
const { t } = useTranslation();
const theme = useTheme();
const { address, topMenu } = useParams<{ address: string, topMenu: 'referenda' | 'fellowship', postId?: string }>();
const api = useApi(address);
const ref = useRef<{ timeoutId: NodeJS.Timeout | null }>({ timeoutId: null });
const ref = useRef<{ timeoutId: number | null }>({ timeoutId: null });

const [openDelegate, setOpenDelegate] = useState(false);
const [showDelegationNote, setShowDelegationNote] = useState<boolean>(true);
Expand All @@ -42,22 +41,21 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
setShowDelegationNote(window.localStorage.getItem('delegate_about_disabled') !== 'true');
}, [openDelegate]);

const handleOpenDelegate = () => {
const handleOpenDelegate = useCallback(() => {
setOpenDelegate(true);
};
}, []);

const onTopMenuMenuMouseEnter = useCallback((item: TopMenu) => {
clearTimeout(ref.current.timeoutId as NodeJS.Timeout);// Clear any existing timeout
ref.current.timeoutId && clearTimeout(ref.current.timeoutId);

// Set a new timeout of 0.5 seconds
ref.current.timeoutId = setTimeout(() => {
setHoveredTopMenu(item.toLowerCase());
setHoveredTopMenu(item.toLowerCase() as 'referenda' | 'fellowship');
setMenuOpen(true);
}, MENU_DELAY);
}, MENU_DELAY) as unknown as number;
}, [setMenuOpen]);

const onTopMenuMenuMouseLeave = useCallback(() => {
!menuOpen && clearTimeout(ref.current.timeoutId as NodeJS.Timeout);// Clear any existing timeout
!menuOpen && ref.current.timeoutId && clearTimeout(ref.current.timeoutId);
}, [menuOpen]);

const handleClickAway = useCallback(() => {
Expand All @@ -68,15 +66,17 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
const menuTextColor = theme.palette.mode === 'light' ? 'primary.main' : 'text.primary';
const selectedMenuBgColor = theme.palette.mode === 'light' ? 'background.paper' : 'primary.main';

function TopMenuComponent({ item }: { item: TopMenu }): React.ReactElement<{ item: TopMenu }> {
function TopMenuComponent ({ item }: { item: TopMenu }): React.ReactElement<{ item: TopMenu }> {
return (
<Grid
alignItems='center'
container
item
justifyContent='center'
// eslint-disable-next-line react/jsx-no-bind
onMouseEnter={() => onTopMenuMenuMouseEnter(item)}
onMouseLeave={() => onTopMenuMenuMouseLeave(item)}
// eslint-disable-next-line react/jsx-no-bind
onMouseLeave={() => onTopMenuMenuMouseLeave()}
sx={{
bgcolor: hoveredTopMenu === item.toLowerCase() ? selectedMenuBgColor : menuBgColor,
color: hoveredTopMenu === item.toLowerCase() ? menuTextColor : 'white',
Expand All @@ -86,7 +86,7 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
px: '5px',
width: '150px'
}}>
<Typography sx={{ display: 'inline-block', fontWeight: 500, fontSize: '20px' }}>
<Typography sx={{ display: 'inline-block', fontSize: '20px', fontWeight: 500 }}>
{item}
</Typography>
{item === 'Fellowship'
Expand All @@ -99,7 +99,7 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel

return (
<>
<Grid container id='menu' sx={{ bgcolor: theme.palette.mode === 'light' ? 'primary.main' : 'background.paper', borderBottom: 1, borderTop: 1, borderColor: theme.palette.mode === 'dark' && 'primary.main', height: '51.5px', color: 'text.secondary', fontSize: '20px', fontWeight: 500, minWidth: '810px' }}>
<Grid container id='menu' sx={{ bgcolor: theme.palette.mode === 'light' ? 'primary.main' : 'background.paper', borderBottom: 1, borderTop: 1, borderColor: theme.palette.mode === 'dark' ? 'primary.main' : undefined, height: '51.5px', color: 'text.secondary', fontSize: '20px', fontWeight: 500, minWidth: '810px' }}>
<Container disableGutters sx={{ maxWidth: MAX_WIDTH }}>
<Grid alignItems='center' container justifyContent='space-between'>
<ClickAwayListener onClickAway={handleClickAway}>
Expand All @@ -110,7 +110,6 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
</ClickAwayListener>
<Grid container item justifyContent='flex-end' xs={6}>
<Button
// disabled={disabled}
onClick={handleOpenDelegate}
sx={{
'&:hover': {
Expand All @@ -130,28 +129,6 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
>
{t('Delegate Vote')}
</Button>
{/* <Button
disabled={!api}
onClick={handleOpenSubmitReferendum}
sx={{
backgroundColor: theme.palette.mode === 'light' ? 'background.paper' : 'primary.main',
borderRadius: '5px',
color: theme.palette.mode === 'light' ? 'primary.main' : 'text.primary',
fontSize: '18px',
fontWeight: 500,
height: '36px',
textTransform: 'none',
ml: '15px',
width: '190px',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2'
}
}}
variant='contained'
>
{t('Submit Referendum')}
</Button> */}
</Grid>
</Grid>
</Container>
Expand Down
140 changes: 73 additions & 67 deletions packages/extension-polkagate/src/fullscreen/governance/delegate/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0

// @ts-nocheck
/* eslint-disable react/jsx-max-props-per-line */

import type { ApiPromise } from '@polkadot/api';
import type { Balance } from '@polkadot/types/interfaces';
import type { BN } from '@polkadot/util';
import type { Proxy, ProxyItem, TxInfo } from '../../../util/types';
import type { DelegationInfo } from '../utils/types';
import type { ModifyModes } from './modify/ModifyDelegate';

import { Close as CloseIcon } from '@mui/icons-material';
import { Grid, Typography, useTheme } from '@mui/material';
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons';
import React, { useCallback, useEffect, useMemo, useState } from 'react';

import { ApiPromise } from '@polkadot/api';
import { AccountsStore } from '@polkadot/extension-base/stores';
import keyring from '@polkadot/ui-keyring';
import { BN, BN_ONE } from '@polkadot/util';
import { BN_ONE, noop } from '@polkadot/util';
import { cryptoWaitReady } from '@polkadot/util-crypto';

import { useAccountLocks, useBalances, useInfo, useProxies, useTracks, useTranslation } from '../../../hooks';
import { PROXY_TYPE } from '../../../util/constants';
import SimpleModalTitle from '../../partials/SimpleModalTitle';
import { DraggableModal } from '../components/DraggableModal';
import SelectProxyModal2 from '../components/SelectProxyModal2';
import WaitScreen from '../partials/WaitScreen';
import { DelegationInfo } from '../utils/types';
import { getMyDelegationInfo } from '../utils/util';
import ChooseDelegator from './delegate/ChooseDelegator';
import DelegateVote from './delegate/Delegate';
import { ModifyModes } from './modify/ModifyDelegate';
import { getAlreadyLockedValue } from './partial/AlreadyLockedTooltipText';
import Confirmation from './partial/Confirmation';
import About from './About';
Expand Down Expand Up @@ -76,12 +76,12 @@ export const STEPS = {

export type DelegationStatus = 'Delegate' | 'Remove' | 'Modify';

export function Delegate({ address, open, setOpen, showDelegationNote }: Props): React.ReactElement<Props> {
export function Delegate ({ address, open, setOpen, showDelegationNote }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const theme = useTheme();
const { api, formatted } = useInfo(address);
const tracksList = useTracks(address);
const balances = useBalances(address, undefined, undefined, true);

const lockedAmount = useMemo(() => getAlreadyLockedValue(balances), [balances]);
const accountLocks = useAccountLocks(address, 'referenda', 'convictionVoting');
const proxies = useProxies(api, formatted);
Expand Down Expand Up @@ -111,8 +111,64 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
setProxyStep(step);
}, [step]);

const title = useMemo(() => {
if (step === STEPS.ABOUT) {
return t('Delegate Vote');
}

if (step === STEPS.CHECK_SCREEN) {
return t('Delegation status');
}

if ([STEPS.INDEX, STEPS.CHOOSE_DELEGATOR].includes(step)) {
return t('Delegate Vote ({{ step }}/3)', { replace: { step: step === STEPS.INDEX ? 1 : 2 } });
}

if (step === STEPS.PREVIEW) {
return t('Delegation details');
}

if ([STEPS.REVIEW, STEPS.SIGN_QR].includes(step) && status === 'Delegate') {
return t('Review Your Delegation (3/3)');
}

if ([STEPS.REMOVE, STEPS.SIGN_QR].includes(step) && status === 'Remove') {
return t('Remove Delegate');
}

if ([STEPS.MODIFY, STEPS.SIGN_QR].includes(step) && status === 'Modify') {
return t('Modify Delegate');
}

if (step === STEPS.WAIT_SCREEN) {
if (status === 'Delegate') {
return t('Delegating');
} else if (status === 'Modify') {
return t('Modifying Delegation');
} else {
return t('Removing Delegation');
}
}

if (step === STEPS.CONFIRM) {
if (status === 'Delegate') {
return txInfo?.success ? t('Delegation Completed') : t('Delegation Failed');
} else if (status === 'Modify') {
return txInfo?.success ? t('Delegations Modified') : t('Modifying Delegations Failed');
} else {
return txInfo?.success ? t('Delegations Removed') : t('Removing Delegations Failed');
}
}

if (step === STEPS.PROXY) {
return t('Select Proxy');
}

return '';
}, [status, step, t, txInfo?.success]);

const handleClose = useCallback(() => {
step !== STEPS.PROXY ? setOpen(false) : setStep(proxyStep);
step !== STEPS.PROXY ? setOpen(false) : proxyStep && setStep(proxyStep);
}, [proxyStep, setOpen, step]);

useEffect(() => {
Expand Down Expand Up @@ -148,7 +204,7 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):

if (!api?.call?.['transactionPaymentApi']) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return setEstimatedFee(api?.createType('Balance', BN_ONE));
return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance);
}

if (delegateInformation.delegatedTracks.length > 1) {
Expand Down Expand Up @@ -232,61 +288,11 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
return (
<DraggableModal minHeight={550} onClose={handleClose} open={open}>
<>
<Grid alignItems='center' container justifyContent='space-between' pt='5px'>
<Grid item>
<Typography fontSize='22px' fontWeight={700}>
{step === STEPS.ABOUT &&
t('Delegate Vote')
}
{step === STEPS.CHECK_SCREEN &&
t('Delegation status')
}
{[STEPS.INDEX, STEPS.CHOOSE_DELEGATOR].includes(step) &&
t('Delegate Vote ({{ step }}/3)', { replace: { step: step === STEPS.INDEX ? 1 : 2 } })
}
{step === STEPS.PREVIEW &&
t('Delegation details')
}
{[STEPS.REVIEW, STEPS.SIGN_QR].includes(step) && status === 'Delegate' &&
t('Review Your Delegation (3/3)')
}
{[STEPS.REMOVE, STEPS.SIGN_QR].includes(step) && status === 'Remove' &&
t('Remove Delegate')
}
{[STEPS.MODIFY, STEPS.SIGN_QR].includes(step) && status === 'Modify' &&
t('Modify Delegate')
}
{step === STEPS.WAIT_SCREEN
? status === 'Delegate'
? t('Delegating')
: status === 'Modify'
? t('Modifying Delegation')
: t('Removing Delegation')
: undefined
}
{step === STEPS.CONFIRM
? status === 'Delegate'
? txInfo?.success
? t('Delegation Completed')
: t('Delegation Failed')
: status === 'Modify'
? txInfo?.success
? t('Delegations Modified')
: t('Modifying Delegations Failed')
: txInfo?.success
? t('Delegations Removed')
: t('Removing Delegations Failed')
: undefined
}
{step === STEPS.PROXY &&
t('Select Proxy')
}
</Typography>
</Grid>
<Grid item>
{step !== STEPS.WAIT_SCREEN && <CloseIcon onClick={handleClose} sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />}
</Grid>
</Grid>
<SimpleModalTitle
icon={step === STEPS.PROXY ? faUserAstronaut : 'vaadin:money-withdraw'}
onClose={step !== STEPS.WAIT_SCREEN ? handleClose : noop}
title= {title}
/>
{step === STEPS.ABOUT &&
<About
setStep={setStep}
Expand Down Expand Up @@ -358,7 +364,7 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
<SelectProxyModal2
address={address}
// eslint-disable-next-line react/jsx-no-bind
closeSelectProxy={() => setStep(proxyStep)}
closeSelectProxy={() => proxyStep && setStep(proxyStep)}
height={modalHeight}
proxies={proxyItems}
proxyTypeFilter={PROXY_TYPE.GOVERNANCE}
Expand Down
16 changes: 7 additions & 9 deletions packages/extension-polkagate/src/fullscreen/governance/delegate/partial/Confirmation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0

// @ts-nocheck
/* eslint-disable react/jsx-max-props-per-line */

import type { TxInfo } from '../../../../util/types';
Expand All @@ -19,9 +18,9 @@ import FailSuccessIcon from '../../../../popup/history/partials/FailSuccessIcon'
interface Props {
address: string | undefined;
txInfo: TxInfo;
delegateInformation: DelegateInformation;
delegateInformation: DelegateInformation | undefined;
handleClose: () => void;
allCategoriesLength: number;
allCategoriesLength: number | undefined;
removedTracksLength?: number | undefined;
status: 'Delegate' | 'Remove' | 'Modify';
}
Expand Down Expand Up @@ -61,7 +60,6 @@ export default function Confirmation ({ address, allCategoriesLength, delegateIn
{txInfo.failureText}
</Typography>
}
{/* <AccountHolderWithProxy address={address} chain={txInfo.chain} showDivider selectedProxyAddress={txInfo.throughProxy?.address} /> */}
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
{status === 'Remove' ? t('Account holder') : t('Delegation from')}:
Expand Down Expand Up @@ -99,23 +97,23 @@ export default function Confirmation ({ address, allCategoriesLength, delegateIn
</Grid>
</>
}
{status !== 'Remove' && delegateInformation.delegateAmount &&
{status !== 'Remove' && delegateInformation?.delegateAmount &&
<DisplayInfo
caption={t('Vote value:')}
value={t(`${delegateInformation.delegateAmount} {{token}}`, { replace: { token } })}
value={t(`${delegateInformation?.delegateAmount} {{token}}`, { replace: { token } })}
/>
}
{status !== 'Remove' && delegateInformation?.delegateConviction === undefined &&
<DisplayInfo
caption={t('Vote multiplier:')}
value={t(`${delegateInformation.delegateConviction === 0 ? 0.1 : delegateInformation.delegateConviction}x`)}
value={t(`${delegateInformation?.delegateConviction === 0 ? 0.1 : delegateInformation?.delegateConviction}x`)}
/>
}
<DisplayInfo
caption={t('Number of referenda categories:')}
value={t(`${status === 'Remove' && removedTracksLength ? removedTracksLength : delegateInformation.delegatedTracks.length} of ${allCategoriesLength}`, { replace: { token } })}
value={t(`${status === 'Remove' && removedTracksLength ? removedTracksLength : delegateInformation?.delegatedTracks.length} of ${allCategoriesLength}`, { replace: { token } })}
/>
<DisplayInfo caption={t('Fee:')} value={fee?.toHuman() ?? '00.00'} />
<DisplayInfo caption={t('Fee:')} value={fee?.toHuman() as string ?? '00.00'} />
{txInfo?.txHash &&
<Grid alignItems='center' container fontSize='16px' fontWeight={400} justifyContent='center' pt='8px'>
<Grid container item width='fit-content'>
Expand Down
Loading

0 comments on commit 90aae9f

Please sign in to comment.