Adjust staking

README.md

@@ -37,7 +37,7 @@ In addition the following libraries are also included in the repo. These are to
 
 Contributions are welcome!
 
-To start off, this repo (along with others in the [@polkadot](https://github.com/polkadot-js/) family) uses yarn workspaces to organise the code. As such, after cloning dependencies _should_ be installed via `yarn`, not via npm, the latter will result in broken dependencies.
+To start off, this repo (along with others in the [@polkadot](https://github.com/polkadot-js/) family) uses yarn workspaces to organize the code. As such, after cloning dependencies _should_ be installed via `yarn`, not via npm, the latter will result in broken dependencies.
 
 To get started -
 
@@ -50,7 +50,7 @@ To get started -
 
 ## I want to code around
 
-There is a base template availble [app-123code](packages/app-123code/) that acts as a simple starting point for adding additional apps to the UI. Alternatively if you just want some place where you can write some code, it does the trick.
+There is a base template available [app-123code](packages/app-123code/) that acts as a simple starting point for adding additional apps to the UI. Alternatively if you just want some place where you can write some code, it does the trick.
 
 While it is hidden from the sidebar, it is accessible via [http://127.0.0.1:3000/#/123code](http://127.0.0.1:3000/#/123code)
 

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.97.0-beta.13",
-    "@polkadot/api-contract": "^0.97.0-beta.13",
+    "@polkadot/api": "^0.97.0-beta.14",
+    "@polkadot/api-contract": "^0.97.0-beta.14",
     "@polkadot/keyring": "^1.7.0-beta.7",
-    "@polkadot/types": "^0.97.0-beta.13",
+    "@polkadot/types": "^0.97.0-beta.14",
     "@polkadot/util": "^1.7.0-beta.7",
     "@polkadot/util-crypto": "^1.7.0-beta.7",
     "babel-core": "^7.0.0-bridge.0",

packages/app-contracts/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.2",
-    "@polkadot/api-contract": "^0.97.0-beta.13",
+    "@polkadot/api-contract": "^0.97.0-beta.14",
     "@polkadot/react-components": "^0.37.0-beta.105"
   }
 }

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

@@ -26,13 +26,13 @@ import Validate from './Validate';
 import { u8aToHex, u8aConcat } from '@polkadot/util';
 
 interface Props extends ApiProps, I18nProps {
-  accountId: string;
   allStashes?: string[];
   balances_all?: DerivedBalances;
   className?: string;
-  ownStash: boolean;
+  isOwnStash: boolean;
   recentlyOnline?: DerivedHeartbeats;
   staking_info?: DerivedStaking;
+  stashId: string;
   stashOptions: KeyringSectionOption[];
 }
 
@@ -57,7 +57,6 @@ interface State {
   sessionIds: string[];
   stakers?: Exposure;
   stakingLedger?: StakingLedger;
-  stashId: string | null;
   validatorPrefs?: ValidatorPrefs;
 }
 
@@ -101,19 +100,17 @@ class Account extends React.PureComponent<Props, State> {
     isUnbondOpen: false,
     isValidateOpen: false,
     onlineStatus: {},
-    sessionIds: [],
-    stashId: null
+    sessionIds: []
   };
 
-  public static getDerivedStateFromProps ({ allStashes, staking_info }: Props): Pick<State, never> | null {
+  public static getDerivedStateFromProps ({ allStashes, staking_info, stashId }: Props): Pick<State, never> | null {
     if (!staking_info) {
       return null;
     }
 
-    const { controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, stashId, validatorPrefs } = staking_info;
+    const { controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, validatorPrefs } = staking_info;
     const isStashNominating = nominators && !!nominators.length;
-    const _stashId = toIdString(stashId);
-    const isStashValidating = !!allStashes && !!_stashId && allStashes.includes(_stashId);
+    const isStashValidating = !!allStashes && !!stashId && allStashes.includes(stashId);
     const nextConcat = u8aConcat(...nextSessionIds.map((id): Uint8Array => id.toU8a()));
     const currConcat = u8aConcat(...sessionIds.map((id): Uint8Array => id.toU8a()));
 
@@ -132,18 +129,13 @@ class Account extends React.PureComponent<Props, State> {
       ).map(toIdString),
       stakers,
       stakingLedger,
-      stashId: _stashId,
       validatorPrefs
     };
   }
 
   public render (): React.ReactNode {
-    const { className, isSubstrateV2, t } = this.props;
-    const { controllerId, hexSessionIdNext, hexSessionIdQueue, isBondExtraOpen, isInjectOpen, isStashValidating, isUnbondOpen, nominees, onlineStatus, sessionIds, stashId } = this.state;
-
-    if (!stashId) {
-      return null;
-    }
+    const { className, isSubstrateV2, stashId, t } = this.props;
+    const { controllerId, hexSessionIdNext, hexSessionIdQueue, isBondExtraOpen, isInjectOpen, isStashValidating, isUnbondOpen, nominees, onlineStatus, sessionIds } = this.state;
 
     // Each component is rendered and gets a `is[Component]Open` passed in a `isOpen` props.
     // These components will be loaded and return null at the first load (because is[Component]Open === false).
@@ -250,8 +242,8 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderNominate (): React.ReactNode {
-    const { stashOptions } = this.props;
-    const { controllerId, isNominateOpen, nominees, stashId } = this.state;
+    const { stashId, stashOptions } = this.props;
+    const { controllerId, isNominateOpen, nominees } = this.state;
 
     if (!isNominateOpen || !stashId || !controllerId) {
       return null;
@@ -269,9 +261,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderValidate (): React.ReactNode {
-    const { controllerId, isValidateOpen, stashId, validatorPrefs } = this.state;
+    const { stashId } = this.props;
+    const { controllerId, isValidateOpen, validatorPrefs } = this.state;
 
-    if (!stashId || !controllerId) {
+    if (!controllerId) {
       return null;
     }
 
@@ -370,7 +363,7 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderPopupMenu (): React.ReactNode {
-    const { balances_all, isSubstrateV2, ownStash, t } = this.props;
+    const { balances_all, isOwnStash, isSubstrateV2, t } = this.props;
     const { hexSessionIdNext, isStashNominating, isStashValidating, sessionIds } = this.state;
 
     // only show a "Bond Additional" button if this stash account actually doesn't bond everything already
@@ -385,7 +378,7 @@ class Account extends React.PureComponent<Props, State> {
       >
         {canBondExtra &&
           <Menu.Item
-            disabled={!ownStash}
+            disabled={!isOwnStash}
             onClick={this.toggleBondExtra}
           >
             {t('Bond more funds')}
@@ -395,7 +388,7 @@ class Account extends React.PureComponent<Props, State> {
           {t('Unbond funds')}
         </Menu.Item>
         <Menu.Item
-          disabled={!ownStash}
+          disabled={!isOwnStash}
           onClick={this.toggleSetControllerAccount}
         >
           {t('Change controller account')}
@@ -428,9 +421,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderSetValidatorPrefs (): React.ReactNode {
-    const { controllerId, isValidateOpen, stashId, validatorPrefs } = this.state;
+    const { stashId } = this.props;
+    const { controllerId, isValidateOpen, validatorPrefs } = this.state;
 
-    if (!controllerId || !validatorPrefs || !stashId) {
+    if (!controllerId || !validatorPrefs) {
       return null;
     }
 
@@ -446,9 +440,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderSetControllerAccount (): React.ReactNode {
-    const { controllerId, isSetControllerAccountOpen, isStashValidating, stashId } = this.state;
+    const { stashId } = this.props;
+    const { controllerId, isSetControllerAccountOpen, isStashValidating } = this.state;
 
-    if (!isSetControllerAccountOpen || !stashId) {
+    if (!isSetControllerAccountOpen) {
       return null;
     }
 
@@ -479,9 +474,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderSetSessionAccount (): React.ReactNode {
-    const { controllerId, isSetSessionAccountOpen, stashId, sessionIds } = this.state;
+    const { stashId } = this.props;
+    const { controllerId, isSetSessionAccountOpen, sessionIds } = this.state;
 
-    if (!controllerId || !stashId) {
+    if (!controllerId) {
       return null;
     }
 
@@ -623,7 +619,7 @@ export default withMulti(
   `,
   translate,
   withCalls<Props>(
-    ['derive.staking.info', { paramName: 'accountId' }],
-    ['derive.balances.all', { paramName: 'accountId' }]
+    ['derive.staking.info', { paramName: 'stashId' }],
+    ['derive.balances.all', { paramName: 'stashId' }]
   )
 );

packages/app-staking/src/Actions/Accounts.tsx → packages/app-staking/src/Actions/index.tsx

@@ -44,7 +44,7 @@ function getStashes (allAccounts: string[], queryBonded?: Option<AccountId>[], q
   return result;
 }
 
-function Accounts ({ allAccounts, allStashes, className, recentlyOnline, t }: Props): React.ReactElement<Props> {
+function Actions ({ allAccounts, allStashes, className, recentlyOnline, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const queryBonded = trackStream<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
   const queryLedger = trackStream<Option<StakingLedger>[]>(api.query.staking.ledger.multi as any, [allAccounts]);
@@ -75,14 +75,14 @@ function Accounts ({ allAccounts, allStashes, className, recentlyOnline, t }: Pr
       {isNewStakeOpen && (
         <StartStaking onClose={_toggleNewStake} />
       )}
-      {foundStashes && foundStashes.map(([address, ownStash], index): React.ReactNode => (
-        address && (
+      {foundStashes && foundStashes.map(([stashId, isOwnStash], index): React.ReactNode => (
+        stashId && (
           <Account
             allStashes={allStashes}
-            accountId={address}
+            isOwnStash={isOwnStash}
             key={index}
-            ownStash={ownStash}
             recentlyOnline={recentlyOnline}
+            stashId={stashId}
             stashOptions={stashOptions}
           />
         )
@@ -92,7 +92,7 @@ function Accounts ({ allAccounts, allStashes, className, recentlyOnline, t }: Pr
 }
 
 export default translate(
-  styled(Accounts)`
+  styled(Actions)`
     .ui--CardGrid-buttons {
       text-align: right;
     }

packages/app-staking/src/index.tsx

@@ -16,7 +16,7 @@ import { HelpOverlay } from '@polkadot/react-components';
 import Tabs from '@polkadot/react-components/Tabs';
 import { trackStream, useAccounts, useApi } from '@polkadot/react-hooks';
 
-import Accounts from './Actions/Accounts';
+import Actions from './Actions';
 import basicMd from './md/basic.md';
 import Overview from './Overview';
 import Query from './Query';
@@ -98,7 +98,7 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/actions`}>{_renderComponent(Accounts)}</Route>
+        <Route path={`${basePath}/actions`}>{_renderComponent(Actions)}</Route>
         <Route path={`${basePath}/query/:value`}>{_renderComponent(Query)}</Route>
         <Route path={`${basePath}/query`}>{_renderComponent(Query)}</Route>
       </Switch>

packages/react-api/package.json

@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.7.2",
-    "@polkadot/api": "^0.97.0-beta.13",
+    "@polkadot/api": "^0.97.0-beta.14",
     "@polkadot/extension-dapp": "^0.14.0-beta.5",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"