Skip to content

Commit 90aae9f

Browse files
Nick-1979Nick-1979
authored
refactor: use SimpleModalTitle component (#1557)
* refactor: use SimpleModalTitle component * chore: add proxy icon
1 parent b3cf569 commit 90aae9f

File tree

7 files changed

+192
-230
lines changed

7 files changed

+192
-230
lines changed

‎packages/extension-polkagate/src/fullscreen/governance/Toolbar.tsx

Lines changed: 14 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
33

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

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

28-
const MENU_DELAY = 150; // mili sec
27+
const MENU_DELAY = 150; // ms
2928

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

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

45-
const handleOpenDelegate = () => {
44+
const handleOpenDelegate = useCallback(() => {
4645
setOpenDelegate(true);
47-
};
46+
}, []);
4847

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

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

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

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

71-
function TopMenuComponent({ item }: { item: TopMenu }): React.ReactElement<{ item: TopMenu }> {
69+
function TopMenuComponent ({ item }: { item: TopMenu }): React.ReactElement<{ item: TopMenu }> {
7270
return (
7371
<Grid
7472
alignItems='center'
7573
container
7674
item
7775
justifyContent='center'
76+
// eslint-disable-next-line react/jsx-no-bind
7877
onMouseEnter={() => onTopMenuMenuMouseEnter(item)}
79-
onMouseLeave={() => onTopMenuMenuMouseLeave(item)}
78+
// eslint-disable-next-line react/jsx-no-bind
79+
onMouseLeave={() => onTopMenuMenuMouseLeave()}
8080
sx={{
8181
bgcolor: hoveredTopMenu === item.toLowerCase() ? selectedMenuBgColor : menuBgColor,
8282
color: hoveredTopMenu === item.toLowerCase() ? menuTextColor : 'white',
@@ -86,7 +86,7 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
8686
px: '5px',
8787
width: '150px'
8888
}}>
89-
<Typography sx={{ display: 'inline-block', fontWeight: 500, fontSize: '20px' }}>
89+
<Typography sx={{ display: 'inline-block', fontSize: '20px', fontWeight: 500 }}>
9090
{item}
9191
</Typography>
9292
{item === 'Fellowship'
@@ -99,7 +99,7 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
9999

100100
return (
101101
<>
102-
<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' }}>
102+
<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' }}>
103103
<Container disableGutters sx={{ maxWidth: MAX_WIDTH }}>
104104
<Grid alignItems='center' container justifyContent='space-between'>
105105
<ClickAwayListener onClickAway={handleClickAway}>
@@ -110,7 +110,6 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
110110
</ClickAwayListener>
111111
<Grid container item justifyContent='flex-end' xs={6}>
112112
<Button
113-
// disabled={disabled}
114113
onClick={handleOpenDelegate}
115114
sx={{
116115
'&:hover': {
@@ -130,28 +129,6 @@ export default function Toolbar ({ decidingCounts, menuOpen, setMenuOpen, setSel
130129
>
131130
{t('Delegate Vote')}
132131
</Button>
133-
{/* <Button
134-
disabled={!api}
135-
onClick={handleOpenSubmitReferendum}
136-
sx={{
137-
backgroundColor: theme.palette.mode === 'light' ? 'background.paper' : 'primary.main',
138-
borderRadius: '5px',
139-
color: theme.palette.mode === 'light' ? 'primary.main' : 'text.primary',
140-
fontSize: '18px',
141-
fontWeight: 500,
142-
height: '36px',
143-
textTransform: 'none',
144-
ml: '15px',
145-
width: '190px',
146-
'&:hover': {
147-
backgroundColor: '#fff',
148-
color: '#3c52b2'
149-
}
150-
}}
151-
variant='contained'
152-
>
153-
{t('Submit Referendum')}
154-
</Button> */}
155132
</Grid>
156133
</Grid>
157134
</Container>

‎packages/extension-polkagate/src/fullscreen/governance/delegate/index.tsx

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
33

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

6+
import type { ApiPromise } from '@polkadot/api';
77
import type { Balance } from '@polkadot/types/interfaces';
8+
import type { BN } from '@polkadot/util';
89
import type { Proxy, ProxyItem, TxInfo } from '../../../util/types';
10+
import type { DelegationInfo } from '../utils/types';
11+
import type { ModifyModes } from './modify/ModifyDelegate';
912

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

14-
import { ApiPromise } from '@polkadot/api';
1516
import { AccountsStore } from '@polkadot/extension-base/stores';
1617
import keyring from '@polkadot/ui-keyring';
17-
import { BN, BN_ONE } from '@polkadot/util';
18+
import { BN_ONE, noop } from '@polkadot/util';
1819
import { cryptoWaitReady } from '@polkadot/util-crypto';
1920

2021
import { useAccountLocks, useBalances, useInfo, useProxies, useTracks, useTranslation } from '../../../hooks';
2122
import { PROXY_TYPE } from '../../../util/constants';
23+
import SimpleModalTitle from '../../partials/SimpleModalTitle';
2224
import { DraggableModal } from '../components/DraggableModal';
2325
import SelectProxyModal2 from '../components/SelectProxyModal2';
2426
import WaitScreen from '../partials/WaitScreen';
25-
import { DelegationInfo } from '../utils/types';
2627
import { getMyDelegationInfo } from '../utils/util';
2728
import ChooseDelegator from './delegate/ChooseDelegator';
2829
import DelegateVote from './delegate/Delegate';
29-
import { ModifyModes } from './modify/ModifyDelegate';
3030
import { getAlreadyLockedValue } from './partial/AlreadyLockedTooltipText';
3131
import Confirmation from './partial/Confirmation';
3232
import About from './About';
@@ -76,12 +76,12 @@ export const STEPS = {
7676

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

79-
export function Delegate({ address, open, setOpen, showDelegationNote }: Props): React.ReactElement<Props> {
79+
export function Delegate ({ address, open, setOpen, showDelegationNote }: Props): React.ReactElement<Props> {
8080
const { t } = useTranslation();
81-
const theme = useTheme();
8281
const { api, formatted } = useInfo(address);
8382
const tracksList = useTracks(address);
8483
const balances = useBalances(address, undefined, undefined, true);
84+
8585
const lockedAmount = useMemo(() => getAlreadyLockedValue(balances), [balances]);
8686
const accountLocks = useAccountLocks(address, 'referenda', 'convictionVoting');
8787
const proxies = useProxies(api, formatted);
@@ -111,8 +111,64 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
111111
setProxyStep(step);
112112
}, [step]);
113113

114+
const title = useMemo(() => {
115+
if (step === STEPS.ABOUT) {
116+
return t('Delegate Vote');
117+
}
118+
119+
if (step === STEPS.CHECK_SCREEN) {
120+
return t('Delegation status');
121+
}
122+
123+
if ([STEPS.INDEX, STEPS.CHOOSE_DELEGATOR].includes(step)) {
124+
return t('Delegate Vote ({{ step }}/3)', { replace: { step: step === STEPS.INDEX ? 1 : 2 } });
125+
}
126+
127+
if (step === STEPS.PREVIEW) {
128+
return t('Delegation details');
129+
}
130+
131+
if ([STEPS.REVIEW, STEPS.SIGN_QR].includes(step) && status === 'Delegate') {
132+
return t('Review Your Delegation (3/3)');
133+
}
134+
135+
if ([STEPS.REMOVE, STEPS.SIGN_QR].includes(step) && status === 'Remove') {
136+
return t('Remove Delegate');
137+
}
138+
139+
if ([STEPS.MODIFY, STEPS.SIGN_QR].includes(step) && status === 'Modify') {
140+
return t('Modify Delegate');
141+
}
142+
143+
if (step === STEPS.WAIT_SCREEN) {
144+
if (status === 'Delegate') {
145+
return t('Delegating');
146+
} else if (status === 'Modify') {
147+
return t('Modifying Delegation');
148+
} else {
149+
return t('Removing Delegation');
150+
}
151+
}
152+
153+
if (step === STEPS.CONFIRM) {
154+
if (status === 'Delegate') {
155+
return txInfo?.success ? t('Delegation Completed') : t('Delegation Failed');
156+
} else if (status === 'Modify') {
157+
return txInfo?.success ? t('Delegations Modified') : t('Modifying Delegations Failed');
158+
} else {
159+
return txInfo?.success ? t('Delegations Removed') : t('Removing Delegations Failed');
160+
}
161+
}
162+
163+
if (step === STEPS.PROXY) {
164+
return t('Select Proxy');
165+
}
166+
167+
return '';
168+
}, [status, step, t, txInfo?.success]);
169+
114170
const handleClose = useCallback(() => {
115-
step !== STEPS.PROXY ? setOpen(false) : setStep(proxyStep);
171+
step !== STEPS.PROXY ? setOpen(false) : proxyStep && setStep(proxyStep);
116172
}, [proxyStep, setOpen, step]);
117173

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

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

154210
if (delegateInformation.delegatedTracks.length > 1) {
@@ -232,61 +288,11 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
232288
return (
233289
<DraggableModal minHeight={550} onClose={handleClose} open={open}>
234290
<>
235-
<Grid alignItems='center' container justifyContent='space-between' pt='5px'>
236-
<Grid item>
237-
<Typography fontSize='22px' fontWeight={700}>
238-
{step === STEPS.ABOUT &&
239-
t('Delegate Vote')
240-
}
241-
{step === STEPS.CHECK_SCREEN &&
242-
t('Delegation status')
243-
}
244-
{[STEPS.INDEX, STEPS.CHOOSE_DELEGATOR].includes(step) &&
245-
t('Delegate Vote ({{ step }}/3)', { replace: { step: step === STEPS.INDEX ? 1 : 2 } })
246-
}
247-
{step === STEPS.PREVIEW &&
248-
t('Delegation details')
249-
}
250-
{[STEPS.REVIEW, STEPS.SIGN_QR].includes(step) && status === 'Delegate' &&
251-
t('Review Your Delegation (3/3)')
252-
}
253-
{[STEPS.REMOVE, STEPS.SIGN_QR].includes(step) && status === 'Remove' &&
254-
t('Remove Delegate')
255-
}
256-
{[STEPS.MODIFY, STEPS.SIGN_QR].includes(step) && status === 'Modify' &&
257-
t('Modify Delegate')
258-
}
259-
{step === STEPS.WAIT_SCREEN
260-
? status === 'Delegate'
261-
? t('Delegating')
262-
: status === 'Modify'
263-
? t('Modifying Delegation')
264-
: t('Removing Delegation')
265-
: undefined
266-
}
267-
{step === STEPS.CONFIRM
268-
? status === 'Delegate'
269-
? txInfo?.success
270-
? t('Delegation Completed')
271-
: t('Delegation Failed')
272-
: status === 'Modify'
273-
? txInfo?.success
274-
? t('Delegations Modified')
275-
: t('Modifying Delegations Failed')
276-
: txInfo?.success
277-
? t('Delegations Removed')
278-
: t('Removing Delegations Failed')
279-
: undefined
280-
}
281-
{step === STEPS.PROXY &&
282-
t('Select Proxy')
283-
}
284-
</Typography>
285-
</Grid>
286-
<Grid item>
287-
{step !== STEPS.WAIT_SCREEN && <CloseIcon onClick={handleClose} sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />}
288-
</Grid>
289-
</Grid>
291+
<SimpleModalTitle
292+
icon={step === STEPS.PROXY ? faUserAstronaut : 'vaadin:money-withdraw'}
293+
onClose={step !== STEPS.WAIT_SCREEN ? handleClose : noop}
294+
title= {title}
295+
/>
290296
{step === STEPS.ABOUT &&
291297
<About
292298
setStep={setStep}
@@ -358,7 +364,7 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
358364
<SelectProxyModal2
359365
address={address}
360366
// eslint-disable-next-line react/jsx-no-bind
361-
closeSelectProxy={() => setStep(proxyStep)}
367+
closeSelectProxy={() => proxyStep && setStep(proxyStep)}
362368
height={modalHeight}
363369
proxies={proxyItems}
364370
proxyTypeFilter={PROXY_TYPE.GOVERNANCE}

‎packages/extension-polkagate/src/fullscreen/governance/delegate/partial/Confirmation.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
33

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

76
import type { TxInfo } from '../../../../util/types';
@@ -19,9 +18,9 @@ import FailSuccessIcon from '../../../../popup/history/partials/FailSuccessIcon'
1918
interface Props {
2019
address: string | undefined;
2120
txInfo: TxInfo;
22-
delegateInformation: DelegateInformation;
21+
delegateInformation: DelegateInformation | undefined;
2322
handleClose: () => void;
24-
allCategoriesLength: number;
23+
allCategoriesLength: number | undefined;
2524
removedTracksLength?: number | undefined;
2625
status: 'Delegate' | 'Remove' | 'Modify';
2726
}
@@ -61,7 +60,6 @@ export default function Confirmation ({ address, allCategoriesLength, delegateIn
6160
{txInfo.failureText}
6261
</Typography>
6362
}
64-
{/* <AccountHolderWithProxy address={address} chain={txInfo.chain} showDivider selectedProxyAddress={txInfo.throughProxy?.address} /> */}
6563
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
6664
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
6765
{status === 'Remove' ? t('Account holder') : t('Delegation from')}:
@@ -99,23 +97,23 @@ export default function Confirmation ({ address, allCategoriesLength, delegateIn
9997
</Grid>
10098
</>
10199
}
102-
{status !== 'Remove' && delegateInformation.delegateAmount &&
100+
{status !== 'Remove' && delegateInformation?.delegateAmount &&
103101
<DisplayInfo
104102
caption={t('Vote value:')}
105-
value={t(`${delegateInformation.delegateAmount} {{token}}`, { replace: { token } })}
103+
value={t(`${delegateInformation?.delegateAmount} {{token}}`, { replace: { token } })}
106104
/>
107105
}
108106
{status !== 'Remove' && delegateInformation?.delegateConviction === undefined &&
109107
<DisplayInfo
110108
caption={t('Vote multiplier:')}
111-
value={t(`${delegateInformation.delegateConviction === 0 ? 0.1 : delegateInformation.delegateConviction}x`)}
109+
value={t(`${delegateInformation?.delegateConviction === 0 ? 0.1 : delegateInformation?.delegateConviction}x`)}
112110
/>
113111
}
114112
<DisplayInfo
115113
caption={t('Number of referenda categories:')}
116-
value={t(`${status === 'Remove' && removedTracksLength ? removedTracksLength : delegateInformation.delegatedTracks.length} of ${allCategoriesLength}`, { replace: { token } })}
114+
value={t(`${status === 'Remove' && removedTracksLength ? removedTracksLength : delegateInformation?.delegatedTracks.length} of ${allCategoriesLength}`, { replace: { token } })}
117115
/>
118-
<DisplayInfo caption={t('Fee:')} value={fee?.toHuman() ?? '00.00'} />
116+
<DisplayInfo caption={t('Fee:')} value={fee?.toHuman() as string ?? '00.00'} />
119117
{txInfo?.txHash &&
120118
<Grid alignItems='center' container fontSize='16px' fontWeight={400} justifyContent='center' pt='8px'>
121119
<Grid container item width='fit-content'>

0 commit comments

Comments
 (0)