ghost-portal/packages/react-components/src/Voting.tsx
2020-01-06 16:16:50 +01:00

126 lines
3.1 KiB
TypeScript

// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { Proposal } from '@polkadot/types/interfaces';
import { I18nProps } from '@polkadot/react-components/types';
import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
import BN from 'bn.js';
import React from 'react';
import keyring from '@polkadot/ui-keyring';
import { withMulti, withObservable } from '@polkadot/react-api/hoc';
import translate from './translate';
import Button from './Button';
import ProposedAction from './ProposedAction';
import TxModal, { TxModalProps, TxModalState } from './TxModal';
import VoteToggle from './VoteToggle';
import { isTreasuryProposalVote } from './util';
interface Props extends I18nProps, TxModalProps {
allAccounts?: SubjectInfo;
hash?: string;
idNumber: BN | number;
isCouncil: boolean;
isDisabled?: boolean;
proposal?: Proposal | null;
preContent?: React.ReactNode;
}
interface State extends TxModalState {
voteValue: boolean;
}
class Voting extends TxModal<Props, State> {
public state: State;
protected headerText = (): string => {
const { isCouncil, t } = this.props;
return isCouncil ? t('Vote on council proposal') : t('Vote on proposal');
}
protected accountLabel = (): string => this.props.t('Vote with account');
protected accountHelp = (): string => this.props.t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.');
protected txMethod = (): string => {
const { isCouncil } = this.props;
return isCouncil ? 'council.vote' : 'democracy.vote';
}
protected txParams = (): any[] => {
const { hash, idNumber, isCouncil } = this.props;
const { voteValue } = this.state;
return isCouncil
? [hash, idNumber, voteValue]
: [idNumber, voteValue];
}
constructor (props: Props) {
super(props);
this.state = {
...this.defaultState,
voteValue: true
};
}
protected renderPreContent = (): React.ReactNode => {
const { idNumber, proposal } = this.props;
return (
<>
<ProposedAction
expandNested={isTreasuryProposalVote(proposal)}
idNumber={idNumber}
isCollapsible
proposal={proposal}
/>
<br />
<br />
</>
);
}
protected renderContent = (): React.ReactNode => {
const { voteValue } = this.state;
return (
<VoteToggle
onChange={this.onChangeVote}
value={voteValue}
/>
);
}
protected renderTrigger = (): React.ReactNode => {
const { isDisabled, t } = this.props;
return (
<div className='ui--Row-buttons'>
<Button
isDisabled={isDisabled}
isPrimary
label={t('Vote')}
icon='check'
onClick={this.showModal}
/>
</div>
);
}
private onChangeVote = (voteValue: boolean): void => {
this.setState({ voteValue });
}
}
export default withMulti(
Voting,
translate,
withObservable(keyring.accounts.subject, { propName: 'allAccounts' })
);