Auto Open/Close the Signer window on new transaction request

js/src/views/ParityBar/parityBar.css

@@ -33,12 +33,16 @@
 .expanded {
   right: 16px;
   width: 964px;
-  height: 296px;
+  height: 300px;
   border-radius: 4px 4px 0 0;
-  overflow-y: scroll;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .expanded .content {
+  flex: 1;
+  overflow: auto;
 }
 
 .corner {

js/src/views/ParityBar/parityBar.js

@@ -35,6 +35,20 @@ class ParityBar extends Component {
     opened: false
   }
 
+  componentWillReceiveProps (nextProps) {
+    const count = this.props.pending.length;
+    const newCount = nextProps.pending.length;
+
+    // Open when a request is added
+    if (count < newCount) {
+      this.setState({ opened: true });
+
+    // Close when no more requests pending
+    } else if (newCount === 0 && count === 1) {
+      this.setState({ opened: false });
+    }
+  }
+
   render () {
     const { opened } = this.state;
 

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

@@ -60,21 +60,18 @@ export default class TransactionPendingFormReject extends Component {
           className={ styles.rejectButton }
           disabled={ rejectCounter > 0 }
           fullWidth
-          >
-          Reject Transaction { this.renderCounter() }
-        </RaisedButton>
+          label={ `Reject Transaction ${this.renderCounter()}` }
+        />
       </div>
     );
   }
 
   renderCounter () {
     const { rejectCounter } = this.state;
     if (!rejectCounter) {
-      return;
+      return '';
     }
-    return (
-      <span>{ `(${rejectCounter})` }</span>
-    );
+    return `(${rejectCounter})`;
   }
 
   onInitCounter () {

js/src/views/Signer/containers/Embedded/embedded.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 BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -70,7 +71,7 @@ class Embedded extends Component {
 
   renderPending = (data) => {
     const { actions } = this.props;
-    const { payload, id, isSending } = data;
+    const { payload, id, isSending, date } = data;
 
     return (
       <RequestPendingWeb3
@@ -81,9 +82,14 @@ class Embedded extends Component {
         key={ id }
         id={ id }
         payload={ payload }
+        date={ date }
       />
     );
   }
+
+  _sortRequests = (a, b) => {
+    return new BigNumber(b.id).cmp(a.id);
+  }
 }
 
 function mapStateToProps (state) {

js/src/views/Signer/reducers/requests.js

@@ -33,9 +33,21 @@ export default handleActions({
   },
 
   'update pendingRequests' (state, action) {
+    // Keep the date from the state
+    const pending = action.payload.map(request => {
+      const { id } = request;
+      const oldRequest = state.pending.find(r => r.id === id);
+
+      request.date = (oldRequest && oldRequest.date)
+        ? oldRequest.date
+        : new Date();
+
+      return request;
+    });
+
     return {
       ...state,
-      pending: action.payload.map(r => addTimestamp(r))
+      pending
     };
   },
 
@@ -108,8 +120,3 @@ function setIsSending (pending, id, isSending) {
     return p;
   }).slice();
 }
-
-function addTimestamp (request) {
-  request.date = new Date();
-  return request;
-}