Display local/completed transactions (#3630)

* Initial fetch of local transactions

* Container allows for title specification

* Introduce TxList component

* Display local transactions in signer list

* Simplify

* Pass only hashes from calling components

* Simplify no pending display

* Render pending blocks at the top

* Get rid of time for 0 blocks

* Indeed sort Pending to the top

* Allow retrieval of pending transactions

* setTimeout with clearTimeout

js/src/ui/Container/container.js

@@ -17,6 +17,8 @@
 import React, { Component, PropTypes } from 'react';
 import { Card } from 'material-ui/Card';
 
+import Title from './Title';
+
 import styles from './container.css';
 
 export default class Container extends Component {
@@ -25,7 +27,10 @@ export default class Container extends Component {
     className: PropTypes.string,
     compact: PropTypes.bool,
     light: PropTypes.bool,
-    style: PropTypes.object
+    style: PropTypes.object,
+    title: PropTypes.oneOfType([
+      PropTypes.string, PropTypes.node
+    ])
   }
 
   render () {
@@ -35,9 +40,22 @@ export default class Container extends Component {
     return (
       <div className={ classes } style={ style }>
         <Card className={ compact ? styles.compact : styles.padded }>
+          { this.renderTitle() }
           { children }
         </Card>
       </div>
     );
   }
+
+  renderTitle () {
+    const { title } = this.props;
+
+    if (!title) {
+      return null;
+    }
+
+    return (
+      <Title title={ title } />
+    );
+  }
 }

js/src/ui/TxList/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 './txList';

js/src/ui/TxList/store.js

@@ -0,0 +1,131 @@
+// 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, transaction } from 'mobx';
+import { uniq } from 'lodash';
+
+export default class Store {
+  @observable blocks = {};
+  @observable sortedHashes = [];
+  @observable transactions = {};
+
+  constructor (api) {
+    this._api = api;
+    this._subscriptionId = 0;
+    this._pendingHashes = [];
+
+    this.subscribe();
+  }
+
+  @action addBlocks = (blocks) => {
+    this.blocks = Object.assign({}, this.blocks, blocks);
+  }
+
+  @action addTransactions = (transactions) => {
+    transaction(() => {
+      this.transactions = Object.assign({}, this.transactions, transactions);
+      this.sortedHashes = Object
+        .keys(this.transactions)
+        .sort((ahash, bhash) => {
+          const bnA = this.transactions[ahash].blockNumber;
+          const bnB = this.transactions[bhash].blockNumber;
+
+          if (bnB.eq(0)) {
+            return bnB.eq(bnA) ? 0 : 1;
+          }
+
+          return bnB.comparedTo(bnA);
+        });
+      this._pendingHashes = this.sortedHashes.filter((hash) => this.transactions[hash].blockNumber.eq(0));
+    });
+  }
+
+  @action clearPending () {
+    this._pendingHashes = [];
+  }
+
+  subscribe () {
+    this._api
+      .subscribe('eth_blockNumber', (error, blockNumber) => {
+        if (error) {
+          return;
+        }
+
+        if (this._pendingHashes.length) {
+          this.loadTransactions(this._pendingHashes);
+          this.clearPending();
+        }
+      })
+      .then((subscriptionId) => {
+        this._subscriptionId = subscriptionId;
+      });
+  }
+
+  unsubscribe () {
+    if (!this._subscriptionId) {
+      return;
+    }
+
+    this._api.unsubscribe(this._subscriptionId);
+    this._subscriptionId = 0;
+  }
+
+  loadTransactions (_txhashes) {
+    const txhashes = _txhashes.filter((hash) => !this.transactions[hash] || this._pendingHashes.includes(hash));
+
+    if (!txhashes || !txhashes.length) {
+      return;
+    }
+
+    Promise
+      .all(txhashes.map((txhash) => this._api.eth.getTransactionByHash(txhash)))
+      .then((transactions) => {
+        this.addTransactions(
+          transactions.reduce((transactions, tx, index) => {
+            transactions[txhashes[index]] = tx;
+            return transactions;
+          }, {})
+        );
+
+        this.loadBlocks(transactions.map((tx) => tx.blockNumber ? tx.blockNumber.toNumber() : 0));
+      })
+      .catch((error) => {
+        console.warn('loadTransactions', error);
+      });
+  }
+
+  loadBlocks (_blockNumbers) {
+    const blockNumbers = uniq(_blockNumbers).filter((bn) => !this.blocks[bn]);
+
+    if (!blockNumbers || !blockNumbers.length) {
+      return;
+    }
+
+    Promise
+      .all(blockNumbers.map((blockNumber) => this._api.eth.getBlockByNumber(blockNumber)))
+      .then((blocks) => {
+        this.addBlocks(
+          blocks.reduce((blocks, block, index) => {
+            blocks[blockNumbers[index]] = block;
+            return blocks;
+          }, {})
+        );
+      })
+      .catch((error) => {
+        console.warn('loadBlocks', error);
+      });
+  }
+}

js/src/ui/TxList/txList.css

@@ -0,0 +1,81 @@
+/* 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/>.
+*/
+
+.transactions {
+  width: 100%;
+  border-collapse: collapse;
+
+  tr {
+    line-height: 32px;
+    vertical-align: top;
+
+    &:nth-child(even) {
+      background: rgba(255, 255, 255, 0.04);
+    }
+  }
+
+  th {
+    color: #aaa;
+    text-align: center;
+  }
+
+  td {
+    vertical-align: top;
+    padding: 0.75em 0.75em;
+
+    &.method {
+      width: 40%;
+    }
+
+    &.timestamp {
+      padding-top: 1.5em;
+      text-align: right;
+      line-height: 1.5em;
+      opacity: 0.5;
+    }
+
+    &.transaction {
+      padding-top: 1.5em;
+      text-align: center;
+
+      & div {
+        line-height: 1.25em;
+        min-height: 1.25em;
+      }
+    }
+  }
+
+  .icon {
+    margin: 0;
+  }
+
+  .link {
+    vertical-align: top;
+  }
+
+  .right {
+    text-align: right;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  .left {
+    text-align: left;
+  }
+}

js/src/ui/TxList/txList.js

@@ -0,0 +1,178 @@
+// 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 moment from 'moment';
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { observer } from 'mobx-react';
+
+import { txLink, addressLink } from '../../3rdparty/etherscan/links';
+
+import IdentityIcon from '../IdentityIcon';
+import IdentityName from '../IdentityName';
+import MethodDecoding from '../MethodDecoding';
+import Store from './store';
+
+import styles from './txList.css';
+
+@observer
+class TxList extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    hashes: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.object
+    ]).isRequired,
+    isTest: PropTypes.bool.isRequired
+  }
+
+  store = new Store(this.context.api);
+
+  componentWillMount () {
+    this.store.loadTransactions(this.props.hashes);
+  }
+
+  componentWillUnmount () {
+    this.store.unsubscribe();
+  }
+
+  componentWillReceiveProps (newProps) {
+    this.store.loadTransactions(newProps.hashes);
+  }
+
+  render () {
+    return (
+      <table className={ styles.transactions }>
+        <tbody>
+          { this.renderRows() }
+        </tbody>
+      </table>
+    );
+  }
+
+  renderRows () {
+    const { address, isTest } = this.props;
+
+    return this.store.sortedHashes.map((txhash) => {
+      const tx = this.store.transactions[txhash];
+
+      return (
+        <tr key={ tx.hash }>
+          { this.renderBlockNumber(tx.blockNumber) }
+          { this.renderAddress(tx.from) }
+          <td className={ styles.transaction }>
+            { this.renderEtherValue(tx.value) }
+            <div>⇒</div>
+            <div>
+              <a
+                className={ styles.link }
+                href={ txLink(tx.hash, isTest) }
+                target='_blank'>
+                { `${tx.hash.substr(2, 6)}...${tx.hash.slice(-6)}` }
+              </a>
+            </div>
+          </td>
+          { this.renderAddress(tx.to) }
+          <td className={ styles.method }>
+            <MethodDecoding
+              historic
+              address={ address }
+              transaction={ tx } />
+          </td>
+        </tr>
+      );
+    });
+  }
+
+  renderAddress (address) {
+    const { isTest } = this.props;
+
+    let esLink = null;
+    if (address) {
+      esLink = (
+        <a
+          href={ addressLink(address, isTest) }
+          target='_blank'
+          className={ styles.link }>
+          <IdentityName address={ address } shorten />
+        </a>
+      );
+    }
+
+    return (
+      <td className={ styles.address }>
+        <div className={ styles.center }>
+          <IdentityIcon
+            center
+            className={ styles.icon }
+            address={ address } />
+        </div>
+        <div className={ styles.center }>
+          { esLink || 'DEPLOY' }
+        </div>
+      </td>
+    );
+  }
+
+  renderEtherValue (_value) {
+    const { api } = this.context;
+    const value = api.util.fromWei(_value);
+
+    if (value.eq(0)) {
+      return <div className={ styles.value }>{ ' ' }</div>;
+    }
+
+    return (
+      <div className={ styles.value }>
+        { value.toFormat(5) }<small>ETH</small>
+      </div>
+    );
+  }
+
+  renderBlockNumber (_blockNumber) {
+    const blockNumber = _blockNumber.toNumber();
+    const block = this.store.blocks[blockNumber];
+
+    return (
+      <td className={ styles.timestamp }>
+        <div>{ blockNumber && block ? moment(block.timestamp).fromNow() : null }</div>
+        <div>{ blockNumber ? _blockNumber.toFormat() : 'Pending' }</div>
+      </td>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { isTest } = state.nodeStatus;
+
+  return {
+    isTest
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TxList);

js/src/ui/index.js

@@ -42,6 +42,7 @@ import SignerIcon from './SignerIcon';
 import Tags from './Tags';
 import Tooltips, { Tooltip } from './Tooltips';
 import TxHash from './TxHash';
+import TxList from './TxList';
 
 export {
   Actionbar,
@@ -85,5 +86,6 @@ export {
   Tags,
   Tooltip,
   Tooltips,
-  TxHash
+  TxHash,
+  TxList
 };