diff --git a/packages/app-council/src/Overview/Vote.tsx b/packages/app-council/src/Overview/Vote.tsx index 7d15cf4d95..a830bcb402 100644 --- a/packages/app-council/src/Overview/Vote.tsx +++ b/packages/app-council/src/Overview/Vote.tsx @@ -13,10 +13,11 @@ import React from 'react'; import styled from 'styled-components'; import { createType } from '@polkadot/types'; import { withCalls, withMulti } from '@polkadot/react-api'; -import { AddressRow, Button, InputBalance, Toggle } from '@polkadot/react-components'; +import { AddressRow, Button, Toggle } from '@polkadot/react-components'; import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal'; import translate from '../translate'; +import VoteValue from './VoteValue'; interface Props extends ApiProps, ComponentProps, TxModalProps { voterPositions?: DerivedVoterPositions; @@ -159,7 +160,7 @@ class Vote extends TxModal { protected renderContent = (): React.ReactNode => { const { api, electionsInfo: { candidates, members }, t } = this.props; - const { votes } = this.state; + const { accountId, votes } = this.state; const _candidates = candidates.map((accountId): [AccountId, boolean] => [accountId, false]); const available = api.tx.electionsPhragmen ? members.map(([accountId]): [AccountId, boolean] => [accountId, true]).concat(_candidates) @@ -168,8 +169,8 @@ class Vote extends TxModal { return ( <> {api.tx.electionsPhragmen && ( - )} diff --git a/packages/app-council/src/Overview/VoteValue.tsx b/packages/app-council/src/Overview/VoteValue.tsx new file mode 100644 index 0000000000..ddb8d19e61 --- /dev/null +++ b/packages/app-council/src/Overview/VoteValue.tsx @@ -0,0 +1,38 @@ +// Copyright 2017-2019 @polkadot/ui-staking 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 { DerivedBalances } from '@polkadot/api-derive/types'; +import { I18nProps } from '@polkadot/react-components/types'; + +import BN from 'bn.js'; +import React from 'react'; +import { InputBalance } from '@polkadot/react-components'; +import { BalanceVoting } from '@polkadot/react-query'; + +import translate from '../translate'; + +interface Props extends I18nProps { + accountId?: string | null; + allBalances?: DerivedBalances; + onChange: (value: BN) => void; +} + +const ZERO = new BN(0); + +function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement { + const _setVoteValue = (value?: BN): void => { + onChange(value || ZERO); + }; + + return ( + } + onChange={_setVoteValue} + /> + ); +} + +export default translate(VoteValue); diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx index 97c8fb1889..e584ad6052 100644 --- a/packages/react-components/src/Expander.tsx +++ b/packages/react-components/src/Expander.tsx @@ -11,7 +11,7 @@ export interface Props extends BareProps { summary: React.ReactNode; } -export default function Expanded ({ children, className, style, summary }: Props): React.ReactElement { +export default function Expanded ({ children, className, summary }: Props): React.ReactElement { const [isExpanded, setIsExpanded] = useState(false); const _toggle = (event: React.SyntheticEvent): void => { diff --git a/packages/react-components/src/Input.tsx b/packages/react-components/src/Input.tsx index fff2835994..f0bf31d199 100644 --- a/packages/react-components/src/Input.tsx +++ b/packages/react-components/src/Input.tsx @@ -25,6 +25,7 @@ interface Props extends BareProps { isHidden?: boolean; isReadOnly?: boolean; label?: React.ReactNode; + labelExtra?: React.ReactNode; max?: any; maxLength?: number; min?: any; @@ -85,7 +86,7 @@ const isSelectAll = (key: string, isPreKeyDown: boolean): boolean => let counter = 0; -export default function Input ({ autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, isReadOnly = false, label, max, maxLength, min, name, onBlur, onChange, onEnter, onKeyDown, onKeyUp, onPaste, placeholder, style, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement { +export default function Input ({ autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, isReadOnly = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onKeyDown, onKeyUp, onPaste, placeholder, style, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement { const [stateName] = useState(`in_${counter++}_at_${Date.now()}`); const _onBlur = (): void => { @@ -114,6 +115,7 @@ export default function Input ({ autoFocus = false, children, className, default className={className} help={help} label={label} + labelExtra={labelExtra} style={style} withEllipsis={withEllipsis} withLabel={withLabel} diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx index fad76993ee..388ec64672 100644 --- a/packages/react-components/src/InputBalance.tsx +++ b/packages/react-components/src/InputBalance.tsx @@ -6,6 +6,7 @@ import { BareProps, BitLength } from './types'; import BN from 'bn.js'; import React from 'react'; +import styled from 'styled-components'; import { BitLengthOption } from '@polkadot/react-components/constants'; import { InputNumber } from '@polkadot/react-components'; @@ -15,7 +16,8 @@ interface Props extends BareProps { help?: React.ReactNode; isDisabled?: boolean; isError?: boolean; - label?: any; + label?: React.ReactNode; + labelExtra?: React.ReactNode; maxValue?: BN; onChange?: (value?: BN) => void; onEnter?: () => void; @@ -28,11 +30,11 @@ interface Props extends BareProps { const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength; -export default function InputBalance ({ autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement { +function InputBalance ({ autoFocus, className, defaultValue, help, isDisabled, isError, label, labelExtra, maxValue, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement { return ( ); } + +export default styled(InputBalance)` + &&:not(.label-small) .labelExtra { + right: 6.5rem; + } +`; diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx index a2b1bd37a5..87459d0cd5 100644 --- a/packages/react-components/src/InputNumber.tsx +++ b/packages/react-components/src/InputNumber.tsx @@ -26,7 +26,8 @@ interface Props extends BareProps, I18nProps { isError?: boolean; isSi?: boolean; isDecimal?: boolean; - label?: any; + label?: React.ReactNode; + labelExtra?: React.ReactNode; maxLength?: number; maxValue?: BN; onChange?: (value?: BN) => void; diff --git a/packages/react-query/src/Available.tsx b/packages/react-query/src/Available.tsx index 29723d3282..e414c82c61 100644 --- a/packages/react-query/src/Available.tsx +++ b/packages/react-query/src/Available.tsx @@ -18,7 +18,7 @@ interface Props extends BareProps, CallProps { params?: AccountId | AccountIndex | Address | string | Uint8Array | null; } -export function AvailableDisplay ({ balances_all, children, className, label = '' }: Props): React.ReactElement { +function AvailableDisplay ({ balances_all, children, className, label = '' }: Props): React.ReactElement { return (
{label}{ diff --git a/packages/react-query/src/BalanceVoting.tsx b/packages/react-query/src/BalanceVoting.tsx new file mode 100644 index 0000000000..c887af9450 --- /dev/null +++ b/packages/react-query/src/BalanceVoting.tsx @@ -0,0 +1,35 @@ +/* eslint-disable @typescript-eslint/camelcase */ +// Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types'; +import { DerivedBalances } from '@polkadot/api-derive/types'; +import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces'; + +import React from 'react'; +import { formatBalance } from '@polkadot/util'; +import { withCalls } from '@polkadot/react-api'; + +interface Props extends BareProps, CallProps { + balances_all?: DerivedBalances; + children?: React.ReactNode; + label?: React.ReactNode; + params?: AccountId | AccountIndex | Address | string | Uint8Array | null; +} + +function BalanceVoting ({ balances_all, children, className, label = '' }: Props): React.ReactElement { + return ( +
+ {label}{ + balances_all + ? formatBalance(balances_all.votingBalance) + : '0' + }{children} +
+ ); +} + +export default withCalls( + ['derive.balances.all', { paramName: 'params' }] +)(BalanceVoting); diff --git a/packages/react-query/src/index.ts b/packages/react-query/src/index.ts index 22f708237a..f3cba72e39 100644 --- a/packages/react-query/src/index.ts +++ b/packages/react-query/src/index.ts @@ -6,6 +6,7 @@ export { default as AccountIndex } from './AccountIndex'; export { default as AccountName } from './AccountName'; export { default as Available } from './Available'; export { default as Balance } from './Balance'; +export { default as BalanceVoting } from './BalanceVoting'; export { BlockAuthors, BlockAuthorsContext } from './BlockAuthors'; export { default as Bonded } from './Bonded'; export { default as BestFinalized } from './BestFinalized';