Speed up unresponsive Contract events & Account transactions (#3145)

* Don't load method via redux

* Don't redux fetchTransaction (contracts)

* Move isTest to top-level passing

* transaction list with local blocks/transactions

* Combine calls (allows future chunking)

* Progressive loading of transactions

* Cleanups

* Never try tracing

js/src/ui/MethodDecoding/methodDecoding.js

@@ -19,12 +19,11 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import Contracts from '../../contracts';
 import IdentityIcon from '../IdentityIcon';
 import IdentityName from '../IdentityName';
 import { Input, InputAddress } from '../Form';
 
-import { fetchBytecode, fetchMethod } from '../../redux/providers/blockchainActions';
-
 import styles from './methodDecoding.css';
 
 const CONTRACT_CREATE = '0x60606040';
@@ -41,12 +40,7 @@ class MethodDecoding extends Component {
     address: PropTypes.string.isRequired,
     tokens: PropTypes.object,
     transaction: PropTypes.object,
-    historic: PropTypes.bool,
+    historic: PropTypes.bool
-
-    fetchBytecode: PropTypes.func,
-    fetchMethod: PropTypes.func,
-    bytecodes: PropTypes.object,
-    methods: PropTypes.object
   }
 
   state = {
@@ -63,58 +57,7 @@ class MethodDecoding extends Component {
   }
 
   componentWillMount () {
-    const { transaction } = this.props;
+    this.lookup();
-    this.lookup(transaction);
-  }
-
-  componentDidMount () {
-    this.setMethod(this.props);
-  }
-
-  componentWillReceiveProps (newProps) {
-    const { transaction } = this.props;
-    this.setMethod(newProps);
-
-    if (newProps.transaction.hash !== transaction.hash) {
-      this.lookup(transaction);
-      return;
-    }
-  }
-
-  setMethod (props) {
-    const { bytecodes, methods } = props;
-    const { contractAddress, methodSignature, methodParams } = this.state;
-
-    if (contractAddress && bytecodes[contractAddress]) {
-      const bytecode = bytecodes[contractAddress];
-
-      if (bytecode && bytecode !== '0x') {
-        this.setState({ isContract: true });
-      }
-    }
-
-    if (methodSignature && methods[methodSignature]) {
-      const method = methods[methodSignature];
-      const { api } = this.context;
-
-      let methodInputs = null;
-      let methodName = null;
-
-      if (method && method.length) {
-        const abi = api.util.methodToAbi(method);
-
-        methodName = abi.name;
-        methodInputs = api.util
-          .decodeMethodInput(abi, methodParams)
-          .map((value, index) => {
-            const type = abi.inputs[index].type;
-
-            return { type, value };
-          });
-      }
-
-      this.setState({ method, methodName, methodInputs });
-    }
   }
 
   render () {
@@ -321,7 +264,9 @@ class MethodDecoding extends Component {
     );
   }
 
-  lookup (transaction) {
+  lookup () {
+    const { transaction } = this.props;
+
     if (!transaction) {
       return;
     }
@@ -347,26 +292,51 @@ class MethodDecoding extends Component {
       return;
     }
 
-    const { fetchBytecode, fetchMethod } = this.props;
+    Promise
+      .all([
+        api.eth.getCode(contractAddress),
+        Contracts.get().signatureReg.lookup(signature)
+      ])
+      .then(([bytecode, method]) => {
+        let methodInputs = null;
+        let methodName = null;
 
-    fetchBytecode(contractAddress);
+        if (method && method.length) {
-    fetchMethod(signature);
+          const { methodParams } = this.state;
+          const abi = api.util.methodToAbi(method);
+
+          methodName = abi.name;
+          methodInputs = api.util
+            .decodeMethodInput(abi, methodParams)
+            .map((value, index) => {
+              const type = abi.inputs[index].type;
+
+              return { type, value };
+            });
+        }
+
+        this.setState({
+          method,
+          methodName,
+          methodInputs,
+          bytecode,
+          isContract: bytecode && bytecode !== '0x'
+        });
+      })
+      .catch((error) => {
+        console.warn('lookup', error);
+      });
   }
 }
 
 function mapStateToProps (state) {
   const { tokens } = state.balances;
-  const { bytecodes, methods } = state.blockchain;
 
-  return {
+  return { tokens };
-    tokens, bytecodes, methods
-  };
 }
 
 function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
+  return bindActionCreators({}, dispatch);
-    fetchBytecode, fetchMethod
-  }, dispatch);
 }
 
 export default connect(

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

@@ -17,46 +17,37 @@
 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 { txLink, addressLink } from '../../../../3rdparty/etherscan/links';
 
 import styles from '../transactions.css';
 
-class Transaction extends Component {
+export default class Transaction extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
-    transaction: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
     isTest: PropTypes.bool.isRequired,
-
+    transaction: PropTypes.object.isRequired
-    fetchBlock: PropTypes.func.isRequired,
-    fetchTransaction: PropTypes.func.isRequired,
-
-    block: PropTypes.object,
-    transactionInfo: PropTypes.object
   }
 
   state = {
     isContract: false,
-    isReceived: false
+    isReceived: false,
+    transaction: null,
+    block: null
   }
 
   componentDidMount () {
-    const { address, transaction } = this.props;
+    this.lookup();
-
-    this.lookup(address, transaction);
   }
 
   render () {
-    const { block, transaction } = this.props;
+    const { block } = this.state;
+    const { transaction } = this.props;
 
     return (
       <tr>
@@ -75,9 +66,10 @@ class Transaction extends Component {
   }
 
   renderMethod () {
-    const { address, transactionInfo } = this.props;
+    const { address } = this.props;
+    const { transaction } = this.state;
 
-    if (!transactionInfo) {
+    if (!transaction) {
       return null;
     }
 
@@ -85,12 +77,13 @@ class Transaction extends Component {
       <MethodDecoding
         historic
         address={ address }
-        transaction={ transactionInfo } />
+        transaction={ transaction } />
     );
   }
 
   renderTransaction () {
-    const { transaction, isTest } = this.props;
+    const { isTest } = this.props;
+    const { transaction } = this.props;
 
     return (
       <td className={ styles.transaction }>
@@ -138,13 +131,13 @@ class Transaction extends Component {
 
   renderEtherValue () {
     const { api } = this.context;
-    const { transactionInfo } = this.props;
+    const { transaction } = this.state;
 
-    if (!transactionInfo) {
+    if (!transaction) {
       return null;
     }
 
-    const value = api.util.fromWei(transactionInfo.value);
+    const value = api.util.fromWei(transaction.value);
 
     if (value.eq(0)) {
       return <div className={ styles.value }>{ ' ' }</div>;
@@ -177,34 +170,22 @@ class Transaction extends Component {
     return moment(block.timestamp).fromNow();
   }
 
-  lookup (address, transaction) {
+  lookup () {
-    const { transactionInfo } = this.props;
+    const { api } = this.context;
-
+    const { transaction, address } = this.props;
-    if (transactionInfo) {
-      return;
-    }
 
     this.setState({ isReceived: address === transaction.to });
 
-    const { fetchBlock, fetchTransaction } = this.props;
+    Promise
-    const { blockNumber, hash } = transaction;
+      .all([
-
+        api.eth.getBlockByNumber(transaction.blockNumber),
-    fetchBlock(blockNumber);
+        api.eth.getTransactionByHash(transaction.hash)
-    fetchTransaction(hash);
+      ])
+      .then(([block, transaction]) => {
+        this.setState({ block, transaction });
+      })
+      .catch((error) => {
+        console.warn('lookup', error);
+      });
   }
 }
-
-function mapStateToProps () {
-  return {};
-}
-
-function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
-    fetchBlock, fetchTransaction
-  }, dispatch);
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Transaction);

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

@@ -38,9 +38,7 @@ class Transactions extends Component {
     contracts: PropTypes.object,
     tokens: PropTypes.object,
     isTest: PropTypes.bool,
-    traceMode: PropTypes.bool,
+    traceMode: PropTypes.bool
-    blocks: PropTypes.object,
-    transactionsInfo: PropTypes.object
   }
 
   state = {
@@ -121,7 +119,7 @@ class Transactions extends Component {
   }
 
   renderRows () {
-    const { address, accounts, contacts, contracts, tokens, isTest, blocks, transactionsInfo } = this.props;
+    const { address, accounts, contacts, contracts, tokens, isTest } = this.props;
     const { transactions } = this.state;
 
     return (transactions || [])
@@ -130,16 +128,9 @@ class Transactions extends Component {
       })
       .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 }
@@ -165,9 +156,9 @@ class Transactions extends Component {
   }
 
   fetchTransactions = (isTest, address, traceMode) => {
-    if (traceMode) {
+    // if (traceMode) {
-      return this.fetchTraceTransactions(address);
+    //   return this.fetchTraceTransactions(address);
-    }
+    // }
 
     return this.fetchEtherscanTransactions(isTest, address);
   }
@@ -211,7 +202,6 @@ function mapStateToProps (state) {
   const { isTest, traceMode } = state.nodeStatus;
   const { accounts, contacts, contracts } = state.personal;
   const { tokens } = state.balances;
-  const { blocks, transactions } = state.blockchain;
 
   return {
     isTest,
@@ -219,9 +209,7 @@ function mapStateToProps (state) {
     accounts,
     contacts,
     contracts,
-    tokens,
+    tokens
-    blocks,
-    transactionsInfo: transactions
   };
 }
 

js/src/views/Contract/Events/Event/event.js

@@ -17,27 +17,24 @@
 import BigNumber from 'bignumber.js';
 import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
-import { fetchBlock, fetchTransaction } from '../../../../redux/providers/blockchainActions';
 import { IdentityIcon, IdentityName, Input, InputAddress } from '../../../../ui';
 import { txLink } from '../../../../3rdparty/etherscan/links';
 
 import styles from '../../contract.css';
 
-class Event extends Component {
+export default class Event extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
     event: PropTypes.object.isRequired,
-    blocks: PropTypes.object,
+    isTest: PropTypes.bool
-    transactions: PropTypes.object,
+  }
-    isTest: PropTypes.bool,
+
-    fetchBlock: PropTypes.func.isRequired,
+  state = {
-    fetchTransaction: PropTypes.func.isRequired
+    transaction: {}
   }
 
   componentDidMount () {
@@ -45,10 +42,9 @@ class Event extends Component {
   }
 
   render () {
-    const { event, blocks, transactions, isTest } = this.props;
+    const { event, isTest } = this.props;
+    const { block, transaction } = this.state;
 
-    const block = blocks[event.blockNumber.toString()];
-    const transaction = transactions[event.transactionHash] || {};
     const classes = `${styles.event} ${styles[event.state]}`;
     const url = txLink(event.transactionHash, isTest);
     const keys = Object.keys(event.params).join(', ');
@@ -156,31 +152,19 @@ class Event extends Component {
   }
 
   retrieveTransaction () {
-    const { event, fetchBlock, fetchTransaction } = this.props;
+    const { api } = this.context;
+    const { event } = this.props;
 
-    fetchBlock(event.blockNumber);
+    Promise
-    fetchTransaction(event.transactionHash);
+      .all([
+        api.eth.getBlockByNumber(event.blockNumber),
+        api.eth.getTransactionByHash(event.transactionHash)
+      ])
+      .then(([block, transaction]) => {
+        this.setState({ block, transaction });
+      })
+      .catch((error) => {
+        console.warn('retrieveTransaction', error);
+      });
   }
 }
-
-function mapStateToProps (state) {
-  const { isTest } = state.nodeStatus;
-  const { blocks, transactions } = state.blockchain;
-
-  return {
-    isTest,
-    blocks,
-    transactions
-  };
-}
-
-function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
-    fetchBlock, fetchTransaction
-  }, dispatch);
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Event);

js/src/views/Contract/Events/events.js

@@ -27,21 +27,31 @@ export default class Events extends Component {
   }
 
   static propTypes = {
-    events: PropTypes.array
+    events: PropTypes.array,
+    isTest: PropTypes.bool.isRequired
   }
 
   render () {
-    const { events } = this.props;
+    const { events, isTest } = this.props;
 
     if (!events || !events.length) {
       return null;
     }
 
+    const list = events.map((event) => {
+      return (
+        <Event
+          key={ event.key }
+          event={ event }
+          isTest={ isTest } />
+      );
+    });
+
     return (
       <Container>
         <ContainerTitle title='events' />
         <table className={ styles.events }>
-          <tbody>{ events.map((event) => <Event event={ event } key={ event.key } />) }</tbody>
+          <tbody>{ list }</tbody>
         </table>
       </Container>
     );

js/src/views/Contract/contract.js

@@ -116,6 +116,7 @@ class Contract extends Component {
             contract={ contract }
             values={ queryValues } />
           <Events
+            isTest={ isTest }
             events={ allEvents } />
         </Page>
       </div>