address selector: support reverse lookup (#4033)

* address selector: simplify lookup

* address selector: support reverse lookup

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

@@ -215,8 +215,9 @@ class AddressSelect extends Component {
     }
 
     const { address, addressError } = validateAddress(inputValue);
+    const { registryValues } = this.store;
 
-    if (addressError) {
+    if (addressError || registryValues.length > 0) {
       return null;
     }
 

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

@@ -22,6 +22,8 @@ import { FormattedMessage } from 'react-intl';
 import Contracts from '~/contracts';
 import { sha3 } from '~/api/util/sha3';
 
+const ZERO = /^(0x)?0*$/;
+
 export default class AddressSelectStore {
 
   @observable values = [];
@@ -38,41 +40,75 @@ export default class AddressSelectStore {
     registry
       .getContract('emailverification')
       .then((emailVerification) => {
-        this.regLookups.push({
+        this.regLookups.push((email) => {
-          lookup: (value) => {
           return emailVerification
             .instance
-              .reverse.call({}, [ sha3(value) ]);
+            .reverse
-          },
+            .call({}, [ sha3(email) ])
-          describe: (value) => (
+            .then((address) => {
+              return {
+                address,
+                description: (
                   <FormattedMessage
                     id='addressSelect.fromEmail'
-              defaultMessage='Verified using email {value}'
+                    defaultMessage='Verified using email {email}'
                     values={ {
-                value
+                      email
                     } }
                   />
                 )
+              };
+            });
         });
       });
 
     registry
       .getInstance()
       .then((registryInstance) => {
-        this.regLookups.push({
+        this.regLookups.push((name) => {
-          lookup: (value) => {
           return registryInstance
-              .getAddress.call({}, [ sha3(value), 'A' ]);
+            .getAddress
-          },
+            .call({}, [ sha3(name), 'A' ])
-          describe: (value) => (
+            .then((address) => {
+              return {
+                address,
+                name,
+                description: (
                   <FormattedMessage
                     id='addressSelect.fromRegistry'
-              defaultMessage='{value} (from registry)'
+                    defaultMessage='{name} (from registry)'
                     values={ {
-                value
+                      name
                     } }
                   />
                 )
+              };
+            });
+        });
+
+        this.regLookups.push((address) => {
+          return registryInstance
+            .reverse
+            .call({}, [ address ])
+            .then((name) => {
+              if (!name) {
+                return null;
+              }
+
+              return {
+                address,
+                name,
+                description: (
+                  <FormattedMessage
+                    id='addressSelect.fromRegistry'
+                    defaultMessage='{name} (from registry)'
+                    values={ {
+                      name
+                    } }
+                  />
+                )
+              };
+            });
         });
       });
   }
@@ -149,32 +185,30 @@ export default class AddressSelectStore {
     // Registries Lookup
     this.registryValues = [];
 
-    const lookups = this.regLookups.map((regLookup) => regLookup.lookup(value));
+    const lookups = this.regLookups.map((regLookup) => regLookup(value));
 
     Promise
       .all(lookups)
       .then((results) => {
         return results
-          .map((result, index) => {
+          .filter((result) => result && !ZERO.test(result.address));
-            if (/^(0x)?0*$/.test(result)) {
+      })
-              return;
+      .then((results) => {
-            }
+        this.registryValues = results
-
+          .map((result) => {
-            const lowercaseResult = result.toLowerCase();
+            const lowercaseAddress = result.address.toLowerCase();
 
             const account = flatMap(this.initValues, (cat) => cat.values)
-              .find((account) => account.address.toLowerCase() === lowercaseResult);
+              .find((account) => account.address.toLowerCase() === lowercaseAddress);
 
-            return {
+            if (account && account.name) {
-              description: this.regLookups[index].describe(value),
+              result.name = account.name;
-              address: result,
+            } else if (!result.name) {
-              name: account && account.name || value
+              result.name = value;
-            };
+            }
-          })
+
-          .filter((data) => data);
+            return result;
-      })
+          });
-      .then((registryValues) => {
-        this.registryValues = registryValues;
       });
   }