submitExtrinsics from app-testing

.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"
 }

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<*>
+}

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"
   },

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.13",
+    "@polkadot/util": "^0.19.1",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "semantic-ui-css": "^2.3.1",
+    "semantic-ui-react": "^0.79.1"
+  }
+}

packages/content-testing/src/Body/Body.css → packages/app-home/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 {
-  padding: 0;
-}
+.home--App {}
 
-.testing--Body-BlockNumber {
+.home--App-BestNumber {
+  font-size: 3rem;
+  line-height: 3rem;
   margin-bottom: 1rem;
   opacity: 0.5;
   text-align: right;

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>
+  );
+}

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. */

packages/content-testing/src/subject/addrSender.js → packages/app-home/src/index.js

@@ -3,8 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import addr from './addr';
+import './index.css';
 
-const subject = addr();
+import App from './App';
 
-export default subject;
+export default App;

packages/content-testing/package.json → 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",
@@ -13,10 +13,11 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.2",
+    "@polkadot/rx-react": "^0.2.13",
     "@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",
+    "prop-types": "^15.6.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "semantic-ui-css": "^2.3.1",

packages/app-testing/src/Account.js

@@ -0,0 +1,44 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from './types';
+
+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$BehaviorSubject<*>
+};
+
+export default function Account ({ className, label, subject, style }: Props) {
+  const AccountBalance = withObservableParams(Balance, subject);
+
+  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'
+          classNameUpdated='hasUpdated'
+        />
+      </div>
+    </div>
+  );
+}

packages/app-testing/src/App.js

@@ -0,0 +1,29 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from './types';
+
+import React from 'react';
+
+import CallDisplay from './CallDisplay';
+import CallSelect from './CallSelect';
+import Nonce from './Nonce';
+import Sender from './Sender';
+
+type Props = BaseProps & {};
+
+export default function App ({ className, style }: Props) {
+  return (
+    <div
+      className={['testing--App', className].join(' ')}
+      style={style}
+    >
+      <Sender />
+      <CallSelect />
+      <Nonce />
+      <CallDisplay />
+    </div>
+  );
+}

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: 1.5rem 0;
+}
+
+.testing--CallDisplay-Button {}

packages/app-testing/src/CallDisplay/Error.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 { BaseProps } from '../types';
+
+import './CallDisplay.css';
+
+import React from 'react';
+
+export default function Error ({ className, style }: BaseProps): React$Node {
+  return (
+    <div
+      className={['testing--CallDisplay-error', className].join(' ')}
+      style={style}
+    >
+      ERROR: Invalid or unimplemented extrinsic function
+    </div>
+  );
+}

packages/app-testing/src/CallDisplay/index.js

@@ -0,0 +1,69 @@
+// 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, BaseContext } from '../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 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';
+
+type ValueGetter = {
+  getValues: () => Array<mixed>
+}
+
+type Props = BaseProps & {
+  value?: string;
+};
+
+const COMPONENTS = {
+  'staking_stake': StakingStake,
+  'staking_transfer': StakingTransfer,
+  'staking_unstake': StakingUnstake
+};
+
+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 = () => {
+    // flowlint-next-line unclear-type:off
+    submitExtrinsic(api, value, ((Component: any): ValueGetter).getValues());
+  };
+
+  return (
+    <div
+      className={['testing--CallDisplay', className].join(' ')}
+      style={style}
+    >
+      <Component className='testing--CallDisplay-Component' />
+      <Button
+        className='testing--CallDisplay-Execute'
+        onClick={onSubmit}
+        primary
+      >
+        Submit Extrinsic
+      </Button>
+    </div>
+  );
+}
+
+CallDisplay.contextTypes = {
+  api: PropTypes.object
+};
+
+export default withObservable(CallDisplay, extrinsicName);

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>): void {
+  // TODO: Display some progress once we have a subscription
+  api.author
+    .submitExtrinsic(
+      encode(
+        extrinsics[method],
+        // flowlint-next-line unclear-type:off
+        keyring.getPair(((senderAddr.getValue(): any): Uint8Array)),
+        senderIndex.getValue() || 0,
+        values
+      )
+    )
+    .toPromise()
+    .then((result) => {
+      console.log('submitExtrinsic: result=', result);
+    })
+    .catch((error) => {
+      console.error('submitExtrinsic: error=', error);
+    });
+}