From a2fdf1dad4bdebea79db03caf671e87619e84d64 Mon Sep 17 00:00:00 2001 From: acolytec3 <17355484+acolytec3@users.noreply.github.com> Date: Fri, 15 Oct 2021 11:13:33 -0400 Subject: [PATCH 1/5] add basic ENS name resolution for address lookup --- .../explorer/components/common/Search/index.tsx | 2 +- src/hooks/useSearchSubmit.ts | 13 +++++++++++-- src/utils/miscellaneous.ts | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/apps/explorer/components/common/Search/index.tsx b/src/apps/explorer/components/common/Search/index.tsx index 2380b792b..641cba289 100644 --- a/src/apps/explorer/components/common/Search/index.tsx +++ b/src/apps/explorer/components/common/Search/index.tsx @@ -27,7 +27,7 @@ export const Search: React.FC> = (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" /> diff --git a/src/hooks/useSearchSubmit.ts b/src/hooks/useSearchSubmit.ts index 6b377d9c0..68ac66ac5 100644 --- a/src/hooks/useSearchSubmit.ts +++ b/src/hooks/useSearchSubmit.ts @@ -2,6 +2,7 @@ import { useCallback } from 'react' import { useHistory } from 'react-router-dom' import { isAnAddressAccount } from 'utils' import { usePathPrefix } from 'state/network' +import { web3 } from 'apps/gp-v1/api' export function pathAccordingTo(query: string): string { let path = 'orders' @@ -22,8 +23,16 @@ 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 (pathPrefix === 'address') { + if (web3) { + web3.eth.ens + .getAddress(query) + .then((res) => res && res.length > 0 && history.push(`/${pathPrefix}/${res}`)) + .catch(() => history.push(`/address/null`)) + } + } else { + query && query.length > 0 && history.push(`/${pathPrefix}/${query}`) + } }, [history, prefixNetwork], ) diff --git a/src/utils/miscellaneous.ts b/src/utils/miscellaneous.ts index ba62e597c..bee85f64a 100644 --- a/src/utils/miscellaneous.ts +++ b/src/utils/miscellaneous.ts @@ -265,4 +265,4 @@ 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 => text.match(/^0x[a-fA-F0-9]{40}$|[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined From 53f7166c6e027da446bbc6b74102f907aa7b4282 Mon Sep 17 00:00:00 2001 From: acolytec3 <17355484+acolytec3@users.noreply.github.com> Date: Fri, 15 Oct 2021 11:26:18 -0400 Subject: [PATCH 2/5] lint fixes --- src/utils/miscellaneous.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/miscellaneous.ts b/src/utils/miscellaneous.ts index bee85f64a..05036c114 100644 --- a/src/utils/miscellaneous.ts +++ b/src/utils/miscellaneous.ts @@ -265,4 +265,5 @@ 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}$|[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined +export const isAnAddressAccount = (text: string): boolean => + text.match(/^0x[a-fA-F0-9]{40}$|[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined From f15d526ceb57c99b6aa04849f5b41f4a8d1b6059 Mon Sep 17 00:00:00 2001 From: acolytec3 <17355484+acolytec3@users.noreply.github.com> Date: Fri, 15 Oct 2021 13:43:56 -0400 Subject: [PATCH 3/5] requested changes + limit ENS query to non-ETH addresses --- src/apps/explorer/pages/Home/index.tsx | 2 +- src/hooks/useSearchSubmit.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/apps/explorer/pages/Home/index.tsx b/src/apps/explorer/pages/Home/index.tsx index 851f4a698..df9946537 100644 --- a/src/apps/explorer/pages/Home/index.tsx +++ b/src/apps/explorer/pages/Home/index.tsx @@ -27,7 +27,7 @@ const Wrapper = styled.div` export const Home: React.FC = () => { return ( -

Search Order ID / Address

+

Search Order ID / ETH Address / ENS Address

 ) diff --git a/src/hooks/useSearchSubmit.ts b/src/hooks/useSearchSubmit.ts index 68ac66ac5..2dea15f22 100644 --- a/src/hooks/useSearchSubmit.ts +++ b/src/hooks/useSearchSubmit.ts @@ -2,7 +2,7 @@ import { useCallback } from 'react' import { useHistory } from 'react-router-dom' import { isAnAddressAccount } from 'utils' import { usePathPrefix } from 'state/network' -import { web3 } from 'apps/gp-v1/api' +import { web3 } from 'apps/explorer/api' export function pathAccordingTo(query: string): string { let path = 'orders' @@ -23,12 +23,12 @@ export function useSearchSubmit(): (query: string) => void { // Orders, transactions, tokens, batches const path = pathAccordingTo(query) const pathPrefix = prefixNetwork ? `${prefixNetwork}/${path}` : `${path}` - if (pathPrefix === 'address') { + if (pathPrefix === 'address' && query.match(/[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined) { if (web3) { web3.eth.ens .getAddress(query) .then((res) => res && res.length > 0 && history.push(`/${pathPrefix}/${res}`)) - .catch(() => history.push(`/address/null`)) + .catch(() => history.push(`/address/${query}`)) } } else { query && query.length > 0 && history.push(`/${pathPrefix}/${query}`) From ce627dd38c512a931eb5f749115c9d4e45081c70 Mon Sep 17 00:00:00 2001 From: acolytec3 <17355484+acolytec3@users.noreply.github.com> Date: Fri, 15 Oct 2021 13:52:04 -0400 Subject: [PATCH 4/5] requested change when ENS resolution returns null string --- src/hooks/useSearchSubmit.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/hooks/useSearchSubmit.ts b/src/hooks/useSearchSubmit.ts index 2dea15f22..fa0359534 100644 --- a/src/hooks/useSearchSubmit.ts +++ b/src/hooks/useSearchSubmit.ts @@ -27,7 +27,13 @@ export function useSearchSubmit(): (query: string) => void { if (web3) { web3.eth.ens .getAddress(query) - .then((res) => res && res.length > 0 && history.push(`/${pathPrefix}/${res}`)) + .then((res) => { + if (res && res.length > 0) { + history.push(`/address/${res}`) + } else { + history.push(`/address/${query}`) + } + }) .catch(() => history.push(`/address/${query}`)) } } else { From 8d3e5f1f52674e1e3481a6412b58d259611fdca6 Mon Sep 17 00:00:00 2001 From: acolytec3 <17355484+acolytec3@users.noreply.github.com> Date: Fri, 15 Oct 2021 22:31:52 -0400 Subject: [PATCH 5/5] add isEns helper and test --- src/hooks/useSearchSubmit.ts | 10 +++++----- src/utils/miscellaneous.ts | 17 +++++++++++++++-- test/utils/miscellaneous.spec.ts | 12 +++++++++++- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/hooks/useSearchSubmit.ts b/src/hooks/useSearchSubmit.ts index fa0359534..83855bbb3 100644 --- a/src/hooks/useSearchSubmit.ts +++ b/src/hooks/useSearchSubmit.ts @@ -1,6 +1,6 @@ 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' @@ -23,18 +23,18 @@ export function useSearchSubmit(): (query: string) => void { // Orders, transactions, tokens, batches const path = pathAccordingTo(query) const pathPrefix = prefixNetwork ? `${prefixNetwork}/${path}` : `${path}` - if (pathPrefix === 'address' && query.match(/[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.input !== undefined) { + if (path === 'address' && isEns(query)) { if (web3) { web3.eth.ens .getAddress(query) .then((res) => { if (res && res.length > 0) { - history.push(`/address/${res}`) + history.push(`/${pathPrefix}/${res}`) } else { - history.push(`/address/${query}`) + history.push(`/${pathPrefix}/${query}`) } }) - .catch(() => history.push(`/address/${query}`)) + .catch(() => history.push(`/${pathPrefix}/${query}`)) } } else { query && query.length > 0 && history.push(`/${pathPrefix}/${query}`) diff --git a/src/utils/miscellaneous.ts b/src/utils/miscellaneous.ts index 05036c114..8845f4aad 100644 --- a/src/utils/miscellaneous.ts +++ b/src/utils/miscellaneous.ts @@ -265,5 +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}$|[a-zA-Z0-9]+\.[a-zA-Z]+$/)?.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 diff --git a/test/utils/miscellaneous.spec.ts b/test/utils/miscellaneous.spec.ts index 8ad9b7a8f..ac3696108 100644 --- a/test/utils/miscellaneous.spec.ts +++ b/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) + }) +})