Use trace API for decentralized transaction list (#2784)

* Using traces when available to get accounts transactions (#2148)

* Fixed traceMode detection and transactions rendering (#2148)

* [WIP] Use Redux Thunk in main UI => Async Actions (#2148)

* Using Redux for Transaction / Block / Methods... (#2148)

* Use BigNumber comparedTo function to sort txs (#2148)

js/src/views/Account/Transactions/Transaction/transaction.js

@@ -17,12 +17,16 @@
 import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import moment from 'moment';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { fetchBlock, fetchTransaction } from '../../../../redux/providers/blockchainActions';
 
 import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui';
 
 import styles from '../transactions.css';
 
-export default class Transaction extends Component {
+class Transaction extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
@@ -30,11 +34,16 @@ export default class Transaction extends Component {
   static propTypes = {
     transaction: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
-    isTest: PropTypes.bool.isRequired
+    isTest: PropTypes.bool.isRequired,
+
+    fetchBlock: PropTypes.func.isRequired,
+    fetchTransaction: PropTypes.func.isRequired,
+
+    block: PropTypes.object,
+    transactionInfo: PropTypes.object
   }
 
   state = {
-    info: null,
     isContract: false,
     isReceived: false
   }
@@ -46,8 +55,7 @@ export default class Transaction extends Component {
   }
 
   render () {
-    const { transaction, isTest } = this.props;
-    const { block } = this.state;
+    const { block, transaction, isTest } = this.props;
 
     const prefix = `https://${isTest ? 'testnet.' : ''}etherscan.io/`;
 
@@ -68,10 +76,9 @@ export default class Transaction extends Component {
   }
 
   renderMethod () {
-    const { address } = this.props;
-    const { info } = this.state;
+    const { address, transactionInfo } = this.props;
 
-    if (!info) {
+    if (!transactionInfo) {
       return null;
     }
 
@@ -79,7 +86,7 @@ export default class Transaction extends Component {
       <MethodDecoding
         historic
         address={ address }
-        transaction={ info } />
+        transaction={ transactionInfo } />
     );
   }
 
@@ -129,13 +136,13 @@ export default class Transaction extends Component {
 
   renderEtherValue () {
     const { api } = this.context;
-    const { info } = this.state;
+    const { transactionInfo } = this.props;
 
-    if (!info) {
+    if (!transactionInfo) {
       return null;
     }
 
-    const value = api.util.fromWei(info.value);
+    const value = api.util.fromWei(transactionInfo.value);
 
     if (value.eq(0)) {
       return <div className={ styles.value }>{ ' ' }</div>;
@@ -169,25 +176,33 @@ export default class Transaction extends Component {
   }
 
   lookup (address, transaction) {
-    const { api } = this.context;
-    const { info } = this.state;
+    const { transactionInfo } = this.props;
 
-    if (info) {
+    if (transactionInfo) {
       return;
     }
 
     this.setState({ isReceived: address === transaction.to });
 
-    Promise
-      .all([
-        api.eth.getBlockByNumber(transaction.blockNumber),
-        api.eth.getTransactionByHash(transaction.hash)
-      ])
-      .then(([block, info]) => {
-        this.setState({ block, info });
-      })
-      .catch((error) => {
-        console.error('lookup', error);
-      });
+    const { fetchBlock, fetchTransaction } = this.props;
+    const { blockNumber, hash } = transaction;
+
+    fetchBlock(blockNumber);
+    fetchTransaction(hash);
   }
 }
+
+function mapStateToProps () {
+  return {};
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    fetchBlock, fetchTransaction
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Transaction);

js/src/views/Account/Transactions/transactions.js

@@ -37,7 +37,10 @@ class Transactions extends Component {
     contacts: PropTypes.object,
     contracts: PropTypes.object,
     tokens: PropTypes.object,
-    isTest: PropTypes.bool
+    isTest: PropTypes.bool,
+    traceMode: PropTypes.bool,
+    blocks: PropTypes.object,
+    transactionsInfo: PropTypes.object
   }
 
   state = {
@@ -47,7 +50,24 @@ class Transactions extends Component {
   }
 
   componentDidMount () {
-    this.getTransactions();
+    if (this.props.traceMode !== undefined) {
+      this.getTransactions(this.props);
+    }
+  }
+
+  componentWillReceiveProps (newProps) {
+    if (this.props.traceMode === undefined && newProps.traceMode !== undefined) {
+      this.getTransactions(newProps);
+      return;
+    }
+
+    const hasChanged = [ 'isTest', 'address' ]
+      .map(key => newProps[key] !== this.props[key])
+      .reduce((truth, keyTruth) => truth || keyTruth, false);
+
+    if (hasChanged) {
+      this.getTransactions(newProps);
+    }
   }
 
   render () {
@@ -81,60 +101,127 @@ class Transactions extends Component {
             { this.renderRows() }
           </tbody>
         </table>
-        <div className={ styles.etherscan }>
-          Transaction list powered by <a href='https://etherscan.io/' target='_blank'>etherscan.io</a>
-        </div>
+        { this.renderEtherscanFooter() }
+      </div>
+    );
+  }
+
+  renderEtherscanFooter () {
+    const { traceMode } = this.props;
+
+    if (traceMode) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.etherscan }>
+        Transaction list powered by <a href='https://etherscan.io/' target='_blank'>etherscan.io</a>
       </div>
     );
   }
 
   renderRows () {
-    const { address, accounts, contacts, contracts, tokens, isTest } = this.props;
+    const { address, accounts, contacts, contracts, tokens, isTest, blocks, transactionsInfo } = this.props;
     const { transactions } = this.state;
 
-    return (transactions || []).map((transaction, index) => {
-      return (
-        <Transaction
-          key={ index }
-          transaction={ transaction }
-          address={ address }
-          accounts={ accounts }
-          contacts={ contacts }
-          contracts={ contracts }
-          tokens={ tokens }
-          isTest={ isTest } />
-      );
-    });
+    return (transactions || [])
+      .sort((tA, tB) => {
+        return tB.blockNumber.comparedTo(tA.blockNumber);
+      })
+      .slice(0, 25)
+      .map((transaction, index) => {
+        const { blockNumber, hash } = transaction;
+
+        const block = blocks[blockNumber.toString()];
+        const transactionInfo = transactionsInfo[hash];
+
+        return (
+          <Transaction
+            key={ index }
+            block={ block }
+            transactionInfo={ transactionInfo }
+            transaction={ transaction }
+            address={ address }
+            accounts={ accounts }
+            contacts={ contacts }
+            contracts={ contracts }
+            tokens={ tokens }
+            isTest={ isTest } />
+        );
+      });
   }
 
-  getTransactions = () => {
-    const { isTest, address } = this.props;
+  getTransactions = (props) => {
+    const { isTest, address, traceMode } = props;
 
-    return etherscan.account
-      .transactions(address, 0, isTest)
-      .then((transactions) => {
+    return this
+      .fetchTransactions(isTest, address, traceMode)
+      .then(transactions => {
         this.setState({
           transactions,
           loading: false
         });
-      })
+      });
+  }
+
+  fetchTransactions = (isTest, address, traceMode) => {
+    if (traceMode) {
+      return this.fetchTraceTransactions(address);
+    }
+
+    return this.fetchEtherscanTransactions(isTest, address);
+  }
+
+  fetchEtherscanTransactions = (isTest, address) => {
+    return etherscan.account
+      .transactions(address, 0, isTest)
       .catch((error) => {
         console.error('getTransactions', error);
       });
   }
+
+  fetchTraceTransactions = (address) => {
+    return Promise
+      .all([
+        this.context.api.trace
+          .filter({
+            fromBlock: 0,
+            fromAddress: address
+          }),
+        this.context.api.trace
+          .filter({
+            fromBlock: 0,
+            toAddress: address
+          })
+      ])
+      .then(([fromTransactions, toTransactions]) => {
+        const transactions = [].concat(fromTransactions, toTransactions);
+
+        return transactions.map(transaction => ({
+          from: transaction.action.from,
+          to: transaction.action.to,
+          blockNumber: transaction.blockNumber,
+          hash: transaction.transactionHash
+        }));
+      });
+  }
 }
 
 function mapStateToProps (state) {
-  const { isTest } = state.nodeStatus;
+  const { isTest, traceMode } = state.nodeStatus;
   const { accounts, contacts, contracts } = state.personal;
   const { tokens } = state.balances;
+  const { blocks, transactions } = state.blockchain;
 
   return {
     isTest,
+    traceMode,
     accounts,
     contacts,
     contracts,
-    tokens
+    tokens,
+    blocks,
+    transactionsInfo: transactions
   };
 }