From 397dd0c983fdb98d488aa309237ccabe4c53160e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 23 May 2018 18:01:42 +0200
Subject: [PATCH] Update jsonrpc dependency tree (#54)

* Use tyopeToString from @polkadot/params

* Upgrades... before checks

* Cleanups... WIP.

* more WIP.

* Expand defaultValue & handlers

* Cleanups

* CodeClimate cleanups

* Additional CodeClimate cleanups

* Base for app-rpc

* Initial split into ui-signer

* Signer operational (extrinsics)

* Decode extrinsic method

* RPC progress...

* RPC class works again

* @flow cleanups
---
 .flowconfig                                   |   2 +-
 packages/app-accounts/src/Address.js          |  46 +--
 packages/app-accounts/src/Creator.js          | 116 +++++---
 packages/app-accounts/src/Editor.js           | 158 +++++-----
 packages/app-accounts/src/index.js            |   4 +-
 packages/app-addresses/src/Creator.js         |  94 +++---
 packages/app-addresses/src/Editor.js          | 158 +++++-----
 packages/app-addresses/src/index.js           |   4 +-
 packages/app-explorer/package.json            |   8 +-
 packages/app-explorer/src/index.js            |   4 +-
 packages/app-extrinsics/package.json          |   5 +-
 packages/app-extrinsics/src/Extrinsic.js      |   6 +-
 packages/app-extrinsics/src/Params/Account.js |  14 +-
 packages/app-extrinsics/src/Params/Call.js    |   3 +-
 .../app-extrinsics/src/Params/Extrinsic.js    |  19 +-
 .../app-extrinsics/src/Params/Proposal.js     |   3 +-
 packages/app-extrinsics/src/Selection.js      |  20 +-
 packages/app-extrinsics/src/Signer/Decoded.js |  55 ----
 packages/app-extrinsics/src/Signer/Signer.css |  35 ---
 packages/app-extrinsics/src/Signer/index.js   | 179 -----------
 packages/app-extrinsics/src/Signer/submit.js  |  34 ---
 packages/app-extrinsics/src/index.css         |  24 --
 packages/app-extrinsics/src/index.js          |  71 +----
 packages/app-extrinsics/src/types.js          |  22 --
 packages/app-rpc/LICENSE                      |  15 +
 packages/app-rpc/README.md                    |   1 +
 packages/app-rpc/package.json                 |  19 ++
 packages/app-rpc/src/Account.js               |  95 ++++++
 packages/app-rpc/src/Results.js               |  49 +++
 packages/app-rpc/src/Selection.js             | 141 +++++++++
 packages/app-rpc/src/index.css                |  12 +
 packages/app-rpc/src/index.js                 |  41 +++
 packages/app-rpc/src/translate.js             |   8 +
 packages/app-storage/src/Query.js             |  37 +--
 packages/app-storage/src/Selection.js         |   2 +-
 packages/app-storage/src/index.js             |   4 +-
 packages/app-toolbox/src/Hash.js              | 102 ++++---
 packages/app-toolbox/src/Sign.js              | 164 ++++++----
 packages/app-toolbox/src/Unlock.js            | 107 ++++---
 packages/app-toolbox/src/Verify.js            | 142 +++++----
 packages/app-toolbox/src/index.js             |  65 ++--
 .../app-vanitygen/src/generator/calculate.js  |  30 +-
 packages/app-vanitygen/src/index.js           | 174 ++++++-----
 packages/apps/package.json                    |   4 +-
 packages/apps/src/App/index.js                |  14 +-
 packages/apps/src/routing/index.js            |   3 +-
 packages/apps/src/routing/rpc.js              |  21 ++
 packages/apps/webpack.config.js               |   2 +-
 packages/ui-app/package.json                  |  14 +-
 packages/ui-app/src/Dropdown.js               |   3 +-
 packages/ui-app/src/Input.js                  |   3 +-
 .../src/InputAddress/addressToAddress.js      |   2 +-
 packages/ui-app/src/InputAddress/index.js     |   2 +-
 packages/ui-app/src/InputRpc/SelectMethod.js  |  53 ++++
 packages/ui-app/src/InputRpc/SelectSection.js |  44 +++
 packages/ui-app/src/InputRpc/index.js         | 114 +++++++
 .../ui-app/src/InputRpc/options/method.js     |  52 ++++
 .../ui-app/src/InputRpc/options/section.js    |  29 ++
 packages/ui-app/src/InputStorage/SelectKey.js |   2 +-
 packages/ui-app/src/InputStorage/index.js     |   2 +-
 .../ui-app/src/InputStorage/options/key.js    |   2 +-
 .../src/InputStorage/options/section.js       |   2 +-
 packages/ui-app/src/Output.js                 |   6 +-
 packages/ui-app/src/Params/Param/Account.js   |   9 +-
 packages/ui-app/src/Params/Param/Amount.js    |  16 +-
 packages/ui-app/src/Params/Param/BaseBytes.js |  67 +++++
 packages/ui-app/src/Params/Param/Bool.js      |  10 +-
 packages/ui-app/src/Params/Param/Bytes.js     |  75 ++---
 packages/ui-app/src/Params/Param/Code.js      |   4 +-
 packages/ui-app/src/Params/Param/Hash.js      |  10 +-
 packages/ui-app/src/Params/Param/KeyValue.js  |   4 +-
 packages/ui-app/src/Params/Param/Unknown.js   |  14 +-
 .../ui-app/src/Params/Param/VoteThreshold.js  |  10 +-
 .../ui-app/src/Params/Param/findComponent.js  |  12 +-
 packages/ui-app/src/Params/Param/index.js     | 110 ++-----
 packages/ui-app/src/Params/index.js           |  92 +++---
 packages/ui-app/src/Params/initValue.js       |  49 ++-
 packages/ui-app/src/Params/typeToText.js      |  19 --
 packages/ui-app/src/Params/types.js           |  30 +-
 packages/ui-app/src/Params/valueToText.js     |  34 ++-
 packages/ui-app/src/Params/values.js          |  79 ++---
 packages/ui-app/src/styles/components.css     |  23 ++
 packages/ui-app/src/styles/form.css           |  18 --
 packages/ui-app/src/styles/semantic.css       |   4 +
 packages/ui-keyring/package.json              |   6 +-
 packages/ui-keyring/src/account/forget.js     |   1 -
 packages/ui-keyring/src/options/index.js      |  40 ++-
 packages/ui-signer/LICENSE                    |  15 +
 packages/ui-signer/README.md                  |   1 +
 packages/ui-signer/package.json               |  24 ++
 packages/ui-signer/src/Extrinsic.js           |  86 ++++++
 packages/ui-signer/src/Modal.js               | 245 +++++++++++++++
 packages/ui-signer/src/Queue.js               |  83 ++++++
 .../src/Status.js                             |   8 +-
 .../src/Signer => ui-signer/src}/Unlock.js    |   4 +-
 packages/ui-signer/src/index.css              |  59 ++++
 packages/ui-signer/src/index.js               |  46 +++
 packages/ui-signer/src/rawToValues.js         |  16 +
 packages/ui-signer/src/sign.js                |  26 ++
 packages/ui-signer/src/submit.js              |  34 +++
 packages/ui-signer/src/translate.js           |   8 +
 packages/ui-signer/src/types.js               |  52 ++++
 yarn.lock                                     | 279 +++++++++---------
 103 files changed, 2794 insertions(+), 1594 deletions(-)
 delete mode 100644 packages/app-extrinsics/src/Signer/Decoded.js
 delete mode 100644 packages/app-extrinsics/src/Signer/Signer.css
 delete mode 100644 packages/app-extrinsics/src/Signer/index.js
 delete mode 100644 packages/app-extrinsics/src/Signer/submit.js
 delete mode 100644 packages/app-extrinsics/src/types.js
 create mode 100644 packages/app-rpc/LICENSE
 create mode 100644 packages/app-rpc/README.md
 create mode 100644 packages/app-rpc/package.json
 create mode 100644 packages/app-rpc/src/Account.js
 create mode 100644 packages/app-rpc/src/Results.js
 create mode 100644 packages/app-rpc/src/Selection.js
 create mode 100644 packages/app-rpc/src/index.css
 create mode 100644 packages/app-rpc/src/index.js
 create mode 100644 packages/app-rpc/src/translate.js
 create mode 100644 packages/apps/src/routing/rpc.js
 create mode 100644 packages/ui-app/src/InputRpc/SelectMethod.js
 create mode 100644 packages/ui-app/src/InputRpc/SelectSection.js
 create mode 100644 packages/ui-app/src/InputRpc/index.js
 create mode 100644 packages/ui-app/src/InputRpc/options/method.js
 create mode 100644 packages/ui-app/src/InputRpc/options/section.js
 create mode 100644 packages/ui-app/src/Params/Param/BaseBytes.js
 delete mode 100644 packages/ui-app/src/Params/typeToText.js
 create mode 100644 packages/ui-signer/LICENSE
 create mode 100644 packages/ui-signer/README.md
 create mode 100644 packages/ui-signer/package.json
 create mode 100644 packages/ui-signer/src/Extrinsic.js
 create mode 100644 packages/ui-signer/src/Modal.js
 create mode 100644 packages/ui-signer/src/Queue.js
 rename packages/{app-extrinsics => ui-signer}/src/Status.js (80%)
 rename packages/{app-extrinsics/src/Signer => ui-signer/src}/Unlock.js (93%)
 create mode 100644 packages/ui-signer/src/index.css
 create mode 100644 packages/ui-signer/src/index.js
 create mode 100644 packages/ui-signer/src/rawToValues.js
 create mode 100644 packages/ui-signer/src/sign.js
 create mode 100644 packages/ui-signer/src/submit.js
 create mode 100644 packages/ui-signer/src/translate.js
 create mode 100644 packages/ui-signer/src/types.js

diff --git a/.flowconfig b/.flowconfig
index 90874500f9..f3cc1c3299 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -15,4 +15,4 @@ all=warn
 include_warnings=true
 module.name_mapper='^@polkadot/app-\(accounts\|addresses\|explorer\|extrinsics\|home\|rpc\|settings\|storage\|toolbox\|vanitygen\)\(.*\)$' -> '<PROJECT_ROOT>/packages/app-\1/src\2'
 module.name_mapper='^@polkadot/apps\(.*\)$' -> '<PROJECT_ROOT>/packages/apps/src\1'
-module.name_mapper='^@polkadot/ui-\(app\|keyring\)\(.*\)$' -> '<PROJECT_ROOT>/packages/ui-\1/src\2'
+module.name_mapper='^@polkadot/ui-\(app\|keyring\|signer\)\(.*\)$' -> '<PROJECT_ROOT>/packages/ui-\1/src\2'
diff --git a/packages/app-accounts/src/Address.js b/packages/app-accounts/src/Address.js
index e9aae23987..b873864230 100644
--- a/packages/app-accounts/src/Address.js
+++ b/packages/app-accounts/src/Address.js
@@ -55,7 +55,7 @@ export default class Address extends React.PureComponent<Props, State> {
 
   render (): React$Node {
     const { className, style } = this.props;
-    const { address, isValid, publicKey, shortValue } = this.state;
+    const { address, isValid, shortValue } = this.state;
 
     return (
       <div
@@ -73,26 +73,32 @@ export default class Address extends React.PureComponent<Props, State> {
           </div>
           <CopyButton value={address} />
         </div>
-        {
-          !isValid
-            ? null
-            : [
-              <Balance
-                className='accounts--Address-balance'
-                key='balance'
-                label='balance '
-                params={publicKey}
-              />,
-              <Nonce
-                className='accounts--Address-nonce'
-                key='nonce'
-                params={publicKey}
-              >
-                {' transactions'}
-              </Nonce>
-            ]
-        }
+        {this.renderBalance()}
       </div>
     );
   }
+
+  renderBalance (): React$Node {
+    const { isValid, publicKey } = this.state;
+
+    if (!isValid) {
+      return null;
+    }
+
+    return [
+      <Balance
+        className='accounts--Address-balance'
+        key='balance'
+        label='balance '
+        params={publicKey}
+      />,
+      <Nonce
+        className='accounts--Address-nonce'
+        key='nonce'
+        params={publicKey}
+      >
+        {' transactions'}
+      </Nonce>
+    ];
+  }
 }
diff --git a/packages/app-accounts/src/Creator.js b/packages/app-accounts/src/Creator.js
index 30907d2916..fa07d427ed 100644
--- a/packages/app-accounts/src/Creator.js
+++ b/packages/app-accounts/src/Creator.js
@@ -62,8 +62,8 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { address, isNameValid, isPassValid, isSeedValid, isValid, name, password, seed } = this.state;
+    const { className, style } = this.props;
+    const { address, isSeedValid } = this.state;
 
     return (
       <div
@@ -79,58 +79,76 @@ class Creator extends React.PureComponent<Props, State> {
                 : null
             }
           />
-          <div className='grow'>
-            <div className='ui--row'>
-              <Input
-                className='full'
-                isError={!isSeedValid}
-                label={t('creator.seed', {
-                  defaultValue: 'create from the following seed (hex or string)'
-                })}
-                onChange={this.onChangeSeed}
-                value={seed}
-              />
-            </div>
-            <div className='ui--row'>
-              <Input
-                className='full'
-                isError={!isNameValid}
-                label={t('creator.name', {
-                  defaultValue: 'name the account'
-                })}
-                onChange={this.onChangeName}
-                value={name}
-              />
-            </div>
-            <div className='ui--row'>
-              <Password
-                className='full'
-                isError={!isPassValid}
-                label={t('creator.password', {
-                  defaultValue: 'encrypt it using the password'
-                })}
-                onChange={this.onChangePass}
-                value={password}
-              />
-            </div>
-          </div>
+          {this.renderInput()}
         </div>
-        <Button.Group>
-          <Button
-            onClick={this.onDiscard}
-            text={t('creator.discard', {
-              defaultValue: 'Reset'
+        {this.renderButtons()}
+      </div>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { isValid } = this.state;
+
+    return (
+      <Button.Group>
+        <Button
+          onClick={this.onDiscard}
+          text={t('creator.discard', {
+            defaultValue: 'Reset'
+          })}
+        />
+        <Button
+          isDisabled={!isValid}
+          isPrimary
+          onClick={this.onCommit}
+          text={t('creator.save', {
+            defaultValue: 'Save'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderInput (): React$Node {
+    const { t } = this.props;
+    const { isNameValid, isPassValid, isSeedValid, name, password, seed } = this.state;
+
+    return (
+      <div className='grow'>
+        <div className='ui--row'>
+          <Input
+            className='full'
+            isError={!isSeedValid}
+            label={t('creator.seed', {
+              defaultValue: 'create from the following seed (hex or string)'
             })}
+            onChange={this.onChangeSeed}
+            value={seed}
           />
-          <Button
-            isDisabled={!isValid}
-            isPrimary
-            onClick={this.onCommit}
-            text={t('creator.save', {
-              defaultValue: 'Save'
+        </div>
+        <div className='ui--row'>
+          <Input
+            className='full'
+            isError={!isNameValid}
+            label={t('creator.name', {
+              defaultValue: 'name the account'
             })}
+            onChange={this.onChangeName}
+            value={name}
           />
-        </Button.Group>
+        </div>
+        <div className='ui--row'>
+          <Password
+            className='full'
+            isError={!isPassValid}
+            label={t('creator.password', {
+              defaultValue: 'encrypt it using the password'
+            })}
+            onChange={this.onChangePass}
+            value={password}
+          />
+        </div>
       </div>
     );
   }
diff --git a/packages/app-accounts/src/Editor.js b/packages/app-accounts/src/Editor.js
index ca1e593f14..4055088716 100644
--- a/packages/app-accounts/src/Editor.js
+++ b/packages/app-accounts/src/Editor.js
@@ -44,86 +44,100 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { defaultPublicKey, currentPair, editedName, isEdited } = this.state;
-
-    if (!currentPair) {
-      return (
-        <div
-          className={classes('accounts--Editor', className)}
-          style={style}
-        >
-          {t('editor.none', {
-            defaultValue: 'There are no saved accounts. Add some first.'
-          })}
-        </div>
-      );
-    }
-
-    const address = currentPair.address();
+    const { className, style } = this.props;
 
     return (
       <div
         className={classes('accounts--Editor', className)}
         style={style}
       >
-        <div className='ui--grid'>
-          <Address
-            className='shrink'
-            value={address}
-          />
-          <div className='grow'>
-            <div className='ui--row'>
-              <InputAddress
-                className='full'
-                defaultValue={defaultPublicKey}
-                hideAddress
-                isInput={false}
-                label={t('editor.select', {
-                  defaultValue: 'using my account'
-                })}
-                onChange={this.onChangeAccount}
-                type='account'
-                value={address}
-              />
-            </div>
-            <div className='ui--row'>
-              <Input
-                className='full'
-                label={t('editor.name', {
-                  defaultValue: 'identified by the name'
-                })}
-                onChange={this.onChangeName}
-                value={editedName}
-              />
-            </div>
+        {this.renderData()}
+        {this.renderButtons()}
+      </div>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { currentPair, isEdited } = this.state;
+
+    if (!currentPair) {
+      return null;
+    }
+
+    return (
+      <Button.Group>
+        <Button
+          isNegative
+          onClick={this.onForget}
+          text={t('editor.forget', {
+            defaultValue: 'Forget'
+          })}
+        />
+        <Button.Group.Divider />
+        <Button
+          isDisabled={!isEdited}
+          onClick={this.onDiscard}
+          text={t('editor.reset', {
+            defaultValue: 'Reset'
+          })}
+        />
+        <Button
+          isDisabled={!isEdited}
+          isPrimary
+          onClick={this.onCommit}
+          text={t('editor.save', {
+            defaultValue: 'Save'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderData (): React$Node {
+    const { t } = this.props;
+    const { currentPair, defaultPublicKey, editedName } = this.state;
+
+    if (!currentPair) {
+      return t('editor.none', {
+        defaultValue: 'There are no saved accounts. Add some first.'
+      });
+    }
+
+    const address = currentPair.address();
+
+    return (
+      <div className='ui--grid'>
+        <Address
+          className='shrink'
+          value={address}
+        />
+        <div className='grow'>
+          <div className='ui--row'>
+            <InputAddress
+              className='full'
+              defaultValue={defaultPublicKey}
+              hideAddress
+              isInput={false}
+              label={t('editor.select', {
+                defaultValue: 'using my account'
+              })}
+              onChange={this.onChangeAccount}
+              type='account'
+              value={address}
+            />
+          </div>
+          <div className='ui--row'>
+            <Input
+              className='full'
+              label={t('editor.name', {
+                defaultValue: 'identified by the name'
+              })}
+              onChange={this.onChangeName}
+              value={editedName}
+            />
           </div>
         </div>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={this.onForget}
-            text={t('editor.forget', {
-              defaultValue: 'Forget'
-            })}
-          />
-          <Button.Group.Divider />
-          <Button
-            isDisabled={!isEdited}
-            onClick={this.onDiscard}
-            text={t('editor.reset', {
-              defaultValue: 'Reset'
-            })}
-          />
-          <Button
-            isDisabled={!isEdited}
-            isPrimary
-            onClick={this.onCommit}
-            text={t('editor.save', {
-              defaultValue: 'Save'
-            })}
-          />
-        </Button.Group>
       </div>
     );
   }
diff --git a/packages/app-accounts/src/index.js b/packages/app-accounts/src/index.js
index ef70e4fa5f..9cfcdc5ee0 100644
--- a/packages/app-accounts/src/index.js
+++ b/packages/app-accounts/src/index.js
@@ -31,7 +31,7 @@ const Components: { [Actions]: React$ComponentType<any> } = {
   'edit': Editor
 };
 
-class App extends React.PureComponent<Props, State> {
+class AccountsApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
   render (): React$Node {
@@ -75,4 +75,4 @@ class App extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(App);
+export default translate(AccountsApp);
diff --git a/packages/app-addresses/src/Creator.js b/packages/app-addresses/src/Creator.js
index 5ab7479fda..aa7cd1fd32 100644
--- a/packages/app-addresses/src/Creator.js
+++ b/packages/app-addresses/src/Creator.js
@@ -39,8 +39,8 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { address, isAddressValid, isNameValid, isValid, name } = this.state;
+    const { className, style } = this.props;
+    const { address } = this.state;
 
     return (
       <div
@@ -52,47 +52,65 @@ class Creator extends React.PureComponent<Props, State> {
             className='shrink'
             value={address}
           />
-          <div className='grow'>
-            <div className='ui--row'>
-              <Input
-                className='full'
-                isError={!isAddressValid}
-                label={t('creator.address', {
-                  defaultValue: 'add the following address'
-                })}
-                onChange={this.onChangeAddress}
-                value={address}
-              />
-            </div>
-            <div className='ui--row'>
-              <Input
-                className='full'
-                isError={!isNameValid}
-                label={t('creator.name', {
-                  defaultValue: 'name the entry'
-                })}
-                onChange={this.onChangeName}
-                value={name}
-              />
-            </div>
-          </div>
+          {this.renderInput()}
         </div>
-        <Button.Group>
-          <Button
-            onClick={this.onDiscard}
-            text={t('creator.discard', {
-              defaultValue: 'Reset'
+        {this.renderButtons()}
+      </div>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { isValid } = this.state;
+
+    return (
+      <Button.Group>
+        <Button
+          onClick={this.onDiscard}
+          text={t('creator.discard', {
+            defaultValue: 'Reset'
+          })}
+        />
+        <Button
+          isDisabled={!isValid}
+          isPrimary
+          onClick={this.onCommit}
+          text={t('creator.save', {
+            defaultValue: 'Save'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderInput (): React$Node {
+    const { t } = this.props;
+    const { address, isAddressValid, isNameValid, name } = this.state;
+
+    return (
+      <div className='grow'>
+        <div className='ui--row'>
+          <Input
+            className='full'
+            isError={!isAddressValid}
+            label={t('creator.address', {
+              defaultValue: 'add the following address'
             })}
+            onChange={this.onChangeAddress}
+            value={address}
           />
-          <Button
-            isDisabled={!isValid}
-            isPrimary
-            onClick={this.onCommit}
-            text={t('creator.save', {
-              defaultValue: 'Save'
+        </div>
+        <div className='ui--row'>
+          <Input
+            className='full'
+            isError={!isNameValid}
+            label={t('creator.name', {
+              defaultValue: 'name the entry'
             })}
+            onChange={this.onChangeName}
+            value={name}
           />
-        </Button.Group>
+        </div>
       </div>
     );
   }
diff --git a/packages/app-addresses/src/Editor.js b/packages/app-addresses/src/Editor.js
index 520ac4a17d..2cbea7b2b9 100644
--- a/packages/app-addresses/src/Editor.js
+++ b/packages/app-addresses/src/Editor.js
@@ -45,86 +45,100 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { currentAddress, defaultPublicKey, editedName, isEdited } = this.state;
-
-    if (!currentAddress) {
-      return (
-        <div
-          className={classes('addresses--Editor', className)}
-          style={style}
-        >
-          {t('editor.none', {
-            defaultValue: 'There are no saved addresses. Add some first.'
-          })}
-        </div>
-      );
-    }
-
-    const address = currentAddress.address();
+    const { className, style } = this.props;
 
     return (
       <div
         className={classes('addresses--Editor', className)}
         style={style}
       >
-        <div className='ui--grid'>
-          <Address
-            className='shrink'
-            value={address}
-          />
-          <div className='grow'>
-            <div className='ui--row'>
-              <InputAddress
-                className='full'
-                defaultValue={defaultPublicKey}
-                hideAddress
-                isInput={false}
-                label={t('editor.select', {
-                  defaultValue: 'edit the selected address'
-                })}
-                onChange={this.onChangeAddress}
-                type='address'
-                value={address}
-              />
-            </div>
-            <div className='ui--row'>
-              <Input
-                className='full'
-                label={t('editor.name', {
-                  defaultValue: 'identified by the name'
-                })}
-                onChange={this.onChangeName}
-                value={editedName}
-              />
-            </div>
+        {this.renderData()}
+        {this.renderButtons()}
+      </div>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { currentAddress, isEdited } = this.state;
+
+    if (!currentAddress) {
+      return null;
+    }
+
+    return (
+      <Button.Group>
+        <Button
+          isNegative
+          onClick={this.onForget}
+          text={t('editor.forget', {
+            defaultValue: 'Forget'
+          })}
+        />
+        <Button.Group.Divider />
+        <Button
+          isDisabled={!isEdited}
+          onClick={this.onDiscard}
+          text={t('editor.reset', {
+            defaultValue: 'Reset'
+          })}
+        />
+        <Button
+          isDisabled={!isEdited}
+          isPrimary
+          onClick={this.onCommit}
+          text={t('editor.save', {
+            defaultValue: 'Save'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderData (): React$Node {
+    const { t } = this.props;
+    const { currentAddress, defaultPublicKey, editedName } = this.state;
+
+    if (!currentAddress) {
+      return t('editor.none', {
+        defaultValue: 'There are no saved addresses. Add some first.'
+      });
+    }
+
+    const address = currentAddress.address();
+
+    return (
+      <div className='ui--grid'>
+        <Address
+          className='shrink'
+          value={address}
+        />
+        <div className='grow'>
+          <div className='ui--row'>
+            <InputAddress
+              className='full'
+              defaultValue={defaultPublicKey}
+              hideAddress
+              isInput={false}
+              label={t('editor.select', {
+                defaultValue: 'edit the selected address'
+              })}
+              onChange={this.onChangeAddress}
+              type='address'
+              value={address}
+            />
+          </div>
+          <div className='ui--row'>
+            <Input
+              className='full'
+              label={t('editor.name', {
+                defaultValue: 'identified by the name'
+              })}
+              onChange={this.onChangeName}
+              value={editedName}
+            />
           </div>
         </div>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={this.onForget}
-            text={t('editor.forget', {
-              defaultValue: 'Forget'
-            })}
-          />
-          <Button.Group.Divider />
-          <Button
-            isDisabled={!isEdited}
-            onClick={this.onDiscard}
-            text={t('editor.reset', {
-              defaultValue: 'Reset'
-            })}
-          />
-          <Button
-            isDisabled={!isEdited}
-            isPrimary
-            onClick={this.onCommit}
-            text={t('editor.save', {
-              defaultValue: 'Save'
-            })}
-          />
-        </Button.Group>
       </div>
     );
   }
diff --git a/packages/app-addresses/src/index.js b/packages/app-addresses/src/index.js
index 7c36baa58f..92cbc64259 100644
--- a/packages/app-addresses/src/index.js
+++ b/packages/app-addresses/src/index.js
@@ -31,7 +31,7 @@ const Components: { [Actions]: React$ComponentType<any> } = {
   'edit': Editor
 };
 
-class App extends React.PureComponent<Props, State> {
+class AddressesApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
   render (): React$Node {
@@ -75,4 +75,4 @@ class App extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(App);
+export default translate(AddressesApp);
diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json
index 1cb1fedd51..eb1855e389 100644
--- a/packages/app-explorer/package.json
+++ b/packages/app-explorer/package.json
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/primitives": "^0.14.3",
-    "@polkadot/primitives-codec": "^0.14.3",
-    "@polkadot/primitives-json": "^0.14.3",
+    "@polkadot/primitives": "^0.15.8",
+    "@polkadot/primitives-codec": "^0.15.8",
+    "@polkadot/primitives-json": "^0.15.8",
     "@polkadot/ui-app": "^0.6.2",
-    "@polkadot/util-crypto": "^0.20.5"
+    "@polkadot/util-crypto": "^0.21.3"
   }
 }
diff --git a/packages/app-explorer/src/index.js b/packages/app-explorer/src/index.js
index 9b12ebcdc6..28961a456c 100644
--- a/packages/app-explorer/src/index.js
+++ b/packages/app-explorer/src/index.js
@@ -18,7 +18,7 @@ import translate from './translate';
 
 type Props = I18nProps & {};
 
-function App ({ className, style, t }: Props): React$Node {
+function ExplorerApp ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={classes('explorer--App', className)}
@@ -36,4 +36,4 @@ function App ({ className, style, t }: Props): React$Node {
   );
 }
 
-export default translate(App);
+export default translate(ExplorerApp);
diff --git a/packages/app-extrinsics/package.json b/packages/app-extrinsics/package.json
index 1cdeb0a1ba..bcda54a168 100644
--- a/packages/app-extrinsics/package.json
+++ b/packages/app-extrinsics/package.json
@@ -12,9 +12,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/extrinsics": "^0.14.3",
-    "@polkadot/extrinsics-codec": "^0.14.3",
+    "@polkadot/extrinsics": "^0.15.8",
+    "@polkadot/extrinsics-codec": "^0.15.8",
     "@polkadot/ui-app": "^0.6.2",
+    "@polkadot/ui-signer": "^0.6.2",
     "react-dropzone": "^4.2.9"
   }
 }
diff --git a/packages/app-extrinsics/src/Extrinsic.js b/packages/app-extrinsics/src/Extrinsic.js
index 22ff28abce..28de6e6b30 100644
--- a/packages/app-extrinsics/src/Extrinsic.js
+++ b/packages/app-extrinsics/src/Extrinsic.js
@@ -6,7 +6,7 @@
 import type { Extrinsic } from '@polkadot/extrinsics/types';
 import type { BareProps } from '@polkadot/ui-app/types';
 import type { RawParam } from '@polkadot/ui-app/Params/types';
-import type { EncodedMessage } from './types';
+import type { EncodedMessage } from '@polkadot/ui-signer/types';
 
 import React from 'react';
 
@@ -24,7 +24,7 @@ type Props = BareProps & {
   isPrivate?: boolean,
   labelMethod?: string,
   labelSection?: string,
-  onChange: (values: EncodedMessage) => void
+  onChange: (encoded: EncodedMessage) => void
 };
 
 type State = {
@@ -87,7 +87,7 @@ export default class ExtrinsicDisplay extends React.PureComponent<Props, State>
       onChange({
         extrinsic,
         isValid,
-        value
+        values: [value]
       });
     });
   }
diff --git a/packages/app-extrinsics/src/Params/Account.js b/packages/app-extrinsics/src/Params/Account.js
index a80f3aaf2f..c05be19541 100644
--- a/packages/app-extrinsics/src/Params/Account.js
+++ b/packages/app-extrinsics/src/Params/Account.js
@@ -3,19 +3,17 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Props as BaseProps } from '@polkadot/ui-app/Params/types';
+import type { Props } from '@polkadot/ui-app/Params/types';
 
 import React from 'react';
 
 import BaseAccount from '../Account';
 
-type Props = BaseProps & {
-  defaultValue?: Uint8Array
-};
-
 export default class Account extends React.PureComponent<Props> {
   render (): React$Node {
-    const { className, defaultValue, isDisabled, isError, label, style, withLabel } = this.props;
+    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    // flowlint-next-line unclear-type:off
+    const defaultValue = ((value: any): Uint8Array);
 
     return (
       <BaseAccount
@@ -33,9 +31,9 @@ export default class Account extends React.PureComponent<Props> {
   }
 
   onChange = (value?: Uint8Array): void => {
-    const { index, onChange } = this.props;
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid: !!value && value.length === 32,
       value
     });
diff --git a/packages/app-extrinsics/src/Params/Call.js b/packages/app-extrinsics/src/Params/Call.js
index 5df2eb133a..61d1c68fe0 100644
--- a/packages/app-extrinsics/src/Params/Call.js
+++ b/packages/app-extrinsics/src/Params/Call.js
@@ -13,7 +13,7 @@ import Extrinsic from './Extrinsic';
 
 const defaultValue = extrinsics.staking.methods.public.transfer;
 
-export default function Call ({ className, isDisabled, isError, index, label, onChange, style, withLabel }: Props): React$Node {
+export default function Call ({ className, isDisabled, isError, label, onChange, style, withLabel }: Props): React$Node {
   return (
     <Extrinsic
       className={className}
@@ -21,7 +21,6 @@ export default function Call ({ className, isDisabled, isError, index, label, on
       isDisabled={isDisabled}
       isError={isError}
       isPrivate={false}
-      index={index}
       label={label}
       onChange={onChange}
       style={style}
diff --git a/packages/app-extrinsics/src/Params/Extrinsic.js b/packages/app-extrinsics/src/Params/Extrinsic.js
index 841e4d044d..7be0377b81 100644
--- a/packages/app-extrinsics/src/Params/Extrinsic.js
+++ b/packages/app-extrinsics/src/Params/Extrinsic.js
@@ -4,18 +4,22 @@
 // @flow
 
 import type { Extrinsic } from '@polkadot/extrinsics/types';
-import type { Props as BaseProps } from '@polkadot/ui-app/Params/types';
 import type { I18nProps } from '@polkadot/ui-app/types';
-import type { EncodedMessage } from '../types';
+import type { RawParam$OnChange } from '@polkadot/ui-app/Params/types';
+import type { EncodedMessage } from '@polkadot/ui-signer/types';
 
 import React from 'react';
 
 import BaseExtrinsic from '../Extrinsic';
 import translate from '../translate';
 
-type Props = BaseProps & I18nProps & {
+type Props = I18nProps & {
   defaultValue: Extrinsic,
+  isDisabled: boolean,
+  isError: boolean,
   isPrivate: boolean,
+  label: string,
+  onChange: RawParam$OnChange,
   withLabel?: boolean,
 };
 
@@ -49,12 +53,13 @@ class CExtrinsic extends React.PureComponent<Props> {
     );
   }
 
-  onChange = ({ isValid, value }: EncodedMessage): void => {
-    const { index, onChange } = this.props;
+  onChange = ({ isValid, values }: EncodedMessage): void => {
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid,
-      value
+      // flowlint-next-line unclear-type:off
+      value: ((values[0]: any): Uint8Array)
     });
   }
 }
diff --git a/packages/app-extrinsics/src/Params/Proposal.js b/packages/app-extrinsics/src/Params/Proposal.js
index fc42e3f18b..666a7bbb87 100644
--- a/packages/app-extrinsics/src/Params/Proposal.js
+++ b/packages/app-extrinsics/src/Params/Proposal.js
@@ -13,7 +13,7 @@ import Extrinsic from './Extrinsic';
 
 const defaultValue = extrinsics.consensus.methods.private.setCode;
 
-export default function Proposal ({ className, isDisabled, isError, index, label, onChange, style, withLabel }: Props): React$Node {
+export default function Proposal ({ className, isDisabled, isError, label, onChange, style, withLabel }: Props): React$Node {
   return (
     <Extrinsic
       className={className}
@@ -21,7 +21,6 @@ export default function Proposal ({ className, isDisabled, isError, index, label
       isDisabled={isDisabled}
       isError={isError}
       isPrivate
-      index={index}
       label={label}
       onChange={onChange}
       style={style}
diff --git a/packages/app-extrinsics/src/Selection.js b/packages/app-extrinsics/src/Selection.js
index 7c8fd7eddc..725964c452 100644
--- a/packages/app-extrinsics/src/Selection.js
+++ b/packages/app-extrinsics/src/Selection.js
@@ -5,11 +5,12 @@
 
 import type BN from 'bn.js';
 import type { I18nProps } from '@polkadot/ui-app/types';
-import type { EncodedMessage, QueueTx } from './types';
+import type { EncodedMessage, QueueTx$MessageAdd } from '@polkadot/ui-signer/types';
 
 import React from 'react';
 
 import extrinsics from '@polkadot/extrinsics-substrate';
+import rpc from '@polkadot/jsonrpc';
 import Button from '@polkadot/ui-app/Button';
 import classes from '@polkadot/ui-app/util/classes';
 
@@ -19,7 +20,7 @@ import Nonce from './Nonce';
 import translate from './translate';
 
 type Props = I18nProps & {
-  onQueue: (value: QueueTx) => void
+  queueAdd: QueueTx$MessageAdd
 };
 
 type State = {
@@ -30,8 +31,7 @@ type State = {
 };
 
 const defaultExtrinsic = extrinsics.staking.methods.public.transfer;
-
-let id = 0;
+const defaultRpc = rpc.author.methods.submitExtrinsic;
 
 class Selection extends React.PureComponent<Props, State> {
   state: State = ({
@@ -117,17 +117,15 @@ class Selection extends React.PureComponent<Props, State> {
   }
 
   onQueue = (): void => {
-    const { onQueue } = this.props;
-    const { encoded: { extrinsic, isValid, value }, nonce, publicKey } = this.state;
+    const { queueAdd } = this.props;
+    const { encoded: { isValid, values }, nonce, publicKey } = this.state;
 
-    onQueue({
-      extrinsic,
-      id: ++id,
+    queueAdd({
       isValid,
       nonce,
       publicKey,
-      status: 'queued',
-      value
+      rpc: defaultRpc,
+      values
     });
   }
 }
diff --git a/packages/app-extrinsics/src/Signer/Decoded.js b/packages/app-extrinsics/src/Signer/Decoded.js
deleted file mode 100644
index 494ff0c936..0000000000
--- a/packages/app-extrinsics/src/Signer/Decoded.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright 2017-2018 Jaco Greeff
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-// @flow
-
-import type { I18nProps } from '@polkadot/ui-app/types';
-import type { QueueTx } from '../types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { Trans } from 'react-i18next';
-
-import classes from '@polkadot/ui-app/util/classes';
-import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
-import u8aToHexShort from '@polkadot/util/u8a/toHexShort';
-import addressEncode from '@polkadot/util-keyring/address/encode';
-
-import translate from '../translate';
-
-type Props = I18nProps & {
-  value: QueueTx
-};
-
-function Decoded ({ className, style, t, value: { extrinsic: { name, section }, nonce = new BN(0), publicKey, value } }: Props): React$Node {
-  const from = addressEncode(publicKey);
-
-  return (
-    <div
-      className={classes('extrinsics--Signer-Decoded', className)}
-      style={style}
-    >
-      <div className='expanded'>
-        <p>
-          <Trans i18nkey='decoded.short'>
-            You are about to sign a message from <span className='code'>{from}</span> calling <span className='code'>{section}.{name}</span> with an index of <span className='code'>{nonce.toString()}</span>
-          </Trans>
-        </p>
-        <p>
-          {t('decoded.data', {
-            defaultValue: 'The encoded parameters contains the data'
-          })}
-        </p>
-        <p className='code'>
-          {u8aToHexShort(value, 512)}
-        </p>
-      </div>
-      <IdentityIcon
-        className='icon'
-        value={from}
-      />
-    </div>
-  );
-}
-
-export default translate(Decoded);
diff --git a/packages/app-extrinsics/src/Signer/Signer.css b/packages/app-extrinsics/src/Signer/Signer.css
deleted file mode 100644
index 78affa7cbf..0000000000
--- a/packages/app-extrinsics/src/Signer/Signer.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/* Copyright 2017-2018 Jaco Greeff
-/* This software may be modified and distributed under the terms
-/* of the ISC license. See the LICENSE file for details. */
-
-.extrinsics--Signer {}
-
-.extrinsics--Signer-Decoded,
-.extrinsics--Signer-Unlock {
-  align-content: center;
-  display: flex;
-  line-height: 1.5em;
-}
-
-.extrinsics--Signer-Decoded {}
-
-.extrinsics--Signer-Unlock {
-  padding-top: 1.5rem;
-}
-
-.extrinsics--Signer-Content {}
-
-.extrinsics--Signer-Content .expanded {
-  padding-right: 2em;
-}
-
-.extrinsics--Signer-Content .expanded .code {
-  background: #f5f5f5;
-  font-family: monospace;
-  margin: 0 0.25em;
-  overflow-wrap: break-word;
-  padding: 0.25em 0.5em;
-  word-break: break-all;
-  word-break: break-word;
-  word-wrap: break-word;
-}
diff --git a/packages/app-extrinsics/src/Signer/index.js b/packages/app-extrinsics/src/Signer/index.js
deleted file mode 100644
index ac7eca3e0d..0000000000
--- a/packages/app-extrinsics/src/Signer/index.js
+++ /dev/null
@@ -1,179 +0,0 @@
-// Copyright 2017-2018 Jaco Greeff
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-// @flow
-
-import type { ApiProps } from '@polkadot/ui-react-rx/types';
-import type { I18nProps } from '@polkadot/ui-app/types';
-import type { QueueTx } from '../types';
-
-import './Signer.css';
-
-import React from 'react';
-
-import Button from '@polkadot/ui-app/Button';
-import Modal from '@polkadot/ui-app/Modal';
-import classes from '@polkadot/ui-app/util/classes';
-import keyring from '@polkadot/ui-keyring';
-import withApi from '@polkadot/ui-react-rx/with/api';
-
-import translate from '../translate';
-import Decoded from './Decoded';
-import Unlock from './Unlock';
-import submitExtrinsic from './submit';
-
-type Props = I18nProps & ApiProps & {
-  onSetStatus: (id: number, status: string) => void,
-  queue: Array<QueueTx>
-};
-
-type UnlockI18n = {
-  key: string,
-  value: I18Next$Translate$Config
-}
-
-type State = {
-  currentItem?: QueueTx,
-  password: string,
-  unlockError: UnlockI18n | null
-};
-
-class Signer extends React.PureComponent<Props, State> {
-  state: State = {
-    password: '',
-    unlockError: null
-  };
-
-  static getDerivedStateFromProps ({ queue }: Props, { currentItem, password, unlockError }: State): $Shape<State> {
-    const nextItem = queue.find(({ status }) =>
-      status === 'queued'
-    );
-    const isSame =
-      !!nextItem &&
-      !!currentItem &&
-      nextItem.publicKey.toString() === currentItem.publicKey.toString();
-
-    return {
-      currentItem: nextItem,
-      password: isSame ? password : '',
-      unlockError: isSame ? unlockError : null
-    };
-  }
-
-  render (): React$Node {
-    const { className, style, t } = this.props;
-    const { currentItem, password, unlockError } = this.state;
-
-    if (!currentItem) {
-      return null;
-    }
-
-    return (
-      <Modal
-        className={classes('extrinsics--Signer', className)}
-        dimmer='inverted'
-        open
-        style={style}
-      >
-        <Modal.Header>
-          {t('signer.header', {
-            defaultValue: 'Extrinsic submission'
-          })}
-        </Modal.Header>
-        <Modal.Content className='extrinsics--Signer-Content'>
-          <Decoded value={currentItem} />
-          <Unlock
-            error={unlockError && t(unlockError.key, unlockError.value)}
-            onChange={this.onChangePassword}
-            password={password}
-            value={currentItem.publicKey}
-          />
-        </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={this.onCancel}
-              text={t('signer.cancel', {
-                defaultValue: 'Cancel'
-              })}
-            />
-            <Button.Or />
-            <Button
-              isPrimary
-              onClick={this.onSign}
-              text={t('signer.send', {
-                defaultValue: 'Sign and Submit'
-              })}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  unlockAccount (publicKey: Uint8Array, password?: string): ?UnlockI18n {
-    const pair = keyring.getPair(publicKey);
-
-    if (pair.hasSecretKey()) {
-      return null;
-    }
-
-    try {
-      // $FlowFixMe typo in underlying type, fixed at base (upgrades)
-      pair.decodePkcs8(void 0, password);
-    } catch (error) {
-      return {
-        key: 'signer.unlock.generic',
-        value: {
-          defaultValue: error.message
-        }
-      };
-    }
-
-    return null;
-  }
-
-  onChangePassword = (password: string): void => {
-    this.setState({
-      password,
-      unlockError: null
-    });
-  }
-
-  onCancel = (): void => {
-    const { onSetStatus } = this.props;
-    const { currentItem } = this.state;
-
-    // This should never be executed
-    if (!currentItem) {
-      return;
-    }
-
-    onSetStatus(currentItem.id, 'cancelled');
-  }
-
-  onSign = async (): Promise<void> => {
-    const { api, onSetStatus } = this.props;
-    const { currentItem, password } = this.state;
-
-    // This should never be executed
-    if (!currentItem) {
-      return;
-    }
-
-    const unlockError = this.unlockAccount(currentItem.publicKey, password);
-
-    if (unlockError) {
-      this.setState({ unlockError });
-      return;
-    }
-
-    onSetStatus(currentItem.id, 'sending');
-    onSetStatus(currentItem.id, await submitExtrinsic(api, currentItem));
-  };
-}
-
-export default translate(
-  withApi(Signer)
-);
diff --git a/packages/app-extrinsics/src/Signer/submit.js b/packages/app-extrinsics/src/Signer/submit.js
deleted file mode 100644
index 55e8d765c1..0000000000
--- a/packages/app-extrinsics/src/Signer/submit.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2017-2018 Jaco Greeff
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-// @flow
-
-import type { RxApiInterface } from '@polkadot/api-rx/types';
-import type { QueueTx } from '../types';
-
-import encodeCall from '@polkadot/extrinsics-codec/encode/call';
-import keyring from '@polkadot/ui-keyring';
-import u8aConcat from '@polkadot/util/u8a/concat';
-import u8aToHex from '@polkadot/util/u8a/toHex';
-
-export default function submit (api: RxApiInterface, { nonce, publicKey, value }: QueueTx): Promise<string> {
-  const message = encodeCall(publicKey, nonce, value);
-  const signature = keyring.getPair(publicKey).sign(message);
-
-  console.log('submitExtrinsic: message =', u8aToHex(message));
-  console.log('submitExtrinsic: signature =', u8aToHex(signature));
-
-  return api.author
-    .submitExtrinsic(u8aConcat(message, signature))
-    .toPromise()
-    .then((result) => {
-      console.log('submitExtrinsic: result=', result);
-
-      return 'sent';
-    })
-    .catch((error) => {
-      console.error('submitExtrinsic: error=', error);
-
-      return 'error';
-    });
-}
diff --git a/packages/app-extrinsics/src/index.css b/packages/app-extrinsics/src/index.css
index 44bc435ff7..46b045fbaa 100644
--- a/packages/app-extrinsics/src/index.css
+++ b/packages/app-extrinsics/src/index.css
@@ -5,27 +5,3 @@
 .extrinsics--App {
   padding: 1em 2em;
 }
-
-.extrinsics--Status {
-  display: inline-block;
-  position: fixed;
-  right: 0.25rem;
-  top: 0.125rem;
-  z-index: 1001;
-}
-
-.extrinsics--Status-Item {
-  background: #bcdaf0;
-  margin: 0.125rem;
-  padding: 0.5rem 1rem;
-  text-align: center;
-}
-
-.extrinsics--Status-Item .status {
-  font-weight: 700;
-}
-
-.extrinsics--Status-Item.error {
-  background: red;
-  color: white;
-}
diff --git a/packages/app-extrinsics/src/index.js b/packages/app-extrinsics/src/index.js
index 66e2ef55b5..b2d9fcabd1 100644
--- a/packages/app-extrinsics/src/index.js
+++ b/packages/app-extrinsics/src/index.js
@@ -4,69 +4,30 @@
 // @flow
 
 import type { BareProps } from '@polkadot/ui-app/types';
-import type { QueueTx, QueueTx$Status } from './types';
+import type { QueueProps } from '@polkadot/ui-signer/types';
 
 import './index.css';
 
 import React from 'react';
 
 import classes from '@polkadot/ui-app/util/classes';
+import Signer from '@polkadot/ui-signer';
 
 import Selection from './Selection';
-import Signer from './Signer';
-import Status from './Status';
 
-type Props = BareProps & {};
+type Props = BareProps;
 
-type State = {
-  queue: Array<QueueTx>
-};
-
-export default class App extends React.PureComponent<Props, State> {
-  state: State = {
-    queue: []
-  };
-
-  render (): React$Node {
-    const { className, style } = this.props;
-    const { queue } = this.state;
-
-    return (
-      <div
-        className={classes('extrinsics--App', className)}
-        style={style}
-      >
-        <Selection onQueue={this.onQueue} />
-        <Signer
-          onSetStatus={this.setStatus}
-          queue={queue}
-        />
-        <Status queue={queue} />
-      </div>
-    );
-  }
-
-  setStatus = (id: number, status: QueueTx$Status): void => {
-    this.setState(
-      (prevState: State): State => ({
-        queue: prevState.queue.map((item) =>
-          item.id === id
-            ? { ...item, status }
-            : item
-        )
-      })
-    );
-
-    if (['cancelled', 'error', 'sent'].includes(status)) {
-      setTimeout(() => this.setStatus(id, 'completed'), 5000);
-    }
-  }
-
-  onQueue = (value: QueueTx): void => {
-    this.setState(
-      (prevState: State): State => ({
-        queue: prevState.queue.concat([value])
-      })
-    );
-  }
+export default function ExtrinsicsApp ({ className, style }: Props): React$Node {
+  return (
+    <div
+      className={classes('extrinsics--App', className)}
+      style={style}
+    >
+      <Signer.Queue.Consumer>
+        {({ queueAdd }: QueueProps = {}) => (
+          <Selection queueAdd={queueAdd} />
+        )}
+      </Signer.Queue.Consumer>
+    </div>
+  );
 }
diff --git a/packages/app-extrinsics/src/types.js b/packages/app-extrinsics/src/types.js
deleted file mode 100644
index 2f6cbbc16d..0000000000
--- a/packages/app-extrinsics/src/types.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2017-2018 Jaco Greeff
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-// @flow
-
-import type BN from 'bn.js';
-import type { Extrinsic } from '@polkadot/extrinsics/types';
-
-export type EncodedMessage = {
-  extrinsic: Extrinsic,
-  isValid: boolean,
-  value: Uint8Array
-};
-
-export type QueueTx$Status = 'cancelled' | 'completed' | 'error' | 'incomplete' | 'queued' | 'sending' | 'sent';
-
-export type QueueTx = EncodedMessage & {
-  id: number,
-  nonce: BN,
-  publicKey: Uint8Array,
-  status: QueueTx$Status
-};
diff --git a/packages/app-rpc/LICENSE b/packages/app-rpc/LICENSE
new file mode 100644
index 0000000000..3d150a620a
--- /dev/null
+++ b/packages/app-rpc/LICENSE
@@ -0,0 +1,15 @@
+ISC License (ISC)
+
+Copyright 2017-2018 Jaco Greeff <jacogr@gmail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/packages/app-rpc/README.md b/packages/app-rpc/README.md
new file mode 100644
index 0000000000..0c1a76e9fa
--- /dev/null
+++ b/packages/app-rpc/README.md
@@ -0,0 +1 @@
+# @polkadot/app-rpc
diff --git a/packages/app-rpc/package.json b/packages/app-rpc/package.json
new file mode 100644
index 0000000000..06b95818ee
--- /dev/null
+++ b/packages/app-rpc/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@polkadot/app-rpc",
+  "version": "0.6.2",
+  "main": "index.js",
+  "repository": "https://github.com/polkadot-js/apps.git",
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "license": "ISC",
+  "scripts": {
+    "build": "polkadot-dev-build-babel",
+    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/ui-app": "^0.6.2",
+    "@polkadot/ui-keyring": "^0.6.2",
+    "@polkadot/ui-signer": "^0.6.2"
+  }
+}
diff --git a/packages/app-rpc/src/Account.js b/packages/app-rpc/src/Account.js
new file mode 100644
index 0000000000..e73b443e71
--- /dev/null
+++ b/packages/app-rpc/src/Account.js
@@ -0,0 +1,95 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { I18nProps } from '@polkadot/ui-app/types';
+
+import BN from 'bn.js';
+import React from 'react';
+
+import InputAddress from '@polkadot/ui-app/InputAddress';
+import Labelled from '@polkadot/ui-app/Labelled';
+import classes from '@polkadot/ui-app/util/classes';
+import Nonce from '@polkadot/ui-react-rx/Nonce';
+
+import translate from './translate';
+
+type Props = I18nProps & {
+  defaultValue?: Uint8Array,
+  isError?: boolean,
+  onChange: (publicKey?: Uint8Array, nonce: BN) => void
+};
+
+type State = {
+  nonce: BN,
+  publicKey?: Uint8Array
+};
+
+class Account extends React.PureComponent<Props, State> {
+  state: State;
+
+  constructor (props: Props) {
+    super(props);
+
+    this.state = {
+      publicKey: props.defaultValue,
+      nonce: new BN(0)
+    };
+  }
+
+  render (): React$Node {
+    const { className, defaultValue, isError, style, t } = this.props;
+    const { publicKey } = this.state;
+
+    return (
+      <div
+        className={classes('rpc--Account', 'ui--row', className)}
+        style={style}
+      >
+        <div className='large'>
+          <InputAddress
+            defaultValue={defaultValue}
+            isError={isError}
+            label={t('account.address', {
+              defaultValue: 'sign data from account'
+            })}
+            onChange={this.onChangeAccount}
+            placeholder='0x...'
+            type='account'
+          />
+        </div>
+        <Labelled
+          className='small'
+          label={t('account.nonce', {
+            defaultValue: 'with an index of'
+          })}
+        >
+          <Nonce
+            className='ui disabled dropdown selection'
+            onChange={this.onChangeNonce}
+            params={publicKey}
+          />
+        </Labelled>
+      </div>
+    );
+  }
+
+  onChangeAccount = (publicKey: Uint8Array): void => {
+    const { onChange } = this.props;
+
+    this.setState({ publicKey }, () =>
+      onChange(publicKey, this.state.nonce)
+    );
+  };
+
+  onChangeNonce = (nonce: BN): void => {
+    const { onChange } = this.props;
+
+    this.setState({ nonce }, () =>
+      onChange(this.state.publicKey, nonce)
+    );
+  };
+}
+
+export default translate(Account);
diff --git a/packages/app-rpc/src/Results.js b/packages/app-rpc/src/Results.js
new file mode 100644
index 0000000000..616447c2ca
--- /dev/null
+++ b/packages/app-rpc/src/Results.js
@@ -0,0 +1,49 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BareProps } from '@polkadot/ui-app/types';
+import type { QueueTx } from '@polkadot/ui-signer/types';
+
+import React from 'react';
+
+import Output from '@polkadot/ui-app/Output';
+import classes from '@polkadot/ui-app/util/classes';
+import isUndefined from '@polkadot/util/is/undefined';
+
+type Props = BareProps & {
+  queue: Array<QueueTx>
+};
+
+export default function Results ({ className, queue = [], style }: Props): React$Node {
+  const filtered = queue
+    .filter(({ error, result }) =>
+      !isUndefined(error) || !isUndefined(result)
+    )
+    .reverse();
+
+  if (!filtered.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classes('rpc--Results', className)}
+      style={style}
+    >
+      {filtered.map(({ error, id, result, rpc: { section, name } }) => (
+        <Output
+          isError={!!error}
+          key={id}
+          label={`${id}: ${section}.${name}`}
+          value={
+            error
+              ? error.message
+              : result
+          }
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/app-rpc/src/Selection.js b/packages/app-rpc/src/Selection.js
new file mode 100644
index 0000000000..5996f4be42
--- /dev/null
+++ b/packages/app-rpc/src/Selection.js
@@ -0,0 +1,141 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { InterfaceMethodDefinition } from '@polkadot/jsonrpc/types';
+import type { RawParam } from '@polkadot/ui-app/Params/types';
+import type { I18nProps } from '@polkadot/ui-app/types';
+import type { QueueTx$MessageAdd } from '@polkadot/ui-signer/types';
+
+import './index.css';
+
+import BN from 'bn.js';
+import React from 'react';
+
+import rpc from '@polkadot/jsonrpc';
+import Button from '@polkadot/ui-app/Button';
+import InputRpc from '@polkadot/ui-app/InputRpc';
+import Params from '@polkadot/ui-app/Params';
+import classes from '@polkadot/ui-app/util/classes';
+import rawToValues from '@polkadot/ui-signer/rawToValues';
+
+import Account from './Account';
+import translate from './translate';
+
+type Props = I18nProps & {
+  queueAdd: QueueTx$MessageAdd
+};
+
+type State = {
+  isValid: boolean,
+  nonce: BN,
+  publicKey?: Uint8Array | null,
+  rpc: InterfaceMethodDefinition,
+  values: Array<RawParam>
+}
+
+const defaultMethod = rpc.author.methods.submitExtrinsic;
+
+class Selection extends React.PureComponent<Props, State> {
+  state: State = {
+    isValid: false,
+    nonce: new BN(0),
+    publicKey: null,
+    rpc: defaultMethod,
+    values: []
+  };
+
+  render (): React$Node {
+    const { className, style, t } = this.props;
+    const { isValid, rpc } = this.state;
+
+    return (
+      <div
+        className={classes('rpc--Selection', className)}
+        style={style}
+      >
+        <InputRpc
+          defaultValue={defaultMethod}
+          onChange={this.onChangeMethod}
+        />
+        {this.renderAccount()}
+        <Params
+          item={rpc}
+          onChange={this.onChangeValues}
+        />
+        <Button.Group>
+          <Button
+            isDisabled={!isValid}
+            isPrimary
+            onClick={this.onSubmit}
+            text={t('submit', {
+              defaultValue: 'Submit RPC call'
+            })}
+          />
+        </Button.Group>
+      </div>
+    );
+  }
+
+  renderAccount (): React$Node {
+    const { rpc: { isSigned = false }, publicKey } = this.state;
+
+    if (!isSigned) {
+      return null;
+    }
+
+    return (
+      <Account
+        defaultValue={publicKey}
+        onChange={this.onChangeAccount}
+      />
+    );
+  }
+
+  nextState (newState: $Shape<State>): void {
+    this.setState(
+      (prevState: State): State => {
+        const { rpc = prevState.rpc, nonce = prevState.nonce, publicKey = prevState.publicKey, values = prevState.values } = newState;
+        const isValid = values.reduce((isValid, value) => {
+          return isValid && value.isValid === true;
+        }, rpc.isSigned !== true || (!!publicKey && publicKey.length === 32));
+
+        return {
+          isValid,
+          rpc,
+          nonce,
+          publicKey,
+          values
+        };
+      }
+    );
+  }
+
+  onChangeAccount = (publicKey?: Uint8Array, nonce: BN): void => {
+    this.nextState({ nonce, publicKey });
+  }
+
+  onChangeMethod = (rpc: InterfaceMethodDefinition): void => {
+    this.nextState({ rpc });
+  }
+
+  onChangeValues = (values: Array<RawParam>): void => {
+    this.nextState({ values });
+  }
+
+  onSubmit = (): void => {
+    const { queueAdd } = this.props;
+    const { isValid, nonce, publicKey, rpc, values } = this.state;
+
+    queueAdd({
+      isValid,
+      nonce,
+      publicKey,
+      rpc,
+      values: rawToValues(values)
+    });
+  }
+}
+
+export default translate(Selection);
diff --git a/packages/app-rpc/src/index.css b/packages/app-rpc/src/index.css
new file mode 100644
index 0000000000..3c93991b02
--- /dev/null
+++ b/packages/app-rpc/src/index.css
@@ -0,0 +1,12 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.rpc--App {
+  padding: 1em 2em;
+}
+
+.rpc--Account {
+  box-sizing: border-box;
+  padding-left: 2em;
+}
diff --git a/packages/app-rpc/src/index.js b/packages/app-rpc/src/index.js
new file mode 100644
index 0000000000..5b9dc8b867
--- /dev/null
+++ b/packages/app-rpc/src/index.js
@@ -0,0 +1,41 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { I18nProps } from '@polkadot/ui-app/types';
+import type { QueueProps } from '@polkadot/ui-signer/types';
+
+import './index.css';
+
+import React from 'react';
+
+import classes from '@polkadot/ui-app/util/classes';
+import Signer from '@polkadot/ui-signer';
+
+import Results from './Results';
+import Selection from './Selection';
+
+type Props = I18nProps & {};
+
+export default function RpcApp ({ className, style }: Props): React$Node {
+  return (
+    <div
+      className={classes('rpc--App', className)}
+      style={style}
+    >
+      <Signer.Queue.Consumer>
+        {({ queue, queueAdd }: QueueProps = {}) => [
+          <Selection
+            key='add'
+            queueAdd={queueAdd}
+          />,
+          <Results
+            key='results'
+            queue={queue}
+          />
+        ]}
+      </Signer.Queue.Consumer>
+    </div>
+  );
+}
diff --git a/packages/app-rpc/src/translate.js b/packages/app-rpc/src/translate.js
new file mode 100644
index 0000000000..efa3c450b6
--- /dev/null
+++ b/packages/app-rpc/src/translate.js
@@ -0,0 +1,8 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import { translate } from 'react-i18next';
+
+export default translate(['rpc', 'ui']);
diff --git a/packages/app-storage/src/Query.js b/packages/app-storage/src/Query.js
index 27a7c86557..bac9f2b4bd 100644
--- a/packages/app-storage/src/Query.js
+++ b/packages/app-storage/src/Query.js
@@ -8,9 +8,9 @@ import type { StorageQuery } from './types';
 
 import React from 'react';
 
+import typeToString from '@polkadot/params/typeToString';
 import Button from '@polkadot/ui-app/Button';
 import Labelled from '@polkadot/ui-app/Labelled';
-import typeToText from '@polkadot/ui-app/Params/typeToText';
 import valueToText from '@polkadot/ui-app/Params/valueToText';
 import classes from '@polkadot/ui-app/util/classes';
 import withStorageDiv from '@polkadot/ui-react-rx/with/storageDiv';
@@ -22,10 +22,11 @@ type Props = I18nProps & {
   value: StorageQuery
 };
 
+type ComponentProps = {};
+
 type State = {
   inputs: Array<React$Node>,
-  // flowlint-next-line unclear-type:off
-  Component: React$ComponentType<any>;
+  Component: React$ComponentType<ComponentProps>;
 };
 
 const cache = [];
@@ -33,21 +34,23 @@ const cache = [];
 class Query extends React.PureComponent<Props, State> {
   state: State = ({}: $Shape<State>);
 
-  static getDerivedStateFromProps ({ value: { id, key, params } }: Props, prevState: State): State | null {
-    // flowlint-next-line unclear-type:off
-    const Component = ((): React$ComponentType<any> => {
-      if (!cache[id]) {
-        const values = params.map(({ value }) => value);
+  static getCachedComponent ({ id, key, params }: StorageQuery): React$ComponentType<ComponentProps> {
+    if (!cache[id]) {
+      const values = params.map(({ value }) => value);
 
-        cache[id] = withStorageDiv(key, { params: values })(
-          (value) =>
-            valueToText(key.type, value),
-          { className: 'ui--output' }
-        );
-      }
+      cache[id] = withStorageDiv(key, { params: values })(
+        (value) =>
+          valueToText(key.type, value),
+        { className: 'ui--output' }
+      );
+    }
 
-      return cache[id];
-    })();
+    return cache[id];
+  }
+
+  static getDerivedStateFromProps ({ value }: Props, prevState: State): State | null {
+    const Component = Query.getCachedComponent(value);
+    const { key, params } = value;
     const inputs = Object
       .keys(key.params)
       .map((name, index) => {
@@ -76,7 +79,7 @@ class Query extends React.PureComponent<Props, State> {
         <Labelled
           className='storage--actionrow-value'
           label={
-            <div>{key.section}.{key.name}({inputs}): {typeToText(key.type)}</div>
+            <div>{key.section}.{key.name}({inputs}): {typeToString(key.type)}</div>
           }
         >
           <Component />
diff --git a/packages/app-storage/src/Selection.js b/packages/app-storage/src/Selection.js
index e7711d148e..650b943f5f 100644
--- a/packages/app-storage/src/Selection.js
+++ b/packages/app-storage/src/Selection.js
@@ -10,7 +10,7 @@ import type { StorageQuery } from './types';
 
 import React from 'react';
 
-import storage from '@polkadot/storage-substrate/keys';
+import storage from '@polkadot/storage-substrate';
 import Button from '@polkadot/ui-app/Button';
 import InputStorage from '@polkadot/ui-app/InputStorage';
 import Labelled from '@polkadot/ui-app/Labelled';
diff --git a/packages/app-storage/src/index.js b/packages/app-storage/src/index.js
index 3f4e252b57..eeb8199347 100644
--- a/packages/app-storage/src/index.js
+++ b/packages/app-storage/src/index.js
@@ -22,7 +22,7 @@ type State = {
   queue: Array<StorageQuery>
 }
 
-class App extends React.PureComponent<Props, State> {
+class StorageApp extends React.PureComponent<Props, State> {
   state: State = {
     queue: []
   };
@@ -62,4 +62,4 @@ class App extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(App);
+export default translate(StorageApp);
diff --git a/packages/app-toolbox/src/Hash.js b/packages/app-toolbox/src/Hash.js
index ee4250626d..e12ded7718 100644
--- a/packages/app-toolbox/src/Hash.js
+++ b/packages/app-toolbox/src/Hash.js
@@ -14,7 +14,7 @@ import classes from '@polkadot/ui-app/util/classes';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
 import u8aFromString from '@polkadot/util/u8a/fromString';
-import blake2AsHex256 from '@polkadot/util-crypto/blake2/asHex256';
+import blake2AsHex from '@polkadot/util-crypto/blake2/asHex';
 
 import translate from './translate';
 
@@ -27,65 +27,83 @@ type State = {
 class Hash extends React.PureComponent<Props, State> {
   state: State = {
     data: '',
-    hash: blake2AsHex256(u8aFromString('')),
+    hash: blake2AsHex(u8aFromString(''), 256),
     isHexData: false
   };
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { data, hash, isHexData } = this.state;
+    const { className, style } = this.props;
 
     return (
       <div
         className={classes('toolbox--Hash', className)}
         style={style}
       >
-        <div className='ui--row'>
-          <Input
-            className='large'
-            label={t('hash.data', {
-              defaultValue: 'from the following data (hex or string)'
-            })}
-            onChange={this.onChangeData}
-            value={data}
-          />
-          <Static
-            className='small'
-            label={t('hash.isHex', {
-              defaultValue: 'hex input data'
-            })}
-            value={
-              isHexData
-                ? t('hash.isHex.yes', {
-                  defaultValue: 'Yes'
-                })
-                : t('hash.isHex.no', {
-                  defaultValue: 'No'
-                })
-            }
-          />
-        </div>
-        <div className='ui--row'>
-          <Output
-            className='full toolbox--hex'
-            isHidden={hash.length === 0}
-            label={t('hash.output', {
-              defaultValue: 'the resulting hash is'
-            })}
-            value={hash}
-            withCopy
-          />
-        </div>
+        {this.renderInput()}
+        {this.renderOutput()}
+      </div>
+    );
+  }
+
+  renderInput (): React$Node {
+    const { t } = this.props;
+    const { data, isHexData } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Input
+          className='large'
+          label={t('hash.data', {
+            defaultValue: 'from the following data (hex or string)'
+          })}
+          onChange={this.onChangeData}
+          value={data}
+        />
+        <Static
+          className='small'
+          label={t('hash.isHex', {
+            defaultValue: 'hex input data'
+          })}
+          value={
+            isHexData
+              ? t('hash.isHex.yes', {
+                defaultValue: 'Yes'
+              })
+              : t('hash.isHex.no', {
+                defaultValue: 'No'
+              })
+          }
+        />
+      </div>
+    );
+  }
+
+  renderOutput (): React$Node {
+    const { t } = this.props;
+    const { hash } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Output
+          className='full toolbox--hex'
+          isHidden={hash.length === 0}
+          label={t('hash.output', {
+            defaultValue: 'the resulting hash is'
+          })}
+          value={hash}
+          withCopy
+        />
       </div>
     );
   }
 
   onChangeData = (data: string): void => {
     const isHexData = isHex(data);
-    const hash = blake2AsHex256(
+    const hash = blake2AsHex(
       isHexData
         ? hexToU8a(data)
-        : u8aFromString(data)
+        : u8aFromString(data),
+      256
     );
 
     this.setState({ data, hash, isHexData });
diff --git a/packages/app-toolbox/src/Sign.js b/packages/app-toolbox/src/Sign.js
index 22da2b8b56..2a7fe5eb16 100644
--- a/packages/app-toolbox/src/Sign.js
+++ b/packages/app-toolbox/src/Sign.js
@@ -58,82 +58,116 @@ class Sign extends React.PureComponent<Props, State> {
   }
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { currentPair, data, defaultPublicKey, isHexData, isLocked, isUnlockVisible, signature } = this.state;
+    const { className, style } = this.props;
+    const { currentPair, isUnlockVisible } = this.state;
 
     return (
       <div
         className={classes('toolbox--Sign', className)}
         style={style}
       >
-        <div className='ui--row'>
-          <InputAddress
-            className='full'
-            defaultValue={defaultPublicKey}
-            isInput={false}
-            label={t('sign.account', {
-              defaultValue: 'using my account'
-            })}
-            onChange={this.onChangeAccount}
-            type='account'
-          />
-        </div>
-        <div className='ui--row'>
-          <Input
-            className='large'
-            label={t('sign.data', {
-              defaultValue: 'sign the following data (hex or string)'
-            })}
-            onChange={this.onChangeData}
-            value={data}
-          />
-          <Static
-            className='small'
-            label={t('sign.isHex', {
-              defaultValue: 'hex input data'
-            })}
-            value={
-              isHexData
-                ? t('sign.isHex.yes', {
-                  defaultValue: 'Yes'
-                })
-                : t('sign.isHex.no', {
-                  defaultValue: 'No'
-                })
-            }
-          />
-        </div>
-        <div className='ui--row'>
-          <Output
-            className='full toolbox--hex'
-            isHidden={signature.length === 0}
-            label={t('sign.signed', {
-              defaultValue: 'signature of supplied data'
-            })}
-            value={signature}
-            withCopy
-          />
-        </div>
+        {this.renderAccount()}
+        {this.renderInput()}
+        {this.renderSignature()}
         <Unlock
           isVisible={isUnlockVisible}
           onClose={this.toggleUnlock}
           pair={currentPair}
         />
-        {
-          isLocked
-            ? (
-              <Button.Group>
-                <Button
-                  isPrimary
-                  onClick={this.toggleUnlock}
-                  text={t('sign.unlock', {
-                    defaultValue: 'Unlock account'
-                  })}
-                />
-              </Button.Group>
-            )
-            : null
-        }
+        {this.renderButtons()}
+      </div>
+    );
+  }
+
+  renderAccount (): React$Node {
+    const { t } = this.props;
+    const { defaultPublicKey } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <InputAddress
+          className='full'
+          defaultValue={defaultPublicKey}
+          isInput={false}
+          label={t('sign.account', {
+            defaultValue: 'using my account'
+          })}
+          onChange={this.onChangeAccount}
+          type='account'
+        />
+      </div>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { isLocked } = this.state;
+
+    if (!isLocked) {
+      return null;
+    }
+
+    return (
+      <Button.Group>
+        <Button
+          isPrimary
+          onClick={this.toggleUnlock}
+          text={t('sign.unlock', {
+            defaultValue: 'Unlock account'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderInput (): React$Node {
+    const { t } = this.props;
+    const { data, isHexData } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Input
+          className='large'
+          label={t('sign.data', {
+            defaultValue: 'sign the following data (hex or string)'
+          })}
+          onChange={this.onChangeData}
+          value={data}
+        />
+        <Static
+          className='small'
+          label={t('sign.isHex', {
+            defaultValue: 'hex input data'
+          })}
+          value={
+            isHexData
+              ? t('sign.isHex.yes', {
+                defaultValue: 'Yes'
+              })
+              : t('sign.isHex.no', {
+                defaultValue: 'No'
+              })
+          }
+        />
+      </div>
+    );
+  }
+
+  renderSignature (): React$Node {
+    const { t } = this.props;
+    const { signature } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Output
+          className='full toolbox--hex'
+          isHidden={signature.length === 0}
+          label={t('sign.signed', {
+            defaultValue: 'signature of supplied data'
+          })}
+          value={signature}
+          withCopy
+        />
       </div>
     );
   }
diff --git a/packages/app-toolbox/src/Unlock.js b/packages/app-toolbox/src/Unlock.js
index 7e78dba407..a6e0f9107f 100644
--- a/packages/app-toolbox/src/Unlock.js
+++ b/packages/app-toolbox/src/Unlock.js
@@ -61,7 +61,6 @@ class Unlock extends React.PureComponent<Props, State> {
 
   render (): React$Node {
     const { className, isVisible, style, t } = this.props;
-    const { address, password, unlockError } = this.state;
 
     if (!isVisible) {
       return null;
@@ -80,56 +79,73 @@ class Unlock extends React.PureComponent<Props, State> {
           })}
         </Modal.Header>
         <Modal.Content>
-          <div className='toolbox--Unlock-Content'>
-            <div className='expanded'>
-              <p>
-                <Trans i18nkey='unlock.info'>
-                  You are about to unlock your account <span className='code'>{address}</span> to allow for the signing of messages.
-                </Trans>
-              </p>
-            </div>
-            <IdentityIcon
-              className='icon'
-              value={address}
-            />
-          </div>
-          <div className='toolbox--Unlock-Entry'>
-            <div className='ui--row'>
-              <Password
-                className='medium'
-                isError={!!unlockError}
-                label={t('unlock.password', {
-                  defaultValue: 'unlock account using'
-                })}
-                onChange={this.onChangePassword}
-                value={password}
-              />
-            </div>
-          </div>
+          {this.renderContent()}
         </Modal.Content>
         <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={this.onCancel}
-              text={t('unlock.cancel', {
-                defaultValue: 'Cancel'
-              })}
-            />
-            <Button.Or />
-            <Button
-              isPrimary
-              onClick={this.onUnlock}
-              text={t('unlock.doit', {
-                defaultValue: 'Unlock'
-              })}
-            />
-          </Button.Group>
+          {this.renderActions()}
         </Modal.Actions>
       </Modal>
     );
   }
 
+  renderActions (): React$Node {
+    const { t } = this.props;
+
+    return (
+      <Button.Group>
+        <Button
+          isNegative
+          onClick={this.onCancel}
+          text={t('unlock.cancel', {
+            defaultValue: 'Cancel'
+          })}
+        />
+        <Button.Or />
+        <Button
+          isPrimary
+          onClick={this.onUnlock}
+          text={t('unlock.doit', {
+            defaultValue: 'Unlock'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderContent (): React$Node {
+    const { t } = this.props;
+    const { address, password, unlockError } = this.state;
+
+    return [
+      <div className='toolbox--Unlock-Content' key='content'>
+        <div className='expanded'>
+          <p>
+            <Trans i18nkey='unlock.info'>
+              You are about to unlock your account <span className='code'>{address}</span> to allow for the signing of messages.
+            </Trans>
+          </p>
+        </div>
+        <IdentityIcon
+          className='icon'
+          value={address}
+        />
+      </div>,
+      <div className='toolbox--Unlock-Entry' key='entry'>
+        <div className='ui--row'>
+          <Password
+            className='medium'
+            isError={!!unlockError}
+            label={t('unlock.password', {
+              defaultValue: 'unlock account using'
+            })}
+            onChange={this.onChangePassword}
+            value={password}
+          />
+        </div>
+      </div>
+    ];
+  }
+
   unlockAccount (password?: string): ?UnlockI18n {
     const { pair } = this.props;
 
@@ -138,8 +154,7 @@ class Unlock extends React.PureComponent<Props, State> {
     }
 
     try {
-      // $FlowFixMe typo in underlying type, fixed at base (upgrades)
-      pair.decodePkcs8(void 0, password);
+      pair.decodePkcs8(password);
     } catch (error) {
       return {
         key: 'unlock.generic',
diff --git a/packages/app-toolbox/src/Verify.js b/packages/app-toolbox/src/Verify.js
index e6cd40cd61..f0600803a3 100644
--- a/packages/app-toolbox/src/Verify.js
+++ b/packages/app-toolbox/src/Verify.js
@@ -56,69 +56,95 @@ class Verify extends React.PureComponent<Props, State> {
   }
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { defaultPublicKey, data, isHexData, isValid, isValidAddress, isValidSignature, signature } = this.state;
+    const { className, style } = this.props;
 
     return (
       <div
         className={classes('toolbox--Verify', className)}
         style={style}
       >
-        <div className='ui--row'>
-          <Input
-            className='large'
-            label={t('verify.data', {
-              defaultValue: 'using the following data (hex or string)'
-            })}
-            onChange={this.onChangeData}
-            value={data}
-          />
-          <Static
-            className='small'
-            label={t('verify.isHex', {
-              defaultValue: 'hex input data'
-            })}
-            value={
-              isHexData
-                ? t('verify.isHex.yes', {
-                  defaultValue: 'Yes'
-                })
-                : t('verify.isHex.no', {
-                  defaultValue: 'No'
-                })
-            }
-          />
-        </div>
-        <div className='ui--row'>
-          <InputAddress
-            className='full'
-            defaultValue={defaultPublicKey}
-            isError={!isValidAddress}
-            isInput
-            label={t('verify.account', {
-              defaultValue: 'verify using address'
-            })}
-            onChange={this.onChangeAddress}
-          />
-        </div>
-        <div className='ui--row'>
-          <Input
-            className='full'
-            icon={
-              <Icon
-                color={isValid ? 'green' : (isValidSignature ? 'red' : void 0)}
-                name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
-                size='big'
-              />
-            }
-            isError={!isValidSignature}
-            label={t('verify.signature', {
-              defaultValue: 'checking the supplied signature'
-            })}
-            onChange={this.onChangeSignature}
-            value={signature}
-          />
-        </div>
+        {this.renderInput()}
+        {this.renderAddress()}
+        {this.renderSignature()}
+      </div>
+    );
+  }
+
+  renderAddress (): React$Node {
+    const { t } = this.props;
+    const { defaultPublicKey, isValidAddress } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <InputAddress
+          className='full'
+          defaultValue={defaultPublicKey}
+          isError={!isValidAddress}
+          isInput
+          label={t('verify.account', {
+            defaultValue: 'verify using address'
+          })}
+          onChange={this.onChangeAddress}
+        />
+      </div>
+    );
+  }
+
+  renderInput (): React$Node {
+    const { t } = this.props;
+    const { data, isHexData } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Input
+          className='large'
+          label={t('verify.data', {
+            defaultValue: 'using the following data (hex or string)'
+          })}
+          onChange={this.onChangeData}
+          value={data}
+        />
+        <Static
+          className='small'
+          label={t('verify.isHex', {
+            defaultValue: 'hex input data'
+          })}
+          value={
+            isHexData
+              ? t('verify.isHex.yes', {
+                defaultValue: 'Yes'
+              })
+              : t('verify.isHex.no', {
+                defaultValue: 'No'
+              })
+          }
+        />
+      </div>
+    );
+  }
+
+  renderSignature (): React$Node {
+    const { t } = this.props;
+    const { isValid, isValidSignature, signature } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Input
+          className='full'
+          icon={
+            <Icon
+              color={isValid ? 'green' : (isValidSignature ? 'red' : void 0)}
+              name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
+              size='big'
+            />
+          }
+          isError={!isValidSignature}
+          label={t('verify.signature', {
+            defaultValue: 'checking the supplied signature'
+          })}
+          onChange={this.onChangeSignature}
+          value={signature}
+        />
       </div>
     );
   }
@@ -160,8 +186,6 @@ class Verify extends React.PureComponent<Props, State> {
   }
 
   onChangeSignature = (signature: string): void => {
-    console.log('onChangeSig', isHex(signature), signature.length);
-
     const isValidSignature = isHex(signature) && signature.length === 130;
 
     this.nextState({ signature, isValidSignature });
diff --git a/packages/app-toolbox/src/index.js b/packages/app-toolbox/src/index.js
index 24ba67e2b8..c2c5d13b1e 100644
--- a/packages/app-toolbox/src/index.js
+++ b/packages/app-toolbox/src/index.js
@@ -33,13 +33,13 @@ const Components: { [Actions]: React$ComponentType<any> } = {
   'verify': Verify
 };
 
-class App extends React.PureComponent<Props, State> {
+class ToolboxApp extends React.PureComponent<Props, State> {
   state: State = {
     action: 'hash'
   };
 
   render (): React$Node {
-    const { className, style, t } = this.props;
+    const { className, style } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
@@ -48,36 +48,45 @@ class App extends React.PureComponent<Props, State> {
         className={classes('toolbox--App', className)}
         style={style}
       >
-        <Button.Group className='accounts--App-navigation'>
-          <Button
-            isPrimary={action === 'hash'}
-            onClick={this.selectHash}
-            text={t('app.hash', {
-              defaultValue: 'Hash data'
-            })}
-          />
-          <Button.Or />
-          <Button
-            isPrimary={action === 'sign'}
-            onClick={this.selectSign}
-            text={t('app.sign', {
-              defaultValue: 'Sign message'
-            })}
-          />
-          <Button.Or />
-          <Button
-            isPrimary={action === 'verify'}
-            onClick={this.selectVerify}
-            text={t('app.verify', {
-              defaultValue: 'Verify signature'
-            })}
-          />
-        </Button.Group>
+        {this.renderButtons()}
         <Component />
       </div>
     );
   }
 
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { action } = this.state;
+
+    return (
+      <Button.Group className='accounts--App-navigation'>
+        <Button
+          isPrimary={action === 'hash'}
+          onClick={this.selectHash}
+          text={t('app.hash', {
+            defaultValue: 'Hash data'
+          })}
+        />
+        <Button.Or />
+        <Button
+          isPrimary={action === 'sign'}
+          onClick={this.selectSign}
+          text={t('app.sign', {
+            defaultValue: 'Sign message'
+          })}
+        />
+        <Button.Or />
+        <Button
+          isPrimary={action === 'verify'}
+          onClick={this.selectVerify}
+          text={t('app.verify', {
+            defaultValue: 'Verify signature'
+          })}
+        />
+      </Button.Group>
+    );
+  }
+
   selectHash = (): void => {
     this.setState({ action: 'hash' });
   }
@@ -91,4 +100,4 @@ class App extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(App);
+export default translate(ToolboxApp);
diff --git a/packages/app-vanitygen/src/generator/calculate.js b/packages/app-vanitygen/src/generator/calculate.js
index 5b9368a751..8c8f6263fc 100644
--- a/packages/app-vanitygen/src/generator/calculate.js
+++ b/packages/app-vanitygen/src/generator/calculate.js
@@ -5,26 +5,26 @@
 
 import type { Generator$Calculation, Generator$Options } from './types';
 
+function calculateAt (atOffset: number, test: Array<string>, address: string): Generator$Calculation {
+  return {
+    count: test.reduce((count, c, index) => {
+      if (index === count) {
+        count += (c === '?' || c === address.charAt(index + atOffset)) ? 1 : 0;
+      }
+
+      return count;
+    }, 0),
+    offset: atOffset
+  };
+}
+
 module.exports = function calculate (test: Array<string>, _address: string, { atOffset = -1, withCase = false }: Generator$Options): Generator$Calculation {
   const address = withCase
     ? _address
     : _address.toLowerCase();
 
-  const calculateAt = (atOffset: number): Generator$Calculation => {
-    return {
-      count: test.reduce((count, c, index) => {
-        if (index === count) {
-          count += (c === '?' || c === address.charAt(index + atOffset)) ? 1 : 0;
-        }
-
-        return count;
-      }, 0),
-      offset: atOffset
-    };
-  };
-
   if (atOffset > 0) {
-    return calculateAt(atOffset);
+    return calculateAt(atOffset, test, address);
   }
 
   const maxOffset = address.length - test.length - 1;
@@ -32,7 +32,7 @@ module.exports = function calculate (test: Array<string>, _address: string, { at
   let bestOffset = 1;
 
   for (let index = 1; index < maxOffset; index++) {
-    const { count, offset } = calculateAt(index);
+    const { count, offset } = calculateAt(index, test, address);
 
     if (count > bestCount) {
       bestCount = count;
diff --git a/packages/app-vanitygen/src/index.js b/packages/app-vanitygen/src/index.js
index 61ff1dc290..e5c3ed3732 100644
--- a/packages/app-vanitygen/src/index.js
+++ b/packages/app-vanitygen/src/index.js
@@ -42,7 +42,7 @@ const BOOL_OPTIONS = [
   { text: 'Yes', value: true }
 ];
 
-class App extends React.PureComponent<Props, State> {
+class VanityApp extends React.PureComponent<Props, State> {
   results: Array<Generator$Result> = [];
   state: State = {
     elapsed: 0,
@@ -57,82 +57,114 @@ class App extends React.PureComponent<Props, State> {
   };
 
   render (): React$Node {
-    const { className, style, t } = this.props;
-    const { elapsed, isMatchValid, isRunning, match, matches, keyCount, withCase } = this.state;
+    const { className, style } = this.props;
 
     return (
       <div
         className={classes('vanity--App', className)}
         style={style}
       >
-        <div className='ui--row'>
-          <Input
-            className='medium'
-            isDisabled={isRunning}
-            isError={!isMatchValid}
-            label={t('vanity.matching', {
-              defaultValue: 'generate address containing (? wildcard)'
-            })}
-            onChange={this.onChangeMatch}
-            value={match}
+        {this.renderOptions()}
+        {this.renderButtons()}
+        {this.renderStats()}
+        {this.renderMatches()}
+      </div>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { isMatchValid, isRunning } = this.state;
+
+    return (
+      <Button.Group>
+        <Button
+          isDisabled={!isMatchValid}
+          isPrimary={!isRunning}
+          onClick={this.toggleStart}
+          text={
+            isRunning
+              ? t('vanity.stop', { defaultValue: 'Stop generation' })
+              : t('vanity.start', { defaultValue: 'Start generation' })
+          }
+        />
+      </Button.Group>
+    );
+  }
+
+  renderMatches (): React$Node {
+    const { matches } = this.state;
+
+    return (
+      <div className='vanity--App-matches'>
+        {matches.map((match) => (
+          <Match
+            {...match}
+            key={match.address}
+            onRemove={this.onRemove}
           />
-          <Dropdown
-            className='small'
-            isDisabled={isRunning}
-            label={t('vanity.case', {
-              defaultValue: 'case sensitive match'
-            })}
-            options={BOOL_OPTIONS}
-            onChange={this.onChangeCase}
-            value={withCase}
-          />
-          <Static
-            className='small'
-            label={t('vanity.offset', {
-              defaultValue: 'exact offset'
-            })}
-            value={t('vanity.offset.off', {
-              defaultValue: 'No'
-            })}
-          />
-        </div>
-        <Button.Group>
-          <Button
-            isDisabled={!isMatchValid}
-            isPrimary={!isRunning}
-            onClick={this.toggleStart}
-            text={
-              isRunning
-                ? t('vanity.stop', { defaultValue: 'Stop generation' })
-                : t('vanity.start', { defaultValue: 'Start generation' })
-            }
-          />
-        </Button.Group>
-        {
-          keyCount
-            ? (
-              <div className='vanity--App-stats'>
-                {t('vanity.stats', {
-                  defaultValue: 'Evaluated {{count}} keys in {{elapsed}}s ({{avg}}ms/key)',
-                  replace: {
-                    avg: (elapsed / keyCount).toFixed(3),
-                    count: keyCount,
-                    elapsed: (elapsed / 1000).toFixed(2)
-                  }
-                })}
-              </div>
-            )
-            : null
-        }
-        <div className='vanity--App-matches'>
-          {matches.map((match) => (
-            <Match
-              {...match}
-              key={match.address}
-              onRemove={this.onRemove}
-            />
-          ))}
-        </div>
+        ))}
+      </div>
+    );
+  }
+
+  renderOptions (): React$Node {
+    const { t } = this.props;
+    const { isMatchValid, isRunning, match, withCase } = this.state;
+
+    return (
+      <div className='ui--row'>
+        <Input
+          className='medium'
+          isDisabled={isRunning}
+          isError={!isMatchValid}
+          label={t('vanity.matching', {
+            defaultValue: 'generate address containing (? wildcard)'
+          })}
+          onChange={this.onChangeMatch}
+          value={match}
+        />
+        <Dropdown
+          className='small'
+          isDisabled={isRunning}
+          label={t('vanity.case', {
+            defaultValue: 'case sensitive match'
+          })}
+          options={BOOL_OPTIONS}
+          onChange={this.onChangeCase}
+          value={withCase}
+        />
+        <Static
+          className='small'
+          label={t('vanity.offset', {
+            defaultValue: 'exact offset'
+          })}
+          value={t('vanity.offset.off', {
+            defaultValue: 'No'
+          })}
+        />
+      </div>
+    );
+  }
+
+  renderStats (): React$Node {
+    const { t } = this.props;
+    const { elapsed, keyCount } = this.state;
+
+    if (!keyCount) {
+      return null;
+    }
+
+    return (
+      <div className='vanity--App-stats'>
+        {t('vanity.stats', {
+          defaultValue: 'Evaluated {{count}} keys in {{elapsed}}s ({{avg}}ms/key)',
+          replace: {
+            avg: (elapsed / keyCount).toFixed(3),
+            count: keyCount,
+            elapsed: (elapsed / 1000).toFixed(2)
+          }
+        })}
       </div>
     );
   }
@@ -237,4 +269,4 @@ class App extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(App);
+export default translate(VanityApp);
diff --git a/packages/apps/package.json b/packages/apps/package.json
index 495dec0471..f9bdc4094d 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -19,10 +19,12 @@
     "@polkadot/app-addresses": "^0.6.2",
     "@polkadot/app-explorer": "^0.6.2",
     "@polkadot/app-extrinsics": "^0.6.2",
+    "@polkadot/app-rpc": "^0.6.2",
     "@polkadot/app-storage": "^0.6.2",
     "@polkadot/app-toolbox": "^0.6.2",
     "@polkadot/app-vanitygen": "^0.6.2",
-    "@polkadot/ui-app": "^0.6.2"
+    "@polkadot/ui-app": "^0.6.2",
+    "@polkadot/ui-signer": "^0.6.2"
   },
   "devDependencies": {
     "babel-loader": "^8.0.0-beta.2",
diff --git a/packages/apps/src/App/index.js b/packages/apps/src/App/index.js
index 63cb75a5c1..181594b677 100644
--- a/packages/apps/src/App/index.js
+++ b/packages/apps/src/App/index.js
@@ -3,32 +3,32 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { I18nProps } from '@polkadot/ui-app/types';
+import type { BareProps } from '@polkadot/ui-app/types';
 
 import './App.css';
 
 import React from 'react';
 
 import classes from '@polkadot/ui-app/util/classes';
+import Signer from '@polkadot/ui-signer';
 
 import Connecting from '../Connecting';
 import Content from '../Content';
 import SideBar from '../SideBar';
-import translate from '../translate';
 
-type Props = I18nProps & {};
+type Props = BareProps & {};
 
-function App ({ className, style }: Props): React$Node {
+export default function Apps ({ className, style }: Props): React$Node {
   return (
     <div
       className={classes('apps--App', className)}
       style={style}
     >
       <SideBar />
-      <Content />
+      <Signer>
+        <Content />
+      </Signer>
       <Connecting />
     </div>
   );
 }
-
-export default translate(App);
diff --git a/packages/apps/src/routing/index.js b/packages/apps/src/routing/index.js
index 644eda9e4b..ddbdf1779f 100644
--- a/packages/apps/src/routing/index.js
+++ b/packages/apps/src/routing/index.js
@@ -10,6 +10,7 @@ import addresses from './addresses';
 import explorer from './explorer';
 import extrinsics from './extrinsics';
 // import home from './home';
+import rpc from './rpc';
 // import settings from './settings';
 import storage from './storage';
 import toolbox from './toolbox';
@@ -19,7 +20,7 @@ import vanitygen from './vanitygen';
 export default ({
   default: 'explorer',
   routes: [].concat(
-    explorer, extrinsics, storage, toolbox, null, accounts, addresses, vanitygen
+    explorer, extrinsics, storage, null, accounts, addresses, vanitygen, null, rpc, toolbox
   ),
   unknown
 }: Routing);
diff --git a/packages/apps/src/routing/rpc.js b/packages/apps/src/routing/rpc.js
new file mode 100644
index 0000000000..301b80df1b
--- /dev/null
+++ b/packages/apps/src/routing/rpc.js
@@ -0,0 +1,21 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { Routes } from '../types';
+
+import Rpc from '@polkadot/app-rpc';
+
+export default ([
+  {
+    Component: Rpc,
+    i18n: {
+      defaultValue: 'Raw RPC'
+    },
+    icon: 'code',
+    isExact: false,
+    isHidden: false,
+    name: 'rpc'
+  }
+]: Routes);
diff --git a/packages/apps/webpack.config.js b/packages/apps/webpack.config.js
index 0cd2e318f2..66a4e4d938 100644
--- a/packages/apps/webpack.config.js
+++ b/packages/apps/webpack.config.js
@@ -10,7 +10,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-const packages = ['app-accounts', 'app-addresses', 'app-explorer', 'app-extrinsics', 'app-storage', 'app-toolbox', 'app-vanitygen', 'ui-app', 'ui-keyring'];
+const packages = ['app-accounts', 'app-addresses', 'app-explorer', 'app-extrinsics', 'app-rpc', 'app-storage', 'app-toolbox', 'app-vanitygen', 'ui-app', 'ui-keyring', 'ui-signer'];
 
 function createWebpack ({ alias = {}, context, name = 'index' }) {
   const pkgJson = require(path.join(context, 'package.json'));
diff --git a/packages/ui-app/package.json b/packages/ui-app/package.json
index 8283c941ee..8f76cd2613 100644
--- a/packages/ui-app/package.json
+++ b/packages/ui-app/package.json
@@ -12,14 +12,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/extrinsics-substrate": "^0.14.3",
-    "@polkadot/params": "^0.14.3",
-    "@polkadot/primitives": "^0.14.3",
-    "@polkadot/storage-substrate": "^0.14.3",
+    "@polkadot/extrinsics-substrate": "^0.15.8",
+    "@polkadot/params": "^0.15.8",
+    "@polkadot/primitives": "^0.15.8",
+    "@polkadot/storage-substrate": "^0.15.8",
     "@polkadot/ui-keyring": "^0.6.2",
-    "@polkadot/ui-react": "^0.12.3",
-    "@polkadot/ui-react-rx": "^0.12.3",
-    "@polkadot/util": "^0.20.5",
+    "@polkadot/ui-react": "^0.13.4",
+    "@polkadot/ui-react-rx": "^0.13.4",
+    "@polkadot/util": "^0.21.3",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
     "i18next-xhr-backend": "^1.5.1",
diff --git a/packages/ui-app/src/Dropdown.js b/packages/ui-app/src/Dropdown.js
index 840316328a..e74f87b222 100644
--- a/packages/ui-app/src/Dropdown.js
+++ b/packages/ui-app/src/Dropdown.js
@@ -58,8 +58,7 @@ export default class Dropdown extends React.PureComponent<Props> {
     );
   }
 
-  // flowlint-next-line unclear-type:off
-  onChange = (event: SyntheticEvent<any>, { value }: SUIEvent): void => {
+  onChange = (event: SyntheticEvent<Element>, { value }: SUIEvent): void => {
     const { onChange, transform } = this.props;
 
     onChange(
diff --git a/packages/ui-app/src/Input.js b/packages/ui-app/src/Input.js
index e0278e0650..4209cd33ad 100644
--- a/packages/ui-app/src/Input.js
+++ b/packages/ui-app/src/Input.js
@@ -94,8 +94,7 @@ export default class Input extends React.PureComponent<Props, State> {
     );
   }
 
-  // flowlint-next-line unclear-type:off
-  onChange = (event: SyntheticEvent<any>, { value }: SUIEvent): void => {
+  onChange = (event: SyntheticEvent<Element>, { value }: SUIEvent): void => {
     this.props.onChange(value);
   }
 }
diff --git a/packages/ui-app/src/InputAddress/addressToAddress.js b/packages/ui-app/src/InputAddress/addressToAddress.js
index 9dbf86e510..28e205deae 100644
--- a/packages/ui-app/src/InputAddress/addressToAddress.js
+++ b/packages/ui-app/src/InputAddress/addressToAddress.js
@@ -6,7 +6,7 @@
 import addressDecode from '@polkadot/util-keyring/address/decode';
 import addressEncode from '@polkadot/util-keyring/address/encode';
 
-export default function addressToAddress (value?: string | Uint8Array): ?string {
+export default function addressToAddress (value?: string | Uint8Array | null): ?string {
   // flowlint-next-line sketchy-null-string:off
   if (value) {
     try {
diff --git a/packages/ui-app/src/InputAddress/index.js b/packages/ui-app/src/InputAddress/index.js
index 4a43b52ca7..d9dbc63d54 100644
--- a/packages/ui-app/src/InputAddress/index.js
+++ b/packages/ui-app/src/InputAddress/index.js
@@ -19,7 +19,7 @@ import classes from '../util/classes';
 import addressToAddress from './addressToAddress';
 
 type Props = BareProps & {
-  defaultValue?: string | Uint8Array,
+  defaultValue?: string | Uint8Array | null,
   hideAddress?: boolean;
   isError?: boolean,
   isInput?: boolean,
diff --git a/packages/ui-app/src/InputRpc/SelectMethod.js b/packages/ui-app/src/InputRpc/SelectMethod.js
new file mode 100644
index 0000000000..ec9dcdf47f
--- /dev/null
+++ b/packages/ui-app/src/InputRpc/SelectMethod.js
@@ -0,0 +1,53 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { InterfaceMethodDefinition } from '@polkadot/jsonrpc/types';
+import type { I18nProps } from '../types';
+
+import React from 'react';
+
+import map from '@polkadot/jsonrpc';
+
+import Dropdown from '../Dropdown';
+import classes from '../util/classes';
+import translate from '../translate';
+
+type Props = I18nProps & {
+  isError?: boolean,
+  label?: string,
+  onChange: (value: InterfaceMethodDefinition) => void,
+  // flowlint-next-line unclear-type:off
+  options: Array<any>,
+  value: InterfaceMethodDefinition,
+  withLabel?: boolean
+};
+
+function SelectMethod ({ className, isError, label = '', onChange, options, style, t, value: { name, section }, withLabel }: Props): React$Node {
+  if (!options.length) {
+    return null;
+  }
+
+  const transform = (name: string): InterfaceMethodDefinition =>
+    // $FlowFixMe ... string to type :(
+    map[section].methods[name];
+
+  return (
+    <Dropdown
+      className={classes('ui--DropdownLinked-Items', className)}
+      isError={isError}
+      label={label || t('input.rpc.method', {
+        defaultValue: 'with method name'
+      })}
+      onChange={onChange}
+      options={options}
+      style={style}
+      transform={transform}
+      value={name}
+      withLabel={withLabel}
+    />
+  );
+}
+
+export default translate(SelectMethod);
diff --git a/packages/ui-app/src/InputRpc/SelectSection.js b/packages/ui-app/src/InputRpc/SelectSection.js
new file mode 100644
index 0000000000..bf110b29e3
--- /dev/null
+++ b/packages/ui-app/src/InputRpc/SelectSection.js
@@ -0,0 +1,44 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { InterfaceMethodDefinition, InterfaceTypes } from '@polkadot/jsonrpc/types';
+import type { I18nProps } from '../types';
+
+import React from 'react';
+
+import Dropdown from '../Dropdown';
+import classes from '../util/classes';
+import translate from '../translate';
+
+type Props = I18nProps & {
+  defaultValue?: InterfaceTypes,
+  isError?: boolean,
+  label: string,
+  onChange: (value: InterfaceTypes) => void,
+  // flowlint-next-line unclear-type:off
+  options: Array<any>,
+  value: InterfaceMethodDefinition,
+  withLabel?: boolean
+};
+
+function SelectSection ({ className, defaultValue, isError, label, onChange, options, style, t, value: { section }, withLabel }: Props): React$Node {
+  return (
+    <Dropdown
+      className={classes('ui--DropdownLinked-Sections', className)}
+      defaultValue={defaultValue}
+      isError={isError}
+      label={label || t('input.rpc.section', {
+        defaultValue: 'rpc area'
+      })}
+      onChange={onChange}
+      options={options}
+      style={style}
+      value={section}
+      withLabel={withLabel}
+    />
+  );
+}
+
+export default translate(SelectSection);
diff --git a/packages/ui-app/src/InputRpc/index.js b/packages/ui-app/src/InputRpc/index.js
new file mode 100644
index 0000000000..54b4a68608
--- /dev/null
+++ b/packages/ui-app/src/InputRpc/index.js
@@ -0,0 +1,114 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+// TODO: We have a lot shared between this and InputExtrinsic & InputStorage
+
+import type { InterfaceMethodDefinition, InterfaceTypes } from '@polkadot/jsonrpc/types';
+import type { I18nProps } from '../types';
+
+import '../InputExtrinsic/InputExtrinsic.css';
+
+import React from 'react';
+
+import map from '@polkadot/jsonrpc';
+
+import classes from '../util/classes';
+import translate from '../translate';
+import SelectMethod from './SelectMethod';
+import SelectSection from './SelectSection';
+import methodOptions from './options/method';
+import sectionOptions from './options/section';
+
+type Props = I18nProps & {
+  defaultValue: InterfaceMethodDefinition,
+  isError?: boolean,
+  labelMethod?: string,
+  labelSection?: string,
+  onChange: (value: InterfaceMethodDefinition) => void,
+  withLabel?: boolean
+};
+
+type State = {
+  // flowlint-next-line unclear-type:off
+  optionsMethod: Array<any>,
+  // flowlint-next-line unclear-type:off
+  optionsSection: Array<any>,
+  value: InterfaceMethodDefinition
+};
+
+class InputRpc extends React.PureComponent<Props, State> {
+  state: State;
+
+  constructor (props: Props) {
+    super(props);
+
+    const { section } = this.props.defaultValue;
+
+    this.state = {
+      optionsMethod: methodOptions(section),
+      optionsSection: sectionOptions(),
+      value: this.props.defaultValue
+    };
+  }
+
+  render (): React$Node {
+    const { className, labelMethod, labelSection, style, withLabel } = this.props;
+    const { optionsMethod, optionsSection, value } = this.state;
+
+    return (
+      <div
+        className={classes('ui--DropdownLinked', 'ui--row', className)}
+        style={style}
+      >
+        <SelectSection
+          className='small'
+          label={labelSection}
+          onChange={this.onSectionChange}
+          options={optionsSection}
+          value={value}
+          withLabel={withLabel}
+        />
+        <SelectMethod
+          className='large'
+          label={labelMethod}
+          onChange={this.onMethodChange}
+          options={optionsMethod}
+          value={value}
+          withLabel={withLabel}
+        />
+      </div>
+    );
+  }
+
+  onMethodChange = (value: InterfaceMethodDefinition): void => {
+    const { onChange } = this.props;
+    const { value: { name, section } } = this.state;
+
+    if (value.section === section && value.name === name) {
+      return;
+    }
+
+    this.setState({ value }, () =>
+      onChange(value)
+    );
+  }
+
+  onSectionChange = (newSection: InterfaceTypes): void => {
+    const { value: { section } } = this.state;
+
+    if (newSection === section) {
+      return;
+    }
+
+    const optionsMethod = methodOptions(newSection);
+    const value = map[newSection].methods[optionsMethod[0].value];
+
+    this.setState({ optionsMethod }, () =>
+      this.onMethodChange(value)
+    );
+  }
+}
+
+export default translate(InputRpc);
diff --git a/packages/ui-app/src/InputRpc/options/method.js b/packages/ui-app/src/InputRpc/options/method.js
new file mode 100644
index 0000000000..ca0d198986
--- /dev/null
+++ b/packages/ui-app/src/InputRpc/options/method.js
@@ -0,0 +1,52 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { InterfaceTypes } from '@polkadot/jsonrpc/types';
+
+import React from 'react';
+
+import map from '@polkadot/jsonrpc';
+
+// flowlint-next-line unclear-type:off
+export default function createOptions (sectionName: any): Array<any> {
+  const section = map[(sectionName: InterfaceTypes)];
+
+  if (!section) {
+    return [];
+  }
+
+  return Object
+    .keys(section.methods)
+    .sort()
+    .filter((name) => {
+      const { isDeprecated = false, isHidden = false, isSubscription = false } = section.methods[name];
+
+      return !isDeprecated && !isHidden && !isSubscription;
+    })
+    .map((name) => {
+      const { description = '', params = {} } = section.methods[name];
+      const inputs = Object.keys(params).join(', ');
+
+      return {
+        className: 'ui--DropdownLinked-Item',
+        key: `${sectionName}_${name}`,
+        text: [
+          <div
+            className='ui--DropdownLinked-Item-call'
+            key={`${sectionName}_${name}:call`}
+          >
+            {name}({inputs})
+          </div>,
+          <div
+            className='ui--DropdownLinked-Item-text'
+            key={`${sectionName}_${name}:text`}
+          >
+            {description || name}
+          </div>
+        ],
+        value: name
+      };
+    });
+}
diff --git a/packages/ui-app/src/InputRpc/options/section.js b/packages/ui-app/src/InputRpc/options/section.js
new file mode 100644
index 0000000000..7048d17cb9
--- /dev/null
+++ b/packages/ui-app/src/InputRpc/options/section.js
@@ -0,0 +1,29 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import map from '@polkadot/jsonrpc';
+
+// flowlint-next-line unclear-type:off
+export default function createOptions (): Array<any> {
+  return Object
+    .keys(map)
+    .sort()
+    .filter((name) => {
+      const { isDeprecated = false, methods } = map[name];
+      const available = Object
+        .keys(methods)
+        .filter((name) => {
+          const { isDeprecated = false, isHidden = false } = methods[name];
+
+          return !isDeprecated && !isHidden;
+        });
+
+      return !isDeprecated && available.length !== 0;
+    })
+    .map((name) => ({
+      text: name,
+      value: name
+    }));
+}
diff --git a/packages/ui-app/src/InputStorage/SelectKey.js b/packages/ui-app/src/InputStorage/SelectKey.js
index 00c7bc8a65..3154f73e1a 100644
--- a/packages/ui-app/src/InputStorage/SelectKey.js
+++ b/packages/ui-app/src/InputStorage/SelectKey.js
@@ -8,7 +8,7 @@ import type { I18nProps } from '../types';
 
 import React from 'react';
 
-import map from '@polkadot/storage-substrate/keys';
+import map from '@polkadot/storage-substrate';
 
 import Dropdown from '../Dropdown';
 import classes from '../util/classes';
diff --git a/packages/ui-app/src/InputStorage/index.js b/packages/ui-app/src/InputStorage/index.js
index d6161d2800..73e599407c 100644
--- a/packages/ui-app/src/InputStorage/index.js
+++ b/packages/ui-app/src/InputStorage/index.js
@@ -12,7 +12,7 @@ import '../InputExtrinsic/InputExtrinsic.css';
 
 import React from 'react';
 
-import map from '@polkadot/storage-substrate/keys';
+import map from '@polkadot/storage-substrate';
 
 import classes from '../util/classes';
 import translate from '../translate';
diff --git a/packages/ui-app/src/InputStorage/options/key.js b/packages/ui-app/src/InputStorage/options/key.js
index 1af1c9ad82..1389920c24 100644
--- a/packages/ui-app/src/InputStorage/options/key.js
+++ b/packages/ui-app/src/InputStorage/options/key.js
@@ -7,7 +7,7 @@ import type { StateDb$SectionNames } from '@polkadot/storage/types';
 
 import React from 'react';
 
-import map from '@polkadot/storage-substrate/keys';
+import map from '@polkadot/storage-substrate';
 
 // flowlint-next-line unclear-type:off
 export default function createOptions (sectionName: any): Array<any> {
diff --git a/packages/ui-app/src/InputStorage/options/section.js b/packages/ui-app/src/InputStorage/options/section.js
index 519e22cfb9..bdde312f01 100644
--- a/packages/ui-app/src/InputStorage/options/section.js
+++ b/packages/ui-app/src/InputStorage/options/section.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import map from '@polkadot/storage-substrate/keys';
+import map from '@polkadot/storage-substrate';
 
 // flowlint-next-line unclear-type:off
 export default function createOptions (): Array<any> {
diff --git a/packages/ui-app/src/Output.js b/packages/ui-app/src/Output.js
index e456e52789..57962639de 100644
--- a/packages/ui-app/src/Output.js
+++ b/packages/ui-app/src/Output.js
@@ -9,9 +9,11 @@ import React from 'react';
 
 import CopyButton from './CopyButton';
 import Labelled from './Labelled';
+import classes from './util/classes';
 
 type Props = BareProps & {
   children?: React$Node,
+  isError?: boolean,
   isHidden?: boolean,
   label?: React$Node,
   value?: mixed,
@@ -19,7 +21,7 @@ type Props = BareProps & {
   withLabel?: boolean
 };
 
-export default function Output ({ className, children, isHidden, label, style, value, withCopy = false, withLabel }: Props): React$Node {
+export default function Output ({ className, children, isError = false, isHidden, label, style, value, withCopy = false, withLabel }: Props): React$Node {
   return (
     <Labelled
       className={className}
@@ -28,7 +30,7 @@ export default function Output ({ className, children, isHidden, label, style, v
       style={style}
       withLabel={withLabel}
     >
-      <div className='ui--output'>
+      <div className={classes('ui--output', isError && 'error')}>
         {
           // flowlint-next-line unclear-type:off
           ((value: any): React$Node)
diff --git a/packages/ui-app/src/Params/Param/Account.js b/packages/ui-app/src/Params/Param/Account.js
index a9b543d326..3a840aecaf 100644
--- a/packages/ui-app/src/Params/Param/Account.js
+++ b/packages/ui-app/src/Params/Param/Account.js
@@ -12,10 +12,9 @@ import Bare from './Bare';
 
 export default class Account extends React.PureComponent<Props> {
   render (): React$Node {
-    const { className, isDisabled, isError, label, style, value: { options: { initValue } = {} }, withLabel } = this.props;
-
+    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
     // flowlint-next-line unclear-type:off
-    const defaultValue = ((initValue: any): Uint8Array);
+    const defaultValue = ((value: any): Uint8Array);
 
     return (
       <Bare
@@ -38,9 +37,9 @@ export default class Account extends React.PureComponent<Props> {
   }
 
   onChange = (value?: Uint8Array): void => {
-    const { index, onChange } = this.props;
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid: !!value && value.length === 32,
       value
     });
diff --git a/packages/ui-app/src/Params/Param/Amount.js b/packages/ui-app/src/Params/Param/Amount.js
index 277e7141d4..0ee9194882 100644
--- a/packages/ui-app/src/Params/Param/Amount.js
+++ b/packages/ui-app/src/Params/Param/Amount.js
@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
 // @flow
-// flowlint sketchy-null-mixed:off,sketchy-null-number:off
 
 import type { Props } from '../types';
 
@@ -14,7 +13,9 @@ import Bare from './Bare';
 
 export default class Amount extends React.PureComponent<Props> {
   render (): React$Node {
-    const { className, isDisabled, isError, label, style, value: { options: { initValue = 0, maxValue, minValue = 0 } = {} }, withLabel } = this.props;
+    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    // flowlint-next-line unclear-type:off
+    const defaultValue = new BN(((value: any): BN) || 0).toNumber();
 
     return (
       <Bare
@@ -23,12 +24,11 @@ export default class Amount extends React.PureComponent<Props> {
       >
         <Input
           className='small'
-          defaultValue={initValue || minValue}
+          defaultValue={defaultValue || 0}
           isDisabled={isDisabled}
           isError={isError}
           label={label}
-          max={maxValue}
-          min={minValue}
+          min={0}
           onChange={this.onChange}
           type='number'
           withLabel={withLabel}
@@ -38,11 +38,11 @@ export default class Amount extends React.PureComponent<Props> {
   }
 
   onChange = (value: number): void => {
-    const { index, onChange, value: { options: { minValue = 0 } = {} } } = this.props;
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid: true,
-      value: new BN(value || minValue || 0)
+      value: new BN(value || 0)
     });
   }
 }
diff --git a/packages/ui-app/src/Params/Param/BaseBytes.js b/packages/ui-app/src/Params/Param/BaseBytes.js
new file mode 100644
index 0000000000..b47cdf1dfa
--- /dev/null
+++ b/packages/ui-app/src/Params/Param/BaseBytes.js
@@ -0,0 +1,67 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { Props as BaseProps, Size } from '../types';
+
+import React from 'react';
+
+import hexToU8a from '@polkadot/util/hex/toU8a';
+
+import Input from '../../Input';
+import Bare from './Bare';
+
+type Props = BaseProps & {
+  length?: number,
+  size?: Size,
+  validate?: (u8a: Uint8Array) => boolean
+};
+
+const defaultValidate = (u8a: Uint8Array): boolean =>
+  true;
+
+export default class BaseBytes extends React.PureComponent<Props> {
+  render (): React$Node {
+    const { className, isDisabled, isError, label, size = 'full', style, withLabel } = this.props;
+
+    return (
+      <Bare
+        className={className}
+        style={style}
+      >
+        <Input
+          className={size}
+          isDisabled={isDisabled}
+          isError={isError}
+          label={label}
+          onChange={this.onChange}
+          placeholder='0x...'
+          type='text'
+          withLabel={withLabel}
+        />
+      </Bare>
+    );
+  }
+
+  onChange = (hex: string): void => {
+    const { length = -1, onChange, validate = defaultValidate } = this.props;
+
+    let u8a;
+
+    try {
+      u8a = hexToU8a(hex);
+    } catch (error) {
+      u8a = new Uint8Array([]);
+    }
+
+    const isValidLength = length !== -1
+      ? u8a.length === length
+      : u8a.length !== 0;
+
+    onChange({
+      isValid: isValidLength && validate(u8a),
+      value: u8a
+    });
+  };
+}
diff --git a/packages/ui-app/src/Params/Param/Bool.js b/packages/ui-app/src/Params/Param/Bool.js
index 13e31fbc6c..8c9a9d4359 100644
--- a/packages/ui-app/src/Params/Param/Bool.js
+++ b/packages/ui-app/src/Params/Param/Bool.js
@@ -17,7 +17,9 @@ const options = [
 
 export default class Bool extends React.PureComponent<Props> {
   render (): React$Node {
-    const { className, isDisabled, isError, label, style, value: { options: { initValue = false } = {} }, withLabel } = this.props;
+    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    // flowlint-next-line unclear-type:off
+    const defaultValue = ((value: any): boolean);
 
     return (
       <Bare
@@ -26,9 +28,9 @@ export default class Bool extends React.PureComponent<Props> {
       >
         <Dropdown
           className='small'
+          defaultValue={defaultValue}
           isDisabled={isDisabled}
           isError={isError}
-          defaultValue={initValue}
           label={label}
           options={options}
           onChange={this.onChange}
@@ -39,9 +41,9 @@ export default class Bool extends React.PureComponent<Props> {
   }
 
   onChange = (value: boolean): void => {
-    const { index, onChange } = this.props;
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid: true,
       value
     });
diff --git a/packages/ui-app/src/Params/Param/Bytes.js b/packages/ui-app/src/Params/Param/Bytes.js
index 9761939035..4e404dd010 100644
--- a/packages/ui-app/src/Params/Param/Bytes.js
+++ b/packages/ui-app/src/Params/Param/Bytes.js
@@ -3,65 +3,26 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Props as BaseProps, Size } from '../types';
+import type { Props } from '../types';
 
 import React from 'react';
 
-import hexToU8a from '@polkadot/util/hex/toU8a';
+import BaseBytes from './BaseBytes';
 
-import Input from '../../Input';
-import Bare from './Bare';
-
-type Props = BaseProps & {
-  length?: number,
-  size?: Size,
-  validate?: (u8a: Uint8Array) => boolean
-}
-
-const defaultValidate = (u8a: Uint8Array): boolean =>
-  true;
-
-export default class Bytes extends React.PureComponent<Props> {
-  render (): React$Node {
-    const { className, isDisabled, isError, label, size = 'full', style, withLabel } = this.props;
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Input
-          className={size}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          onChange={this.onChange}
-          placeholder='0x...'
-          type='text'
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  onChange = (hex: string): void => {
-    const { index, length = -1, onChange, validate = defaultValidate } = this.props;
-
-    let u8a;
-
-    try {
-      u8a = hexToU8a(hex);
-    } catch (error) {
-      u8a = new Uint8Array([]);
-    }
-
-    const isValidLength = length !== -1
-      ? u8a.length === length
-      : u8a.length !== 0;
-
-    onChange(index, {
-      isValid: isValidLength && validate(u8a),
-      value: u8a
-    });
-  };
+export default function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onChange, style, withLabel }: Props): React$Node {
+  return (
+    <BaseBytes
+      className={className}
+      defaultValue={defaultValue}
+      isDisabled={isDisabled}
+      isError={isError}
+      label={label}
+      length={-1}
+      name={name}
+      onChange={onChange}
+      size='full'
+      style={style}
+      withLabel={withLabel}
+    />
+  );
 }
diff --git a/packages/ui-app/src/Params/Param/Code.js b/packages/ui-app/src/Params/Param/Code.js
index b96381271e..8abb80a40b 100644
--- a/packages/ui-app/src/Params/Param/Code.js
+++ b/packages/ui-app/src/Params/Param/Code.js
@@ -31,9 +31,9 @@ export default class Code extends React.PureComponent<Props> {
 
   // TODO: Validate that we have actual proper WASM code
   onChange = (value: Uint8Array): void => {
-    const { index, onChange } = this.props;
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid: value.length !== 0,
       value: u8aConcat(bnToU8a(value.length, 32, true), value)
     });
diff --git a/packages/ui-app/src/Params/Param/Hash.js b/packages/ui-app/src/Params/Param/Hash.js
index b621f97e98..7832cb4cf1 100644
--- a/packages/ui-app/src/Params/Param/Hash.js
+++ b/packages/ui-app/src/Params/Param/Hash.js
@@ -7,19 +7,19 @@ import type { Props } from '../types';
 
 import React from 'react';
 
-import Bytes from './Bytes';
+import BaseBytes from './BaseBytes';
 
-export default function Hash ({ index, isDisabled, isError, label, onChange, value, withLabel }: Props): React$Node {
+export default function Hash ({ defaultValue, isDisabled, isError, label, name, onChange, withLabel }: Props): React$Node {
   return (
-    <Bytes
-      index={index}
+    <BaseBytes
+      defaultValue={defaultValue}
       isDisabled={isDisabled}
       isError={isError}
       label={label}
       length={32}
+      name={name}
       onChange={onChange}
       size='medium'
-      value={value}
       withLabel={withLabel}
     />
   );
diff --git a/packages/ui-app/src/Params/Param/KeyValue.js b/packages/ui-app/src/Params/Param/KeyValue.js
index 914c6ca399..13f5bf1c8a 100644
--- a/packages/ui-app/src/Params/Param/KeyValue.js
+++ b/packages/ui-app/src/Params/Param/KeyValue.js
@@ -89,10 +89,10 @@ export default class KeyValue extends React.PureComponent<Props, State> {
 
   nextState (newState: $Shape<State>): void {
     this.setState(
-      (prevState: State, { index, onChange }: Props) => {
+      (prevState: State, { onChange }: Props) => {
         const { key = prevState.key, value = prevState.value } = newState;
 
-        onChange(index, {
+        onChange({
           isValid: key.isValid && value.isValid,
           value: u8aConcat(
             u8aConcat(bnToU8a(key.u8a.length, 32, true), key.u8a),
diff --git a/packages/ui-app/src/Params/Param/Unknown.js b/packages/ui-app/src/Params/Param/Unknown.js
index 936cf08882..c10e279353 100644
--- a/packages/ui-app/src/Params/Param/Unknown.js
+++ b/packages/ui-app/src/Params/Param/Unknown.js
@@ -3,24 +3,22 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Param$Types } from '@polkadot/params/types';
-import type { Props as BareProps } from '../types';
+import type { Props as BareProps, RawParam } from '../types';
 
 import React from 'react';
 
+import typeToString from '@polkadot/params/typeToString';
+
 import translate from '../../translate';
 import Base from './Base';
-import typeToText from '../typeToText';
 
 type Props = BareProps & {
+  defaultValue: RawParam,
   t: I18Next$Translate,
-  value: {
-    type: Param$Types
-  },
   withLabel?: boolean
 };
 
-function Unknown ({ label, t, value: { type }, withLabel }: Props): React$Node {
+function Unknown ({ defaultValue: { type }, label, t, withLabel }: Props): React$Node {
   return (
     <Base
       size='full'
@@ -31,7 +29,7 @@ function Unknown ({ label, t, value: { type }, withLabel }: Props): React$Node {
         {t('param.unknown', {
           defaultValue: `ERROR: Unimplemented type '{{type}}' requested. No renderer exists`,
           replace: {
-            type: typeToText(type)
+            type: typeToString(type)
           }
         })}
       </div>
diff --git a/packages/ui-app/src/Params/Param/VoteThreshold.js b/packages/ui-app/src/Params/Param/VoteThreshold.js
index e219d45422..d7cae13fc4 100644
--- a/packages/ui-app/src/Params/Param/VoteThreshold.js
+++ b/packages/ui-app/src/Params/Param/VoteThreshold.js
@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
 // @flow
-// flowlint sketchy-null-mixed:off
 
 import type { Props } from '../types';
 
@@ -19,8 +18,9 @@ const options = [
 
 export default class VoteThreshold extends React.PureComponent<Props> {
   render (): React$Node {
-    const { className, isDisabled, isError, label, style, value: { options: { initValue = 0 } = {} }, withLabel } = this.props;
-    const defaultValue = initValue || 0;
+    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    // flowlint-next-line unclear-type:off
+    const defaultValue = ((value: any): number);
 
     return (
       <Bare
@@ -42,9 +42,9 @@ export default class VoteThreshold extends React.PureComponent<Props> {
   }
 
   onChange = (value: number): void => {
-    const { index, onChange } = this.props;
+    const { onChange } = this.props;
 
-    onChange(index, {
+    onChange({
       isValid: true,
       value
     });
diff --git a/packages/ui-app/src/Params/Param/findComponent.js b/packages/ui-app/src/Params/Param/findComponent.js
index dc388d65a7..9b770cf8cf 100644
--- a/packages/ui-app/src/Params/Param/findComponent.js
+++ b/packages/ui-app/src/Params/Param/findComponent.js
@@ -4,7 +4,7 @@
 // @flow
 
 import type { Param$Types } from '@polkadot/params/types';
-import type { ComponentMap } from '../types';
+import type { Props, ComponentMap } from '../types';
 
 import Account from './Account';
 import Amount from './Amount';
@@ -34,6 +34,7 @@ const components: ComponentMap = {
   'ReferendumIndex': Amount,
   'SessionKey': Amount,
   'Signature': Hash,
+  'String': Unknown,
   'Timestamp': Amount,
   'u32': Amount,
   'u64': Amount,
@@ -41,14 +42,9 @@ const components: ComponentMap = {
   'VoteThreshold': VoteThreshold
 };
 
-// flowlint-next-line unclear-type:off
-export default function findComponent (type: Param$Types, overrides?: ComponentMap = {}): React$ComponentType<any> | Array<React$ComponentType<any>> {
+export default function findComponent (type: Param$Types, overrides?: ComponentMap = {}): React$ComponentType<Props> {
   if (Array.isArray(type)) {
-    return type
-      .map((type) =>
-        // $FlowFixMe running out of options to check the embedded arrays
-        findComponent(type, overrides)
-      );
+    return Unknown;
   }
 
   return overrides[type] || components[type] || Unknown;
diff --git a/packages/ui-app/src/Params/Param/index.js b/packages/ui-app/src/Params/Param/index.js
index b9be070337..25d22e713b 100644
--- a/packages/ui-app/src/Params/Param/index.js
+++ b/packages/ui-app/src/Params/Param/index.js
@@ -3,137 +3,61 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Param } from '@polkadot/params/types';
 import type { I18nProps } from '../../types';
-import type { BaseProps, ComponentMap, RawParam } from '../types';
+import type { Props as BaseProps, ComponentMap } from '../types';
 
 import React from 'react';
 
+import typeToString from '@polkadot/params/typeToString';
+
 import classes from '../../util/classes';
 import translate from '../../translate';
-import typeToText from '../typeToText';
 import findComponent from './findComponent';
-import Unknown from './Unknown';
 
-type Props = I18nProps & {
+type Props = I18nProps & BaseProps & {
   index: number,
-  overrides?: ComponentMap,
-  onChange: (index: number, value: RawParam) => void,
-  value: Param & {
-    name: string
-  };
-};
-
-type ComponentProps = BaseProps & {
-  index: number
+  overrides?: ComponentMap
 };
 
 type State = {
-  // flowlint-next-line unclear-type:off
-  Components: React$ComponentType<any> | Array<React$ComponentType<any>>
-  | null
+  Component: React$ComponentType<BaseProps> | null
 }
 
 class ParamComponent extends React.PureComponent<Props, State> {
   state: State = {
-    Components: []
+    Component: null
   };
 
-  static getDerivedStateFromProps ({ overrides, value: { type } = {} }: Props): State {
+  static getDerivedStateFromProps ({ defaultValue: { type }, overrides }: Props): State {
     return {
-      Components: !type
+      Component: !type
         ? null
         : findComponent(type, overrides)
     };
   }
 
   render (): React$Node {
-    const { Components } = this.state;
+    const { Component } = this.state;
 
-    if (Components === null) {
+    if (Component === null) {
       return null;
     }
 
-    const { value: { type } } = this.props;
-
-    // FIXME We don't handle array or tuple inputs atm
-    return Array.isArray(type)
-      ? this.renderUnknown()
-      : this.renderComponents();
-  }
-
-  // flowlint-next-line unclear-type:off
-  renderComponents = (_Components: React$ComponentType<any> | Array<React$ComponentType<any>> | null = this.state.Components, startIndex: string = '0', { name, type, options = {} } = this.props.value) => {
-    if (!_Components) {
-      return null;
-    }
-
-    const { className, index, onChange, style } = this.props;
-
-    if (!Array.isArray(type)) {
-      // flowlint-next-line unclear-type:off
-      const Component = ((_Components: any): React$ComponentType<any>);
-
-      return this.renderComponent(Component, startIndex, {
-        className,
-        index,
-        onChange,
-        style,
-        value: {
-          name,
-          type,
-          options
-        }
-      });
-    }
-
-    // flowlint-next-line unclear-type:off
-    const Components = ((_Components: any): Array<React$ComponentType<any>>);
-
-    return Components.map((Component, index) => {
-      return this.renderComponents(Component, `${startIndex}-${index}`, {
-        name,
-        type: type[index],
-        options: {}
-      });
-    });
-  }
-
-  // flowlint-next-line unclear-type:off
-  renderComponent = (Component: React$ComponentType<any>, sub: string, props: ComponentProps): React$Node => {
-    const { className, index, onChange, style, value: { name, type, options = {} } } = props;
-    const text = typeToText(type);
+    const { className, defaultValue, index, name, onChange, style } = this.props;
+    const type = typeToString(defaultValue.type);
 
     return (
       <Component
         className={classes('ui--Param', className)}
-        index={index}
-        key={`${name}:${text}:${index}}`}
-        label={`${name}: ${text} (${index})`}
+        defaultValue={defaultValue}
+        key={`${name}:${type}:${index}}`}
+        label={`${name}: ${type} (${index})`}
+        name={name}
         onChange={onChange}
         style={style}
-        value={{
-          options,
-          type
-        }}
       />
     );
   }
-
-  renderUnknown = (): React$Node => {
-    const { className, index, onChange, style, value: { name, type } = {} } = this.props;
-
-    return this.renderComponent(Unknown, '0', {
-      className,
-      index,
-      onChange,
-      style,
-      value: {
-        name,
-        type
-      }
-    });
-  }
 }
 
 export default translate(ParamComponent);
diff --git a/packages/ui-app/src/Params/index.js b/packages/ui-app/src/Params/index.js
index e2fe36d2f6..237bed7960 100644
--- a/packages/ui-app/src/Params/index.js
+++ b/packages/ui-app/src/Params/index.js
@@ -5,7 +5,7 @@
 
 import type { Section$Item } from '@polkadot/params/types';
 import type { I18nProps } from '../types';
-import type { ComponentMap, RawParam, RawParams } from './types';
+import type { ComponentMap, RawParam, RawParams, RawParam$OnChange } from './types';
 
 import './Params.css';
 
@@ -24,40 +24,50 @@ type Props = I18nProps & {
 
 type State = {
   item: Section$Item,
+  handlers: Array<RawParam$OnChange>,
+  onChangeParam: (at: number, next: RawParam) => void,
   values: RawParams
 };
 
 class Params extends React.PureComponent<Props, State> {
-  state: State = ({}: $Shape<State>);
+  state: State;
 
-  static getDerivedStateFromProps ({ item, onChange }: Props, { item: { name, section } = {} }: State): $Shape<State> | null {
+  constructor (props: Props) {
+    super(props);
+
+    this.state = ({
+      onChangeParam: this.onChangeParam
+    }: $Shape<State>);
+  }
+
+  static getDerivedStateFromProps ({ item, onChange }: Props, { item: { name, section } = {}, onChangeParam }: State): $Shape<State> | null {
     if (name === item.name && section === item.section) {
       return null;
     }
 
     const { params = {} } = item;
     const values = createValues(params);
+    const handlers = values.map(
+      (value, index): RawParam$OnChange =>
+        (value: RawParam): void =>
+          onChangeParam(index, value)
+    );
 
     onChange(values);
 
     return {
       item,
-      values: createValues(params)
+      handlers,
+      values
     };
   }
 
   render (): React$Node {
-    const { className, item, overrides, style } = this.props;
-    const { values } = this.state;
-
-    if (!values.length) {
-      return null;
-    }
-
-    const { name, params = {} } = item;
+    const { className, item: { name, params = {} }, overrides, style } = this.props;
+    const { handlers, values } = this.state;
     const paramNames = Object.keys(params);
 
-    if (paramNames.length === 0) {
+    if (values.length === 0 || paramNames.length === 0) {
       return null;
     }
 
@@ -67,45 +77,45 @@ class Params extends React.PureComponent<Props, State> {
         style={style}
       >
         <div className='ui--Params-Content'>
-          {paramNames.map((paramName, index) => {
-            const { options, type } = params[paramName];
-
-            return (
-              <Param
-                index={index}
-                key={`${name}:${paramName}:${index}`}
-                onChange={this.onChangeParam}
-                overrides={overrides}
-                value={{
-                  name: paramName,
-                  options,
-                  type
-                }}
-              />
-            );
-          })}
+          {paramNames.map((paramName, index) => (
+            <Param
+              defaultValue={values[index]}
+              index={index}
+              key={`${name}:${paramName}:${index}`}
+              name={paramName}
+              onChange={handlers[index]}
+              overrides={overrides}
+              type={params[paramName].type}
+            />
+          ))}
         </div>
       </div>
     );
   }
 
-  onChangeParam = (at: number, next: RawParam): void => {
+  onChangeParam = (at: number, { isValid = false, value }: RawParam): void => {
     this.setState(
       (prevState: State): $Shape<State> => ({
-        values: prevState.values.map((value, index) =>
-          index === at
-            ? next
-            : value
+        values: prevState.values.map((prev, index) =>
+          index !== at
+            ? prev
+            : {
+              isValid,
+              type: prev.type,
+              value
+            }
         )
       }),
-      (): void => {
-        const { onChange } = this.props;
-        const { values } = this.state;
-
-        onChange(values);
-      }
+      this.notifyChange
     );
   }
+
+  notifyChange = (): void => {
+    const { onChange } = this.props;
+    const { values } = this.state;
+
+    onChange(values);
+  }
 }
 
 export default translate(Params);
diff --git a/packages/ui-app/src/Params/initValue.js b/packages/ui-app/src/Params/initValue.js
index 8aa7983093..f4f223226c 100644
--- a/packages/ui-app/src/Params/initValue.js
+++ b/packages/ui-app/src/Params/initValue.js
@@ -2,20 +2,19 @@
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
 // @flow
-// flowlint sketchy-null-mixed:off
 
-import type { Param$Type } from '@polkadot/params/types';
+import type { Param$Types } from '@polkadot/params/types';
+import type { RawParam$Values } from './types';
 
 import BN from 'bn.js';
 
-type Options = {
-  initValue?: mixed,
-  minValue?: mixed
-};
+import typeToString from '@polkadot/params/typeToString';
 
-export default function getInitValue (type: Param$Type, { initValue, minValue }: Options = {}): ?mixed {
+export default function getInitValue (type: Param$Types): RawParam$Values {
   switch (type) {
     case 'Balance':
+      return new BN(1);
+
     case 'BlockNumber':
     case 'Index':
     case 'SessionKey':
@@ -24,15 +23,43 @@ export default function getInitValue (type: Param$Type, { initValue, minValue }:
     case 'ReferendumIndex':
     case 'u32':
     case 'VoteIndex':
-      return new BN(initValue || minValue || 0);
+      return new BN(0);
 
     case 'bool':
-      return initValue || false;
+      return false;
+
+    case 'String':
+      return '';
+
+    case 'Timestamp':
+      return new Date(0);
 
     case 'VoteThreshold':
-      return initValue || 0;
+      return 0;
+
+    case 'AccountId':
+    case 'Bytes':
+    case 'Call':
+    case 'Code':
+    case 'Digest':
+    case 'Hash':
+    case 'Header':
+    case 'KeyValue':
+    case 'KeyValueStorage':
+    case 'MisbehaviorReport':
+    case 'Proposal':
+    case 'Signature':
+      return void 0;
 
     default:
-      return initValue;
+      if (Array.isArray(type)) {
+        return type.map((subtype) =>
+          getInitValue(subtype)
+        );
+      }
+
+      // NOTE for @flow, if it fails here, we know what is missing
+      (type: empty); // eslint-disable-line no-unused-expressions
+      throw new Error(`Unable to determine default type for ${typeToString(type)}`);
   }
 }
diff --git a/packages/ui-app/src/Params/typeToText.js b/packages/ui-app/src/Params/typeToText.js
deleted file mode 100644
index ba65727a43..0000000000
--- a/packages/ui-app/src/Params/typeToText.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright 2017-2018 Jaco Greeff
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-// @flow
-
-import type { Param$Types } from '@polkadot/params/types';
-
-export default function typeToText (type: Param$Types): string {
-  if (!Array.isArray(type)) {
-    return type;
-  }
-
-  // $FlowFixMe hate doing this, but it _looks_ ok
-  const text = type.map(typeToText).join(', ');
-
-  return type.length !== 1
-    ? `(${text})`
-    : `Array<${text}>`;
-}
diff --git a/packages/ui-app/src/Params/types.js b/packages/ui-app/src/Params/types.js
index 6e11e779b3..449b885a79 100644
--- a/packages/ui-app/src/Params/types.js
+++ b/packages/ui-app/src/Params/types.js
@@ -3,33 +3,34 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Param$Type, Param$Types } from '@polkadot/params/types';
+import type { Param$Type, Param$Types, Param$Value } from '@polkadot/params/types';
 import type { BareProps } from '../types';
 
+export type RawParam$Value = ?Param$Value;
+
+export type RawParam$ValueArray = Array<?Param$Value | RawParam$ValueArray>;
+
+export type RawParam$Values = RawParam$Value | RawParam$ValueArray;
+
 export type RawParam = {
   isValid: boolean,
-  value: mixed,
+  type: Param$Types,
+  value: RawParam$Values,
 }
 
+export type RawParam$OnChange = (value: $Shape<RawParam>) => void;
+
 export type RawParams = Array<RawParam>;
 
 export type BaseProps = BareProps & {
-  onChange: (index: number, value: RawParam) => void,
-  value: {
-    name: string,
-    options?: {
-      initValue?: mixed,
-      minValue?: mixed,
-      maxValue?: mixed
-    },
-    type: Param$Types
-  }
+  defaultValue: RawParam,
+  name: string,
+  onChange: RawParam$OnChange
 };
 
 export type Props = BaseProps & {
   isDisabled?: boolean,
   isError?: boolean,
-  index: number,
   label: string,
   withLabel?: boolean
 };
@@ -37,6 +38,5 @@ export type Props = BaseProps & {
 export type Size = 'full' | 'large' | 'medium' | 'small';
 
 export type ComponentMap = {
-  // flowlint-next-line unclear-type:off
-  [Param$Type]: React$ComponentType<any>
+  [Param$Type]: React$ComponentType<Props>
 };
diff --git a/packages/ui-app/src/Params/valueToText.js b/packages/ui-app/src/Params/valueToText.js
index 85904d1a45..07f9083b05 100644
--- a/packages/ui-app/src/Params/valueToText.js
+++ b/packages/ui-app/src/Params/valueToText.js
@@ -4,7 +4,7 @@
 // @flow
 
 import type BN from 'bn.js';
-import type { Param$Types } from '@polkadot/params/types';
+import type { Param$Types, Param$Type$Array } from '@polkadot/params/types';
 
 // import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
@@ -14,7 +14,22 @@ import isBn from '@polkadot/util/is/bn';
 import isU8a from '@polkadot/util/is/u8a';
 
 // flowlint-next-line unclear-type:off
-export default function valueToText (type: Param$Types, value: any): string {
+function arrayToText (type: Param$Type$Array, value: Array<any>): string {
+  if (value.length === 0) {
+    return 'empty';
+  }
+
+  const values = type.map((_type, index) =>
+    valueToText(_type, value[index])
+  ).join(', ');
+
+  return type.length === 1
+    ? `(${values})`
+    : values;
+}
+
+// flowlint-next-line unclear-type:off
+function valueToText (type: Param$Types, value: any): string {
   if (type === 'bool') {
     return value ? 'Yes' : 'No';
   }
@@ -24,18 +39,7 @@ export default function valueToText (type: Param$Types, value: any): string {
   }
 
   if (Array.isArray(type)) {
-    if (value.length === 0) {
-      return 'empty';
-    }
-
-    const values = type.map((_type, index) =>
-      // $FlowFixMe hate doing this, but it _looks_ ok
-      valueToText(_type, value[index])
-    ).join(', ');
-
-    return type.length === 1
-      ? `(${values})`
-      : values;
+    return arrayToText(type, value);
   }
 
   if (type === 'AccountId') {
@@ -52,3 +56,5 @@ export default function valueToText (type: Param$Types, value: any): string {
 
   return value.toString();
 }
+
+export default valueToText;
diff --git a/packages/ui-app/src/Params/values.js b/packages/ui-app/src/Params/values.js
index 98214c27f6..8cf0e36a39 100644
--- a/packages/ui-app/src/Params/values.js
+++ b/packages/ui-app/src/Params/values.js
@@ -3,55 +3,56 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Param, Params } from '@polkadot/params/types';
-import type { RawParam } from './types';
+import type { Params } from '@polkadot/params/types';
+import type { RawParam, RawParam$ValueArray } from './types';
 
 import isUndefined from '@polkadot/util/is/undefined';
 
 import getInitValue from './initValue';
 
 export default function values (params: Params): Array<RawParam> {
-  return Object
-    .values(params)
-    // $FlowFixMe yes, we are sure, the type is correct
-    .map(({ type, options }: Param): RawParam => {
-      if (Array.isArray(type)) {
-        // console.error('Unable to determine default values for array/tuple type', type);
-        //
-        // return {
-        //   isValid: false,
-        //   value: void 0
-        // };
+  const types = Object.keys(params).map((key) => params[key].type);
 
-        if (type.length !== 1) {
-          console.error('Unable to determine default values for tuple type', type);
+  return types.map((type): RawParam => {
+    if (Array.isArray(type)) {
+      // console.error('Unable to determine default values for array/tuple type', type);
+      //
+      // return {
+      //   isValid: false,
+      //   value: void 0
+      // };
 
-          return {
-            isValid: false,
-            value: void 0
-          };
-        }
+      if (type.length !== 1) {
+        console.error('Unable to determine default values for tuple type', type);
 
-        return type.reduce(({ isValid, value }, type) => {
-          // $FlowFixMe still not sure how to iterate through these
-          const avalue = getInitValue(type, {});
-
-          value.push(avalue);
-
-          return {
-            isValid: isValid && !isUndefined(avalue),
-            value
-          };
-        }, { isValid: true, value: [] });
+        return {
+          isValid: false,
+          type,
+          value: void 0
+        };
       }
 
-      const value = getInitValue(type, options);
+      const value: RawParam$ValueArray = [];
 
-      return {
-        isValid: !isUndefined(value),
-        value
-      };
-    });
+      return type.reduce(({ isValid, type }, subtype) => {
+        const avalue = getInitValue(subtype);
+
+        value.push(avalue);
+
+        return {
+          isValid: isValid && !isUndefined(avalue),
+          type,
+          value
+        };
+      }, { isValid: true, type, value });
+    }
+
+    const value = getInitValue(type);
+
+    return {
+      isValid: !isUndefined(value),
+      type,
+      value
+    };
+  });
 }
-
-// 0x050000000600000055555555550ae803000000000000
diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css
index 4a7a50b8f0..2e40b433be 100644
--- a/packages/ui-app/src/styles/components.css
+++ b/packages/ui-app/src/styles/components.css
@@ -1,3 +1,26 @@
 /* Copyright 2017-2018 Jaco Greeff
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
+
+.ui--output {
+  background: #f9f9f9;
+  border-radius: 4px;
+  border: 1px solid #f5f5f5;
+  box-sizing: border-box;
+  line-height: 1em;
+  margin-bottom: 0.5em;
+  padding: 0.75em 1em;
+  position: relative;
+  word-wrap: break-word;
+}
+
+.ui--output .ui--output-button {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+
+.ui--output.error {
+  background: #fff6f6;
+  border-color: #e0b4b4;
+}
diff --git a/packages/ui-app/src/styles/form.css b/packages/ui-app/src/styles/form.css
index 096ee06b44..df381c0fff 100644
--- a/packages/ui-app/src/styles/form.css
+++ b/packages/ui-app/src/styles/form.css
@@ -76,21 +76,3 @@
 .ui--row > div.thirty3 {
   padding: 0 0.25rem;
 }
-
-.ui--output {
-  background: #f9f9f9;
-  border-radius: 4px;
-  border: 1px solid #f9f9f9;
-  box-sizing: border-box;
-  line-height: 1em;
-  margin-bottom: 0.5em;
-  padding: 0.75em 1em;
-  position: relative;
-  word-wrap: break-word;
-}
-
-.ui--output .ui--output-button {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-}
diff --git a/packages/ui-app/src/styles/semantic.css b/packages/ui-app/src/styles/semantic.css
index 04b9d10437..f2b87b9b74 100644
--- a/packages/ui-app/src/styles/semantic.css
+++ b/packages/ui-app/src/styles/semantic.css
@@ -2,6 +2,10 @@
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
 
+.ui.hidden.divider {
+  margin: 0.75rem 0;
+}
+
 .ui.dropdown {
   /* from .ui.fluid.dropdown */
   display: block;
diff --git a/packages/ui-keyring/package.json b/packages/ui-keyring/package.json
index 5ffbfb0fb5..58d088c811 100644
--- a/packages/ui-keyring/package.json
+++ b/packages/ui-keyring/package.json
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/ui-react": "^0.12.3",
-    "@polkadot/util": "^0.20.5",
-    "@polkadot/util-keyring": "^0.20.5",
+    "@polkadot/ui-react": "^0.13.4",
+    "@polkadot/util": "^0.21.3",
+    "@polkadot/util-keyring": "^0.21.3",
     "store": "^2.0.12"
   },
   "peerDependencies": {
diff --git a/packages/ui-keyring/src/account/forget.js b/packages/ui-keyring/src/account/forget.js
index bd11a7838a..772efbda92 100644
--- a/packages/ui-keyring/src/account/forget.js
+++ b/packages/ui-keyring/src/account/forget.js
@@ -11,7 +11,6 @@ import { accountKey } from '../defaults';
 import createOptions from '../options';
 
 export default function forgetAccount (state: State, address: string): void {
-  // $FlowFixMe oops, types not updated upstream
   state.keyring.removePair(address);
 
   store.remove(accountKey(address));
diff --git a/packages/ui-keyring/src/options/index.js b/packages/ui-keyring/src/options/index.js
index 070c00058f..a1e431a7e5 100644
--- a/packages/ui-keyring/src/options/index.js
+++ b/packages/ui-keyring/src/options/index.js
@@ -8,17 +8,7 @@ import type { State, KeyringJson } from '../types';
 import createItem from './item';
 import createHeader from './header';
 
-export default function createOptions (state: State): void {
-  state.options = {
-    account: [],
-    address: [],
-    all: [],
-    recent: [],
-    testing: []
-  };
-
-  const { available, keyring, options } = state;
-
+function addPairs ({ available, keyring }: State): void {
   keyring
     .getPairs()
     .forEach((pair) => {
@@ -29,10 +19,12 @@ export default function createOptions (state: State): void {
         meta: pair.getMeta()
       };
     });
+}
 
+function addAccounts ({ available, options }: State): void {
   Object
-    .values(available.account)
-    // $FlowFixMe values() -> mixed, this is an object
+    .keys(available.account)
+    .map((address) => available.account[address])
     .forEach(({ address, meta: { name, isTesting = false } }: KeyringJson) => {
       const option = createItem(address, name);
 
@@ -42,10 +34,12 @@ export default function createOptions (state: State): void {
         options.account.push(option);
       }
     });
+}
 
+function addAddresses ({ available, options }: State): void {
   Object
-    .values(available.address)
-    // $FlowFixMe values() -> mixed, this is an object
+    .keys(available.address)
+    .map((address) => available.address[address])
     .forEach(({ address, meta: { name, isRecent = false } }: KeyringJson) => {
       if (available.account[address]) {
         return;
@@ -59,6 +53,22 @@ export default function createOptions (state: State): void {
         options.address.push(option);
       }
     });
+}
+
+export default function createOptions (state: State): void {
+  state.options = {
+    account: [],
+    address: [],
+    all: [],
+    recent: [],
+    testing: []
+  };
+
+  addPairs(state);
+  addAccounts(state);
+  addAddresses(state);
+
+  const { options } = state;
 
   options.address = [].concat(
     options.address.length ? [ createHeader('Addresses') ] : [],
diff --git a/packages/ui-signer/LICENSE b/packages/ui-signer/LICENSE
new file mode 100644
index 0000000000..3d150a620a
--- /dev/null
+++ b/packages/ui-signer/LICENSE
@@ -0,0 +1,15 @@
+ISC License (ISC)
+
+Copyright 2017-2018 Jaco Greeff <jacogr@gmail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/packages/ui-signer/README.md b/packages/ui-signer/README.md
new file mode 100644
index 0000000000..1463481ec8
--- /dev/null
+++ b/packages/ui-signer/README.md
@@ -0,0 +1 @@
+# @polkadot/ui-signer
diff --git a/packages/ui-signer/package.json b/packages/ui-signer/package.json
new file mode 100644
index 0000000000..fe54fcfbec
--- /dev/null
+++ b/packages/ui-signer/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@polkadot/ui-signer",
+  "version": "0.6.2",
+  "main": "index.js",
+  "repository": "https://github.com/polkadot-js/apps.git",
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "license": "ISC",
+  "scripts": {
+    "build": "polkadot-dev-build-babel",
+    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/extrinsics": "^0.15.8",
+    "@polkadot/ui-app": "^0.6.2",
+    "@polkadot/ui-keyring": "^0.6.2",
+    "@polkadot/util": "^0.21.3"
+  },
+  "peerDependencies": {
+    "react": "^16.3.1",
+    "semantic-ui-react": "^0.80.0"
+  }
+}
diff --git a/packages/ui-signer/src/Extrinsic.js b/packages/ui-signer/src/Extrinsic.js
new file mode 100644
index 0000000000..19c42d5ad9
--- /dev/null
+++ b/packages/ui-signer/src/Extrinsic.js
@@ -0,0 +1,86 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { I18nProps } from '@polkadot/ui-app/types';
+import type { QueueTx } from './types';
+
+import BN from 'bn.js';
+import React from 'react';
+import { Trans } from 'react-i18next';
+
+import extrinsics from '@polkadot/extrinsics-substrate';
+import Modal from '@polkadot/ui-app/Modal';
+import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
+import u8aToHexShort from '@polkadot/util/u8a/toHexShort';
+import addressEncode from '@polkadot/util-keyring/address/encode';
+
+import translate from './translate';
+
+type Props = I18nProps & {
+  children?: React$Node,
+  value: QueueTx
+};
+
+function findExtrinsic (sectionId: number, methodId: number): { method: ?string, section: ?string } {
+  const section = Object.keys(extrinsics).find((section) =>
+    extrinsics[section].index[0] === sectionId
+  );
+  const methods = section
+    ? extrinsics[section].methods.public
+    : {};
+  const method = Object.keys(methods).find((method) =>
+    methods[method].index[1] === methodId
+  );
+
+  return {
+    method,
+    section
+  };
+}
+
+function Extrinsic ({ children, className, style, t, value: { nonce = new BN(0), publicKey, values: [_value] } }: Props): React$Node {
+  const unknown = t('decoded.unknown', {
+    defaultValue: 'unknown'
+  });
+  // flowlint-next-line unclear-type:off
+  const value = ((_value: any): Uint8Array);
+  const { method = unknown, section = unknown } = findExtrinsic(value[0], value[1]);
+  // flowlint-next-line unclear-type:off
+  const from = addressEncode(((publicKey: any): Uint8Array));
+
+  return [
+    <Modal.Header key='header'>
+      {t('extrinsic.header', {
+        defaultValue: 'Extrinsic submission'
+      })}
+    </Modal.Header>,
+    <Modal.Content className='ui--signer-Signer-Content' key='content'>
+      <div className='ui--signer-Signer-Decoded'>
+        <div className='expanded'>
+          <p>
+            <Trans i18nkey='decoded.short'>
+              You are about to sign a message from <span className='code'>{from}</span> calling <span className='code'>{section}.{method}</span> with an index of <span className='code'>{nonce.toString()}</span>
+            </Trans>
+          </p>
+          <p>
+            {t('decoded.data', {
+              defaultValue: 'The encoded parameters contains the data'
+            })}
+          </p>
+          <p className='code'>
+            {u8aToHexShort(value, 512)}
+          </p>
+        </div>
+        <IdentityIcon
+          className='icon'
+          value={from}
+        />
+      </div>
+      {children}
+    </Modal.Content>
+  ];
+}
+
+export default translate(Extrinsic);
diff --git a/packages/ui-signer/src/Modal.js b/packages/ui-signer/src/Modal.js
new file mode 100644
index 0000000000..54735f15ff
--- /dev/null
+++ b/packages/ui-signer/src/Modal.js
@@ -0,0 +1,245 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { ApiProps } from '@polkadot/ui-react-rx/types';
+import type { I18nProps } from '@polkadot/ui-app/types';
+import type { QueueTx, QueueTx$MessageSetStatus } from './types';
+
+import React from 'react';
+
+import Button from '@polkadot/ui-app/Button';
+import Modal from '@polkadot/ui-app/Modal';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';
+import withApi from '@polkadot/ui-react-rx/with/api';
+
+import Extrinsic from './Extrinsic';
+import Unlock from './Unlock';
+import signMessage from './sign';
+import submitMessage from './submit';
+import translate from './translate';
+
+type Props = I18nProps & ApiProps & {
+  queue: Array<QueueTx>,
+  queueSetStatus: QueueTx$MessageSetStatus
+};
+
+type UnlockI18n = {
+  key: string,
+  value: I18Next$Translate$Config
+}
+
+type State = {
+  currentItem?: QueueTx,
+  password: string,
+  sendItem: (item: QueueTx) => Promise<void>,
+  unlockError: UnlockI18n | null
+};
+
+class Signer extends React.PureComponent<Props, State> {
+  state: State;
+
+  constructor (props: Props) {
+    super(props);
+
+    this.state = {
+      password: '',
+      sendItem: this.sendItem,
+      unlockError: null
+    };
+  }
+
+  static getDerivedStateFromProps ({ queue }: Props, { currentItem, password, sendItem, unlockError }: State): $Shape<State> {
+    const nextItem = queue.find(({ status }) =>
+      status === 'queued'
+    );
+    const isSame =
+      !!nextItem &&
+      !!currentItem &&
+      (
+        (!nextItem.publicKey && !currentItem.publicKey) ||
+        (
+          (nextItem.publicKey && nextItem.publicKey.toString()) === (currentItem.publicKey && currentItem.publicKey.toString())
+        )
+      );
+
+    if (nextItem && nextItem.rpc.isSigned !== true) {
+      sendItem(nextItem);
+    }
+
+    return {
+      currentItem: nextItem,
+      password: isSame ? password : '',
+      unlockError: isSame ? unlockError : null
+    };
+  }
+
+  render (): React$Node {
+    const { className, style } = this.props;
+    const { currentItem } = this.state;
+
+    if (!currentItem || currentItem.rpc.isSigned !== true) {
+      return null;
+    }
+
+    return (
+      <Modal
+        className={classes('ui--signer-Signer', className)}
+        dimmer='inverted'
+        open
+        style={style}
+      >
+        {this.renderContent()}
+        {this.renderButtons()}
+      </Modal>
+    );
+  }
+
+  renderButtons (): React$Node {
+    const { t } = this.props;
+    const { currentItem: { rpc: { isSigned = false } = {} } = {} } = this.state;
+
+    return (
+      <Modal.Actions>
+        <Button.Group>
+          <Button
+            isNegative
+            onClick={this.onCancel}
+            text={t('extrinsic.cancel', {
+              defaultValue: 'Cancel'
+            })}
+          />
+          <Button.Or />
+          <Button
+            isPrimary
+            onClick={this.onSend}
+            text={
+              isSigned
+                ? t('extrinsic.signedSend', {
+                  defaultValue: 'Sign and Submit'
+                })
+                : t('extrinsic.send', {
+                  defaultValue: 'Submit'
+                })
+            }
+          />
+        </Button.Group>
+      </Modal.Actions>
+    );
+  }
+
+  renderContent (): React$Node {
+    const { currentItem } = this.state;
+
+    if (!currentItem) {
+      return null;
+    }
+
+    return (
+      <Extrinsic value={currentItem}>
+        {this.renderUnlock()}
+      </Extrinsic>
+    );
+  }
+
+  renderUnlock (): React$Node {
+    const { t } = this.props;
+    const { currentItem, password, unlockError } = this.state;
+
+    if (!currentItem) {
+      return null;
+    }
+
+    return (
+      <Unlock
+        error={unlockError && t(unlockError.key, unlockError.value)}
+        onChange={this.onChangePassword}
+        password={password}
+        value={currentItem.publicKey}
+      />
+    );
+  }
+
+  unlockAccount (publicKey: Uint8Array, password?: string): ?UnlockI18n {
+    const pair = keyring.getPair(publicKey);
+
+    if (pair.hasSecretKey()) {
+      return null;
+    }
+
+    try {
+      pair.decodePkcs8(password);
+    } catch (error) {
+      return {
+        key: 'signer.unlock.generic',
+        value: {
+          defaultValue: error.message
+        }
+      };
+    }
+
+    return null;
+  }
+
+  onChangePassword = (password: string): void => {
+    this.setState({
+      password,
+      unlockError: null
+    });
+  }
+
+  onCancel = (): void => {
+    const { queueSetStatus } = this.props;
+    const { currentItem } = this.state;
+
+    // This should never be executed
+    if (!currentItem) {
+      return;
+    }
+
+    queueSetStatus(currentItem.id, 'cancelled');
+  }
+
+  onSend = async (): Promise<void> => {
+    const { currentItem, password } = this.state;
+
+    // This should never be executed
+    if (!currentItem) {
+      return;
+    }
+
+    this.sendItem(currentItem, password);
+  };
+
+  sendItem = async ({ id, nonce, publicKey, rpc, values }: QueueTx, password?: string): Promise<void> => {
+    if (rpc.isSigned === true && publicKey) {
+      const unlockError = this.unlockAccount(publicKey, password);
+
+      if (unlockError) {
+        this.setState({ unlockError });
+        return;
+      }
+    }
+
+    const { api, queueSetStatus } = this.props;
+
+    queueSetStatus(id, 'sending');
+
+    let data = values;
+
+    if (rpc.isSigned === true && publicKey) {
+      // flowlint-next-line unclear-type:off
+      data = [signMessage(publicKey, nonce, ((data[0]: any): Uint8Array)).data];
+    }
+
+    const { error, result, status } = await submitMessage(api, data, rpc);
+
+    queueSetStatus(id, status, result, error);
+  }
+}
+
+export default translate(
+  withApi(Signer)
+);
diff --git a/packages/ui-signer/src/Queue.js b/packages/ui-signer/src/Queue.js
new file mode 100644
index 0000000000..32116ecd43
--- /dev/null
+++ b/packages/ui-signer/src/Queue.js
@@ -0,0 +1,83 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BareProps } from '@polkadot/ui-app/types';
+import type { QueueProps, QueueTx$Base, QueueTx$Id, QueueTx$Status } from './types';
+
+import React from 'react';
+
+type Props = BareProps & {
+  children: React$Node
+};
+
+type State = QueueProps;
+
+const { Consumer, Provider } = React.createContext();
+let nextId: QueueTx$Id = 0;
+
+export default class Queue extends React.Component<Props, State> {
+  static Provider = Provider;
+  static Consumer = Consumer
+
+  state: State;
+
+  constructor (props: Props) {
+    super(props);
+
+    this.state = {
+      queue: [],
+      queueAdd: this.queueAdd,
+      queueSetStatus: this.queueSetStatus
+    };
+  }
+
+  render () {
+    return (
+      <Provider value={this.state}>
+        {this.props.children}
+      </Provider>
+    );
+  }
+
+  queueSetStatus = (id: QueueTx$Id, status: QueueTx$Status, result?: mixed, error?: Error): void => {
+    this.setState(
+      (prevState: State): $Shape<State> => ({
+        queue: prevState.queue.map((item) =>
+          item.id === id
+            ? {
+              ...item,
+              error: error || item.error,
+              // flowlint-next-line sketchy-null-mixed:off
+              result: result || item.result,
+              status
+            }
+            : item
+        )
+      })
+    );
+
+    if (['cancelled', 'error', 'sent'].includes(status)) {
+      setTimeout(() => {
+        this.queueSetStatus(id, 'completed');
+      }, 5000);
+    }
+  }
+
+  queueAdd = (value: QueueTx$Base): QueueTx$Id => {
+    const id: QueueTx$Id = ++nextId;
+
+    this.setState(
+      (prevState: State): $Shape<State> => ({
+        queue: prevState.queue.concat([{
+          ...value,
+          id,
+          status: 'queued'
+        }])
+      })
+    );
+
+    return id;
+  }
+}
diff --git a/packages/app-extrinsics/src/Status.js b/packages/ui-signer/src/Status.js
similarity index 80%
rename from packages/app-extrinsics/src/Status.js
rename to packages/ui-signer/src/Status.js
index 62eb9fab74..decd87fc49 100644
--- a/packages/app-extrinsics/src/Status.js
+++ b/packages/ui-signer/src/Status.js
@@ -25,16 +25,16 @@ export default function Status ({ className, queue, style }: Props): React$Node
 
   return (
     <div
-      className={classes('extrinsics--Status', className)}
+      className={classes('ui--signer-Status', className)}
       style={style}
     >
-      {available.map(({ extrinsic: { name, section }, id, status }) =>
+      {available.map(({ rpc: { name, section }, id, status }) =>
         <div
-          className={classes('extrinsics--Status-Item', status)}
+          className={classes('ui--signer-Status-Item', status)}
           key={id}
         >
           <div className='header'>
-            {section}_{name}
+            {section}.{name}
           </div>
           <div className='status'>
             {status}
diff --git a/packages/app-extrinsics/src/Signer/Unlock.js b/packages/ui-signer/src/Unlock.js
similarity index 93%
rename from packages/app-extrinsics/src/Signer/Unlock.js
rename to packages/ui-signer/src/Unlock.js
index d56046bd45..bdc64b1446 100644
--- a/packages/app-extrinsics/src/Signer/Unlock.js
+++ b/packages/ui-signer/src/Unlock.js
@@ -12,7 +12,7 @@ import Password from '@polkadot/ui-app/Password';
 import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring';
 
-import translate from '../translate';
+import translate from './translate';
 
 type Props = I18nProps & {
   error?: string,
@@ -52,7 +52,7 @@ class Unlock extends React.PureComponent<Props, State> {
 
     return (
       <div
-        className={classes('extrinsics--Signer-Unlock', className)}
+        className={classes('ui--signer-Signer-Unlock', className)}
         style={style}
       >
         <div className='ui--row'>
diff --git a/packages/ui-signer/src/index.css b/packages/ui-signer/src/index.css
new file mode 100644
index 0000000000..3484e2b7e8
--- /dev/null
+++ b/packages/ui-signer/src/index.css
@@ -0,0 +1,59 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.ui--signer-Signer {}
+
+.ui--signer-Signer-Decoded,
+.ui--signer-Signer-Unlock {
+  align-content: center;
+  display: flex;
+  line-height: 1.5em;
+}
+
+.ui--signer-Signer-Decoded {}
+
+.ui--signer-Signer-Unlock {
+  padding-top: 1.5rem;
+}
+
+.ui--signer-Signer-Content {}
+
+.ui--signer-Signer-Content .expanded {
+  padding-right: 2em;
+}
+
+.ui--signer-Signer-Content .expanded .code {
+  background: #f5f5f5;
+  font-family: monospace;
+  margin: 0 0.25em;
+  overflow-wrap: break-word;
+  padding: 0.25em 0.5em;
+  word-break: break-all;
+  word-break: break-word;
+  word-wrap: break-word;
+}
+
+.ui--signer-Status {
+  display: inline-block;
+  position: fixed;
+  right: 0.25rem;
+  top: 0.125rem;
+  z-index: 1001;
+}
+
+.ui--signer-Status-Item {
+  background: #bcdaf0;
+  margin: 0.125rem;
+  padding: 0.5rem 1rem;
+  text-align: center;
+}
+
+.ui--signer-Status-Item .status {
+  font-weight: 700;
+}
+
+.ui--signer-Status-Item.error {
+  background: red;
+  color: white;
+}
diff --git a/packages/ui-signer/src/index.js b/packages/ui-signer/src/index.js
new file mode 100644
index 0000000000..ebf2af9302
--- /dev/null
+++ b/packages/ui-signer/src/index.js
@@ -0,0 +1,46 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BareProps } from '@polkadot/ui-app/types';
+import type { QueueProps } from './types';
+
+import './index.css';
+
+import React from 'react';
+
+import Modal from './Modal';
+import Status from './Status';
+import Queue from './Queue';
+
+type Props = BareProps & {
+  children: React$Node
+};
+
+function Signer ({ children, className, style }: Props): React$Node {
+  return (
+    <Queue>
+      {children}
+      <Queue.Consumer>
+        {({ queue, queueSetStatus }: QueueProps = {}) => [
+          <Modal
+            className={className}
+            key='signer-modal'
+            queue={queue}
+            queueSetStatus={queueSetStatus}
+            style={style}
+          />,
+          <Status
+            key='signer-status'
+            queue={queue}
+          />
+        ]}
+      </Queue.Consumer>
+    </Queue>
+  );
+}
+
+Signer.Queue = Queue;
+
+export default Signer;
diff --git a/packages/ui-signer/src/rawToValues.js b/packages/ui-signer/src/rawToValues.js
new file mode 100644
index 0000000000..a3e3b6f536
--- /dev/null
+++ b/packages/ui-signer/src/rawToValues.js
@@ -0,0 +1,16 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { Param$Value, Param$Values } from '@polkadot/params/types';
+import type { RawParam } from '@polkadot/ui-app/Params/types';
+
+function rawToValues (raw: Array<RawParam>): Array<Param$Values> {
+  return raw.map(({ value }) =>
+    // flowlint-next-line unclear-type:off
+    ((value: any): Param$Value)
+  );
+}
+
+export default rawToValues;
diff --git a/packages/ui-signer/src/sign.js b/packages/ui-signer/src/sign.js
new file mode 100644
index 0000000000..588c935f73
--- /dev/null
+++ b/packages/ui-signer/src/sign.js
@@ -0,0 +1,26 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type BN from 'bn.js';
+import type { Signed } from './types';
+
+import encodeCall from '@polkadot/extrinsics-codec/encode/call';
+import keyring from '@polkadot/ui-keyring';
+import u8aConcat from '@polkadot/util/u8a/concat';
+import u8aToHex from '@polkadot/util/u8a/toHex';
+
+export default function signMessage (publicKey: Uint8Array, nonce: BN | number, value: Uint8Array): Signed {
+  const message = encodeCall(publicKey, nonce, value);
+  const signature = keyring.getPair(publicKey).sign(message);
+
+  console.log(`  message :: ${u8aToHex(message)}`);
+  console.log(`signature :: ${u8aToHex(signature)}`);
+
+  return {
+    data: u8aConcat(message, signature),
+    message,
+    signature
+  };
+}
diff --git a/packages/ui-signer/src/submit.js b/packages/ui-signer/src/submit.js
new file mode 100644
index 0000000000..7473f51fad
--- /dev/null
+++ b/packages/ui-signer/src/submit.js
@@ -0,0 +1,34 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { RxApiInterface } from '@polkadot/api-rx/types';
+import type { InterfaceMethodDefinition } from '@polkadot/jsonrpc/types';
+import type { Param$Values } from '@polkadot/params/types';
+import type { QueueTx$Result } from './types';
+
+export default function submitMessage (api: RxApiInterface, params: Array<Param$Values>, rpc: InterfaceMethodDefinition): Promise<QueueTx$Result> {
+  const { name, section } = rpc;
+
+  // $FlowFixMe This should not be an issue...
+  return api[section][name]
+    .apply(null, params)
+    .toPromise()
+    .then((result) => {
+      console.log(`${section}.${name}: result ::`, result);
+
+      return {
+        result,
+        status: 'sent'
+      };
+    })
+    .catch((error) => {
+      console.error(error);
+
+      return {
+        error,
+        status: 'error'
+      };
+    });
+}
diff --git a/packages/ui-signer/src/translate.js b/packages/ui-signer/src/translate.js
new file mode 100644
index 0000000000..ace5f0a664
--- /dev/null
+++ b/packages/ui-signer/src/translate.js
@@ -0,0 +1,8 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import { translate } from 'react-i18next';
+
+export default translate(['signer', 'ui']);
diff --git a/packages/ui-signer/src/types.js b/packages/ui-signer/src/types.js
new file mode 100644
index 0000000000..ca9c64751a
--- /dev/null
+++ b/packages/ui-signer/src/types.js
@@ -0,0 +1,52 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type BN from 'bn.js';
+import type { InterfaceMethodDefinition } from '@polkadot/jsonrpc/types';
+import type { Param$Values } from '@polkadot/params/types';
+
+export type EncodedMessage = {
+  isValid: boolean,
+  values: Array<Param$Values>
+};
+
+export type QueueTx$Status = 'cancelled' | 'completed' | 'error' | 'incomplete' | 'queued' | 'sending' | 'sent';
+
+export type QueueTx$Id = number;
+
+export type QueueTx$Result = {
+  error?: Error,
+  result?: mixed,
+  status: QueueTx$Status
+}
+
+export type QueueTx$Base = EncodedMessage & {
+  rpc: InterfaceMethodDefinition,
+  nonce: BN,
+  publicKey?: Uint8Array | null
+};
+
+export type QueueTx = QueueTx$Base & {
+  error?: Error,
+  id: QueueTx$Id,
+  result?: mixed,
+  status: QueueTx$Status
+};
+
+export type QueueTx$MessageAdd = (value: QueueTx$Base) => QueueTx$Id;
+
+export type QueueTx$MessageSetStatus = (id: number, status: QueueTx$Status, result?: mixed, error?: Error) => void;
+
+export type QueueProps = {
+  queue: Array<QueueTx>,
+  queueAdd: QueueTx$MessageAdd,
+  queueSetStatus: QueueTx$MessageSetStatus
+};
+
+export type Signed = {
+  data: Uint8Array,
+  message: Uint8Array,
+  signature: Uint8Array
+};
diff --git a/yarn.lock b/yarn.lock
index 6088283977..8d29317a13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -719,52 +719,47 @@
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.0.2.tgz#d056b68999769728a1cff8d643bc59eb6f0be436"
 
-"@polkadot/api-format@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-format/-/api-format-0.11.3.tgz#3daf7935574ee95d3d97e70e8ecc2004c5ae59f0"
+"@polkadot/api-format@^0.12.4":
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-format/-/api-format-0.12.4.tgz#9ef5d227a98e713aef0ad8cdd8cd4f2804d346fb"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/api-jsonrpc" "^0.11.3"
-    "@polkadot/primitives-json" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/jsonrpc" "^0.15.8"
+    "@polkadot/primitives-json" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/api-jsonrpc@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-jsonrpc/-/api-jsonrpc-0.11.3.tgz#ecfb31928610073b8a8c4335a5afe69a87de7896"
+"@polkadot/api-provider@^0.12.4":
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-provider/-/api-provider-0.12.4.tgz#947cf3720a06a808d21dd5717d2bf3f3a7d37138"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-
-"@polkadot/api-provider@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-provider/-/api-provider-0.11.3.tgz#4f36c946ec81964530b8756967f41305337b3021"
-  dependencies:
-    "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/storage-substrate" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
-    "@polkadot/util-crypto" "^0.20.5"
-    "@polkadot/util-keyring" "^0.20.5"
+    "@polkadot/storage-substrate" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
+    "@polkadot/util-crypto" "^0.21.3"
+    "@polkadot/util-keyring" "^0.21.3"
     eventemitter3 "^2.0.3"
     isomorphic-fetch "^2.2.1"
     websocket "^1.0.25"
 
-"@polkadot/api-rx@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-rx/-/api-rx-0.11.3.tgz#bc63916e02e7a68bf56732a723b1e9a96cf74aa7"
+"@polkadot/api-rx@^0.12.4":
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-rx/-/api-rx-0.12.4.tgz#2114d29620570ebc35215a5bd967bfaa1a5ad7c9"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/api" "^0.11.3"
-    "@polkadot/api-provider" "^0.11.3"
+    "@polkadot/api" "^0.12.4"
+    "@polkadot/api-provider" "^0.12.4"
     rxjs "^5.5.10"
 
-"@polkadot/api@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.11.3.tgz#14db7347e844b96f5867ecff2bf20f581d623074"
+"@polkadot/api@^0.12.4":
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.12.4.tgz#591912964574f9b4775cf33473adfb48ef339d3a"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/api-format" "^0.11.3"
-    "@polkadot/api-jsonrpc" "^0.11.3"
-    "@polkadot/api-provider" "^0.11.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/api-format" "^0.12.4"
+    "@polkadot/api-provider" "^0.12.4"
+    "@polkadot/jsonrpc" "^0.15.8"
+    "@polkadot/params" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
 "@polkadot/dev-react@^0.19.10":
   version "0.19.10"
@@ -821,175 +816,181 @@
     mkdirp "^0.5.1"
     rimraf "^2.6.2"
 
-"@polkadot/extrinsics-codec@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics-codec/-/extrinsics-codec-0.14.3.tgz#669ca53f7084251b4644971ea32a5af0c4d0c597"
+"@polkadot/extrinsics-codec@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics-codec/-/extrinsics-codec-0.15.8.tgz#925ab3facb9efb1c03a098f54dc466a8072ca3fe"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/extrinsics" "^0.14.3"
-    "@polkadot/params" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/extrinsics" "^0.15.8"
+    "@polkadot/params" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
     bn.js "^4.11.8"
 
-"@polkadot/extrinsics-substrate@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics-substrate/-/extrinsics-substrate-0.14.3.tgz#0937450ca3f1ada77857e26291e24ff3b2383749"
+"@polkadot/extrinsics-substrate@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics-substrate/-/extrinsics-substrate-0.15.8.tgz#8c36f8bd84711a5bb41f40d7da00c831cf1b1542"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/extrinsics" "^0.14.3"
+    "@polkadot/extrinsics" "^0.15.8"
 
-"@polkadot/extrinsics@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics/-/extrinsics-0.14.3.tgz#350150658e78fef3dbf21639926eadf817d2bfc4"
+"@polkadot/extrinsics@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics/-/extrinsics-0.15.8.tgz#98c3776fe1b2e560489511312a6c56a17b76fbfc"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/params" "^0.14.3"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/params" "^0.15.8"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/params@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/params/-/params-0.14.3.tgz#135719c1fbbf5bb100bf648969deb78628d5e26b"
+"@polkadot/jsonrpc@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.15.8.tgz#54ff1123eeb763f53023b16116cf5762d1d8d4e4"
+  dependencies:
+    "@polkadot/params" "^0.15.8"
+    babel-runtime "^6.26.0"
+
+"@polkadot/params@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/params/-/params-0.15.8.tgz#b5b04dfd7f95ae3bfd38a360eece3d87aa1cc3a2"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/extrinsics" "^0.14.3"
-    "@polkadot/extrinsics-substrate" "^0.14.3"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/extrinsics" "^0.15.8"
+    "@polkadot/extrinsics-substrate" "^0.15.8"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/primitives-builder@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/primitives-builder/-/primitives-builder-0.14.3.tgz#0b8f90d4276cd82c0c58824cc2ca19f3af2c2de9"
+"@polkadot/primitives-builder@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/primitives-builder/-/primitives-builder-0.15.8.tgz#6ce1db576234b62886ba29555ee366e85e14a4be"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/primitives-codec" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
-    "@polkadot/util-crypto" "^0.20.5"
-    "@polkadot/util-triehash" "^0.20.5"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/primitives-codec" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
+    "@polkadot/util-crypto" "^0.21.3"
+    "@polkadot/util-triehash" "^0.21.3"
 
-"@polkadot/primitives-codec@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/primitives-codec/-/primitives-codec-0.14.3.tgz#85d26834e58f02c3d038539d696b68f68326c86a"
+"@polkadot/primitives-codec@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/primitives-codec/-/primitives-codec-0.15.8.tgz#1d57d253f149a7262222458f75a83601aa313bd0"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/primitives-builder" "^0.14.3"
-    "@polkadot/primitives-rlp" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
-    "@polkadot/util-keyring" "^0.20.5"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/primitives-builder" "^0.15.8"
+    "@polkadot/primitives-rlp" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
+    "@polkadot/util-keyring" "^0.21.3"
 
-"@polkadot/primitives-json@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/primitives-json/-/primitives-json-0.14.3.tgz#30ca431c2ba483035a18d391f269555c4b314258"
+"@polkadot/primitives-json@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/primitives-json/-/primitives-json-0.15.8.tgz#ee1035ac744fe5a373152c8bc67ebf2be7643f12"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/primitives-builder" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/primitives-builder" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/primitives-rlp@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/primitives-rlp/-/primitives-rlp-0.14.3.tgz#7ab6550a1df71a2a9cc5c740d65eeba173d1bf89"
+"@polkadot/primitives-rlp@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/primitives-rlp/-/primitives-rlp-0.15.8.tgz#7b6583d5026e69be48d6e029978656590c0ad4e6"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/primitives-builder" "^0.14.3"
-    "@polkadot/primitives-json" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
-    "@polkadot/util-crypto" "^0.20.5"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/primitives-builder" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
+    "@polkadot/util-crypto" "^0.21.3"
 
-"@polkadot/primitives@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/primitives/-/primitives-0.14.3.tgz#f0f6db6c6b1ddcdee826fedddd9ec675cb15736b"
+"@polkadot/primitives@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/primitives/-/primitives-0.15.8.tgz#897e6dc947ab143da3eb05fd72cc874b9bd69304"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/storage-substrate@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/storage-substrate/-/storage-substrate-0.14.3.tgz#6989885362d5446e03c4ca3af4cadc82e7e828f1"
+"@polkadot/storage-substrate@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/storage-substrate/-/storage-substrate-0.15.8.tgz#1ef3442b369b1b537455a287e3d2f808ac2bba3f"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/storage" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/storage" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/storage@^0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/storage/-/storage-0.14.3.tgz#3cf2d28eeb711b6add92cfe9778b0e7f140f3547"
+"@polkadot/storage@^0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/storage/-/storage-0.15.8.tgz#a437074277eff576b468f921149fca612379a1df"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/params" "^0.14.3"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/params" "^0.15.8"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/ui-identicon@^0.12.3":
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-identicon/-/ui-identicon-0.12.3.tgz#a95188140fca40e245964a42b3368e240d4f52ad"
+"@polkadot/ui-identicon@^0.13.4":
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-identicon/-/ui-identicon-0.13.4.tgz#c2b854825e2ece811163514dac7a733dfc887039"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
     color "^3.0.0"
 
-"@polkadot/ui-react-rx@^0.12.3":
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-react-rx/-/ui-react-rx-0.12.3.tgz#fa5a6a77c9613316c75c8d1ae490d8bb3cd09a9c"
+"@polkadot/ui-react-rx@^0.13.4":
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-react-rx/-/ui-react-rx-0.13.4.tgz#23a01099b50619b761dcfbafa910e59e75b03b94"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/api-jsonrpc" "^0.11.3"
-    "@polkadot/api-provider" "^0.11.3"
-    "@polkadot/api-rx" "^0.11.3"
-    "@polkadot/params" "^0.14.3"
-    "@polkadot/primitives" "^0.14.3"
-    "@polkadot/storage" "^0.14.3"
-    "@polkadot/storage-substrate" "^0.14.3"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/api-provider" "^0.12.4"
+    "@polkadot/api-rx" "^0.12.4"
+    "@polkadot/jsonrpc" "^0.15.8"
+    "@polkadot/params" "^0.15.8"
+    "@polkadot/primitives" "^0.15.8"
+    "@polkadot/storage" "^0.15.8"
+    "@polkadot/storage-substrate" "^0.15.8"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/ui-react@^0.12.3":
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-react/-/ui-react-0.12.3.tgz#994031d994de8e2c8fb65d4807aaf019f11007e1"
+"@polkadot/ui-react@^0.13.4":
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-react/-/ui-react-0.13.4.tgz#4e60851400d738129585f965929095f5cdedd0cc"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/ui-identicon" "^0.12.3"
+    "@polkadot/ui-identicon" "^0.13.4"
 
-"@polkadot/util-crypto@^0.20.5":
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-0.20.5.tgz#6317f15d1bbd2314e2e08e28fd236e548b1ee731"
+"@polkadot/util-crypto@^0.21.3":
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-0.21.3.tgz#96711c0c8f95b98bcffe140086d277fa1ef94676"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/util" "^0.21.3"
     blakejs "^1.1.0"
     js-sha3 "^0.7.0"
     tweetnacl "^1.0.0"
     xxhashjs "^0.2.2"
 
-"@polkadot/util-keyring@^0.20.5":
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/@polkadot/util-keyring/-/util-keyring-0.20.5.tgz#eec652706e3036d43d73a8d49155b2f868fab0d3"
+"@polkadot/util-keyring@^0.21.3":
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/util-keyring/-/util-keyring-0.21.3.tgz#4b52134505af3cb4a0280412a5c595d4b6f7f9ec"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/util" "^0.20.5"
-    "@polkadot/util-crypto" "^0.20.5"
+    "@polkadot/util" "^0.21.3"
+    "@polkadot/util-crypto" "^0.21.3"
     bs58 "^4.0.1"
 
-"@polkadot/util-rlp@^0.20.5":
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/@polkadot/util-rlp/-/util-rlp-0.20.5.tgz#c82638652215d8f0fce91637f46ebbbdc561f5bf"
+"@polkadot/util-rlp@^0.21.3":
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/util-rlp/-/util-rlp-0.21.3.tgz#388c96e733087505072d6cbe329bb3ec46922d46"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/util" "^0.20.5"
+    "@polkadot/util" "^0.21.3"
 
-"@polkadot/util-triehash@^0.20.5":
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/@polkadot/util-triehash/-/util-triehash-0.20.5.tgz#99bddb80abe4d6fc159ec5cb8aac13841e845eee"
+"@polkadot/util-triehash@^0.21.3":
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/util-triehash/-/util-triehash-0.21.3.tgz#e86d374dc60ddce81b219130ffcb0611d6a59ffe"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
-    "@polkadot/util" "^0.20.5"
-    "@polkadot/util-crypto" "^0.20.5"
-    "@polkadot/util-rlp" "^0.20.5"
+    "@polkadot/util" "^0.21.3"
+    "@polkadot/util-crypto" "^0.21.3"
+    "@polkadot/util-rlp" "^0.21.3"
 
-"@polkadot/util@^0.20.5":
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-0.20.5.tgz#b5a74e79d24ee5421a337443c5a2e1f5a6e3a1e1"
+"@polkadot/util@^0.21.3":
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-0.21.3.tgz#8b1151a7b80156aefe1ac4a4a81642119a1b6bed"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.47"
     bn.js "^4.11.8"