Transaction queue improvements

js/src/dapps/localtx/Application/application.css

@@ -0,0 +1,19 @@
+.container {
+  padding: 1rem 2rem;
+  text-align: center;
+
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  table {
+    text-align: left;
+    margin: auto;
+    max-width: 90vw;
+
+    th {
+      text-align: center;
+    }
+  }
+}

js/src/dapps/localtx/Application/application.js

@@ -19,17 +19,20 @@ import React, { Component } from 'react';
 
 import { api } from '../parity';
 
+import styles from './application.css';
+
 import { Transaction, LocalTransaction } from '../Transaction';
 
 export default class Application extends Component {
   state = {
     loading: true,
     transactions: [],
-    localTransactions: {}
+    localTransactions: {},
+    blockNumber: 0
   }
 
   componentDidMount () {
-    const poll = () => this.fetchTransactionData().then(poll);
+    const poll = () => this.fetchTransactionData().then(poll).catch(poll);
     this._timeout = setTimeout(poll, 2000);
   }
 
@@ -42,7 +45,8 @@ export default class Application extends Component {
       api.parity.pendingTransactions(),
       api.parity.pendingTransactionsStats(),
       api.parity.localTransactions(),
-    ]).then(([pending, stats, local]) => {
+      api.eth.blockNumber()
+    ]).then(([pending, stats, local, blockNumber]) => {
       // Combine results together
       const transactions = pending.map(tx => {
         return {
@@ -87,7 +91,8 @@ export default class Application extends Component {
       this.setState({
         loading: false,
         transactions,
-        localTransactions
+        localTransactions,
+        blockNumber
       });
     });
   }
@@ -97,13 +102,13 @@ export default class Application extends Component {
 
     if (loading) {
       return (
-        <div>Loading...</div>
+        <div className={ styles.container }>Loading...</div>
       );
     }
 
     return (
-      <div style={ { padding: '1rem 2rem'}}>
-        <h1>Your past local transactions</h1>
+      <div className={ styles.container }>
+        <h1>Your local transactions</h1>
         { this.renderLocals() }
         <h1>Transactions in the queue</h1>
         { this.renderQueueSummary() }
@@ -135,7 +140,7 @@ export default class Application extends Component {
   }
 
   renderQueue () {
-    const { transactions } = this.state;
+    const { blockNumber, transactions } = this.state;
     if (!transactions.length) {
       return (
         <h3>The queue seems is empty.</h3>
@@ -156,6 +161,7 @@ export default class Application extends Component {
               isLocal={ tx.isLocal }
               transaction={ tx.transaction }
               stats={ tx.stats }
+              blockNumber={ blockNumber }
               />
           ))
         }

js/src/dapps/localtx/Transaction/transaction.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 classnames from 'classnames';
 
@@ -26,7 +27,7 @@ import IdentityIcon from '../../githubhint/IdentityIcon';
 class BaseTransaction extends Component {
 
   shortHash (hash) {
-    return `${hash.substr(0, 6)}..${hash.substr(hash.length - 4)}`;
+    return `${hash.substr(0, 5)}..${hash.substr(hash.length - 3)}`;
   }
 
   renderHash (hash) {
@@ -93,6 +94,7 @@ export class Transaction extends BaseTransaction {
   static propTypes = {
     idx: PropTypes.number.isRequired,
     transaction: PropTypes.object.isRequired,
+    blockNumber: PropTypes.object.isRequired,
     isLocal: PropTypes.bool,
     stats: PropTypes.object
   };
@@ -122,7 +124,7 @@ export class Transaction extends BaseTransaction {
           Gas
         </th>
         <th>
-          First seen
+          First propagation
         </th>
         <th>
           # Propagated
@@ -141,6 +143,7 @@ export class Transaction extends BaseTransaction {
     });
     const noOfPeers = Object.keys(stats.propagatedTo).length;
     const noOfPropagations = Object.values(stats.propagatedTo).reduce((sum, val) => sum + val, 0);
+    const blockNo = new BigNumber(stats.firstSeen);
 
     return (
       <tr className={ clazz }>
@@ -159,8 +162,8 @@ export class Transaction extends BaseTransaction {
         <td>
           { this.renderGas(transaction) }
         </td>
-        <td>
-          { stats.firstSeen }
+        <td title={ blockNo.toFormat(0) }>
+          { this.renderTime(stats.firstSeen) }
         </td>
         <td>
           { this.renderPropagation(stats) }
@@ -168,6 +171,16 @@ export class Transaction extends BaseTransaction {
       </tr>
     );
   }
+
+  renderTime (firstSeen) {
+    const { blockNumber } = this.props;
+    if (!firstSeen) {
+      return 'never';
+    }
+
+    const timeInMinutes = blockNumber.sub(firstSeen).mul(14).div(60).toFormat(1);
+    return `${timeInMinutes} minutes ago`;
+  }
 }
 
 export class LocalTransaction extends BaseTransaction {
@@ -200,9 +213,6 @@ export class LocalTransaction extends BaseTransaction {
         <th>
           Gas Price / Gas
         </th>
-        <th>
-          Propagated
-        </th>
         <th>
           Status
         </th>
@@ -252,7 +262,9 @@ export class LocalTransaction extends BaseTransaction {
     });
 
     const closeSending = () => this.setState({
-      isSending: false
+      isSending: false,
+      gasPrice: null,
+      gas: null
     });
 
     api.eth.sendTransaction(newTransaction)
@@ -292,11 +304,10 @@ export class LocalTransaction extends BaseTransaction {
           <br />
           { this.renderGas(transaction) }
         </td>
-        <td>
-          { status === 'pending' ? this.renderPropagation(stats) : '-' }
-        </td>
         <td>
           { this.renderStatus() }
+          <br />
+          { status === 'pending' ? this.renderPropagation(stats) : null }
         </td>
       </tr>
     );