BENS multiprotocol support (#2003)

* show protocol icon on the list and the entity page

* add logo and tooltip to the entity in address page subheading

* make icon_url and docs_url optional

* add protocol to name domain filters

* tests

* fetch protocols list from api endpoint

* fix protocol query param parsing

* build correct links to token ids and txs

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

-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

+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';
 
@@ -8,10 +11,9 @@ 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,15 +13,15 @@ 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';
@@ -29,6 +29,7 @@ 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 }

ui/nameDomain/history/NameDomainHistoryListItem.tsx

 import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEvent } from 'types/api/ens';
+import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
 
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-type Props = EnsDomainEvent & {
+interface Props {
+  event: EnsDomainEvent;
+  domain: EnsDomainDetailed | undefined;
   isLoading?: boolean;
 }
 
-const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHash, timestamp, from_address: fromAddress, action }: Props) => {
+const NameDomainHistoryListItem = ({ isLoading, domain, event }: Props) => {
+  const isProtocolBaseChain = stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+  const txEntityProps = {
+    isExternal: !isProtocolBaseChain ? true : false,
+    href: !isProtocolBaseChain ? (
+      stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') +
+      route({ pathname: '/tx/[hash]', query: { hash: event.transaction_hash } })
+    ) : undefined,
+  };
+
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 500 } truncation="constant_long"/>
+        <TxEntity { ...txEntityProps } hash={ event.transaction_hash } isLoading={ isLoading } fontWeight={ 500 } truncation="constant_long"/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ dayjs(timestamp).fromNow() }</span>
+          <span>{ dayjs(event.timestamp).fromNow() }</span>
         </Skeleton>
       </ListItemMobileGrid.Value>
 
-      { fromAddress && (
+      { event.from_address && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/>
+            <AddressEntity address={ event.from_address } isLoading={ isLoading } truncation="constant"/>
           </ListItemMobileGrid.Value>
         </>
       ) }
 
-      { action && (
+      { event.action && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Method</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag>
+            <Tag colorScheme="gray" isLoading={ isLoading }>{ event.action }</Tag>
           </ListItemMobileGrid.Value>
         </>
       ) }

ui/nameDomain/history/NameDomainHistoryTable.tsx

 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEventsResponse } from 'types/api/ens';
+import type { EnsDomainDetailed, EnsDomainEventsResponse } from 'types/api/ens';
 
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -11,13 +11,14 @@ import type { Sort } from './utils';
 import { sortFn } from './utils';
 
 interface Props {
-  data: EnsDomainEventsResponse | undefined;
+  history: EnsDomainEventsResponse | undefined;
+  domain: EnsDomainDetailed | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;
 }
 
-const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
+const NameDomainHistoryTable = ({ history, domain, isLoading, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
@@ -47,10 +48,10 @@ const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props)
       </Thead>
       <Tbody>
         {
-          data?.items
+          history?.items
             .slice()
             .sort(sortFn(sort))
-            .map((item, index) => <NameDomainHistoryTableItem key={ index } { ...item } isLoading={ isLoading }/>)
+            .map((item, index) => <NameDomainHistoryTableItem key={ index } event={ item } domain={ domain } isLoading={ isLoading }/>)
         }
       </Tbody>
     </Table>

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

 import { Tr, Td, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEvent } from 'types/api/ens';
+import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
 
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 
-type Props = EnsDomainEvent & {
+interface Props {
+  event: EnsDomainEvent;
+  domain: EnsDomainDetailed | undefined;
   isLoading?: boolean;
 }
 
-const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHash, from_address: fromAddress, action, timestamp }: Props) => {
+const NameDomainHistoryTableItem = ({ isLoading, event, domain }: Props) => {
+  const isProtocolBaseChain = stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+  const txEntityProps = {
+    isExternal: !isProtocolBaseChain ? true : false,
+    href: !isProtocolBaseChain ? (
+      stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') +
+      route({ pathname: '/tx/[hash]', query: { hash: event.transaction_hash } })
+    ) : undefined,
+  };
 
   return (
     <Tr>
       <Td verticalAlign="middle">
         <TxEntity
-          hash={ transactionHash }
+          { ...txEntityProps }
+          hash={ event.transaction_hash }
           isLoading={ isLoading }
           fontWeight={ 700 }
           noIcon
@@ -27,14 +42,14 @@ const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHa
       </Td>
       <Td pl={ 9 } verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ dayjs(timestamp).fromNow() }</span>
+          <span>{ dayjs(event.timestamp).fromNow() }</span>
         </Skeleton>
       </Td>
       <Td verticalAlign="middle">
-        { fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/> }
+        { event.from_address && <AddressEntity address={ event.from_address } isLoading={ isLoading } truncation="constant"/> }
       </Td>
       <Td verticalAlign="middle">
-        { action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }
+        { event.action && <Tag colorScheme="gray" isLoading={ isLoading }>{ event.action }</Tag> }
       </Td>
     </Tr>
   );

ui/nameDomains/NameDomainsActionBar.tsx

-import { Checkbox, CheckboxGroup, HStack, Text } from '@chakra-ui/react';
+import { Box, Checkbox, CheckboxGroup, Flex, HStack, Image, Link, Text, VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainLookupFiltersOptions } from 'types/api/ens';
+import type { EnsDomainLookupFiltersOptions, EnsDomainProtocol } from 'types/api/ens';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import ActionBar from 'ui/shared/ActionBar';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
 import Sort from 'ui/shared/sort/Sort';
 
@@ -20,6 +21,9 @@ interface Props {
   onSearchChange: (value: string) => void;
   filterValue: EnsDomainLookupFiltersOptions;
   onFilterValueChange: (nextValue: EnsDomainLookupFiltersOptions) => void;
+  protocolsData: Array<EnsDomainProtocol> | undefined;
+  protocolsFilterValue: Array<string>;
+  onProtocolsFilterChange: (nextValue: Array<string>) => void;
   sort: TSort | undefined;
   onSortChange: (nextValue: TSort | undefined) => void;
   isLoading: boolean;
@@ -36,6 +40,9 @@ const NameDomainsActionBar = ({
   isLoading,
   isAddressSearch,
   pagination,
+  protocolsData,
+  protocolsFilterValue,
+  onProtocolsFilterChange,
 }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
@@ -51,26 +58,72 @@ const NameDomainsActionBar = ({
     />
   );
 
+  const handleProtocolReset = React.useCallback(() => {
+    onProtocolsFilterChange([]);
+  }, [ onProtocolsFilterChange ]);
+
+  const filterGroupDivider = <Box w="100%" borderBottomWidth="1px" borderBottomColor="divider" my={ 4 }/>;
+
+  const appliedFiltersNum = filterValue.length + (protocolsData && protocolsData.length > 1 ? protocolsFilterValue.length : 0);
+
   const filter = (
-    <PopoverFilter appliedFiltersNum={ filterValue.length } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
+    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ minW: '220px', w: 'fit-content' }} isLoading={ isInitialLoading }>
       <div>
+        { protocolsData && protocolsData.length > 1 && (
+          <>
+            <Flex justifyContent="space-between" fontSize="sm" mb={ 3 }>
+              <Text fontWeight={ 600 } variant="secondary">Protocol</Text>
+              <Link
+                onClick={ handleProtocolReset }
+                color={ protocolsData.length > 0 ? 'link' : 'text_secondary' }
+                _hover={{
+                  color: protocolsData.length > 0 ? 'link_hovered' : 'text_secondary',
+                }}
+              >
+                Reset
+              </Link>
+            </Flex>
+            <CheckboxGroup size="lg" value={ protocolsFilterValue } defaultValue={ protocolsFilterValue } onChange={ onProtocolsFilterChange }>
+              <VStack gap={ 5 } alignItems="flex-start">
+                { protocolsData.map((protocol) => {
+                  const topLevelDomains = protocol.tld_list.map((domain) => `.${ domain }`).join(' ');
+                  return (
+                    <Checkbox key={ protocol.id } value={ protocol.id }>
+                      <Flex alignItems="center">
+                        <Image
+                          src={ protocol.icon_url }
+                          boxSize={ 5 }
+                          borderRadius="sm"
+                          mr={ 2 }
+                          alt={ `${ protocol.title } protocol icon` }
+                          fallback={ <IconSvg name="ENS_slim" boxSize={ 5 } mr={ 2 }/> }
+                          fallbackStrategy={ protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+                        />
+                        <span>{ protocol.short_name }</span>
+                        <chakra.span color="text_secondary" whiteSpace="pre"> { topLevelDomains }</chakra.span>
+                      </Flex>
+                    </Checkbox>
+                  );
+                }) }
+              </VStack>
+            </CheckboxGroup>
+            { filterGroupDivider }
+          </>
+        ) }
         <CheckboxGroup size="lg" onChange={ onFilterValueChange } value={ filterValue } defaultValue={ filterValue }>
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Address</Text>
-          <Checkbox value="owned_by" display="block" isDisabled={ !isAddressSearch }>
+          <Checkbox value="owned_by" isDisabled={ !isAddressSearch } display="block">
             Owned by
           </Checkbox>
           <Checkbox
             value="resolved_to"
-            display="block"
             mt={ 5 }
-            mb={ 4 }
-            pb={ 4 }
-            borderBottom="1px solid"
-            borderColor="divider"
             isDisabled={ !isAddressSearch }
+            display="block"
           >
             Resolved to address
           </Checkbox>
+          { filterGroupDivider }
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Status</Text>
           <Checkbox value="with_inactive" display="block">
             Include expired

ui/nameDomains/NameDomainsListItem.tsx

@@ -13,12 +13,19 @@ interface Props extends EnsDomain {
   isLoading: boolean;
 }
 
-const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+const NameDomainsListItem = ({
+  name,
+  isLoading,
+  resolved_address: resolvedAddress,
+  registration_date: registrationDate,
+  expiry_date: expiryDate,
+  protocol,
+}: Props) => {
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Domain</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 500 }/>
+        <EnsEntity name={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 500 }/>
       </ListItemMobileGrid.Value>
 
       { resolvedAddress && (

ui/nameDomains/NameDomainsTableItem.tsx

@@ -12,12 +12,19 @@ type Props = EnsDomain & {
   isLoading?: boolean;
 }
 
-const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+const NameDomainsTableItem = ({
+  isLoading,
+  name,
+  resolved_address: resolvedAddress,
+  registration_date: registrationDate,
+  expiry_date: expiryDate,
+  protocol,
+}: Props) => {
 
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 600 }/>
+        <EnsEntity name={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 600 }/>
       </Td>
       <Td verticalAlign="middle">
         { resolvedAddress && <AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/> }

ui/pages/Address.tsx

@@ -78,6 +78,23 @@ const AddressPageContent = () => {
   const addressesForMetadataQuery = React.useMemo(() => ([ hash ].filter(Boolean)), [ hash ]);
   const addressMetadataQuery = useAddressMetadataInfoQuery(addressesForMetadataQuery);
 
+  const addressEnsDomainsQuery = useApiQuery('addresses_lookup', {
+    pathParams: { chainId: config.chain.id },
+    queryParams: {
+      address: hash,
+      resolved_to: true,
+      owned_by: true,
+      only_active: true,
+      order: 'ASC',
+    },
+    queryOptions: {
+      enabled: Boolean(hash) && config.features.nameService.isEnabled,
+    },
+  });
+  const addressMainDomain = !addressQuery.isPlaceholderData ?
+    addressEnsDomainsQuery.data?.items.find((domain) => domain.name === addressQuery.data?.ens_domain_name) :
+    undefined;
+
   const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
   const isTabsLoading = isLoading || addressTabsCountersQuery.isPlaceholderData;
 
@@ -238,6 +255,7 @@ const AddressPageContent = () => {
       { addressQuery.data?.ens_domain_name && (
         <EnsEntity
           name={ addressQuery.data?.ens_domain_name }
+          protocol={ !addressEnsDomainsQuery.isPending ? addressMainDomain?.protocol : null }
           fontFamily="heading"
           fontSize="lg"
           fontWeight={ 500 }
@@ -267,7 +285,7 @@ const AddressPageContent = () => {
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled &&
         <SolidityscanReport hash={ hash }/> }
       { !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
-        <AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
+        <AddressEnsDomains query={ addressEnsDomainsQuery } addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
       <NetworkExplorers type="address" pathParam={ hash }/>
     </Flex>
   );

ui/pages/NameDomain.tsx

@@ -36,7 +36,7 @@ const NameDomain = () => {
 
   const tabs: Array<RoutedTab> = [
     { id: 'details', title: 'Details', component: <NameDomainDetails query={ infoQuery }/> },
-    { id: 'history', title: 'History', component: <NameDomainHistory/> },
+    { id: 'history', title: 'History', component: <NameDomainHistory domain={ infoQuery.data }/> },
   ];
 
   const tabIndex = useTabIndexFromQuery(tabs);
@@ -58,6 +58,7 @@ const NameDomain = () => {
     >
       <EnsEntity
         name={ domainName }
+        protocol={ infoQuery.data?.protocol }
         isLoading={ isLoading }
         noLink
         maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'min-content' }}

ui/pages/NameDomains.pw.tsx

@@ -6,8 +6,10 @@ import { test, expect } from 'playwright/lib';
 
 import NameDomains from './NameDomains';
 
-test('default view +@mobile', async({ render, mockApiResponse, mockTextAd }) => {
+test.beforeEach(async({ mockApiResponse, mockAssetResponse, mockTextAd }) => {
   await mockTextAd();
+  await mockAssetResponse(ensDomainMock.protocolA.icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(ensDomainMock.protocolB.icon_url as string, './playwright/mocks/image_md.jpg');
   await mockApiResponse('domains_lookup', {
     items: [
       ensDomainMock.ensDomainA,
@@ -23,7 +25,21 @@ test('default view +@mobile', async({ render, mockApiResponse, mockTextAd }) =>
     pathParams: { chainId: config.chain.id },
     queryParams: { only_active: true },
   });
+  await mockApiResponse('domain_protocols', {
+    items: [ ensDomainMock.protocolA, ensDomainMock.protocolB ],
+  }, {
+    pathParams: { chainId: config.chain.id },
+  });
+});
 
+test('default view +@mobile', async({ render }) => {
   const component = await render(<NameDomains/>);
   await expect(component).toHaveScreenshot();
 });
+
+test('filters', async({ render, page }) => {
+  const component = await render(<NameDomains/>);
+
+  await component.getByRole('button', { name: 'Filter' }).click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 500 } });
+});

ui/pages/NameDomains.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { EnsDomainLookupFiltersOptions, EnsLookupSorting } from 'types/api/ens';
 
 import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -29,6 +30,7 @@ const NameDomains = () => {
   const ownedBy = getQueryParamString(router.query.owned_by);
   const resolvedTo = getQueryParamString(router.query.resolved_to);
   const onlyActive = getQueryParamString(router.query.only_active);
+  const protocols = Array.isArray(router.query.protocols) ? router.query.protocols : (router.query.protocols ?? '').split(',').filter(Boolean);
 
   const initialFilters: EnsDomainLookupFiltersOptions = [
     ownedBy === 'true' ? 'owned_by' as const : undefined,
@@ -40,6 +42,7 @@ const NameDomains = () => {
   const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
   const [ filterValue, setFilterValue ] = React.useState<EnsDomainLookupFiltersOptions>(initialFilters);
   const [ sort, setSort ] = React.useState<Sort | undefined>(initialSort);
+  const [ protocolsFilter, setProtocolsFilter ] = React.useState<Array<string>>(protocols);
 
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const isAddressSearch = React.useMemo(() => ADDRESS_REGEXP.test(debouncedSearchTerm), [ debouncedSearchTerm ]);
@@ -53,6 +56,7 @@ const NameDomains = () => {
       resolved_to: filterValue.includes('resolved_to'),
       owned_by: filterValue.includes('owned_by'),
       only_active: !filterValue.includes('with_inactive'),
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
     },
     sorting: sortParams,
     options: {
@@ -67,6 +71,7 @@ const NameDomains = () => {
     filters: {
       name: debouncedSearchTerm,
       only_active: !filterValue.includes('with_inactive'),
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
     },
     sorting: sortParams,
     options: {
@@ -75,6 +80,10 @@ const NameDomains = () => {
     },
   });
 
+  const protocolsQuery = useApiQuery('domain_protocols', {
+    pathParams: { chainId: config.chain.id },
+  });
+
   const query = isAddressSearch ? addressesLookupQuery : domainsLookupQuery;
   const { data, isError, isPlaceholderData: isLoading, onFilterChange, onSortingChange } = query;
 
@@ -87,12 +96,14 @@ const NameDomains = () => {
         resolved_to: true,
         owned_by: true,
         only_active: !hasInactiveFilter,
+        protocols: protocolsFilter,
       });
     } else {
       setFilterValue([ hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
       onFilterChange<'domains_lookup'>({
         name: debouncedSearchTerm,
         only_active: !hasInactiveFilter,
+        protocols: protocolsFilter,
       });
     }
   // should run only the type of search changes
@@ -123,14 +134,16 @@ const NameDomains = () => {
         resolved_to: filterValue.includes('resolved_to'),
         owned_by: filterValue.includes('owned_by'),
         only_active: !filterValue.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     } else {
       onFilterChange<'domains_lookup'>({
         name: value,
         only_active: !filterValue.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     }
-  }, [ onFilterChange, filterValue ]);
+  }, [ onFilterChange, filterValue, protocolsFilter ]);
 
   const handleFilterValueChange = React.useCallback((value: EnsDomainLookupFiltersOptions) => {
     setFilterValue(value);
@@ -142,16 +155,40 @@ const NameDomains = () => {
         resolved_to: value.includes('resolved_to'),
         owned_by: value.includes('owned_by'),
         only_active: !value.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     } else {
       onFilterChange<'domains_lookup'>({
         name: debouncedSearchTerm,
         only_active: !value.includes('with_inactive'),
+        protocols: protocolsFilter,
+      });
+    }
+  }, [ debouncedSearchTerm, onFilterChange, protocolsFilter ]);
+
+  const handleProtocolsFilterChange = React.useCallback((nextValue: Array<string>) => {
+    setProtocolsFilter(nextValue);
+
+    const isAddressSearch = ADDRESS_REGEXP.test(debouncedSearchTerm);
+    if (isAddressSearch) {
+      onFilterChange<'addresses_lookup'>({
+        address: debouncedSearchTerm,
+        resolved_to: filterValue.includes('resolved_to'),
+        owned_by: filterValue.includes('owned_by'),
+        only_active: !filterValue.includes('with_inactive'),
+        protocols: nextValue,
+      });
+    } else {
+      onFilterChange<'domains_lookup'>({
+        name: debouncedSearchTerm,
+        only_active: !filterValue.includes('with_inactive'),
+        protocols: nextValue,
       });
     }
-  }, [ debouncedSearchTerm, onFilterChange ]);
+  }, [ debouncedSearchTerm, filterValue, onFilterChange ]);
 
-  const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0;
+  const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0 ||
+    (protocolsQuery.data && protocolsQuery.data.items.length > 1 ? protocolsFilter.length > 0 : false);
 
   const content = (
     <>
@@ -184,6 +221,9 @@ const NameDomains = () => {
       onSearchChange={ handleSearchTermChange }
       filterValue={ filterValue }
       onFilterValueChange={ handleFilterValueChange }
+      protocolsData={ protocolsQuery.data?.items }
+      protocolsFilterValue={ protocolsFilter }
+      onProtocolsFilterChange={ handleProtocolsFilterChange }
       sort={ sort }
       onSortChange={ setSort }
       isAddressSearch={ isAddressSearch }

ui/shared/entities/ens/EnsEntity.pw.tsx

 import React from 'react';
 
+import * as domainMock from 'mocks/ens/domain';
 import { test, expect } from 'playwright/lib';
 
 import EnsEntity from './EnsEntity';
@@ -59,3 +60,22 @@ test('customization', async({ render }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('', () => {
+  test.use({ viewport: { width: 300, height: 400 } });
+  test('with protocol info', async({ render, page, mockAssetResponse }) => {
+    await mockAssetResponse(domainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+
+    const component = await render(
+      <EnsEntity
+        name={ name }
+        protocol={ domainMock.protocolA }
+      />,
+    );
+
+    await component.getByAltText(`${ domainMock.protocolA.title } protocol icon`).first().hover();
+
+    await expect(page.getByText(domainMock.protocolA.description)).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+});

ui/shared/entities/ens/EnsEntity.tsx

-import { chakra } from '@chakra-ui/react';
+import { chakra, Flex, Image, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
 
+import type { EnsDomainProtocol } from 'types/api/ens';
+
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
+import { getIconProps } from '../base/utils';
+
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'name'>;
 
 const Link = chakra((props: LinkProps) => {
@@ -22,17 +28,73 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
+type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & Pick<EntityProps, 'protocol'> & {
   iconName?: EntityBase.IconBaseProps['name'];
 };
 
 const Icon = (props: IconProps) => {
-  return (
-    <EntityBase.Icon
-      { ...props }
-      name={ props.iconName ?? 'ENS_slim' }
-    />
-  );
+  const icon = <EntityBase.Icon { ...props } name={ props.iconName ?? 'ENS_slim' }/>;
+
+  if (props.protocol) {
+    const styles = getIconProps(props.iconSize);
+
+    if (props.isLoading) {
+      return <Skeleton boxSize={ styles.boxSize } borderRadius="sm" mr={ 2 }/>;
+    }
+
+    return (
+      <Popover trigger="hover" isLazy placement="bottom-start">
+        <PopoverTrigger>
+          <div>
+            <Image
+              src={ props.protocol.icon_url }
+              boxSize={ styles.boxSize }
+              borderRadius="sm"
+              mr={ 2 }
+              alt={ `${ props.protocol.title } protocol icon` }
+              fallback={ icon }
+              fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+            />
+          </div>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent maxW={{ base: '100vw', lg: '440px' }} minW="250px" w="fit-content">
+            <PopoverBody display="flex" flexDir="column" rowGap={ 3 }>
+              <Flex alignItems="center">
+                <Image
+                  src={ props.protocol.icon_url }
+                  boxSize={ 5 }
+                  borderRadius="sm"
+                  mr={ 2 }
+                  alt={ `${ props.protocol.title } protocol icon` }
+                  fallback={ icon }
+                  fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+                />
+                <div>
+                  <span>{ props.protocol.short_name }</span>
+                  <chakra.span color="text_secondary" whiteSpace="pre"> { props.protocol.tld_list.map((tld) => `.${ tld }`).join((' ')) }</chakra.span>
+                </div>
+              </Flex>
+              <Text fontSize="sm">{ props.protocol.description }</Text>
+              { props.protocol.docs_url && (
+                <LinkExternal
+                  href={ props.protocol.docs_url }
+                  display="inline-flex"
+                  alignItems="center"
+                  fontSize="sm"
+                >
+                  <IconSvg name="docs" boxSize={ 5 } color="text_secondary" mr={ 2 }/>
+                  <span>Documentation</span>
+                </LinkExternal>
+              ) }
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    );
+  }
+
+  return icon;
 };
 
 type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'name'>;
@@ -61,6 +123,7 @@ const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
   name: string;
+  protocol?: EnsDomainProtocol | null;
 }
 
 const EnsEntity = (props: EntityProps) => {