Add voting balance display (#1843)

* Add voting balance display

* Linting

* Naming

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<Props, State> {
 
   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<Props, State> {
     return (
       <>
         {api.tx.electionsPhragmen && (
-          <InputBalance
-            label={t('value')}
+          <VoteValue
+            accountId={accountId}
             onChange={this.setVoteValue}
           />
         )}

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<Props> {
+  const _setVoteValue = (value?: BN): void => {
+    onChange(value || ZERO);
+  };
+
+  return (
+    <InputBalance
+      help={t('The amount that is associated with this vote. This value is is locked for the duration of the vote.')}
+      label={t('vote value')}
+      labelExtra={<BalanceVoting label={t('voting balance ')} params={accountId} />}
+      onChange={_setVoteValue}
+    />
+  );
+}
+
+export default translate(VoteValue);

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<Props> {
+export default function Expanded ({ children, className, summary }: Props): React.ReactElement<Props> {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const _toggle = (event: React.SyntheticEvent): void => {

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<Props> {
+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<Props> {
   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}

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<Props> {
+function InputBalance ({ autoFocus, className, defaultValue, help, isDisabled, isError, label, labelExtra, maxValue, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
   return (
     <InputNumber
       autoFocus={autoFocus}
-      className={className}
+      className={`ui--InputBalance ${className}`}
       bitLength={DEFAULT_BITLENGTH}
       defaultValue={defaultValue}
       help={help}
@@ -40,6 +42,7 @@ export default function InputBalance ({ autoFocus, className, defaultValue, help
       isError={isError}
       isSi
       label={label}
+      labelExtra={labelExtra}
       maxValue={maxValue}
       onChange={onChange}
       onEnter={onEnter}
@@ -52,3 +55,9 @@ export default function InputBalance ({ autoFocus, className, defaultValue, help
     />
   );
 }
+
+export default styled(InputBalance)`
+  &&:not(.label-small) .labelExtra {
+    right: 6.5rem;
+  }
+`;

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;

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<Props> {
+function AvailableDisplay ({ balances_all, children, className, label = '' }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       {label}{

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<Props> {
+  return (
+    <div className={className}>
+      {label}{
+        balances_all
+          ? formatBalance(balances_all.votingBalance)
+          : '0'
+      }{children}
+    </div>
+  );
+}
+
+export default withCalls<Props>(
+  ['derive.balances.all', { paramName: 'params' }]
+)(BalanceVoting);

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';