Display network status for finished Signer requests (#2983)

* Display confirmation for finished requests

* Update box padding

js/src/ui/TxHash/txHash.css

@@ -23,6 +23,7 @@
 
 .hash {
   padding-top: 1em;
+  word-break: break-all;
 }
 
 .confirm {
@@ -31,11 +32,13 @@
 }
 
 .progressbar {
-  margin: 0.5em !important;
+  margin: 0.5em 0 !important;
   width: 30% !important;
+  min-width: 220px;
   display: inline-block !important;
   height: 0.75em !important;
 }
 
 .progressinfo {
+  text-align: center;
 }

js/src/ui/TxHash/txHash.js

@@ -30,7 +30,8 @@ class TxHash extends Component {
 
   static propTypes = {
     hash: PropTypes.string.isRequired,
-    isTest: PropTypes.bool
+    isTest: PropTypes.bool,
+    summary: PropTypes.bool
   }
 
   state = {
@@ -55,13 +56,20 @@ class TxHash extends Component {
   }
 
   render () {
-    const { hash, isTest } = this.props;
+    const { hash, isTest, summary } = this.props;
+    let header = null;
 
-    return (
+    if (!summary) {
-      <div className={ styles.details }>
+      header = (
         <div className={ styles.header }>
           The transaction has been posted to the network with a transaction hash of
         </div>
+      );
+    }
+
+    return (
+      <div className={ styles.details }>
+        { header }
         <div className={ styles.hash }>
           <a href={ txLink(hash, isTest) } target='_blank'>{ hash }</a>
         </div>

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,16 +113,23 @@ export default class TransactionFinished extends Component {
   }
 
   renderStatus () {
-    const { status } = this.props;
+    const { status, txHash } = this.props;
-    const klass = status === 'confirmed' ? styles.isConfirmed : styles.isRejected;
+
+    if (status !== 'confirmed') {
       return (
         <div>
-        <span className={ klass }>{ capitalize(status) }</span>
+          <span className={ styles.isRejected }>{ capitalize(status) }</span>
-        { this.renderTxHash() }
         </div>
       );
     }
 
+    return (
+      <TxHash
+        summary
+        hash={ txHash } />
+    );
+  }
+
   renderTxHash () {
     const { txHash } = this.props;
     const { chain } = this.state;