Merge branch 'master' into jg-signer-decoding

# Conflicts:
#	js/src/views/Signer/components/RequestFinished/requestFinished.js

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

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
 import CopyToClipboard from '../../../ui/CopyToClipboard';
+import Certifications from '../../../ui/Certifications';
 
 import styles from './header.css';
 
@@ -32,6 +33,7 @@ export default class Header extends Component {
   }
 
   render () {
+    const { api } = this.context;
     const { account, balance } = this.props;
     const { address, meta, uuid } = account;
 
@@ -67,6 +69,10 @@ export default class Header extends Component {
             <Balance
               account={ account }
               balance={ balance } />
+            <Certifications
+              account={ account.address }
+              dappsUrl={ api.dappsUrl }
+            />
           </div>
         </Container>
       </div>

js/src/views/Account/account.js

@@ -64,12 +64,6 @@ class Account extends Component {
   }
 
   componentDidMount () {
-    const { api } = this.context;
-    const { address } = this.props.params;
-    const { isTestnet } = this.props;
-
-    const verificationStore = new VerificationStore(api, address, isTestnet);
-    this.setState({ verificationStore });
     this.setVisibleAccounts();
   }
 
@@ -80,6 +74,15 @@ class Account extends Component {
     if (prevAddress !== nextAddress) {
       this.setVisibleAccounts(nextProps);
     }
+
+    const { isTestnet } = nextProps;
+    if (typeof isTestnet === 'boolean' && !this.state.verificationStore) {
+      const { api } = this.context;
+      const { address } = nextProps.params;
+      this.setState({
+        verificationStore: new VerificationStore(api, address, isTestnet)
+      });
+    }
   }
 
   componentWillUnmount () {
@@ -115,7 +118,8 @@ class Account extends Component {
         <Page>
           <Header
             account={ account }
-            balance={ balance } />
+            balance={ balance }
+          />
           <Transactions
             accounts={ accounts }
             address={ address } />

js/src/views/Application/Snackbar/snackbar.js

@@ -19,10 +19,17 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { Snackbar as SnackbarMUI } from 'material-ui';
-import { darkBlack } from 'material-ui/styles/colors';
+import { darkBlack, grey800 } from 'material-ui/styles/colors';
 
 import { closeSnackbar } from '../../../redux/providers/snackbarActions';
 
+const bodyStyle = {
+  backgroundColor: darkBlack,
+  borderStyle: 'solid',
+  borderColor: grey800,
+  borderWidth: '1px 1px 0 1px'
+};
+
 class Snackbar extends Component {
   static propTypes = {
     closeSnackbar: PropTypes.func.isRequired,
@@ -40,7 +47,7 @@ class Snackbar extends Component {
         open={ open }
         message={ message }
         autoHideDuration={ cooldown }
-        bodyStyle={ { backgroundColor: darkBlack } }
+        bodyStyle={ bodyStyle }
         onRequestClose={ this.handleClose }
       />
     );

js/src/views/Application/Status/status.css

@@ -15,45 +15,46 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .status {
-  padding: 0.5em;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  padding: .4em .5em;
   font-size: x-small;
   color: #ccc;
-  background-color: rgba(0, 0, 0, 0.2)
-}
-
-.title {
-  margin: 0 0.5em 0 2em;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .enode {
   word-wrap: break-word;
-  float: right;
 }
 
 .enode > * {
   display: inline-block;
-  margin: 0.25em 0.5em;
-  vertical-align: top;
+  margin: 0 .25em;
+  vertical-align: middle;
 }
-
-.block {
+.enode > :last-child {
+  margin-right: 0;
 }
 
 .netinfo {
   display: flex;
+  flex-grow: 1;
   align-items: center;
-  color: #ddd;  
+  color: #ddd;
 }
 
 .netinfo > * {
-  display: inline-block;
   margin-left: 1em;
 }
 
 .network {
   padding: 0.25em 0.5em;
-  display: inline-block;
-  border-radius: 4px;
+  border-radius: .4em;
   line-height: 1.2;
   text-transform: uppercase;
 }
@@ -65,14 +66,3 @@
 .networktest {
   background: rgb(136, 0, 0);
 }
-
-.peers {
-}
-
-.version {
-  padding: 0.25em 0.5em;
-  float: left;
-}
-
-.syncing {
-}

js/src/views/Application/Status/status.js

@@ -46,7 +46,6 @@ class Status extends Component {
         <div className={ styles.version }>
           { clientVersion }
         </div>
-        { this.renderEnode() }
         <div className={ styles.netinfo }>
           <BlockStatus />
           <div className={ netStyle }>
@@ -56,6 +55,7 @@ class Status extends Component {
             { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
           </div>
         </div>
+        { this.renderEnode() }
       </div>
     );
   }
@@ -73,7 +73,7 @@ class Status extends Component {
 
     return (
       <div className={ styles.enode }>
-        <CopyToClipboard data={ enode } />
+        <CopyToClipboard data={ enode } size={ 12 } />
         <div>{ abbreviated }</div>
       </div>
     );

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

@@ -59,7 +59,7 @@ class Tab extends Component {
         selected={ active }
         icon={ view.icon }
         label={ label }
-        onClick={ this.handleClick }
+        onTouchTap={ this.handleClick }
       >
         { children }
       </MUITab>

js/src/views/Application/application.css

@@ -21,3 +21,7 @@
   display: flex;
   flex-direction: column;
 }
+
+.container {
+  padding-bottom: 1.6em;
+}

js/src/views/Contract/Events/events.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { Container, ContainerTitle } from '../../../ui';
+import { Container } from '../../../ui';
 
 import Event from './Event';
 import styles from '../contract.css';
@@ -48,8 +48,7 @@ export default class Events extends Component {
     });
 
     return (
-      <Container>
-        <ContainerTitle title='events' />
+      <Container title='events'>
         <table className={ styles.events }>
           <tbody>{ list }</tbody>
         </table>

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

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
-import { Container, ContainerTitle, Input, InputAddress } from '../../../ui';
+import { Container, Input, InputAddress } from '../../../ui';
 
 import styles from './queries.css';
 
@@ -55,8 +55,7 @@ export default class Queries extends Component {
       .map((fn) => this.renderInputQuery(fn));
 
     return (
-      <Container>
-        <ContainerTitle title='queries' />
+      <Container title='queries'>
         <div className={ styles.methods }>
           <div className={ styles.vMethods }>
             { noInputQueries }

js/src/views/Contract/contract.js

@@ -132,7 +132,8 @@ class Contract extends Component {
         <Page>
           <Header
             account={ account }
-            balance={ balance } />
+            balance={ balance }
+          />
           <Queries
             contract={ contract }
             values={ queryValues } />
@@ -447,7 +448,10 @@ function mapStateToProps (state) {
 }
 
 function mapDispatchToProps (dispatch) {
-  return bindActionCreators({ newError, setVisibleAccounts }, dispatch);
+  return bindActionCreators({
+    newError,
+    setVisibleAccounts
+  }, dispatch);
 }
 
 export default connect(

js/src/views/ParityBar/parityBar.css

@@ -42,25 +42,26 @@
 }
 
 .expanded {
-  right: 16px;
-  max-height: 300px;
+  right: 1em;
   border-radius: 4px 4px 0 0;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
+  max-height: 19em;
 }
 
 .expanded .content {
   flex: 1;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   display: flex;
   background: rgba(0, 0, 0, 0.8);
+  min-height: 16em;
 }
 
 .corner {
   position: absolute;
   bottom: 0;
-  right: 16px;
+  right: 1em;
   border-radius: 4px 4px 0 0;
 }
 
@@ -118,7 +119,7 @@
 }
 
 .header {
-  height: 36px;
+  height: 2em;
   padding: 0.5em 1em;
   background: rgba(0, 0, 0, 0.25);
   margin-bottom: 0;
@@ -148,6 +149,7 @@
 
 .actions {
   float: right;
+  margin-top: -2px;
 }
 
 .actions div {

js/src/views/Settings/Background/background.js

@@ -19,7 +19,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
 
-import { Button, Container, ContainerTitle, ParityBackground } from '../../../ui';
+import { Button, Container, ParityBackground } from '../../../ui';
 
 import { updateBackground } from '../actions';
 
@@ -55,8 +55,7 @@ class Background extends Component {
 
   render () {
     return (
-      <Container>
-        <ContainerTitle title='Background Pattern' />
+      <Container title='Background Pattern'>
         <div className={ layout.layout }>
           <div className={ layout.overview }>
             <div>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.</div>

js/src/views/Settings/Parity/parity.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { MenuItem } from 'material-ui';
 
-import { Select, Container, ContainerTitle } from '../../../ui';
+import { Select, Container } from '../../../ui';
 
 import layout from '../layout.css';
 
@@ -43,8 +43,7 @@ export default class Parity extends Component {
 
   render () {
     return (
-      <Container>
-        <ContainerTitle title='Parity' />
+      <Container title='Parity'>
         <div className={ layout.layout }>
           <div className={ layout.overview }>
             <div>Control the Parity node settings and mode of operation via this interface.</div>

js/src/views/Settings/Proxy/proxy.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { Container, ContainerTitle } from '../../../ui';
+import { Container } from '../../../ui';
 
 import layout from '../layout.css';
 import styles from './proxy.css';
@@ -31,8 +31,7 @@ export default class Proxy extends Component {
     const proxyurl = `${dappsUrl}/proxy/proxy.pac`;
 
     return (
-      <Container>
-        <ContainerTitle title='Proxy' />
+      <Container title='Proxy'>
         <div className={ layout.layout }>
           <div className={ layout.overview }>
             <div>The proxy setup allows you to access Parity and all associated decentralized applications via memorable addresses.</div>

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

@@ -19,7 +19,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Checkbox } from 'material-ui';
 
-import { Container, ContainerTitle } from '../../../ui';
+import { Container } from '../../../ui';
 
 import { toggleView } from '../actions';
 
@@ -34,8 +34,7 @@ class Views extends Component {
 
   render () {
     return (
-      <Container>
-        <ContainerTitle title='Views' />
+      <Container title='Views'>
         <div className={ layout.layout }>
           <div className={ layout.overview }>
             <div>Manage the available application views, using only the parts of the application that is applicable to you.</div>

js/src/views/Signer/components/RequestPending/requestPending.js

@@ -27,7 +27,8 @@ export default class RequestPending extends Component {
     isSending: PropTypes.bool.isRequired,
     date: PropTypes.instanceOf(Date).isRequired,
     payload: PropTypes.oneOfType([
-      PropTypes.shape({ transaction: PropTypes.object.isRequired }),
+      PropTypes.shape({ signTransaction: PropTypes.object.isRequired }),
+      PropTypes.shape({ sendTransaction: PropTypes.object.isRequired }),
       PropTypes.shape({ sign: PropTypes.object.isRequired })
     ]).isRequired,
     className: PropTypes.string,
@@ -64,9 +65,8 @@ export default class RequestPending extends Component {
       );
     }
 
-    if (payload.transaction) {
-      const { transaction } = payload;
-
+    const transaction = payload.sendTransaction || payload.signTransaction;
+    if (transaction) {
       return (
         <TransactionPending
           className={ className }

js/src/views/Status/components/Debug/Debug.js

@@ -20,7 +20,7 @@ import AvPlay from 'material-ui/svg-icons/av/play-arrow';
 import AvReplay from 'material-ui/svg-icons/av/replay';
 import ReorderIcon from 'material-ui/svg-icons/action/reorder';
 
-import { Container, ContainerTitle } from '../../../../ui';
+import { Container } from '../../../../ui';
 
 import styles from './Debug.css';
 
@@ -42,9 +42,7 @@ export default class Debug extends Component {
     const { devLogsLevels } = nodeStatus;
 
     return (
-      <Container>
-        <ContainerTitle
-          title='Node Logs' />
+      <Container title='Node Logs'>
         { this.renderActions() }
         <h2 className={ styles.subheader }>
           { devLogsLevels || '-' }