Allow bonding of extra funds (#918)

packages/app-staking/src/Account/Bond.tsx

@@ -30,7 +30,7 @@ const stashOptions = [
   { text: 'Controller account', value: 2 }
 ];
 
-class Bonding extends React.PureComponent<Props, State> {
+class Bond extends React.PureComponent<Props, State> {
   state: State = {
     controllerId: null,
     destination: 0,
@@ -147,4 +147,4 @@ class Bonding extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(Bonding);
+export default translate(Bond);

packages/app-staking/src/Account/BondExtra.tsx

@@ -0,0 +1,98 @@
+// 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 { I18nProps } from '@polkadot/ui-app/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/ui-app';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  accountId: string,
+  isOpen: boolean,
+  onClose: () => void
+};
+
+type State = {
+  maxAdditional?: BN
+};
+
+class BondExtra extends React.PureComponent<Props, State> {
+  state: State = {};
+
+  render () {
+    const { accountId, isOpen, onClose, t } = this.props;
+    const { maxAdditional } = this.state;
+    const canSubmit = !!maxAdditional && maxAdditional.gtn(0);
+
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
+      <Modal
+        className='staking--BondExtra'
+        dimmer='inverted'
+        open
+        size='small'
+      >
+        {this.renderContent()}
+        <Modal.Actions>
+          <Button.Group>
+            <Button
+              isNegative
+              onClick={onClose}
+              label={t('Cancel')}
+            />
+            <Button.Or />
+            <TxButton
+              accountId={accountId}
+              isDisabled={!canSubmit}
+              isPrimary
+              label={t('Bond')}
+              onClick={onClose}
+              params={[maxAdditional]}
+              tx='staking.bondExtra'
+            />
+          </Button.Group>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+
+  private renderContent () {
+    const { accountId, t } = this.props;
+
+    return (
+      <>
+        <Modal.Header>
+          {t('Bond Extra')}
+        </Modal.Header>
+        <Modal.Content className='ui--signer-Signer-Content'>
+          <InputAddress
+            className='medium'
+            defaultValue={accountId}
+            isDisabled
+            label={t('stash account')}
+          />
+          <InputBalance
+            autoFocus
+            className='medium'
+            help={t('The maximum amount to increase the bonded value, this is adjusted using the available free funds on the account.')}
+            label={t('max additional value')}
+            onChange={this.onChangeValue}
+          />
+        </Modal.Content>
+      </>
+    );
+  }
+
+  private onChangeValue = (maxAdditional?: BN) => {
+    this.setState({ maxAdditional });
+  }
+}
+
+export default translate(BondExtra);

packages/app-staking/src/Account/index.tsx

@@ -13,7 +13,8 @@ import { AccountId, Balance, Exposure, Option, StakingLedger, ValidatorPrefs } f
 import { AddressMini, AddressSummary, Button, TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
-import Bonding from './Bonding';
+import Bond from './Bond';
+import BondExtra from './BondExtra';
 import Nominating from './Nominating';
 import SessionKey from './SessionKey';
 import Validating from './Validating';
@@ -37,7 +38,8 @@ type Props = ApiProps & I18nProps & {
 };
 
 type State = {
-  isBondingOpen: boolean,
+  isBondOpen: boolean,
+  isBondExtraOpen: boolean,
   isNominateOpen: boolean,
   isSessionKeyOpen: boolean,
   isValidatingOpen: boolean,
@@ -49,7 +51,8 @@ type State = {
 
 class Account extends React.PureComponent<Props, State> {
   state: State = {
-    isBondingOpen: false,
+    isBondOpen: false,
+    isBondExtraOpen: false,
     isSessionKeyOpen: false,
     isNominateOpen: false,
     isValidatingOpen: false,
@@ -78,7 +81,8 @@ class Account extends React.PureComponent<Props, State> {
 
     return (
       <article className='staking--Account'>
-        {this.renderBonding()}
+        {this.renderBond()}
+        {this.renderBondExtra()}
         {this.renderNominating()}
         {this.renderSessionKey()}
         {this.renderValidating()}
@@ -101,16 +105,29 @@ class Account extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderBonding () {
+  private renderBond () {
     const { accountId } = this.props;
-    const { bondedId, isBondingOpen } = this.state;
+    const { bondedId, isBondOpen } = this.state;
 
     return (
-      <Bonding
+      <Bond
         accountId={accountId}
         bondedId={bondedId}
-        isOpen={isBondingOpen}
-        onClose={this.toggleBonding}
+        isOpen={isBondOpen}
+        onClose={this.toggleBond}
+      />
+    );
+  }
+
+  private renderBondExtra () {
+    const { accountId } = this.props;
+    const { isBondExtraOpen } = this.state;
+
+    return (
+      <BondExtra
+        accountId={accountId}
+        isOpen={isBondExtraOpen}
+        onClose={this.toggleBondExtra}
       />
     );
   }
@@ -299,12 +316,19 @@ class Account extends React.PureComponent<Props, State> {
           <Button
             isPrimary
             key='bond'
-            onClick={this.toggleBonding}
+            onClick={this.toggleBond}
             label={t('Bond Funds')}
           />
         );
       } else {
-        return null;
+        buttons.push(
+          <Button
+            isPrimary
+            key='bond'
+            onClick={this.toggleBondExtra}
+            label={t('Bond Additional')}
+          />
+        );
       }
     } else {
       const nominees = this.getNominees();
@@ -360,9 +384,15 @@ class Account extends React.PureComponent<Props, State> {
     );
   }
 
-  private toggleBonding = () => {
-    this.setState(({ isBondingOpen }) => ({
-      isBondingOpen: !isBondingOpen
+  private toggleBond = () => {
+    this.setState(({ isBondOpen }) => ({
+      isBondOpen: !isBondOpen
+    }));
+  }
+
+  private toggleBondExtra = () => {
+    this.setState(({ isBondExtraOpen }) => ({
+      isBondExtraOpen: !isBondExtraOpen
     }));
   }