Public node WASM, performance and fixes (#5734)

js/src/views/Accounts/accounts.js

@@ -41,6 +41,7 @@ class Accounts extends Component {
   static propTypes = {
     accounts: PropTypes.object.isRequired,
     accountsInfo: PropTypes.object.isRequired,
+    availability: PropTypes.string.isRequired,
     hasAccounts: PropTypes.bool.isRequired,
     setVisibleAccounts: PropTypes.func.isRequired
   }
@@ -249,21 +250,7 @@ class Accounts extends Component {
 
   renderActionbar () {
     const buttons = [
-      <Link
-        to='/vaults'
-        key='vaults'
-      >
-        <Button
-          icon={ <KeyIcon /> }
-          label={
-            <FormattedMessage
-              id='accounts.button.vaults'
-              defaultMessage='vaults'
-            />
-          }
-          onClick={ this.onVaultsClick }
-        />
-      </Link>,
+      this.renderVaultsButton(),
       <Button
         key='newAccount'
         icon={ <AddIcon /> }
@@ -275,17 +262,7 @@ class Accounts extends Component {
         }
         onClick={ this.onNewAccountClick }
       />,
-      <Button
-        key='newWallet'
-        icon={ <AddIcon /> }
-        label={
-          <FormattedMessage
-            id='accounts.button.newWallet'
-            defaultMessage='wallet'
-          />
-        }
-        onClick={ this.onNewWalletClick }
-      />,
+      this.renderNewWalletButton(),
       <Button
         key='restoreAccount'
         icon={ <AddIcon /> }
@@ -370,6 +347,50 @@ class Accounts extends Component {
     );
   }
 
+  renderVaultsButton () {
+    if (this.props.availability !== 'personal') {
+      return null;
+    }
+
+    return (
+      <Link
+        to='/vaults'
+        key='vaults'
+      >
+        <Button
+          icon={ <KeyIcon /> }
+          label={
+            <FormattedMessage
+              id='accounts.button.vaults'
+              defaultMessage='vaults'
+            />
+          }
+          onClick={ this.onVaultsClick }
+        />
+      </Link>
+    );
+  }
+
+  renderNewWalletButton () {
+    if (this.props.availability !== 'personal') {
+      return null;
+    }
+
+    return (
+      <Button
+        key='newWallet'
+        icon={ <AddIcon /> }
+        label={
+          <FormattedMessage
+            id='accounts.button.newWallet'
+            defaultMessage='wallet'
+          />
+        }
+        onClick={ this.onNewWalletClick }
+      />
+    );
+  }
+
   renderNewWalletDialog () {
     const { accounts } = this.props;
     const { newWalletDialog } = this.state;
@@ -474,10 +495,12 @@ class Accounts extends Component {
 
 function mapStateToProps (state) {
   const { accounts, accountsInfo, hasAccounts } = state.personal;
+  const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
 
   return {
     accounts,
     accountsInfo,
+    availability,
     hasAccounts
   };
 }

js/src/views/Application/TabBar/tabBar.js

@@ -99,11 +99,19 @@ function mapStateToProps (initState) {
   }));
 
   return (state) => {
+    const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
     const { views } = state.settings;
 
     const viewIds = Object
       .keys(views)
-      .filter((id) => views[id].fixed || views[id].active);
+      .filter((id) => {
+        const view = views[id];
+
+        const isEnabled = view.fixed || view.active;
+        const isAllowed = !view.onlyPersonal || availability === 'personal';
+
+        return isEnabled && isAllowed;
+      });
 
     if (isEqual(viewIds, filteredViewIds)) {
       return { views: filteredViews };

js/src/views/Dapps/builtin.json

@@ -63,7 +63,8 @@
     "author": "Parity Team <admin@parity.io>",
     "version": "1.0.0",
     "visible": false,
-    "secure": true
+    "secure": true,
+    "onlyPersonal": true
   },
   {
     "id": "0xae74ad174b95cdbd01c88ac5b73a296d33e9088fc2a200e76bcedf3a94a7815d",
@@ -94,6 +95,7 @@
     "version": "1.0.0",
     "visible": true,
     "skipBuild": true,
-    "skipHistory": true
+    "skipHistory": true,
+    "onlyPersonal": true
   }
 ]

js/src/views/Dapps/dapps.js

@@ -34,10 +34,11 @@ import styles from './dapps.css';
 class Dapps extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
-    accounts: PropTypes.object.isRequired
+    accounts: PropTypes.object.isRequired,
+    availability: PropTypes.string.isRequired
   };
 
   store = DappsStore.get(this.context.api);
@@ -133,6 +134,10 @@ class Dapps extends Component {
   }
 
   renderApp = (app) => {
+    if (app.onlyPersonal && this.props.availability !== 'personal') {
+      return null;
+    }
+
     return (
       <DappCard
         app={ app }
@@ -156,6 +161,7 @@ class Dapps extends Component {
 
 function mapStateToProps (state) {
   const { accounts } = state.personal;
+  const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
 
   /**
    * Do not show the Wallet Accounts in the Dapps
@@ -165,7 +171,8 @@ function mapStateToProps (state) {
   const _accounts = omitBy(accounts, (account) => account.wallet);
 
   return {
-    accounts: _accounts
+    accounts: _accounts,
+    availability
   };
 }
 

js/src/views/Home/home.js

@@ -16,6 +16,7 @@
 
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
 import HistoryStore from '~/mobx/historyStore';
@@ -32,11 +33,15 @@ import Urls from './Urls';
 import styles from './home.css';
 
 @observer
-export default class Home extends Component {
+class Home extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   };
 
+  static propTypes = {
+    availability: PropTypes.string.isRequired
+  };
+
   dappsStore = DappsStore.get(this.context.api);
   extensionStore = ExtensionStore.get();
   webStore = WebStore.get(this.context.api);
@@ -49,6 +54,13 @@ export default class Home extends Component {
   }
 
   render () {
+    const urls = this.props.availability !== 'personal' ? null : (
+      <Urls
+        extensionStore={ this.extensionStore }
+        store={ this.webStore }
+      />
+    );
+
     return (
       <Page
         className={ styles.body }
@@ -60,10 +72,7 @@ export default class Home extends Component {
         }
       >
         <News />
-        <Urls
-          extensionStore={ this.extensionStore }
-          store={ this.webStore }
-        />
+        { urls }
         <div className={ styles.row }>
           <div className={ styles.column }>
             <Dapps
@@ -79,3 +88,16 @@ export default class Home extends Component {
     );
   }
 }
+
+function mapStateToProps (initState) {
+  return (state) => {
+    const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
+
+    return { availability };
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  null
+)(Home);

js/src/views/Settings/Views/defaults.js

@@ -59,6 +59,7 @@ const defaultViews = {
 
   contracts: {
     active: false,
+    onlyPersonal: true,
     icon: <ContactsIcon />,
     route: '/contracts',
     value: 'contract'
@@ -66,6 +67,7 @@ const defaultViews = {
 
   status: {
     active: false,
+    onlyPersonal: true,
     icon: <StatusIcon />,
     route: '/status',
     value: 'status'

js/src/views/Settings/Views/views.js

@@ -30,7 +30,8 @@ import styles from './views.css';
 class Views extends Component {
   static propTypes = {
     settings: PropTypes.object.isRequired,
-    toggleView: PropTypes.func.isRequired
+    toggleView: PropTypes.func.isRequired,
+    availability: PropTypes.string.isRequired
   }
 
   render () {
@@ -168,6 +169,10 @@ class Views extends Component {
     const toggle = () => toggleView(id);
     const view = settings.views[id];
 
+    if (view.onlyPersonal && this.props.availability !== 'personal') {
+      return null;
+    }
+
     return (
       <div className={ styles.view } key={ id }>
         <Checkbox
@@ -196,8 +201,9 @@ class Views extends Component {
 
 function mapStateToProps (state) {
   const { settings } = state;
+  const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
 
-  return { settings };
+  return { settings, availability };
 }
 
 function mapDispatchToProps (dispatch) {