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
openethereum · Nov 22, 2016 · bd6f343 · bd6f343
1 parent b97763e
commit bd6f343
Show file tree

Hide file tree

Showing 37 changed files with 2,593 additions and 0 deletions.
diff --git a/js/src/dapps/dappreg.html b/js/src/dapps/dappreg.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
+    <title>Dapp Registry</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="/parity-utils/parity.js"></script>
+    <script src="dappreg.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/dappreg.js 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 <http://www.gnu.org/licenses/>.
+
+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(
+  <Application />,
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/dappreg/Application/application.css 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 <http://www.gnu.org/licenses/>.
+*/
+
+.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
@@ -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 <http://www.gnu.org/licenses/>.
+
+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 (
+        <div className={ styles.loading }>
+          Loading application
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.body }>
+        <div className={ styles.header }>
+          DAPP REGISTRY, a global view of distributed applications available on the network. Putting the puzzle together.
+        </div>
+        <div className={ styles.apps }>
+          <SelectDapp />
+          <ButtonBar />
+          <Dapp />
+        </div>
+        <div className={ styles.footer }>
+          { this.dappsStore.count } applications registered, { this.dappsStore.ownedCount } owned by user
+        </div>
+        <Warning />
+        <ModalDelete />
+        <ModalRegister />
+        <ModalUpdate />
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/dappreg/Application/index.js 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 <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/dappreg/Button/button.css 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 <http://www.gnu.org/licenses/>.
+*/
+
+.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
@@ -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 <http://www.gnu.org/licenses/>.
+
+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 (
+      <button
+        className={ classes }
+        data-warning={ warning }
+        disabled={ disabled }
+        onClick={ this.onClick }>
+        { label }
+      </button>
+    );
+  }
+
+  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
@@ -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 <http://www.gnu.org/licenses/>.
+
+export default from './button';
diff --git a/js/src/dapps/dappreg/ButtonBar/buttonBar.css 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 <http://www.gnu.org/licenses/>.
+*/
+
+.buttonbar {
+  text-align: center;
+  margin: 1em 0 0 0;
+}