Add store for MethodDecoding

js/src/redux/providers/personalActions.js

@@ -19,6 +19,8 @@ import { isEqual } from 'lodash';
 import { fetchBalances } from './balancesActions';
 import { attachWallets } from './walletActions';
 
+import MethodDecodingStore from '~/ui/MethodDecoding/methodDecodingStore';
+
 export function personalAccountsInfo (accountsInfo) {
   const accounts = {};
   const contacts = {};
@@ -41,6 +43,9 @@ export function personalAccountsInfo (accountsInfo) {
       }
     });
 
+  // Load user contracts for Method Decoding
+  MethodDecodingStore.loadContracts(contracts);
+
   return (dispatch) => {
     const data = {
       accountsInfo,

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 }>

js/src/ui/Form/AutoComplete/autocomplete.css

@@ -0,0 +1,24 @@
+/* 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/>.
+*/
+
+.item {
+  &:last-child {
+    &.divider {
+      display: none;
+    }
+  }
+}

js/src/ui/Form/AutoComplete/autocomplete.js

@@ -21,13 +21,18 @@ import { PopoverAnimationVertical } from 'material-ui/Popover';
 
 import { isEqual } from 'lodash';
 
+import styles from './autocomplete.css';
+
 // Hack to prevent "Unknown prop `disableFocusRipple` on <hr> tag" error
 class Divider extends Component {
   static muiName = MUIDivider.muiName;
 
   render () {
     return (
-      <div style={ { margin: '0.25em 0' } }>
+      <div
+        style={ { margin: '0.25em 0' } }
+        className={ [styles.item, styles.divider].join(' ') }
+      >
         <MUIDivider style={ { height: 2 } } />
       </div>
     );
@@ -143,11 +148,16 @@ export default class AutoComplete extends Component {
 
       if (renderItem && typeof renderItem === 'function') {
         item = renderItem(entry);
+
+        // Add the item class to the entry
+        const classNames = [ styles.item ].concat(item.value.props.className);
+        item.value = React.cloneElement(item.value, { className: classNames.join(' ') });
       } else {
         item = {
           text: entry,
           value: (
             <MenuItem
+              className={ styles.item }
               primaryText={ entry }
             />
           )
@@ -160,6 +170,7 @@ export default class AutoComplete extends Component {
       }
 
       item.divider = currentDivider;
+      item.entry = entry;
 
       return item;
     }).filter((item) => item !== undefined);
@@ -215,13 +226,8 @@ export default class AutoComplete extends Component {
       return;
     }
 
-    const { entries } = this.props;
-
-    const entriesArray = (entries instanceof Array)
-      ? entries
-      : Object.values(entries);
-
-    const entry = entriesArray[idx];
+    const { dataSource } = this.state;
+    const { entry } = dataSource[idx];
 
     this.handleOnChange(entry);
     this.setState({ entry, open: false });