neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add cancel all to slashes page (#3607)

Browse Source
This commit is contained in:
Jaco Greeff 2020-09-04 11:15:25 +02:00 committed by GitHub
parent f3a4bda773
commit 506cec434b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/page-staking/src/Slashes/Era.tsx
View File

@ -21,13 +21,18 @@ interface Props {
interface Selected {
selected: number[];
tx: SubmittableExtrinsic<'promise'> | null;
txAll: SubmittableExtrinsic<'promise'>;
txSome: SubmittableExtrinsic<'promise'> | null;
}
function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactElement<Props> | null {
const { t } = useTranslation();
const { api } = useApi();
const [{ selected, tx }, setSelected] = useState<Selected>({ selected: [], tx: null });
const [{ selected, txAll, txSome }, setSelected] = useState<Selected>((): Selected => {
const proposal = api.tx.staking.cancelDeferredSlash(slash.era, slash.slashes.map((_, index) => index));
return { selected: [], txAll: api.tx.council.propose(councilThreshold, proposal, proposal.encodedLength), txSome: null };
});
const headerRef = useRef<[string?, string?, number?][]>([
[undefined, 'start', 3],
@ -47,11 +52,11 @@ function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactEle
const proposal = selected.length
? api.tx.staking.cancelDeferredSlash(slash.era, selected)
: null;
const tx = proposal
const txSome = proposal
? api.tx.council.propose(councilThreshold, proposal, proposal.encodedLength)
: null;
return { selected, tx };
return { selected, txAll: state.txAll, txSome };
}),
[api, councilThreshold, slash]
);
@ -63,10 +68,18 @@ function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactEle
<Button.Group>
<TxButton
accountId={councilId}
extrinsic={tx}
isDisabled={!tx}
extrinsic={txSome}
isDisabled={!txSome}
isToplevel
label={t('Cancel selected')}
/>
<TxButton
accountId={councilId}
extrinsic={txAll}
isDisabled={!txAll}
isToplevel
label={t('Cancel all')}
/>
</Button.Group>
)}
</Summary>

4
packages/react-components/src/Button/Button.tsx
View File

@ -10,7 +10,7 @@ import styled from 'styled-components';
import Icon from '../Icon';
import Spinner from '../Spinner';
function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isSelected, label, onClick, onMouseEnter, onMouseLeave, tabIndex, withoutLink }: ButtonProps): React.ReactElement<ButtonProps> {
function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isSelected, isToplevel, label, onClick, onMouseEnter, onMouseLeave, tabIndex, withoutLink }: ButtonProps): React.ReactElement<ButtonProps> {
const _onClick = useCallback(
() => !(isBusy || isDisabled) && onClick && onClick(),
[isBusy, isDisabled, onClick]
@ -18,7 +18,7 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
return (
<button
className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''}${isSelected ? ' isSelected' : ''}${withoutLink ? ' withoutLink' : ''} ${className}`}
className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''}${isSelected ? ' isSelected' : ''}${isToplevel ? ' isToplevel' : ''}${withoutLink ? ' withoutLink' : ''} ${className}`}
onClick={_onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}

1
packages/react-components/src/Button/types.ts
View File

@ -18,6 +18,7 @@ export interface ButtonProps {
isFull?: boolean;
isIcon?: boolean;
isSelected?: boolean;
isToplevel?: boolean;
label?: React.ReactNode;
onClick?: Button$Callback;
onMouseEnter?: Button$Callback;

4
packages/react-components/src/Table/Body.tsx
View File

@ -144,7 +144,7 @@ export default React.memo(styled(Body)`
color: darkorange;
}
.ui--Button-Group .ui--Button {
.ui--Button-Group .ui--Button:not(.isToplevel) {
margin: 0;
}
}
@ -190,7 +190,7 @@ export default React.memo(styled(Body)`
background: transparent;
}
.ui--Button:not(.isIcon):not(:hover) {
.ui--Button:not(.isIcon):not(.isToplevel):not(:hover) {
background: transparent !important;
box-shadow: none !important;
}

3
packages/react-components/src/TxButton.tsx
View File

@ -14,7 +14,7 @@ import Button from './Button';
import { StatusContext } from './Status';
import { useTranslation } from './translate';
function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isBusy, isDisabled, isIcon, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner, withoutLink }: Props): React.ReactElement<Props> {
function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isBusy, isDisabled, isIcon, isToplevel, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner, withoutLink }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const { queueExtrinsic } = useContext(StatusContext);
@ -90,6 +90,7 @@ function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon,
isBusy={isBusy}
isDisabled={isSending || isDisabled || needsAccount}
isIcon={isIcon}
isToplevel={isToplevel}
label={label || (isIcon ? '' : t<string>('Submit'))}
onClick={_onSend}
tooltip={tooltip}

2
packages/react-components/src/styles/index.ts
View File

@ -133,7 +133,7 @@ export default createGlobalStyle<Props>`
}
.ui--Table td .ui--Button {
&:not(.isDisabled):not(.isIcon),
&:not(.isDisabled):not(.isIcon):not(.isToplevel),
&.withoutLink:not(.isDisabled) {
.ui--Icon {
background: transparent;

1
packages/react-components/src/types.ts
View File

@ -62,6 +62,7 @@ export interface TxButtonProps extends TxProps {
isBusy?: boolean;
isDisabled?: boolean;
isIcon?: boolean;
isToplevel?: boolean;
isUnsigned?: boolean;
label?: React.ReactNode;
onClick?: VoidFn;