Allow tags for Accounts, Addresses and Contracts (#2712)

* Added tag to the editMeta Modal (#2643)

* Added Tags to ui and to contract/address/account Header (#2643)

* Added tags to summary (#2643)

* Added Search capabilities to contracts/address book/accounts from tokens
(#2643)

* fixes eslint

* Using Chips/Tokens for search (#2643)

* Add search tokens, clickable from List (#2643)

* Add sort capabilities to Accounts / Addresses / Contracts (#2643)

* Fixes formatting issues + state updates after component unmount bug
(#2643)

* Remove unused import

* Small fixes for PR #2697

* Added default sort order for Contracts/Addresses/Accounts

* Using official `material-ui-chip-input` NPM package

* Removed LESS from webpack

js/src/views/Addresses/addresses.js

@@ -18,10 +18,11 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ContentAdd from 'material-ui/svg-icons/content/add';
+import { uniq } from 'lodash';
 
 import List from '../Accounts/List';
 import { AddAddress } from '../../modals';
-import { Actionbar, Button, Page } from '../../ui';
+import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
 
 import styles from './addresses.css';
 
@@ -37,11 +38,14 @@ class Addresses extends Component {
   }
 
   state = {
-    showAdd: false
+    showAdd: false,
+    sortOrder: '',
+    searchValues: []
   }
 
   render () {
     const { balances, contacts, hasContacts } = this.props;
+    const { searchValues, sortOrder } = this.state;
 
     return (
       <div className={ styles.addresses }>
@@ -50,21 +54,53 @@ class Addresses extends Component {
         <Page>
           <List
             link='address'
+            search={ searchValues }
             accounts={ contacts }
             balances={ balances }
-            empty={ !hasContacts } />
+            empty={ !hasContacts }
+            order={ sortOrder }
+            handleAddSearchToken={ this.onAddSearchToken } />
         </Page>
       </div>
     );
   }
 
+  renderSortButton () {
+    const onChange = (sortOrder) => {
+      this.setState({ sortOrder });
+    };
+
+    return (
+      <ActionbarSort
+        key='sortAccounts'
+        order={ this.state.sortOrder }
+        onChange={ onChange } />
+    );
+  }
+
+  renderSearchButton () {
+    const onChange = (searchValues) => {
+      this.setState({ searchValues });
+    };
+
+    return (
+      <ActionbarSearch
+        key='searchAddress'
+        tokens={ this.state.searchValues }
+        onChange={ onChange } />
+    );
+  }
+
   renderActionbar () {
     const buttons = [
       <Button
         key='newAddress'
         icon={ <ContentAdd /> }
         label='new address'
-        onClick={ this.onOpenAdd } />
+        onClick={ this.onOpenAdd } />,
+
+      this.renderSearchButton(),
+      this.renderSortButton()
     ];
 
     return (
@@ -90,6 +126,12 @@ class Addresses extends Component {
     );
   }
 
+  onAddSearchToken = (token) => {
+    const { searchValues } = this.state;
+    const newSearchValues = uniq([].concat(searchValues, token));
+    this.setState({ searchValues: newSearchValues });
+  }
+
   onOpenAdd = () => {
     this.setState({
       showAdd: true