From baf3dc6688dd0e889d3335c0ede5f9f5fe76d263 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 17 Apr 2018 17:28:19 +0200
Subject: [PATCH 01/16] s/content-testing/app-testing/

---
 packages/{content-testing => app-testing}/package.json          | 2 +-
 packages/{content-testing => app-testing}/src/Body/Body.css     | 0
 packages/{content-testing => app-testing}/src/Body/index.js     | 0
 .../src/InputAddress/InputAddress.css                           | 0
 .../src/InputAddress/PairDisplay.css                            | 0
 .../src/InputAddress/PairDisplay.js                             | 0
 .../{content-testing => app-testing}/src/InputAddress/index.js  | 0
 packages/{content-testing => app-testing}/src/index.js          | 0
 packages/{content-testing => app-testing}/src/keyring.js        | 0
 packages/{content-testing => app-testing}/src/subject/addr.js   | 0
 .../src/subject/addrRecipient.js                                | 0
 .../{content-testing => app-testing}/src/subject/addrSender.js  | 0
 packages/portal/package.json                                    | 2 +-
 packages/portal/src/routes/testing.js                           | 2 +-
 14 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/{content-testing => app-testing}/package.json (94%)
 rename packages/{content-testing => app-testing}/src/Body/Body.css (100%)
 rename packages/{content-testing => app-testing}/src/Body/index.js (100%)
 rename packages/{content-testing => app-testing}/src/InputAddress/InputAddress.css (100%)
 rename packages/{content-testing => app-testing}/src/InputAddress/PairDisplay.css (100%)
 rename packages/{content-testing => app-testing}/src/InputAddress/PairDisplay.js (100%)
 rename packages/{content-testing => app-testing}/src/InputAddress/index.js (100%)
 rename packages/{content-testing => app-testing}/src/index.js (100%)
 rename packages/{content-testing => app-testing}/src/keyring.js (100%)
 rename packages/{content-testing => app-testing}/src/subject/addr.js (100%)
 rename packages/{content-testing => app-testing}/src/subject/addrRecipient.js (100%)
 rename packages/{content-testing => app-testing}/src/subject/addrSender.js (100%)

diff --git a/packages/content-testing/package.json b/packages/app-testing/package.json
similarity index 94%
rename from packages/content-testing/package.json
rename to packages/app-testing/package.json
index 1b467e1e7e..3e55387a62 100644
--- a/packages/content-testing/package.json
+++ b/packages/app-testing/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@polkadot/content-testing",
+  "name": "@polkadot/app-testing",
   "version": "0.1.0",
   "main": "src/index.js",
   "repository": "https://github.com/polkadot-js/portal.git",
diff --git a/packages/content-testing/src/Body/Body.css b/packages/app-testing/src/Body/Body.css
similarity index 100%
rename from packages/content-testing/src/Body/Body.css
rename to packages/app-testing/src/Body/Body.css
diff --git a/packages/content-testing/src/Body/index.js b/packages/app-testing/src/Body/index.js
similarity index 100%
rename from packages/content-testing/src/Body/index.js
rename to packages/app-testing/src/Body/index.js
diff --git a/packages/content-testing/src/InputAddress/InputAddress.css b/packages/app-testing/src/InputAddress/InputAddress.css
similarity index 100%
rename from packages/content-testing/src/InputAddress/InputAddress.css
rename to packages/app-testing/src/InputAddress/InputAddress.css
diff --git a/packages/content-testing/src/InputAddress/PairDisplay.css b/packages/app-testing/src/InputAddress/PairDisplay.css
similarity index 100%
rename from packages/content-testing/src/InputAddress/PairDisplay.css
rename to packages/app-testing/src/InputAddress/PairDisplay.css
diff --git a/packages/content-testing/src/InputAddress/PairDisplay.js b/packages/app-testing/src/InputAddress/PairDisplay.js
similarity index 100%
rename from packages/content-testing/src/InputAddress/PairDisplay.js
rename to packages/app-testing/src/InputAddress/PairDisplay.js
diff --git a/packages/content-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
similarity index 100%
rename from packages/content-testing/src/InputAddress/index.js
rename to packages/app-testing/src/InputAddress/index.js
diff --git a/packages/content-testing/src/index.js b/packages/app-testing/src/index.js
similarity index 100%
rename from packages/content-testing/src/index.js
rename to packages/app-testing/src/index.js
diff --git a/packages/content-testing/src/keyring.js b/packages/app-testing/src/keyring.js
similarity index 100%
rename from packages/content-testing/src/keyring.js
rename to packages/app-testing/src/keyring.js
diff --git a/packages/content-testing/src/subject/addr.js b/packages/app-testing/src/subject/addr.js
similarity index 100%
rename from packages/content-testing/src/subject/addr.js
rename to packages/app-testing/src/subject/addr.js
diff --git a/packages/content-testing/src/subject/addrRecipient.js b/packages/app-testing/src/subject/addrRecipient.js
similarity index 100%
rename from packages/content-testing/src/subject/addrRecipient.js
rename to packages/app-testing/src/subject/addrRecipient.js
diff --git a/packages/content-testing/src/subject/addrSender.js b/packages/app-testing/src/subject/addrSender.js
similarity index 100%
rename from packages/content-testing/src/subject/addrSender.js
rename to packages/app-testing/src/subject/addrSender.js
diff --git a/packages/portal/package.json b/packages/portal/package.json
index a371ad111f..f9b29c8b4e 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -14,7 +14,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/content-testing": "^0.1.0",
+    "@polkadot/app-testing": "^0.1.0",
     "@polkadot/ui-react": "^0.9.10",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
diff --git a/packages/portal/src/routes/testing.js b/packages/portal/src/routes/testing.js
index 99669a9fea..7902e55263 100644
--- a/packages/portal/src/routes/testing.js
+++ b/packages/portal/src/routes/testing.js
@@ -5,7 +5,7 @@
 
 import type { Routes } from '../types';
 
-import Testing from '@polkadot/content-testing';
+import Testing from '@polkadot/app-testing';
 
 export default ([
   {

From c4dcc9bb4a1d06cc5242e610cac24f9b663acb1b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 11:27:55 +0200
Subject: [PATCH 02/16] Basic transfer options on-screen

---
 packages/app-testing/package.json             |  2 +-
 packages/app-testing/src/Account/Account.css  |  6 ++
 packages/app-testing/src/Account/index.js     | 43 ++++++++++
 .../src/{Body/Body.css => App/App.css}        |  4 +-
 packages/app-testing/src/App/index.js         | 35 +++++++++
 packages/app-testing/src/Body/index.js        | 78 -------------------
 .../src/CallDisplay/CallDisplay.css           | 18 +++++
 packages/app-testing/src/CallDisplay/Error.js | 18 +++++
 packages/app-testing/src/CallDisplay/index.js | 49 ++++++++++++
 .../app-testing/src/CallSelect/CallSelect.css |  6 ++
 packages/app-testing/src/CallSelect/index.js  | 45 +++++++++++
 .../app-testing/src/InputAddress/index.js     | 13 ++--
 .../app-testing/src/Recipient/Recipient.css   |  6 ++
 packages/app-testing/src/Recipient/index.js   | 26 +++++++
 packages/app-testing/src/Sender/Sender.css    |  6 ++
 packages/app-testing/src/Sender/index.js      | 26 +++++++
 .../src/StakingTransfer/StakingTransfer.css   |  7 ++
 .../app-testing/src/StakingTransfer/index.js  | 38 +++++++++
 packages/app-testing/src/index.css            | 46 +++++++++++
 packages/app-testing/src/index.js             |  6 +-
 .../app-testing/src/subject/addrRecipient.js  |  4 +-
 .../app-testing/src/subject/addrSender.js     |  4 +-
 .../src/subject/{addr.js => base.js}          |  2 +-
 .../app-testing/src/subject/extrinsicName.js  | 10 +++
 packages/portal/package.json                  |  1 +
 packages/portal/src/index.js                  |  9 ++-
 yarn.lock                                     | 14 ++--
 27 files changed, 415 insertions(+), 107 deletions(-)
 create mode 100644 packages/app-testing/src/Account/Account.css
 create mode 100644 packages/app-testing/src/Account/index.js
 rename packages/app-testing/src/{Body/Body.css => App/App.css} (83%)
 create mode 100644 packages/app-testing/src/App/index.js
 delete mode 100644 packages/app-testing/src/Body/index.js
 create mode 100644 packages/app-testing/src/CallDisplay/CallDisplay.css
 create mode 100644 packages/app-testing/src/CallDisplay/Error.js
 create mode 100644 packages/app-testing/src/CallDisplay/index.js
 create mode 100644 packages/app-testing/src/CallSelect/CallSelect.css
 create mode 100644 packages/app-testing/src/CallSelect/index.js
 create mode 100644 packages/app-testing/src/Recipient/Recipient.css
 create mode 100644 packages/app-testing/src/Recipient/index.js
 create mode 100644 packages/app-testing/src/Sender/Sender.css
 create mode 100644 packages/app-testing/src/Sender/index.js
 create mode 100644 packages/app-testing/src/StakingTransfer/StakingTransfer.css
 create mode 100644 packages/app-testing/src/StakingTransfer/index.js
 create mode 100644 packages/app-testing/src/index.css
 rename packages/app-testing/src/subject/{addr.js => base.js} (88%)
 create mode 100644 packages/app-testing/src/subject/extrinsicName.js

diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index 3e55387a62..69cec0558f 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.2",
+    "@polkadot/rx-react": "^0.2.4",
     "@polkadot/ui-react": "^0.9.10",
     "@polkadot/util": "^0.18.6",
     "@polkadot/util-keyring": "^0.18.6",
diff --git a/packages/app-testing/src/Account/Account.css b/packages/app-testing/src/Account/Account.css
new file mode 100644
index 0000000000..3ed06821c3
--- /dev/null
+++ b/packages/app-testing/src/Account/Account.css
@@ -0,0 +1,6 @@
+/* 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. */
+
+.testing--Account {
+}
diff --git a/packages/app-testing/src/Account/index.js b/packages/app-testing/src/Account/index.js
new file mode 100644
index 0000000000..4d80301e4a
--- /dev/null
+++ b/packages/app-testing/src/Account/index.js
@@ -0,0 +1,43 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './Account.css';
+
+import React from 'react';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+import Balance from '@polkadot/rx-react/Balance';
+import withObservableParams from '@polkadot/rx-react/with/observableParams';
+
+import InputAddress from '../InputAddress';
+
+type Props = BaseProps & {
+  label: string,
+  subject: rxjs$Subject
+};
+
+export default function Account ({ className, label, subject, style }: Props) {
+  const AccountBalance = withObservableParams(Balance, subject, ({ publicKey }: KeyringPair): Uint8Array => publicKey());
+
+  return (
+    <div
+      className={['testing--Account', 'testing--split', className].join(' ')}
+      style={style}
+    >
+      <div className='large'>
+        <Label>{label}</Label>
+        <InputAddress
+          placeholder='0x...'
+          subject={subject}
+        />
+      </div>
+      <div className='small'>
+        <Label>with an available balance of</Label>
+        <AccountBalance className='ui disabled dropdown selection' />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/Body/Body.css b/packages/app-testing/src/App/App.css
similarity index 83%
rename from packages/app-testing/src/Body/Body.css
rename to packages/app-testing/src/App/App.css
index 0cba4268bd..58d4ed6e44 100644
--- a/packages/app-testing/src/Body/Body.css
+++ b/packages/app-testing/src/App/App.css
@@ -2,11 +2,11 @@
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
 
-.testing--Body {
+.testing--App {
   padding: 0;
 }
 
-.testing--Body-BlockNumber {
+.testing--App-BestNumber {
   margin-bottom: 1rem;
   opacity: 0.5;
   text-align: right;
diff --git a/packages/app-testing/src/App/index.js b/packages/app-testing/src/App/index.js
new file mode 100644
index 0000000000..e1a0bf4c24
--- /dev/null
+++ b/packages/app-testing/src/App/index.js
@@ -0,0 +1,35 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './App.css';
+
+import React from 'react';
+import BestNumber from '@polkadot/rx-react/BestNumber';
+
+import CallDisplay from '../CallDisplay';
+import CallSelect from '../CallSelect';
+import Sender from '../Sender';
+
+type Props = BaseProps & {};
+
+export default function App ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--App', className].join(' ')}
+      style={style}
+    >
+      <BestNumber
+        className='testing--App-BestNumber'
+        label='best block #'
+      />
+
+      <Sender />
+      <CallSelect />
+      <CallDisplay />
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/Body/index.js b/packages/app-testing/src/Body/index.js
deleted file mode 100644
index 1999b0077d..0000000000
--- a/packages/app-testing/src/Body/index.js
+++ /dev/null
@@ -1,78 +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 { BaseProps } from '@polkadot/portal/types';
-
-import './Body.css';
-
-import React from 'react';
-// import { Observable } from 'rxjs/Observable';
-// import { from as fromObservable } from 'rxjs/observable/from';
-import Input from 'semantic-ui-react/dist/es/elements/Input';
-import Label from 'semantic-ui-react/dist/es/elements/Label';
-import Balance from '@polkadot/rx-react/Balance';
-import BlockNumber from '@polkadot/rx-react/BlockNumber';
-import ContextProvider from '@polkadot/rx-react/ContextProvider';
-import withObservableParams from '@polkadot/rx-react/with/observableParams';
-
-import InputAddress from '../InputAddress';
-import addrRecipient from '../subject/addrRecipient';
-import addrSender from '../subject/addrSender';
-
-type Props = BaseProps & {};
-
-function publicMap (pair: KeyringPair): Uint8Array {
-  return pair.publicKey();
-}
-
-const RecipientBalance = withObservableParams(Balance, addrRecipient, publicMap);
-const SenderBalance = withObservableParams(Balance, addrSender, publicMap);
-
-export default function Body ({ className, style }: Props) {
-  return (
-    <ContextProvider>
-      <div
-        className={['testing--Body', className].join(' ')}
-        style={style}
-      >
-        <BlockNumber
-          className='testing--Body-BlockNumber'
-          label='best block #'
-        />
-
-        <div>
-          <Label>using the selected account</Label>
-          <InputAddress
-            placeholder='0x...'
-            subject={addrSender}
-          />
-        </div>
-
-        <div>
-          <Label>with an available balance of</Label>
-          <SenderBalance className='ui disabled dropdown selection' />
-        </div>
-
-        <div>
-          <Label>send an amount of</Label>
-          <Input />
-        </div>
-
-        <div>
-          <Label>to the recipient</Label>
-          <InputAddress
-            placeholder='0x...'
-            subject={addrRecipient}
-          />
-        </div>
-
-        <div>
-          <Label>with an available balance of</Label>
-          <RecipientBalance className='ui disabled dropdown selection' />
-        </div>
-      </div>
-    </ContextProvider>
-  );
-}
diff --git a/packages/app-testing/src/CallDisplay/CallDisplay.css b/packages/app-testing/src/CallDisplay/CallDisplay.css
new file mode 100644
index 0000000000..f75b2471b6
--- /dev/null
+++ b/packages/app-testing/src/CallDisplay/CallDisplay.css
@@ -0,0 +1,18 @@
+/* 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. */
+
+.testing--CallDisplay {
+  margin-top: 1.5rem;
+}
+
+.testing--CallDisplay-error {
+  color: red;
+  opacity: 0.75;
+}
+
+.testing--CallDisplay-Component {
+  margin-bottom: 1.5rem;
+}
+
+.testing--CallDisplay-Button {}
diff --git a/packages/app-testing/src/CallDisplay/Error.js b/packages/app-testing/src/CallDisplay/Error.js
new file mode 100644
index 0000000000..67049c1064
--- /dev/null
+++ b/packages/app-testing/src/CallDisplay/Error.js
@@ -0,0 +1,18 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './CallDisplay.css';
+
+import React from 'react';
+
+export default function Error (props: BaseProps): React$Node {
+  return (
+    <div className='testing--CallDisplay-error'>
+      ERROR: Invalid or unimplemented extrinsic function
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
new file mode 100644
index 0000000000..9444d6904c
--- /dev/null
+++ b/packages/app-testing/src/CallDisplay/index.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 { BaseProps } from '@polkadot/portal/types';
+
+import './CallDisplay.css';
+
+import React from 'react';
+import Button from 'semantic-ui-react/dist/es/elements/Button';
+import withObservable from '@polkadot/rx-react/with/observable';
+
+import StakingTransfer from '../StakingTransfer';
+import extrinsicName from '../subject/extrinsicName';
+import ErrorComponent from './Error';
+
+type Props = BaseProps & {
+  value?: string;
+};
+
+const COMPONENTS = {
+  'staking_transfer': StakingTransfer
+};
+
+function CallDisplay ({ className, style, value }: Props) {
+  if (!value) {
+    return null;
+  }
+
+  const Component = COMPONENTS[value] || ErrorComponent;
+
+  return (
+    <div
+      className={['testing--CallDisplay', className].join(' ')}
+      style={style}
+    >
+      <Component className='testing--CallDisplay-Component' />
+      <Button
+        className='testing--CallDisplay-Execute'
+        primary
+      >
+        Submit Extrinsic
+      </Button>
+    </div>
+  );
+}
+
+export default withObservable(CallDisplay, extrinsicName);
diff --git a/packages/app-testing/src/CallSelect/CallSelect.css b/packages/app-testing/src/CallSelect/CallSelect.css
new file mode 100644
index 0000000000..ec0078f2f8
--- /dev/null
+++ b/packages/app-testing/src/CallSelect/CallSelect.css
@@ -0,0 +1,6 @@
+/* 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. */
+
+.testing--CallSelect {
+}
diff --git a/packages/app-testing/src/CallSelect/index.js b/packages/app-testing/src/CallSelect/index.js
new file mode 100644
index 0000000000..06cdd94da8
--- /dev/null
+++ b/packages/app-testing/src/CallSelect/index.js
@@ -0,0 +1,45 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './CallSelect.css';
+
+import React from 'react';
+import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+
+import extrinsicName from '../subject/extrinsicName';
+
+type Props = BaseProps & {};
+
+const callOptions = [
+  {
+    text: 'Staking Transfer',
+    value: 'staking_transfer'
+  }
+];
+
+const onChange = (_, { value }) => {
+  extrinsicName.next(value);
+};
+
+export default function CallSelect ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--CallSelect', 'testing--split', className].join(' ')}
+      style={style}
+    >
+      <div className='large'>
+        <Label>submit the following extrinsic</Label>
+        <Dropdown
+          selection
+          onChange={onChange}
+          options={callOptions}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
index 001dcb7941..5d4666ee92 100644
--- a/packages/app-testing/src/InputAddress/index.js
+++ b/packages/app-testing/src/InputAddress/index.js
@@ -28,23 +28,20 @@ const testOptions = Object.keys(keyring).map((name) => ({
   value: name
 }));
 
-export default function InputAddress (_props: Props): React$Node {
-  const props = Object.assign({}, _props, {
-    className: ['ui--InputAddress', _props.className].join(' ')
-  });
+export default function InputAddress (props: Props): React$Node {
   const onChange = (_, { value }) => {
-    if (_props.subject) {
-      _props.subject.next(keyring[value]);
+    if (props.subject) {
+      props.subject.next(keyring[value]);
     }
   };
 
   return (
     <Dropdown
-      search
+      {...props}
+      className={['ui--InputAddress', props.className].join(' ')}
       selection
       options={testOptions}
       onChange={onChange}
-      {...props}
     />
   );
 }
diff --git a/packages/app-testing/src/Recipient/Recipient.css b/packages/app-testing/src/Recipient/Recipient.css
new file mode 100644
index 0000000000..2f90f0c455
--- /dev/null
+++ b/packages/app-testing/src/Recipient/Recipient.css
@@ -0,0 +1,6 @@
+/* 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. */
+
+.testing--Recipient {
+}
diff --git a/packages/app-testing/src/Recipient/index.js b/packages/app-testing/src/Recipient/index.js
new file mode 100644
index 0000000000..7617f67b3c
--- /dev/null
+++ b/packages/app-testing/src/Recipient/index.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 { BaseProps } from '@polkadot/portal/types';
+
+import './Recipient.css';
+
+import React from 'react';
+
+import Account from '../Account';
+import addrRecipient from '../subject/addrRecipient';
+
+type Props = BaseProps & {};
+
+export default function Recipient (props: Props) {
+  return (
+    <Account
+      {...props}
+      className={['testing--Recipient', props.className].join(' ')}
+      label='to the recipient'
+      subject={addrRecipient}
+    />
+  );
+}
diff --git a/packages/app-testing/src/Sender/Sender.css b/packages/app-testing/src/Sender/Sender.css
new file mode 100644
index 0000000000..667eee6860
--- /dev/null
+++ b/packages/app-testing/src/Sender/Sender.css
@@ -0,0 +1,6 @@
+/* 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. */
+
+.testing--Sender {
+}
diff --git a/packages/app-testing/src/Sender/index.js b/packages/app-testing/src/Sender/index.js
new file mode 100644
index 0000000000..bdd3a26e2f
--- /dev/null
+++ b/packages/app-testing/src/Sender/index.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 { BaseProps } from '@polkadot/portal/types';
+
+import './Sender.css';
+
+import React from 'react';
+
+import Account from '../Account';
+import addrSender from '../subject/addrSender';
+
+type Props = BaseProps & {};
+
+export default function Sender (props: Props) {
+  return (
+    <Account
+      {...props}
+      className={['testing--Sender', props.className].join(' ')}
+      label='using the selected account'
+      subject={addrSender}
+    />
+  );
+}
diff --git a/packages/app-testing/src/StakingTransfer/StakingTransfer.css b/packages/app-testing/src/StakingTransfer/StakingTransfer.css
new file mode 100644
index 0000000000..19ba00e9fa
--- /dev/null
+++ b/packages/app-testing/src/StakingTransfer/StakingTransfer.css
@@ -0,0 +1,7 @@
+/* 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. */
+
+.testing--StakingTransfer {
+  margin-top: 1.5rem;
+}
diff --git a/packages/app-testing/src/StakingTransfer/index.js b/packages/app-testing/src/StakingTransfer/index.js
new file mode 100644
index 0000000000..e91348a283
--- /dev/null
+++ b/packages/app-testing/src/StakingTransfer/index.js
@@ -0,0 +1,38 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './StakingTransfer.css';
+
+import React from 'react';
+import Input from 'semantic-ui-react/dist/es/elements/Input';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+
+import Recipient from '../Recipient';
+
+type Props = BaseProps & {};
+
+export default function StakingTransfer ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--StakingTransfer', className].join(' ')}
+      style={style}
+    >
+      <div className='testing--split'>
+        <div className='small'>
+          <Label>sending an amount of</Label>
+          <Input
+            defaultValue={0}
+            min={0}
+            type='number'
+          />
+        </div>
+      </div>
+
+      <Recipient />
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/index.css b/packages/app-testing/src/index.css
new file mode 100644
index 0000000000..7a4f92ce21
--- /dev/null
+++ b/packages/app-testing/src/index.css
@@ -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. */
+
+.testing--full,
+.testing--split {
+  width: 100%;
+}
+
+.testing--split {
+  display:flex;
+  flex-wrap:wrap;
+  flex-direction:row;
+  justify-content:flex-start;
+  align-items:stretch;
+}
+
+.testing--split > div {
+  box-sizing: border-box;
+  padding-right: 0.5rem;
+}
+
+.testing--split > div.full {
+  flex: 1 100%;
+  min-width: 0;
+}
+
+.testing--split > div.large {
+  flex: 1 75%;
+  min-width: 0;
+}
+
+.testing--split > div.medium {
+  flex: 1 50%;
+  min-width: 0;
+}
+
+.testing--split > div.small {
+  flex: 1 25%;
+  min-width: 0;
+}
+
+.testing--split > div:only-child {
+  flex-grow: 0;
+  min-width: 0;
+}
diff --git a/packages/app-testing/src/index.js b/packages/app-testing/src/index.js
index c5bb4a1886..78afb1d81f 100644
--- a/packages/app-testing/src/index.js
+++ b/packages/app-testing/src/index.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import 'semantic-ui-css/semantic.min.css';
+import './index.css';
 
-import Body from './Body';
+import App from './App';
 
-export default Body;
+export default App;
diff --git a/packages/app-testing/src/subject/addrRecipient.js b/packages/app-testing/src/subject/addrRecipient.js
index 8dca03239f..3398f6e882 100644
--- a/packages/app-testing/src/subject/addrRecipient.js
+++ b/packages/app-testing/src/subject/addrRecipient.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import addr from './addr';
+import base from './base';
 
-const subject = addr();
+const subject = base();
 
 export default subject;
diff --git a/packages/app-testing/src/subject/addrSender.js b/packages/app-testing/src/subject/addrSender.js
index 8dca03239f..3398f6e882 100644
--- a/packages/app-testing/src/subject/addrSender.js
+++ b/packages/app-testing/src/subject/addrSender.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import addr from './addr';
+import base from './base';
 
-const subject = addr();
+const subject = base();
 
 export default subject;
diff --git a/packages/app-testing/src/subject/addr.js b/packages/app-testing/src/subject/base.js
similarity index 88%
rename from packages/app-testing/src/subject/addr.js
rename to packages/app-testing/src/subject/base.js
index e6b905ac93..8ac681a326 100644
--- a/packages/app-testing/src/subject/addr.js
+++ b/packages/app-testing/src/subject/base.js
@@ -5,6 +5,6 @@
 
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 
-export default function addr () {
+export default function base () {
   return new ReplaySubject(1);
 }
diff --git a/packages/app-testing/src/subject/extrinsicName.js b/packages/app-testing/src/subject/extrinsicName.js
new file mode 100644
index 0000000000..3398f6e882
--- /dev/null
+++ b/packages/app-testing/src/subject/extrinsicName.js
@@ -0,0 +1,10 @@
+// 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 base from './base';
+
+const subject = base();
+
+export default subject;
diff --git a/packages/portal/package.json b/packages/portal/package.json
index f9b29c8b4e..ba0f5c2a60 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@polkadot/app-testing": "^0.1.0",
+    "@polkadot/rx-react": "^0.2.4",
     "@polkadot/ui-react": "^0.9.10",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
diff --git a/packages/portal/src/index.js b/packages/portal/src/index.js
index d065191bc4..6eab3cc6dd 100644
--- a/packages/portal/src/index.js
+++ b/packages/portal/src/index.js
@@ -11,15 +11,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
 import { HashRouter } from 'react-router-dom';
+import ContextProvider from '@polkadot/rx-react/ContextProvider';
 
 import i18n from './i18n';
 import App from './App';
 
 ReactDOM.render(
   <I18nextProvider i18n={i18n}>
-    <HashRouter>
-      <App />
-    </HashRouter>
+    <ContextProvider>
+      <HashRouter>
+        <App />
+      </HashRouter>
+    </ContextProvider>
   </I18nextProvider>,
   // flowlint-next-line unclear-type:off
   ((document.getElementById('root'): any): Element)
diff --git a/yarn.lock b/yarn.lock
index f3da2662dc..fe96463171 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1299,19 +1299,19 @@
     "@polkadot/util" "^0.18.4"
     babel-runtime "^6.26.0"
 
-"@polkadot/rx-api@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.2.tgz#ee4e28fd2322e4469780d6f1d0e1529a6c95c258"
+"@polkadot/rx-api@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.4.tgz#e49c88d2d68a4e53d9d2ab0e307c564aa2ac5c20"
   dependencies:
     "@polkadot/api" "^0.8.14"
     "@polkadot/api-provider" "^0.8.14"
     rxjs "^5.5.10"
 
-"@polkadot/rx-react@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.2.tgz#8651dbf8cf7d9f32ebdb7d8d82011e96b92b0c54"
+"@polkadot/rx-react@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.4.tgz#fe142b564db5918c5207d8ae1cde86a3091caa84"
   dependencies:
-    "@polkadot/rx-api" "^0.2.2"
+    "@polkadot/rx-api" "^0.2.4"
     "@polkadot/util" "^0.18.6"
 
 "@polkadot/ui-identicon@^0.9.10":

From 926305834595fea8b379533022bde81b8b1e7b44 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 12:06:04 +0200
Subject: [PATCH 03/16] Basic Home app

---
 packages/app-home/package.json            | 23 +++++++++++++++++++
 packages/app-home/src/App/App.css         | 13 +++++++++++
 packages/app-home/src/App/index.js        | 27 +++++++++++++++++++++++
 packages/app-home/src/index.css           |  3 +++
 packages/app-home/src/index.js            | 10 +++++++++
 packages/app-testing/src/Account/index.js |  2 +-
 packages/app-testing/src/App/index.js     |  6 -----
 packages/portal/package.json              |  1 +
 packages/portal/src/routes/home.js        | 22 ++++++++++++++++++
 packages/portal/src/routes/index.js       |  6 ++---
 packages/portal/src/routes/testing.js     |  4 ++--
 11 files changed, 105 insertions(+), 12 deletions(-)
 create mode 100644 packages/app-home/package.json
 create mode 100644 packages/app-home/src/App/App.css
 create mode 100644 packages/app-home/src/App/index.js
 create mode 100644 packages/app-home/src/index.css
 create mode 100644 packages/app-home/src/index.js
 create mode 100644 packages/portal/src/routes/home.js

diff --git a/packages/app-home/package.json b/packages/app-home/package.json
new file mode 100644
index 0000000000..8c3021bec5
--- /dev/null
+++ b/packages/app-home/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@polkadot/app-home",
+  "version": "0.1.0",
+  "main": "src/index.js",
+  "repository": "https://github.com/polkadot-js/portal.git",
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "license": "ISC",
+  "private": true,
+  "scripts": {
+    "build": "react-scripts build",
+    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jsdom --coverage"
+  },
+  "devDependencies": {
+    "@polkadot/rx-react": "^0.2.4",
+    "@polkadot/util": "^0.18.6",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "semantic-ui-css": "^2.3.1",
+    "semantic-ui-react": "^0.79.1"
+  }
+}
diff --git a/packages/app-home/src/App/App.css b/packages/app-home/src/App/App.css
new file mode 100644
index 0000000000..844d1bf7ea
--- /dev/null
+++ b/packages/app-home/src/App/App.css
@@ -0,0 +1,13 @@
+/* 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. */
+
+.home--App {}
+
+.home--App-BestNumber {
+  font-size: 3rem;
+  line-height: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+  text-align: right;
+}
diff --git a/packages/app-home/src/App/index.js b/packages/app-home/src/App/index.js
new file mode 100644
index 0000000000..20e1d50a9e
--- /dev/null
+++ b/packages/app-home/src/App/index.js
@@ -0,0 +1,27 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './App.css';
+
+import React from 'react';
+import BestNumber from '@polkadot/rx-react/BestNumber';
+
+type Props = BaseProps & {};
+
+export default function App ({ className, style }: Props) {
+  return (
+    <div
+      className={['home--App', className].join(' ')}
+      style={style}
+    >
+      <BestNumber
+        className='home--App-BestNumber'
+        label='#'
+      />
+    </div>
+  );
+}
diff --git a/packages/app-home/src/index.css b/packages/app-home/src/index.css
new file mode 100644
index 0000000000..4a7a50b8f0
--- /dev/null
+++ b/packages/app-home/src/index.css
@@ -0,0 +1,3 @@
+/* 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. */
diff --git a/packages/app-home/src/index.js b/packages/app-home/src/index.js
new file mode 100644
index 0000000000..78afb1d81f
--- /dev/null
+++ b/packages/app-home/src/index.js
@@ -0,0 +1,10 @@
+// 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 './index.css';
+
+import App from './App';
+
+export default App;
diff --git a/packages/app-testing/src/Account/index.js b/packages/app-testing/src/Account/index.js
index 4d80301e4a..6df5579b3f 100644
--- a/packages/app-testing/src/Account/index.js
+++ b/packages/app-testing/src/Account/index.js
@@ -16,7 +16,7 @@ import InputAddress from '../InputAddress';
 
 type Props = BaseProps & {
   label: string,
-  subject: rxjs$Subject
+  subject: rxjs$BehaviorSubject
 };
 
 export default function Account ({ className, label, subject, style }: Props) {
diff --git a/packages/app-testing/src/App/index.js b/packages/app-testing/src/App/index.js
index e1a0bf4c24..dfc8785fdd 100644
--- a/packages/app-testing/src/App/index.js
+++ b/packages/app-testing/src/App/index.js
@@ -8,7 +8,6 @@ import type { BaseProps } from '@polkadot/portal/types';
 import './App.css';
 
 import React from 'react';
-import BestNumber from '@polkadot/rx-react/BestNumber';
 
 import CallDisplay from '../CallDisplay';
 import CallSelect from '../CallSelect';
@@ -22,11 +21,6 @@ export default function App ({ className, style }: Props) {
       className={['testing--App', className].join(' ')}
       style={style}
     >
-      <BestNumber
-        className='testing--App-BestNumber'
-        label='best block #'
-      />
-
       <Sender />
       <CallSelect />
       <CallDisplay />
diff --git a/packages/portal/package.json b/packages/portal/package.json
index ba0f5c2a60..de53e69f09 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -14,6 +14,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
+    "@polkadot/app-home": "^0.1.0",
     "@polkadot/app-testing": "^0.1.0",
     "@polkadot/rx-react": "^0.2.4",
     "@polkadot/ui-react": "^0.9.10",
diff --git a/packages/portal/src/routes/home.js b/packages/portal/src/routes/home.js
new file mode 100644
index 0000000000..52754f4c68
--- /dev/null
+++ b/packages/portal/src/routes/home.js
@@ -0,0 +1,22 @@
+// 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 Home from '@polkadot/app-home';
+
+export default ([
+  {
+    component: Home,
+    i18n: {
+      defaultValue: 'Home'
+    },
+    icon: 'home',
+    isExact: true,
+    isHidden: false,
+    key: 'home',
+    path: '/'
+  }
+]: Routes);
diff --git a/packages/portal/src/routes/index.js b/packages/portal/src/routes/index.js
index 27bca2bf2a..abbdfb0789 100644
--- a/packages/portal/src/routes/index.js
+++ b/packages/portal/src/routes/index.js
@@ -6,11 +6,11 @@
 import type { Routes } from '../types';
 
 // import accounts from './accounts';
-// import home from './home';
+import home from './home';
 // import settings from './settings';
 import testing from './testing';
 
 export default (([].concat(
-  testing
-  // , home, accounts, settings
+  home, testing
+  // , accounts, settings
 )): Routes);
diff --git a/packages/portal/src/routes/testing.js b/packages/portal/src/routes/testing.js
index 7902e55263..d8d74f0a89 100644
--- a/packages/portal/src/routes/testing.js
+++ b/packages/portal/src/routes/testing.js
@@ -14,9 +14,9 @@ export default ([
       defaultValue: 'Testing'
     },
     icon: 'braille',
-    isExact: true,
+    isExact: false,
     isHidden: false,
     key: 'testing',
-    path: '/'
+    path: '/testing'
   }
 ]: Routes);

From 2e7c858ce91dc32ae41148af428918ca75c269af Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 16:44:20 +0200
Subject: [PATCH 04/16] Nonce displayed & updated

---
 packages/app-home/package.json                |  2 +-
 packages/app-testing/package.json             |  2 +-
 packages/app-testing/src/Account/index.js     |  2 +-
 packages/app-testing/src/CallSelect/index.js  | 17 ++++---
 .../app-testing/src/InputAddress/index.js     |  2 +-
 packages/app-testing/src/Sender/index.js      | 34 +++++++++++--
 packages/app-testing/src/calls/consensus.js   |  9 ++++
 packages/app-testing/src/calls/council.js     |  9 ++++
 .../app-testing/src/calls/councilVoting.js    |  9 ++++
 packages/app-testing/src/calls/democracy.js   |  9 ++++
 packages/app-testing/src/calls/index.js       | 48 +++++++++++++++++++
 packages/app-testing/src/calls/session.js     |  9 ++++
 packages/app-testing/src/calls/staking.js     | 21 ++++++++
 packages/app-testing/src/calls/types.js       | 18 +++++++
 packages/app-testing/src/encode/index.js      | 33 +++++++++++++
 packages/app-testing/src/encode/param.js      | 23 +++++++++
 packages/app-testing/src/encode/params.js     | 17 +++++++
 packages/app-testing/src/index.css            | 13 ++---
 packages/app-testing/src/subject/addr.js      | 21 ++++++++
 .../app-testing/src/subject/addrRecipient.js  |  4 +-
 .../app-testing/src/subject/addrSender.js     |  4 +-
 .../app-testing/src/subject/extrinsicName.js  |  4 +-
 .../src/subject/{base.js => nonceSender.js}   |  9 ++--
 packages/portal/package.json                  |  2 +-
 yarn.lock                                     | 14 +++---
 25 files changed, 293 insertions(+), 42 deletions(-)
 create mode 100644 packages/app-testing/src/calls/consensus.js
 create mode 100644 packages/app-testing/src/calls/council.js
 create mode 100644 packages/app-testing/src/calls/councilVoting.js
 create mode 100644 packages/app-testing/src/calls/democracy.js
 create mode 100644 packages/app-testing/src/calls/index.js
 create mode 100644 packages/app-testing/src/calls/session.js
 create mode 100644 packages/app-testing/src/calls/staking.js
 create mode 100644 packages/app-testing/src/calls/types.js
 create mode 100644 packages/app-testing/src/encode/index.js
 create mode 100644 packages/app-testing/src/encode/param.js
 create mode 100644 packages/app-testing/src/encode/params.js
 create mode 100644 packages/app-testing/src/subject/addr.js
 rename packages/app-testing/src/subject/{base.js => nonceSender.js} (66%)

diff --git a/packages/app-home/package.json b/packages/app-home/package.json
index 8c3021bec5..c62d3b603c 100644
--- a/packages/app-home/package.json
+++ b/packages/app-home/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.4",
+    "@polkadot/rx-react": "^0.2.7",
     "@polkadot/util": "^0.18.6",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index 69cec0558f..0552a4824d 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.4",
+    "@polkadot/rx-react": "^0.2.7",
     "@polkadot/ui-react": "^0.9.10",
     "@polkadot/util": "^0.18.6",
     "@polkadot/util-keyring": "^0.18.6",
diff --git a/packages/app-testing/src/Account/index.js b/packages/app-testing/src/Account/index.js
index 6df5579b3f..9673ca71d2 100644
--- a/packages/app-testing/src/Account/index.js
+++ b/packages/app-testing/src/Account/index.js
@@ -20,7 +20,7 @@ type Props = BaseProps & {
 };
 
 export default function Account ({ className, label, subject, style }: Props) {
-  const AccountBalance = withObservableParams(Balance, subject, ({ publicKey }: KeyringPair): Uint8Array => publicKey());
+  const AccountBalance = withObservableParams(Balance, subject);
 
   return (
     <div
diff --git a/packages/app-testing/src/CallSelect/index.js b/packages/app-testing/src/CallSelect/index.js
index 06cdd94da8..54e012e867 100644
--- a/packages/app-testing/src/CallSelect/index.js
+++ b/packages/app-testing/src/CallSelect/index.js
@@ -12,20 +12,19 @@ import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
 import extrinsicName from '../subject/extrinsicName';
+import calls from '../calls';
 
 type Props = BaseProps & {};
 
-const callOptions = [
-  {
-    text: 'Staking Transfer',
-    value: 'staking_transfer'
-  }
-];
-
-const onChange = (_, { value }) => {
+const onChange = (event, { value }) => {
   extrinsicName.next(value);
 };
 
+const options = Object.keys(calls).map((value) => ({
+  text: calls[value].description,
+  value
+}));
+
 export default function CallSelect ({ className, style }: Props) {
   return (
     <div
@@ -37,7 +36,7 @@ export default function CallSelect ({ className, style }: Props) {
         <Dropdown
           selection
           onChange={onChange}
-          options={callOptions}
+          options={options}
         />
       </div>
     </div>
diff --git a/packages/app-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
index 5d4666ee92..8c81020222 100644
--- a/packages/app-testing/src/InputAddress/index.js
+++ b/packages/app-testing/src/InputAddress/index.js
@@ -29,7 +29,7 @@ const testOptions = Object.keys(keyring).map((name) => ({
 }));
 
 export default function InputAddress (props: Props): React$Node {
-  const onChange = (_, { value }) => {
+  const onChange = (event, { value }) => {
     if (props.subject) {
       props.subject.next(keyring[value]);
     }
diff --git a/packages/app-testing/src/Sender/index.js b/packages/app-testing/src/Sender/index.js
index bdd3a26e2f..38687829f8 100644
--- a/packages/app-testing/src/Sender/index.js
+++ b/packages/app-testing/src/Sender/index.js
@@ -8,19 +8,47 @@ import type { BaseProps } from '@polkadot/portal/types';
 import './Sender.css';
 
 import React from 'react';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+import Nonce from '@polkadot/rx-react/Nonce';
+import withObservableParams from '@polkadot/rx-react/with/observableParams';
+import u8aToBn from '@polkadot/util/u8a/toBn';
 
 import Account from '../Account';
 import addrSender from '../subject/addrSender';
+import nonceSender from '../subject/nonceSender';
 
 type Props = BaseProps & {};
 
+const onNonceChange = (value: Uint8Array) => {
+  if (!value || value.length !== 8) {
+    return;
+  }
+
+  const bn = u8aToBn(value, 64, true);
+
+  console.log('next nonce', bn.toString());
+
+  nonceSender.next(bn);
+};
+
 export default function Sender (props: Props) {
-  return (
+  const SenderNonce = withObservableParams(Nonce, addrSender);
+
+  return [
     <Account
       {...props}
       className={['testing--Sender', props.className].join(' ')}
       label='using the selected account'
       subject={addrSender}
-    />
-  );
+    />,
+    <div className='testing--split'>
+      <div className='small'>
+        <Label>with an future index</Label>
+        <SenderNonce
+          className='ui disabled dropdown selection'
+          onChange={onNonceChange}
+        />
+      </div>
+    </div>
+  ];
 }
diff --git a/packages/app-testing/src/calls/consensus.js b/packages/app-testing/src/calls/consensus.js
new file mode 100644
index 0000000000..d68f00c2f8
--- /dev/null
+++ b/packages/app-testing/src/calls/consensus.js
@@ -0,0 +1,9 @@
+// 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 { Calls } from './types';
+
+module.exports = ({
+}: Calls);
diff --git a/packages/app-testing/src/calls/council.js b/packages/app-testing/src/calls/council.js
new file mode 100644
index 0000000000..d68f00c2f8
--- /dev/null
+++ b/packages/app-testing/src/calls/council.js
@@ -0,0 +1,9 @@
+// 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 { Calls } from './types';
+
+module.exports = ({
+}: Calls);
diff --git a/packages/app-testing/src/calls/councilVoting.js b/packages/app-testing/src/calls/councilVoting.js
new file mode 100644
index 0000000000..d68f00c2f8
--- /dev/null
+++ b/packages/app-testing/src/calls/councilVoting.js
@@ -0,0 +1,9 @@
+// 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 { Calls } from './types';
+
+module.exports = ({
+}: Calls);
diff --git a/packages/app-testing/src/calls/democracy.js b/packages/app-testing/src/calls/democracy.js
new file mode 100644
index 0000000000..d68f00c2f8
--- /dev/null
+++ b/packages/app-testing/src/calls/democracy.js
@@ -0,0 +1,9 @@
+// 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 { Calls } from './types';
+
+module.exports = ({
+}: Calls);
diff --git a/packages/app-testing/src/calls/index.js b/packages/app-testing/src/calls/index.js
new file mode 100644
index 0000000000..9357a57928
--- /dev/null
+++ b/packages/app-testing/src/calls/index.js
@@ -0,0 +1,48 @@
+// 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 { Calls } from './types';
+
+const bnToU8a = require('@polkadot/util/bn/toU8a');
+const u8aConcat = require('@polkadot/util/u8a/concat');
+
+const consensus = require('./consensus');
+const council = require('./council');
+const councilVoting = require('./councilVoting');
+const democracy = require('./democracy');
+const session = require('./session');
+const staking = require('./staking');
+
+const calls = {
+  consensus, // 0
+  session, // 1
+  staking, // 2
+  democracy, // 3
+  council, // 4
+  councilVoting // 5
+};
+
+const flattenned: Calls = Object
+  .keys(calls)
+  .reduce((flat, sectionName, index) => {
+    const section = calls[sectionName];
+    const sectionIndex = bnToU8a(index, 8);
+
+    Object
+      .keys(section)
+      .reduce((flat, method, index) => {
+        const name = `${sectionName}_${method}`;
+        const methodIndex = bnToU8a(index, 8);
+
+        flat[name] = section[method];
+        flat[name].index = u8aConcat(sectionIndex, methodIndex);
+
+        return flat;
+      }, flat);
+
+    return flat;
+  }, ({}: $Shape<FlatCalls>));
+
+module.exports = flattenned;
diff --git a/packages/app-testing/src/calls/session.js b/packages/app-testing/src/calls/session.js
new file mode 100644
index 0000000000..d68f00c2f8
--- /dev/null
+++ b/packages/app-testing/src/calls/session.js
@@ -0,0 +1,9 @@
+// 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 { Calls } from './types';
+
+module.exports = ({
+}: Calls);
diff --git a/packages/app-testing/src/calls/staking.js b/packages/app-testing/src/calls/staking.js
new file mode 100644
index 0000000000..3b325072cb
--- /dev/null
+++ b/packages/app-testing/src/calls/staking.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 { Calls } from './types';
+
+module.exports = ({
+  transfer: {
+    description: 'Staking Transfer',
+    params: ['AccountId', 'Balance']
+  },
+  stake: {
+    description: 'Stake',
+    params: []
+  },
+  unstake: {
+    description: 'Unstake',
+    params: []
+  }
+}: Calls);
diff --git a/packages/app-testing/src/calls/types.js b/packages/app-testing/src/calls/types.js
new file mode 100644
index 0000000000..e2bb50d4d1
--- /dev/null
+++ b/packages/app-testing/src/calls/types.js
@@ -0,0 +1,18 @@
+// 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
+
+export type Call$Type = 'AccountId' | 'Balance' | 'BlockNumber';
+
+export type Call$Params = Array<Call$Type>;
+
+export type Call = {
+  description: string,
+  index: Uint8Array,
+  params: Call$Params
+};
+
+export type Calls = {
+  [string]: $Shape<Call>
+}
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
new file mode 100644
index 0000000000..f574c63851
--- /dev/null
+++ b/packages/app-testing/src/encode/index.js
@@ -0,0 +1,33 @@
+// 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 { Call } from '../calls/types';
+
+const bnToU8a = require('@polkadot/util/bn/toU8a');
+const u8aConcat = require('@polkadot/util/u8a/concat');
+const u8aToHex = require('@polkadot/util/u8a/toHex');
+
+const encodeParams = require('./params');
+
+// flowlint-next-line unclear-type:off
+module.exports = function encode (sender: KeyringPair, nonce: number | BN, { index, params }: Call, values: Array<mixed>) {
+  const encodedParams = encodeParams(values, params);
+  const message = u8aConcat(
+    sender.publicKey(),
+    bnToU8a(nonce, 64, true),
+    index,
+    encodedParams
+  );
+  const signature = sender.sign(message);
+
+  console.log('message', u8aToHex(message));
+  console.log('signature', u8aToHex(signature));
+
+  return {
+    message,
+    signature
+  };
+};
diff --git a/packages/app-testing/src/encode/param.js b/packages/app-testing/src/encode/param.js
new file mode 100644
index 0000000000..1ca41ad4b4
--- /dev/null
+++ b/packages/app-testing/src/encode/param.js
@@ -0,0 +1,23 @@
+// 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 { Call$Type } from '../../calls/types';
+
+const bnToU8a = require('@polkadot/util/bn/toU8a');
+
+// flowlint-next-line unclear-type:off
+module.exports = function encodeValue (value: any, type: Call$Type): Uint8Array {
+  switch (type) {
+    case 'AccountId':
+      return value;
+
+    case 'Balance':
+    case 'BlockNumber':
+      return bnToU8a(value, 64, true);
+
+    default:
+      throw new Error(`Unable to encode value with type '${type}'`);
+  }
+};
diff --git a/packages/app-testing/src/encode/params.js b/packages/app-testing/src/encode/params.js
new file mode 100644
index 0000000000..b1de7a4153
--- /dev/null
+++ b/packages/app-testing/src/encode/params.js
@@ -0,0 +1,17 @@
+// 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 { Call$Params } from '../../calls/types';
+
+const u8aConcat = require('@polkadot/util/u8a/concat');
+
+const encodeParam = require('./param');
+
+// flowlint-next-line unclear-type:off
+module.exports = function encodeParams (values: Array<mixed>, params: Call$Params): Uint8Array {
+  return u8aConcat.apply(null, values.map((value, index) => {
+    return encodeParam(value, params[index]);
+  }));
+};
diff --git a/packages/app-testing/src/index.css b/packages/app-testing/src/index.css
index 7a4f92ce21..dcceb38721 100644
--- a/packages/app-testing/src/index.css
+++ b/packages/app-testing/src/index.css
@@ -21,26 +21,21 @@
 }
 
 .testing--split > div.full {
-  flex: 1 100%;
+  flex: 0 100%;
   min-width: 0;
 }
 
 .testing--split > div.large {
-  flex: 1 75%;
+  flex: 0 75%;
   min-width: 0;
 }
 
 .testing--split > div.medium {
-  flex: 1 50%;
+  flex: 0 50%;
   min-width: 0;
 }
 
 .testing--split > div.small {
-  flex: 1 25%;
-  min-width: 0;
-}
-
-.testing--split > div:only-child {
-  flex-grow: 0;
+  flex: 0 25%;
   min-width: 0;
 }
diff --git a/packages/app-testing/src/subject/addr.js b/packages/app-testing/src/subject/addr.js
new file mode 100644
index 0000000000..6ec66373fa
--- /dev/null
+++ b/packages/app-testing/src/subject/addr.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 { KeyringPair } from '@polkadot/uti-keyring/types';
+
+import { map } from 'rxjs/operators/map';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+
+export default function addr (): $rxjs$ReplaySubject {
+  return new ReplaySubject(1).pipe(
+    map((pair: KeyringPair) => {
+      if (!pair) {
+        return new Uint8Array([]);
+      }
+
+      return pair.publicKey();
+    })
+  );
+}
diff --git a/packages/app-testing/src/subject/addrRecipient.js b/packages/app-testing/src/subject/addrRecipient.js
index 3398f6e882..8dca03239f 100644
--- a/packages/app-testing/src/subject/addrRecipient.js
+++ b/packages/app-testing/src/subject/addrRecipient.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import base from './base';
+import addr from './addr';
 
-const subject = base();
+const subject = addr();
 
 export default subject;
diff --git a/packages/app-testing/src/subject/addrSender.js b/packages/app-testing/src/subject/addrSender.js
index 3398f6e882..8dca03239f 100644
--- a/packages/app-testing/src/subject/addrSender.js
+++ b/packages/app-testing/src/subject/addrSender.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import base from './base';
+import addr from './addr';
 
-const subject = base();
+const subject = addr();
 
 export default subject;
diff --git a/packages/app-testing/src/subject/extrinsicName.js b/packages/app-testing/src/subject/extrinsicName.js
index 3398f6e882..45630285c3 100644
--- a/packages/app-testing/src/subject/extrinsicName.js
+++ b/packages/app-testing/src/subject/extrinsicName.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import base from './base';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
 
-const subject = base();
+const subject = new ReplaySubject(1);
 
 export default subject;
diff --git a/packages/app-testing/src/subject/base.js b/packages/app-testing/src/subject/nonceSender.js
similarity index 66%
rename from packages/app-testing/src/subject/base.js
rename to packages/app-testing/src/subject/nonceSender.js
index 8ac681a326..8cbb250a87 100644
--- a/packages/app-testing/src/subject/base.js
+++ b/packages/app-testing/src/subject/nonceSender.js
@@ -3,8 +3,11 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+import BN from 'bn.js';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 
-export default function base () {
-  return new ReplaySubject(1);
-}
+const subject = new ReplaySubject(1);
+
+subject.next(new BN(0));
+
+export default subject;
diff --git a/packages/portal/package.json b/packages/portal/package.json
index de53e69f09..aea0f47b73 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@polkadot/app-home": "^0.1.0",
     "@polkadot/app-testing": "^0.1.0",
-    "@polkadot/rx-react": "^0.2.4",
+    "@polkadot/rx-react": "^0.2.7",
     "@polkadot/ui-react": "^0.9.10",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
diff --git a/yarn.lock b/yarn.lock
index fe96463171..e1a85e47cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1299,19 +1299,19 @@
     "@polkadot/util" "^0.18.4"
     babel-runtime "^6.26.0"
 
-"@polkadot/rx-api@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.4.tgz#e49c88d2d68a4e53d9d2ab0e307c564aa2ac5c20"
+"@polkadot/rx-api@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.7.tgz#aef716e7e8d3740746307331d242043c7694a8fd"
   dependencies:
     "@polkadot/api" "^0.8.14"
     "@polkadot/api-provider" "^0.8.14"
     rxjs "^5.5.10"
 
-"@polkadot/rx-react@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.4.tgz#fe142b564db5918c5207d8ae1cde86a3091caa84"
+"@polkadot/rx-react@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.7.tgz#5ec876ddf866e1e8ea2a70ddb484c1872102e2ac"
   dependencies:
-    "@polkadot/rx-api" "^0.2.4"
+    "@polkadot/rx-api" "^0.2.7"
     "@polkadot/util" "^0.18.6"
 
 "@polkadot/ui-identicon@^0.9.10":

From bc6dd912585bd32e38188cd32d4d2c89a6239bec Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 16:45:07 +0200
Subject: [PATCH 05/16] API move TODOs

---
 packages/app-testing/src/calls/index.js  | 2 ++
 packages/app-testing/src/encode/index.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/app-testing/src/calls/index.js b/packages/app-testing/src/calls/index.js
index 9357a57928..e1bd3d19d3 100644
--- a/packages/app-testing/src/calls/index.js
+++ b/packages/app-testing/src/calls/index.js
@@ -3,6 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+// TODO: Move to API
+
 import type { Calls } from './types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
index f574c63851..8e1f635ad8 100644
--- a/packages/app-testing/src/encode/index.js
+++ b/packages/app-testing/src/encode/index.js
@@ -3,6 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+// TODO: Move to API
+
 import type BN from 'bn.js';
 import type { Call } from '../calls/types';
 

From ddd4a0c3ff57b31590ef79711fef13f1dafc656d Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 17:23:43 +0200
Subject: [PATCH 06/16] StakingTransfer getValues

---
 packages/app-testing/src/Account/index.js     |  8 ++-
 packages/app-testing/src/App/index.js         |  2 +
 packages/app-testing/src/CallDisplay/index.js |  4 ++
 packages/app-testing/src/Nonce/Nonce.css      |  6 +++
 packages/app-testing/src/Nonce/index.js       | 51 +++++++++++++++++++
 packages/app-testing/src/Sender/index.js      | 34 ++-----------
 .../src/StakingTransfer/getValues.js          | 14 +++++
 .../app-testing/src/StakingTransfer/index.js  | 14 ++++-
 .../src/StakingTransfer/subject/amount.js     | 10 ++++
 packages/app-testing/src/subject/addr.js      | 21 --------
 .../app-testing/src/subject/addrRecipient.js  |  4 +-
 .../app-testing/src/subject/addrSender.js     |  4 +-
 12 files changed, 114 insertions(+), 58 deletions(-)
 create mode 100644 packages/app-testing/src/Nonce/Nonce.css
 create mode 100644 packages/app-testing/src/Nonce/index.js
 create mode 100644 packages/app-testing/src/StakingTransfer/getValues.js
 create mode 100644 packages/app-testing/src/StakingTransfer/subject/amount.js
 delete mode 100644 packages/app-testing/src/subject/addr.js

diff --git a/packages/app-testing/src/Account/index.js b/packages/app-testing/src/Account/index.js
index 9673ca71d2..b4806bf4ab 100644
--- a/packages/app-testing/src/Account/index.js
+++ b/packages/app-testing/src/Account/index.js
@@ -20,7 +20,13 @@ type Props = BaseProps & {
 };
 
 export default function Account ({ className, label, subject, style }: Props) {
-  const AccountBalance = withObservableParams(Balance, subject);
+  const AccountBalance = withObservableParams(Balance, subject, (pair: KeyringPair) => {
+    if (!pair) {
+      return new Uint8Array([]);
+    }
+
+    return pair.publicKey();
+  });
 
   return (
     <div
diff --git a/packages/app-testing/src/App/index.js b/packages/app-testing/src/App/index.js
index dfc8785fdd..3a14c088cc 100644
--- a/packages/app-testing/src/App/index.js
+++ b/packages/app-testing/src/App/index.js
@@ -11,6 +11,7 @@ import React from 'react';
 
 import CallDisplay from '../CallDisplay';
 import CallSelect from '../CallSelect';
+import Nonce from '../Nonce';
 import Sender from '../Sender';
 
 type Props = BaseProps & {};
@@ -23,6 +24,7 @@ export default function App ({ className, style }: Props) {
     >
       <Sender />
       <CallSelect />
+      <Nonce />
       <CallDisplay />
     </div>
   );
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index 9444d6904c..0e70fe7ea3 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -29,6 +29,9 @@ function CallDisplay ({ className, style, value }: Props) {
   }
 
   const Component = COMPONENTS[value] || ErrorComponent;
+  const onSubmit = () => {
+    console.log('getValues', Component.getValues());
+  };
 
   return (
     <div
@@ -38,6 +41,7 @@ function CallDisplay ({ className, style, value }: Props) {
       <Component className='testing--CallDisplay-Component' />
       <Button
         className='testing--CallDisplay-Execute'
+        onClick={onSubmit}
         primary
       >
         Submit Extrinsic
diff --git a/packages/app-testing/src/Nonce/Nonce.css b/packages/app-testing/src/Nonce/Nonce.css
new file mode 100644
index 0000000000..667eee6860
--- /dev/null
+++ b/packages/app-testing/src/Nonce/Nonce.css
@@ -0,0 +1,6 @@
+/* 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. */
+
+.testing--Sender {
+}
diff --git a/packages/app-testing/src/Nonce/index.js b/packages/app-testing/src/Nonce/index.js
new file mode 100644
index 0000000000..3ee3998d4c
--- /dev/null
+++ b/packages/app-testing/src/Nonce/index.js
@@ -0,0 +1,51 @@
+// 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 { BaseProps } from '@polkadot/portal/types';
+
+import './Nonce.css';
+
+import React from 'react';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+import RxNonce from '@polkadot/rx-react/Nonce';
+import withObservableParams from '@polkadot/rx-react/with/observableParams';
+import u8aToBn from '@polkadot/util/u8a/toBn';
+
+import addrSender from '../subject/addrSender';
+import nonceSender from '../subject/nonceSender';
+
+type Props = BaseProps & {};
+
+const SenderNonce = withObservableParams(RxNonce, addrSender, (pair: KeyringPair) => {
+  if (!pair) {
+    return new Uint8Array([]);
+  }
+
+  return pair.publicKey();
+});
+const onNonceChange = (value: Uint8Array) => {
+  if (!value || value.length !== 8) {
+    return;
+  }
+
+  nonceSender.next(u8aToBn(value, 64, true));
+};
+
+export default function Nonce ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--split', className].join(' ')}
+      style={style}
+    >
+      <div className='small'>
+        <Label>with an index</Label>
+        <SenderNonce
+          className='ui disabled dropdown selection'
+          onChange={onNonceChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/Sender/index.js b/packages/app-testing/src/Sender/index.js
index 38687829f8..bdd3a26e2f 100644
--- a/packages/app-testing/src/Sender/index.js
+++ b/packages/app-testing/src/Sender/index.js
@@ -8,47 +8,19 @@ import type { BaseProps } from '@polkadot/portal/types';
 import './Sender.css';
 
 import React from 'react';
-import Label from 'semantic-ui-react/dist/es/elements/Label';
-import Nonce from '@polkadot/rx-react/Nonce';
-import withObservableParams from '@polkadot/rx-react/with/observableParams';
-import u8aToBn from '@polkadot/util/u8a/toBn';
 
 import Account from '../Account';
 import addrSender from '../subject/addrSender';
-import nonceSender from '../subject/nonceSender';
 
 type Props = BaseProps & {};
 
-const onNonceChange = (value: Uint8Array) => {
-  if (!value || value.length !== 8) {
-    return;
-  }
-
-  const bn = u8aToBn(value, 64, true);
-
-  console.log('next nonce', bn.toString());
-
-  nonceSender.next(bn);
-};
-
 export default function Sender (props: Props) {
-  const SenderNonce = withObservableParams(Nonce, addrSender);
-
-  return [
+  return (
     <Account
       {...props}
       className={['testing--Sender', props.className].join(' ')}
       label='using the selected account'
       subject={addrSender}
-    />,
-    <div className='testing--split'>
-      <div className='small'>
-        <Label>with an future index</Label>
-        <SenderNonce
-          className='ui disabled dropdown selection'
-          onChange={onNonceChange}
-        />
-      </div>
-    </div>
-  ];
+    />
+  );
 }
diff --git a/packages/app-testing/src/StakingTransfer/getValues.js b/packages/app-testing/src/StakingTransfer/getValues.js
new file mode 100644
index 0000000000..5c9a92a80e
--- /dev/null
+++ b/packages/app-testing/src/StakingTransfer/getValues.js
@@ -0,0 +1,14 @@
+// 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 amount from './subject/amount';
+import addrRecipient from '../subject/addrRecipient';
+
+export default function getValues (): Array<mixed> {
+  return [
+    addrRecipient.getValue(),
+    amount.getValue()
+  ];
+}
diff --git a/packages/app-testing/src/StakingTransfer/index.js b/packages/app-testing/src/StakingTransfer/index.js
index e91348a283..14790d78ff 100644
--- a/packages/app-testing/src/StakingTransfer/index.js
+++ b/packages/app-testing/src/StakingTransfer/index.js
@@ -7,15 +7,22 @@ import type { BaseProps } from '@polkadot/portal/types';
 
 import './StakingTransfer.css';
 
+import BN from 'bn.js';
 import React from 'react';
 import Input from 'semantic-ui-react/dist/es/elements/Input';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
 import Recipient from '../Recipient';
+import getValues from './getValues';
+import amount from './subject/amount';
 
 type Props = BaseProps & {};
 
-export default function StakingTransfer ({ className, style }: Props) {
+const onChangeAmount = (event, { value }) => {
+  amount.next(new BN(value));
+};
+
+function StakingTransfer ({ className, style }: Props) {
   return (
     <div
       className={['testing--StakingTransfer', className].join(' ')}
@@ -27,6 +34,7 @@ export default function StakingTransfer ({ className, style }: Props) {
           <Input
             defaultValue={0}
             min={0}
+            onChange={onChangeAmount}
             type='number'
           />
         </div>
@@ -36,3 +44,7 @@ export default function StakingTransfer ({ className, style }: Props) {
     </div>
   );
 }
+
+StakingTransfer.getValues = getValues;
+
+export default StakingTransfer;
diff --git a/packages/app-testing/src/StakingTransfer/subject/amount.js b/packages/app-testing/src/StakingTransfer/subject/amount.js
new file mode 100644
index 0000000000..1e5f08c17b
--- /dev/null
+++ b/packages/app-testing/src/StakingTransfer/subject/amount.js
@@ -0,0 +1,10 @@
+// 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 { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+const subject = new BehaviorSubject();
+
+export default subject;
diff --git a/packages/app-testing/src/subject/addr.js b/packages/app-testing/src/subject/addr.js
deleted file mode 100644
index 6ec66373fa..0000000000
--- a/packages/app-testing/src/subject/addr.js
+++ /dev/null
@@ -1,21 +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 { KeyringPair } from '@polkadot/uti-keyring/types';
-
-import { map } from 'rxjs/operators/map';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-
-export default function addr (): $rxjs$ReplaySubject {
-  return new ReplaySubject(1).pipe(
-    map((pair: KeyringPair) => {
-      if (!pair) {
-        return new Uint8Array([]);
-      }
-
-      return pair.publicKey();
-    })
-  );
-}
diff --git a/packages/app-testing/src/subject/addrRecipient.js b/packages/app-testing/src/subject/addrRecipient.js
index 8dca03239f..1e5f08c17b 100644
--- a/packages/app-testing/src/subject/addrRecipient.js
+++ b/packages/app-testing/src/subject/addrRecipient.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import addr from './addr';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = addr();
+const subject = new BehaviorSubject();
 
 export default subject;
diff --git a/packages/app-testing/src/subject/addrSender.js b/packages/app-testing/src/subject/addrSender.js
index 8dca03239f..1e5f08c17b 100644
--- a/packages/app-testing/src/subject/addrSender.js
+++ b/packages/app-testing/src/subject/addrSender.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import addr from './addr';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = addr();
+const subject = new BehaviorSubject();
 
 export default subject;

From 0e2b6b9a8ecf513ce54b5f9d2103f9856792da2c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 17:45:35 +0200
Subject: [PATCH 07/16] Encoding works as expected

---
 packages/app-testing/src/CallDisplay/index.js      |  5 ++++-
 .../app-testing/src/StakingTransfer/getValues.js   |  2 +-
 .../src/StakingTransfer/subject/amount.js          |  3 ++-
 packages/app-testing/src/encode/index.js           | 14 ++++----------
 packages/app-testing/src/subject/extrinsicName.js  |  4 ++--
 packages/app-testing/src/subject/nonceSender.js    |  6 ++----
 6 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index 0e70fe7ea3..a9c27a400b 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -12,7 +12,10 @@ import Button from 'semantic-ui-react/dist/es/elements/Button';
 import withObservable from '@polkadot/rx-react/with/observable';
 
 import StakingTransfer from '../StakingTransfer';
+import encode from '../encode';
+import addrSender from '../subject/addrSender';
 import extrinsicName from '../subject/extrinsicName';
+import nonceSender from '../subject/nonceSender';
 import ErrorComponent from './Error';
 
 type Props = BaseProps & {
@@ -30,7 +33,7 @@ function CallDisplay ({ className, style, value }: Props) {
 
   const Component = COMPONENTS[value] || ErrorComponent;
   const onSubmit = () => {
-    console.log('getValues', Component.getValues());
+    encode(addrSender.getValue(), nonceSender.getValue(), value, Component.getValues());
   };
 
   return (
diff --git a/packages/app-testing/src/StakingTransfer/getValues.js b/packages/app-testing/src/StakingTransfer/getValues.js
index 5c9a92a80e..573dfc0e4d 100644
--- a/packages/app-testing/src/StakingTransfer/getValues.js
+++ b/packages/app-testing/src/StakingTransfer/getValues.js
@@ -8,7 +8,7 @@ import addrRecipient from '../subject/addrRecipient';
 
 export default function getValues (): Array<mixed> {
   return [
-    addrRecipient.getValue(),
+    addrRecipient.getValue().publicKey(),
     amount.getValue()
   ];
 }
diff --git a/packages/app-testing/src/StakingTransfer/subject/amount.js b/packages/app-testing/src/StakingTransfer/subject/amount.js
index 1e5f08c17b..d6ea8d0fd7 100644
--- a/packages/app-testing/src/StakingTransfer/subject/amount.js
+++ b/packages/app-testing/src/StakingTransfer/subject/amount.js
@@ -3,8 +3,9 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+import BN from 'bn.js';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = new BehaviorSubject();
+const subject = new BehaviorSubject(new BN(0));
 
 export default subject;
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
index 8e1f635ad8..d2576c25e5 100644
--- a/packages/app-testing/src/encode/index.js
+++ b/packages/app-testing/src/encode/index.js
@@ -6,16 +6,16 @@
 // TODO: Move to API
 
 import type BN from 'bn.js';
-import type { Call } from '../calls/types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 const u8aConcat = require('@polkadot/util/u8a/concat');
-const u8aToHex = require('@polkadot/util/u8a/toHex');
 
+const calls = require('../calls');
 const encodeParams = require('./params');
 
 // flowlint-next-line unclear-type:off
-module.exports = function encode (sender: KeyringPair, nonce: number | BN, { index, params }: Call, values: Array<mixed>) {
+module.exports = function encode (sender: KeyringPair, nonce: number | BN, method: string, values: Array<mixed>): Uint8Array {
+  const { index, params } = calls[method];
   const encodedParams = encodeParams(values, params);
   const message = u8aConcat(
     sender.publicKey(),
@@ -25,11 +25,5 @@ module.exports = function encode (sender: KeyringPair, nonce: number | BN, { ind
   );
   const signature = sender.sign(message);
 
-  console.log('message', u8aToHex(message));
-  console.log('signature', u8aToHex(signature));
-
-  return {
-    message,
-    signature
-  };
+  return u8aConcat(message, signature);
 };
diff --git a/packages/app-testing/src/subject/extrinsicName.js b/packages/app-testing/src/subject/extrinsicName.js
index 45630285c3..1e5f08c17b 100644
--- a/packages/app-testing/src/subject/extrinsicName.js
+++ b/packages/app-testing/src/subject/extrinsicName.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = new ReplaySubject(1);
+const subject = new BehaviorSubject();
 
 export default subject;
diff --git a/packages/app-testing/src/subject/nonceSender.js b/packages/app-testing/src/subject/nonceSender.js
index 8cbb250a87..d6ea8d0fd7 100644
--- a/packages/app-testing/src/subject/nonceSender.js
+++ b/packages/app-testing/src/subject/nonceSender.js
@@ -4,10 +4,8 @@
 // @flow
 
 import BN from 'bn.js';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = new ReplaySubject(1);
-
-subject.next(new BN(0));
+const subject = new BehaviorSubject(new BN(0));
 
 export default subject;

From c9ffe7a2de0347dc146d3325b44541f5c3d3d215 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 18 Apr 2018 17:52:23 +0200
Subject: [PATCH 08/16] Flatten components

---
 .../src/{Account/index.js => Account.js}            |  4 +---
 packages/app-testing/src/Account/Account.css        |  6 ------
 packages/app-testing/src/{App/index.js => App.js}   | 10 ++++------
 packages/app-testing/src/App/App.css                | 13 -------------
 .../src/{CallSelect/index.js => CallSelect.js}      |  6 ++----
 packages/app-testing/src/CallSelect/CallSelect.css  |  6 ------
 .../app-testing/src/{Nonce/index.js => Nonce.js}    |  6 ++----
 packages/app-testing/src/Nonce/Nonce.css            |  6 ------
 .../src/{Recipient/index.js => Recipient.js}        |  6 ++----
 packages/app-testing/src/Recipient/Recipient.css    |  6 ------
 .../app-testing/src/{Sender/index.js => Sender.js}  |  6 ++----
 packages/app-testing/src/Sender/Sender.css          |  6 ------
 12 files changed, 13 insertions(+), 68 deletions(-)
 rename packages/app-testing/src/{Account/index.js => Account.js} (94%)
 delete mode 100644 packages/app-testing/src/Account/Account.css
 rename packages/app-testing/src/{App/index.js => App.js} (76%)
 delete mode 100644 packages/app-testing/src/App/App.css
 rename packages/app-testing/src/{CallSelect/index.js => CallSelect.js} (89%)
 delete mode 100644 packages/app-testing/src/CallSelect/CallSelect.css
 rename packages/app-testing/src/{Nonce/index.js => Nonce.js} (90%)
 delete mode 100644 packages/app-testing/src/Nonce/Nonce.css
 rename packages/app-testing/src/{Recipient/index.js => Recipient.js} (81%)
 delete mode 100644 packages/app-testing/src/Recipient/Recipient.css
 rename packages/app-testing/src/{Sender/index.js => Sender.js} (83%)
 delete mode 100644 packages/app-testing/src/Sender/Sender.css

diff --git a/packages/app-testing/src/Account/index.js b/packages/app-testing/src/Account.js
similarity index 94%
rename from packages/app-testing/src/Account/index.js
rename to packages/app-testing/src/Account.js
index b4806bf4ab..69b48285c5 100644
--- a/packages/app-testing/src/Account/index.js
+++ b/packages/app-testing/src/Account.js
@@ -5,14 +5,12 @@
 
 import type { BaseProps } from '@polkadot/portal/types';
 
-import './Account.css';
-
 import React from 'react';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 import Balance from '@polkadot/rx-react/Balance';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
 
-import InputAddress from '../InputAddress';
+import InputAddress from './InputAddress';
 
 type Props = BaseProps & {
   label: string,
diff --git a/packages/app-testing/src/Account/Account.css b/packages/app-testing/src/Account/Account.css
deleted file mode 100644
index 3ed06821c3..0000000000
--- a/packages/app-testing/src/Account/Account.css
+++ /dev/null
@@ -1,6 +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. */
-
-.testing--Account {
-}
diff --git a/packages/app-testing/src/App/index.js b/packages/app-testing/src/App.js
similarity index 76%
rename from packages/app-testing/src/App/index.js
rename to packages/app-testing/src/App.js
index 3a14c088cc..aebfad11d2 100644
--- a/packages/app-testing/src/App/index.js
+++ b/packages/app-testing/src/App.js
@@ -5,14 +5,12 @@
 
 import type { BaseProps } from '@polkadot/portal/types';
 
-import './App.css';
-
 import React from 'react';
 
-import CallDisplay from '../CallDisplay';
-import CallSelect from '../CallSelect';
-import Nonce from '../Nonce';
-import Sender from '../Sender';
+import CallDisplay from './CallDisplay';
+import CallSelect from './CallSelect';
+import Nonce from './Nonce';
+import Sender from './Sender';
 
 type Props = BaseProps & {};
 
diff --git a/packages/app-testing/src/App/App.css b/packages/app-testing/src/App/App.css
deleted file mode 100644
index 58d4ed6e44..0000000000
--- a/packages/app-testing/src/App/App.css
+++ /dev/null
@@ -1,13 +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. */
-
-.testing--App {
-  padding: 0;
-}
-
-.testing--App-BestNumber {
-  margin-bottom: 1rem;
-  opacity: 0.5;
-  text-align: right;
-}
diff --git a/packages/app-testing/src/CallSelect/index.js b/packages/app-testing/src/CallSelect.js
similarity index 89%
rename from packages/app-testing/src/CallSelect/index.js
rename to packages/app-testing/src/CallSelect.js
index 54e012e867..85ab386710 100644
--- a/packages/app-testing/src/CallSelect/index.js
+++ b/packages/app-testing/src/CallSelect.js
@@ -5,14 +5,12 @@
 
 import type { BaseProps } from '@polkadot/portal/types';
 
-import './CallSelect.css';
-
 import React from 'react';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
-import extrinsicName from '../subject/extrinsicName';
-import calls from '../calls';
+import extrinsicName from './subject/extrinsicName';
+import calls from './calls';
 
 type Props = BaseProps & {};
 
diff --git a/packages/app-testing/src/CallSelect/CallSelect.css b/packages/app-testing/src/CallSelect/CallSelect.css
deleted file mode 100644
index ec0078f2f8..0000000000
--- a/packages/app-testing/src/CallSelect/CallSelect.css
+++ /dev/null
@@ -1,6 +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. */
-
-.testing--CallSelect {
-}
diff --git a/packages/app-testing/src/Nonce/index.js b/packages/app-testing/src/Nonce.js
similarity index 90%
rename from packages/app-testing/src/Nonce/index.js
rename to packages/app-testing/src/Nonce.js
index 3ee3998d4c..ad6871750a 100644
--- a/packages/app-testing/src/Nonce/index.js
+++ b/packages/app-testing/src/Nonce.js
@@ -5,16 +5,14 @@
 
 import type { BaseProps } from '@polkadot/portal/types';
 
-import './Nonce.css';
-
 import React from 'react';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 import RxNonce from '@polkadot/rx-react/Nonce';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
 import u8aToBn from '@polkadot/util/u8a/toBn';
 
-import addrSender from '../subject/addrSender';
-import nonceSender from '../subject/nonceSender';
+import addrSender from './subject/addrSender';
+import nonceSender from './subject/nonceSender';
 
 type Props = BaseProps & {};
 
diff --git a/packages/app-testing/src/Nonce/Nonce.css b/packages/app-testing/src/Nonce/Nonce.css
deleted file mode 100644
index 667eee6860..0000000000
--- a/packages/app-testing/src/Nonce/Nonce.css
+++ /dev/null
@@ -1,6 +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. */
-
-.testing--Sender {
-}
diff --git a/packages/app-testing/src/Recipient/index.js b/packages/app-testing/src/Recipient.js
similarity index 81%
rename from packages/app-testing/src/Recipient/index.js
rename to packages/app-testing/src/Recipient.js
index 7617f67b3c..93b00ee8e9 100644
--- a/packages/app-testing/src/Recipient/index.js
+++ b/packages/app-testing/src/Recipient.js
@@ -5,12 +5,10 @@
 
 import type { BaseProps } from '@polkadot/portal/types';
 
-import './Recipient.css';
-
 import React from 'react';
 
-import Account from '../Account';
-import addrRecipient from '../subject/addrRecipient';
+import Account from './Account';
+import addrRecipient from './subject/addrRecipient';
 
 type Props = BaseProps & {};
 
diff --git a/packages/app-testing/src/Recipient/Recipient.css b/packages/app-testing/src/Recipient/Recipient.css
deleted file mode 100644
index 2f90f0c455..0000000000
--- a/packages/app-testing/src/Recipient/Recipient.css
+++ /dev/null
@@ -1,6 +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. */
-
-.testing--Recipient {
-}
diff --git a/packages/app-testing/src/Sender/index.js b/packages/app-testing/src/Sender.js
similarity index 83%
rename from packages/app-testing/src/Sender/index.js
rename to packages/app-testing/src/Sender.js
index bdd3a26e2f..72c1f33682 100644
--- a/packages/app-testing/src/Sender/index.js
+++ b/packages/app-testing/src/Sender.js
@@ -5,12 +5,10 @@
 
 import type { BaseProps } from '@polkadot/portal/types';
 
-import './Sender.css';
-
 import React from 'react';
 
-import Account from '../Account';
-import addrSender from '../subject/addrSender';
+import Account from './Account';
+import addrSender from './subject/addrSender';
 
 type Props = BaseProps & {};
 
diff --git a/packages/app-testing/src/Sender/Sender.css b/packages/app-testing/src/Sender/Sender.css
deleted file mode 100644
index 667eee6860..0000000000
--- a/packages/app-testing/src/Sender/Sender.css
+++ /dev/null
@@ -1,6 +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. */
-
-.testing--Sender {
-}

From 18e90dbef25b5b849fe470eea9185fda2d5bb6a1 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 09:25:27 +0200
Subject: [PATCH 09/16] Reformatting

---
 packages/app-home/package.json                |  2 +-
 packages/app-testing/package.json             |  2 +-
 packages/app-testing/src/CallDisplay/index.js |  6 ++--
 packages/app-testing/src/CallSelect.js        |  8 ++---
 packages/app-testing/src/Nonce.js             |  9 +++---
 packages/app-testing/src/Recipient.js         |  4 +--
 packages/app-testing/src/Sender.js            |  4 +--
 .../src/StakingTransfer/getValues.js          |  6 ++--
 .../app-testing/src/StakingTransfer/index.js  |  6 ++--
 .../{subject/amount.js => subjects.js}        |  4 +--
 packages/app-testing/src/calls/types.js       | 18 -----------
 packages/app-testing/src/encode/index.js      |  4 +--
 packages/app-testing/src/encode/param.js      |  4 +--
 packages/app-testing/src/encode/params.js     |  4 +--
 .../src/{calls => extrinsics}/consensus.js    |  4 +--
 .../src/{calls => extrinsics}/council.js      |  4 +--
 .../{calls => extrinsics}/councilVoting.js    |  4 +--
 .../src/{calls => extrinsics}/democracy.js    |  4 +--
 .../src/{calls => extrinsics}/index.js        | 31 ++++++++++++-------
 .../src/{calls => extrinsics}/session.js      |  4 +--
 .../src/{calls => extrinsics}/staking.js      |  4 +--
 packages/app-testing/src/extrinsics/types.js  | 27 ++++++++++++++++
 .../app-testing/src/subject/addrRecipient.js  | 10 ------
 .../app-testing/src/subject/addrSender.js     | 10 ------
 .../app-testing/src/subject/extrinsicName.js  | 10 ------
 .../{subject/nonceSender.js => subjects.js}   |  8 +++--
 packages/portal/package.json                  |  2 +-
 yarn.lock                                     | 14 ++++-----
 28 files changed, 102 insertions(+), 115 deletions(-)
 rename packages/app-testing/src/StakingTransfer/{subject/amount.js => subjects.js} (77%)
 delete mode 100644 packages/app-testing/src/calls/types.js
 rename packages/app-testing/src/{calls => extrinsics}/consensus.js (73%)
 rename packages/app-testing/src/{calls => extrinsics}/council.js (73%)
 rename packages/app-testing/src/{calls => extrinsics}/councilVoting.js (73%)
 rename packages/app-testing/src/{calls => extrinsics}/democracy.js (73%)
 rename packages/app-testing/src/{calls => extrinsics}/index.js (52%)
 rename packages/app-testing/src/{calls => extrinsics}/session.js (73%)
 rename packages/app-testing/src/{calls => extrinsics}/staking.js (85%)
 create mode 100644 packages/app-testing/src/extrinsics/types.js
 delete mode 100644 packages/app-testing/src/subject/addrRecipient.js
 delete mode 100644 packages/app-testing/src/subject/addrSender.js
 delete mode 100644 packages/app-testing/src/subject/extrinsicName.js
 rename packages/app-testing/src/{subject/nonceSender.js => subjects.js} (54%)

diff --git a/packages/app-home/package.json b/packages/app-home/package.json
index c62d3b603c..3340df5eb8 100644
--- a/packages/app-home/package.json
+++ b/packages/app-home/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.7",
+    "@polkadot/rx-react": "^0.2.8",
     "@polkadot/util": "^0.18.6",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index 0552a4824d..c801859578 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.7",
+    "@polkadot/rx-react": "^0.2.8",
     "@polkadot/ui-react": "^0.9.10",
     "@polkadot/util": "^0.18.6",
     "@polkadot/util-keyring": "^0.18.6",
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index a9c27a400b..50b1bb0a48 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -13,9 +13,7 @@ import withObservable from '@polkadot/rx-react/with/observable';
 
 import StakingTransfer from '../StakingTransfer';
 import encode from '../encode';
-import addrSender from '../subject/addrSender';
-import extrinsicName from '../subject/extrinsicName';
-import nonceSender from '../subject/nonceSender';
+import { extrinsicName, senderAddr, senderIndex } from '../subjects';
 import ErrorComponent from './Error';
 
 type Props = BaseProps & {
@@ -33,7 +31,7 @@ function CallDisplay ({ className, style, value }: Props) {
 
   const Component = COMPONENTS[value] || ErrorComponent;
   const onSubmit = () => {
-    encode(addrSender.getValue(), nonceSender.getValue(), value, Component.getValues());
+    encode(senderAddr.getValue(), senderIndex.getValue(), value, Component.getValues());
   };
 
   return (
diff --git a/packages/app-testing/src/CallSelect.js b/packages/app-testing/src/CallSelect.js
index 85ab386710..c79b9a3b37 100644
--- a/packages/app-testing/src/CallSelect.js
+++ b/packages/app-testing/src/CallSelect.js
@@ -9,8 +9,8 @@ import React from 'react';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
-import extrinsicName from './subject/extrinsicName';
-import calls from './calls';
+import { extrinsicName } from './subjects';
+import extrinsics from './extrinsics';
 
 type Props = BaseProps & {};
 
@@ -18,8 +18,8 @@ const onChange = (event, { value }) => {
   extrinsicName.next(value);
 };
 
-const options = Object.keys(calls).map((value) => ({
-  text: calls[value].description,
+const options = Object.keys(extrinsics).map((value) => ({
+  text: extrinsics[value].description,
   value
 }));
 
diff --git a/packages/app-testing/src/Nonce.js b/packages/app-testing/src/Nonce.js
index ad6871750a..d682bd6210 100644
--- a/packages/app-testing/src/Nonce.js
+++ b/packages/app-testing/src/Nonce.js
@@ -11,12 +11,11 @@ import RxNonce from '@polkadot/rx-react/Nonce';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
 import u8aToBn from '@polkadot/util/u8a/toBn';
 
-import addrSender from './subject/addrSender';
-import nonceSender from './subject/nonceSender';
+import { senderAddr, senderIndex } from './subjects';
 
 type Props = BaseProps & {};
 
-const SenderNonce = withObservableParams(RxNonce, addrSender, (pair: KeyringPair) => {
+const SenderNonce = withObservableParams(RxNonce, senderAddr, (pair: KeyringPair) => {
   if (!pair) {
     return new Uint8Array([]);
   }
@@ -28,7 +27,9 @@ const onNonceChange = (value: Uint8Array) => {
     return;
   }
 
-  nonceSender.next(u8aToBn(value, 64, true));
+  senderIndex.next(
+    u8aToBn(value, 64, true)
+  );
 };
 
 export default function Nonce ({ className, style }: Props) {
diff --git a/packages/app-testing/src/Recipient.js b/packages/app-testing/src/Recipient.js
index 93b00ee8e9..99e0fc930e 100644
--- a/packages/app-testing/src/Recipient.js
+++ b/packages/app-testing/src/Recipient.js
@@ -8,7 +8,7 @@ import type { BaseProps } from '@polkadot/portal/types';
 import React from 'react';
 
 import Account from './Account';
-import addrRecipient from './subject/addrRecipient';
+import { recipientAddr } from './subjects';
 
 type Props = BaseProps & {};
 
@@ -18,7 +18,7 @@ export default function Recipient (props: Props) {
       {...props}
       className={['testing--Recipient', props.className].join(' ')}
       label='to the recipient'
-      subject={addrRecipient}
+      subject={recipientAddr}
     />
   );
 }
diff --git a/packages/app-testing/src/Sender.js b/packages/app-testing/src/Sender.js
index 72c1f33682..d7f7632e1f 100644
--- a/packages/app-testing/src/Sender.js
+++ b/packages/app-testing/src/Sender.js
@@ -8,7 +8,7 @@ import type { BaseProps } from '@polkadot/portal/types';
 import React from 'react';
 
 import Account from './Account';
-import addrSender from './subject/addrSender';
+import { senderAddr } from './subjects';
 
 type Props = BaseProps & {};
 
@@ -18,7 +18,7 @@ export default function Sender (props: Props) {
       {...props}
       className={['testing--Sender', props.className].join(' ')}
       label='using the selected account'
-      subject={addrSender}
+      subject={senderAddr}
     />
   );
 }
diff --git a/packages/app-testing/src/StakingTransfer/getValues.js b/packages/app-testing/src/StakingTransfer/getValues.js
index 573dfc0e4d..dc4a52467e 100644
--- a/packages/app-testing/src/StakingTransfer/getValues.js
+++ b/packages/app-testing/src/StakingTransfer/getValues.js
@@ -3,12 +3,12 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import amount from './subject/amount';
-import addrRecipient from '../subject/addrRecipient';
+import { amount } from './subjects';
+import { recipientAddr } from '../subjects';
 
 export default function getValues (): Array<mixed> {
   return [
-    addrRecipient.getValue().publicKey(),
+    recipientAddr.getValue().publicKey(),
     amount.getValue()
   ];
 }
diff --git a/packages/app-testing/src/StakingTransfer/index.js b/packages/app-testing/src/StakingTransfer/index.js
index 14790d78ff..1409885afe 100644
--- a/packages/app-testing/src/StakingTransfer/index.js
+++ b/packages/app-testing/src/StakingTransfer/index.js
@@ -14,12 +14,14 @@ import Label from 'semantic-ui-react/dist/es/elements/Label';
 
 import Recipient from '../Recipient';
 import getValues from './getValues';
-import amount from './subject/amount';
+import { amount } from './subjects';
 
 type Props = BaseProps & {};
 
 const onChangeAmount = (event, { value }) => {
-  amount.next(new BN(value));
+  amount.next(
+    new BN(value || 0)
+  );
 };
 
 function StakingTransfer ({ className, style }: Props) {
diff --git a/packages/app-testing/src/StakingTransfer/subject/amount.js b/packages/app-testing/src/StakingTransfer/subjects.js
similarity index 77%
rename from packages/app-testing/src/StakingTransfer/subject/amount.js
rename to packages/app-testing/src/StakingTransfer/subjects.js
index d6ea8d0fd7..d45154973f 100644
--- a/packages/app-testing/src/StakingTransfer/subject/amount.js
+++ b/packages/app-testing/src/StakingTransfer/subjects.js
@@ -6,6 +6,4 @@
 import BN from 'bn.js';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = new BehaviorSubject(new BN(0));
-
-export default subject;
+export const amount = new BehaviorSubject(new BN(0));
diff --git a/packages/app-testing/src/calls/types.js b/packages/app-testing/src/calls/types.js
deleted file mode 100644
index e2bb50d4d1..0000000000
--- a/packages/app-testing/src/calls/types.js
+++ /dev/null
@@ -1,18 +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
-
-export type Call$Type = 'AccountId' | 'Balance' | 'BlockNumber';
-
-export type Call$Params = Array<Call$Type>;
-
-export type Call = {
-  description: string,
-  index: Uint8Array,
-  params: Call$Params
-};
-
-export type Calls = {
-  [string]: $Shape<Call>
-}
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
index d2576c25e5..3ddb871cf2 100644
--- a/packages/app-testing/src/encode/index.js
+++ b/packages/app-testing/src/encode/index.js
@@ -10,12 +10,12 @@ import type BN from 'bn.js';
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 const u8aConcat = require('@polkadot/util/u8a/concat');
 
-const calls = require('../calls');
+const extrinsics = require('../extrinsics');
 const encodeParams = require('./params');
 
 // flowlint-next-line unclear-type:off
 module.exports = function encode (sender: KeyringPair, nonce: number | BN, method: string, values: Array<mixed>): Uint8Array {
-  const { index, params } = calls[method];
+  const { index, params } = extrinsics[method];
   const encodedParams = encodeParams(values, params);
   const message = u8aConcat(
     sender.publicKey(),
diff --git a/packages/app-testing/src/encode/param.js b/packages/app-testing/src/encode/param.js
index 1ca41ad4b4..524c30b3d7 100644
--- a/packages/app-testing/src/encode/param.js
+++ b/packages/app-testing/src/encode/param.js
@@ -3,12 +3,12 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Call$Type } from '../../calls/types';
+import type { Extrinsic$Type } from '../../extrinsics/types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 
 // flowlint-next-line unclear-type:off
-module.exports = function encodeValue (value: any, type: Call$Type): Uint8Array {
+module.exports = function encodeValue (value: any, type: Extrinsic$Type): Uint8Array {
   switch (type) {
     case 'AccountId':
       return value;
diff --git a/packages/app-testing/src/encode/params.js b/packages/app-testing/src/encode/params.js
index b1de7a4153..b63de0908b 100644
--- a/packages/app-testing/src/encode/params.js
+++ b/packages/app-testing/src/encode/params.js
@@ -3,14 +3,14 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Call$Params } from '../../calls/types';
+import type { Extrinsic$Params } from '../../extrinsics/types';
 
 const u8aConcat = require('@polkadot/util/u8a/concat');
 
 const encodeParam = require('./param');
 
 // flowlint-next-line unclear-type:off
-module.exports = function encodeParams (values: Array<mixed>, params: Call$Params): Uint8Array {
+module.exports = function encodeParams (values: Array<mixed>, params: Extrinsic$Params): Uint8Array {
   return u8aConcat.apply(null, values.map((value, index) => {
     return encodeParam(value, params[index]);
   }));
diff --git a/packages/app-testing/src/calls/consensus.js b/packages/app-testing/src/extrinsics/consensus.js
similarity index 73%
rename from packages/app-testing/src/calls/consensus.js
rename to packages/app-testing/src/extrinsics/consensus.js
index d68f00c2f8..6a24e2923f 100644
--- a/packages/app-testing/src/calls/consensus.js
+++ b/packages/app-testing/src/extrinsics/consensus.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Calls } from './types';
+import type { ExtrinsicsBasic } from './types';
 
 module.exports = ({
-}: Calls);
+}: ExtrinsicsBasic);
diff --git a/packages/app-testing/src/calls/council.js b/packages/app-testing/src/extrinsics/council.js
similarity index 73%
rename from packages/app-testing/src/calls/council.js
rename to packages/app-testing/src/extrinsics/council.js
index d68f00c2f8..6a24e2923f 100644
--- a/packages/app-testing/src/calls/council.js
+++ b/packages/app-testing/src/extrinsics/council.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Calls } from './types';
+import type { ExtrinsicsBasic } from './types';
 
 module.exports = ({
-}: Calls);
+}: ExtrinsicsBasic);
diff --git a/packages/app-testing/src/calls/councilVoting.js b/packages/app-testing/src/extrinsics/councilVoting.js
similarity index 73%
rename from packages/app-testing/src/calls/councilVoting.js
rename to packages/app-testing/src/extrinsics/councilVoting.js
index d68f00c2f8..6a24e2923f 100644
--- a/packages/app-testing/src/calls/councilVoting.js
+++ b/packages/app-testing/src/extrinsics/councilVoting.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Calls } from './types';
+import type { ExtrinsicsBasic } from './types';
 
 module.exports = ({
-}: Calls);
+}: ExtrinsicsBasic);
diff --git a/packages/app-testing/src/calls/democracy.js b/packages/app-testing/src/extrinsics/democracy.js
similarity index 73%
rename from packages/app-testing/src/calls/democracy.js
rename to packages/app-testing/src/extrinsics/democracy.js
index d68f00c2f8..6a24e2923f 100644
--- a/packages/app-testing/src/calls/democracy.js
+++ b/packages/app-testing/src/extrinsics/democracy.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Calls } from './types';
+import type { ExtrinsicsBasic } from './types';
 
 module.exports = ({
-}: Calls);
+}: ExtrinsicsBasic);
diff --git a/packages/app-testing/src/calls/index.js b/packages/app-testing/src/extrinsics/index.js
similarity index 52%
rename from packages/app-testing/src/calls/index.js
rename to packages/app-testing/src/extrinsics/index.js
index e1bd3d19d3..93c2876824 100644
--- a/packages/app-testing/src/calls/index.js
+++ b/packages/app-testing/src/extrinsics/index.js
@@ -5,10 +5,11 @@
 
 // TODO: Move to API
 
-import type { Calls } from './types';
+import type { Extrinsics, ExtrinsicsBasic } from './types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 const u8aConcat = require('@polkadot/util/u8a/concat');
+const u8aToHex = require('@polkadot/util/u8a/toHex');
 
 const consensus = require('./consensus');
 const council = require('./council');
@@ -17,7 +18,7 @@ const democracy = require('./democracy');
 const session = require('./session');
 const staking = require('./staking');
 
-const calls = {
+const all: { [string]: ExtrinsicsBasic } = {
   consensus, // 0
   session, // 1
   staking, // 2
@@ -26,25 +27,31 @@ const calls = {
   councilVoting // 5
 };
 
-const flattenned: Calls = Object
-  .keys(calls)
-  .reduce((flat, sectionName, index) => {
-    const section = calls[sectionName];
-    const sectionIndex = bnToU8a(index, 8);
+const flattenned: Extrinsics = Object
+  .keys(all)
+  .reduce((flat, sectionName, _index) => {
+    const section = all[sectionName];
+    const sectionIndex = bnToU8a(_index, 8);
 
     Object
       .keys(section)
-      .reduce((flat, method, index) => {
+      .reduce((flat, method, _index) => {
         const name = `${sectionName}_${method}`;
-        const methodIndex = bnToU8a(index, 8);
+        const methodIndex = bnToU8a(_index, 8);
+        const index = u8aConcat(sectionIndex, methodIndex);
+        const indexHex = u8aToHex(index, 16);
+        const expanded = Object.assign(({
+          index,
+          indexHex,
+          name
+        }: $Shape<Extrinsic>), section[method]);
 
-        flat[name] = section[method];
-        flat[name].index = u8aConcat(sectionIndex, methodIndex);
+        flat[name] = expanded;
 
         return flat;
       }, flat);
 
     return flat;
-  }, ({}: $Shape<FlatCalls>));
+  }, ({}: $Shape<Extrinsics>));
 
 module.exports = flattenned;
diff --git a/packages/app-testing/src/calls/session.js b/packages/app-testing/src/extrinsics/session.js
similarity index 73%
rename from packages/app-testing/src/calls/session.js
rename to packages/app-testing/src/extrinsics/session.js
index d68f00c2f8..6a24e2923f 100644
--- a/packages/app-testing/src/calls/session.js
+++ b/packages/app-testing/src/extrinsics/session.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Calls } from './types';
+import type { ExtrinsicsBasic } from './types';
 
 module.exports = ({
-}: Calls);
+}: ExtrinsicsBasic);
diff --git a/packages/app-testing/src/calls/staking.js b/packages/app-testing/src/extrinsics/staking.js
similarity index 85%
rename from packages/app-testing/src/calls/staking.js
rename to packages/app-testing/src/extrinsics/staking.js
index 3b325072cb..6de9485c73 100644
--- a/packages/app-testing/src/calls/staking.js
+++ b/packages/app-testing/src/extrinsics/staking.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Calls } from './types';
+import type { ExtrinsicsBasic } from './types';
 
 module.exports = ({
   transfer: {
@@ -18,4 +18,4 @@ module.exports = ({
     description: 'Unstake',
     params: []
   }
-}: Calls);
+}: ExtrinsicsBasic);
diff --git a/packages/app-testing/src/extrinsics/types.js b/packages/app-testing/src/extrinsics/types.js
new file mode 100644
index 0000000000..3567493894
--- /dev/null
+++ b/packages/app-testing/src/extrinsics/types.js
@@ -0,0 +1,27 @@
+// 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
+
+export type Extrinsic$Type = 'AccountId' | 'Balance' | 'BlockNumber';
+
+export type Extrinsic$Params = Array<Extrinsic$Type>;
+
+export type ExtrinsicBasic = {
+  description: string,
+  params: Extrinsic$Params
+}
+
+export type Extrinsic = ExtrinsicBasic & {
+  index: Uint8Array,
+  indexHex: string,
+  name: string
+};
+
+export type Extrinsics = {
+  [string]: Extrinsic
+}
+
+export type ExtrinsicsBasic = {
+  [string]: ExtrinsicBasic
+}
diff --git a/packages/app-testing/src/subject/addrRecipient.js b/packages/app-testing/src/subject/addrRecipient.js
deleted file mode 100644
index 1e5f08c17b..0000000000
--- a/packages/app-testing/src/subject/addrRecipient.js
+++ /dev/null
@@ -1,10 +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 { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
-const subject = new BehaviorSubject();
-
-export default subject;
diff --git a/packages/app-testing/src/subject/addrSender.js b/packages/app-testing/src/subject/addrSender.js
deleted file mode 100644
index 1e5f08c17b..0000000000
--- a/packages/app-testing/src/subject/addrSender.js
+++ /dev/null
@@ -1,10 +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 { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
-const subject = new BehaviorSubject();
-
-export default subject;
diff --git a/packages/app-testing/src/subject/extrinsicName.js b/packages/app-testing/src/subject/extrinsicName.js
deleted file mode 100644
index 1e5f08c17b..0000000000
--- a/packages/app-testing/src/subject/extrinsicName.js
+++ /dev/null
@@ -1,10 +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 { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
-const subject = new BehaviorSubject();
-
-export default subject;
diff --git a/packages/app-testing/src/subject/nonceSender.js b/packages/app-testing/src/subjects.js
similarity index 54%
rename from packages/app-testing/src/subject/nonceSender.js
rename to packages/app-testing/src/subjects.js
index d6ea8d0fd7..8661bbd97c 100644
--- a/packages/app-testing/src/subject/nonceSender.js
+++ b/packages/app-testing/src/subjects.js
@@ -3,9 +3,11 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import BN from 'bn.js';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-const subject = new BehaviorSubject(new BN(0));
+import BN from 'bn.js';
 
-export default subject;
+export const extrinsicName = new BehaviorSubject();
+export const recipientAddr = new BehaviorSubject();
+export const senderAddr = new BehaviorSubject();
+export const senderIndex = new BehaviorSubject(new BN(0));
diff --git a/packages/portal/package.json b/packages/portal/package.json
index aea0f47b73..b4530eded3 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@polkadot/app-home": "^0.1.0",
     "@polkadot/app-testing": "^0.1.0",
-    "@polkadot/rx-react": "^0.2.7",
+    "@polkadot/rx-react": "^0.2.8",
     "@polkadot/ui-react": "^0.9.10",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
diff --git a/yarn.lock b/yarn.lock
index e1a85e47cd..4445ad8d7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1299,19 +1299,19 @@
     "@polkadot/util" "^0.18.4"
     babel-runtime "^6.26.0"
 
-"@polkadot/rx-api@^0.2.7":
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.7.tgz#aef716e7e8d3740746307331d242043c7694a8fd"
+"@polkadot/rx-api@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.8.tgz#12e08d62afc4eb623c37279bba5927b790be8e2a"
   dependencies:
     "@polkadot/api" "^0.8.14"
     "@polkadot/api-provider" "^0.8.14"
     rxjs "^5.5.10"
 
-"@polkadot/rx-react@^0.2.7":
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.7.tgz#5ec876ddf866e1e8ea2a70ddb484c1872102e2ac"
+"@polkadot/rx-react@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.8.tgz#75fdaf5dab36b11ae92f98c8d29be41753668d73"
   dependencies:
-    "@polkadot/rx-api" "^0.2.7"
+    "@polkadot/rx-api" "^0.2.8"
     "@polkadot/util" "^0.18.6"
 
 "@polkadot/ui-identicon@^0.9.10":

From c550c88a06e7d2405822bc234e873f74359c01f9 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 12:46:51 +0200
Subject: [PATCH 10/16] Simplify address determination

---
 packages/app-home/package.json                |  2 +-
 packages/app-testing/package.json             |  4 +--
 packages/app-testing/src/Account.js           |  8 +-----
 packages/app-testing/src/CallDisplay/index.js |  7 ++++-
 .../src/InputAddress/PairDisplay.js           |  3 ++-
 .../app-testing/src/InputAddress/index.js     | 25 +++++++++--------
 packages/app-testing/src/Nonce.js             |  8 +-----
 .../src/StakingTransfer/getValues.js          |  4 +--
 packages/app-testing/src/encode/index.js      | 11 +++++---
 yarn.lock                                     | 27 +++++++++++++++++++
 10 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/packages/app-home/package.json b/packages/app-home/package.json
index 3340df5eb8..0cb128f83a 100644
--- a/packages/app-home/package.json
+++ b/packages/app-home/package.json
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@polkadot/rx-react": "^0.2.8",
-    "@polkadot/util": "^0.18.6",
+    "@polkadot/util": "^0.19.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "semantic-ui-css": "^2.3.1",
diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index c801859578..12d9df3a3c 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@polkadot/rx-react": "^0.2.8",
     "@polkadot/ui-react": "^0.9.10",
-    "@polkadot/util": "^0.18.6",
-    "@polkadot/util-keyring": "^0.18.6",
+    "@polkadot/util": "^0.19.1",
+    "@polkadot/util-keyring": "^0.19.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "semantic-ui-css": "^2.3.1",
diff --git a/packages/app-testing/src/Account.js b/packages/app-testing/src/Account.js
index 69b48285c5..98aaccbd7c 100644
--- a/packages/app-testing/src/Account.js
+++ b/packages/app-testing/src/Account.js
@@ -18,13 +18,7 @@ type Props = BaseProps & {
 };
 
 export default function Account ({ className, label, subject, style }: Props) {
-  const AccountBalance = withObservableParams(Balance, subject, (pair: KeyringPair) => {
-    if (!pair) {
-      return new Uint8Array([]);
-    }
-
-    return pair.publicKey();
-  });
+  const AccountBalance = withObservableParams(Balance, subject);
 
   return (
     <div
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index 50b1bb0a48..06ac81015d 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -13,6 +13,8 @@ import withObservable from '@polkadot/rx-react/with/observable';
 
 import StakingTransfer from '../StakingTransfer';
 import encode from '../encode';
+import extrinsics from '../extrinsics';
+import keyring from '../keyring';
 import { extrinsicName, senderAddr, senderIndex } from '../subjects';
 import ErrorComponent from './Error';
 
@@ -31,7 +33,10 @@ function CallDisplay ({ className, style, value }: Props) {
 
   const Component = COMPONENTS[value] || ErrorComponent;
   const onSubmit = () => {
-    encode(senderAddr.getValue(), senderIndex.getValue(), value, Component.getValues());
+    const extrinsic = extrinsics[value];
+    const sender = keyring.getPair(senderAddr.getValue());
+
+    encode(extrinsic, sender, senderIndex.getValue(), Component.getValues());
   };
 
   return (
diff --git a/packages/app-testing/src/InputAddress/PairDisplay.js b/packages/app-testing/src/InputAddress/PairDisplay.js
index 6f077c0319..3220551fc6 100644
--- a/packages/app-testing/src/InputAddress/PairDisplay.js
+++ b/packages/app-testing/src/InputAddress/PairDisplay.js
@@ -16,8 +16,9 @@ type Props = BaseProps & {
   pair: KeyringPair
 };
 
-export default function PairDisplay ({ className, name, pair, style }: Props): React$Node {
+export default function PairDisplay ({ className, pair, style }: Props): React$Node {
   const publicKey = pair.publicKey();
+  const { name } = pair.getMeta();
 
   return (
     <div
diff --git a/packages/app-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
index 8c81020222..2f5d92e1e2 100644
--- a/packages/app-testing/src/InputAddress/index.js
+++ b/packages/app-testing/src/InputAddress/index.js
@@ -17,21 +17,24 @@ type Props = BaseProps & {
   subject: rxjs$Subject
 };
 
-const testOptions = Object.keys(keyring).map((name) => ({
-  text: (
-    <PairDisplay
-      key={name}
-      name={name}
-      pair={keyring[name]}
-    />
-  ),
-  value: name
-}));
+const testOptions = keyring.getPairs().map((pair) => {
+  const publicKey = pair.publicKey();
+
+  return {
+    text: (
+      <PairDisplay
+        key={publicKey.toString()}
+        pair={pair}
+      />
+    ),
+    value: publicKey
+  };
+});
 
 export default function InputAddress (props: Props): React$Node {
   const onChange = (event, { value }) => {
     if (props.subject) {
-      props.subject.next(keyring[value]);
+      props.subject.next(value);
     }
   };
 
diff --git a/packages/app-testing/src/Nonce.js b/packages/app-testing/src/Nonce.js
index d682bd6210..d45ab62faf 100644
--- a/packages/app-testing/src/Nonce.js
+++ b/packages/app-testing/src/Nonce.js
@@ -15,13 +15,7 @@ import { senderAddr, senderIndex } from './subjects';
 
 type Props = BaseProps & {};
 
-const SenderNonce = withObservableParams(RxNonce, senderAddr, (pair: KeyringPair) => {
-  if (!pair) {
-    return new Uint8Array([]);
-  }
-
-  return pair.publicKey();
-});
+const SenderNonce = withObservableParams(RxNonce, senderAddr);
 const onNonceChange = (value: Uint8Array) => {
   if (!value || value.length !== 8) {
     return;
diff --git a/packages/app-testing/src/StakingTransfer/getValues.js b/packages/app-testing/src/StakingTransfer/getValues.js
index dc4a52467e..849b0f4d11 100644
--- a/packages/app-testing/src/StakingTransfer/getValues.js
+++ b/packages/app-testing/src/StakingTransfer/getValues.js
@@ -3,12 +3,12 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import { amount } from './subjects';
 import { recipientAddr } from '../subjects';
+import { amount } from './subjects';
 
 export default function getValues (): Array<mixed> {
   return [
-    recipientAddr.getValue().publicKey(),
+    recipientAddr.getValue(),
     amount.getValue()
   ];
 }
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
index 3ddb871cf2..58a1c383f7 100644
--- a/packages/app-testing/src/encode/index.js
+++ b/packages/app-testing/src/encode/index.js
@@ -6,16 +6,16 @@
 // TODO: Move to API
 
 import type BN from 'bn.js';
+import type { Extrinsic } from '../extrinsics/types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 const u8aConcat = require('@polkadot/util/u8a/concat');
+const u8aToHex = require('@polkadot/util/u8a/toHex');
 
-const extrinsics = require('../extrinsics');
 const encodeParams = require('./params');
 
-// flowlint-next-line unclear-type:off
-module.exports = function encode (sender: KeyringPair, nonce: number | BN, method: string, values: Array<mixed>): Uint8Array {
-  const { index, params } = extrinsics[method];
+module.exports = function encode (extrinsic: Extrinsic, sender: KeyringPair, nonce: number | BN, values: Array<mixed>): Uint8Array {
+  const { index, params } = extrinsic;
   const encodedParams = encodeParams(values, params);
   const message = u8aConcat(
     sender.publicKey(),
@@ -25,5 +25,8 @@ module.exports = function encode (sender: KeyringPair, nonce: number | BN, metho
   );
   const signature = sender.sign(message);
 
+  console.log('message =', u8aToHex(message));
+  console.log('signature =', u8aToHex(signature));
+
   return u8aConcat(message, signature);
 };
diff --git a/yarn.lock b/yarn.lock
index 4445ad8d7f..c0e2674c1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1358,6 +1358,16 @@
     tweetnacl "^1.0.0"
     xxhashjs "^0.2.2"
 
+"@polkadot/util-crypto@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-0.19.1.tgz#95927de2f8a4384f05b872132e00bfd34aa1ea77"
+  dependencies:
+    babel-runtime "^6.26.0"
+    blakejs "^1.1.0"
+    js-sha3 "^0.7.0"
+    tweetnacl "^1.0.0"
+    xxhashjs "^0.2.2"
+
 "@polkadot/util-keyring@^0.18.4":
   version "0.18.4"
   resolved "https://registry.yarnpkg.com/@polkadot/util-keyring/-/util-keyring-0.18.4.tgz#0e2bdbb3700275025632f42171a3fecacde513e3"
@@ -1374,6 +1384,14 @@
     "@polkadot/util-crypto" "^0.18.6"
     babel-runtime "^6.26.0"
 
+"@polkadot/util-keyring@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/util-keyring/-/util-keyring-0.19.1.tgz#dbf6e9efbe1dd4de982367c279b3193584db414f"
+  dependencies:
+    "@polkadot/util" "^0.19.1"
+    "@polkadot/util-crypto" "^0.19.1"
+    babel-runtime "^6.26.0"
+
 "@polkadot/util-rlp@^0.18.5":
   version "0.18.5"
   resolved "https://registry.yarnpkg.com/@polkadot/util-rlp/-/util-rlp-0.18.5.tgz#d06a165a1120f293056f81128f93f494ebe7b390"
@@ -1417,6 +1435,15 @@
     deasync "^0.1.12"
     ip-regex "^2.1.0"
 
+"@polkadot/util@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-0.19.1.tgz#e19dc51b3d998b489ed26738a3a1e0cded65c020"
+  dependencies:
+    babel-runtime "^6.26.0"
+    bn.js "^4.11.8"
+    deasync "^0.1.12"
+    ip-regex "^2.1.0"
+
 "@types/node@*":
   version "9.6.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.2.tgz#e49ac1adb458835e95ca6487bc20f916b37aff23"

From e7fa6e8e1f9352323935f6a322f4e01855294728 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 13:17:55 +0200
Subject: [PATCH 11/16] Submission ... working...

---
 packages/app-testing/package.json             |  1 +
 packages/app-testing/src/CallDisplay/index.js | 20 ++++++------
 .../app-testing/src/CallDisplay/submit.js     | 32 +++++++++++++++++++
 packages/portal/src/types.js                  |  6 ++++
 yarn.lock                                     |  2 +-
 5 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 packages/app-testing/src/CallDisplay/submit.js

diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index 12d9df3a3c..a39b614ead 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -17,6 +17,7 @@
     "@polkadot/ui-react": "^0.9.10",
     "@polkadot/util": "^0.19.1",
     "@polkadot/util-keyring": "^0.19.1",
+    "prop-types": "^15.6.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "semantic-ui-css": "^2.3.1",
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index 06ac81015d..7dc82fd14b 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -3,20 +3,19 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps, BaseContext } from '@polkadot/portal/types';
 
 import './CallDisplay.css';
 
+import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'semantic-ui-react/dist/es/elements/Button';
 import withObservable from '@polkadot/rx-react/with/observable';
 
 import StakingTransfer from '../StakingTransfer';
-import encode from '../encode';
-import extrinsics from '../extrinsics';
-import keyring from '../keyring';
-import { extrinsicName, senderAddr, senderIndex } from '../subjects';
+import { extrinsicName } from '../subjects';
 import ErrorComponent from './Error';
+import submitExtrinsic from './submit';
 
 type Props = BaseProps & {
   value?: string;
@@ -26,17 +25,14 @@ const COMPONENTS = {
   'staking_transfer': StakingTransfer
 };
 
-function CallDisplay ({ className, style, value }: Props) {
+function CallDisplay ({ className, style, value }: Props, { api }: BaseContext) {
   if (!value) {
     return null;
   }
 
   const Component = COMPONENTS[value] || ErrorComponent;
   const onSubmit = () => {
-    const extrinsic = extrinsics[value];
-    const sender = keyring.getPair(senderAddr.getValue());
-
-    encode(extrinsic, sender, senderIndex.getValue(), Component.getValues());
+    submitExtrinsic(api, value, Component.getValues());
   };
 
   return (
@@ -56,4 +52,8 @@ function CallDisplay ({ className, style, value }: Props) {
   );
 }
 
+CallDisplay.contextTypes = {
+  api: PropTypes.object
+};
+
 export default withObservable(CallDisplay, extrinsicName);
diff --git a/packages/app-testing/src/CallDisplay/submit.js b/packages/app-testing/src/CallDisplay/submit.js
new file mode 100644
index 0000000000..8c7281547e
--- /dev/null
+++ b/packages/app-testing/src/CallDisplay/submit.js
@@ -0,0 +1,32 @@
+// 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/rx-api/types';
+
+import encode from '../encode';
+import extrinsics from '../extrinsics';
+import keyring from '../keyring';
+import { senderAddr, senderIndex } from '../subjects';
+
+export default function submit (api: RxApiInterface, method: string, values: Array<mixed>): Promise<void> {
+  // TODO: Handle result
+  // TODO: Display some progress
+  api.author
+    .submitExtrinsic(
+      encode(
+        extrinsics[method],
+        keyring.getPair(senderAddr.getValue()),
+        senderIndex.getValue(),
+        values
+      )
+    )
+    .toPromise()
+    .then((result) => {
+      console.error('submitExtrinsic', result);
+    })
+    .catch((error) => {
+      console.error('submitExtrinsic', error);
+    });
+}
diff --git a/packages/portal/src/types.js b/packages/portal/src/types.js
index 5aec01f66c..2d5a7273d6 100644
--- a/packages/portal/src/types.js
+++ b/packages/portal/src/types.js
@@ -3,6 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+import type { RxApiInterface } from '@polkadot/rx-api/types';
+
 export type BaseProps = {
   className?: string,
   style?: {
@@ -11,6 +13,10 @@ export type BaseProps = {
   t: I18Next$Translate
 };
 
+export type BaseContext = {
+  api: RxApiInterface
+};
+
 export type Route = {
   component: React$StatelessFunctionalComponent<*>,
   i18n: I18Nex$tTranslate$Config,
diff --git a/yarn.lock b/yarn.lock
index c0e2674c1d..73edddaef2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8503,7 +8503,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:

From 0484805619eedf8c5c198966eea381a761d0883c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 13:19:41 +0200
Subject: [PATCH 12/16] Cleanups

---
 packages/app-testing/src/CallDisplay/submit.js | 4 ++--
 packages/app-testing/src/encode/index.js       | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/app-testing/src/CallDisplay/submit.js b/packages/app-testing/src/CallDisplay/submit.js
index 8c7281547e..f634aa1887 100644
--- a/packages/app-testing/src/CallDisplay/submit.js
+++ b/packages/app-testing/src/CallDisplay/submit.js
@@ -24,9 +24,9 @@ export default function submit (api: RxApiInterface, method: string, values: Arr
     )
     .toPromise()
     .then((result) => {
-      console.error('submitExtrinsic', result);
+      console.log('submitExtrinsic: result=', result);
     })
     .catch((error) => {
-      console.error('submitExtrinsic', error);
+      console.error('submitExtrinsic: error=', error);
     });
 }
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
index 58a1c383f7..8b967e6a2f 100644
--- a/packages/app-testing/src/encode/index.js
+++ b/packages/app-testing/src/encode/index.js
@@ -10,7 +10,6 @@ import type { Extrinsic } from '../extrinsics/types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 const u8aConcat = require('@polkadot/util/u8a/concat');
-const u8aToHex = require('@polkadot/util/u8a/toHex');
 
 const encodeParams = require('./params');
 
@@ -25,8 +24,5 @@ module.exports = function encode (extrinsic: Extrinsic, sender: KeyringPair, non
   );
   const signature = sender.sign(message);
 
-  console.log('message =', u8aToHex(message));
-  console.log('signature =', u8aToHex(signature));
-
   return u8aConcat(message, signature);
 };

From c13a12c1a7798bf7cf68e6ca98513e56bfa78e80 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 14:29:07 +0200
Subject: [PATCH 13/16] flow fixes

---
 flow-typed/semantic-ui-react.js               | 27 +++++++++++++
 packages/app-home/package.json                |  2 +-
 packages/app-testing/package.json             |  2 +-
 packages/app-testing/src/Account.js           |  4 +-
 packages/app-testing/src/App.js               |  2 +-
 packages/app-testing/src/CallDisplay/Error.js |  2 +-
 packages/app-testing/src/CallDisplay/index.js | 10 ++++-
 .../app-testing/src/CallDisplay/submit.js     | 10 ++---
 packages/app-testing/src/CallSelect.js        |  2 +-
 .../src/InputAddress/PairDisplay.js           |  4 +-
 .../app-testing/src/InputAddress/index.js     |  4 +-
 packages/app-testing/src/Nonce.js             |  8 ++--
 packages/app-testing/src/Recipient.js         |  2 +-
 packages/app-testing/src/Sender.js            |  2 +-
 .../app-testing/src/StakingTransfer/Amount.js | 40 +++++++++++++++++++
 .../app-testing/src/StakingTransfer/index.js  | 26 ++----------
 packages/app-testing/src/encode/index.js      |  9 ++++-
 packages/app-testing/src/encode/param.js      |  2 +-
 packages/app-testing/src/encode/params.js     |  3 +-
 packages/app-testing/src/extrinsics/index.js  | 17 ++++----
 packages/app-testing/src/types.js             | 17 ++++++++
 packages/portal/package.json                  |  2 +-
 packages/portal/src/Content/index.js          |  4 +-
 packages/portal/src/SideBar/Item.js           |  4 +-
 packages/portal/src/SideBar/index.js          |  2 +-
 packages/portal/src/routes/home.js            |  2 +-
 packages/portal/src/routes/testing.js         |  2 +-
 packages/portal/src/types.js                  |  4 +-
 yarn.lock                                     | 16 ++++----
 29 files changed, 153 insertions(+), 78 deletions(-)
 create mode 100644 flow-typed/semantic-ui-react.js
 create mode 100644 packages/app-testing/src/StakingTransfer/Amount.js
 create mode 100644 packages/app-testing/src/types.js

diff --git a/flow-typed/semantic-ui-react.js b/flow-typed/semantic-ui-react.js
new file mode 100644
index 0000000000..cbf05a20cc
--- /dev/null
+++ b/flow-typed/semantic-ui-react.js
@@ -0,0 +1,27 @@
+// @flow
+
+declare module 'semantic-ui-react/dist/es/collections/Menu' {
+  declare module.exports: React$StatelessFunctionalComponent<*> & {
+    Item: React$StatelessFunctionalComponent<*>
+  }
+}
+
+declare module 'semantic-ui-react/dist/es/elements/Button' {
+  declare module.exports: React$StatelessFunctionalComponent<*>
+}
+
+declare module 'semantic-ui-react/dist/es/elements/Icon' {
+  declare module.exports: React$StatelessFunctionalComponent<*>
+}
+
+declare module 'semantic-ui-react/dist/es/elements/Input' {
+  declare module.exports: React$StatelessFunctionalComponent<*>
+}
+
+declare module 'semantic-ui-react/dist/es/elements/Label' {
+  declare module.exports: React$StatelessFunctionalComponent<*>
+}
+
+declare module 'semantic-ui-react/dist/es/modules/Dropdown' {
+  declare module.exports: React$StatelessFunctionalComponent<*>
+}
diff --git a/packages/app-home/package.json b/packages/app-home/package.json
index 0cb128f83a..a817e59530 100644
--- a/packages/app-home/package.json
+++ b/packages/app-home/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.8",
+    "@polkadot/rx-react": "^0.2.9",
     "@polkadot/util": "^0.19.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index a39b614ead..2899613d6e 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.8",
+    "@polkadot/rx-react": "^0.2.9",
     "@polkadot/ui-react": "^0.9.10",
     "@polkadot/util": "^0.19.1",
     "@polkadot/util-keyring": "^0.19.1",
diff --git a/packages/app-testing/src/Account.js b/packages/app-testing/src/Account.js
index 98aaccbd7c..7ad1a3b37b 100644
--- a/packages/app-testing/src/Account.js
+++ b/packages/app-testing/src/Account.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from './types';
 
 import React from 'react';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
@@ -14,7 +14,7 @@ import InputAddress from './InputAddress';
 
 type Props = BaseProps & {
   label: string,
-  subject: rxjs$BehaviorSubject
+  subject: rxjs$BehaviorSubject<*>
 };
 
 export default function Account ({ className, label, subject, style }: Props) {
diff --git a/packages/app-testing/src/App.js b/packages/app-testing/src/App.js
index aebfad11d2..309acb1f14 100644
--- a/packages/app-testing/src/App.js
+++ b/packages/app-testing/src/App.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from './types';
 
 import React from 'react';
 
diff --git a/packages/app-testing/src/CallDisplay/Error.js b/packages/app-testing/src/CallDisplay/Error.js
index 67049c1064..b596981001 100644
--- a/packages/app-testing/src/CallDisplay/Error.js
+++ b/packages/app-testing/src/CallDisplay/Error.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from '../types';
 
 import './CallDisplay.css';
 
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index 7dc82fd14b..abb7b19176 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps, BaseContext } from '@polkadot/portal/types';
+import type { BaseProps, BaseContext } from '../types';
 
 import './CallDisplay.css';
 
@@ -17,6 +17,10 @@ import { extrinsicName } from '../subjects';
 import ErrorComponent from './Error';
 import submitExtrinsic from './submit';
 
+type ValueGetter = {
+  getValues: () => Array<mixed>
+}
+
 type Props = BaseProps & {
   value?: string;
 };
@@ -26,13 +30,15 @@ const COMPONENTS = {
 };
 
 function CallDisplay ({ className, style, value }: Props, { api }: BaseContext) {
+  // flowlint-next-line sketchy-null-string:off
   if (!value) {
     return null;
   }
 
   const Component = COMPONENTS[value] || ErrorComponent;
   const onSubmit = () => {
-    submitExtrinsic(api, value, Component.getValues());
+    // flowlint-next-line unclear-type:off
+    submitExtrinsic(api, value, ((Component: any): ValueGetter).getValues());
   };
 
   return (
diff --git a/packages/app-testing/src/CallDisplay/submit.js b/packages/app-testing/src/CallDisplay/submit.js
index f634aa1887..6b9f784e81 100644
--- a/packages/app-testing/src/CallDisplay/submit.js
+++ b/packages/app-testing/src/CallDisplay/submit.js
@@ -10,15 +10,15 @@ import extrinsics from '../extrinsics';
 import keyring from '../keyring';
 import { senderAddr, senderIndex } from '../subjects';
 
-export default function submit (api: RxApiInterface, method: string, values: Array<mixed>): Promise<void> {
-  // TODO: Handle result
-  // TODO: Display some progress
+export default function submit (api: RxApiInterface, method: string, values: Array<mixed>): void {
+  // TODO: Display some progress once we have a subscription
   api.author
     .submitExtrinsic(
       encode(
         extrinsics[method],
-        keyring.getPair(senderAddr.getValue()),
-        senderIndex.getValue(),
+        // flowlint-next-line unclear-type:off
+        keyring.getPair(((senderAddr.getValue(): any): Uint8Array)),
+        senderIndex.getValue() || 0,
         values
       )
     )
diff --git a/packages/app-testing/src/CallSelect.js b/packages/app-testing/src/CallSelect.js
index c79b9a3b37..d63ac0666d 100644
--- a/packages/app-testing/src/CallSelect.js
+++ b/packages/app-testing/src/CallSelect.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from './types';
 
 import React from 'react';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
diff --git a/packages/app-testing/src/InputAddress/PairDisplay.js b/packages/app-testing/src/InputAddress/PairDisplay.js
index 3220551fc6..831511d121 100644
--- a/packages/app-testing/src/InputAddress/PairDisplay.js
+++ b/packages/app-testing/src/InputAddress/PairDisplay.js
@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
-import type { KeyringPair } from '@poladot/util-keyring/types';
+import type { KeyringPair } from '@polkadot/util-keyring/types';
+import type { BaseProps } from '../types';
 
 import './PairDisplay.css';
 
diff --git a/packages/app-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
index 2f5d92e1e2..9b541dd17b 100644
--- a/packages/app-testing/src/InputAddress/index.js
+++ b/packages/app-testing/src/InputAddress/index.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from '../types';
 
 import './InputAddress.css';
 
@@ -14,7 +14,7 @@ import PairDisplay from './PairDisplay';
 import keyring from '../keyring';
 
 type Props = BaseProps & {
-  subject: rxjs$Subject
+  subject: rxjs$Subject<*>
 };
 
 const testOptions = keyring.getPairs().map((pair) => {
diff --git a/packages/app-testing/src/Nonce.js b/packages/app-testing/src/Nonce.js
index d45ab62faf..2aabc011f8 100644
--- a/packages/app-testing/src/Nonce.js
+++ b/packages/app-testing/src/Nonce.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from './types';
 
 import React from 'react';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
@@ -16,13 +16,15 @@ import { senderAddr, senderIndex } from './subjects';
 type Props = BaseProps & {};
 
 const SenderNonce = withObservableParams(RxNonce, senderAddr);
-const onNonceChange = (value: Uint8Array) => {
+const onNonceChange = (value) => {
+  // flowlint-next-line sketchy-null-mixed:off
   if (!value || value.length !== 8) {
     return;
   }
 
   senderIndex.next(
-    u8aToBn(value, 64, true)
+    // flowlint-next-line unclear-type:off
+    u8aToBn(((value: any): Uint8Array), true)
   );
 };
 
diff --git a/packages/app-testing/src/Recipient.js b/packages/app-testing/src/Recipient.js
index 99e0fc930e..a1b26a6ede 100644
--- a/packages/app-testing/src/Recipient.js
+++ b/packages/app-testing/src/Recipient.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from './types';
 
 import React from 'react';
 
diff --git a/packages/app-testing/src/Sender.js b/packages/app-testing/src/Sender.js
index d7f7632e1f..27d78c97b6 100644
--- a/packages/app-testing/src/Sender.js
+++ b/packages/app-testing/src/Sender.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from './types';
 
 import React from 'react';
 
diff --git a/packages/app-testing/src/StakingTransfer/Amount.js b/packages/app-testing/src/StakingTransfer/Amount.js
new file mode 100644
index 0000000000..7d0ee4346f
--- /dev/null
+++ b/packages/app-testing/src/StakingTransfer/Amount.js
@@ -0,0 +1,40 @@
+// 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 { BaseProps } from '../types';
+
+import BN from 'bn.js';
+import React from 'react';
+import Input from 'semantic-ui-react/dist/es/elements/Input';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+
+import { amount } from './subjects';
+
+type Props = BaseProps & {};
+
+const onChange = (event, { value }) => {
+  amount.next(
+    new BN(value || 0)
+  );
+};
+
+export default function Amount ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--split', className].join(' ')}
+      style={style}
+    >
+      <div className='small'>
+        <Label>sending an amount of</Label>
+        <Input
+          defaultValue={0}
+          min={0}
+          onChange={onChange}
+          type='number'
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app-testing/src/StakingTransfer/index.js b/packages/app-testing/src/StakingTransfer/index.js
index 1409885afe..7074b45a6f 100644
--- a/packages/app-testing/src/StakingTransfer/index.js
+++ b/packages/app-testing/src/StakingTransfer/index.js
@@ -3,45 +3,25 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '@polkadot/portal/types';
+import type { BaseProps } from '../types';
 
 import './StakingTransfer.css';
 
-import BN from 'bn.js';
 import React from 'react';
-import Input from 'semantic-ui-react/dist/es/elements/Input';
-import Label from 'semantic-ui-react/dist/es/elements/Label';
 
 import Recipient from '../Recipient';
+import Amount from './Amount';
 import getValues from './getValues';
-import { amount } from './subjects';
 
 type Props = BaseProps & {};
 
-const onChangeAmount = (event, { value }) => {
-  amount.next(
-    new BN(value || 0)
-  );
-};
-
 function StakingTransfer ({ className, style }: Props) {
   return (
     <div
       className={['testing--StakingTransfer', className].join(' ')}
       style={style}
     >
-      <div className='testing--split'>
-        <div className='small'>
-          <Label>sending an amount of</Label>
-          <Input
-            defaultValue={0}
-            min={0}
-            onChange={onChangeAmount}
-            type='number'
-          />
-        </div>
-      </div>
-
+      <Amount />
       <Recipient />
     </div>
   );
diff --git a/packages/app-testing/src/encode/index.js b/packages/app-testing/src/encode/index.js
index 8b967e6a2f..fd7cd2e96e 100644
--- a/packages/app-testing/src/encode/index.js
+++ b/packages/app-testing/src/encode/index.js
@@ -6,22 +6,27 @@
 // TODO: Move to API
 
 import type BN from 'bn.js';
+import type { KeyringPair } from '@polkadot/util-keyring/types';
 import type { Extrinsic } from '../extrinsics/types';
 
+const assert = require('@polkadot/util/assert');
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 const u8aConcat = require('@polkadot/util/u8a/concat');
 
 const encodeParams = require('./params');
 
-module.exports = function encode (extrinsic: Extrinsic, sender: KeyringPair, nonce: number | BN, values: Array<mixed>): Uint8Array {
-  const { index, params } = extrinsic;
+module.exports = function encode ({ index, params }: Extrinsic, sender?: ?KeyringPair, nonce: number | BN, values: Array<mixed>): Uint8Array {
+  assert(sender, 'Expected a valid sender to extrinsic encode');
+
   const encodedParams = encodeParams(values, params);
   const message = u8aConcat(
+    // $FlowFixMe sender checked above
     sender.publicKey(),
     bnToU8a(nonce, 64, true),
     index,
     encodedParams
   );
+  // $FlowFixMe sender checked above
   const signature = sender.sign(message);
 
   return u8aConcat(message, signature);
diff --git a/packages/app-testing/src/encode/param.js b/packages/app-testing/src/encode/param.js
index 524c30b3d7..cc1a3088f2 100644
--- a/packages/app-testing/src/encode/param.js
+++ b/packages/app-testing/src/encode/param.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Extrinsic$Type } from '../../extrinsics/types';
+import type { Extrinsic$Type } from '../extrinsics/types';
 
 const bnToU8a = require('@polkadot/util/bn/toU8a');
 
diff --git a/packages/app-testing/src/encode/params.js b/packages/app-testing/src/encode/params.js
index b63de0908b..10fb0870e1 100644
--- a/packages/app-testing/src/encode/params.js
+++ b/packages/app-testing/src/encode/params.js
@@ -3,13 +3,12 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Extrinsic$Params } from '../../extrinsics/types';
+import type { Extrinsic$Params } from '../extrinsics/types';
 
 const u8aConcat = require('@polkadot/util/u8a/concat');
 
 const encodeParam = require('./param');
 
-// flowlint-next-line unclear-type:off
 module.exports = function encodeParams (values: Array<mixed>, params: Extrinsic$Params): Uint8Array {
   return u8aConcat.apply(null, values.map((value, index) => {
     return encodeParam(value, params[index]);
diff --git a/packages/app-testing/src/extrinsics/index.js b/packages/app-testing/src/extrinsics/index.js
index 93c2876824..5bbf969063 100644
--- a/packages/app-testing/src/extrinsics/index.js
+++ b/packages/app-testing/src/extrinsics/index.js
@@ -33,25 +33,24 @@ const flattenned: Extrinsics = Object
     const section = all[sectionName];
     const sectionIndex = bnToU8a(_index, 8);
 
-    Object
+    return Object
       .keys(section)
       .reduce((flat, method, _index) => {
         const name = `${sectionName}_${method}`;
         const methodIndex = bnToU8a(_index, 8);
         const index = u8aConcat(sectionIndex, methodIndex);
-        const indexHex = u8aToHex(index, 16);
-        const expanded = Object.assign(({
+        const indexHex = u8aToHex(index);
+
+        flat[name] = {
           index,
           indexHex,
-          name
-        }: $Shape<Extrinsic>), section[method]);
-
-        flat[name] = expanded;
+          name,
+          // flowlint-next-line inexact-spread:off
+          ...section[method]
+        };
 
         return flat;
       }, flat);
-
-    return flat;
   }, ({}: $Shape<Extrinsics>));
 
 module.exports = flattenned;
diff --git a/packages/app-testing/src/types.js b/packages/app-testing/src/types.js
new file mode 100644
index 0000000000..b76391d084
--- /dev/null
+++ b/packages/app-testing/src/types.js
@@ -0,0 +1,17 @@
+// 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/rx-api/types';
+
+export type BaseProps = {
+  className?: string,
+  style?: {
+    [string]: string
+  }
+};
+
+export type BaseContext = {
+  api: RxApiInterface
+};
diff --git a/packages/portal/package.json b/packages/portal/package.json
index b4530eded3..8bd92c6c95 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@polkadot/app-home": "^0.1.0",
     "@polkadot/app-testing": "^0.1.0",
-    "@polkadot/rx-react": "^0.2.8",
+    "@polkadot/rx-react": "^0.2.9",
     "@polkadot/ui-react": "^0.9.10",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
diff --git a/packages/portal/src/Content/index.js b/packages/portal/src/Content/index.js
index 3baac23b83..fc84c92123 100644
--- a/packages/portal/src/Content/index.js
+++ b/packages/portal/src/Content/index.js
@@ -23,11 +23,11 @@ export default translate(['portal'])(
         style={style}
       >
         {
-          routes.map(({ component, isExact, key, path }) => (
+          routes.map(({ component, isExact, name, path }) => (
             <Route
               component={component}
               exact={isExact}
-              key={key}
+              key={name}
               path={path}
             />
           ))
diff --git a/packages/portal/src/SideBar/Item.js b/packages/portal/src/SideBar/Item.js
index bf3c8c7231..bc3dcb9c43 100644
--- a/packages/portal/src/SideBar/Item.js
+++ b/packages/portal/src/SideBar/Item.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps, Routes } from '../types';
+import type { BaseProps, Route } from '../types';
 
 import './Item.css';
 
@@ -12,7 +12,7 @@ import { NavLink } from 'react-router-dom';
 import Icon from 'semantic-ui-react/dist/es/elements/Icon';
 import Menu from 'semantic-ui-react/dist/es/collections/Menu';
 
-type Props = BaseProps & Routes & {};
+type Props = BaseProps & Route & {};
 
 export default function Item ({ className, i18n, icon, isExact, name, path, style, t }: Props) {
   return (
diff --git a/packages/portal/src/SideBar/index.js b/packages/portal/src/SideBar/index.js
index 66159cd726..994f95faff 100644
--- a/packages/portal/src/SideBar/index.js
+++ b/packages/portal/src/SideBar/index.js
@@ -30,7 +30,7 @@ export default translate(['portal'])(
           {
             routes.map((props) => (
               <Item
-                name={props.key}
+                key={props.name}
                 t={t}
                 {...props}
               />
diff --git a/packages/portal/src/routes/home.js b/packages/portal/src/routes/home.js
index 52754f4c68..0632f77019 100644
--- a/packages/portal/src/routes/home.js
+++ b/packages/portal/src/routes/home.js
@@ -16,7 +16,7 @@ export default ([
     icon: 'home',
     isExact: true,
     isHidden: false,
-    key: 'home',
+    name: 'home',
     path: '/'
   }
 ]: Routes);
diff --git a/packages/portal/src/routes/testing.js b/packages/portal/src/routes/testing.js
index d8d74f0a89..3b256fb6b3 100644
--- a/packages/portal/src/routes/testing.js
+++ b/packages/portal/src/routes/testing.js
@@ -16,7 +16,7 @@ export default ([
     icon: 'braille',
     isExact: false,
     isHidden: false,
-    key: 'testing',
+    name: 'testing',
     path: '/testing'
   }
 ]: Routes);
diff --git a/packages/portal/src/types.js b/packages/portal/src/types.js
index 2d5a7273d6..15c2e5adeb 100644
--- a/packages/portal/src/types.js
+++ b/packages/portal/src/types.js
@@ -19,8 +19,8 @@ export type BaseContext = {
 
 export type Route = {
   component: React$StatelessFunctionalComponent<*>,
-  i18n: I18Nex$tTranslate$Config,
-  icon: React$StatelessFunctionalComponent<*>,
+  i18n: I18Next$Translate$Config,
+  icon: React$StatelessFunctionalComponent<*> | string,
   isExact: boolean,
   isHidden: boolean,
   name: string,
diff --git a/yarn.lock b/yarn.lock
index 73edddaef2..d28c78ad2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1299,20 +1299,20 @@
     "@polkadot/util" "^0.18.4"
     babel-runtime "^6.26.0"
 
-"@polkadot/rx-api@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.8.tgz#12e08d62afc4eb623c37279bba5927b790be8e2a"
+"@polkadot/rx-api@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.9.tgz#b495cab218fd80bd7d8090b0898b689fcca16e4f"
   dependencies:
     "@polkadot/api" "^0.8.14"
     "@polkadot/api-provider" "^0.8.14"
     rxjs "^5.5.10"
 
-"@polkadot/rx-react@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.8.tgz#75fdaf5dab36b11ae92f98c8d29be41753668d73"
+"@polkadot/rx-react@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.9.tgz#55a37178d47bc53b42fbe948c136483b2e9e7377"
   dependencies:
-    "@polkadot/rx-api" "^0.2.8"
-    "@polkadot/util" "^0.18.6"
+    "@polkadot/rx-api" "^0.2.9"
+    "@polkadot/util" "^0.19.1"
 
 "@polkadot/ui-identicon@^0.9.10":
   version "0.9.10"

From 6ccef754545aa1afca084c90bf9d2d0a9d05aa01 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 17:29:25 +0200
Subject: [PATCH 14/16] First-pass on submission there

---
 .babelrc                                      | 10 +---
 package.json                                  |  4 +-
 packages/app-home/package.json                |  2 +-
 packages/app-testing/package.json             |  2 +-
 packages/app-testing/src/Account.js           |  5 +-
 .../src/CallDisplay/CallDisplay.css           |  2 +-
 packages/app-testing/src/CallDisplay/index.js |  8 ++-
 packages/app-testing/src/Nonce.js             |  1 +
 .../src/Staking/Stake/getValues.js            |  8 +++
 .../app-testing/src/Staking/Stake/index.js    | 25 ++++++++++
 .../Transfer}/Amount.js                       |  2 +-
 .../Transfer}/getValues.js                    |  2 +-
 .../Transfer}/index.js                        |  6 +--
 .../Transfer}/subjects.js                     |  0
 .../src/Staking/Unstake/getValues.js          |  8 +++
 .../app-testing/src/Staking/Unstake/index.js  | 25 ++++++++++
 .../src/StakingTransfer/StakingTransfer.css   |  7 ---
 packages/app-testing/src/index.css            |  5 ++
 packages/portal/package.json                  |  2 +-
 yarn.lock                                     | 49 ++++++++++++++-----
 20 files changed, 131 insertions(+), 42 deletions(-)
 create mode 100644 packages/app-testing/src/Staking/Stake/getValues.js
 create mode 100644 packages/app-testing/src/Staking/Stake/index.js
 rename packages/app-testing/src/{StakingTransfer => Staking/Transfer}/Amount.js (95%)
 rename packages/app-testing/src/{StakingTransfer => Staking/Transfer}/getValues.js (87%)
 rename packages/app-testing/src/{StakingTransfer => Staking/Transfer}/index.js (83%)
 rename packages/app-testing/src/{StakingTransfer => Staking/Transfer}/subjects.js (100%)
 create mode 100644 packages/app-testing/src/Staking/Unstake/getValues.js
 create mode 100644 packages/app-testing/src/Staking/Unstake/index.js
 delete mode 100644 packages/app-testing/src/StakingTransfer/StakingTransfer.css

diff --git a/.babelrc b/.babelrc
index ced512cda2..b3a3588e0e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,11 +1,3 @@
 {
-  "extends": "@polkadot/dev/config/babel",
-  "plugins": [
-    ["module-resolver", {
-      "alias": {
-        "^@polkadot/portal-(chains|db-chain|db|p2p|rpc|runtime|state|wasm)(.*)": "./packages/portal-\\1/src\\2",
-        "^@polkadot/portal": "./packages/portal/src"
-      }
-    }]
-  ]
+  "extends": "@polkadot/dev/config/babel"
 }
diff --git a/package.json b/package.json
index a43e6153df..d73f8f9c4b 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,13 @@
     "build": "cd packages/portal && react-scripts build",
     "check": "eslint packages && flow check",
     "start": "cd packages/portal && react-scripts start",
-    "test": "jest --coverage"
+    "test": "echo 'to tests executed'"
   },
   "dependencies": {
     "@polkadot/portal": "^0.1.0"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.17.8",
+    "@polkadot/dev": "^0.17.9",
     "lerna": "^2.5.1",
     "react-scripts": "^2.0.0-next.b2fd8db8"
   },
diff --git a/packages/app-home/package.json b/packages/app-home/package.json
index a817e59530..2da1196dcd 100644
--- a/packages/app-home/package.json
+++ b/packages/app-home/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.9",
+    "@polkadot/rx-react": "^0.2.13",
     "@polkadot/util": "^0.19.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
diff --git a/packages/app-testing/package.json b/packages/app-testing/package.json
index 2899613d6e..02596fa776 100644
--- a/packages/app-testing/package.json
+++ b/packages/app-testing/package.json
@@ -13,7 +13,7 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.9",
+    "@polkadot/rx-react": "^0.2.13",
     "@polkadot/ui-react": "^0.9.10",
     "@polkadot/util": "^0.19.1",
     "@polkadot/util-keyring": "^0.19.1",
diff --git a/packages/app-testing/src/Account.js b/packages/app-testing/src/Account.js
index 7ad1a3b37b..5a166ea3bc 100644
--- a/packages/app-testing/src/Account.js
+++ b/packages/app-testing/src/Account.js
@@ -34,7 +34,10 @@ export default function Account ({ className, label, subject, style }: Props) {
       </div>
       <div className='small'>
         <Label>with an available balance of</Label>
-        <AccountBalance className='ui disabled dropdown selection' />
+        <AccountBalance
+          className='ui disabled dropdown selection'
+          classNameUpdated='hasUpdated'
+        />
       </div>
     </div>
   );
diff --git a/packages/app-testing/src/CallDisplay/CallDisplay.css b/packages/app-testing/src/CallDisplay/CallDisplay.css
index f75b2471b6..b03e533676 100644
--- a/packages/app-testing/src/CallDisplay/CallDisplay.css
+++ b/packages/app-testing/src/CallDisplay/CallDisplay.css
@@ -12,7 +12,7 @@
 }
 
 .testing--CallDisplay-Component {
-  margin-bottom: 1.5rem;
+  margin: 1.5rem 0;
 }
 
 .testing--CallDisplay-Button {}
diff --git a/packages/app-testing/src/CallDisplay/index.js b/packages/app-testing/src/CallDisplay/index.js
index abb7b19176..eebe4bebd0 100644
--- a/packages/app-testing/src/CallDisplay/index.js
+++ b/packages/app-testing/src/CallDisplay/index.js
@@ -12,7 +12,9 @@ import React from 'react';
 import Button from 'semantic-ui-react/dist/es/elements/Button';
 import withObservable from '@polkadot/rx-react/with/observable';
 
-import StakingTransfer from '../StakingTransfer';
+import StakingStake from '../Staking/Stake';
+import StakingTransfer from '../Staking/Transfer';
+import StakingUnstake from '../Staking/Unstake';
 import { extrinsicName } from '../subjects';
 import ErrorComponent from './Error';
 import submitExtrinsic from './submit';
@@ -26,7 +28,9 @@ type Props = BaseProps & {
 };
 
 const COMPONENTS = {
-  'staking_transfer': StakingTransfer
+  'staking_stake': StakingStake,
+  'staking_transfer': StakingTransfer,
+  'staking_unstake': StakingUnstake
 };
 
 function CallDisplay ({ className, style, value }: Props, { api }: BaseContext) {
diff --git a/packages/app-testing/src/Nonce.js b/packages/app-testing/src/Nonce.js
index 2aabc011f8..44bdc95af0 100644
--- a/packages/app-testing/src/Nonce.js
+++ b/packages/app-testing/src/Nonce.js
@@ -38,6 +38,7 @@ export default function Nonce ({ className, style }: Props) {
         <Label>with an index</Label>
         <SenderNonce
           className='ui disabled dropdown selection'
+          classNameUpdated='hasUpdated'
           onChange={onNonceChange}
         />
       </div>
diff --git a/packages/app-testing/src/Staking/Stake/getValues.js b/packages/app-testing/src/Staking/Stake/getValues.js
new file mode 100644
index 0000000000..5bed140c54
--- /dev/null
+++ b/packages/app-testing/src/Staking/Stake/getValues.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
+
+export default function getValues (): Array<mixed> {
+  return [];
+}
diff --git a/packages/app-testing/src/Staking/Stake/index.js b/packages/app-testing/src/Staking/Stake/index.js
new file mode 100644
index 0000000000..0bf01ba193
--- /dev/null
+++ b/packages/app-testing/src/Staking/Stake/index.js
@@ -0,0 +1,25 @@
+// 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 { BaseProps } from '../../types';
+
+import React from 'react';
+
+import getValues from './getValues';
+
+type Props = BaseProps & {};
+
+function StakingStake ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--StakingStake', className].join(' ')}
+      style={style}
+    />
+  );
+}
+
+StakingStake.getValues = getValues;
+
+export default StakingStake;
diff --git a/packages/app-testing/src/StakingTransfer/Amount.js b/packages/app-testing/src/Staking/Transfer/Amount.js
similarity index 95%
rename from packages/app-testing/src/StakingTransfer/Amount.js
rename to packages/app-testing/src/Staking/Transfer/Amount.js
index 7d0ee4346f..e6965048b8 100644
--- a/packages/app-testing/src/StakingTransfer/Amount.js
+++ b/packages/app-testing/src/Staking/Transfer/Amount.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '../types';
+import type { BaseProps } from '../../types';
 
 import BN from 'bn.js';
 import React from 'react';
diff --git a/packages/app-testing/src/StakingTransfer/getValues.js b/packages/app-testing/src/Staking/Transfer/getValues.js
similarity index 87%
rename from packages/app-testing/src/StakingTransfer/getValues.js
rename to packages/app-testing/src/Staking/Transfer/getValues.js
index 849b0f4d11..a22ed7d81d 100644
--- a/packages/app-testing/src/StakingTransfer/getValues.js
+++ b/packages/app-testing/src/Staking/Transfer/getValues.js
@@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import { recipientAddr } from '../subjects';
+import { recipientAddr } from '../../subjects';
 import { amount } from './subjects';
 
 export default function getValues (): Array<mixed> {
diff --git a/packages/app-testing/src/StakingTransfer/index.js b/packages/app-testing/src/Staking/Transfer/index.js
similarity index 83%
rename from packages/app-testing/src/StakingTransfer/index.js
rename to packages/app-testing/src/Staking/Transfer/index.js
index 7074b45a6f..11c030a463 100644
--- a/packages/app-testing/src/StakingTransfer/index.js
+++ b/packages/app-testing/src/Staking/Transfer/index.js
@@ -3,13 +3,11 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '../types';
-
-import './StakingTransfer.css';
+import type { BaseProps } from '../../types';
 
 import React from 'react';
 
-import Recipient from '../Recipient';
+import Recipient from '../../Recipient';
 import Amount from './Amount';
 import getValues from './getValues';
 
diff --git a/packages/app-testing/src/StakingTransfer/subjects.js b/packages/app-testing/src/Staking/Transfer/subjects.js
similarity index 100%
rename from packages/app-testing/src/StakingTransfer/subjects.js
rename to packages/app-testing/src/Staking/Transfer/subjects.js
diff --git a/packages/app-testing/src/Staking/Unstake/getValues.js b/packages/app-testing/src/Staking/Unstake/getValues.js
new file mode 100644
index 0000000000..5bed140c54
--- /dev/null
+++ b/packages/app-testing/src/Staking/Unstake/getValues.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
+
+export default function getValues (): Array<mixed> {
+  return [];
+}
diff --git a/packages/app-testing/src/Staking/Unstake/index.js b/packages/app-testing/src/Staking/Unstake/index.js
new file mode 100644
index 0000000000..45634ade52
--- /dev/null
+++ b/packages/app-testing/src/Staking/Unstake/index.js
@@ -0,0 +1,25 @@
+// 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 { BaseProps } from '../../types';
+
+import React from 'react';
+
+import getValues from './getValues';
+
+type Props = BaseProps & {};
+
+function StakingUnstake ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--StakingUnstake', className].join(' ')}
+      style={style}
+    />
+  );
+}
+
+StakingUnstake.getValues = getValues;
+
+export default StakingUnstake;
diff --git a/packages/app-testing/src/StakingTransfer/StakingTransfer.css b/packages/app-testing/src/StakingTransfer/StakingTransfer.css
deleted file mode 100644
index 19ba00e9fa..0000000000
--- a/packages/app-testing/src/StakingTransfer/StakingTransfer.css
+++ /dev/null
@@ -1,7 +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. */
-
-.testing--StakingTransfer {
-  margin-top: 1.5rem;
-}
diff --git a/packages/app-testing/src/index.css b/packages/app-testing/src/index.css
index dcceb38721..648fe00407 100644
--- a/packages/app-testing/src/index.css
+++ b/packages/app-testing/src/index.css
@@ -39,3 +39,8 @@
   flex: 0 25%;
   min-width: 0;
 }
+
+.hasUpdated {
+  background: #ffffe0 !important;
+  transition: all 0.7s ease-in-out;
+}
diff --git a/packages/portal/package.json b/packages/portal/package.json
index 8bd92c6c95..d1ee33a290 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@polkadot/app-home": "^0.1.0",
     "@polkadot/app-testing": "^0.1.0",
-    "@polkadot/rx-react": "^0.2.9",
+    "@polkadot/rx-react": "^0.2.13",
     "@polkadot/ui-react": "^0.9.10",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
diff --git a/yarn.lock b/yarn.lock
index d28c78ad2c..39e0677dbb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1212,9 +1212,9 @@
     "@polkadot/util" "^0.18.6"
     babel-runtime "^6.26.0"
 
-"@polkadot/dev@^0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/dev/-/dev-0.17.8.tgz#d22daea75e88587250c4f8d7ebdda1dd957570df"
+"@polkadot/dev@^0.17.9":
+  version "0.17.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/dev/-/dev-0.17.9.tgz#12316416384eb3da5e926f2e875902a3c8e4e5a3"
   dependencies:
     babel-cli "^6.26.0"
     babel-core "^6.26.0"
@@ -1299,19 +1299,19 @@
     "@polkadot/util" "^0.18.4"
     babel-runtime "^6.26.0"
 
-"@polkadot/rx-api@^0.2.9":
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.9.tgz#b495cab218fd80bd7d8090b0898b689fcca16e4f"
+"@polkadot/rx-api@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.13.tgz#94004e0e3a134bf75f50e0b22e5fa59c136db0e1"
   dependencies:
     "@polkadot/api" "^0.8.14"
     "@polkadot/api-provider" "^0.8.14"
     rxjs "^5.5.10"
 
-"@polkadot/rx-react@^0.2.9":
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.9.tgz#55a37178d47bc53b42fbe948c136483b2e9e7377"
+"@polkadot/rx-react@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.13.tgz#291e7e18eeaeea4dc3d16e50d932ca46da9c492d"
   dependencies:
-    "@polkadot/rx-api" "^0.2.9"
+    "@polkadot/rx-api" "^0.2.13"
     "@polkadot/util" "^0.19.1"
 
 "@polkadot/ui-identicon@^0.9.10":
@@ -2091,6 +2091,16 @@ babel-plugin-macros@2.0.0:
   dependencies:
     cosmiconfig "3.1.0"
 
+babel-plugin-module-resolver@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.1.1.tgz#881cf67e3d4b8400d5eaaefc1be44d2dc1fe404f"
+  dependencies:
+    find-babel-config "^1.1.0"
+    glob "^7.1.2"
+    pkg-up "^2.0.0"
+    reselect "^3.0.1"
+    resolve "^1.4.0"
+
 babel-plugin-named-asset-import@1.0.0-next.b2fd8db8:
   version "1.0.0-next.b2fd8db8"
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-1.0.0-next.b2fd8db8.tgz#bd32f356288cbab326196b5f75547bc0dedf540a"
@@ -4920,6 +4930,13 @@ finalhandler@1.1.1:
     statuses "~1.4.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.1.0.tgz#acc01043a6749fec34429be6b64f542ebb5d6355"
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
@@ -8066,7 +8083,7 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-pkg-up@2.0.0:
+pkg-up@2.0.0, pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
   dependencies:
@@ -9238,6 +9255,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+reselect@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -9281,6 +9302,12 @@ resolve@^1.3.2, resolve@^1.3.3, resolve@^1.5.0:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.4.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"

From 714a5fff2ceffc0a84c49092a14cefc05afbee7b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 17:42:03 +0200
Subject: [PATCH 15/16] Cleanup eslint

---
 packages/app-testing/src/CallDisplay/Error.js       | 7 +++++--
 packages/app-testing/src/CallSelect.js              | 2 +-
 packages/app-testing/src/InputAddress/index.js      | 2 +-
 packages/app-testing/src/Nonce.js                   | 2 +-
 packages/app-testing/src/Staking/Transfer/Amount.js | 2 +-
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/app-testing/src/CallDisplay/Error.js b/packages/app-testing/src/CallDisplay/Error.js
index b596981001..1c76b7a78e 100644
--- a/packages/app-testing/src/CallDisplay/Error.js
+++ b/packages/app-testing/src/CallDisplay/Error.js
@@ -9,9 +9,12 @@ import './CallDisplay.css';
 
 import React from 'react';
 
-export default function Error (props: BaseProps): React$Node {
+export default function Error ({ className, style }: BaseProps): React$Node {
   return (
-    <div className='testing--CallDisplay-error'>
+    <div
+      className={['testing--CallDisplay-error', className].join(' ')}
+      style={style}
+    >
       ERROR: Invalid or unimplemented extrinsic function
     </div>
   );
diff --git a/packages/app-testing/src/CallSelect.js b/packages/app-testing/src/CallSelect.js
index d63ac0666d..8ae5db7d6c 100644
--- a/packages/app-testing/src/CallSelect.js
+++ b/packages/app-testing/src/CallSelect.js
@@ -14,7 +14,7 @@ import extrinsics from './extrinsics';
 
 type Props = BaseProps & {};
 
-const onChange = (event, { value }) => {
+const onChange = (event: SyntheticEvent<*>, { value }): void => {
   extrinsicName.next(value);
 };
 
diff --git a/packages/app-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
index 9b541dd17b..7f991d2d6d 100644
--- a/packages/app-testing/src/InputAddress/index.js
+++ b/packages/app-testing/src/InputAddress/index.js
@@ -32,7 +32,7 @@ const testOptions = keyring.getPairs().map((pair) => {
 });
 
 export default function InputAddress (props: Props): React$Node {
-  const onChange = (event, { value }) => {
+  const onChange = (event: SyntheticEvent<*>, { value }): void => {
     if (props.subject) {
       props.subject.next(value);
     }
diff --git a/packages/app-testing/src/Nonce.js b/packages/app-testing/src/Nonce.js
index 44bdc95af0..470d6d1eaa 100644
--- a/packages/app-testing/src/Nonce.js
+++ b/packages/app-testing/src/Nonce.js
@@ -16,7 +16,7 @@ import { senderAddr, senderIndex } from './subjects';
 type Props = BaseProps & {};
 
 const SenderNonce = withObservableParams(RxNonce, senderAddr);
-const onNonceChange = (value) => {
+const onNonceChange = (value): void => {
   // flowlint-next-line sketchy-null-mixed:off
   if (!value || value.length !== 8) {
     return;
diff --git a/packages/app-testing/src/Staking/Transfer/Amount.js b/packages/app-testing/src/Staking/Transfer/Amount.js
index e6965048b8..e92be864d1 100644
--- a/packages/app-testing/src/Staking/Transfer/Amount.js
+++ b/packages/app-testing/src/Staking/Transfer/Amount.js
@@ -14,7 +14,7 @@ import { amount } from './subjects';
 
 type Props = BaseProps & {};
 
-const onChange = (event, { value }) => {
+const onChange = (event: SyntheticEvent<*>, { value }): void => {
   amount.next(
     new BN(value || 0)
   );

From e81ff2b9b6e6d6cf98be1279199c27980db43a9f Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Apr 2018 17:45:40 +0200
Subject: [PATCH 16/16] dangling (invalid) eslint warnings

---
 packages/app-testing/src/CallSelect.js              | 1 +
 packages/app-testing/src/InputAddress/index.js      | 1 +
 packages/app-testing/src/Staking/Transfer/Amount.js | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/app-testing/src/CallSelect.js b/packages/app-testing/src/CallSelect.js
index 8ae5db7d6c..c88b77604e 100644
--- a/packages/app-testing/src/CallSelect.js
+++ b/packages/app-testing/src/CallSelect.js
@@ -14,6 +14,7 @@ import extrinsics from './extrinsics';
 
 type Props = BaseProps & {};
 
+// eslint-disable-next-line no-unused-vars
 const onChange = (event: SyntheticEvent<*>, { value }): void => {
   extrinsicName.next(value);
 };
diff --git a/packages/app-testing/src/InputAddress/index.js b/packages/app-testing/src/InputAddress/index.js
index 7f991d2d6d..20c0e37b79 100644
--- a/packages/app-testing/src/InputAddress/index.js
+++ b/packages/app-testing/src/InputAddress/index.js
@@ -32,6 +32,7 @@ const testOptions = keyring.getPairs().map((pair) => {
 });
 
 export default function InputAddress (props: Props): React$Node {
+  // eslint-disable-next-line no-unused-vars
   const onChange = (event: SyntheticEvent<*>, { value }): void => {
     if (props.subject) {
       props.subject.next(value);
diff --git a/packages/app-testing/src/Staking/Transfer/Amount.js b/packages/app-testing/src/Staking/Transfer/Amount.js
index e92be864d1..943b0df8d6 100644
--- a/packages/app-testing/src/Staking/Transfer/Amount.js
+++ b/packages/app-testing/src/Staking/Transfer/Amount.js
@@ -14,6 +14,7 @@ import { amount } from './subjects';
 
 type Props = BaseProps & {};
 
+// eslint-disable-next-line no-unused-vars
 const onChange = (event: SyntheticEvent<*>, { value }): void => {
   amount.next(
     new BN(value || 0)