Display local/completed transactions

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/views/Account/Transactions/Transaction/index.js → js/src/ui/TxList/index.js

@@ -14,4 +14,4 @@
 // 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 './transaction';
+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;
+  }
+}