Display network status for finished Signer requests (#2983)

* Display confirmation for finished requests

* Update box padding

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

@@ -29,7 +29,7 @@
 
 .statusContainer {
   width: 220px;
-  padding: 20px 40px 0 40px;
+  padding: 0 40px 0 40px;
   /*border-left: 1px solid #aaa;*/
   position: absolute;
   top: 0;
@@ -46,7 +46,8 @@
 }
 
 .isRejected {
-  opacity: 0.7;
+  opacity: 0.5;
+  padding-top: 2em;
 }
 
 .txHash {

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

@@ -17,6 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 
 import CircularProgress from 'material-ui/CircularProgress';
+
+import { TxHash } from '../../../../ui';
+
 import TransactionMainDetails from '../TransactionMainDetails';
 import TxHashLink from '../TxHashLink';
 import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
@@ -57,7 +60,7 @@ export default class TransactionFinished extends Component {
   };
 
   componentWillMount () {
-    const { gas, gasPrice, value } = this.props;
+    const { from, to, gas, gasPrice, value } = this.props;
     const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
     const totalValue = tUtil.getTotalValue(fee, value);
     this.setState({ totalValue });
@@ -70,9 +73,10 @@ export default class TransactionFinished extends Component {
         console.error('could not fetch chain', err);
       });
 
-    const { from, to } = this.props;
     this.fetchBalance(from, 'fromBalance');
-    if (to) this.fetchBalance(to, 'toBalance');
+    if (to) {
+      this.fetchBalance(to, 'toBalance');
+    }
   }
 
   render () {
@@ -109,13 +113,20 @@ export default class TransactionFinished extends Component {
   }
 
   renderStatus () {
-    const { status } = this.props;
-    const klass = status === 'confirmed' ? styles.isConfirmed : styles.isRejected;
+    const { status, txHash } = this.props;
+
+    if (status !== 'confirmed') {
+      return (
+        <div>
+          <span className={ styles.isRejected }>{ capitalize(status) }</span>
+        </div>
+      );
+    }
+
     return (
-      <div>
-        <span className={ klass }>{ capitalize(status) }</span>
-        { this.renderTxHash() }
-      </div>
+      <TxHash
+        summary
+        hash={ txHash } />
     );
   }