Refactoring Transfer Modal (#3705)

* Better Token Select in Transfer > Details

* Better Autocomplete

* Crete MobX store for Transfer modal

* Remove unused var

* Update Webpack Conf

* Small changes...

* Optional gas in MethodDecoding + better input

* New Contract `getAll` method // TxList Row component

* Method Decoding selections

* Rename `getAll` to `getAllLogs`

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

@@ -16,7 +16,6 @@
 
 import React, { Component, PropTypes } from 'react';
 import { MenuItem } from 'material-ui';
-import { isEqual } from 'lodash';
 
 import AutoComplete from '../AutoComplete';
 import IdentityIcon from '../../IdentityIcon';
@@ -64,13 +63,6 @@ export default class AddressSelect extends Component {
   }
 
   componentWillReceiveProps (newProps) {
-    const entries = this.entriesFromProps();
-    const addresses = Object.keys(entries).sort();
-
-    if (!isEqual(addresses, this.state.addresses)) {
-      this.setState({ entries, addresses });
-    }
-
     if (newProps.value !== this.props.value) {
       this.setState({ value: newProps.value });
     }
@@ -127,31 +119,33 @@ export default class AddressSelect extends Component {
   }
 
   renderItem = (entry) => {
+    const { address, name } = entry;
+
     return {
-      text: entry.name && entry.name.toUpperCase() || entry.address,
-      value: this.renderSelectEntry(entry),
-      address: entry.address
+      text: name && name.toUpperCase() || address,
+      value: this.renderMenuItem(address),
+      address
     };
   }
 
-  renderSelectEntry = (entry) => {
+  renderMenuItem (address) {
     const item = (
       <div className={ styles.account }>
         <IdentityIcon
           className={ styles.image }
           inline center
-          address={ entry.address } />
+          address={ address } />
         <IdentityName
           className={ styles.name }
-          address={ entry.address } />
+          address={ address } />
       </div>
     );
 
     return (
       <MenuItem
         className={ styles.menuItem }
-        key={ entry.address }
-        value={ entry.address }
+        key={ address }
+        value={ address }
         label={ item }>
         { item }
       </MenuItem>

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

@@ -19,6 +19,8 @@ import keycode from 'keycode';
 import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
 import { PopoverAnimationVertical } from 'material-ui/Popover';
 
+import { isEqual } from 'lodash';
+
 export default class AutoComplete extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
@@ -42,12 +44,28 @@ export default class AutoComplete extends Component {
     lastChangedValue: undefined,
     entry: null,
     open: false,
-    fakeBlur: false
+    fakeBlur: false,
+    dataSource: []
+  }
+
+  componentWillMount () {
+    const dataSource = this.getDataSource();
+    this.setState({ dataSource });
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const prevEntries = Object.keys(this.props.entries || {}).sort();
+    const nextEntries = Object.keys(nextProps.entries || {}).sort();
+
+    if (!isEqual(prevEntries, nextEntries)) {
+      const dataSource = this.getDataSource(nextProps);
+      this.setState({ dataSource });
+    }
   }
 
   render () {
     const { disabled, error, hint, label, value, className, filter, onUpdateInput } = this.props;
-    const { open } = this.state;
+    const { open, dataSource } = this.state;
 
     return (
       <MUIAutoComplete
@@ -68,7 +86,7 @@ export default class AutoComplete extends Component {
         menuCloseDelay={ 0 }
         fullWidth
         floatingLabelFixed
-        dataSource={ this.getDataSource() }
+        dataSource={ dataSource }
         menuProps={ { maxHeight: 400 } }
         ref='muiAutocomplete'
         onKeyDown={ this.onKeyDown }
@@ -76,8 +94,8 @@ export default class AutoComplete extends Component {
     );
   }
 
-  getDataSource () {
-    const { renderItem, entries } = this.props;
+  getDataSource (props = this.props) {
+    const { renderItem, entries } = props;
     const entriesArray = (entries instanceof Array)
       ? entries
       : Object.values(entries);