Add store for MethodDecoding (#3821)

* Add Loader to Transactions

* Add Method Decoding Store (better fetching of methods)

* Load locally stored ABI in MethodDecodingStore

* Fixes UI glitches along the way

* Linting

* Add method decoding from User Contracts

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { MenuItem } from 'material-ui';
+import { isEqual, pick } from 'lodash';
 
 import AutoComplete from '../AutoComplete';
 import IdentityIcon from '../../IdentityIcon';
@@ -31,19 +32,20 @@ export default class AddressSelect extends Component {
   }
 
   static propTypes = {
-    disabled: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+
     accounts: PropTypes.object,
+    allowInput: PropTypes.bool,
+    balances: PropTypes.object,
     contacts: PropTypes.object,
     contracts: PropTypes.object,
-    wallets: PropTypes.object,
-    label: PropTypes.string,
-    hint: PropTypes.string,
+    disabled: PropTypes.bool,
     error: PropTypes.string,
-    value: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
     tokens: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    allowInput: PropTypes.bool,
-    balances: PropTypes.object
+    value: PropTypes.string,
+    wallets: PropTypes.object
   }
 
   state = {
@@ -53,6 +55,9 @@ export default class AddressSelect extends Component {
     value: ''
   }
 
+  // Cache autocomplete items
+  items = {}
+
   entriesFromProps (props = this.props) {
     const { accounts = {}, contacts = {}, contracts = {}, wallets = {} } = props;
 
@@ -76,6 +81,15 @@ export default class AddressSelect extends Component {
     return { autocompleteEntries, entries };
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    const keys = [ 'error', 'value' ];
+
+    const prevValues = pick(this.props, keys);
+    const nextValues = pick(nextProps, keys);
+
+    return !isEqual(prevValues, nextValues);
+  }
+
   componentWillMount () {
     const { value } = this.props;
     const { entries, autocompleteEntries } = this.entriesFromProps();
@@ -143,14 +157,21 @@ export default class AddressSelect extends Component {
   renderItem = (entry) => {
     const { address, name } = entry;
 
-    return {
-      text: name && name.toUpperCase() || address,
-      value: this.renderMenuItem(address),
-      address
-    };
+    const _balance = this.getBalance(address);
+    const balance = _balance ? _balance.toNumber() : _balance;
+
+    if (!this.items[address] || this.items[address].balance !== balance) {
+      this.items[address] = {
+        text: name && name.toUpperCase() || address,
+        value: this.renderMenuItem(address),
+        address, balance
+      };
+    }
+
+    return this.items[address];
   }
 
-  renderBalance (address) {
+  getBalance (address) {
     const { balances = {} } = this.props;
     const balance = balances[address];
 
@@ -164,7 +185,12 @@ export default class AddressSelect extends Component {
       return null;
     }
 
-    const value = fromWei(ethToken.value);
+    return ethToken.value;
+  }
+
+  renderBalance (address) {
+    const balance = this.getBalance(address);
+    const value = fromWei(balance);
 
     return (
       <div className={ styles.balance }>