Rework Tabs component (using react-router) (#660)

* Rework Tabs component (using react-reouter)

* Remove unneeded props (already specified)

* Bump API

* Bump API for finalised v1 support

packages/app-accounts/src/Creator.tsx

@@ -4,6 +4,7 @@
 
 import { I18nProps } from '@polkadot/ui-app/types';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
+import { ComponentProps } from './types';
 
 import React from 'react';
 import { AddressSummary, Button, Dropdown, Input, Modal, Password } from '@polkadot/ui-app/index';
@@ -17,10 +18,12 @@ import FileSaver from 'file-saver';
 
 const BipWorker = require('worker-loader?name=[name].[hash:8].js!./bipWorker');
 
-type Props = I18nProps & {
-  onStatusChange: (status: ActionStatus) => void,
-  onCreateAccount: () => void,
-  passthrough: string | null
+type Props = ComponentProps & I18nProps & {
+  match: {
+    params: {
+      seed?: string
+    }
+  }
 };
 
 type SeedType = 'bip' | 'raw';
@@ -73,7 +76,7 @@ class Creator extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props);
 
-    const { t } = this.props;
+    const { match: { params: { seed } }, t } = this.props;
 
     this.bipWorker = new BipWorker();
     this.bipWorker.onmessage = (event: MessageEvent) => {
@@ -86,7 +89,7 @@ class Creator extends React.PureComponent<Props, State> {
       });
     };
     this.state = {
-      ...this.emptyState(this.props.passthrough),
+      ...this.emptyState(seed),
       seedOptions: [
         { value: 'bip', text: t('Mnemonic') },
         { value: 'raw', text: t('Raw seed') }
@@ -246,7 +249,7 @@ class Creator extends React.PureComponent<Props, State> {
     );
   }
 
-  private generateSeed (seedType: SeedType, passthrough?: string | null): State {
+  private generateSeed (seedType: SeedType, _seed?: string | null): State {
     if (seedType === 'bip') {
       this.bipWorker.postMessage('create');
 
@@ -256,7 +259,7 @@ class Creator extends React.PureComponent<Props, State> {
       } as State;
     }
 
-    const seed = passthrough || u8aToHex(randomAsU8a());
+    const seed = _seed || u8aToHex(randomAsU8a());
     const address = addressFromSeed(seed, seedType);
 
     return {
@@ -266,13 +269,13 @@ class Creator extends React.PureComponent<Props, State> {
     } as State;
   }
 
-  private emptyState (passthrough?: string | null): State {
-    const seedType = passthrough
+  private emptyState (seed?: string | null): State {
+    const seedType = seed
       ? 'raw'
       : this.state.seedType;
 
     return {
-      ...this.generateSeed(seedType, passthrough),
+      ...this.generateSeed(seedType, seed),
       isNameValid: true,
       isPassValid: false,
       isSeedValid: true,
@@ -338,7 +341,7 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   private onCommit = (): void => {
-    const { onCreateAccount, onStatusChange, t } = this.props;
+    const { basePath, onStatusChange, t } = this.props;
     const { name, password, seed, seedType } = this.state;
 
     const status = {
@@ -367,8 +370,9 @@ class Creator extends React.PureComponent<Props, State> {
 
     this.onHideWarning();
 
-    onCreateAccount();
     onStatusChange(status);
+
+    window.location.hash = basePath;
   }
 
   private onDiscard = (): void => {

packages/app-accounts/src/Editor.tsx

@@ -6,6 +6,7 @@ import { KeyringPair } from '@polkadot/keyring/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+import { ComponentProps } from './types';
 
 import React from 'react';
 import { AddressSummary, Button, Input, InputAddress } from '@polkadot/ui-app/index';
@@ -16,9 +17,8 @@ import ChangePass from './ChangePass';
 import Forgetting from './Forgetting';
 import translate from './translate';
 
-type Props = I18nProps & {
-  allAccounts?: SubjectInfo,
-  onStatusChange: (status: ActionStatus) => void
+type Props = ComponentProps & I18nProps & {
+  allAccounts?: SubjectInfo
 };
 
 type State = {

packages/app-accounts/src/Restore.tsx

@@ -4,6 +4,7 @@
 
 import { KeyringPair$Json } from '@polkadot/keyring/types';
 import { I18nProps } from '@polkadot/ui-app/types';
+import { ComponentProps } from './types';
 
 import React from 'react';
 import { AddressSummary, Button, InputFile, Password } from '@polkadot/ui-app/index';
@@ -14,10 +15,7 @@ import keyring from '@polkadot/ui-keyring';
 import translate from './translate';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 
-type Props = I18nProps & {
-  onStatusChange: (status: ActionStatus) => void,
-  onRestoreAccount: () => void
-};
+type Props = ComponentProps & I18nProps;
 
 type State = {
   isFileValid: boolean,
@@ -129,7 +127,7 @@ class Restore extends React.PureComponent<Props, State> {
   }
 
   private onSave = (): void => {
-    const { onRestoreAccount, onStatusChange, t } = this.props;
+    const { basePath, onStatusChange, t } = this.props;
     const { json, password } = this.state;
 
     if (!json) {
@@ -148,7 +146,6 @@ class Restore extends React.PureComponent<Props, State> {
       status.message = t('account restored');
 
       InputAddress.setLastValue('account', pair.address());
-      onRestoreAccount();
     } catch (error) {
       this.setState({ isPassValid: false });
 
@@ -158,6 +155,10 @@ class Restore extends React.PureComponent<Props, State> {
     }
 
     onStatusChange(status);
+
+    if (status.status !== 'error') {
+      window.location.hash = basePath;
+    }
   }
 }
 

packages/app-accounts/src/Vanity/index.tsx

@@ -4,6 +4,7 @@
 
 import { I18nProps } from '@polkadot/ui-app/types';
 import { Generator$Matches, Generator$Result } from '../vanitygen/types';
+import { ComponentProps } from '../types';
 
 import './index.css';
 
@@ -16,9 +17,7 @@ import generatorSort from '../vanitygen/sort';
 import Match from './Match';
 import translate from './translate';
 
-type Props = I18nProps & {
-  onCreateToggle: (passthrough: string) => void
-};
+type Props = ComponentProps & I18nProps;
 
 type State = {
   elapsed: number,
@@ -90,7 +89,6 @@ class VanityApp extends React.PureComponent<Props, State> {
   }
 
   renderMatches () {
-    const { onCreateToggle } = this.props;
     const { matches } = this.state;
 
     return (
@@ -99,7 +97,7 @@ class VanityApp extends React.PureComponent<Props, State> {
           <Match
             {...match}
             key={match.address}
-            onCreateToggle={onCreateToggle}
+            onCreateToggle={this.onCreateToggle}
             onRemove={this.onRemove}
           />
         ))}
@@ -218,6 +216,12 @@ class VanityApp extends React.PureComponent<Props, State> {
     }, 0);
   }
 
+  private onCreateToggle = (seed: string) => {
+    const { basePath } = this.props;
+
+    window.location.hash = `${basePath}/create/${seed}`;
+  }
+
   onChangeCase = (withCase: boolean): void => {
     this.setState({ withCase });
   }

packages/app-accounts/src/index.tsx

@@ -5,11 +5,12 @@
 import { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import { TabItem } from '@polkadot/ui-app/Tabs';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { Actions } from '@polkadot/ui-app/Status/types';
+import { ComponentProps, LocationProps } from './types';
 
 import './index.css';
 
 import React from 'react';
+import { Route, Switch } from 'react-router';
 import accountObservable from '@polkadot/ui-keyring/observable/accounts';
 import { Tabs } from '@polkadot/ui-app/index';
 import { withMulti, withObservable } from '@polkadot/ui-api/index';
@@ -25,19 +26,10 @@ type Props = AppProps & I18nProps & {
 };
 
 type State = {
-  action: Actions,
   hidden: Array<string>,
-  passthrough: string | null,
   items: Array<TabItem>
 };
 
-const Components: { [index: string]: React.ComponentType<any> } = {
-  'create': Creator,
-  'edit': Editor,
-  'restore': Restore,
-  'vanity': Vanity
-};
-
 class AccountsApp extends React.PureComponent<Props, State> {
   state: State;
 
@@ -51,13 +43,13 @@ class AccountsApp extends React.PureComponent<Props, State> {
 
     this.state = {
       ...baseState,
-      passthrough: null,
       items: [
         {
           name: 'edit',
           text: t('Edit account')
         },
         {
+          hasParams: true,
           name: 'create',
           text: t('Create account')
         },
@@ -75,14 +67,12 @@ class AccountsApp extends React.PureComponent<Props, State> {
 
   static showEditState () {
     return {
-      action: 'edit' as Actions,
       hidden: []
     };
   }
 
   static hideEditState () {
     return {
-      action: 'create' as Actions,
       hidden: ['edit']
     };
   }
@@ -102,47 +92,48 @@ class AccountsApp extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { onStatusChange } = this.props;
-    const { action, hidden, items, passthrough } = this.state;
-    const Component = Components[action];
+    const { basePath } = this.props;
+    const { hidden, items } = this.state;
+    const renderCreator = this.renderComponent(Creator);
 
     return (
       <main className='accounts--App'>
         <header>
           <Tabs
-            activeItem={action}
+            basePath={basePath}
             hidden={hidden}
             items={items}
-            onChange={this.onMenuChange}
           />
         </header>
-        <Component
-          onCreateAccount={this.selectEdit}
-          onRestoreAccount={this.selectEdit}
-          onCreateToggle={this.selectCreate}
-          onStatusChange={onStatusChange}
-          passthrough={passthrough}
-        />
+        <Switch>
+          <Route path={`${basePath}/create/:seed`} render={renderCreator} />
+          <Route path={`${basePath}/create`} render={renderCreator} />
+          <Route path={`${basePath}/restore`} render={this.renderComponent(Restore)} />
+          <Route path={`${basePath}/vanity`} render={this.renderComponent(Vanity)} />
+          <Route
+            render={
+              hidden.includes('edit')
+                ? renderCreator
+                : this.renderComponent(Editor)
+            }
+          />
+        </Switch>
       </main>
     );
   }
 
-  private onMenuChange = (action: Actions) => {
-    this.setState({ action });
-  }
+  private renderComponent = (Component: React.ComponentType<ComponentProps>) => {
+    return ({ match }: LocationProps) => {
+      const { basePath, onStatusChange } = this.props;
 
-  private selectCreate = (passthrough: string | null = null) => {
-    this.setState({
-      action: 'create',
-      passthrough
-    });
-  }
-
-  private selectEdit = (): void => {
-    this.setState({
-      action: 'edit',
-      passthrough: null
-    });
+      return (
+        <Component
+          basePath={basePath}
+          match={match}
+          onStatusChange={onStatusChange}
+        />
+      );
+    };
   }
 }
 

packages/app-accounts/src/types.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2019 @polkadot/app-accounts 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 { AppProps } from '@polkadot/ui-app/types';
+
+export type LocationProps = {
+  match: {
+    params: { [index: string]: any }
+  }
+};
+
+export type ComponentProps = AppProps & LocationProps;

packages/app-addresses/src/Creator.tsx

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/ui-app/types';
+import { ComponentProps } from './types';
 
 import React from 'react';
 
@@ -13,10 +14,7 @@ import keyring from '@polkadot/ui-keyring';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  onCreateAddress: () => void,
-  onStatusChange: (status: ActionStatus) => void
-};
+type Props = ComponentProps & I18nProps;
 
 type State = {
   address: string,
@@ -168,7 +166,7 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   onCommit = (): void => {
-    const { onCreateAddress, onStatusChange, t } = this.props;
+    const { basePath, onStatusChange, t } = this.props;
     const { address, isAddressExisting, name } = this.state;
 
     const status = {
@@ -190,9 +188,11 @@ class Creator extends React.PureComponent<Props, State> {
       status.message = error.message;
     }
 
-    onCreateAddress();
-
     onStatusChange(status);
+
+    if (status.status !== 'error') {
+      window.location.hash = basePath;
+    }
   }
 
   onDiscard = (): void => {

packages/app-addresses/src/Editor.tsx

@@ -4,6 +4,7 @@
 
 import { KeyringAddress } from '@polkadot/ui-keyring/types';
 import { I18nProps } from '@polkadot/ui-app/types';
+import { ComponentProps } from './types';
 
 import React from 'react';
 import { AddressSummary, Button, Input, InputAddress } from '@polkadot/ui-app/index';
@@ -13,9 +14,7 @@ import keyring from '@polkadot/ui-keyring';
 import Forgetting from './Forgetting';
 import translate from './translate';
 
-type Props = I18nProps & {
-  onStatusChange: (status: ActionStatus) => void
-};
+type Props = ComponentProps & I18nProps;
 
 type State = {
   current: KeyringAddress | null,

packages/app-addresses/src/index.tsx

@@ -4,11 +4,12 @@
 
 import { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+import { ComponentProps } from './types';
 
 import './index.css';
 
 import React from 'react';
-
+import { Route, Switch } from 'react-router';
 import addressObservable from '@polkadot/ui-keyring/observable/addresses';
 import Tabs, { TabItem } from '@polkadot/ui-app/Tabs';
 import { withMulti, withObservable } from '@polkadot/ui-api/index';
@@ -21,19 +22,11 @@ type Props = AppProps & I18nProps & {
   allAddresses?: SubjectInfo
 };
 
-type Actions = 'create' | 'edit';
-
 type State = {
-  action: Actions,
   hidden: Array<string>,
   items: Array<TabItem>
 };
 
-const Components: { [index: string]: React.ComponentType<any> } = {
-  'create': Creator,
-  'edit': Editor
-};
-
 class AddressesApp extends React.PureComponent<Props, State> {
   state: State;
 
@@ -62,14 +55,12 @@ class AddressesApp extends React.PureComponent<Props, State> {
 
   static showEditState () {
     return {
-      action: 'edit' as Actions,
       hidden: []
     };
   }
 
   static hideEditState () {
     return {
-      action: 'create' as Actions,
       hidden: ['edit']
     };
   }
@@ -89,36 +80,44 @@ class AddressesApp extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { onStatusChange } = this.props;
-    const { action, hidden, items } = this.state;
-    const Component = Components[action];
+    const { basePath } = this.props;
+    const { hidden, items } = this.state;
+    const renderCreator = this.renderComponent(Creator);
 
     return (
       <main className='addresses--App'>
         <header>
           <Tabs
-            activeItem={action}
+            basePath={basePath}
             hidden={hidden}
             items={items}
-            onChange={this.onMenuChange}
           />
         </header>
-        <Component
-          onCreateAddress={this.activateEdit}
-          onStatusChange={onStatusChange}
-        />
+        <Switch>
+          <Route path={`${basePath}/create`} render={renderCreator} />
+          <Route
+            render={
+              hidden.includes('edit')
+                ? renderCreator
+                : this.renderComponent(Editor)
+            }
+          />
+        </Switch>
       </main>
     );
   }
 
-  private onMenuChange = (action: Actions) => {
-    this.setState({ action });
-  }
+  private renderComponent = (Component: React.ComponentType<ComponentProps>) => {
+    return () => {
+      const { basePath, onStatusChange } = this.props;
 
-  private activateEdit = (): void => {
-    this.setState(
-      AddressesApp.showEditState()
-    );
+      return (
+        <Component
+          basePath={basePath}
+          onStatusChange={onStatusChange}
+        />
+      );
+    };
   }
 }
 

packages/app-addresses/src/types.ts

@@ -0,0 +1,7 @@
+// Copyright 2017-2019 @polkadot/app-addresses 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 { AppProps } from '@polkadot/ui-app/types';
+
+export type ComponentProps = AppProps;

packages/app-democracy/src/index.tsx

@@ -18,13 +18,13 @@ type Props = AppProps & BareProps & I18nProps;
 
 class App extends React.PureComponent<Props> {
   render () {
-    const { t } = this.props;
+    const { basePath, t } = this.props;
 
     return (
       <main className='democracy--App'>
         <header>
           <Tabs
-            activeItem='overview'
+            basePath={basePath}
             items={[{
               name: 'overview',
               text: t('Democracy overview')

packages/app-explorer/src/BlockByHash/Extrinsics.tsx

@@ -55,26 +55,24 @@ class Extrinsics extends React.PureComponent<Props> {
         className='explorer--BlockByHash-block'
         key={`extrinsic:${index}`}
       >
-        <article className='ui--hoverable explorer--Container'>
+        <article className='explorer--Container'>
           <div className='header'>
             <h3>
               {section}.{method}&nbsp;(#{formatNumber(index)})
             </h3>
             {this.renderSigner(extrinsic)}
           </div>
-          <div className='ui--hover'>
-            <div className='ui--hover-content'>
-              <div className='description'>{
-                meta && meta.documentation
-                  ? meta.documentation.join(' ')
-                  : ''
-              }</div>
-              <Call
-                className='details'
-                value={extrinsic}
-              />
-            </div>
-          </div>
+          <details>
+            <summary>{
+              meta && meta.documentation
+                ? meta.documentation.join(' ')
+                : 'Details'
+            }</summary>
+            <Call
+              className='details'
+              value={extrinsic}
+            />
+          </details>
         </article>
       </div>
     );

packages/app-explorer/src/BlockByHash/Logs.tsx

@@ -45,7 +45,7 @@ class Logs extends React.PureComponent<Props> {
     } else if (item.value instanceof U8a) {
       content = this.formatU8a(item.value);
     } else {
-      content = item.value.toString().split(',').join(', ');
+      content = <div>{item.value.toString().split(',').join(', ')}</div>;
     }
 
     return (
@@ -53,15 +53,14 @@ class Logs extends React.PureComponent<Props> {
         className='explorer--BlockByHash-block'
         key={index}
       >
-        <article className='explorer--Container ui--hoverable'>
+        <article className='explorer--Container'>
           <div className='header'>
             <h3>{item.type.toString()}</h3>
           </div>
-          <div className='ui--hover'>
-            <div className='ui--hover-content'>
-              {content}
-            </div>
-          </div>
+          <details>
+            <summary>Details</summary>
+            {content}
+          </details>
         </article>
       </div>
     );

packages/app-explorer/src/BlockHeader/BlockHeader.css

@@ -8,6 +8,8 @@
 }
 
 .explorer--BlockHeader {
+  animation: fadein 1s;
+
   .author {
     font-size: 1rem;
     text-align: right;
@@ -23,6 +25,10 @@
     overflow: hidden;
   }
 
+  .header-outer + details {
+    margin-top: -0.5rem;
+  }
+
   .header {
     color: rgba(0, 0, 0, 0.6);
     display: flex;
@@ -63,7 +69,6 @@
 
   .contains {
     border: 0;
-    padding: 0.5rem;
     text-align: center;
 
     > .info {

packages/app-explorer/src/BlockHeader/index.tsx

@@ -26,13 +26,12 @@ export default class BlockHeader extends React.PureComponent<Props> {
       return null;
     }
 
-    const { author, blockNumber, extrinsicsRoot, parentHash, stateRoot } = value;
-    const parentHex = parentHash.toHex();
-    const hashHex = value.hash.toHex();
+    const { author, blockNumber, hash } = value;
+    const hashHex = hash.toHex();
     const textNumber = formatNumber(blockNumber);
 
     return (
-      <article className={['explorer--BlockHeader', isSummary ? 'ui--hoverable summary' : ''].join(' ')}>
+      <article className='explorer--BlockHeader'>
         <div className='header-outer'>
           <div className='header'>
             <div className='number'>{
@@ -48,27 +47,37 @@ export default class BlockHeader extends React.PureComponent<Props> {
             }</div>
           </div>
         </div>
-        <div className='ui--hover'>
-          <div className='ui--hover-content contains'>
-            <div className='info'>
-              <label>parentHash</label>
-              <div className='hash'>{
-                value.blockNumber.gtn(1)
-                  ? <Link to={`/explorer/hash/${parentHex}`}>{parentHex}</Link>
-                  : parentHex
-              }</div>
-            </div>
-            <div className='info'>
-              <label>extrinsicsRoot</label>
-              <div className='hash'>{extrinsicsRoot.toHex()}</div>
-            </div>
-            <div className='info'>
-              <label>stateRoot</label>
-              <div className='hash'>{stateRoot.toHex()}</div>
-            </div>
-          </div>
-        </div>
+        {
+          isSummary
+            ? undefined
+            : this.renderDetails(value)
+        }
       </article>
     );
   }
+
+  private renderDetails ({ blockNumber, extrinsicsRoot, parentHash, stateRoot }: HeaderExtended) {
+    const parentHex = parentHash.toHex();
+
+    return (
+      <div className='contains'>
+        <div className='info'>
+          <label>parentHash</label>
+          <div className='hash'>{
+            blockNumber.gtn(1)
+              ? <Link to={`/explorer/hash/${parentHex}`}>{parentHex}</Link>
+              : parentHex
+          }</div>
+        </div>
+        <div className='info'>
+          <label>extrinsicsRoot</label>
+          <div className='hash'>{extrinsicsRoot.toHex()}</div>
+        </div>
+        <div className='info'>
+          <label>stateRoot</label>
+          <div className='hash'>{stateRoot.toHex()}</div>
+        </div>
+      </div>
+    );
+  }
 }

packages/app-explorer/src/BlockHeaders.tsx

@@ -45,9 +45,9 @@ class BlockHeaders extends React.PureComponent<Props> {
 
     return (
       <div className='explorer--BlockHeaders'>
-        {headers.map((header) => (
+        {headers.map((header, index) => (
           <BlockHeader
-            isSummary
+            isSummary={!!index}
             key={header.blockNumber.toString()}
             value={header}
             withLink={!header.blockNumber.isZero()}

packages/app-explorer/src/Events.tsx

@@ -52,7 +52,7 @@ class Events extends React.PureComponent<Props> {
 
     return (
       <article
-        className={['explorer--Container', 'ui--hoverable'].join(' ')}
+        className='explorer--Container'
         key={index}
       >
         <div className='header'>
@@ -65,21 +65,19 @@ class Events extends React.PureComponent<Props> {
           </h3>
 
         </div>
-        <div className='ui--hover'>
-          <div className='ui--hover-content'>
-            <div className='description'>
-              {
-                event.meta && event.meta.documentation
-                  ? event.meta.documentation.join(' ')
-                  : ''
-              }
-            </div>
-            <EventDisplay
-              className='details'
-              value={event}
-            />
-          </div>
-        </div>
+        <details>
+          <summary>
+            {
+              event.meta && event.meta.documentation
+                ? event.meta.documentation.join(' ')
+                : 'Details'
+            }
+          </summary>
+          <EventDisplay
+            className='details'
+            value={event}
+          />
+        </details>
       </article>
     );
   }

packages/app-explorer/src/index.tsx

@@ -16,10 +16,12 @@ type Props = AppProps & BareProps;
 
 export default class ExplorerApp extends React.Component<Props> {
   render () {
+    const { basePath } = this.props;
+
     return (
       <main className='explorer--App'>
         <Switch>
-          <Route path='/explorer/hash/:hash' component={BlockByHash} />
+          <Route path={`${basePath}/hash/:hash`} component={BlockByHash} />
           <Route component={Main} />
         </Switch>
       </main>

packages/app-extrinsics/src/index.tsx

@@ -23,7 +23,7 @@ type Props = AppProps & I18nProps & {
 
 class ExtrinsicsApp extends React.PureComponent<Props> {
   render () {
-    const { accountAll, t } = this.props;
+    const { accountAll, basePath, t } = this.props;
 
     if (!accountAll || !Object.keys(accountAll).length) {
       return (
@@ -40,7 +40,7 @@ class ExtrinsicsApp extends React.PureComponent<Props> {
       <main className='extrinsics--App'>
         <header>
           <Tabs
-            activeItem='create'
+            basePath={basePath}
             items={[{
               name: 'create',
               text: t('Extrinsic submission')

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

@@ -96,26 +96,36 @@ class CurrentList extends React.PureComponent<Props> {
       <div>
         {addresses.map((address) => {
           const nominators = (balances[address] || {}).nominators || [];
+          const children = nominators.length
+            ? (
+            <details>
+              <summary>{t('Nominators ({{count}})', {
+                replace: {
+                  count: nominators.length
+                }
+              })}</summary>
+              {nominators.map(({ accountId }) =>
+                <AddressMini
+                  key={accountId.toString()}
+                  value={accountId}
+                  withBalance
+                />
+              )}
+            </details>
+          )
+          : undefined;
 
           return (
-            <article
-              className='ui--hoverable'
-              key={address}
-            >
+            <article key={address}>
               <AddressRow
                 balance={balanceArray(address)}
-                children={nominators.map(({ accountId }) =>
-                  <AddressMini
-                    key={accountId.toString()}
-                    value={accountId}
-                    withBalance
-                  />
-                )}
                 name={this.getDisplayName(address, defaultName)}
                 value={address}
                 withCopy={false}
                 withNonce={false}
-              />
+              >
+                {children}
+              </AddressRow>
               <div
                 className={['blockNumber', lastAuthor === address ? 'latest' : ''].join(' ')}
                 key='lastBlock'

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

@@ -53,9 +53,15 @@
 .validator--ValidatorsList {
   display: flex;
 
-  article.ui--hoverable {
+  article {
     position: relative;
 
+    details {
+      summary + div {
+        margin-top: 0;
+      }
+    }
+
     .blockNumber {
       font-size: 1.5rem;
       font-weight: 100;

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

@@ -2,23 +2,18 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedBalancesMap } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/ui-app/types';
+import { BareProps } from '@polkadot/ui-app/types';
+import { ComponentProps } from '../types';
 
 import './index.css';
 
 import React from 'react';
-import { AccountId, Balance } from '@polkadot/types';
+import { Balance } from '@polkadot/types';
 
 import CurrentList from './CurrentList';
 import Summary from './Summary';
 
-type Props = I18nProps & {
-  balances: DerivedBalancesMap,
-  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
-  intentions: Array<string>,
-  validators: Array<string>
-};
+type Props = BareProps & ComponentProps;
 
 const ZERO = new Balance(0);
 

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

@@ -92,6 +92,7 @@ class Nominating extends React.PureComponent<Props, State> {
         </Modal.Header>
         <Modal.Content className='ui--signer-Signer-Content'>
           <Input
+            autoFocus
             className='medium'
             isError={!isNomineeValid}
             label={t('nominate the following address (validator or intention)')}

packages/app-staking/src/StakeList/Preferences.tsx

@@ -8,7 +8,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { ValidatorPrefs } from '@polkadot/types';
 import { withCall, withMulti } from '@polkadot/ui-api/index';
-import { Button, InputNumber, Modal } from '@polkadot/ui-app/index';
+import { Button, InputBalance, InputNumber, Modal } from '@polkadot/ui-app/index';
 
 import translate from '../translate';
 
@@ -97,6 +97,7 @@ class Preferences extends React.PureComponent<Props, State> {
         </Modal.Header>
         <Modal.Content className='ui--signer-Signer-Content'>
           <InputNumber
+            autoFocus
             bitLength={32}
             className='medium'
             label={t('unstake threshold')}
@@ -107,10 +108,8 @@ class Preferences extends React.PureComponent<Props, State> {
                 : '0'
             }
           />
-          <InputNumber
-            bitLength={128}
+          <InputBalance
             className='medium'
-            isSi
             label={t('payment preferences')}
             onChange={this.onChangePayment}
             value={

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

@@ -2,10 +2,9 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 import { QueueProps } from '@polkadot/ui-app/Status/types';
-import { AccountId, Balance } from '@polkadot/types';
+import { ComponentProps } from '../types';
 
 import React from 'react';
 import keyring from '@polkadot/ui-keyring';
@@ -14,12 +13,7 @@ import { QueueConsumer } from '@polkadot/ui-app/Status/Context';
 import Account from './Account';
 import translate from '../translate';
 
-type Props = I18nProps & {
-  balances: DerivedBalancesMap,
-  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
-  intentions: Array<string>,
-  validators: Array<string>
-};
+type Props = I18nProps & ComponentProps;
 
 class StakeList extends React.PureComponent<Props> {
   render () {

packages/app-staking/src/index.tsx

@@ -5,10 +5,12 @@
 import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import { ApiProps } from '@polkadot/ui-api/types';
+import { ComponentProps } from './types';
 
 import React from 'react';
+import { Route, Switch } from 'react-router';
 import { AccountId, Balance } from '@polkadot/types';
-import { Tabs } from '@polkadot/ui-app/index';
+import Tabs, { TabItem } from '@polkadot/ui-app/Tabs';
 import { withCalls } from '@polkadot/ui-api/index';
 
 import './index.css';
@@ -17,8 +19,6 @@ import StakeList from './StakeList';
 import Overview from './Overview';
 import translate from './translate';
 
-type Actions = 'actions' | 'overview';
-
 type Props = AppProps & ApiProps & I18nProps & {
   balances?: DerivedBalancesMap,
   intentions?: Array<AccountId>,
@@ -26,25 +26,31 @@ type Props = AppProps & ApiProps & I18nProps & {
 };
 
 type State = {
-  action: Actions,
   intentions: Array<string>,
+  tabs: Array<TabItem>,
   validators: Array<string>
 };
 
-const Components: { [index: string]: React.ComponentType<any> } = {
-  'overview': Overview,
-  'actions': StakeList
-};
-
 class App extends React.PureComponent<Props, State> {
   state: State;
 
   constructor (props: Props) {
     super(props);
 
+    const { t } = props;
+
     this.state = {
-      action: 'overview',
       intentions: [],
+      tabs: [
+        {
+          name: 'overview',
+          text: t('Staking Overview')
+        },
+        {
+          name: 'actions',
+          text: t('Account Actions')
+        }
+      ],
       validators: []
     };
   }
@@ -61,41 +67,39 @@ class App extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { action, intentions, validators } = this.state;
-    const { t, balances = {} } = this.props;
-    const Component = Components[action];
-    const items = [
-      {
-        name: 'overview',
-        text: t('Staking Overview')
-      },
-      {
-        name: 'actions',
-        text: t('Account Actions')
-      }
-    ];
+    const { tabs } = this.state;
+    const { basePath } = this.props;
 
     return (
       <main className='staking--App'>
         <header>
           <Tabs
-            activeItem={action}
-            items={items}
-            onChange={this.onMenuChange}
+            basePath={basePath}
+            items={tabs}
           />
         </header>
+        <Switch>
+          <Route path={`${basePath}/actions`} render={this.renderComponent(StakeList)} />
+          <Route render={this.renderComponent(Overview)} />
+        </Switch>
+      </main>
+    );
+  }
+
+  private renderComponent = (Component: React.ComponentType<ComponentProps>) => {
+    return (): React.ReactNode => {
+      const { intentions, validators } = this.state;
+      const { balances = {} } = this.props;
+
+      return (
         <Component
           balances={balances}
           balanceArray={this.balanceArray}
           intentions={intentions}
           validators={validators}
         />
-      </main>
-    );
-  }
-
-  private onMenuChange = (action: Actions) => {
-    this.setState({ action });
+      );
+    };
   }
 
   private balanceArray = (_address: AccountId | string): Array<Balance> | undefined => {

packages/app-staking/src/types.ts

@@ -0,0 +1,13 @@
+// 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 { DerivedBalancesMap } from '@polkadot/api-derive/types';
+import { AccountId, Balance } from '@polkadot/types';
+
+export type ComponentProps = {
+  balances: DerivedBalancesMap,
+  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
+  intentions: Array<string>,
+  validators: Array<string>
+};

packages/app-storage/src/Selection/Modules.tsx

@@ -7,7 +7,7 @@ import { StorageFunction } from '@polkadot/types/StorageKey';
 import { I18nProps } from '@polkadot/ui-app/types';
 import { RawParams } from '@polkadot/ui-params/types';
 import { ApiProps } from '@polkadot/ui-api/types';
-import { PartialModuleQuery } from '../types';
+import { ComponentProps } from '../types';
 
 import React from 'react';
 import { Button, InputStorage } from '@polkadot/ui-app/index';
@@ -17,9 +17,7 @@ import { isUndefined } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = ApiProps & I18nProps & {
-  onAdd: (query: PartialModuleQuery) => void
-};
+type Props = ComponentProps & ApiProps & I18nProps;
 
 type State = {
   isValid: boolean,

packages/app-storage/src/Selection/Raw.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/ui-app/types';
-import { PartialRawQuery } from '../types';
+import { ComponentProps } from '../types';
 
 import React from 'react';
 import { Button, Input } from '@polkadot/ui-app/index';
@@ -12,9 +12,7 @@ import translate from '../translate';
 import { u8aToU8a } from '@polkadot/util';
 import { Compact } from '@polkadot/types/codec';
 
-type Props = I18nProps & {
-  onAdd: (query: PartialRawQuery) => void
-};
+type Props = ComponentProps & I18nProps;
 
 type State = {
   isValid: boolean,

packages/app-storage/src/Selection/index.tsx

@@ -4,31 +4,25 @@
 
 import { I18nProps } from '@polkadot/ui-app/types';
 import { TabItem } from '@polkadot/ui-app/Tabs';
-import { QueryTypes, ParitalQueryTypes } from '../types';
+import { ComponentProps, QueryTypes, ParitalQueryTypes } from '../types';
 
 import React from 'react';
+import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/ui-app/index';
 
 import Modules from './Modules';
 import Raw from './Raw';
 import translate from '../translate';
 
-type Actions = 'modules' | 'raw';
-
 type Props = I18nProps & {
+  basePath: string,
   onAdd: (query: QueryTypes) => void
 };
 
 type State = {
-  action: Actions,
   items: Array<TabItem>
 };
 
-const Components: { [index: string]: React.ComponentType<any> } = {
-  'modules': Modules,
-  'raw': Raw
-};
-
 let id = -1;
 
 class Selection extends React.PureComponent<Props, State> {
@@ -38,7 +32,6 @@ class Selection extends React.PureComponent<Props, State> {
     const { t } = this.props;
 
     this.state = {
-      action: 'modules',
       items: [
         {
           name: 'modules',
@@ -53,23 +46,33 @@ class Selection extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { action, items } = this.state;
-    const Component = Components[action];
+    const { basePath } = this.props;
+    const { items } = this.state;
 
     return (
       <>
         <header>
           <Tabs
-            activeItem={action}
+            basePath={basePath}
             items={items}
-            onChange={this.onTabChange}
           />
         </header>
-        <Component onAdd={this.onAdd} />
+        <Switch>
+          <Route path={`${basePath}/raw`} render={this.renderComponent(Raw)} />
+          <Route render={this.renderComponent(Modules)} />
+        </Switch>
       </>
     );
   }
 
+  private renderComponent = (Component: React.ComponentType<ComponentProps>) => {
+    return (): React.ReactNode => {
+      return (
+        <Component onAdd={this.onAdd} />
+      );
+    };
+  }
+
   private onAdd = (query: ParitalQueryTypes) => {
     const { onAdd } = this.props;
 
@@ -78,10 +81,6 @@ class Selection extends React.PureComponent<Props, State> {
       id: ++id
     });
   }
-
-  private onTabChange = (action: Actions) => {
-    this.setState({ action });
-  }
 }
 
 export default translate(Selection);

packages/app-storage/src/index.tsx

@@ -25,11 +25,15 @@ class StorageApp extends React.PureComponent<Props, State> {
   };
 
   render () {
+    const { basePath } = this.props;
     const { queue } = this.state;
 
     return (
       <main className='storage--App'>
-        <Selection onAdd={this.onAdd} />
+        <Selection
+          basePath={basePath}
+          onAdd={this.onAdd}
+        />
         <Queries
           onRemove={this.onRemove}
           value={queue}

packages/app-storage/src/types.ts

@@ -25,3 +25,7 @@ export type StorageRawQuery = PartialRawQuery & IdQuery;
 export type QueryTypes = StorageModuleQuery | StorageRawQuery;
 
 export type ParitalQueryTypes = PartialModuleQuery | PartialRawQuery;
+
+export type ComponentProps = {
+  onAdd: (query: ParitalQueryTypes) => void
+};

packages/app-toolbox/src/index.tsx

@@ -7,7 +7,8 @@ import { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-import Tabs from '@polkadot/ui-app/Tabs';
+import { Route, Switch } from 'react-router';
+import Tabs, { TabItem } from '@polkadot/ui-app/Tabs';
 
 import Hash from './Hash';
 import Rpc from './Rpc';
@@ -15,66 +16,60 @@ import Sign from './Sign';
 import Verify from './Verify';
 import translate from './translate';
 
-type Actions = 'hash' | 'rpc' | 'sign' | 'verify';
-
 type Props = AppProps & I18nProps;
 
 type State = {
-  action: Actions
-};
-
-const Components: { [index: string]: React.ComponentType<any> } = {
-  'hash': Hash,
-  'rpc': Rpc,
-  'sign': Sign,
-  'verify': Verify
+  tabs: Array<TabItem>
 };
 
 class ToolboxApp extends React.PureComponent<Props, State> {
-  state: State = {
-    action: 'rpc'
-  };
+  constructor (props: Props) {
+    super(props);
 
-  render () {
     const { t } = this.props;
-    const { action } = this.state;
-    const Component = Components[action];
-    const items = [
-      {
-        name: 'rpc',
-        text: 'RPC calls'
-      },
-      {
-        name: 'hash',
-        text: t('Hash data')
-      },
-      {
-        name: 'sign',
-        text: t('Sign message')
-      },
-      {
-        name: 'verify',
-        text: t('Verify signature')
-      }
-    ];
+
+    this.state = {
+      tabs: [
+        {
+          name: 'rpc',
+          text: 'RPC calls'
+        },
+        {
+          name: 'hash',
+          text: t('Hash data')
+        },
+        {
+          name: 'sign',
+          text: t('Sign message')
+        },
+        {
+          name: 'verify',
+          text: t('Verify signature')
+        }
+      ]
+    };
+  }
+  render () {
+    const { basePath } = this.props;
+    const { tabs } = this.state;
 
     return (
       <main className='toolbox--App'>
         <header>
           <Tabs
-            activeItem={action}
-            items={items}
-            onChange={this.onMenuChange}
+            basePath={basePath}
+            items={tabs}
           />
         </header>
-        <Component />
+        <Switch>
+          <Route path={`${basePath}/hash`} component={Hash} />
+          <Route path={`${basePath}/sign`} component={Sign} />
+          <Route path={`${basePath}/verify`} component={Verify} />
+          <Route component={Rpc} />
+        </Switch>
       </main>
     );
   }
-
-  onMenuChange = (action: Actions) => {
-    this.setState({ action });
-  }
 }
 
 export default translate(ToolboxApp);

packages/app-transfer/src/index.tsx

@@ -2,7 +2,7 @@
 // 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 { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import React from 'react';
@@ -16,7 +16,7 @@ import './index.css';
 import Transfer from './Transfer';
 import translate from './translate';
 
-type Props = I18nProps & {
+type Props = AppProps & I18nProps & {
   allAccounts?: SubjectInfo
 };
 
@@ -30,7 +30,7 @@ class App extends React.PureComponent<Props> {
   }
 
   private renderBody () {
-    const { allAccounts, t } = this.props;
+    const { allAccounts, basePath, t } = this.props;
 
     if (!allAccounts || !Object.keys(allAccounts).length) {
       return (
@@ -46,7 +46,7 @@ class App extends React.PureComponent<Props> {
       <>
         <header>
           <Tabs
-            activeItem='create'
+            basePath={basePath}
             items={[{
               name: 'create',
               text: t('Balance transfer')

packages/ui-api/package.json

@@ -31,8 +31,8 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.2.0",
-    "@polkadot/api": "^0.41.7",
-    "@polkadot/types": "^0.41.7",
+    "@polkadot/api": "^0.41.11",
+    "@polkadot/types": "^0.41.11",
     "rxjs-compat": "^6.3.2"
   }
 }

packages/ui-app/package.json

@@ -11,10 +11,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.2.0",
-    "@polkadot/extrinsics": "^0.41.7",
+    "@polkadot/extrinsics": "^0.41.11",
     "@polkadot/keyring": "^0.33.36",
-    "@polkadot/storage": "^0.41.7",
-    "@polkadot/types": "^0.41.7",
+    "@polkadot/storage": "^0.41.11",
+    "@polkadot/types": "^0.41.11",
     "@polkadot/ui-api": "^0.22.54",
     "@polkadot/ui-identicon": "^0.25.8",
     "@polkadot/ui-keyring": "^0.25.8",

packages/ui-app/src/AddressSummary.tsx

@@ -196,10 +196,8 @@ class AddressSummary extends React.PureComponent<Props> {
     }
 
     return (
-      <div className='ui--AddressSummary-children ui--hover'>
-        <div className='ui--hover-content'>
-          {children}
-        </div>
+      <div className='ui--AddressSummary-children'>
+        {children}
       </div>
     );
   }

packages/ui-app/src/Tabs.tsx

@@ -5,79 +5,60 @@
 import { BareProps } from './types';
 
 import React from 'react';
+import { withRouter } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 import classes from './util/classes';
 
 export type TabItem = {
+  hasParams?: boolean,
   name: string,
   text: React.ReactNode
 };
 
 type Props = BareProps & {
-  activeItem: string,
+  basePath: string,
   hidden?: Array<string>,
-  items: Array<TabItem>,
-  onChange?: (name: any) => void
+  items: Array<TabItem>
 };
 
-type State = {
-  active: string
-};
-
-export default class Tabs extends React.PureComponent<Props, State> {
-  state: State;
-
-  constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      active: props.activeItem
-    };
-  }
-
-  static getDerivedStateFromProps ({ activeItem }: Props, { active }: State) {
-    return activeItem === active
-      ? null
-      : {
-        active: activeItem
-      };
-  }
-
+class Tabs extends React.PureComponent<Props> {
   render () {
-    const { className, activeItem, hidden = [], items, style } = this.props;
-    const { active } = this.state;
-    const currentItem = active || activeItem;
+    const { className, hidden = [], items, style } = this.props;
 
     return (
       <div
-        className={classes('ui--Menu', 'ui menu tabular', className)}
+        className={classes('ui--Menu ui menu tabular', className)}
         style={style}
       >
-        {items
-          .filter(({ name }) =>
-            !hidden.includes(name)
-          )
-          .map(({ name, text }) => (
-            <a
-              className={classes('item', currentItem === name ? 'active' : '')}
-              key={name}
-              onClick={this.onSelect(name)}
-            >
-              {text}
-            </a>
-          ))
+        {
+          items
+            .filter(({ name }) => !hidden.includes(name))
+            .map(this.renderItem)
         }
       </div>
     );
   }
 
-  private onSelect = (name: string) => {
-    return (): void => {
-      const { onChange } = this.props;
+  private renderItem = ({ hasParams, name, text }: TabItem, index: number) => {
+    const { basePath } = this.props;
+    const to = index === 0
+      ? basePath
+      : `${basePath}/${name}`;
 
-      this.setState({ active: name }, () => {
-        onChange && onChange(name);
-      });
-    };
+    return (
+      <NavLink
+        activeClassName='active'
+        className='item'
+        exact={!hasParams}
+        key={to}
+        strict={!hasParams}
+        to={to}
+      >
+        {text}
+      </NavLink>
+    );
   }
 }
+
+export default withRouter(Tabs as React.ComponentType<any>) as any as React.ComponentType<Props>;

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

@@ -95,6 +95,24 @@ article {
   }
 }
 
+details {
+  summary {
+    display: block;
+    margin: 0.5rem 0.25rem;
+    opacity: 0.75;
+    outline: none;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  summary + div {
+    margin-top: 0.75rem;
+  }
+}
+
 header,
 summary {
   margin-bottom: 2em;

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

@@ -94,12 +94,6 @@ header .ui--Button-Group {
   vertical-align: top;
 }
 
-.ui--AddressSummary-children {
-  .ui--hover-content {
-    margin-top: 0.5rem !important;
-  }
-}
-
 .ui--AddressRow .ui--AddressSummary-children {
   display: block;
 }

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

@@ -2,37 +2,6 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
-article.ui--hoverable {
-  .ui--hover {
-    position: relative;
-    margin: 0 -1.5rem;
-  }
-
-  .ui--hover-content {
-    border: 1px solid #4e4e4e;
-    border-radius: 0 0 0.25rem 0.25rem;
-    border-top-width: 0;
-    border-left-width: 0.25rem;
-    background: white;
-    display: none !important;
-    left: -0.25rem;
-    padding: 0.5rem 1.5rem 1rem;
-    position: absolute;
-    right: -1px;
-    top: -1px;
-    z-index: 50;
-  }
-
-  &:hover,
-  &.active {
-    border-color: #4e4e4e;
-
-    .ui--hover-content {
-      display: block !important;
-    }
-  }
-}
-
 .ui--grid,
 .ui--row {
   width: 100%;

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

@@ -91,15 +91,4 @@
   .ui.red.progress .bar {
     background-color: $red;
   }
-
-  article.ui--hoverable {
-    .ui--hover-content {
-      border-color: $wild-orchid;
-    }
-
-    &:hover,
-    &.active {
-      border-color: $wild-orchid;
-    }
-  }
 }

packages/ui-reactive/package.json

@@ -31,8 +31,8 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.2.0",
-    "@polkadot/api": "^0.41.7",
-    "@polkadot/types": "^0.41.7",
+    "@polkadot/api": "^0.41.11",
+    "@polkadot/types": "^0.41.11",
     "rxjs-compat": "^6.3.2"
   }
 }

yarn.lock

@@ -1385,31 +1385,31 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@polkadot/api-derive@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.41.7.tgz#fec5994f74d81a97bcd42874d29dc8620f04e496"
-  integrity sha512-EaIHphOJkl+tadB7+2QRxsmL0d6a9JGa7ffxKolVtIXGkyrMQpm33I+zL714KZH5zZzwAybt948eunWkrTDvYw==
+"@polkadot/api-derive@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.41.11.tgz#5304a5a8bf5caf3aa99f71fb79992820f7021cdc"
+  integrity sha512-31PUN2Yegk0vI9LlqlY+otFjRkD+/b9+AQg+GabqcjBy6MpRCB+X8pj7QilMiEbdBseR5w50q14RZSuCh9ikOQ==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@polkadot/api" "^0.41.7"
-    "@polkadot/types" "^0.41.7"
+    "@polkadot/api" "^0.41.11"
+    "@polkadot/types" "^0.41.11"
     "@types/memoizee" "^0.4.2"
     "@types/rx" "^4.1.1"
     memoizee "^0.4.14"
     rxjs "^6.3.3"
 
-"@polkadot/api@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.41.7.tgz#e65d620d9effc9b9754d82d1f533d71d8f3912cd"
-  integrity sha512-G7oGcnBTZX1Sk2kl2fcW+BBAwrnOh+iCw84MvziCEiczfEFeWO7HuZcv5INnOxf1qy7m6MfQNlKIXfqAdoEs2g==
+"@polkadot/api@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.41.11.tgz#2d2b45055dad0cca09ffd408a99127c98b7ba198"
+  integrity sha512-NJ8mCHEbnuA3Ml5Z3yLoXW2lnA3z+8IRdapu1xOhNOCFXvHKRsQ0qp7YRUW64jZ4Oz7bUR4KzYInyBjdt5khcQ==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@polkadot/api-derive" "^0.41.7"
-    "@polkadot/extrinsics" "^0.41.7"
-    "@polkadot/rpc-provider" "^0.41.7"
-    "@polkadot/rpc-rx" "^0.41.7"
-    "@polkadot/storage" "^0.41.7"
-    "@polkadot/types" "^0.41.7"
+    "@polkadot/api-derive" "^0.41.11"
+    "@polkadot/extrinsics" "^0.41.11"
+    "@polkadot/rpc-provider" "^0.41.11"
+    "@polkadot/rpc-rx" "^0.41.11"
+    "@polkadot/storage" "^0.41.11"
+    "@polkadot/types" "^0.41.11"
     "@types/rx" "^4.1.1"
     rxjs "^6.3.3"
 
@@ -1489,19 +1489,19 @@
     typedoc-plugin-no-inherit "^1.1.2"
     typescript "^3.2.2"
 
-"@polkadot/extrinsics@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics/-/extrinsics-0.41.7.tgz#01f698f01d223a3847b7cf72eab4ebdee15e0596"
-  integrity sha512-RMPQEIXSk633FDOo1XV74ocyAI8UfDOYnrVb71xko5qspsyRsE8/Km+DkId3Y4PoCKiSE7Ns1+ZqUpvFnNnvJw==
+"@polkadot/extrinsics@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics/-/extrinsics-0.41.11.tgz#ff613bbf15fe7e3d0b6d5a14288f795776b0f41f"
+  integrity sha512-RRAT/WSTnB+CgN4r9AV/2ltDVmJ/e2T8TQU0tn9hARuGq157wAZRO/GFPqBl4AjzU2eDRTDU0safbgpUe5O/hw==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@polkadot/types" "^0.41.7"
+    "@polkadot/types" "^0.41.11"
     "@polkadot/util" "^0.33.36"
 
-"@polkadot/jsonrpc@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.41.7.tgz#d33156bf599c184adcd134774e9f9e6b60f3d8f1"
-  integrity sha512-+Xwd50rDvJqMKkR0Jl/vqJwyLXuGyFAui/44xPf1hlp4kUuGmEd2DWWwXT9bNWqYPsmjIlfIU+CjIZ6fB2u3zA==
+"@polkadot/jsonrpc@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.41.11.tgz#6ccd1472afaf9dcf3209e4eba095cec849dd87a9"
+  integrity sha512-rQ1msTHujTbCa5sptdA8iZa+lRA/9shs1b2gukP2mbgksuebZauoRlk7swCB7+ylY/Y6iF5B82cqrVCNEg/Zgg==
   dependencies:
     "@babel/runtime" "^7.2.0"
 
@@ -1516,25 +1516,25 @@
     "@types/bs58" "^4.0.0"
     bs58 "^4.0.1"
 
-"@polkadot/rpc-core@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.41.7.tgz#09990d72aaa8c034b872f6b525fcf8633799fff1"
-  integrity sha512-XFo2nV0A2lBTdMqcHoAqHfzk0og2/jTp7vSu95K4nXp867IrgRc0C4p1rk9u0Mq+pYs2LxQEXyQzw8FxuQM7Zw==
+"@polkadot/rpc-core@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.41.11.tgz#ab52acbe4e948951e7b2f76c935dbf79a950d750"
+  integrity sha512-eX8xVjLJiz3kNF8JtHGOnkw7Q5nN7qvU5LeFNI8cz+7UjPcYplVOfXU2Rjd6X4X2a2jOJ7bg9vPkGTSYjfeH3g==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@polkadot/jsonrpc" "^0.41.7"
-    "@polkadot/rpc-provider" "^0.41.7"
-    "@polkadot/types" "^0.41.7"
+    "@polkadot/jsonrpc" "^0.41.11"
+    "@polkadot/rpc-provider" "^0.41.11"
+    "@polkadot/types" "^0.41.11"
     "@polkadot/util" "^0.33.36"
 
-"@polkadot/rpc-provider@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.41.7.tgz#878c9138d65efecbf3295c8b6401235dd2bae160"
-  integrity sha512-sCOJFb+9ezqwTFum+RFEhPw5EHLrZnJk09NTAPngd0+Q9ItZXTUy1htR/7/0u8KUFM3+4B+ZkGVsWJYbw2NOnQ==
+"@polkadot/rpc-provider@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.41.11.tgz#7a5678d53a09655c022c73d907f74b13f22db8e8"
+  integrity sha512-HqGwKGCI3v1PpTbG92auXLeXSNtHQQMBzKmgUFjmHp3kg4rSK5yT/bLSU9u6B1KkOUWdY9+24gjFyHNX/eLrWQ==
   dependencies:
     "@babel/runtime" "^7.2.0"
     "@polkadot/keyring" "^0.33.36"
-    "@polkadot/storage" "^0.41.7"
+    "@polkadot/storage" "^0.41.11"
     "@polkadot/util" "^0.33.36"
     "@polkadot/util-crypto" "^0.33.36"
     "@types/nock" "^9.3.0"
@@ -1542,25 +1542,27 @@
     isomorphic-fetch "^2.2.1"
     websocket "^1.0.28"
 
-"@polkadot/rpc-rx@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-rx/-/rpc-rx-0.41.7.tgz#e1ac6c2573703041f5e95503c6ca1f9c8a3c027e"
-  integrity sha512-aZoCam1MgKU8pFqbLI+gF0lmoQn7W3cXWUNkPOSpql16V1YQFETVzhZgGq11Egs0UnTQq4mf+JgyWhcx9QmH8w==
+"@polkadot/rpc-rx@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-rx/-/rpc-rx-0.41.11.tgz#4a4d041e20d5d120fb6def485581a8f14fc016c6"
+  integrity sha512-RGoXZf/ZIgZGMyVgtt/lh8y0DFusqpouq4R0wq0m7YK6CcCOcqKYpXln4UZshbEWc5MHE/vY2EVTJ1NSV8OSsQ==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@polkadot/rpc-core" "^0.41.7"
-    "@polkadot/rpc-provider" "^0.41.7"
+    "@polkadot/rpc-core" "^0.41.11"
+    "@polkadot/rpc-provider" "^0.41.11"
+    "@types/memoizee" "^0.4.2"
     "@types/rx" "^4.1.1"
+    memoizee "^0.4.14"
     rxjs "^6.3.3"
 
-"@polkadot/storage@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/storage/-/storage-0.41.7.tgz#cb01d8f5ec44d540052436cc1ff4c8003e62eff6"
-  integrity sha512-esK5WdKZU2ej1X3tdor2uY9AUD3l7upA+09OprGxkW8/wmXzy0IRV7zJv42B66AcGRtnpXccBWIfxf/GI62IOQ==
+"@polkadot/storage@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/storage/-/storage-0.41.11.tgz#86dab4a1e13a05b5a4d7278acae2eb0431279c23"
+  integrity sha512-MIrntyF4xClw0PgIksJFCH2LPSgv1zez/VzUMHP2JSl4CJTlrdab/ZxzJ/1vv7c2uR33FNMGK7ZjxaMFeWbY6w==
   dependencies:
     "@babel/runtime" "^7.2.0"
     "@polkadot/keyring" "^0.33.36"
-    "@polkadot/types" "^0.41.7"
+    "@polkadot/types" "^0.41.11"
     "@polkadot/util" "^0.33.36"
     "@polkadot/util-crypto" "^0.33.36"
 
@@ -1569,10 +1571,10 @@
   resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.52.tgz#6fb09e494d244dad4b3a9ca581bfe13beec66565"
   integrity sha512-sij1O0x4CY51A394RYD4/aQwDPwIxIeTOpYI4AZgdF/vq5nvF14b4XFq9vAcSnblaIosf0sYKoz1f3dkN3QqLw==
 
-"@polkadot/types@^0.41.7":
-  version "0.41.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.41.7.tgz#50a74aa7b91ea8c381016d716a8edfdc7fffb447"
-  integrity sha512-i4rtuPUl+T6LJR0nri0pzPee16MfsPojvxtrtyBowgr2oCEMwPvGUZXhHQsv8Baep21/MwjeBCQao2UYserhCA==
+"@polkadot/types@^0.41.11":
+  version "0.41.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.41.11.tgz#ef9c5e7d16c2a5beb40dd1e8344a4fcb33f6627d"
+  integrity sha512-uhKHze2NqZFesDi+iR+5bTtEX2gm20PzrDBcGQjR2qiMEolt4O/0PMbLVL5stjDiXv5AZcZrKcpmaFujDJISbA==
   dependencies:
     "@babel/runtime" "^7.2.0"
     "@polkadot/keyring" "^0.33.36"