Merge branch 'master' into transactions-propagate

js/src/views/Account/account.js

@@ -20,8 +20,9 @@ import { bindActionCreators } from 'redux';
 import ContentCreate from 'material-ui/svg-icons/content/create';
 import ContentSend from 'material-ui/svg-icons/content/send';
 import LockIcon from 'material-ui/svg-icons/action/lock';
+import VerifyIcon from 'material-ui/svg-icons/action/verified-user';
 
-import { EditMeta, Shapeshift, Transfer, PasswordManager } from '../../modals';
+import { EditMeta, Shapeshift, SMSVerification, Transfer, PasswordManager } from '../../modals';
 import { Actionbar, Button, Page } from '../../ui';
 
 import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
@@ -29,9 +30,15 @@ import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
 import Header from './Header';
 import Transactions from './Transactions';
 
+import VerificationStore from '../../modals/SMSVerification/store';
+
 import styles from './account.css';
 
 class Account extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
   static propTypes = {
     params: PropTypes.object,
     accounts: PropTypes.object,
@@ -45,10 +52,20 @@ class Account extends Component {
   state = {
     showEditDialog: false,
     showFundDialog: false,
+    showVerificationDialog: false,
+    verificationStore: null,
     showTransferDialog: false,
     showPasswordDialog: false
   }
 
+  componentDidMount () {
+    const { api } = this.context;
+    const { address } = this.props.params;
+
+    const store = new VerificationStore(api, address);
+    this.setState({ verificationStore: store });
+  }
+
   render () {
     const { accounts, balances, isTest } = this.props;
     const { address } = this.props.params;
@@ -64,6 +81,7 @@ class Account extends Component {
       <div className={ styles.account }>
         { this.renderEditDialog(account) }
         { this.renderFundDialog() }
+        { this.renderVerificationDialog() }
         { this.renderTransferDialog() }
         { this.renderPasswordDialog() }
         { this.renderActionbar() }
@@ -99,6 +117,11 @@ class Account extends Component {
         icon={ <img src={ shapeshiftBtn } className={ styles.btnicon } /> }
         label='shapeshift'
         onClick={ this.onShapeshiftAccountClick } />,
+      <Button
+        key='sms-verification'
+        icon={ <VerifyIcon /> }
+        label='Verify'
+        onClick={ this.openVerification } />,
       <Button
         key='editmeta'
         icon={ <ContentCreate /> }
@@ -149,6 +172,22 @@ class Account extends Component {
     );
   }
 
+  renderVerificationDialog () {
+    if (!this.state.showVerificationDialog) {
+      return null;
+    }
+
+    const store = this.state.verificationStore;
+    const { address } = this.props.params;
+
+    return (
+      <SMSVerification
+        store={ store } account={ address }
+        onClose={ this.onVerificationClose }
+      />
+    );
+  }
+
   renderTransferDialog () {
     const { showTransferDialog } = this.state;
 
@@ -205,6 +244,14 @@ class Account extends Component {
     this.onShapeshiftAccountClick();
   }
 
+  openVerification = () => {
+    this.setState({ showVerificationDialog: true });
+  }
+
+  onVerificationClose = () => {
+    this.setState({ showVerificationDialog: false });
+  }
+
   onTransferClick = () => {
     this.setState({
       showTransferDialog: !this.state.showTransferDialog

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

@@ -18,3 +18,22 @@
 .description {
   margin-top: .5em !important;
 }
+
+.list {
+  .background {
+    background: rgba(255, 255, 255, 0.2);
+    margin: 0 -1.5em;
+    padding: 0.5em 1.5em;
+  }
+
+  .header {
+    text-transform: uppercase;
+  }
+
+  .byline {
+    font-size: 0.75em;
+    padding-top: 0.5em;
+    line-height: 1.5em;
+    opacity: 0.75;
+  }
+}

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

@@ -51,16 +51,37 @@ export default class AddDapps extends Component {
         ] }
         visible
         scroll>
-        <List>
-          { store.apps.map(this.renderApp) }
-        </List>
+        <div className={ styles.warning }>
+        </div>
+        { this.renderList(store.sortedLocal, 'Applications locally available', 'All applications installed locally on the machine by the user for access by the Parity client.') }
+        { this.renderList(store.sortedBuiltin, 'Applications bundled with Parity', 'Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.') }
+        { this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') }
       </Modal>
     );
   }
 
+  renderList (items, header, byline) {
+    if (!items || !items.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.list }>
+        <div className={ styles.background }>
+          <div className={ styles.header }>{ header }</div>
+          <div className={ styles.byline }>{ byline }</div>
+        </div>
+        <List>
+          { items.map(this.renderApp) }
+        </List>
+      </div>
+    );
+  }
+
   renderApp = (app) => {
     const { store } = this.props;
-    const isHidden = store.hidden.includes(app.id);
+    const isHidden = !store.displayApps[app.id].visible;
+
     const onCheck = () => {
       if (isHidden) {
         store.showApp(app.id);

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

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
 
-import { Container, ContainerTitle } from '../../../ui';
+import { Container, ContainerTitle, Tags } from '../../../ui';
 
 import styles from './summary.css';
 
@@ -49,6 +49,7 @@ export default class Summary extends Component {
     return (
       <Container className={ styles.container }>
         { image }
+        <Tags tags={ [app.type] } />
         <div className={ styles.description }>
           <ContainerTitle
             className={ styles.title }

js/src/views/Dapps/builtin.json

@@ -5,7 +5,8 @@
     "name": "Token Deployment",
     "description": "Deploy new basic tokens that you are able to send around",
     "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
   },
   {
     "id": "0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938",
@@ -13,7 +14,8 @@
     "name": "Registry",
     "description": "A global registry of addresses on the network",
     "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
   },
   {
     "id": "0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208",
@@ -21,7 +23,8 @@
     "name": "Token Registry",
     "description": "A registry of transactable tokens on the network",
     "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
   },
   {
     "id": "0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46",
@@ -29,7 +32,8 @@
     "name": "Method Registry",
     "description": "A registry of method signatures for lookups on transactions",
     "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
   },
   {
     "id": "0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75",
@@ -38,6 +42,7 @@
     "description": "A mapping of GitHub URLs to hashes for use in contracts as references",
     "author": "Parity Team <admin@ethcore.io>",
     "version": "1.0.0",
+    "visible": false,
     "secure": true
   },
   {

js/src/views/Dapps/dapps.css

@@ -18,6 +18,7 @@
   display: flex;
   flex-wrap: wrap;
   margin: -0.125em;
+  position: relative;
 }
 
 .list+.list {
@@ -29,3 +30,25 @@
   flex: 0 1 50%;
   box-sizing: border-box;
 }
+
+.overlay {
+  background: rgba(0, 0, 0, 0.85);
+  bottom: 0.5em;
+  left: -0.125em;
+  position: absolute;
+  right: -0.125em;
+  top: -0.25em;
+  z-index: 100;
+  padding: 1em;
+
+  .body {
+    line-height: 1.5em;
+    margin: 0 auto;
+    text-align: left;
+    max-width: 980px;
+
+    &>div:first-child {
+      padding-bottom: 1em;
+    }
+  }
+}

js/src/views/Dapps/dapps.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { Checkbox } from 'material-ui';
 import { observer } from 'mobx-react';
 
 import { Actionbar, Page } from '../../ui';
@@ -37,6 +38,24 @@ export default class Dapps extends Component {
   store = new DappsStore(this.context.api);
 
   render () {
+    let externalOverlay = null;
+    if (this.store.externalOverlayVisible) {
+      externalOverlay = (
+        <div className={ styles.overlay }>
+          <div className={ styles.body }>
+            <div>Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.</div>
+            <div>
+              <Checkbox
+                className={ styles.accept }
+                label='I understand that these applications are not affiliated with Parity'
+                checked={ false }
+                onCheck={ this.onClickAcceptExternal } />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
     return (
       <div>
         <AddDapps store={ this.store } />
@@ -53,14 +72,27 @@ export default class Dapps extends Component {
           ] }
         />
         <Page>
-          <div className={ styles.list }>
-            { this.store.visible.map(this.renderApp) }
-          </div>
+          { this.renderList(this.store.visibleLocal) }
+          { this.renderList(this.store.visibleBuiltin) }
+          { this.renderList(this.store.visibleNetwork, externalOverlay) }
         </Page>
       </div>
     );
   }
 
+  renderList (items, overlay) {
+    if (!items || !items.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.list }>
+        { overlay }
+        { items.map(this.renderApp) }
+      </div>
+    );
+  }
+
   renderApp = (app) => {
     return (
       <div
@@ -70,4 +102,8 @@ export default class Dapps extends Component {
       </div>
     );
   }
+
+  onClickAcceptExternal = () => {
+    this.store.closeExternalOverlay();
+  }
 }

js/src/views/Dapps/dappsStore.js

@@ -14,39 +14,65 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import BigNumber from 'bignumber.js';
 import { action, computed, observable, transaction } from 'mobx';
+import store from 'store';
 
 import Contracts from '../../contracts';
 import { hashToImageUrl } from '../../redux/util';
 
 import builtinApps from './builtin.json';
 
-const LS_KEY_HIDDEN = 'hiddenApps';
-const LS_KEY_EXTERNAL = 'externalApps';
+const LS_KEY_DISPLAY = 'displayApps';
+const LS_KEY_EXTERNAL_ACCEPT = 'acceptExternal';
 
 export default class DappsStore {
   @observable apps = [];
-  @observable externalApps = [];
-  @observable hiddenApps = [];
+  @observable displayApps = {};
   @observable modalOpen = false;
+  @observable externalOverlayVisible = true;
 
   constructor (api) {
     this._api = api;
 
-    this._readHiddenApps();
-    this._readExternalApps();
+    this.loadExternalOverlay();
+    this.readDisplayApps();
 
-    this._fetchBuiltinApps();
-    this._fetchLocalApps();
-    this._fetchRegistryApps();
+    Promise
+      .all([
+        this._fetchBuiltinApps(),
+        this._fetchLocalApps(),
+        this._fetchRegistryApps()
+      ])
+      .then(this.writeDisplayApps);
   }
 
-  @computed get visible () {
-    return this.apps
-      .filter((app) => {
-        return this.externalApps.includes(app.id) || !this.hiddenApps.includes(app.id);
-      })
-      .sort((a, b) => a.name.localeCompare(b.name));
+  @computed get sortedBuiltin () {
+    return this.apps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get sortedLocal () {
+    return this.apps.filter((app) => app.type === 'local');
+  }
+
+  @computed get sortedNetwork () {
+    return this.apps.filter((app) => app.type === 'network');
+  }
+
+  @computed get visibleApps () {
+    return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
+  }
+
+  @computed get visibleBuiltin () {
+    return this.visibleApps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get visibleLocal () {
+    return this.visibleApps.filter((app) => app.type === 'local');
+  }
+
+  @computed get visibleNetwork () {
+    return this.visibleApps.filter((app) => app.type === 'network');
   }
 
   @action openModal = () => {
@@ -57,14 +83,48 @@ export default class DappsStore {
     this.modalOpen = false;
   }
 
+  @action closeExternalOverlay = () => {
+    this.externalOverlayVisible = false;
+    store.set(LS_KEY_EXTERNAL_ACCEPT, true);
+  }
+
+  @action loadExternalOverlay () {
+    this.externalOverlayVisible = !(store.get(LS_KEY_EXTERNAL_ACCEPT) || false);
+  }
+
   @action hideApp = (id) => {
-    this.hiddenApps = this.hiddenApps.concat(id);
-    this._writeHiddenApps();
+    this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: false } });
+    this.writeDisplayApps();
   }
 
   @action showApp = (id) => {
-    this.hiddenApps = this.hiddenApps.filter((_id) => _id !== id);
-    this._writeHiddenApps();
+    this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: true } });
+    this.writeDisplayApps();
+  }
+
+  @action readDisplayApps = () => {
+    this.displayApps = store.get(LS_KEY_DISPLAY) || {};
+  }
+
+  @action writeDisplayApps = () => {
+    store.set(LS_KEY_DISPLAY, this.displayApps);
+  }
+
+  @action addApps = (apps) => {
+    transaction(() => {
+      this.apps = this.apps
+        .concat(apps || [])
+        .sort((a, b) => a.name.localeCompare(b.name));
+
+      const visibility = {};
+      apps.forEach((app) => {
+        if (!this.displayApps[app.id]) {
+          visibility[app.id] = { visible: app.visible };
+        }
+      });
+
+      this.displayApps = Object.assign({}, this.displayApps, visibility);
+    });
   }
 
   _getHost (api) {
@@ -79,13 +139,16 @@ export default class DappsStore {
     return Promise
       .all(builtinApps.map((app) => dappReg.getImage(app.id)))
       .then((imageIds) => {
-        transaction(() => {
-          builtinApps.forEach((app, index) => {
+        this.addApps(
+          builtinApps.map((app, index) => {
             app.type = 'builtin';
             app.image = hashToImageUrl(imageIds[index]);
-            this.apps.push(app);
-          });
-        });
+            return app;
+          })
+        );
+      })
+      .catch((error) => {
+        console.warn('DappsStore:fetchBuiltinApps', error);
       });
   }
 
@@ -100,15 +163,12 @@ export default class DappsStore {
         return apps
           .map((app) => {
             app.type = 'local';
+            app.visible = true;
             return app;
           })
           .filter((app) => app.id && !['ui'].includes(app.id));
       })
-      .then((apps) => {
-        transaction(() => {
-          (apps || []).forEach((app) => this.apps.push(app));
-        });
-      })
+      .then(this.addApps)
       .catch((error) => {
         console.warn('DappsStore:fetchLocal', error);
       });
@@ -132,7 +192,9 @@ export default class DappsStore {
       .then((appsInfo) => {
         const appIds = appsInfo
           .map(([appId, owner]) => this._api.util.bytesToHex(appId))
-          .filter((appId) => !builtinApps.find((app) => app.id === appId));
+          .filter((appId) => {
+            return (new BigNumber(appId)).gt(0) && !builtinApps.find((app) => app.id === appId);
+          });
 
         return Promise
           .all([
@@ -147,7 +209,8 @@ export default class DappsStore {
                 image: hashToImageUrl(imageIds[index]),
                 contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2),
                 manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2),
-                type: 'network'
+                type: 'network',
+                visible: true
               };
 
               return app;
@@ -179,11 +242,7 @@ export default class DappsStore {
             });
           });
       })
-      .then((apps) => {
-        transaction(() => {
-          (apps || []).forEach((app) => this.apps.push(app));
-        });
-      })
+      .then(this.addApps)
       .catch((error) => {
         console.warn('DappsStore:fetchRegistry', error);
       });
@@ -201,44 +260,4 @@ export default class DappsStore {
         return null;
       });
   }
-
-  _readHiddenApps () {
-    const stored = localStorage.getItem(LS_KEY_HIDDEN);
-
-    if (stored) {
-      try {
-        this.hiddenApps = JSON.parse(stored);
-      } catch (error) {
-        console.warn('DappsStore:readHiddenApps', error);
-      }
-    }
-  }
-
-  _readExternalApps () {
-    const stored = localStorage.getItem(LS_KEY_EXTERNAL);
-
-    if (stored) {
-      try {
-        this.externalApps = JSON.parse(stored);
-      } catch (error) {
-        console.warn('DappsStore:readExternalApps', error);
-      }
-    }
-  }
-
-  _writeExternalApps () {
-    try {
-      localStorage.setItem(LS_KEY_EXTERNAL, JSON.stringify(this.externalApps));
-    } catch (error) {
-      console.error('DappsStore:writeExternalApps', error);
-    }
-  }
-
-  _writeHiddenApps () {
-    try {
-      localStorage.setItem(LS_KEY_HIDDEN, JSON.stringify(this.hiddenApps));
-    } catch (error) {
-      console.error('DappsStore:writeHiddenApps', error);
-    }
-  }
 }

js/src/views/Signer/components/SignRequest/SignRequest.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import nullable from '../../../../util/nullable-proptype';
 
 import Account from '../Account';
 import TransactionPendingForm from '../TransactionPendingForm';
@@ -22,8 +23,6 @@ import TxHashLink from '../TxHashLink';
 
 import styles from './SignRequest.css';
 
-const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
-
 export default class SignRequest extends Component {
   static contextTypes = {
     api: PropTypes.object

js/src/views/Signer/components/TransactionFinished/TransactionFinished.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import nullable from '../../../../util/nullable-proptype';
 
 import CircularProgress from 'material-ui/CircularProgress';
 
@@ -29,8 +30,6 @@ import styles from './TransactionFinished.css';
 import * as tUtil from '../util/transaction';
 import { capitalize } from '../util/util';
 
-const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
-
 export default class TransactionFinished extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired

js/src/views/Status/containers/StatusPage/StatusPage.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import { clearStatusLogs, toggleStatusLogs } from '../../../../redux/actions';
+import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '../../../../redux/actions';
 
 import Debug from '../../components/Debug';
 import Status from '../../components/Status';
@@ -31,6 +31,14 @@ class StatusPage extends Component {
     actions: PropTypes.object.isRequired
   }
 
+  componentWillMount () {
+    this.props.actions.toggleStatusRefresh(true);
+  }
+
+  componentWillUnmount () {
+    this.props.actions.toggleStatusRefresh(false);
+  }
+
   render () {
     return (
       <div className={ styles.body }>
@@ -49,7 +57,8 @@ function mapDispatchToProps (dispatch) {
   return {
     actions: bindActionCreators({
       clearStatusLogs,
-      toggleStatusLogs
+      toggleStatusLogs,
+      toggleStatusRefresh
     }, dispatch)
   };
 }