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 ( +
+
+ + +
+
+ + +
+
+ ); +} 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 ( +
+ + + + + +
+ ); +} 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 ( - -
- - -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- - ); -} 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 ( +
+ ERROR: Invalid or unimplemented extrinsic function +
+ ); +} 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 ( +
+ + +
+ ); +} + +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 ( +
+
+ + +
+
+ ); +} 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 ( ); } 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 ( + + ); +} 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 ( + + ); +} 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 ( +
+
+
+ + +
+
+ + +
+ ); +} 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( - - - + + + + + , // 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":