Account view updates (#4008)

* Fix null account render issue, add tests

* Add tests for #3999 fix (merged in #4000)

* Only include sinon-as-promised globally for mocha

* Move transactions state into tested store

* Add esjify for mocha + ejs (cherry-picked)

* Extract store state into store, test it

* Use address (as per PR comments)

* Fix failing test after master merge

js/package.json

@@ -43,8 +43,8 @@
     "lint:css": "stylelint ./src/**/*.css",
     "lint:js": "eslint --ignore-path .gitignore ./src/",
     "lint:js:cached": "eslint --cache --ignore-path .gitignore ./src/",
-    "test": "NODE_ENV=test mocha 'src/**/*.spec.js'",
-    "test:coverage": "NODE_ENV=test istanbul cover _mocha -- 'src/**/*.spec.js'",
+    "test": "NODE_ENV=test mocha --compilers ejs:ejsify 'src/**/*.spec.js'",
+    "test:coverage": "NODE_ENV=test istanbul cover _mocha -- --compilers ejs:ejsify 'src/**/*.spec.js'",
     "test:e2e": "NODE_ENV=test mocha 'src/**/*.e2e.js'",
     "test:npm": "(cd .npmjs && npm i) && node test/npmParity && (rm -rf .npmjs/node_modules)",
     "prepush": "npm run lint:cached"
@@ -80,6 +80,7 @@
     "coveralls": "2.11.15",
     "css-loader": "0.26.1",
     "ejs-loader": "0.3.0",
+    "ejsify": "1.0.0",
     "enzyme": "2.7.0",
     "eslint": "3.11.1",
     "eslint-config-semistandard": "7.0.0",

js/src/3rdparty/etherscan/account.js

@@ -49,17 +49,17 @@ function transactions (address, page, test = false) {
   // page offset from 0
   return _call('txlist', {
     address: address,
-    page: (page || 0) + 1,
     offset: PAGE_SIZE,
+    page: (page || 0) + 1,
     sort: 'desc'
   }, test).then((transactions) => {
     return transactions.map((tx) => {
       return {
+        blockNumber: new BigNumber(tx.blockNumber || 0),
         from: util.toChecksumAddress(tx.from),
-        to: util.toChecksumAddress(tx.to),
         hash: tx.hash,
-        blockNumber: new BigNumber(tx.blockNumber),
         timeStamp: tx.timeStamp,
+        to: util.toChecksumAddress(tx.to),
         value: tx.value
       };
     });

js/src/3rdparty/etherscan/helpers.spec.js

@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Parity Technologies (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/>.
+
+import nock from 'nock';
+import { stringify } from 'qs';
+
+import { url } from './links';
+
+function mockget (requests, test) {
+  let scope = nock(url(test));
+
+  requests.forEach((request) => {
+    scope = scope
+      .get(`/api?${stringify(request.query)}`)
+      .reply(request.code || 200, () => {
+        return { result: request.reply };
+      });
+  });
+
+  return scope;
+}
+
+export {
+  mockget
+};

js/src/api/subscriptions/eth.spec.js

@@ -16,7 +16,6 @@
 
 import BigNumber from 'bignumber.js';
 import sinon from 'sinon';
-import 'sinon-as-promised';
 
 import Eth from './eth';
 

js/src/api/subscriptions/personal.spec.js

@@ -15,7 +15,6 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import sinon from 'sinon';
-import 'sinon-as-promised';
 
 import Personal from './personal';
 

js/src/ui/Actionbar/actionbar.js

@@ -50,8 +50,7 @@ export default class Actionbar extends Component {
     }
 
     return (
-      <ToolbarGroup
-        className={ styles.toolbuttons }>
+      <ToolbarGroup className={ styles.toolbuttons }>
         { buttons }
       </ToolbarGroup>
     );

js/src/ui/Certifications/certifications.js

@@ -25,7 +25,7 @@ import styles from './certifications.css';
 
 class Certifications extends Component {
   static propTypes = {
-    account: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
     certifications: PropTypes.array.isRequired,
     dappsUrl: PropTypes.string.isRequired
   }
@@ -60,10 +60,10 @@ class Certifications extends Component {
 }
 
 function mapStateToProps (_, initProps) {
-  const { account } = initProps;
+  const { address } = initProps;
 
   return (state) => {
-    const certifications = state.certifications[account] || [];
+    const certifications = state.certifications[address] || [];
     const dappsUrl = state.api.dappsUrl;
 
     return { certifications, dappsUrl };

js/src/ui/Icons/index.js

@@ -22,13 +22,16 @@ import CompareIcon from 'material-ui/svg-icons/action/compare-arrows';
 import ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac';
 import ContractIcon from 'material-ui/svg-icons/action/code';
 import DashboardIcon from 'material-ui/svg-icons/action/dashboard';
+import DeleteIcon from 'material-ui/svg-icons/action/delete';
 import DoneIcon from 'material-ui/svg-icons/action/done-all';
-import LockedIcon from 'material-ui/svg-icons/action/lock-outline';
+import EditIcon from 'material-ui/svg-icons/content/create';
+import LockedIcon from 'material-ui/svg-icons/action/lock';
 import NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
 import PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
 import SaveIcon from 'material-ui/svg-icons/content/save';
 import SendIcon from 'material-ui/svg-icons/content/send';
 import SnoozeIcon from 'material-ui/svg-icons/av/snooze';
+import VerifyIcon from 'material-ui/svg-icons/action/verified-user';
 import VisibleIcon from 'material-ui/svg-icons/image/remove-red-eye';
 import VpnIcon from 'material-ui/svg-icons/notification/vpn-lock';
 
@@ -41,13 +44,16 @@ export {
   ComputerIcon,
   ContractIcon,
   DashboardIcon,
+  DeleteIcon,
   DoneIcon,
+  EditIcon,
   LockedIcon,
   NextIcon,
   PrevIcon,
   SaveIcon,
   SendIcon,
   SnoozeIcon,
+  VerifyIcon,
   VisibleIcon,
   VpnIcon
 };

js/src/views/Account/Header/header.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '~/ui';
 import CopyToClipboard from '~/ui/CopyToClipboard';
@@ -26,76 +27,76 @@ export default class Header extends Component {
   static propTypes = {
     account: PropTypes.object,
     balance: PropTypes.object,
-    className: PropTypes.string,
     children: PropTypes.node,
-    isContract: PropTypes.bool,
-    hideName: PropTypes.bool
+    className: PropTypes.string,
+    hideName: PropTypes.bool,
+    isContract: PropTypes.bool
   };
 
   static defaultProps = {
-    className: '',
     children: null,
-    isContract: false,
-    hideName: false
+    className: '',
+    hideName: false,
+    isContract: false
   };
 
   render () {
-    const { account, balance, className, children, hideName } = this.props;
-    const { address, meta, uuid } = account;
+    const { account, balance, children, className, hideName } = this.props;
+
     if (!account) {
       return null;
     }
 
-    const uuidText = !uuid
-      ? null
-      : <div className={ styles.uuidline }>uuid: { uuid }</div>;
+    const { address } = account;
+    const meta = account.meta || {};
 
     return (
       <div className={ className }>
         <Container>
-          <IdentityIcon
-            address={ address } />
+          <IdentityIcon address={ address } />
           <div className={ styles.floatleft }>
-            { this.renderName(address) }
-
+            { this.renderName() }
             <div className={ [ hideName ? styles.bigaddress : '', styles.addressline ].join(' ') }>
               <CopyToClipboard data={ address } />
               <div className={ styles.address }>{ address }</div>
             </div>
-
-            { uuidText }
+            { this.renderUuid() }
             <div className={ styles.infoline }>
               { meta.description }
             </div>
             { this.renderTxCount() }
           </div>
-
           <div className={ styles.tags }>
             <Tags tags={ meta.tags } />
           </div>
           <div className={ styles.balances }>
             <Balance
               account={ account }
               balance={ balance } />
-            <Certifications
-              account={ account.address }
-            />
+            <Certifications address={ address } />
           </div>
           { children }
         </Container>
       </div>
     );
   }
 
-  renderName (address) {
+  renderName () {
     const { hideName } = this.props;
 
     if (hideName) {
       return null;
     }
 
+    const { address } = this.props.account;
+
     return (
-      <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
+      <ContainerTitle
+        title={
+          <IdentityName
+            address={ address }
+            unknown />
+        } />
     );
   }
 
@@ -114,7 +115,31 @@ export default class Header extends Component {
 
     return (
       <div className={ styles.infoline }>
-        { txCount.toFormat() } outgoing transactions
+        <FormattedMessage
+          id='account.header.outgoingTransactions'
+          defaultMessage='{count} outgoing transactions'
+          values={ {
+            count: txCount.toFormat()
+          } } />
+      </div>
+    );
+  }
+
+  renderUuid () {
+    const { uuid } = this.props.account;
+
+    if (!uuid) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.uuidline }>
+        <FormattedMessage
+          id='account.header.uuid'
+          defaultMessage='uuid: {uuid}'
+          values={ {
+            uuid
+          } } />
       </div>
     );
   }