BENS multiprotocol support

lib/api/resources.ts

@@ -52,6 +52,7 @@ import type {
   EnsDomainEventsResponse,
   EnsDomainLookupFilters,
   EnsDomainLookupResponse,
+  EnsDomainProtocolsResponse,
   EnsLookupSorting,
 } from 'types/api/ens';
 import type { IndexingStatus } from 'types/api/indexingStatus';
@@ -219,7 +220,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
-    filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const ],
+    filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const, 'protocols' as const ],
   },
   domain_info: {
     path: '/api/v1/:chainId/domains/:name',
@@ -238,7 +239,13 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
-    filterFields: [ 'name' as const, 'only_active' as const ],
+    filterFields: [ 'name' as const, 'only_active' as const, 'protocols' as const ],
+  },
+  domain_protocols: {
+    path: '/api/v1/:chainId/protocols',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
   },
 
   // METADATA SERVICE & PUBLIC TAGS
@@ -1008,6 +1015,7 @@ Q extends 'addresses_lookup' ? EnsAddressLookupResponse :
 Q extends 'domain_info' ? EnsDomainDetailed :
 Q extends 'domain_events' ? EnsDomainEventsResponse :
 Q extends 'domains_lookup' ? EnsDomainLookupResponse :
+Q extends 'domain_protocols' ? EnsDomainProtocolsResponse :
 Q extends 'user_ops' ? UserOpsResponse :
 Q extends 'user_op' ? UserOp :
 Q extends 'user_ops_account' ? UserOpsAccount :

mocks/ens/domain.ts

@@ -1,4 +1,4 @@
-import type { EnsDomainDetailed } from 'types/api/ens';
+import type { EnsDomainDetailed, EnsDomainProtocol } from 'types/api/ens';
 
 const domainTokenA = {
   id: '97352314626701792030827861137068748433918254309635329404916858191911576754327',
@@ -11,6 +11,34 @@ const domainTokenB = {
   type: 'WRAPPED_DOMAIN_TOKEN' as const,
 };
 
+export const protocolA: EnsDomainProtocol = {
+  id: 'ens',
+  short_name: 'ENS',
+  title: 'Ethereum Name Service',
+  description: 'The Ethereum Name Service (ENS) is a distributed, open, and extensible naming system based on the Ethereum blockchain.',
+  tld_list: [
+    'eth',
+    'xyz',
+  ],
+  icon_url: 'https://i.imgur.com/GOfUwCb.jpeg',
+  docs_url: 'https://docs.ens.domains/',
+  deployment_blockscout_base_url: 'http://localhost:3200/',
+};
+
+export const protocolB: EnsDomainProtocol = {
+  id: 'duck',
+  short_name: 'DUCK',
+  title: 'Duck Name Service',
+  description: '"Duck Name Service" is a cutting-edge blockchain naming service, providing seamless naming for crypto and decentralized applications. 🦆',
+  tld_list: [
+    'duck',
+    'quack',
+  ],
+  icon_url: 'https://localhost:3000/duck.jpg',
+  docs_url: 'https://docs.duck.domains/',
+  deployment_blockscout_base_url: '',
+};
+
 export const ensDomainA: EnsDomainDetailed = {
   id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
   tokens: [
@@ -35,6 +63,7 @@ export const ensDomainA: EnsDomainDetailed = {
     GNO: 'DDAfbb505ad214D7b80b1f830fcCc89B60fb7A83',
     NEAR: 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near',
   },
+  protocol: protocolA,
 };
 
 export const ensDomainB: EnsDomainDetailed = {
@@ -52,6 +81,7 @@ export const ensDomainB: EnsDomainDetailed = {
   registration_date: '2023-08-13T13:01:12.000Z',
   expiry_date: null,
   other_addresses: {},
+  protocol: null,
 };
 
 export const ensDomainC: EnsDomainDetailed = {
@@ -71,6 +101,7 @@ export const ensDomainC: EnsDomainDetailed = {
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2022-11-01T13:10:36.000Z',
   other_addresses: {},
+  protocol: null,
 };
 
 export const ensDomainD: EnsDomainDetailed = {
@@ -88,4 +119,5 @@ export const ensDomainD: EnsDomainDetailed = {
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2027-09-23T13:10:36.000Z',
   other_addresses: {},
+  protocol: null,
 };

stubs/ENS.ts

@@ -22,6 +22,7 @@ export const ENS_DOMAIN: EnsDomainDetailed = {
   other_addresses: {
     ETH: ADDRESS_HASH,
   },
+  protocol: null,
 };
 
 export const ENS_DOMAIN_EVENT: EnsDomainEvent = {

types/api/ens.ts

@@ -12,6 +12,18 @@ export interface EnsDomain {
   } | null;
   registration_date?: string;
   expiry_date: string | null;
+  protocol: EnsDomainProtocol | null;
+}
+
+export interface EnsDomainProtocol {
+  title: string;
+  description: string;
+  deployment_blockscout_base_url: string;
+  docs_url?: string;
+  icon_url?: string;
+  id: string;
+  short_name: string;
+  tld_list: Array<string>;
 }
 
 export interface EnsDomainDetailed extends EnsDomain {
@@ -43,6 +55,10 @@ export interface EnsDomainEventsResponse {
   items: Array<EnsDomainEvent>;
 }
 
+export interface EnsDomainProtocolsResponse {
+  items: Array<EnsDomainProtocol>;
+}
+
 export interface EnsDomainLookupResponse {
   items: Array<EnsDomain>;
   next_page_params: {
@@ -56,11 +72,13 @@ export interface EnsAddressLookupFilters {
   resolved_to: boolean;
   owned_by: boolean;
   only_active: boolean;
+  protocols: Array<string> | undefined;
 }
 
 export interface EnsDomainLookupFilters {
   name: string | null;
   only_active: boolean;
+  protocols: Array<string> | undefined;
 }
 
 export interface EnsLookupSorting {

ui/address/ensDomains/AddressEnsDomains.pw.tsx

@@ -1,17 +1,19 @@
+import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import config from 'configs/app';
+import type { EnsAddressLookupResponse } from 'types/api/ens';
+
+import type { ResourceError } from 'lib/api/resources';
 import * as ensDomainMock from 'mocks/ens/domain';
 import { test, expect } from 'playwright/lib';
 
 import AddressEnsDomains from './AddressEnsDomains';
 
 const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash as string;
 
-test('base view', async({ render, mockApiResponse, page }) => {
-  await mockApiResponse(
-    'addresses_lookup',
-    {
+test('base view', async({ render, page, mockAssetResponse }) => {
+  const query = {
+    data: {
       items: [
         ensDomainMock.ensDomainA,
         ensDomainMock.ensDomainB,
@@ -20,18 +22,18 @@ test('base view', async({ render, mockApiResponse, page }) => {
       ],
       next_page_params: null,
     },
-    {
-      pathParams: { chainId: config.chain.id },
-      queryParams: {
-        address: ADDRESS_HASH,
-        resolved_to: true,
-        owned_by: true,
-        only_active: true,
-        order: 'ASC',
-      },
-    },
+    isPending: false,
+    isError: false,
+  } as unknown as UseQueryResult<EnsAddressLookupResponse, ResourceError<unknown>>;
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+
+  const component = await render(
+    <AddressEnsDomains
+      query={ query }
+      addressHash={ ADDRESS_HASH }
+      mainDomainName={ ensDomainMock.ensDomainA.name }
+    />,
   );
-  const component = await render(<AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>);
   await component.getByText('4').click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
 });

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -13,22 +13,23 @@ import {
   useDisclosure,
   chakra,
 } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type { EnsAddressLookupResponse, EnsDomain } from 'types/api/ens';
 
 import { route } from 'nextjs-routes';
 
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
+import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
+  query: UseQueryResult<EnsAddressLookupResponse, ResourceError<unknown>>;
   addressHash: string;
   mainDomainName: string | null;
 }
@@ -41,24 +42,15 @@ const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
       rowGap={ 4 }
       mt={ 2 }
     >
-      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
+      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } protocol={ domain.protocol } noCopy/>) }
     </Grid>
   );
 };
 
-const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
+const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const { data, isPending, isError } = useApiQuery('addresses_lookup', {
-    pathParams: { chainId: config.chain.id },
-    queryParams: {
-      address: addressHash,
-      resolved_to: true,
-      owned_by: true,
-      only_active: true,
-      order: 'ASC',
-    },
-  });
+  const { data, isPending, isError } = query;
 
   if (isError) {
     return null;
@@ -134,7 +126,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
             <Box w="100%">
               <chakra.span color="text_secondary" fontSize="xs">Primary*</chakra.span>
               <Flex alignItems="center" fontSize="md" mt={ 2 }>
-                <EnsEntity name={ mainDomain.name } fontWeight={ 600 } noCopy/>
+                <EnsEntity name={ mainDomain.name } protocol={ mainDomain.protocol } fontWeight={ 600 } noCopy/>
                 { mainDomain.expiry_date &&
                     <chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiry_date).fromNow() })</chakra.span> }
               </Flex>

ui/nameDomain/NameDomainDetails.tsx

@@ -6,8 +6,10 @@ import type { EnsDomainDetailed } from 'types/api/ens';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
@@ -163,22 +165,33 @@ const NameDomainDetails = ({ query }: Props) => {
         </>
       ) }
 
-      { query.data?.tokens.map((token) => (
-        <React.Fragment key={ token.type }>
-          <DetailsInfoItem.Label
-            hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
-            isLoading={ isLoading }
-          >
-            { token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
-          </DetailsInfoItem.Label>
-          <DetailsInfoItem.Value
-            wordBreak="break-all"
-            whiteSpace="pre-wrap"
-          >
-            <NftEntity hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
-          </DetailsInfoItem.Value>
-        </React.Fragment>
-      )) }
+      { query.data?.tokens.map((token) => {
+        const isProtocolBaseChain = stripTrailingSlash(query.data.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+        const entityProps = {
+          isExternal: !isProtocolBaseChain ? true : false,
+          href: !isProtocolBaseChain ? (
+            stripTrailingSlash(query.data.protocol?.deployment_blockscout_base_url ?? '') +
+            route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.contract_hash, id: token.id } })
+          ) : undefined,
+        };
+
+        return (
+          <React.Fragment key={ token.type }>
+            <DetailsInfoItem.Label
+              hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
+              isLoading={ isLoading }
+            >
+              { token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              wordBreak="break-all"
+              whiteSpace="pre-wrap"
+            >
+              <NftEntity { ...entityProps } hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
+            </DetailsInfoItem.Value>
+          </React.Fragment>
+        );
+      }) }
 
       { otherAddresses.length > 0 && (
         <>

ui/nameDomain/NameDomainHistory.tsx

@@ -2,6 +2,8 @@ import { Box, Hide, Show } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { EnsDomainDetailed } from 'types/api/ens';
+
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -12,7 +14,11 @@ import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
 import NameDomainHistoryTable from './history/NameDomainHistoryTable';
 import { getNextSortValue, type Sort, type SortField } from './history/utils';
 
-const NameDomainHistory = () => {
+interface Props {
+  domain: EnsDomainDetailed | undefined;
+}
+
+const NameDomainHistory = ({ domain }: Props) => {
   const router = useRouter();
   const domainName = getQueryParamString(router.query.name);
 
@@ -40,12 +46,20 @@ const NameDomainHistory = () => {
     <>
       <Show below="lg" ssr={ false }>
         <Box>
-          { data?.items.map((item, index) => <NameDomainHistoryListItem key={ index } { ...item } isLoading={ isPlaceholderData }/>) }
+          { data?.items.map((item, index) => (
+            <NameDomainHistoryListItem
+              key={ index }
+              event={ item }
+              domain={ domain }
+              isLoading={ isPlaceholderData }
+            />
+          )) }
         </Box>
       </Show>
       <Hide below="lg" ssr={ false }>
         <NameDomainHistoryTable
-          data={ data }
+          history={ data }
+          domain={ domain }
           isLoading={ isPlaceholderData }
           sort={ sort }
           onSortToggle={ handleSortToggle }