Make local apps available (Fixes #2771) (#2808)

js/src/ui/Container/container.css

@@ -18,14 +18,23 @@
   padding: 0em;
 }
 
+.compact,
 .padded {
-  padding: 1.5em;
   background: rgba(0, 0, 0, 0.8) !important;
   border-radius: 0 !important;
   position: relative;
   overflow: auto;
 }
 
+.compact {
+  padding: 0 1.5em;
+}
+
+.padded {
+  padding: 1.5em;
+}
+
+.light .compact,
 .light .padded {
   background: rgba(0, 0, 0, 0.5) !important;
 }

js/src/ui/Container/container.js

@@ -23,17 +23,18 @@ export default class Container extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    compact: PropTypes.bool,
     light: PropTypes.bool,
     style: PropTypes.object
   }
 
   render () {
-    const { children, className, light, style } = this.props;
+    const { children, className, compact, light, style } = this.props;
     const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
 
     return (
       <div className={ classes } style={ style }>
-        <Card className={ styles.padded }>
+        <Card className={ compact ? styles.compact : styles.padded }>
           { children }
         </Card>
       </div>

js/src/ui/Modal/modal.js

@@ -38,6 +38,7 @@ class Modal extends Component {
     busy: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
+    compact: PropTypes.bool,
     current: PropTypes.number,
     waiting: PropTypes.array,
     scroll: PropTypes.bool,
@@ -51,7 +52,7 @@ class Modal extends Component {
 
   render () {
     const { muiTheme } = this.context;
-    const { actions, busy, className, current, children, scroll, steps, waiting, title, visible, settings } = this.props;
+    const { actions, busy, className, current, children, compact, scroll, steps, waiting, title, visible, settings } = this.props;
     const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
     const header = (
       <Title
@@ -82,7 +83,7 @@ class Modal extends Component {
         style={ DIALOG_STYLE }
         title={ header }
         titleStyle={ TITLE_STYLE }>
-        <Container light style={ { transition: 'none' } }>
+        <Container light compact={ compact } style={ { transition: 'none' } }>
           { children }
         </Container>
       </Dialog>

js/src/views/Dapps/AddDapps/AddDapps.css

@@ -15,6 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.hash {
+.description {
   margin-top: .5em !important;
 }

js/src/views/Dapps/AddDapps/AddDapps.js

@@ -21,15 +21,15 @@ import Checkbox from 'material-ui/Checkbox';
 
 import { Modal, Button } from '../../../ui';
 
-import styles from './AddDapps.css';
+import styles from './addDapps.css';
 
 export default class AddDapps extends Component {
   static propTypes = {
     available: PropTypes.array.isRequired,
-    visible: PropTypes.array.isRequired,
+    hidden: PropTypes.array.isRequired,
     open: PropTypes.bool.isRequired,
-    onAdd: PropTypes.func.isRequired,
+    onHideApp: PropTypes.func.isRequired,
-    onRemove: PropTypes.func.isRequired,
+    onShowApp: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired
   };
 
@@ -38,13 +38,13 @@ export default class AddDapps extends Component {
 
     return (
       <Modal
-        title='Select Distributed Apps to be shown'
+        compact
+        title='visible applications'
         actions={ [
-          <Button label={ 'Done' } onClick={ onClose } icon={ <DoneIcon /> } />
+          <Button label={ 'Done' } key='done' onClick={ onClose } icon={ <DoneIcon /> } />
         ] }
         visible={ open }
-        scroll
+        scroll>
-      >
         <List>
           { available.map(this.renderApp) }
         </List>
@@ -53,20 +53,27 @@ export default class AddDapps extends Component {
   }
 
   renderApp = (app) => {
-    const { visible, onAdd, onRemove } = this.props;
+    const { hidden, onHideApp, onShowApp } = this.props;
-    const isVisible = visible.includes(app.id);
+    const isHidden = hidden.includes(app.id);
+    const description = (
+      <div className={ styles.description }>
+        { app.description }
+      </div>
+    );
     const onCheck = () => {
-      if (isVisible) onRemove(app.id);
+      if (isHidden) {
-      else onAdd(app.id);
+        onShowApp(app.id);
+      } else {
+        onHideApp(app.id);
+      }
     };
 
     return (
       <ListItem
         key={ app.id }
-        leftCheckbox={ <Checkbox checked={ isVisible } onCheck={ onCheck } /> }
+        leftCheckbox={ <Checkbox checked={ !isHidden } onCheck={ onCheck } /> }
         primaryText={ app.name }
-        secondaryText={ <pre className={ styles.hash }><code>{ app.hash }</code></pre> }
+        secondaryText={ description } />
-      />
     );
   }
 }

js/src/views/Dapps/AddDapps/index.js

@@ -14,4 +14,4 @@
 // 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 './AddDapps';
+export default from './addDapps';

js/src/views/Dapps/Summary/summary.js

@@ -38,7 +38,7 @@ export default class Summary extends Component {
       return null;
     }
 
-    const url = `/app/${app.local ? 'local' : 'global'}/${app.id}`;
+    const url = `/app/${app.builtin ? 'global' : 'local'}/${app.url || app.id}`;
     const image = app.image
       ? <img src={ app.image } className={ styles.image } />
       : <div className={ styles.image }>&nbsp;</div>;

js/src/views/Dapps/available.js

@@ -14,60 +14,77 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity. If not, see <http://www.gnu.org/licenses/>.
 
-// TODO remove this hardcoded list of apps once the route works again.
+const builtinApps = [
-
-import { sha3 } from '../../api/util/sha3';
-
-const hardcoded = [
   {
-    id: 'basiccoin',
+    id: '0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f',
+    url: 'basiccoin',
     name: 'Token Deployment',
     description: 'Deploy new basic tokens that you are able to send around',
-    author: 'Ethcore <admin@ethcore.io>',
+    author: 'Parity Team <admin@ethcore.io>',
-    version: '1.0.0'
+    version: '1.0.0',
+    builtin: true
   },
   {
-    id: 'gavcoin',
+    id: '0xd798a48831b4ccdbc71de206a1d6a4aa73546c7b6f59c22a47452af414dc64d6',
+    url: 'gavcoin',
     name: 'GAVcoin',
     description: 'Manage your GAVcoins, the hottest new property in crypto',
-    author: 'Ethcore <admin@ethcore.io>',
+    author: 'Parity Team <admin@ethcore.io>',
-    version: '1.0.0'
+    version: '1.0.0',
+    builtin: true
   },
   {
-    id: 'registry',
+    id: '0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938',
+    url: 'registry',
     name: 'Registry',
     description: 'A global registry of addresses on the network',
-    author: 'Ethcore <admin@ethcore.io>',
+    author: 'Parity Team <admin@ethcore.io>',
-    version: '1.0.0'
+    version: '1.0.0',
+    builtin: true
   },
   {
-    id: 'tokenreg',
+    id: '0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208',
+    url: 'tokenreg',
     name: 'Token Registry',
     description: 'A registry of transactable tokens on the network',
-    author: 'Ethcore <admin@ethcore.io>',
+    author: 'Parity Team <admin@ethcore.io>',
-    version: '1.0.0'
+    version: '1.0.0',
+    builtin: true
   },
   {
-    id: 'signaturereg',
+    id: '0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46',
+    url: 'signaturereg',
     name: 'Method Registry',
     description: 'A registry of method signatures for lookups on transactions',
-    author: 'Ethcore <admin@ethcore.io>',
+    author: 'Parity Team <admin@ethcore.io>',
-    version: '1.0.0'
+    version: '1.0.0',
+    builtin: true
   },
   {
-    id: 'githubhint',
+    id: '0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75',
+    url: 'githubhint',
     name: 'GitHub Hint',
     description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
-    author: 'Ethcore <admin@ethcore.io>',
+    author: 'Parity Team <admin@ethcore.io>',
-    version: '1.0.0'
+    version: '1.0.0',
+    builtin: true
   }
 ];
 
 export default function () {
-  // return fetch('//127.0.0.1:8080/api/apps')
+  return fetch('http://127.0.0.1:8080/api/apps')
-  // .then((res) => res.ok ? res.json() : [])
+    .then((response) => {
-  return Promise.resolve(hardcoded) // TODO
+      return response.ok
-  .then((apps) => apps.map((app) => {
+        ? response.json()
-    return Object.assign({}, app, { hash: sha3(app.id) });
+        : [];
-  }));
+    })
+    .catch((error) => {
+      console.warn('app list', error);
+      return [];
+    })
+    .then((localApps) => {
+      return builtinApps
+        .concat(localApps)
+        .sort((a, b) => a.name.localeCompare(b.name));
+    });
 }

js/src/views/Dapps/dapps.js

@@ -23,7 +23,7 @@ import FlatButton from 'material-ui/FlatButton';
 import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
 
 import fetchAvailable from './available';
-import { read as readVisible, write as writeVisible } from './visible';
+import { readHiddenApps, writeHiddenApps } from './hidden';
 
 import AddDapps from './AddDapps';
 import Summary from './Summary';
@@ -37,15 +37,17 @@ export default class Dapps extends Component {
 
   state = {
     available: [],
-    visible: [],
+    hidden: [],
     modalOpen: false
   }
 
   componentDidMount () {
     fetchAvailable()
     .then((available) => {
-      this.setState({ available });
+      this.setState({
-      this.setState({ visible: readVisible() });
+        available,
+        hidden: readHiddenApps()
+      });
       this.loadImages();
     })
     .catch((err) => {
@@ -54,24 +56,24 @@ export default class Dapps extends Component {
   }
 
   render () {
-    const { available, visible, modalOpen } = this.state;
+    const { available, hidden, modalOpen } = this.state;
-    const apps = available.filter((app) => visible.includes(app.id));
+    const apps = available.filter((app) => !hidden.includes(app.id));
 
     return (
       <div>
         <AddDapps
           available={ available }
-          visible={ visible }
+          hidden={ hidden }
           open={ modalOpen }
-          onAdd={ this.onAdd }
+          onHideApp={ this.onHideApp }
-          onRemove={ this.onRemove }
+          onShowApp={ this.onShowApp }
           onClose={ this.closeModal }
         />
         <Actionbar
           className={ styles.toolbar }
           title='Decentralized Applications'
           buttons={ [
-            <FlatButton label='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
+            <FlatButton label='edit' key='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
           ] }
         />
         <Page>
@@ -97,38 +99,40 @@ export default class Dapps extends Component {
     const { available } = this.state;
     const { dappReg } = Contracts.get();
 
-    return Promise.all(available.map((app) => dappReg.getImage(app.hash)))
+    return Promise
-    .then((images) => {
+      .all(available.map((app) => dappReg.getImage(app.id)))
-      this.setState({
+      .then((images) => {
-        available: images
+        this.setState({
-          .map(hashToImageUrl)
+          available: images
-          .map((image, i) => Object.assign({}, available[i], { image }))
+            .map(hashToImageUrl)
+            .map((image, i) => Object.assign({}, available[i], { image }))
+        });
+      })
+      .catch((error) => {
+        console.warn('loadImages', error);
       });
-    })
-    .catch((err) => {
-      console.error('error loading dapp images', err);
-    });
   }
 
-  onAdd = (id) => {
+  onHideApp = (id) => {
-    const oldVisible = this.state.visible;
+    const { hidden } = this.state;
-    if (oldVisible.includes(id)) return;
+    const newHidden = hidden.concat(id);
-    const newVisible = oldVisible.concat(id);
+
-    this.setState({ visible: newVisible });
+    this.setState({ hidden: newHidden });
-    writeVisible(newVisible);
+    writeHiddenApps(newHidden);
   }
 
-  onRemove = (id) => {
+  onShowApp = (id) => {
-    const oldVisible = this.state.visible;
+    const { hidden } = this.state;
-    if (!oldVisible.includes(id)) return;
+    const newHidden = hidden.filter((_id) => _id !== id);
-    const newVisible = oldVisible.filter((_id) => _id !== id);
+
-    this.setState({ visible: newVisible });
+    this.setState({ hidden: newHidden });
-    writeVisible(newVisible);
+    writeHiddenApps(newHidden);
   }
 
   openModal = () => {
     this.setState({ modalOpen: true });
   };
+
   closeModal = () => {
     this.setState({ modalOpen: false });
   };

js/src/views/Dapps/hidden.js

@@ -14,14 +14,22 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity. If not, see <http://www.gnu.org/licenses/>.
 
-const defaultDapps = ['gavcoin', 'basiccoin', 'tokenreg'];
+const defaultHidden = [];
 
-export function read () {
+export function readHiddenApps () {
-  const stored = localStorage.getItem('visible-dapps');
+  const stored = localStorage.getItem('hiddenApps');
-  if (stored) return JSON.parse(stored);
+
-  return defaultDapps;
+  if (stored) {
+    try {
+      return JSON.parse(stored);
+    } catch (error) {
+      console.warn('readHiddenApps', error);
+    }
+  }
+
+  return defaultHidden;
 }
 
-export function write (visible) {
+export function writeHiddenApps (hidden) {
-  localStorage.setItem('visible-dapps', JSON.stringify(visible));
+  localStorage.setItem('hiddenApps', JSON.stringify(hidden));
 }