Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: use SimpleModalTitle component #1557

Merged
merged 2 commits into from
Sep 28, 2024
Merged

refactor: use SimpleModalTitle component #1557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6088d2e
refactor: use SimpleModalTitle component
Nick-1979 Sep 26, 2024
11f8dec
chore: add proxy icon
Nick-1979 Sep 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 14 additions & 37 deletions packages/extension-polkagate/src/fullscreen/governance/Toolbar.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading