Add Email and Registry lookups to Address Selector

js/src/ui/AccountCard/accountCard.css

@@ -52,6 +52,11 @@
   }
 }
 
+.description {
+  font-size: 0.75em;
+  color: rgba(255, 255, 255, 0.498039);
+}
+
 .accountInfo {
   flex: 1;
 

js/src/ui/AccountCard/accountCard.js

@@ -43,7 +43,7 @@ export default class AccountCard extends Component {
     const { account } = this.props;
     const { copied } = this.state;
 
-    const { address, name, meta = {} } = account;
+    const { address, name, description, meta = {} } = account;
 
     const displayName = (name && name.toUpperCase()) || address;
     const { tags = [] } = meta;
@@ -70,13 +70,26 @@ export default class AccountCard extends Component {
           </div>
 
           { this.renderTags(tags, address) }
+          { this.renderDescription(description) }
           { this.renderAddress(displayName, address) }
           { this.renderBalance(address) }
         </div>
       </div>
     );
   }
 
+  renderDescription (description) {
+    if (!description) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.description }>
+        <span>{ description }</span>
+      </div>
+    );
+  }
+
   renderAddress (name, address) {
     if (name === address) {
       return null;

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

@@ -225,10 +225,8 @@ class AddressSelect extends Component {
     }
 
     const accounts = regsitryValues
-      .map((regsitryValue) => {
-        const { address, value } = regsitryValue;
-        const account = { address, name: value, index: address };
-
+      .map((regsitryValue, index) => {
+        const account = { ...regsitryValue, index: `${regsitryValue.address}_${index}` };
         return this.renderAccountCard(account);
       });
 
@@ -423,7 +421,12 @@ class AddressSelect extends Component {
 
       event.preventDefault();
 
-      const nextValues = values[focusedCat || 0];
+      const firstCat = values.findIndex((cat) => cat.values.length > 0);
+      const nextCat = focusedCat && values[focusedCat].values.length > 0
+        ? focusedCat
+        : firstCat;
+
+      const nextValues = values[nextCat];
       const nextFocus = nextValues ? nextValues.values[0] : null;
       return this.focusItem(nextFocus && nextFocus.index || 1);
     }
@@ -457,12 +460,21 @@ class AddressSelect extends Component {
 
     // If right: next category
     if (direction === 'right') {
-      nextCategory = Math.min(prevCategoryIndex + 1, values.length - 1);
+      const categoryShift = values
+        .slice(prevCategoryIndex + 1, values.length)
+        .findIndex((cat) => cat.values.length > 0) + 1;
+
+      nextCategory = Math.min(prevCategoryIndex + categoryShift, values.length - 1);
     }
 
     // If right: previous category
     if (direction === 'left') {
-      nextCategory = Math.max(prevCategoryIndex - 1, 0);
+      const categoryShift = values
+        .slice(0, prevCategoryIndex)
+        .reverse()
+        .findIndex((cat) => cat.values.length > 0) + 1;
+
+      nextCategory =  Math.max(prevCategoryIndex - categoryShift, 0);
     }
 
     // If left or right: try to keep the horizontal index

js/src/ui/Form/AddressSelect/addressSelectStore.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observable, action } from 'mobx';
+import { flatMap } from 'lodash';
 
 import Contracts from '~/contracts';
 import { sha3 } from '~/api/util/sha3';
@@ -25,16 +26,36 @@ export default class AddressSelectStore {
   @observable regsitryValues = [];
 
   initValues = [];
+  regLookups = [];
 
   constructor (api) {
     this.api = api;
 
-    Contracts
-      .get()
-      .registry
+    const { registry } = Contracts.get();
+
+    registry
       .getContract('emailverification')
       .then((emailVerification) => {
-        this.emailVerification = emailVerification;
+        this.regLookups.push({
+          lookup: (value) => {
+            return emailVerification
+              .instance
+              .reverse.call({}, [ sha3(value) ]);
+          },
+          describe: (value) => `${value} (from email verification)`
+        });
+      });
+
+    registry
+      .getInstance()
+      .then((registryInstance) => {
+        this.regLookups.push({
+          lookup: (value) => {
+            return registryInstance
+              .getAddress.call({}, [ sha3(value), 'A' ]);
+          },
+          describe: (value) => `${value} (from registry)`
+        });
       });
   }
 
@@ -92,24 +113,31 @@ export default class AddressSelectStore {
     // Registries Lookup
     this.regsitryValues = [];
 
-    if (this.emailVerification) {
-      this
-        .emailVerification
-        .instance
-        .reverse
-        .call({}, [ sha3(value) ])
-        .then((result) => {
-          if (/^(0x)?0*$/.test(result)) {
-            return;
-          }
-
-          this.regsitryValues.push({
-            type: 'email',
-            address: result,
-            value
-          });
-        });
-    }
+    const lookups = this.regLookups.map((regLookup) => regLookup.lookup(value));
+
+    Promise
+      .all(lookups)
+      .then((results) => {
+        return results
+          .map((result, index) => {
+            if (/^(0x)?0*$/.test(result)) {
+              return;
+            }
+
+            const account = flatMap(this.initValues, (cat) => cat.values)
+              .find((account) => account.address.toLowerCase() === result.toLowerCase());
+
+            return {
+              description: this.regLookups[index].describe(value),
+              address: result,
+              name: account && account.name || value
+            };
+          })
+          .filter((data) => data);
+      })
+      .then((regsitryValues) => {
+        this.regsitryValues = regsitryValues;
+      });
   }
 
   /**