From 50092a7b743d8b7717e0576bbcb8ec84319ff11e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 27 Mar 2019 12:10:12 +0100
Subject: [PATCH] Rename Stake -> Validate, show controller/stash (#853)

* Rename Stake -> Validate, show controller/stash

* Small styling updates

* account -> controller account
---
 CHANGELOG.md                                  |   5 +
 packages/app-staking/src/Account/Bonding.tsx  |   6 +-
 .../app-staking/src/Account/Nominating.tsx    |   2 +-
 .../Account/{Staking.tsx => Validating.tsx}   |   2 +-
 packages/app-staking/src/Account/index.tsx    | 157 +++++++++++-------
 packages/app-staking/src/index.css            |  20 ++-
 packages/apps/package.json                    |   2 +-
 packages/ui-api/package.json                  |   2 +-
 packages/ui-app/package.json                  |   8 +-
 yarn.lock                                     |  46 ++---
 10 files changed, 150 insertions(+), 100 deletions(-)
 rename packages/app-staking/src/Account/{Staking.tsx => Validating.tsx} (98%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a389f181ed..260a73d361 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 0.27.1
+
+- Bring in new staking & nominating functions
+- New faster crypto algorithms
+
 # 0.26.1
 
 - Swap keyring to HDKD derivation, mnemonic keys are now not backwards compatible with those created earlier. (Defaults are still for ed25519)
diff --git a/packages/app-staking/src/Account/Bonding.tsx b/packages/app-staking/src/Account/Bonding.tsx
index 92b945bfa8..f5afd757f9 100644
--- a/packages/app-staking/src/Account/Bonding.tsx
+++ b/packages/app-staking/src/Account/Bonding.tsx
@@ -12,7 +12,7 @@ import translate from '../translate';
 
 type Props = I18nProps & {
   accountId: string,
-  sessionId: string,
+  bondedId: string,
   isOpen: boolean,
   onClose: () => void
 };
@@ -76,7 +76,7 @@ class Bonding extends React.PureComponent<Props, State> {
   }
 
   private renderContent () {
-    const { accountId, sessionId, t } = this.props;
+    const { accountId, bondedId, t } = this.props;
     const { controllerId } = this.state;
 
     return (
@@ -93,7 +93,7 @@ class Bonding extends React.PureComponent<Props, State> {
           />
           <InputAddress
             className='medium'
-            defaultValue={sessionId}
+            defaultValue={bondedId}
             label={t('controller account')}
             onChange={this.onChangeController}
             value={controllerId}
diff --git a/packages/app-staking/src/Account/Nominating.tsx b/packages/app-staking/src/Account/Nominating.tsx
index e9ee2620d3..86c02ec562 100644
--- a/packages/app-staking/src/Account/Nominating.tsx
+++ b/packages/app-staking/src/Account/Nominating.tsx
@@ -93,7 +93,7 @@ class Nominating extends React.PureComponent<Props, State> {
             className='medium'
             defaultValue={accountId}
             isDisabled
-            label={t('account')}
+            label={t('controller account')}
           />
           <InputAddress
             className='medium'
diff --git a/packages/app-staking/src/Account/Staking.tsx b/packages/app-staking/src/Account/Validating.tsx
similarity index 98%
rename from packages/app-staking/src/Account/Staking.tsx
rename to packages/app-staking/src/Account/Validating.tsx
index 623c4b7824..42d580a0ca 100644
--- a/packages/app-staking/src/Account/Staking.tsx
+++ b/packages/app-staking/src/Account/Validating.tsx
@@ -105,7 +105,7 @@ class Staking extends React.PureComponent<Props, State> {
             className='medium'
             defaultValue={accountId}
             isDisabled
-            label={t('account')}
+            label={t('controller account')}
           />
           <InputAddress
             className='medium'
diff --git a/packages/app-staking/src/Account/index.tsx b/packages/app-staking/src/Account/index.tsx
index 9ee9d57a42..4b9db6392d 100644
--- a/packages/app-staking/src/Account/index.tsx
+++ b/packages/app-staking/src/Account/index.tsx
@@ -12,9 +12,9 @@ import { AddressMini, AddressSummary, Button, TxButton } from '@polkadot/ui-app'
 import { withCalls } from '@polkadot/ui-api';
 
 import Bonding from './Bonding';
-import SessionKey from './SessionKey';
-import Staking from './Staking';
 import Nominating from './Nominating';
+import SessionKey from './SessionKey';
+import Validating from './Validating';
 import translate from '../translate';
 
 type Props = ApiProps & I18nProps & {
@@ -35,9 +35,9 @@ type Props = ApiProps & I18nProps & {
 
 type State = {
   isBondingOpen: boolean,
-  isKeyOpen: boolean,
   isNominateOpen: boolean,
-  isStakingOpen: boolean,
+  isSessionKeyOpen: boolean,
+  isValidatingOpen: boolean,
   isUnbondOpen: boolean,
   bondedId: string | null,
   sessionId: string | null,
@@ -48,9 +48,9 @@ type State = {
 class Account extends React.PureComponent<Props, State> {
   state: State = {
     isBondingOpen: false,
-    isKeyOpen: false,
+    isSessionKeyOpen: false,
     isNominateOpen: false,
-    isStakingOpen: false,
+    isValidatingOpen: false,
     isUnbondOpen: false,
     bondedId: null,
     sessionId: null,
@@ -82,8 +82,8 @@ class Account extends React.PureComponent<Props, State> {
       <article className='staking--Account'>
         {this.renderBonding()}
         {this.renderNominating()}
-        {this.renderKey()}
-        {this.renderStaking()}
+        {this.renderSessionKey()}
+        {this.renderValidating()}
         <AddressSummary
           balance={balanceArray(accountId)}
           name={name}
@@ -92,6 +92,8 @@ class Account extends React.PureComponent<Props, State> {
         >
           <div className='staking--Account-expand'>
             {this.renderButtons()}
+            {this.renderBondedId()}
+            {this.renderStashId()}
             {this.renderNominee()}
             {this.renderNominators()}
           </div>
@@ -102,50 +104,50 @@ class Account extends React.PureComponent<Props, State> {
 
   private renderBonding () {
     const { accountId } = this.props;
-    const { sessionId, isBondingOpen } = this.state;
+    const { bondedId, isBondingOpen } = this.state;
 
-    if (!sessionId) {
+    if (!bondedId) {
       return null;
     }
 
     return (
       <Bonding
         accountId={accountId}
-        sessionId={sessionId}
+        bondedId={bondedId}
         isOpen={isBondingOpen}
         onClose={this.toggleBonding}
       />
     );
   }
 
-  private renderStaking () {
+  private renderValidating () {
     const { accountId, staking_validators } = this.props;
-    const { isStakingOpen, stashId } = this.state;
+    const { isValidatingOpen, stashId } = this.state;
 
-    if (!staking_validators || !isStakingOpen || !stashId) {
+    if (!staking_validators || !isValidatingOpen || !stashId) {
       return null;
     }
 
     return (
-      <Staking
+      <Validating
         accountId={accountId}
         isOpen
-        onClose={this.toggleStaking}
+        onClose={this.toggleValidating}
         preferences={staking_validators}
         stashId={stashId}
       />
     );
   }
 
-  private renderKey () {
+  private renderSessionKey () {
     const { accountId } = this.props;
-    const { isKeyOpen } = this.state;
+    const { isSessionKeyOpen } = this.state;
 
     return (
       <SessionKey
         accountId={accountId}
-        isOpen={isKeyOpen}
-        onClose={this.toggleKey}
+        isOpen={isSessionKeyOpen}
+        onClose={this.toggleSessionKey}
       />
     );
   }
@@ -177,11 +179,14 @@ class Account extends React.PureComponent<Props, State> {
     }
 
     return (
-      <AddressMini
-        balance={balanceArray(nomineeId)}
-        value={nomineeId}
-        withBalance
-      />
+      <div className='staking--Account-detail'>
+        <label className='staking--label'>nominating</label>
+        <AddressMini
+          balance={balanceArray(nomineeId)}
+          value={nomineeId}
+          withBalance
+        />
+      </div>
     );
   }
 
@@ -193,15 +198,54 @@ class Account extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div className='ui--Nominators'>
-        {staking_nominatorsFor.map((nominator) => (
-          <AddressMini
-            isPadded={false}
-            key={nominator}
-            value={nominator}
-            withBalance
-          />
-        ))}
+      <div className='staking--Account-detail'>
+        <label className='staking--label'>nominators</label>
+        <div className='ui--Nominators'>
+          {staking_nominatorsFor.map((nominator) => (
+            <AddressMini
+              isPadded={false}
+              key={nominator}
+              value={nominator}
+              withBalance
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  private renderBondedId () {
+    const { bondedId } = this.state;
+
+    if (!bondedId) {
+      return null;
+    }
+
+    return (
+      <div className='staking--Account-detail'>
+        <label className='staking--label'>controller account</label>
+        <AddressMini
+          value={bondedId}
+          withBalance
+        />
+      </div>
+    );
+  }
+
+  private renderStashId () {
+    const { stashId } = this.state;
+
+    if (!stashId) {
+      return null;
+    }
+
+    return (
+      <div className='staking--Account-detail'>
+        <label className='staking--label'>stash account</label>
+        <AddressMini
+          value={stashId}
+          withBalance
+        />
       </div>
     );
   }
@@ -232,17 +276,7 @@ class Account extends React.PureComponent<Props, State> {
     const buttons = [];
 
     if (!stashId) {
-      buttons.push(
-        <Button
-          isPrimary
-          key='session'
-          onClick={this.toggleKey}
-          label={t('Set Session Key')}
-        />
-      );
-
       if (sessionId) {
-        buttons.push(<Button.Or key='bond.or' />);
         buttons.push(
           <Button
             isPrimary
@@ -251,6 +285,15 @@ class Account extends React.PureComponent<Props, State> {
             label={t('Bond')}
           />
         );
+      } else {
+        buttons.push(
+          <Button
+            isPrimary
+            key='session'
+            onClick={this.toggleSessionKey}
+            label={t('Set Session Key')}
+          />
+        );
       }
     } else {
       // buttons.push(
@@ -261,13 +304,13 @@ class Account extends React.PureComponent<Props, State> {
       //     onClick={this.toggleUnbond}
       //   />
       // );
-      // buttons.push(<Button.Or key='stake.or' />);
+      // buttons.push(<Button.Or key='validate.or' />);
       buttons.push(
         <Button
           isPrimary
-          key='stake'
-          onClick={this.toggleStaking}
-          label={t('Stake')}
+          key='validate'
+          onClick={this.toggleValidating}
+          label={t('Validate')}
         />
       );
       buttons.push(<Button.Or key='nominate.or' />);
@@ -304,21 +347,21 @@ class Account extends React.PureComponent<Props, State> {
     }));
   }
 
-  private toggleKey = () => {
-    this.setState(({ isKeyOpen }) => ({
-      isKeyOpen: !isKeyOpen
-    }));
-  }
-
   private toggleNominate = () => {
     this.setState(({ isNominateOpen }) => ({
       isNominateOpen: !isNominateOpen
     }));
   }
 
-  private toggleStaking = () => {
-    this.setState(({ isStakingOpen }) => ({
-      isStakingOpen: !isStakingOpen
+  private toggleSessionKey = () => {
+    this.setState(({ isSessionKeyOpen }) => ({
+      isSessionKeyOpen: !isSessionKeyOpen
+    }));
+  }
+
+  private toggleValidating = () => {
+    this.setState(({ isValidatingOpen }) => ({
+      isValidatingOpen: !isValidatingOpen
     }));
   }
 
diff --git a/packages/app-staking/src/index.css b/packages/app-staking/src/index.css
index f4ce876f87..3bfd9a561a 100644
--- a/packages/app-staking/src/index.css
+++ b/packages/app-staking/src/index.css
@@ -3,8 +3,6 @@
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
 .staking--App {
-  padding: 1em 2rem;
-
   .rx--updated {
     background: transparent !important;
   }
@@ -18,14 +16,10 @@
 .staking--Account {
   display: inline-block;
   position: relative;
-}
 
-.staking--Account .ui--Button-Group {
-  margin-bottom: 1em;
-}
-
-.staking--Account .ui--AddressMini {
-  display: block;
+  .ui--AddressMini {
+    display: block;
+  }
 }
 
 .ui--Nominators {
@@ -102,3 +96,11 @@
   font-weight: normal;
   line-height: 1.2rem;
 }
+
+.staking--Account-detail {
+  margin-top: 0.75rem;
+
+  .staking--label {
+    margin-bottom: -0.25rem;
+  }
+}
diff --git a/packages/apps/package.json b/packages/apps/package.json
index 9fa1ad1c9c..651666b9c6 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.0",
     "@polkadot/ui-app": "^0.27.0-beta.15",
-    "@polkadot/ui-assets": "^0.33.1",
+    "@polkadot/ui-assets": "^0.34.0-beta.0",
     "@polkadot/ui-signer": "^0.27.0-beta.15",
     "@types/react-tooltip": "^3.9.1",
     "react-tooltip": "^3.9.2"
diff --git a/packages/ui-api/package.json b/packages/ui-api/package.json
index c27e8e60e7..75b928ec24 100644
--- a/packages/ui-api/package.json
+++ b/packages/ui-api/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.0",
     "@polkadot/api": "^0.52.0-beta.1",
-    "@polkadot/ui-util": "^0.33.1",
+    "@polkadot/ui-util": "^0.34.0-beta.0",
     "rxjs-compat": "^6.3.2"
   }
 }
diff --git a/packages/ui-app/package.json b/packages/ui-app/package.json
index 4ad260c655..ff63caf320 100644
--- a/packages/ui-app/package.json
+++ b/packages/ui-app/package.json
@@ -12,11 +12,11 @@
   "dependencies": {
     "@babel/runtime": "^7.4.0",
     "@polkadot/ui-api": "^0.27.0-beta.15",
-    "@polkadot/ui-identicon": "^0.33.1",
-    "@polkadot/ui-keyring": "^0.33.1",
+    "@polkadot/ui-identicon": "^0.34.0-beta.0",
+    "@polkadot/ui-keyring": "^0.34.0-beta.0",
     "@polkadot/ui-reactive": "^0.27.0-beta.15",
-    "@polkadot/ui-settings": "^0.33.1",
-    "@polkadot/ui-util": "^0.33.1",
+    "@polkadot/ui-settings": "^0.34.0-beta.0",
+    "@polkadot/ui-util": "^0.34.0-beta.0",
     "@types/chart.js": "^2.7.45",
     "@types/classnames": "^2.2.7",
     "@types/i18next": "^12.1.0",
diff --git a/yarn.lock b/yarn.lock
index 648667d28b..5ff99fdfaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1809,20 +1809,20 @@
     "@polkadot/keyring" "^0.42.0-beta.1"
     "@polkadot/util" "^0.42.0-beta.1"
 
-"@polkadot/ui-assets@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.33.1.tgz#bfd242aa98c9b7cffba13d6c542f314487322739"
-  integrity sha512-7rGxD1O5Q7PxkBnf4CvLrgfPX6OZFSCfcSr0ZewNMP/qCkgGaXuQwGGmPcnbuyjg/pJEVVD7l7Ibj495xnwEkw==
+"@polkadot/ui-assets@^0.34.0-beta.0":
+  version "0.34.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.34.0-beta.0.tgz#e5ed52c3b306167d97e1af2c4658354bbc73b9bb"
+  integrity sha512-YlG0X1J+U1QpdMsR5dcwV0hEKwRIvYpTVlx9mBoTzx2ezsscWybBSbU8Dabq0CEiDNsO3OxDFmjNOEMnWS/KCw==
   dependencies:
     "@babel/runtime" "^7.3.4"
 
-"@polkadot/ui-identicon@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-identicon/-/ui-identicon-0.33.1.tgz#12002ab1106123da4dffdce1598d39e63fa7c91b"
-  integrity sha512-zRJ363qeZBmQRfTFBaWm068FPVrgIzEgZ6LlY7rYAksGfrDiJPgYNjlRtmdLVGDge1HZ++YvDRtMypqKOF9lWA==
+"@polkadot/ui-identicon@^0.34.0-beta.0":
+  version "0.34.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-identicon/-/ui-identicon-0.34.0-beta.0.tgz#c4ceec38eefd8baaa6d2aa08e8cb2322213dad41"
+  integrity sha512-afLgmONDSPeyzWCxEks2V3W780af6LfquJThAeGyn4KfD9YUe+nilQ41UW9ChKzgOFuzZ4gKHP9M5uh4gT541Q==
   dependencies:
     "@babel/runtime" "^7.3.4"
-    "@polkadot/ui-settings" "^0.33.1"
+    "@polkadot/ui-settings" "^0.34.0-beta.0"
     "@types/color" "^3.0.0"
     "@types/react-copy-to-clipboard" "^4.2.6"
     color "^3.0.0"
@@ -1830,10 +1830,10 @@
     react-copy-to-clipboard "^5.0.1"
     styled-components "^4.1.3"
 
-"@polkadot/ui-keyring@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.33.1.tgz#5614fcc493bb241435c97d1819a2f383299ee4d3"
-  integrity sha512-d0Ur1lUsTESkaW8L01vwTwS0NPBiIzm7saIeCqI964hf52hrRKm56BWXcCGPZrEg6JI9MpYsHyoN2nQ+LVbd4g==
+"@polkadot/ui-keyring@^0.34.0-beta.0":
+  version "0.34.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.34.0-beta.0.tgz#7e7932ccbdd49dd92d5f1b8fdcd5cdc23f799a97"
+  integrity sha512-Oo2s/Naj/d0GwV82Gup8IdGurrDgmzgzZWdrOiyqGqHBTSKG8r4djXn21MM5KDxlz71m8iXLNQrpu9Ju8hkv7w==
   dependencies:
     "@babel/runtime" "^7.3.4"
     "@types/store" "^2.0.1"
@@ -1841,20 +1841,20 @@
     store "^2.0.12"
     styled-components "^4.1.3"
 
-"@polkadot/ui-settings@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.33.1.tgz#3e483854b1c9ae37d0a6d67c47f81e0b803c5a3d"
-  integrity sha512-aytL4MOLu2EWFujDVwN60I5RDeqdRULo4zq8yDK3w783LPHNKXaPBrUyVteE4K+CsstNKTjuxWhqDE5Gw6F1pw==
+"@polkadot/ui-settings@^0.34.0-beta.0":
+  version "0.34.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.34.0-beta.0.tgz#3de4f009bea66e079ede9d40da4257a7b5fbe5be"
+  integrity sha512-AbW/HXwkIPi979t+S/GRm4GuK0YhHWoUYjmVJK5pGK6HMpCh8E3ACs2v76l22WHSYKz3lCiuPj42yrFsLHLrPQ==
   dependencies:
     "@babel/runtime" "^7.3.4"
-    "@polkadot/util" "^0.40.1"
+    "@polkadot/util" "^0.42.0-beta.1"
     "@types/store" "^2.0.1"
     store "^2.0.12"
 
-"@polkadot/ui-util@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-util/-/ui-util-0.33.1.tgz#44a9cd32099c93a820c9a62fb2d383800f192220"
-  integrity sha512-CYvjMF9gTPyqD9/01Qu9xOazjbiqwz9gyVJ3YX/nmuyk1VkEaW3q+7PUQmThbfoCd02s+/epOKO3+l+Pho/5oQ==
+"@polkadot/ui-util@^0.34.0-beta.0":
+  version "0.34.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-util/-/ui-util-0.34.0-beta.0.tgz#f81c2b74ab0b1e586938b6e91112a4292f2a69d7"
+  integrity sha512-JNLWr5AhOYZ1Gpk7LW9fNrRPlkv31Ced5gL7Zq35p8n+Q8jhRgb+S6Jla0/q4b7+6WQ4dFicRXQ5ej2QxMLB1Q==
   dependencies:
     "@babel/runtime" "^7.3.4"
 
@@ -1880,7 +1880,7 @@
     tweetnacl "^1.0.1"
     xxhashjs "^0.2.2"
 
-"@polkadot/util@^0.40.1", "@polkadot/util@^0.42.0-beta.1":
+"@polkadot/util@^0.42.0-beta.1":
   version "0.42.0-beta.1"
   resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-0.42.0-beta.1.tgz#93baa0fc129467237b7eb226e14fafffd160f4e9"
   integrity sha512-PZC/yArV5D4J//IkqYwPo1rmlLzwf1SDWE4COOSDZJfU1hGjrwucDre/jwtQFQjZAUv458BXiFUHxgEd5dHX2w==