Merge branch 'master' into update-from-upstream

lerna.json

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

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
+  "version": "0.31.0-beta.14",
   "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.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14"
   }
 }

packages/app-accounts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-accounts",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^12.0.11",
     "babel-plugin-module-resolver": "^3.1.1",

packages/app-addresses/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-addresses",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14"
   }
 }

packages/app-democracy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-democracy",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
-    "@polkadot/ui-reactive": "^0.31.0-beta.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-reactive": "^0.31.0-beta.14"
   }
 }

packages/app-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-explorer",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14"
   }
 }

packages/app-extrinsics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-extrinsics",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
-    "@polkadot/ui-params": "^0.31.0-beta.10",
-    "@polkadot/ui-signer": "^0.31.0-beta.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-params": "^0.31.0-beta.14",
+    "@polkadot/ui-signer": "^0.31.0-beta.14"
   }
 }

packages/app-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-js",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "snappyjs": "^0.6.0"
   }
 }

packages/app-settings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-settings",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
-    "@polkadot/ui-reactive": "^0.31.0-beta.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-reactive": "^0.31.0-beta.14"
   }
 }

packages/app-staking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-staking",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
-    "@polkadot/ui-app": "^0.31.0-beta.10",
-    "@polkadot/ui-reactive": "^0.31.0-beta.10"
+    "@polkadot/app-explorer": "^0.31.0-beta.14",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-reactive": "^0.31.0-beta.14"
   }
 }

packages/app-staking/src/Account/Bonding.tsx → 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
     }));
   }
 

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

@@ -12,7 +12,7 @@ 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 { formatNumber } from '@polkadot/util';
+import { formatBalance, formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
@@ -32,6 +32,8 @@ type Props = I18nProps & {
 
 type State = {
   bondedId: string,
+  stashActive: string | null,
+  stashTotal: string | null,
   stashId: string | null,
   sessionId: string | null,
   badgeExpanded: boolean;
@@ -46,12 +48,17 @@ class Address extends React.PureComponent<Props, State> {
     this.state = {
       bondedId: props.address,
       sessionId: null,
+      stashActive: null,
+      stashTotal: null,
       stashId: null,
       badgeExpanded: false
     };
   }
 
-  static getDerivedStateFromProps ({ address, session_nextKeyFor, staking_bonded, staking_ledger }: Props, prevState: State): State | null {
+  static getDerivedStateFromProps ({ session_nextKeyFor, staking_bonded, staking_ledger }: Props, prevState: State): State | null {
+    const ledger = staking_ledger
+      ? staking_ledger.unwrapOr(null)
+      : null;
     return {
       bondedId: !staking_bonded || staking_bonded.isNone
         ? prevState.bondedId
@@ -59,29 +66,32 @@ class Address extends React.PureComponent<Props, State> {
       sessionId: !session_nextKeyFor || session_nextKeyFor.isNone
         ? prevState.sessionId
         : session_nextKeyFor.unwrap().toString(),
-      stashId: !staking_ledger || staking_ledger.isNone
+      stashActive: !ledger
+        ? prevState.stashActive
+        : formatBalance(ledger.active),
+      stashTotal: !ledger
+        ? prevState.stashTotal
+        : formatBalance(ledger.total),
+      stashId: !ledger
         ? prevState.stashId
-        : staking_ledger.unwrap().stash.toString()
+        : ledger.stash.toString()
     } as State;
   }
 
   render () {
-    const { balanceArray, isAuthor, lastBlock } = this.props;
-    const { bondedId, stashId } = this.state;
+    const { isAuthor, lastBlock } = this.props;
+    const { bondedId, stashActive, stashId } = this.state;
 
     return (
       <article key={stashId || bondedId}>
         <AddressRow
-          balance={balanceArray(stashId || '')}
+          extraInfo={stashActive ? `bonded ${stashActive}` : undefined}
           name={this.getDisplayName()}
           value={stashId}
           withCopy={false}
           withNonce={false}
         >
-          <div className='staking--accounts-info'>
-            {this.renderControllerId()}
-            {this.renderSessionId()}
-          </div>
+          {this.renderKeys()}
           {this.renderNominators()}
           {this.renderOffline()}
         </AddressRow>
@@ -118,34 +128,35 @@ class Address extends React.PureComponent<Props, State> {
     this.setState({ badgeExpanded: !badgeExpanded });
   }
 
-  private renderControllerId () {
+  private renderKeys () {
     const { t } = this.props;
-    const { bondedId } = this.state;
-
-    if (!bondedId) {
-      return null;
-    }
-
-    return (
-      <div>
-        <label className='staking--label'>{t('controller')}</label>
-        <AddressMini value={bondedId} />
-      </div>
-    );
-  }
-
-  private renderSessionId () {
-    const { t } = this.props;
-    const { sessionId } = this.state;
-
-    if (!sessionId) {
-      return null;
-    }
+    const { bondedId, sessionId } = this.state;
+    const isSame = bondedId === sessionId;
 
     return (
-      <div>
-        <label className='staking--label'>{t('session')}</label>
-        <AddressMini value={sessionId} />
+      <div className='staking--accounts-info'>
+        {bondedId
+          ? (
+            <div>
+              <label className='staking--label'>{
+                isSame
+                  ? t('controller/session')
+                  : t('controller')
+              }</label>
+              <AddressMini value={bondedId} />
+            </div>
+          )
+          : null
+        }
+        {!isSame && sessionId
+          ? (
+            <div>
+              <label className='staking--label'>{t('session')}</label>
+              <AddressMini value={sessionId} />
+            </div>
+          )
+          : null
+        }
       </div>
     );
   }

packages/app-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-storage",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
-    "@polkadot/ui-params": "^0.31.0-beta.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-params": "^0.31.0-beta.14"
   }
 }

packages/app-toolbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-toolbox",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14"
   }
 }

packages/app-transfer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-transfer",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
-    "@polkadot/ui-reactive": "^0.31.0-beta.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14",
+    "@polkadot/ui-reactive": "^0.31.0-beta.14"
   }
 }

packages/apps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/apps",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@polkadot/ui-assets": "^0.37.1",
-    "@polkadot/ui-signer": "^0.31.0-beta.10",
+    "@polkadot/ui-signer": "^0.31.0-beta.14",
     "@types/react-tooltip": "^3.9.1",
     "react-tooltip": "^3.9.2"
   }

packages/apps/src/Apps.tsx

@@ -7,7 +7,6 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD
 
 import React from 'react';
 import store from 'store';
-import styled from 'styled-components';
 import { classes } from '@polkadot/ui-app/util';
 import Signer from '@polkadot/ui-signer';
 import settings from '@polkadot/joy-settings/';
@@ -18,6 +17,9 @@ import Connecting from './Connecting';
 import Content from './Content';
 import SideBar from './SideBar';
 
+import styled, { ThemeProvider } from 'styled-components';
+import { media } from '@polkadot/ui-app/media';
+
 type Props = BareProps & {};
 
 type State = {
@@ -31,8 +33,15 @@ const Wrapper = styled.div`
   align-items: stretch;
   box-sizing: border-box;
   display: flex;
-  height: 100%;
   min-height: 100vh;
+
+  header {
+    margin-bottom: 0.8rem;
+    text-align: center;
+    ${media.TABLET`
+      margin-bottom: 1.1rem;
+   `}
+  }
 `;
 
 class Apps extends React.Component<Props, State> {
@@ -66,28 +75,32 @@ class Apps extends React.Component<Props, State> {
 
     const { isCollapsed, isMenu, menuOpen } = this.state;
     return (
-      <Wrapper
-        className={
-          classes('apps-Wrapper',
-                   !isCollapsed ? 'expanded' : 'collapsed',
-                   isMenu ? 'fixed' : '',
-                   menuOpen ? 'menu-open' : '',
-                   `theme--${settings.uiTheme}`)
-        }
+      <ThemeProvider
+        theme={{ theme: settings.uiTheme }}
       >
-        {this.renderMenuBg()}
-        <SideBar
-          collapse={this.collapse}
-          handleResize={this.handleResize}
-          menuOpen={menuOpen}
-          isCollapsed={isCollapsed}
-          toggleMenu={this.toggleMenu}
-        />
-        <Signer>
-          <Content />
-        </Signer>
-        <Connecting />
-      </Wrapper>
+        <Wrapper
+          className={
+            classes('apps-Wrapper',
+                     !isCollapsed ? 'expanded' : 'collapsed',
+                     isMenu ? 'fixed' : '',
+                     menuOpen ? 'menu-open' : '',
+                     `theme--${settings.uiTheme}`)
+          }
+        >
+          {this.renderMenuBg()}
+          <SideBar
+            collapse={this.collapse}
+            handleResize={this.handleResize}
+            menuOpen={menuOpen}
+            isCollapsed={isCollapsed}
+            toggleMenu={this.toggleMenu}
+          />
+          <Signer>
+            <Content />
+          </Signer>
+          <Connecting />
+        </Wrapper>
+      </ThemeProvider>
     );
   }
 

packages/apps/src/SideBar/SideBar.css

@@ -24,7 +24,7 @@
       opacity: 0;
       width: 0;
     }
-    
+
     &.open {
       opacity: 1;
     }
@@ -43,27 +43,6 @@
     &.expanded {
       width: 12rem;
     }
-
-    > img {
-      background: #333;
-      border-radius: 50%;
-      cursor: pointer;
-      left: 0.9rem;
-      opacity: 0;
-      padding: 4px;
-      position: absolute;
-      transition: opacity 0.2s ease-in, top 0.2s ease-in;
-      top: -2.9rem;
-      width: 2.6rem;
-     
-      &.delayed {
-        transition-delay: 0.4s;
-      }
-      &.open {
-        opacity: 1;
-        top: 0.9rem;
-      }
-    }
   }
 
   .apps--SideBar {
@@ -75,7 +54,7 @@
     left: 0;
     transition: left 0.3s linear;
     width: 100%;
-    
+
     .ui.vertical.menu {
       display: flex;
       height: 100vh;

packages/apps/src/SideBar/index.tsx

@@ -35,7 +35,11 @@ function OuterLink ({ url, title, icon = 'external alternate' }: OuterLinkProps)
   );
 }
 
+import styled from 'styled-components';
+import { media } from '@polkadot/ui-app/media';
 import { Responsive } from 'semantic-ui-react';
+import theme from 'styled-theming';
+import { primaryColor } from '@polkadot/ui-app/styles/theme';
 
 type Props = I18nProps & {
   collapse: () => void,
@@ -45,6 +49,38 @@ type Props = I18nProps & {
   toggleMenu: () => void
 };
 
+const Toggle = styled.img`
+  background: ${theme('theme', {
+    substrate: primaryColor,
+    polkadot: 'none'
+  })};
+  padding: ${theme('theme', {
+    substrate: '4px',
+    polkadot: 'none'
+  })};
+  border-radius: 50%;
+  cursor: pointer;
+  left: 0.9rem;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  transition: opacity 0.2s ease-in, top 0.2s ease-in;
+  width: 2.6rem;
+
+  &.delayed {
+    transition-delay: 0.4s;
+  }
+  &.open {
+    opacity: 1;
+    top: 0.9rem;
+  }
+
+  ${media.TABLET`
+    opacity: 0 !important;
+    top: -2.9rem !important;
+  `}
+`;
+
 class SideBar extends React.PureComponent<Props> {
   render () {
     const { isCollapsed } = this.props;
@@ -53,8 +89,10 @@ class SideBar extends React.PureComponent<Props> {
       <Responsive
         onUpdate={this.props.handleResize}
         className={
-          classes('apps-SideBar-Wrapper',
-                  isCollapsed ? 'collapsed' : 'expanded')
+          classes(
+            'apps-SideBar-Wrapper',
+              isCollapsed ? 'collapsed' : 'expanded'
+            )
         }
       >
         {this.renderMenuToggle()}
@@ -188,7 +226,7 @@ class SideBar extends React.PureComponent<Props> {
     const { toggleMenu, menuOpen } = this.props;
 
     return (
-      <img
+      <Toggle
         alt='logo'
         className={menuOpen ? 'closed' : 'open delayed'}
         onClick={toggleMenu}

packages/joy-election/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@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.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@polkadot/joy-utils": "^0.1.1",
-    "@polkadot/ui-reactive": "^0.31.0-beta.10"
+    "@polkadot/ui-reactive": "^0.31.0-beta.14"
   }
 }

packages/joy-utils/package.json

@@ -8,7 +8,7 @@
   "maintainers": [],
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-app": "^0.31.0-beta.10",
+    "@polkadot/ui-app": "^0.31.0-beta.14",
     "@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.10",
+  "version": "0.31.0-beta.14",
   "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.10",
+  "version": "0.31.0-beta.14",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,17 +11,18 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@polkadot/ui-api": "^0.31.0-beta.10",
+    "@polkadot/ui-api": "^0.31.0-beta.14",
     "@polkadot/ui-identicon": "^0.37.1",
     "@polkadot/ui-keyring": "^0.37.1",
-    "@polkadot/ui-reactive": "^0.31.0-beta.10",
     "@polkadot/joy-settings": "^1.0.0",
+    "@polkadot/ui-reactive": "^0.31.0-beta.14",
     "@types/chart.js": "^2.7.45",
     "@types/classnames": "^2.2.7",
     "@types/i18next": "^12.1.0",
     "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dropzone": "^4.2.2",
     "@types/react-router-dom": "^4.3.0q",
+    "@types/styled-theming": "^2.2.0",
     "chart.js": "^2.7.2",
     "codeflask": "^1.4.0",
     "i18next": "^15.0.9",
@@ -37,6 +38,7 @@
     "react-router-dom": "^5.0.0",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.86.0",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "styled-theming": "^2.2.0"
   }
 }

packages/ui-app/src/AddressRow.tsx

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

packages/ui-app/src/AddressSummary.tsx

@@ -18,6 +18,7 @@ export type Props = I18nProps & {
   accounts_idAndIndex?: [AccountId?, AccountIndex?],
   balance?: Balance | Array<Balance>,
   children?: React.ReactNode,
+  extraInfo?: React.ReactNode,
   name?: string,
   value: AccountId | AccountIndex | Address | string | null,
   showFaucet?: boolean,
@@ -49,6 +50,7 @@ class AddressSummary extends React.PureComponent<Props> {
           {this.renderAccountId()}
           {this.renderAccountIndex()}
           {this.renderBalance()}
+          {this.renderExtra()}
           {this.renderNonce()}
           {this.renderFaucet()}
         </div>
@@ -150,6 +152,20 @@ class AddressSummary extends React.PureComponent<Props> {
     );
   }
 
+  protected renderExtra () {
+    const { extraInfo } = this.props;
+
+    if (!extraInfo) {
+      return null;
+    }
+
+    return (
+      <div className='ui--AddressSummary-extra'>
+        {extraInfo}
+      </div>
+    );
+  }
+
   protected renderIcon (className: string = 'ui--AddressSummary-icon', size?: number) {
     const { accounts_idAndIndex = [], identIconSize = 96, value, withIcon = true } = this.props;
 

packages/ui-app/src/constants.ts

@@ -6,3 +6,9 @@ export enum BitLengthOption {
   CHAIN_SPEC = 128,
   NORMAL_NUMBERS = 32
 }
+
+export enum ScreenSizes {
+  DESKTOP = 992,
+  TABLET = 768,
+  PHONE = 576
+}

packages/ui-app/src/media.ts

@@ -0,0 +1,19 @@
+// 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 { css } from 'styled-components';
+import { ScreenSizes } from './constants';
+
+export const media: any = Object
+ .keys(ScreenSizes)
+ .reduce((acc: any, label: any) => {
+   let size: any = ScreenSizes[label];
+   acc[label] = (...args: any) => (
+    css`
+     @media ( min-width: ${size / 16}em) {
+      ${css`${{ ...args }}`}
+     }
+    `);
+   return acc;
+ }, {});

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

@@ -95,12 +95,3 @@ article {
     padding: 0;
   }
 }
-
-header {
-  margin-bottom: 1.1rem;
-  text-align: center;
-
-  @media(max-width: 767px) {
-    margin-bottom: 0.8rem;
-  }
-}

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

@@ -113,6 +113,7 @@ header .ui--Button-Group {
 
 .ui--Balance,
 .ui--AddressSummary-balance,
+.ui--AddressSummary-extra,
 .ui--AddressSummary-nonce {
   font-weight: 100;
   opacity: 0.75;

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

@@ -70,7 +70,7 @@ th.ui--media-small {
     height: auto;
     visibility: visible;
     width: auto;
-    
+
   }
 
   td.ui--media-small,
@@ -85,13 +85,3 @@ th.ui--media-small {
     padding-left: 5.2rem !important;
   }
 }
-
-/* sidebar */
-@media (min-width: 768px) {
-  .apps-SideBar-Wrapper {
-    > img {
-      opacity: 0 !important;
-      top: -2.9rem !important;
-    }
-  }
-}

packages/ui-app/src/styles/theme.ts

@@ -0,0 +1,10 @@
+/* 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 theme from 'styled-theming';
+
+export const primaryColor = theme('theme', {
+  substrate: '#333',
+  polkadot: '#E6007A'
+});

packages/ui-app/src/styles/theme/polkadot.css

@@ -92,13 +92,6 @@
     background-color: $red;
   }
 
-  .apps-SideBar-Wrapper {
-    > img {
-      background: none !important;
-      padding: 0 !important;
-    }
-  }
-
   a.apps--SideBar-Item-NavLink:hover {
     color: $nav-link;
     transition: 0.15s;

packages/ui-params/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-params",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14"
   }
 }

packages/ui-reactive/package.json

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

packages/ui-signer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-signer",
-  "version": "0.31.0-beta.10",
+  "version": "0.31.0-beta.14",
   "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.10"
+    "@polkadot/ui-app": "^0.31.0-beta.14"
   }
 }

yarn.lock

@@ -2515,6 +2515,11 @@
     "@types/react" "*"
     csstype "^2.2.0"
 
+"@types/styled-theming@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-theming/-/styled-theming-2.2.0.tgz#0c4971dae7d36e1553779864caf27cc02bb3e8e2"
+  integrity sha512-IwS8K1jvn1yw3A6oSuA9zXjWW5zOQhM/psUSfehR1k0r60WWlLa1/S7El40loOMSy8blusgn7r5y/dhyEd0kKw==
+
 "@types/tapable@*":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@@ -13419,6 +13424,11 @@ styled-components@^4.2.0:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-theming@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/styled-theming/-/styled-theming-2.2.0.tgz#3084e43d40eaab4bc11ebafd3de04e3622fee37e"
+  integrity sha1-MITkPUDqq0vBHrr9PeBONiL+434=
+
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"