Ui 2 updates subscribe (#6027)

* Add account & vault APIs * Additional status methods * Move permission modals into Dapp * Adjust display position * Don't publish invalid events * Cleanup Wallet display * Update package-lock * Align icon buttons center * Adjust account selectors * Adjust wallet white * Allow display of boolean/false values * Pass value through correctly for disabled inputs * Split requests into sections * onClict -> onClick * Update label * Update skip step * Connect provider interfaces
2017-07-10 11:04:29 +02:00 · 2017-07-10 11:04:29 +02:00 · cbcda140ec
commit cbcda140ec
parent 76f0247f5d
14 changed files with 126 additions and 105 deletions
--- a/js/package-lock.json
+++ b/js/package-lock.json
@ -1559,9 +1559,9 @@
      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk="
    },
    "commander": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.10.0.tgz",
-      "integrity": "sha512-q/r9trjmuikWDRJNTBHAVnWhuU6w+z80KgBq7j9YDclik5E7X4xi0KnlZBNFA1zOQ+SH/vHMWd2mC9QTOz7GpA=="
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
    },
    "commondir": {
      "version": "1.0.1",
@ -4120,7 +4120,8 @@
    "graceful-readlink": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
+      "dev": true
    },
    "growl": {
      "version": "1.9.2",
@ -4729,9 +4730,9 @@
      "dev": true
    },
    "irregular-plurals": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.2.0.tgz",
-      "integrity": "sha1-OPKZg0uowAwwvpxVThNyaXUv86w=",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.3.0.tgz",
+      "integrity": "sha512-njf5A+Mxb3kojuHd1DzISjjIl+XhyzovXEOyPPSzdQozq/Lf2tN27mOrAAsxEPZxpn6I4MGzs1oo9TxXxPFpaA==",
      "dev": true
    },
    "is-absolute": {
@ -6793,9 +6794,9 @@
          "dev": true
        },
        "postcss": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.4.tgz",
-          "integrity": "sha1-VzrN33P0LsskqmGNQO49WnwEplQ=",
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.5.tgz",
+          "integrity": "sha1-76NPdFyiW9Ozy9FapOAxErgjfzw=",
          "dev": true
        },
        "supports-color": {
@ -6831,9 +6832,9 @@
          "dev": true
        },
        "postcss": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.4.tgz",
-          "integrity": "sha1-VzrN33P0LsskqmGNQO49WnwEplQ=",
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.5.tgz",
+          "integrity": "sha1-76NPdFyiW9Ozy9FapOAxErgjfzw=",
          "dev": true
        },
        "supports-color": {
@ -6869,9 +6870,9 @@
          "dev": true
        },
        "postcss": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.4.tgz",
-          "integrity": "sha1-VzrN33P0LsskqmGNQO49WnwEplQ=",
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.5.tgz",
+          "integrity": "sha1-76NPdFyiW9Ozy9FapOAxErgjfzw=",
          "dev": true
        },
        "supports-color": {
@ -6907,9 +6908,9 @@
          "dev": true
        },
        "postcss": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.4.tgz",
-          "integrity": "sha1-VzrN33P0LsskqmGNQO49WnwEplQ=",
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.5.tgz",
+          "integrity": "sha1-76NPdFyiW9Ozy9FapOAxErgjfzw=",
          "dev": true
        },
        "supports-color": {
--- a/js/src/api/subscriptions/eth.js
+++ b/js/src/api/subscriptions/eth.js
@ -43,11 +43,6 @@ export default class Eth {
      }, timeout);
    };

-    if (!this._api.transport.isConnected) {
-      nextTimeout(500);
-      return;
-    }
-
    return this._api.eth
      .blockNumber()
      .then((blockNumber) => {
--- a/js/src/api/subscriptions/personal.js
+++ b/js/src/api/subscriptions/personal.js
@ -53,11 +53,6 @@ export default class Personal {
      }
    };

-    if (!this._api.transport.isConnected) {
-      nextTimeout(500);
-      return;
-    }
-
    return this._api.parity
      .defaultAccount()
      .then((defaultAccount) => {
--- a/js/src/shell/DappRequests/filteredRequests.js
+++ b/js/src/shell/DappRequests/filteredRequests.js
@ -15,31 +15,55 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 export default {
-  'parity_accountsInfo': {},
-  'parity_allAccountsInfo': {},
-  'parity_changeVault': {},
-  'parity_changeVaultPassword': {},
-  'parity_consensusCapability': {},
-  'parity_checkRequest': {},
-  'parity_closeVault': {},
-  'parity_executeUpgrade': {},
-  'parity_generateSecretPhrase': {},
-  'parity_getVaultMeta': {},
-  'parity_hashContent': {},
-  'parity_importGethAccounts': {},
-  'parity_localTransactions': {},
-  'parity_listGethAccounts': {},
-  'parity_listVaults': {},
-  'parity_listOpenedVaults': {},
-  'parity_newAccountFromPhrase': {},
-  'parity_newAccountFromSecret': {},
-  'parity_newAccountFromWallet': {},
-  'parity_newVault': {},
-  'parity_openVault': {},
-  'parity_phraseToAddress': {},
-  'parity_setAccountMeta': {},
-  'parity_setAccountName': {},
-  'parity_setVaultMeta': {},
-  'parity_upgradeReady': {},
-  'parity_versionInfo': {}
+  accountsView: {
+    methods: [
+      'parity_accountsInfo',
+      'parity_allAccountsInfo'
+    ]
+  },
+  accountsCreate: {
+    methods: [
+      'parity_generateSecretPhrase',
+      'parity_importGethAccounts',
+      'parity_listGethAccounts',
+      'parity_newAccountFromPhrase',
+      'parity_newAccountFromSecret',
+      'parity_newAccountFromWallet',
+      'parity_phraseToAddress'
+    ]
+  },
+  accountsEdit: {
+    methods: [
+      'parity_setAccountName',
+      'parity_setAccountMeta'
+    ]
+  },
+  upgrade: {
+    methods: [
+      'parity_consensusCapability',
+      'parity_executeUpgrade',
+      'parity_upgradeReady',
+      'parity_versionInfo'
+    ]
+  },
+  vaults: {
+    methods: [
+      'parity_changeVault',
+      'parity_changeVaultPassword',
+      'parity_closeVault',
+      'parity_getVaultMeta',
+      'parity_listVaults',
+      'parity_listOpenedVaults',
+      'parity_newVault',
+      'parity_openVault',
+      'parity_setVaultMeta'
+    ]
+  },
+  other: {
+    methods: [
+      'parity_checkRequest',
+      'parity_hashContent',
+      'parity_localTransactions'
+    ]
+  }
 };
--- a/js/src/shell/DappRequests/store.js
+++ b/js/src/shell/DappRequests/store.js
@ -39,7 +39,8 @@ export default class Store {
    const duplicates = {};

    return this.requests.filter(({ request: { data: { method, token } } }) => {
-      const id = `${token}:${method}`;
+      const section = this.getFilteredSectionName(method);
+      const id = `${token}:${section}`;

      if (!duplicates[id]) {
        duplicates[id] = true;
@ -71,10 +72,11 @@ export default class Store {

    if (approveAll) {
      const { request: { data: { method, token } } } = queued;
-      const requests = this.findMatchingRequests(method, token);

-      this.methodsStore.addTokenPermission(method, token);
-      requests.forEach(this.approveSingleRequest);
+      this.getFilteredSection(method).methods.forEach((m) => {
+        this.methodsStore.addTokenPermission(m, token);
+        this.findMatchingRequests(m, token).forEach(this.approveSingleRequest);
+      });
    } else {
      this.approveSingleRequest(queued);
    }
@ -115,6 +117,16 @@ export default class Store {
    });
  }

+  getFilteredSectionName = (method) => {
+    return Object.keys(filteredRequests).find((key) => {
+      return filteredRequests[key].methods.includes(method);
+    });
+  }
+
+  getFilteredSection = (method) => {
+    return filteredRequests[this.getFilteredSectionName(method)];
+  }
+
  receiveMessage = ({ data, origin, source }) => {
    if (!data) {
      return;
@ -126,7 +138,7 @@ export default class Store {
      return;
    }

-    if (filteredRequests[method] && !this.methodsStore.hasTokenPermission(method, token)) {
+    if (this.getFilteredSection(method) && !this.methodsStore.hasTokenPermission(method, token)) {
      this.queueRequest({ data, origin, source });
      return;
    }
--- a/js/src/shell/Dapps/SelectMethods/store.js
+++ b/js/src/shell/Dapps/SelectMethods/store.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 { flatten } from 'lodash';
 import { action, observable } from 'mobx';
 import store from 'store';

@ -24,7 +25,9 @@ import filteredRequests from '../../DappRequests/filteredRequests';
 const LS_PERMISSIONS = '_parity::dapps::methods';

 export default class Store {
-  @observable filteredRequests = Object.keys(filteredRequests);
+  @observable filteredRequests = flatten(
+    Object.keys(filteredRequests).map((key) => filteredRequests[key].methods)
+  );
  @observable modalOpen = false;
  @observable permissions = {};
  @observable tokens = {};
--- a/js/src/shell/FirstRun/TnC/tnc.js
+++ b/js/src/shell/FirstRun/TnC/tnc.js
@ -166,7 +166,7 @@ export default function TnC ({ hasAccepted, onAccept }) {
          />
        }
        checked={ hasAccepted }
-        onClict={ onAccept }
+        onClick={ onAccept }
      />
    </div>
  );
--- a/js/src/shell/FirstRun/firstRun.js
+++ b/js/src/shell/FirstRun/firstRun.js
@ -314,7 +314,7 @@ class FirstRun extends Component {
  }

  skipAccountCreation = () => {
-    this.setState({ stage: this.state.stage + 2 });
+    this.setState({ stage: this.state.stage + 3 });
  }

  printPhrase = () => {
--- a/js/src/ui/Form/Checkbox/checkbox.js
+++ b/js/src/ui/Form/Checkbox/checkbox.js
@ -19,7 +19,7 @@ import { Checkbox as SemanticCheckbox } from 'semantic-ui-react';

 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';

-import LabelWrapper from '../LabelWrapper';
+import Label from '../Label';

 export default function Checkbox ({ checked = false, className, label, onClick, style }) {
  return (
@ -27,7 +27,7 @@ export default function Checkbox ({ checked = false, className, label, onClick,
      checked={ checked }
      className={ className }
      label={
-        <LabelWrapper label={ label } />
+        <Label label={ label } />
      }
      onClick={ onClick }
      style={ style }
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@ -113,6 +113,11 @@ export default class Input extends Component {
  render () {
    const { children, className, defaultValue, disabled, error, hint, label, max, min, onClick, readOnly, step, style, tabIndex, type } = this.props;
    const { value } = this.state;
+    const displayValue = typeof value !== 'undefined'
+      ? value
+      : defaultValue;
+
+    console.log('Input', displayValue, parseI18NString(this.context, `${displayValue}`));

    return (
      <LabelWrapper
@ -141,11 +146,11 @@ export default class Input extends Component {
          step={ step }
          style={ style }
          tabIndex={ tabIndex }
-          value={ parseI18NString(this.context, value || defaultValue) }
        >
          { this.renderCopyButton() }
          <input
            type={ type }
+            value={ parseI18NString(this.context, `${displayValue}`) }
          />
          { children }
        </SemanticInput>
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@ -66,7 +66,16 @@ class InputAddress extends Component {
    classes.push(!icon ? styles.inputEmpty : styles.input);

    const containerClasses = [ styles.container ];
-    const nullName = (disabled || readOnly) && isNullAddress(value) ? 'null' : null;
+    const nullName = (disabled || readOnly) && isNullAddress(value)
+      ? 'null'
+      : null;
+
+    // FIXME: The is not advisable, fixes the display issue, however the name should come from
+    // a common component.
+    //    account.name || (value ? 'UNNAMED' : value)
+    const displayValue = text && account
+      ? (account.name || (value ? 'UNNAMED' : value))
+      : (nullName || value);

    if (small) {
      containerClasses.push(styles.small);
@ -78,9 +87,6 @@ class InputAddress extends Component {
      props.focused = focused;
    }

-    // FIXME: The is not advisable, fixes the display issue, however the name should come from
-    // a common component.
-    //    account.name || (value ? 'UNNAMED' : value)
    return (
      <div className={ containerClasses.join(' ') }>
        <Input
@ -98,11 +104,7 @@ class InputAddress extends Component {
          onSubmit={ this.onSubmit }
          readOnly={ readOnly }
          tabIndex={ tabIndex }
-          value={
-            text && account
-              ? (account.name || (value ? 'UNNAMED' : value))
-              : (nullName || value)
-          }
+          value={ displayValue }
          { ...props }
        />
        { icon }
--- a/js/src/views/Accounts/CreateAccount/createAccount.css
+++ b/js/src/views/Accounts/CreateAccount/createAccount.css
@ -80,23 +80,31 @@
 }

 .identities {
+  align-items: center;
  display: flex;

  .identity {
-    border: 1px solid transparent;
    cursor: pointer;
    flex: 0 1 12.5%;
    padding: 0.75em 0;
    text-align: center;
    width: 12.5% !important;

+    > img {
+      border: 2px solid transparent;
+      box-sizing: content-box;
+      padding: 1em;
+    }
+
    &.selected {
-      border-color: #2185D0;
-      border-radius: 8px;
-      background: rgba(200, 200, 225, 0.5);
+      > img {
+        background: white;
+        border-color: #2185D0;
+      }
    }

    &.unselected {
+      opacity: 0.75;
    }
  }
 }
--- a/js/src/views/Wallet/wallet.css
+++ b/js/src/views/Wallet/wallet.css
@ -70,7 +70,6 @@

 .detail {
  font-size: 1.125em;
-  color: white;
  margin: 0 0.375em;
  line-height: 1.5em;

--- a/js/src/views/Wallet/wallet.js
+++ b/js/src/views/Wallet/wallet.js
@ -39,29 +39,6 @@ import styles from './wallet.css';

 const accountsHistory = HistoryStore.get('accounts');

-class WalletContainer extends Component {
-  static propTypes = {
-    netVersion: PropTypes.string.isRequired
-  };
-
-  render () {
-    const { netVersion, ...others } = this.props;
-
-    if (netVersion === '0') {
-      return (
-        <Loading size='large' />
-      );
-    }
-
-    return (
-      <Wallet
-        netVersion={ netVersion }
-        { ...others }
-      />
-    );
-  }
-}
-
 class Wallet extends Component {
  static contextTypes = {
    api: PropTypes.object.isRequired
@ -422,4 +399,4 @@ function mapDispatchToProps (dispatch) {
 export default connect(
  mapStateToProps,
  mapDispatchToProps
-)(WalletContainer);
+)(Wallet);