Display local apps listed by Parity

js/src/abi/util/pad.js

@@ -46,7 +46,7 @@ function stringToBytes (input) {
   if (isArray(input)) {
     return input;
   } else if (input.substr(0, 2) === '0x') {
-    return input.substr(2).match(/.{1,2}/g).map((value) => parseInt(value, 16));
+    return input.substr(2).toLowerCase().match(/.{1,2}/g).map((value) => parseInt(value, 16));
   } else {
     return input.split('').map((char) => char.charCodeAt(0));
   }

js/src/contracts/abi/dappreg.json

@@ -0,0 +1 @@
+[{"constant":true,"inputs":[{"name":"_id","type":"bytes32"},{"name":"_key","type":"bytes32"}],"name":"meta","outputs":[{"name":"","type":"bytes32"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"count","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"}],"name":"unregister","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_fee","type":"uint256"}],"name":"setFee","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_id","type":"bytes32"}],"name":"get","outputs":[{"name":"id","type":"bytes32"},{"name":"owner","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"},{"name":"_key","type":"bytes32"},{"name":"_value","type":"bytes32"}],"name":"setMeta","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"},{"name":"_owner","type":"address"}],"name":"setDappOwner","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_index","type":"uint256"}],"name":"at","outputs":[{"name":"id","type":"bytes32"},{"name":"owner","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"}],"name":"register","outputs":[],"payable":true,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"},{"indexed":true,"name":"key","type":"bytes32"},{"indexed":false,"name":"value","type":"bytes32"}],"name":"MetaChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"}],"name":"OwnerChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"}],"name":"Registered","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"}],"name":"Unregistered","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]

js/src/contracts/abi/index.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import basiccoinmanager from './basiccoinmanager.json';
+import dappreg from './dappreg.json';
 import eip20 from './eip20.json';
 import gavcoin from './gavcoin.json';
 import githubhint from './githubhint.json';
@@ -25,6 +26,7 @@ import tokenreg from './tokenreg.json';
 
 export {
   basiccoinmanager,
+  dappreg,
   eip20,
   gavcoin,
   githubhint,

js/src/contracts/contracts.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import DappReg from './dappreg';
 import Registry from './registry';
 import SignatureReg from './signaturereg';
 import TokenReg from './tokenreg';
@@ -26,6 +27,7 @@ export default class Contracts {
 
     this._api = api;
     this._registry = new Registry(api);
+    this._dappreg = new DappReg(api, this._registry);
     this._signaturereg = new SignatureReg(api, this._registry);
     this._tokenreg = new TokenReg(api, this._registry);
   }
@@ -34,6 +36,10 @@ export default class Contracts {
     return this._registry;
   }
 
+  get dappReg () {
+    return this._dappreg;
+  }
+
   get signatureReg () {
     return this._signaturereg;
   }

js/src/contracts/dappreg.js

@@ -0,0 +1,72 @@
+// 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/>.
+
+// 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 class DappReg {
+  constructor (api, registry) {
+    this._api = api;
+    this._registry = registry;
+
+    this.getInstance();
+  }
+
+  getInstance () {
+    return this._registry.getContractInstance('dappreg');
+  }
+
+  count () {
+    return this.getInstance().then((instance) => {
+      return instance.count.call();
+    });
+  }
+
+  at (index) {
+    return this.getInstance().then((instance) => {
+      return instance.at.call({}, [index]);
+    });
+  }
+
+  get (id) {
+    return this.getInstance().then((instance) => {
+      return instance.get.call({}, [id]);
+    });
+  }
+
+  meta (id, key) {
+    return this.getInstance().then((instance) => {
+      return instance.meta.call({}, [id, key]);
+    });
+  }
+
+  getImage (id) {
+    return this.meta(id, 'IMG');
+  }
+}

js/src/index.js

@@ -86,7 +86,7 @@ ReactDOM.render(
           <Route path='addresses' component={ Addresses } />
           <Route path='address/:address' component={ Address } />
           <Route path='apps' component={ Dapps } />
-          <Route path='app/:name' component={ Dapp } />
+          <Route path='app/:type/:name' component={ Dapp } />
           <Route path='contracts' component={ Contracts } />
           <Route path='contract/:address' component={ Contract } />
           <Route path='settings' component={ Settings }>

js/src/modals/ExecuteContract/executeContract.js

@@ -203,6 +203,7 @@ export default class ExecuteContract extends Component {
       .estimateGas(options, values)
       .then((gas) => {
         options.gas = gas.mul(1.2).toFixed(0);
+        console.log(`estimateGas: received ${gas.toFormat(0)}, adjusted to ${gas.mul(1.2).toFormat(0)}`);
         return func.postTransaction(options, values);
       })
       .then((requestId) => {

js/src/redux/providers/imagesReducer.js

@@ -23,13 +23,18 @@ const initialState = {
   images: {}
 };
 
+export function hashToImageUrl (hashArray) {
+  const hash = hashArray ? bytesToHex(hashArray) : ZERO;
+
+  return hash === ZERO ? null : `/api/content/${hash.substr(2)}`;
+}
+
 export default handleActions({
   setAddressImage (state, action) {
     const { address, hashArray } = action;
-    const hash = hashArray ? bytesToHex(hashArray) : ZERO;
 
     return Object.assign({}, state, {
-      [address]: hash === ZERO ? null : `/api/content/${hash.substr(2)}`
+      [address]: hashToImageUrl(hashArray)
     });
   }
 }, initialState);

js/src/redux/util.js

@@ -14,8 +14,10 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { hashToImageUrl } from './providers/imagesReducer';
 import { withError } from '../ui/Errors/middleware';
 
 export {
+  hashToImageUrl,
   withError
 };

js/src/ui/Container/Title/title.js

@@ -20,6 +20,7 @@ import styles from './title.css';
 
 export default class Title extends Component {
   static propTypes = {
+    className: PropTypes.string,
     title: PropTypes.oneOfType([
       PropTypes.string, PropTypes.node
     ]),
@@ -31,8 +32,10 @@ export default class Title extends Component {
   }
 
   render () {
+    const { className } = this.props;
+
     return (
-      <div>
+      <div className={ className }>
         <h3 className={ styles.title }>
           { this.props.title }
         </h3>

js/src/views/Contract/Queries/queries.js

@@ -75,9 +75,8 @@ export default class Queries extends Component {
     const { contract } = this.props;
 
     return (
-      <div className={ styles.container }>
+      <div className={ styles.container } key={ fn.signature }>
         <InputQuery
-          key={ fn.signature }
           className={ styles.method }
           inputs={ abi.inputs }
           outputs={ abi.outputs }
@@ -92,10 +91,8 @@ export default class Queries extends Component {
     const { values } = this.props;
 
     return (
-      <div className={ styles.container }>
-        <Card
-          className={ styles.method }
-          key={ fn.signature }>
+      <div className={ styles.container } key={ fn.signature }>
+        <Card className={ styles.method }>
           <CardTitle
             className={ styles.methodTitle }
             title={ fn.name }

js/src/views/Dapp/dapp.js

@@ -24,8 +24,10 @@ export default class Dapp extends Component {
   };
 
   render () {
-    const { name } = this.props.params;
-    const src = `${name}.html`;
+    const { name, type } = this.props.params;
+    const src = type === 'global'
+      ? `${name}.html`
+      : `/app/${name}/`;
 
     return (
       <iframe

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

@@ -1 +1,42 @@
+/* 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/>.
+*/
 
+.container {
+  position: relative;
+}
+
+.image {
+  position: absolute;
+  top: 1.5em;
+  left: 1.5em;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+}
+
+.description {
+  margin-left: 72px;
+}
+
+.title {
+  mragin-bottom: 0.5em;
+}
+
+.author, .version {
+  font-size: 0.75em;
+  opacity: 0.5;
+}

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

@@ -17,8 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
 
-import Container, { Title } from '../../../ui/Container';
-import IdentityIcon from '../../../ui/IdentityIcon';
+import { Container, ContainerTitle } from '../../../ui';
+
+import styles from './summary.css';
 
 export default class Summary extends Component {
   static contextTypes = {
@@ -27,7 +28,6 @@ export default class Summary extends Component {
 
   static propTypes = {
     app: PropTypes.object.isRequired,
-    tokens: PropTypes.object,
     children: PropTypes.node
   }
 
@@ -38,16 +38,22 @@ export default class Summary extends Component {
       return null;
     }
 
-    const url = `/app/${app.url}`;
+    const url = `/app/${app.local ? 'local' : 'global'}/${app.url}`;
+    const image = app.image
+      ? <img src={ app.image } className={ styles.image } />
+      : <div className={ styles.image }>&nbsp;</div>;
 
     return (
-      <Container>
-        <IdentityIcon
-          address={ app.address } />
-        <Title
-          title={ <Link to={ url }>{ app.name }</Link> }
-          byline={ app.description } />
-        { this.props.children }
+      <Container className={ styles.container }>
+        { image }
+        <div className={ styles.description }>
+          <ContainerTitle
+            className={ styles.title }
+            title={ <Link to={ url }>{ app.name }</Link> }
+            byline={ app.description } />
+          <div className={ styles.author }>{ app.author }, v{ app.version }</div>
+          { this.props.children }
+        </div>
       </Container>
     );
   }

js/src/views/Dapps/dapps.css

@@ -19,6 +19,10 @@
   flex-wrap: wrap;
 }
 
+.list+.list {
+  margin-top: -0.25em;
+}
+
 .item {
   flex: 0 1 50%;
   width: 50%;