Merge branch 'master' into update-from-upstream

lerna.json

@@ -10,5 +10,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.31.0-beta.14"
+  "version": "0.31.0-beta.17"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "private": true,
   "engines": {
     "node": ">=10.13.0",

packages/app-123code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-123code",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A baasic app that shows the ropes on customisation",
   "main": "index.js",
   "scripts": {},
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17"
   }
 }

packages/app-123code/src/SummaryBar.tsx

@@ -93,7 +93,6 @@ export default translate(
     'derive.chain.bestNumberLag',
     'query.balances.totalIssuance',
     'query.session.validators',
-    'query.staking.intentions',
     'rpc.chain.getRuntimeVersion',
     'rpc.system.chain',
     'rpc.system.name',

packages/app-accounts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-accounts",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^12.0.11",
     "babel-plugin-module-resolver": "^3.1.1",

packages/app-accounts/src/Creator.tsx

@@ -110,6 +110,7 @@ class Creator extends React.PureComponent<Props, State> {
                 ? address
                 : ''
             }
+            withBonded
           />
           {this.renderInput()}
         </div>

packages/app-addresses/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-addresses",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17"
   }
 }

packages/app-addresses/src/Creator.tsx

@@ -43,6 +43,7 @@ class Creator extends React.PureComponent<Props, State> {
           <AddressSummary
             className='shrink'
             value={address}
+            withBonded
           />
           {this.renderInput()}
         </div>

packages/app-addresses/src/Editor.tsx

@@ -94,6 +94,7 @@ class Editor extends React.PureComponent<Props, State> {
         <AddressSummary
           className='shrink'
           value={address || ''}
+          withBonded
         />
         <div className='grow'>
           <div className='ui--row'>

packages/app-democracy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-democracy",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A referendum & proposal app",
   "main": "index.js",
   "scripts": {},
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
-    "@polkadot/ui-reactive": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17",
+    "@polkadot/ui-reactive": "^0.31.0-beta.17"
   }
 }

packages/app-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-explorer",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17"
   }
 }

packages/app-extrinsics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-extrinsics",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,8 +11,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
-    "@polkadot/ui-params": "^0.31.0-beta.14",
-    "@polkadot/ui-signer": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17",
+    "@polkadot/ui-params": "^0.31.0-beta.17",
+    "@polkadot/ui-signer": "^0.31.0-beta.17"
   }
 }

packages/app-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-js",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A simple JavaScript console for playing with the API",
   "main": "index.js",
   "scripts": {},
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "snappyjs": "^0.6.0"
   }
 }

packages/app-settings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-settings",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "Settings management",
   "main": "index.js",
   "scripts": {},
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
-    "@polkadot/ui-reactive": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17",
+    "@polkadot/ui-reactive": "^0.31.0-beta.17"
   }
 }

packages/app-staking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-staking",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A basic staking app",
   "main": "index.js",
   "scripts": {},
@@ -11,8 +11,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/app-explorer": "^0.31.0-beta.14",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
-    "@polkadot/ui-reactive": "^0.31.0-beta.14"
+    "@polkadot/app-explorer": "^0.31.0-beta.17",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
+    "@polkadot/ui-reactive": "^0.31.0-beta.17"
   }
 }

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

@@ -91,6 +91,9 @@ class Account extends React.PureComponent<Props, State> {
           name={name}
           value={accountId}
           identIconSize={96}
+          withBonded
+          withIndex={false}
+          withNonce={false}
         >
           <div className='staking--Account-expand'>
             {this.renderButtons()}
@@ -205,7 +208,8 @@ class Account extends React.PureComponent<Props, State> {
             <AddressMini
               key={index}
               value={nomineeId}
-              withBalance
+              withBalance={false}
+              withBonded
             />
           ))
         }
@@ -280,7 +284,7 @@ class Account extends React.PureComponent<Props, State> {
     return (
       <div className='staking--Account-detail'>
         <label className='staking--label'>{t('stash')}</label>
-        <AddressMini value={stashId} />
+        <AddressMini withBalance={false} withBonded value={stashId} />
       </div>
     );
   }

packages/app-staking/src/Overview/Address.tsx

@@ -6,13 +6,14 @@ import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 import { Nominators, RecentlyOfflineMap } from '../types';
 
-import BN from 'bn.js';
 import React from 'react';
 import { AccountId, Balance, Option, StakingLedger } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api/with';
 import { AddressMini, AddressRow } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
-import { formatBalance, formatNumber } from '@polkadot/util';
+import { formatBalance } from '@polkadot/util';
+
+import RecentlyOffline from '../RecentlyOffline';
 
 import translate from '../translate';
 
@@ -88,6 +89,8 @@ class Address extends React.PureComponent<Props, State> {
           extraInfo={stashActive ? `bonded ${stashActive}` : undefined}
           name={this.getDisplayName()}
           value={stashId}
+          withBalance={false}
+          withBonded
           withCopy={false}
           withNonce={false}
         >
@@ -122,12 +125,6 @@ class Address extends React.PureComponent<Props, State> {
       : defaultName;
   }
 
-  private toggleBadge = (): void => {
-    const { badgeExpanded } = this.state;
-
-    this.setState({ badgeExpanded: !badgeExpanded });
-  }
-
   private renderKeys () {
     const { t } = this.props;
     const { bondedId, sessionId } = this.state;
@@ -180,7 +177,7 @@ class Address extends React.PureComponent<Props, State> {
           <AddressMini
             key={accountId.toString()}
             value={accountId}
-            withBalance
+            withBonded
           />
         )}
       </details>
@@ -188,35 +185,17 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   private renderOffline () {
-    const { recentlyOffline, t } = this.props;
-    const { badgeExpanded, stashId } = this.state;
+    const { recentlyOffline } = this.props;
+    const { stashId } = this.state;
 
     if (!stashId || !recentlyOffline[stashId]) {
       return null;
     }
 
     const offline = recentlyOffline[stashId];
-    const count = offline.reduce((total, { count }) => total.add(count), new BN(0));
-
-    const blockNumbers = offline.map(({ blockNumber }) => `#${formatNumber(blockNumber)}`);
 
     return (
-      <div
-        className={['recentlyOffline', badgeExpanded ? 'expand' : ''].join(' ')}
-        onClick={this.toggleBadge}
-      >
-        <div className='badge'>
-          {count.toString()}
-        </div>
-        <div className='detail'>
-          {t('Reported offline {{count}} times, last at {{blockNumber}}', {
-            replace: {
-              count: count.toString(),
-              blockNumber: blockNumbers[blockNumbers.length - 1]
-            }
-          })}
-        </div>
-      </div>
+      <RecentlyOffline offline={offline} />
     );
   }
 }

packages/app-staking/src/Overview/index.css

@@ -85,48 +85,7 @@
     }
 
     .recentlyOffline {
-      position: absolute;
-      bottom: 0.75rem;
-      font-size: 12px;
-      cursor: help;
-      display: flex;
-      justify-content: center;
-      right: 0.75rem;
-      width: 22px;
-      height: 22px;
-      padding: 0;
-      background: red;
-      color: #eee;
-      border-radius: 16px;
-      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-      transition: all ease .2s;
-
-      & > * {
-        line-height: 22px;
-        overflow: hidden;
-        transition: all ease 0.25;
-      }
 
-      .badge {
-        font-weight: bold;
-        width: auto;
-      }
-
-      .detail {
-        width: 0;
-      }
-
-      &.expand {
-        width: 300px;
-
-        .badge {
-          width: 0;
-        }
-
-        .detail {
-          width: auto;
-        }
-      }
     }
   }
 }

packages/app-staking/src/RecentlyOffline.tsx

@@ -0,0 +1,60 @@
+// Copyright 2017-2019 @polkadot/app-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 { OfflineStatus } from './types';
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import { formatNumber } from '@polkadot/util';
+
+import translate from './translate';
+
+type Props = I18nProps & {
+  offline: Array<OfflineStatus>
+};
+
+type State = {
+  isOpen: boolean
+};
+
+class RecentlyOffline extends React.PureComponent<Props, State> {
+  state: State = {
+    isOpen: false
+  };
+
+  render () {
+    const { offline, t } = this.props;
+    const { isOpen } = this.state;
+
+    const count = offline.reduce((total, { count }) => total.add(count), new BN(0));
+    const blockNumbers = offline.map(({ blockNumber }) => `#${formatNumber(blockNumber)}`);
+
+    return (
+      <div
+        className={['staking--Account-recentlyOffline', isOpen ? 'expand' : ''].join(' ')}
+        onClick={this.toggleOpen}
+      >
+        <div className='badge'>
+          {count.toString()}
+        </div>
+        <div className='detail'>
+          {t('Reported offline {{count}} times, last at {{blockNumber}}', {
+            replace: {
+              count,
+              blockNumber: blockNumbers[blockNumbers.length - 1]
+            }
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  private toggleOpen = (): void => {
+    this.setState(({ isOpen }) => ({
+      isOpen: !isOpen
+    }));
+  }
+}
+
+export default translate(RecentlyOffline);

packages/app-staking/src/StakeList.tsx

@@ -18,10 +18,11 @@ type Props = I18nProps & ComponentProps;
 class StakeList extends React.PureComponent<Props> {
   render () {
     const { balances, balanceArray, intentions, nominators, validators } = this.props;
+    const accounts = keyring.getAccounts();
 
     return (
       <div className='staking--StakeList'>
-        {keyring.getAccounts().map((account) => {
+        {accounts.map((account) => {
           const address = account.address();
           const name = account.getMeta().name || '';
 
@@ -40,10 +41,23 @@ class StakeList extends React.PureComponent<Props> {
             />
           );
         })}
+        {this.renderSpacer(accounts.length)}
       </div>
     );
   }
 
+  // HACK This is a hack of a dummy element to get the spacing right, i.e. the last
+  // element in an oddly spaced list should still only take up a single column
+  private renderSpacer (accountsLen: number) {
+    if (accountsLen % 2 === 0) {
+      return null;
+    }
+
+    return (
+      <div className='spacer' />
+    );
+  }
+
   private getTargetOptions (): Array<KeyringSectionOption> {
     const { targets } = this.props;
 

packages/app-staking/src/index.css

@@ -12,15 +12,21 @@
 }
 
 .staking--Account {
-  display: inline-block;
   position: relative;
+  flex: 1 1;
 
   .ui--AddressMini {
     display: block;
   }
 
   .ui--AddressSummary {
+    display: flex;
+    justify-content: space-between;
     padding: 0;
+
+    .ui--AddressSummary-base, .ui--AddressSummary-children {
+      min-width: 0;
+    }
   }
 }
 
@@ -103,6 +109,17 @@
   }
 }
 
+.staking--StakeList {
+  display: flex;
+  flex-wrap: wrap;
+
+  .spacer {
+    flex: 1 1;
+    margin: .25rem;
+    padding: 1rem 1.5rem;
+  }
+}
+
 .staking--accounts-info {
   position: absolute;
   top: 0.25rem;
@@ -114,3 +131,48 @@
     margin-bottom: -0.5rem;
   }
 }
+
+.staking--Account-recentlyOffline {
+  position: absolute;
+  bottom: 0.75rem;
+  font-size: 12px;
+  cursor: help;
+  display: flex;
+  justify-content: center;
+  right: 0.75rem;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: red;
+  color: #eee;
+  border-radius: 16px;
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
+  transition: all ease .2s;
+
+  & > * {
+    line-height: 22px;
+    overflow: hidden;
+    transition: all ease 0.25;
+  }
+
+  .badge {
+    font-weight: bold;
+    width: auto;
+  }
+
+  .detail {
+    width: 0;
+  }
+
+  &.expand {
+    width: 300px;
+
+    .badge {
+      width: 0;
+    }
+
+    .detail {
+      width: auto;
+    }
+  }
+}

packages/app-staking/src/index.tsx

@@ -148,8 +148,7 @@ export default withMulti(
   withCalls<Props>(
     'derive.staking.controllers',
     'query.session.validators',
-    'query.staking.nominators',
-    ['derive.staking.intentionsBalances', { propName: 'balances' }]
+    'query.staking.nominators'
   ),
   withObservable(accountObservable.subject, { propName: 'allAccounts' })
 );

packages/app-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-storage",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
-    "@polkadot/ui-params": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17",
+    "@polkadot/ui-params": "^0.31.0-beta.17"
   }
 }

packages/app-toolbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-toolbox",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17"
   }
 }

packages/app-transfer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-transfer",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A basic transfer app",
   "main": "index.js",
   "scripts": {},
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
-    "@polkadot/ui-reactive": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17",
+    "@polkadot/ui-reactive": "^0.31.0-beta.17"
   }
 }

packages/apps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/apps",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "An Apps portal into the Polkadot network",
   "main": "index.js",
   "homepage": ".",
@@ -13,9 +13,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@polkadot/ui-assets": "^0.37.1",
-    "@polkadot/ui-signer": "^0.31.0-beta.14",
+    "@polkadot/ui-signer": "^0.31.0-beta.17",
     "@types/react-tooltip": "^3.9.1",
     "react-tooltip": "^3.9.2"
   }

packages/apps/src/SideBar/index.tsx

@@ -75,7 +75,7 @@ const Toggle = styled.img`
     top: 0.9rem;
   }
 
-  ${media.TABLET`
+  ${media.DESKTOP`
     opacity: 0 !important;
     top: -2.9rem !important;
   `}

packages/apps/src/constants.ts

@@ -2,6 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ScreenSizes } from '@polkadot/ui-app/constants';
+
 export enum SideBarTransition {
 	COLLAPSED = 'COLLAPSED',
 	EXPANDED = 'EXPANDED',
@@ -9,5 +11,5 @@ export enum SideBarTransition {
 	MINIMISED_AND_EXPANDED = 'MINIMISED_AND_EXPANDED'
 }
 
-export const SIDEBAR_MENU_THRESHOLD = 768;
+export const SIDEBAR_MENU_THRESHOLD = ScreenSizes.DESKTOP;
 export const SIDEBAR_TRANSITION_DURATION = 300;

packages/joy-election/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@polkadot/joy-utils": "^0.1.1"
   }
 }

packages/joy-help/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@polkadot/joy-utils": "^0.1.1"
   }
 }

packages/joy-media/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@types/mime-types": "^2.1.0",
     "@polkadot/joy-utils": "^0.1.1",
     "aplayer": "^1.10.1",

packages/joy-members/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@polkadot/joy-utils": "^0.1.1"
   }
 }

packages/joy-proposals/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@polkadot/joy-utils": "^0.1.1"
   }
 }

packages/joy-roles/package.json

@@ -8,8 +8,8 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@polkadot/joy-utils": "^0.1.1",
-    "@polkadot/ui-reactive": "^0.31.0-beta.14"
+    "@polkadot/ui-reactive": "^0.31.0-beta.17"
   }
 }

packages/joy-utils/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.17",
     "@types/query-string": "^6.2.0",
     "@types/uuid": "^3.4.4",
     "@types/yup": "^0.26.10",

packages/ui-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-api",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A collection of RxJs React components the Polkadot JS API",
   "main": "index.js",
   "keywords": [

packages/ui-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-app",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,11 +11,11 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-api": "^0.31.0-beta.14",
+    "@polkadot/ui-api": "^0.31.0-beta.17",
     "@polkadot/ui-identicon": "^0.37.1",
     "@polkadot/ui-keyring": "^0.37.1",
     "@polkadot/joy-settings": "^1.0.0",
-    "@polkadot/ui-reactive": "^0.31.0-beta.14",
+    "@polkadot/ui-reactive": "^0.31.0-beta.17",
     "@types/chart.js": "^2.7.45",
     "@types/classnames": "^2.2.7",
     "@types/i18next": "^12.1.0",

packages/ui-app/src/AddressMini.tsx

@@ -10,6 +10,7 @@ import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
 
 import { classes, toShortAddress } from './util';
 import BalanceDisplay from './Balance';
+import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
 
 type Props = BareProps & {
@@ -19,7 +20,8 @@ type Props = BareProps & {
   isShort?: boolean,
   value?: AccountId | AccountIndex | Address | string,
   withAddress?: boolean,
-  withBalance?: boolean
+  withBalance?: boolean,
+  withBonded?: boolean
 };
 
 export default class AddressMini extends React.PureComponent<Props> {
@@ -46,6 +48,7 @@ export default class AddressMini extends React.PureComponent<Props> {
           {children}
         </div>
         {this.renderBalance()}
+        {this.renderBonded()}
       </div>
     );
   }
@@ -77,4 +80,20 @@ export default class AddressMini extends React.PureComponent<Props> {
       />
     );
   }
+
+  private renderBonded () {
+    const { value, withBonded = false } = this.props;
+
+    if (!withBonded || !value) {
+      return null;
+    }
+
+    return (
+      <BondedDisplay
+        className='ui--AddressSummary-balance'
+        label=''
+        value={value}
+      />
+    );
+  }
 }

packages/ui-app/src/AddressRow.tsx

@@ -23,7 +23,7 @@ class AddressRow extends AddressSummary {
           <div className='ui--AddressRow-details'>
             {this.renderAddress()}
             {this.renderBalance()}
-            {this.renderExtra()}
+            {this.renderBonded()}
             {this.renderNonce()}
           </div>
         </div>

packages/ui-app/src/AddressSummary.tsx

@@ -8,21 +8,25 @@ import React from 'react';
 import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
 import { Nonce } from '@polkadot/ui-reactive';
 import { withCalls } from '@polkadot/ui-api';
+import BaseIdentityIcon from '@polkadot/ui-identicon';
 
 import { classes, toShortAddress } from './util';
 import BalanceDisplay from './Balance';
+import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
 import translate from './translate';
 
 export type Props = I18nProps & {
   accounts_idAndIndex?: [AccountId?, AccountIndex?],
   balance?: Balance | Array<Balance>,
+  bonded?: Balance | Array<Balance>,
   children?: React.ReactNode,
   extraInfo?: React.ReactNode,
   name?: string,
   value: AccountId | AccountIndex | Address | string | null,
   showFaucet?: boolean,
   withBalance?: boolean,
+  withBonded?: boolean,
   withIndex?: boolean,
   identIconSize?: number,
   isShort?: boolean,
@@ -50,7 +54,7 @@ class AddressSummary extends React.PureComponent<Props> {
           {this.renderAccountId()}
           {this.renderAccountIndex()}
           {this.renderBalance()}
-          {this.renderExtra()}
+          {this.renderBonded()}
           {this.renderNonce()}
           {this.renderFaucet()}
         </div>
@@ -114,10 +118,10 @@ class AddressSummary extends React.PureComponent<Props> {
   }
 
   protected renderAccountIndex () {
-    const { accounts_idAndIndex = [] } = this.props;
+    const { accounts_idAndIndex = [], withIndex = true } = this.props;
     const [, accountIndex] = accounts_idAndIndex;
 
-    if (!accountIndex) {
+    if (!accountIndex || !withIndex) {
       return null;
     }
 
@@ -152,17 +156,21 @@ class AddressSummary extends React.PureComponent<Props> {
     );
   }
 
-  protected renderExtra () {
-    const { extraInfo } = this.props;
+  protected renderBonded () {
+    const { accounts_idAndIndex = [], t, value, withBonded } = this.props;
+    const [_accountId] = accounts_idAndIndex;
+    const accountId = _accountId || value;
 
-    if (!extraInfo) {
+    if (!withBonded || !accountId) {
       return null;
     }
 
     return (
-      <div className='ui--AddressSummary-extra'>
-        {extraInfo}
-      </div>
+      <BondedDisplay
+        className='ui--AddressSummary-bonded'
+        label={t('bonded ')}
+        value={accountId}
+      />
     );
   }
 
@@ -176,11 +184,17 @@ class AddressSummary extends React.PureComponent<Props> {
     const [_accountId] = accounts_idAndIndex;
     const accountId = (_accountId || value || '').toString();
 
+    // Since we do queries to storage in the wrapped example, we don't want
+    // to follow that route if we don't have a valid address.
+    const Component = accountId
+      ? IdentityIcon
+      : BaseIdentityIcon;
+
     return (
-      <IdentityIcon
+      <Component
         className={className}
         size={size || identIconSize}
-        value={accountId || DEFAULT_ADDR}
+        value={accountId}
       />
     );
   }

packages/ui-app/src/Bonded.tsx

@@ -0,0 +1,35 @@
+// Copyright 2017-2019 @polkadot/ui-app 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 } from './types';
+
+import React from 'react';
+import { AccountId, AccountIndex, Address } from '@polkadot/types';
+import RxBonded from '@polkadot/ui-reactive/Bonded';
+
+import { classes } from './util';
+
+export type Props = BareProps & {
+  label?: string,
+  value?: AccountId | AccountIndex | Address | string | Uint8Array | null,
+  withLabel?: boolean
+};
+
+export default class BondedDisplay extends React.PureComponent<Props> {
+  render () {
+    const { value, className, label, style } = this.props;
+    if (!value) {
+      return null;
+    }
+
+    return (
+      <RxBonded
+        className={classes('ui--Bonded', className)}
+        label={label}
+        value={value}
+        style={style}
+      />
+    );
+  }
+}

packages/ui-app/src/Input.tsx

@@ -46,10 +46,9 @@ type State = {
 };
 
 // Find decimal separator used in current locale
-const getDecimalSeparator = (): string => Intl.NumberFormat()
-    .formatToParts(1.1)
-    .find(part => part.type === 'decimal')!
-    .value;
+const getDecimalSeparator = (): string => 1.1
+  .toLocaleString()
+  .replace(/\d/g, '');
 
 // note: KeyboardEvent.keyCode and KeyboardEvent.which are deprecated
 const KEYS = {

packages/ui-app/src/styles/components.css

@@ -63,7 +63,8 @@ header .ui--Button-Group {
   margin-right: 0.5rem;
 }
 
-.ui--AddressMini .ui--Balance {
+.ui--AddressMini .ui--Balance,
+.ui--AddressMini .ui--Bonded {
   font-size: 0.75rem;
   margin-top: -0.5rem;
   text-align: right;
@@ -113,13 +114,20 @@ header .ui--Button-Group {
 
 .ui--Balance,
 .ui--AddressSummary-balance,
-.ui--AddressSummary-extra,
+.ui--AddressSummary-bonded,
 .ui--AddressSummary-nonce {
   font-weight: 100;
   opacity: 0.75;
 }
 
-.ui--AddressSummary-balance {
+.ui--Bonded {
+  opacity: 1;
+  color: green;
+}
+
+.ui--AddressSummary-data+.ui--AddressSummary-balance,
+.ui--AddressSummary-data+.ui--AddressSummary-bonded,
+.ui--AddressSummary-data+.ui--AddressSummary-nonce {
   padding-top: 0.5em;
 }
 

packages/ui-app/src/styles/media.css

@@ -80,7 +80,7 @@ th.ui--media-small {
 }
 
 /* tabs */
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .ui.menu.tabular {
     padding-left: 5.2rem !important;
   }

packages/ui-params/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-params",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17"
   }
 }

packages/ui-reactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-reactive",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "description": "A collection of RxJs React components the Polkadot JS API",
   "main": "index.js",
   "keywords": [

packages/ui-reactive/src/Bonded.tsx

@@ -0,0 +1,51 @@
+// Copyright 2017-2019 @polkadot/ui-reactive 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 { AccountId, AccountIndex, Address, Option, StakingLedger } from '@polkadot/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';
+
+import React from 'react';
+
+import { withCalls } from '@polkadot/ui-api';
+import { formatBalance } from '@polkadot/util';
+
+type Props = BareProps & CallProps & {
+  children?: React.ReactNode,
+  value?: AccountId | AccountIndex | Address | string | Uint8Array | null,
+  label?: string,
+  staking_ledger?: Option<StakingLedger>
+};
+
+class BondedDisplay extends React.PureComponent<Props> {
+  render () {
+    const { children, className, label = '', style, staking_ledger } = this.props;
+
+    if (!staking_ledger || staking_ledger.isNone) {
+      return null;
+    }
+
+    const { active: bonded } = staking_ledger.unwrap();
+
+    return (
+      <div
+        className={className}
+        style={style}
+      >
+        {label}{
+          bonded
+            ? formatBalance(bonded)
+            : '0'
+          }{children}
+      </div>
+    );
+  }
+}
+
+export default withCalls<Props>(
+  ['query.staking.bonded', {
+    paramName: 'value',
+    transform: (value) => value.unwrapOr(null)
+  }],
+  ['query.staking.ledger', { paramName: 'staking_bonded' }]
+)(BondedDisplay);

packages/ui-signer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-signer",
-  "version": "0.31.0-beta.14",
+  "version": "0.31.0-beta.17",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.14"
+    "@polkadot/ui-app": "^0.31.0-beta.17"
   }
 }