Merge branch 'master' into ng-webpack-update

js/src/views/Application/Snackbar/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (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/>.
+
+export default from './snackbar';

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

@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (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 React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { Snackbar as SnackbarMUI } from 'material-ui';
+import { darkBlack } from 'material-ui/styles/colors';
+
+import { closeSnackbar } from '../../../redux/providers/snackbarActions';
+
+class Snackbar extends Component {
+  static propTypes = {
+    closeSnackbar: PropTypes.func.isRequired,
+
+    open: PropTypes.bool,
+    cooldown: PropTypes.number,
+    message: PropTypes.any
+  };
+
+  render () {
+    const { open, message, cooldown } = this.props;
+
+    return (
+      <SnackbarMUI
+        open={ open }
+        message={ message }
+        autoHideDuration={ cooldown }
+        bodyStyle={ { backgroundColor: darkBlack } }
+        onRequestClose={ this.handleClose }
+      />
+    );
+  }
+
+  handleClose = () => {
+    this.props.closeSnackbar();
+  }
+}
+
+function mapStateToProps (state) {
+  const { open, message, cooldown } = state.snackbar;
+  return { open, message, cooldown };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    closeSnackbar
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Snackbar);

js/src/views/Application/application.js

@@ -17,21 +17,24 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { observer } from 'mobx-react';
 
 import Connection from '../Connection';
 import ParityBar from '../ParityBar';
 
+import Snackbar from './Snackbar';
 import Container from './Container';
 import DappContainer from './DappContainer';
 import FrameError from './FrameError';
 import Status from './Status';
+import Store from './store';
 import TabBar from './TabBar';
 
 import styles from './application.css';
 
 const inFrame = window.parent !== window && window.parent.frames.length !== 0;
-const showFirstRun = window.localStorage.getItem('showFirstRun') === '1';
 
+@observer
 class Application extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
@@ -46,13 +49,7 @@ class Application extends Component {
     blockNumber: PropTypes.object
   }
 
-  state = {
-    showFirstRun: false
-  }
-
-  componentWillMount () {
-    this.checkAccounts();
-  }
+  store = new Store(this.context.api);
 
   render () {
     const [root] = (window.location.hash || '').replace('#/', '').split('/');
@@ -75,18 +72,18 @@ class Application extends Component {
 
   renderApp () {
     const { children, pending, netChain, isTest, blockNumber } = this.props;
-    const { showFirstRun } = this.state;
 
     return (
       <Container
-        showFirstRun={ showFirstRun }
-        onCloseFirstRun={ this.onCloseFirstRun }>
+        showFirstRun={ this.store.firstrunVisible }
+        onCloseFirstRun={ this.store.closeFirstrun }>
         <TabBar
           netChain={ netChain }
           isTest={ isTest }
           pending={ pending } />
         { children }
         { blockNumber ? (<Status />) : null }
+        <Snackbar />
       </Container>
     );
   }
@@ -100,28 +97,6 @@ class Application extends Component {
       </DappContainer>
     );
   }
-
-  checkAccounts () {
-    const { api } = this.context;
-
-    api.eth
-      .accounts()
-      .then((accounts) => {
-        this.setState({
-          showFirstRun: showFirstRun || accounts.length === 0
-        });
-      })
-      .catch((error) => {
-        console.error('checkAccounts', error);
-      });
-  }
-
-  onCloseFirstRun = () => {
-    window.localStorage.setItem('showFirstRun', '0');
-    this.setState({
-      showFirstRun: false
-    });
-  }
 }
 
 function mapStateToProps (state) {

js/src/views/Application/store.js

@@ -0,0 +1,51 @@
+// Copyright 2015, 2016 Ethcore (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 { action, observable } from 'mobx';
+
+const showFirstRun = window.localStorage.getItem('showFirstRun') !== '0';
+
+export default class Store {
+  @observable firstrunVisible = showFirstRun;
+
+  constructor (api) {
+    this._api = api;
+
+    this._checkAccounts();
+  }
+
+  @action closeFirstrun = () => {
+    this.toggleFirstrun(false);
+  }
+
+  @action toggleFirstrun = (visible = false) => {
+    this.firstrunVisible = visible;
+    window.localStorage.setItem('showFirstRun', visible ? '1' : '0');
+  }
+
+  _checkAccounts () {
+    this._api.parity
+      .accountsInfo()
+      .then((info) => {
+        const accounts = Object.keys(info).filter((address) => info[address].uuid);
+
+        this.toggleFirstrun(this.firstrunVisible || !accounts || !accounts.length);
+      })
+      .catch((error) => {
+        console.error('checkAccounts', error);
+      });
+  }
+}

js/src/views/ParityBar/parityBar.css

@@ -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/>.
 */
+
 .bar, .expanded {
   position: fixed;
   bottom: 0;
@@ -42,8 +43,7 @@
 
 .expanded {
   right: 16px;
-  width: 964px;
-  height: 300px;
+  max-height: 300px;
   border-radius: 4px 4px 0 0;
   overflow-y: auto;
   display: flex;

js/src/views/Signer/_layout.css

@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+$pendingHeight: 190px;
+$finishedHeight: 120px;
+
+$embedWidth: 920px;
+$statusWidth: 260px;
+
+$accountPadding: 75px;

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

@@ -14,31 +14,35 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  position: relative;
-  padding: 25px 0 15px;
+  display: flex;
+  padding: 1.5em 0 1em;
 }
 
 .actions, .signDetails {
-  display: inline-block;
   vertical-align: middle;
-  min-height: 120px;
+  min-height: $pendingHeight;
 }
 
 .signDetails {
-  border-right: 1px solid #eee;
-  margin-right: 2rem;
-  /* TODO [todr] mess - just to align with transaction */
-  width:  430px;
+  flex: 1;
 }
 
 .address, .info {
+  box-sizing: border-box;
   display: inline-block;
+  width: 50%;
+}
+
+.address {
+  padding-right: $accountPadding;
 }
 
 .info {
   padding: 0 30px;
-  width: 250px;
   color: #E53935;
   vertical-align: top;
 }
@@ -63,7 +67,7 @@
 
 .actions {
   display: inline-block;
-  min-height: 120px;
+  min-height: $finishedHeight;
 }
 
 .signDetails img {

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

@@ -15,31 +15,26 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import '../../_layout.css';
+
 .container {
-  padding: 25px 0 15px;
-}
+  display: flex;
+  padding: 1.5em 0 1em;
 
-.mainContainer {
-  position: relative;
-}
-
-.mainContainer > * {
-  vertical-align: middle;
-  min-height: 120px;
+  & > * {
+    vertical-align: middle;
+    min-height: $finishedHeight;
+  }
 }
 
 .statusContainer {
-  width: 220px;
-  padding: 0 40px 0 40px;
-  /*border-left: 1px solid #aaa;*/
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
+  float: right;
+  padding: 0 1em;
+  flex: 0 0 $statusWidth;
 }
 
 .transactionDetails {
-  padding-right: 321px;
   width: 100%;
   box-sizing: border-box;
 }

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

@@ -63,22 +63,20 @@ export default class TransactionFinished extends Component {
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
-          <TransactionMainDetails
-            { ...this.props }
-            { ...this.state }
-            fromBalance={ fromBalance }
-            toBalance={ toBalance }
-            className={ styles.transactionDetails }
-          >
-            <TransactionSecondaryDetails
-              id={ id }
-              date={ date }
-            />
-          </TransactionMainDetails>
-          <div className={ styles.statusContainer }>
-            { this.renderStatus() }
-          </div>
+        <TransactionMainDetails
+          { ...this.props }
+          { ...this.state }
+          fromBalance={ fromBalance }
+          toBalance={ toBalance }
+          className={ styles.transactionDetails }
+        >
+          <TransactionSecondaryDetails
+            id={ id }
+            date={ date }
+          />
+        </TransactionMainDetails>
+        <div className={ styles.statusContainer }>
+          { this.renderStatus() }
         </div>
       </div>
     );

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css

@@ -14,7 +14,11 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .transaction {
+  flex: 1;
 }
 
 .transaction > * {
@@ -30,11 +34,11 @@
 }
 
 .from .account {
-  padding-right: 75px;
+  padding-right: $accountPadding;
 }
 
 .to .account {
-  padding-left: 75px;
+  padding-left: $accountPadding;
 }
 
 .from img, .to img {

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js

@@ -33,7 +33,6 @@ export default class TransactionMainDetails extends Component {
     isTest: PropTypes.bool.isRequired,
     to: PropTypes.string, // undefined if it's a contract
     toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
-    className: PropTypes.string,
     children: PropTypes.node
   };
 
@@ -60,23 +59,15 @@ export default class TransactionMainDetails extends Component {
   }
 
   render () {
-    const { className, children } = this.props;
+    const { to } = this.props;
 
-    return (
-      <div className={ className }>
-        { this.renderTransfer() }
-        { this.renderContract() }
-        { children }
-      </div>
-    );
+    return to
+      ? this.renderTransfer()
+      : this.renderContract();
   }
 
   renderTransfer () {
-    const { from, fromBalance, to, toBalance, isTest } = this.props;
-
-    if (!to) {
-      return;
-    }
+    const { children, from, fromBalance, to, toBalance, isTest } = this.props;
 
     return (
       <div className={ styles.transaction }>
@@ -101,16 +92,13 @@ export default class TransactionMainDetails extends Component {
               isTest={ isTest } />
           </div>
         </div>
+        { children }
       </div>
     );
   }
 
   renderContract () {
-    const { from, fromBalance, to, isTest } = this.props;
-
-    if (to) {
-      return;
-    }
+    const { children, from, fromBalance, isTest } = this.props;
 
     return (
       <div className={ styles.transaction }>
@@ -134,6 +122,7 @@ export default class TransactionMainDetails extends Component {
             Contract
           </div>
         </div>
+        { children }
       </div>
     );
   }

js/src/views/Signer/components/TransactionPending/TransactionPending.css

@@ -14,33 +14,14 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  padding: 25px 0 15px;
-}
+  display: flex;
+  padding: 1.5em 0 1em;
 
-.transactionDetails {
-  padding-right: 321px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.mainContainer {
-  position: relative;
-}
-
-.mainContainer:after {
-  clear: both;
-}
-
-.mainContainer > * {
-  vertical-align: middle;
-  min-height: 190px;
-}
-
-.inputs {
-  margin-right: 30px;
-  margin-left: 30px;
-  width: 180px;
-  position: relative;
-  top: -15px; /* due to material ui weird styling */
+  & > * {
+    vertical-align: middle;
+  }
 }

js/src/views/Signer/components/TransactionPending/TransactionPending.js

@@ -70,29 +70,27 @@ export default class TransactionPending extends Component {
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
-          <TransactionMainDetails
-            { ...this.props }
-            { ...this.state }
-            fromBalance={ fromBalance }
-            toBalance={ toBalance }
-            className={ styles.transactionDetails }
-            totalValue={ totalValue }>
-            <TransactionSecondaryDetails
-              id={ id }
-              date={ date }
-              data={ data }
-              gasPriceEthmDisplay={ gasPriceEthmDisplay }
-              gasToDisplay={ gasToDisplay }
-            />
-          </TransactionMainDetails>
-          <TransactionPendingForm
-            address={ from }
-            isSending={ this.props.isSending }
-            onConfirm={ this.onConfirm }
-            onReject={ this.onReject }
+        <TransactionMainDetails
+          { ...this.props }
+          { ...this.state }
+          fromBalance={ fromBalance }
+          toBalance={ toBalance }
+          className={ styles.transactionDetails }
+          totalValue={ totalValue }>
+          <TransactionSecondaryDetails
+            id={ id }
+            date={ date }
+            data={ data }
+            gasPriceEthmDisplay={ gasPriceEthmDisplay }
+            gasToDisplay={ gasToDisplay }
           />
-        </div>
+        </TransactionMainDetails>
+        <TransactionPendingForm
+          address={ from }
+          isSending={ this.props.isSending }
+          onConfirm={ this.onConfirm }
+          onReject={ this.onReject }
+        />
       </div>
     );
   }

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css

@@ -14,14 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  width: 220px;
-  padding: 20px 40px 0 40px;
-  /*border-left: 1px solid #aaa;*/
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
+  padding: 1em 1em 0 1em;
+  flex: 0 0 $statusWidth;
 }
 
 .rejectToggle {

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css

@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .confirmForm {
-  margin-top: -45px;
+  margin-top: -2em;
 }
 
 .confirmButton {

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css

@@ -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/>.
 */
+
 /* the rejection button itself, once .reject has been pressed */
 .rejectButton {
   display: block !important;

js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css

@@ -1,3 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+.container {
+  display: block;
+}
+
 .iconsContainer {
   display: block;
   text-align: center;
@@ -67,4 +88,3 @@
 .expandedContainer:empty {
   padding: 0;
 }
-

js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js

@@ -27,7 +27,6 @@ import styles from './TransactionSecondaryDetails.css';
 import * as tUtil from '../util/transaction';
 
 export default class TransactionSecondaryDetails extends Component {
-
   static propTypes = {
     id: PropTypes.object.isRequired,
     date: PropTypes.instanceOf(Date),
@@ -45,7 +44,7 @@ export default class TransactionSecondaryDetails extends Component {
     const className = this.props.className || '';
 
     return (
-      <div className={ className }>
+      <div className={ `${styles.container} ${className}` }>
         <div className={ styles.iconsContainer }>
           { this.renderGasPrice() }
           { this.renderData() }

js/src/views/Signer/containers/Embedded/embedded.css

@@ -14,8 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .signer {
-  width: 916px;
+  box-sizing: border-box;
+  padding: 0;
+  width: $embedWidth;
 }
 
 .pending {

js/src/views/Signer/containers/RequestsPage/RequestsPage.css

@@ -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/>.
 */
+
 .request {
 }