Merge pull request #771 from acolytec3/develop

add basic ENS name resolution for address lookup

src/apps/explorer/components/common/Search/index.tsx

@@ -27,7 +27,7 @@ export const Search: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) =>
         name="query"
         value={query}
         onChange={(e): void => setQuery(e.target.value.trim())}
-        placeholder="Search by Order ID / Address"
+        placeholder="Search by Order ID / ETH Address / ENS Address"
         aria-label="Search the GP explorer for orders, batches and transactions"
       />
     </Wrapper>

src/apps/explorer/pages/Home/index.tsx

@@ -27,7 +27,7 @@ const Wrapper = styled.div`
 export const Home: React.FC = () => {
   return (
     <Wrapper>
-      <h1>Search Order ID / Address</h1>
+      <h1>Search Order ID / ETH Address / ENS Address</h1>
       <Search className="home" />
     </Wrapper>
   )

src/hooks/useSearchSubmit.ts

@@ -1,7 +1,8 @@
 import { useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
-import { isAnAddressAccount } from 'utils'
+import { isAnAddressAccount, isEns } from 'utils'
 import { usePathPrefix } from 'state/network'
+import { web3 } from 'apps/explorer/api'
 
 export function pathAccordingTo(query: string): string {
   let path = 'orders'
@@ -22,8 +23,22 @@ export function useSearchSubmit(): (query: string) => void {
       // Orders, transactions, tokens, batches
       const path = pathAccordingTo(query)
       const pathPrefix = prefixNetwork ? `${prefixNetwork}/${path}` : `${path}`
-
-      query && query.length > 0 && history.push(`/${pathPrefix}/${query}`)
+      if (path === 'address' && isEns(query)) {
+        if (web3) {
+          web3.eth.ens
+            .getAddress(query)
+            .then((res) => {
+              if (res && res.length > 0) {
+                history.push(`/${pathPrefix}/${res}`)
+              } else {
+                history.push(`/${pathPrefix}/${query}`)
+              }
+            })
+            .catch(() => history.push(`/${pathPrefix}/${query}`))
+        }
+      } else {
+        query && query.length > 0 && history.push(`/${pathPrefix}/${query}`)
+      }
     },
     [history, prefixNetwork],
   )

src/utils/miscellaneous.ts

@@ -265,4 +265,18 @@ export const isAnOrderId = (text: string): boolean => text.match(/^0x[a-fA-F0-9]
  *
  * @param text Possible address string to check
  */
-export const isAnAddressAccount = (text: string): boolean => text.match(/^0x[a-fA-F0-9]{40}$/)?.input !== undefined
+export const isAnAddressAccount = (text: string): boolean => {
+  if (isEns(text)) {
+    return true
+  } else {
+    return text.match(/^0x[a-fA-F0-9]{40}$/)?.input !== undefined
+  }
+}
+
+/**
+ * Check if string is a valid ENS address against regex
+ *
+ * @param text Possible ENS address string to check
+ * @returns true if valid or false if not
+ */
+export const isEns = (text: string): boolean => text.match(/[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined

test/utils/miscellaneous.spec.ts

@@ -1,5 +1,5 @@
 import { tokenList } from '../data'
-import { getToken, isAnAddressAccount, isAnOrderId } from 'utils'
+import { getToken, isAnAddressAccount, isAnOrderId, isEns } from 'utils'
 import BN from 'bn.js'
 import { pathAccordingTo } from 'hooks/useSearchSubmit'
 
@@ -146,3 +146,13 @@ describe('pathAccordingTo', () => {
     expect(result).toBe('address')
   })
 })
+
+describe('isEns', () => {
+  it('should return true for valid ens addresses', () => {
+    const text = 'vitalik.eth'
+
+    const result = isEns(text)
+
+    expect(result).toBe(true)
+  })
+})