Skip to content

Commit 6088d2e

Browse files
Nick-1979Nick-1979
committed
refactor: use SimpleModalTitle component
1 parent b3cf569 commit 6088d2e

File tree

7 files changed

+191
-230
lines changed

7 files changed

+191
-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: 72 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
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';
1213
import React, { useCallback, useEffect, useMemo, useState } from 'react';
1314

14-
import { ApiPromise } from '@polkadot/api';
1515
import { AccountsStore } from '@polkadot/extension-base/stores';
1616
import keyring from '@polkadot/ui-keyring';
17-
import { BN, BN_ONE } from '@polkadot/util';
17+
import { BN_ONE, noop } from '@polkadot/util';
1818
import { cryptoWaitReady } from '@polkadot/util-crypto';
1919

2020
import { useAccountLocks, useBalances, useInfo, useProxies, useTracks, useTranslation } from '../../../hooks';
2121
import { PROXY_TYPE } from '../../../util/constants';
22+
import SimpleModalTitle from '../../partials/SimpleModalTitle';
2223
import { DraggableModal } from '../components/DraggableModal';
2324
import SelectProxyModal2 from '../components/SelectProxyModal2';
2425
import WaitScreen from '../partials/WaitScreen';
25-
import { DelegationInfo } from '../utils/types';
2626
import { getMyDelegationInfo } from '../utils/util';
2727
import ChooseDelegator from './delegate/ChooseDelegator';
2828
import DelegateVote from './delegate/Delegate';
29-
import { ModifyModes } from './modify/ModifyDelegate';
3029
import { getAlreadyLockedValue } from './partial/AlreadyLockedTooltipText';
3130
import Confirmation from './partial/Confirmation';
3231
import About from './About';
@@ -76,12 +75,12 @@ export const STEPS = {
7675

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

79-
export function Delegate({ address, open, setOpen, showDelegationNote }: Props): React.ReactElement<Props> {
78+
export function Delegate ({ address, open, setOpen, showDelegationNote }: Props): React.ReactElement<Props> {
8079
const { t } = useTranslation();
81-
const theme = useTheme();
8280
const { api, formatted } = useInfo(address);
8381
const tracksList = useTracks(address);
8482
const balances = useBalances(address, undefined, undefined, true);
83+
8584
const lockedAmount = useMemo(() => getAlreadyLockedValue(balances), [balances]);
8685
const accountLocks = useAccountLocks(address, 'referenda', 'convictionVoting');
8786
const proxies = useProxies(api, formatted);
@@ -111,8 +110,64 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
111110
setProxyStep(step);
112111
}, [step]);
113112

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

118173
useEffect(() => {
@@ -148,7 +203,7 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
148203

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

154209
if (delegateInformation.delegatedTracks.length > 1) {
@@ -232,61 +287,11 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
232287
return (
233288
<DraggableModal minHeight={550} onClose={handleClose} open={open}>
234289
<>
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>
290+
<SimpleModalTitle
291+
icon='vaadin:del'
292+
onClose={step !== STEPS.WAIT_SCREEN ? handleClose : noop}
293+
title= {title}
294+
/>
290295
{step === STEPS.ABOUT &&
291296
<About
292297
setStep={setStep}
@@ -358,7 +363,7 @@ export function Delegate({ address, open, setOpen, showDelegationNote }: Props):
358363
<SelectProxyModal2
359364
address={address}
360365
// eslint-disable-next-line react/jsx-no-bind
361-
closeSelectProxy={() => setStep(proxyStep)}
366+
closeSelectProxy={() => proxyStep && setStep(proxyStep)}
362367
height={modalHeight}
363368
proxies={proxyItems}
364369
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'>

‎packages/extension-polkagate/src/fullscreen/governance/post/castVote/Cast.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ interface Props {
3333
step: number;
3434
setStep: React.Dispatch<React.SetStateAction<number>>;
3535
previousVote: Vote | null | undefined;
36-
notVoted: boolean | undefined
36+
notVoted: boolean | null | undefined
3737
}
3838

3939
export interface VoteInformation {

0 commit comments

Comments
 (0)