Add chill functionality (#847)

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

@@ -6,14 +6,13 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { AccountId } from '@polkadot/types';
 import { Button, InputAddress, InputBalance, Modal, TxButton, Dropdown } from '@polkadot/ui-app';
 
 import translate from '../translate';
 
 type Props = I18nProps & {
   accountId: string,
-  controllerId: AccountId,
+  controllerId: string,
   isOpen: boolean,
   onClose: () => void
 };
@@ -85,15 +84,15 @@ class Bonding extends React.PureComponent<Props, State> {
         <Modal.Content className='ui--signer-Signer-Content'>
           <InputAddress
             className='medium'
+            defaultValue={accountId}
             isDisabled
             label={t('stash account')}
-            value={accountId}
           />
           <InputAddress
             className='medium'
+            defaultValue={controllerId}
             isDisabled
             label={t('controller account')}
-            value={controllerId}
           />
           <InputBalance
             autoFocus

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

@@ -5,14 +5,13 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AccountId } from '@polkadot/types';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/ui-app';
 
 import translate from '../translate';
 
 type Props = I18nProps & {
   accountId: string,
-  controllerId: AccountId | null,
+  controllerId: string | null,
   isOpen: boolean,
   onClose: () => void
 };

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

@@ -5,7 +5,6 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AccountId } from '@polkadot/types';
 import { Button, Input, InputAddress, Modal, TxButton } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
@@ -16,7 +15,7 @@ type Props = I18nProps & {
   isOpen: boolean,
   onClose: () => void,
   intentions: Array<string>,
-  stashId: AccountId,
+  stashId: string,
   validators: Array<string>
 };
 
@@ -92,15 +91,15 @@ class Nominating extends React.PureComponent<Props, State> {
         <Modal.Content className='ui--signer-Signer-Content'>
           <InputAddress
             className='medium'
+            defaultValue={accountId}
             isDisabled
             label={t('account')}
-            value={accountId}
           />
           <InputAddress
             className='medium'
+            defaultValue={stashId}
             isDisabled
             label={t('stash account')}
-            value={stashId}
           />
           <Input
             autoFocus

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

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { AccountId, ValidatorPrefs } from '@polkadot/types';
+import { ValidatorPrefs } from '@polkadot/types';
 import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton } from '@polkadot/ui-app';
 
 import translate from '../translate';
@@ -16,7 +16,7 @@ type Props = I18nProps & {
   isOpen: boolean,
   onClose: () => void,
   preferences: ValidatorPrefs,
-  stashId: AccountId
+  stashId: string
 };
 
 type State = {
@@ -103,15 +103,15 @@ class Staking extends React.PureComponent<Props, State> {
         <Modal.Content className='ui--signer-Signer-Content'>
           <InputAddress
             className='medium'
+            defaultValue={accountId}
             isDisabled
             label={t('account')}
-            value={accountId}
           />
           <InputAddress
             className='medium'
+            defaultValue={stashId}
             isDisabled
             label={t('stash account')}
-            value={stashId}
           />
           <InputNumber
             autoFocus

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

@@ -8,7 +8,7 @@ import { ApiProps } from '@polkadot/ui-api/types';
 
 import React from 'react';
 import { AccountId, Balance, Option, StakingLedger, ValidatorPrefs } from '@polkadot/types';
-import { AddressMini, AddressSummary, Button } from '@polkadot/ui-app';
+import { AddressMini, AddressSummary, Button, TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
 import Bonding from './Bonding';
@@ -38,10 +38,11 @@ type State = {
   isControllerOpen: boolean,
   isNominateOpen: boolean,
   isStakingOpen: boolean,
-  bondedId: AccountId | null,
-  controllerId: AccountId | null,
-  nomineeId: AccountId | null,
-  stashId: AccountId | null
+  isUnbondOpen: boolean,
+  bondedId: string | null,
+  controllerId: string | null,
+  nomineeId: string | null,
+  stashId: string | null
 };
 
 class Account extends React.PureComponent<Props, State> {
@@ -50,6 +51,7 @@ class Account extends React.PureComponent<Props, State> {
     isControllerOpen: false,
     isNominateOpen: false,
     isStakingOpen: false,
+    isUnbondOpen: false,
     bondedId: null,
     controllerId: null,
     nomineeId: null,
@@ -58,17 +60,17 @@ class Account extends React.PureComponent<Props, State> {
 
   static getDerivedStateFromProps ({ session_nextKeyFor, staking_bonded, staking_ledger, staking_nominating }: Props): Partial<State> {
     return {
-      bondedId: staking_bonded
-        ? staking_bonded.unwrapOr(null)
+      bondedId: staking_bonded && staking_bonded.isSome
+        ? staking_bonded.unwrap().toString()
         : null,
-      controllerId: session_nextKeyFor
-        ? session_nextKeyFor.unwrapOr(null)
+      controllerId: session_nextKeyFor && session_nextKeyFor.isSome
+        ? session_nextKeyFor.unwrap().toString()
         : null,
-      nomineeId: staking_nominating
-        ? staking_nominating.unwrapOr(null)
+      nomineeId: staking_nominating && staking_nominating.isSome
+        ? staking_nominating.unwrap().toString()
         : null,
       stashId: staking_ledger && staking_ledger.isSome
-        ? staking_ledger.unwrap().stash
+        ? staking_ledger.unwrap().stash.toString()
         : null
     };
   }
@@ -149,6 +151,24 @@ class Account extends React.PureComponent<Props, State> {
     );
   }
 
+  // private renderUnbond () {
+  //   const { accountId } = this.props;
+  //   const { controllerId, isBondingOpen } = this.state;
+
+  //   if (!controllerId) {
+  //     return null;
+  //   }
+
+  //   return (
+  //     <UnBond
+  //       accountId={accountId}
+  //       controllerId={controllerId}
+  //       isOpen={isBondingOpen}
+  //       onClose={this.toggleBonding}
+  //     />
+  //   );
+  // }
+
   private renderNominee () {
     const { balanceArray } = this.props;
     const { nomineeId } = this.state;
@@ -208,7 +228,7 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderButtons () {
-    const { t } = this.props;
+    const { accountId, t } = this.props;
     const { controllerId, stashId } = this.state;
     const buttons = [];
 
@@ -235,6 +255,15 @@ class Account extends React.PureComponent<Props, State> {
         );
       }
     } else {
+      // buttons.push(
+      //   <Button
+      //     isNegative
+      //     label={t('Unbond')}
+      //     key='unbond'
+      //     onClick={this.toggleUnbond}
+      //   />
+      // );
+      // buttons.push(<Button.Or key='stake.or' />);
       buttons.push(
         <Button
           isPrimary
@@ -252,6 +281,16 @@ class Account extends React.PureComponent<Props, State> {
           label={t('Nominate')}
         />
       );
+      buttons.push(<Button.Or key='stop.or' />);
+      buttons.push(
+        <TxButton
+          accountId={accountId}
+          isNegative
+          label={t('Stop')}
+          key='stop'
+          tx='staking.chill'
+        />
+      );
     }
 
     return (
@@ -284,6 +323,12 @@ class Account extends React.PureComponent<Props, State> {
       isStakingOpen: !isStakingOpen
     }));
   }
+
+  // private toggleUnbond = () => {
+  //   this.setState(({ isUnbondOpen }) => ({
+  //     isUnbondOpen: !isUnbondOpen
+  //   }));
+  // }
 }
 
 export default translate(

packages/ui-app/src/TxButton.tsx

@@ -7,7 +7,7 @@ import { QueueTx$ExtrinsicAdd, TxCallback } from './Status/types';
 
 import React from 'react';
 import { withApi } from '@polkadot/ui-api';
-import { assert } from '@polkadot/util';
+import { assert, isUndefined } from '@polkadot/util';
 
 import { QueueConsumer } from './Status/Context';
 import Button from './Button';
@@ -18,24 +18,27 @@ type InjectedProps = {
 
 type Props = ApiProps & {
   accountId?: string,
+  isPrimary?: boolean,
   isDisabled?: boolean,
+  isNegative?: boolean,
   label: React.ReactNode,
   onClick?: () => any,
   onFailed?: TxCallback,
   onSuccess?: TxCallback,
   onUpdate?: TxCallback,
-  params: Array<any>,
+  params?: Array<any>,
   tx: string
 };
 
 class TxButtonInner extends React.PureComponent<Props & InjectedProps> {
   render () {
-    const { accountId, isDisabled, label } = this.props;
+    const { accountId, isDisabled, isNegative, isPrimary, label } = this.props;
 
     return (
       <Button
         isDisabled={isDisabled || !accountId}
-        isPrimary
+        isNegative={isNegative}
+        isPrimary={isUndefined(isPrimary) ? !isNegative : isPrimary}
         label={label}
         onClick={this.send}
       />
@@ -43,7 +46,7 @@ class TxButtonInner extends React.PureComponent<Props & InjectedProps> {
   }
 
   private send = (): void => {
-    const { accountId, api, onClick, onFailed, onSuccess, onUpdate, params, queueExtrinsic, tx } = this.props;
+    const { accountId, api, onClick, onFailed, onSuccess, onUpdate, params = [], queueExtrinsic, tx } = this.props;
 
     assert(tx, 'Expected tx param passed to TxButton');