From bd6f343cbe1f70c4ef5084af4c8d4d8e23297808 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 22 Nov 2016 11:54:20 +0100 Subject: [PATCH] DappRegistry (#3405) * Initial version, just loading * Warning dialog * Retrive & show applications * Display completed * Edit/New mode start * Display distry state, resolve hashes to urls * Move buttons to top-level * Rework display * Update error handling & dirty checks * Formatting * Split sections into components * Styling updates * Slight styling adjustments * Start delete modal * Add modals for register & update * Flesh-out register modal * Register error handling * Register registers * List refresh on add & remove * Update operational * Simplify, remove bg image * Really remove bg * fix case * Collapse text-only components --- js/src/dapps/dappreg.html | 17 + js/src/dapps/dappreg.js | 35 ++ .../dapps/dappreg/Application/application.css | 58 +++ .../dapps/dappreg/Application/application.js | 64 +++ js/src/dapps/dappreg/Application/index.js | 17 + js/src/dapps/dappreg/Button/button.css | 38 ++ js/src/dapps/dappreg/Button/button.js | 52 ++ js/src/dapps/dappreg/Button/index.js | 17 + js/src/dapps/dappreg/ButtonBar/buttonBar.css | 21 + js/src/dapps/dappreg/ButtonBar/buttonBar.js | 101 ++++ js/src/dapps/dappreg/ButtonBar/index.js | 17 + js/src/dapps/dappreg/Dapp/dapp.css | 19 + js/src/dapps/dappreg/Dapp/dapp.js | 162 ++++++ js/src/dapps/dappreg/Dapp/index.js | 17 + js/src/dapps/dappreg/Input/index.js | 17 + js/src/dapps/dappreg/Input/input.css | 92 ++++ js/src/dapps/dappreg/Input/input.js | 47 ++ js/src/dapps/dappreg/Modal/index.js | 17 + js/src/dapps/dappreg/Modal/modal.css | 116 +++++ js/src/dapps/dappreg/Modal/modal.js | 66 +++ js/src/dapps/dappreg/ModalDelete/index.js | 17 + .../dapps/dappreg/ModalDelete/modalDelete.js | 159 ++++++ js/src/dapps/dappreg/ModalRegister/index.js | 17 + .../dappreg/ModalRegister/modalRegister.js | 159 ++++++ js/src/dapps/dappreg/ModalUpdate/index.js | 17 + .../dapps/dappreg/ModalUpdate/modalUpdate.js | 169 ++++++ js/src/dapps/dappreg/SelectAccount/index.js | 17 + .../dappreg/SelectAccount/selectAccount.js | 49 ++ js/src/dapps/dappreg/SelectDapp/index.js | 17 + js/src/dapps/dappreg/SelectDapp/selectDapp.js | 76 +++ js/src/dapps/dappreg/Warning/index.js | 17 + js/src/dapps/dappreg/Warning/warning.css | 36 ++ js/src/dapps/dappreg/Warning/warning.js | 51 ++ js/src/dapps/dappreg/dappsStore.js | 482 ++++++++++++++++++ js/src/dapps/dappreg/modalStore.js | 266 ++++++++++ js/src/dapps/dappreg/parity.js | 53 ++ js/webpack.config.js | 1 + 37 files changed, 2593 insertions(+) create mode 100644 js/src/dapps/dappreg.html create mode 100644 js/src/dapps/dappreg.js create mode 100644 js/src/dapps/dappreg/Application/application.css create mode 100644 js/src/dapps/dappreg/Application/application.js create mode 100644 js/src/dapps/dappreg/Application/index.js create mode 100644 js/src/dapps/dappreg/Button/button.css create mode 100644 js/src/dapps/dappreg/Button/button.js create mode 100644 js/src/dapps/dappreg/Button/index.js create mode 100644 js/src/dapps/dappreg/ButtonBar/buttonBar.css create mode 100644 js/src/dapps/dappreg/ButtonBar/buttonBar.js create mode 100644 js/src/dapps/dappreg/ButtonBar/index.js create mode 100644 js/src/dapps/dappreg/Dapp/dapp.css create mode 100644 js/src/dapps/dappreg/Dapp/dapp.js create mode 100644 js/src/dapps/dappreg/Dapp/index.js create mode 100644 js/src/dapps/dappreg/Input/index.js create mode 100644 js/src/dapps/dappreg/Input/input.css create mode 100644 js/src/dapps/dappreg/Input/input.js create mode 100644 js/src/dapps/dappreg/Modal/index.js create mode 100644 js/src/dapps/dappreg/Modal/modal.css create mode 100644 js/src/dapps/dappreg/Modal/modal.js create mode 100644 js/src/dapps/dappreg/ModalDelete/index.js create mode 100644 js/src/dapps/dappreg/ModalDelete/modalDelete.js create mode 100644 js/src/dapps/dappreg/ModalRegister/index.js create mode 100644 js/src/dapps/dappreg/ModalRegister/modalRegister.js create mode 100644 js/src/dapps/dappreg/ModalUpdate/index.js create mode 100644 js/src/dapps/dappreg/ModalUpdate/modalUpdate.js create mode 100644 js/src/dapps/dappreg/SelectAccount/index.js create mode 100644 js/src/dapps/dappreg/SelectAccount/selectAccount.js create mode 100644 js/src/dapps/dappreg/SelectDapp/index.js create mode 100644 js/src/dapps/dappreg/SelectDapp/selectDapp.js create mode 100644 js/src/dapps/dappreg/Warning/index.js create mode 100644 js/src/dapps/dappreg/Warning/warning.css create mode 100644 js/src/dapps/dappreg/Warning/warning.js create mode 100644 js/src/dapps/dappreg/dappsStore.js create mode 100644 js/src/dapps/dappreg/modalStore.js create mode 100644 js/src/dapps/dappreg/parity.js diff --git a/js/src/dapps/dappreg.html b/js/src/dapps/dappreg.html new file mode 100644 index 000000000..89c95c472 --- /dev/null +++ b/js/src/dapps/dappreg.html @@ -0,0 +1,17 @@ + + + + + + + + Dapp Registry + + +
+ + + + + + diff --git a/js/src/dapps/dappreg.js b/js/src/dapps/dappreg.js new file mode 100644 index 000000000..243576a34 --- /dev/null +++ b/js/src/dapps/dappreg.js @@ -0,0 +1,35 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React from 'react'; +import ReactDOM from 'react-dom'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import { useStrict } from 'mobx'; + +injectTapEventPlugin(); +useStrict(true); + +import Application from './dappreg/Application'; + +import '../../assets/fonts/Roboto/font.css'; +import '../../assets/fonts/RobotoMono/font.css'; +import './style.css'; +import './dappreg.html'; + +ReactDOM.render( + , + document.querySelector('#container') +); diff --git a/js/src/dapps/dappreg/Application/application.css b/js/src/dapps/dappreg/Application/application.css new file mode 100644 index 000000000..f171d8127 --- /dev/null +++ b/js/src/dapps/dappreg/Application/application.css @@ -0,0 +1,58 @@ +/* Copyright 2015, 2016 Ethcore (UK) Ltd. +/* This file is part of Parity. +/* +/* Parity is free software: you can redistribute it and/or modify +/* it under the terms of the GNU General Public License as published by +/* the Free Software Foundation, either version 3 of the License, or +/* (at your option) any later version. +/* +/* Parity is distributed in the hope that it will be useful, +/* but WITHOUT ANY WARRANTY; without even the implied warranty of +/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +/* GNU General Public License for more details. +/* +/* You should have received a copy of the GNU General Public License +/* along with Parity. If not, see . +*/ + +.body { + color: #333; + background: #eee; + padding: 4.5em 0; + text-align: center; +} + +.apps { + background: #fff; + border-radius: 0.5em; + margin: 0 auto; + max-width: 980px; + padding: 1.5em; + text-align: left; +} + +.footer { + font-size: 0.75em; + margin: 1em; + padding: 1.5em; + text-align: center; +} + +.header { + background: #44e; + border-radius: 0 0 0.25em 0.25em; + color: #fff; + left: 0; + padding: 1em; + position: fixed; + right: 0; + top: 0; + z-index: 25; +} + +.loading { + text-align: center; + padding-top: 5em; + font-size: 2em; + color: #999; +} diff --git a/js/src/dapps/dappreg/Application/application.js b/js/src/dapps/dappreg/Application/application.js new file mode 100644 index 000000000..b5e4d5a97 --- /dev/null +++ b/js/src/dapps/dappreg/Application/application.js @@ -0,0 +1,64 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React, { Component } from 'react'; +import { observer } from 'mobx-react'; + +import DappsStore from '../dappsStore'; + +import ButtonBar from '../ButtonBar'; +import Dapp from '../Dapp'; +import ModalDelete from '../ModalDelete'; +import ModalRegister from '../ModalRegister'; +import ModalUpdate from '../ModalUpdate'; +import SelectDapp from '../SelectDapp'; +import Warning from '../Warning'; +import styles from './application.css'; + +@observer +export default class Application extends Component { + dappsStore = DappsStore.instance(); + + render () { + if (this.dappsStore.isLoading) { + return ( +
+ Loading application +
+ ); + } + + return ( +
+
+ DAPP REGISTRY, a global view of distributed applications available on the network. Putting the puzzle together. +
+
+ + + +
+
+ { this.dappsStore.count } applications registered, { this.dappsStore.ownedCount } owned by user +
+ + + + +
+ ); + } +} diff --git a/js/src/dapps/dappreg/Application/index.js b/js/src/dapps/dappreg/Application/index.js new file mode 100644 index 000000000..236578226 --- /dev/null +++ b/js/src/dapps/dappreg/Application/index.js @@ -0,0 +1,17 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +export default from './application'; diff --git a/js/src/dapps/dappreg/Button/button.css b/js/src/dapps/dappreg/Button/button.css new file mode 100644 index 000000000..a66736e46 --- /dev/null +++ b/js/src/dapps/dappreg/Button/button.css @@ -0,0 +1,38 @@ +/* Copyright 2015, 2016 Ethcore (UK) Ltd. +/* This file is part of Parity. +/* +/* Parity is free software: you can redistribute it and/or modify +/* it under the terms of the GNU General Public License as published by +/* the Free Software Foundation, either version 3 of the License, or +/* (at your option) any later version. +/* +/* Parity is distributed in the hope that it will be useful, +/* but WITHOUT ANY WARRANTY; without even the implied warranty of +/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +/* GNU General Public License for more details. +/* +/* You should have received a copy of the GNU General Public License +/* along with Parity. If not, see . +*/ + +.button { + background: #44e; + border: none; + border-radius: 0.25em; + color: #fff; + cursor: pointer; + font-size: 1em; + margin: 1em 0.375em; + opacity: 0.85; + padding: 0.75em 2em; + + &[disabled] { + opacity: 0.5; + cursor: default; + background: #aaa; + } + + &[data-warning="true"] { + background: #e44; + } +} diff --git a/js/src/dapps/dappreg/Button/button.js b/js/src/dapps/dappreg/Button/button.js new file mode 100644 index 000000000..1f3b67b4c --- /dev/null +++ b/js/src/dapps/dappreg/Button/button.js @@ -0,0 +1,52 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React, { Component, PropTypes } from 'react'; + +import styles from './button.css'; + +export default class Button extends Component { + static propTypes = { + className: PropTypes.string, + disabled: PropTypes.bool, + label: PropTypes.string.isRequired, + warning: PropTypes.bool, + onClick: PropTypes.func.isRequired + } + + render () { + const { className, disabled, label, warning } = this.props; + const classes = `${styles.button} ${className}`; + + return ( + + ); + } + + onClick = (event) => { + if (this.props.disabled) { + return; + } + + this.props.onClick(event); + } +} diff --git a/js/src/dapps/dappreg/Button/index.js b/js/src/dapps/dappreg/Button/index.js new file mode 100644 index 000000000..f69a65e3d --- /dev/null +++ b/js/src/dapps/dappreg/Button/index.js @@ -0,0 +1,17 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +export default from './button'; diff --git a/js/src/dapps/dappreg/ButtonBar/buttonBar.css b/js/src/dapps/dappreg/ButtonBar/buttonBar.css new file mode 100644 index 000000000..0aa84ee29 --- /dev/null +++ b/js/src/dapps/dappreg/ButtonBar/buttonBar.css @@ -0,0 +1,21 @@ +/* Copyright 2015, 2016 Ethcore (UK) Ltd. +/* This file is part of Parity. +/* +/* Parity is free software: you can redistribute it and/or modify +/* it under the terms of the GNU General Public License as published by +/* the Free Software Foundation, either version 3 of the License, or +/* (at your option) any later version. +/* +/* Parity is distributed in the hope that it will be useful, +/* but WITHOUT ANY WARRANTY; without even the implied warranty of +/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +/* GNU General Public License for more details. +/* +/* You should have received a copy of the GNU General Public License +/* along with Parity. If not, see . +*/ + +.buttonbar { + text-align: center; + margin: 1em 0 0 0; +} diff --git a/js/src/dapps/dappreg/ButtonBar/buttonBar.js b/js/src/dapps/dappreg/ButtonBar/buttonBar.js new file mode 100644 index 000000000..289def0ea --- /dev/null +++ b/js/src/dapps/dappreg/ButtonBar/buttonBar.js @@ -0,0 +1,101 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React, { Component } from 'react'; +import { observer } from 'mobx-react'; + +import DappsStore from '../dappsStore'; +import ModalStore from '../modalStore'; + +import Button from '../Button'; +import styles from './buttonBar.css'; + +@observer +export default class ButtonBar extends Component { + dappsStore = DappsStore.instance(); + modalStore = ModalStore.instance(); + + render () { + let buttons = []; + + if (this.dappsStore.isEditing || this.dappsStore.isNew) { + buttons = [ +