Migrate to `bens-types` (#2023)

migrate to BENS types

lib/api/resources.ts

+import type * as bens from '@blockscout/bens-types';
 import { getFeaturePayload } from 'configs/app/features/types';
 import type {
   UserInfo,
@@ -47,12 +48,7 @@ import type {
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
 import type {
   EnsAddressLookupFilters,
-  EnsAddressLookupResponse,
-  EnsDomainDetailed,
-  EnsDomainEventsResponse,
   EnsDomainLookupFilters,
-  EnsDomainLookupResponse,
-  EnsDomainProtocolsResponse,
   EnsLookupSorting,
 } from 'types/api/ens';
 import type { IndexingStatus } from 'types/api/indexingStatus';
@@ -1011,11 +1007,11 @@ Q extends 'zksync_l2_txn_batches_count' ? number :
 Q extends 'zksync_l2_txn_batch' ? ZkSyncBatch :
 Q extends 'zksync_l2_txn_batch_txs' ? ZkSyncBatchTxs :
 Q extends 'contract_security_audits' ? SmartContractSecurityAudits :
-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 'addresses_lookup' ? bens.LookupAddressResponse :
+Q extends 'domain_info' ? bens.DetailedDomain :
+Q extends 'domain_events' ? bens.ListDomainEventsResponse :
+Q extends 'domains_lookup' ? bens.LookupDomainNameResponse :
+Q extends 'domain_protocols' ? bens.GetProtocolsResponse :
 Q extends 'user_ops' ? UserOpsResponse :
 Q extends 'user_op' ? UserOp :
 Q extends 'user_ops_account' ? UserOpsAccount :

mocks/ens/domain.ts

-import type { EnsDomainDetailed, EnsDomainProtocol } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
-const domainTokenA = {
+const domainTokenA: bens.Token = {
   id: '97352314626701792030827861137068748433918254309635329404916858191911576754327',
   contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85',
-  type: 'NATIVE_DOMAIN_TOKEN' as const,
+  type: bens.TokenType.NATIVE_DOMAIN_TOKEN,
 };
 const domainTokenB = {
   id: '423546333',
   contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea86',
-  type: 'WRAPPED_DOMAIN_TOKEN' as const,
+  type: bens.TokenType.WRAPPED_DOMAIN_TOKEN,
 };
 
-export const protocolA: EnsDomainProtocol = {
+export const protocolA: bens.ProtocolInfo = {
   id: 'ens',
   short_name: 'ENS',
   title: 'Ethereum Name Service',
@@ -25,7 +25,7 @@ export const protocolA: EnsDomainProtocol = {
   deployment_blockscout_base_url: 'http://localhost:3200/',
 };
 
-export const protocolB: EnsDomainProtocol = {
+export const protocolB: bens.ProtocolInfo = {
   id: 'duck',
   short_name: 'DUCK',
   title: 'Duck Name Service',
@@ -39,7 +39,7 @@ export const protocolB: EnsDomainProtocol = {
   deployment_blockscout_base_url: '',
 };
 
-export const ensDomainA: EnsDomainDetailed = {
+export const ensDomainA: bens.DetailedDomain = {
   id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
   tokens: [
     domainTokenA,
@@ -55,7 +55,6 @@ export const ensDomainA: EnsDomainDetailed = {
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
   registration_date: '2021-06-27T13:34:44.000Z',
   expiry_date: '2025-03-01T14:20:24.000Z',
   other_addresses: {
@@ -66,25 +65,25 @@ export const ensDomainA: EnsDomainDetailed = {
   protocol: protocolA,
 };
 
-export const ensDomainB: EnsDomainDetailed = {
+export const ensDomainB: bens.DetailedDomain = {
   id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
   tokens: [ domainTokenA ],
   name: 'kitty.kitty.kitty.cat.eth',
-  resolved_address: null,
+  resolved_address: undefined,
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
+  wrapped_owner: undefined,
   registration_date: '2023-08-13T13:01:12.000Z',
-  expiry_date: null,
+  expiry_date: undefined,
   other_addresses: {},
-  protocol: null,
+  protocol: undefined,
 };
 
-export const ensDomainC: EnsDomainDetailed = {
+export const ensDomainC: bens.DetailedDomain = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
   tokens: [ domainTokenA ],
   name: 'duck.duck.eth',
@@ -97,14 +96,14 @@ export const ensDomainC: EnsDomainDetailed = {
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
+  wrapped_owner: undefined,
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2022-11-01T13:10:36.000Z',
   other_addresses: {},
-  protocol: null,
+  protocol: undefined,
 };
 
-export const ensDomainD: EnsDomainDetailed = {
+export const ensDomainD: bens.DetailedDomain = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
   tokens: [ domainTokenA ],
   name: '🦆.duck.eth',
@@ -114,10 +113,10 @@ export const ensDomainD: EnsDomainDetailed = {
   resolved_address: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  owner: null,
-  wrapped_owner: null,
+  owner: undefined,
+  wrapped_owner: undefined,
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2027-09-23T13:10:36.000Z',
   other_addresses: {},
-  protocol: null,
+  protocol: undefined,
 };

mocks/ens/events.ts

-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-export const ensDomainEventA: EnsDomainEvent = {
+export const ensDomainEventA: bens.DomainEvent = {
   transaction_hash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
   timestamp: '2021-06-27T13:34:44.000000Z',
   from_address: {
@@ -9,7 +9,7 @@ export const ensDomainEventA: EnsDomainEvent = {
   action: '0xf7a16963',
 };
 
-export const ensDomainEventB = {
+export const ensDomainEventB: bens.DomainEvent = {
   transaction_hash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
   timestamp: '2022-11-02T14:20:24.000000Z',
   from_address: {

package.json

@@ -35,6 +35,7 @@
     "monitoring:grafana:local": "docker run -d -p 4000:3000 --name=blockscout_grafana --user $(id -u) --volume $(pwd)/grafana:/var/lib/grafana grafana/grafana-enterprise"
   },
   "dependencies": {
+    "@blockscout/bens-types": "v1.3.0-beta",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",

stubs/ENS.ts

-import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
 
-export const ENS_DOMAIN: EnsDomainDetailed = {
+export const ENS_DOMAIN: bens.DetailedDomain = {
   id: '0x126d74db13895f8d3a1d362410212731d1e1d9be8add83e388385f93d84c8c84',
   name: 'kitty.cat.eth',
   tokens: [
     {
       id: '973523146267017920308',
       contract_hash: ADDRESS_HASH,
-      type: 'NATIVE_DOMAIN_TOKEN',
+      type: bens.TokenType.NATIVE_DOMAIN_TOKEN,
     },
   ],
   owner: ADDRESS_PARAMS,
-  wrapped_owner: null,
   resolved_address: ADDRESS_PARAMS,
   registrant: ADDRESS_PARAMS,
   registration_date: '2023-12-20T01:29:12.000Z',
@@ -22,10 +21,10 @@ export const ENS_DOMAIN: EnsDomainDetailed = {
   other_addresses: {
     ETH: ADDRESS_HASH,
   },
-  protocol: null,
+  protocol: undefined,
 };
 
-export const ENS_DOMAIN_EVENT: EnsDomainEvent = {
+export const ENS_DOMAIN_EVENT: bens.DomainEvent = {
   transaction_hash: TX_HASH,
   timestamp: '2022-06-06T08:43:15.000000Z',
   from_address: ADDRESS_PARAMS,

types/api/ens.ts

-export interface EnsDomain {
-  id: string;
-  name: string;
-  resolved_address: {
-    hash: string;
-  } | null;
-  owner: {
-    hash: string;
-  } | null;
-  wrapped_owner: {
-    hash: string;
-  } | 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 {
-  tokens: Array<{ id: string; contract_hash: string; type: 'NATIVE_DOMAIN_TOKEN' | 'WRAPPED_DOMAIN_TOKEN' }>;
-  registrant: {
-    hash: string;
-  } | null;
-  other_addresses: Record<string, string>;
-}
-
-export interface EnsDomainEvent {
-  transaction_hash: string;
-  timestamp: string;
-  from_address: {
-    hash: string;
-  } | null;
-  action?: string;
-}
-
-export interface EnsAddressLookupResponse {
-  items: Array<EnsDomain>;
-  next_page_params: {
-    page_token: string;
-    page_size: number;
-  } | null;
-}
-
-export interface EnsDomainEventsResponse {
-  items: Array<EnsDomainEvent>;
-}
-
-export interface EnsDomainProtocolsResponse {
-  items: Array<EnsDomainProtocol>;
-}
-
-export interface EnsDomainLookupResponse {
-  items: Array<EnsDomain>;
-  next_page_params: {
-    page_token: string;
-    page_size: number;
-  } | null;
-}
+import type * as bens from '@blockscout/bens-types';
 
-export interface EnsAddressLookupFilters {
-  address: string | null;
-  resolved_to: boolean;
-  owned_by: boolean;
-  only_active: boolean;
+export interface EnsAddressLookupFilters extends Pick<bens.LookupAddressRequest, 'address' | 'resolved_to' | 'owned_by' | 'only_active'> {
   protocols: Array<string> | undefined;
 }
 
-export interface EnsDomainLookupFilters {
-  name: string | null;
-  only_active: boolean;
+export interface EnsDomainLookupFilters extends Pick<bens.LookupDomainNameRequest, 'name' | 'only_active'> {
   protocols: Array<string> | undefined;
 }
 
 export interface EnsLookupSorting {
   sort: 'registration_date';
-  order: 'ASC' | 'DESC';
+  order: Exclude<bens.Order, bens.Order.ORDER_UNSPECIFIED | bens.Order.UNRECOGNIZED>;
 }
 
 export type EnsDomainLookupFiltersOptions = Array<'resolved_to' | 'owned_by' | 'with_inactive'>;

ui/address/ensDomains/AddressEnsDomains.pw.tsx

 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { EnsAddressLookupResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import type { ResourceError } from 'lib/api/resources';
 import * as ensDomainMock from 'mocks/ens/domain';
@@ -24,7 +24,7 @@ test('base view', async({ render, page, mockAssetResponse }) => {
     },
     isPending: false,
     isError: false,
-  } as unknown as UseQueryResult<EnsAddressLookupResponse, ResourceError<unknown>>;
+  } as unknown as UseQueryResult<bens.LookupAddressResponse, ResourceError<unknown>>;
   await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 
   const component = await render(

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -17,7 +17,7 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
-import type { EnsAddressLookupResponse, EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
@@ -29,12 +29,12 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
 import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
-  query: UseQueryResult<EnsAddressLookupResponse, ResourceError<unknown>>;
+  query: UseQueryResult<bens.LookupAddressResponse, ResourceError<unknown>>;
   addressHash: string;
   mainDomainName: string | null;
 }
 
-const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
+const DomainsGrid = ({ data }: { data: Array<bens.Domain> }) => {
   return (
     <Grid
       templateColumns={{ base: `repeat(${ _clamp(data.length, 1, 2) }, 1fr)`, lg: `repeat(${ _clamp(data.length, 1, 3) }, 1fr)` }}

ui/nameDomain/NameDomainDetails.tsx

@@ -2,7 +2,7 @@ import { Grid, Skeleton, Tooltip, Flex } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { EnsDomainDetailed } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
@@ -20,7 +20,7 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import NameDomainExpiryStatus from './NameDomainExpiryStatus';
 
 interface Props {
-  query: UseQueryResult<EnsDomainDetailed, ResourceError<unknown>>;
+  query: UseQueryResult<bens.DetailedDomain, ResourceError<unknown>>;
 }
 
 const NameDomainDetails = ({ query }: Props) => {
@@ -178,10 +178,10 @@ const NameDomainDetails = ({ query }: Props) => {
         return (
           <React.Fragment key={ token.type }>
             <DetailsInfoItem.Label
-              hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
+              hint={ `The ${ token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'wrapped ' : '' }token ID of this domain name NFT` }
               isLoading={ isLoading }
             >
-              { token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
+              { token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'Wrapped token ID' : 'Token ID' }
             </DetailsInfoItem.Label>
             <DetailsInfoItem.Value
               wordBreak="break-all"

ui/nameDomain/NameDomainHistory.tsx

@@ -2,7 +2,7 @@ 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 type * as bens from '@blockscout/bens-types';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -15,7 +15,7 @@ import NameDomainHistoryTable from './history/NameDomainHistoryTable';
 import { getNextSortValue, type Sort, type SortField } from './history/utils';
 
 interface Props {
-  domain: EnsDomainDetailed | undefined;
+  domain: bens.DetailedDomain | undefined;
 }
 
 const NameDomainHistory = ({ domain }: Props) => {

ui/nameDomain/history/NameDomainHistoryListItem.tsx

 import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
@@ -14,8 +14,8 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 interface Props {
-  event: EnsDomainEvent;
-  domain: EnsDomainDetailed | undefined;
+  event: bens.DomainEvent;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
 }
 

ui/nameDomain/history/NameDomainHistoryTable.tsx

 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainDetailed, EnsDomainEventsResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -11,8 +11,8 @@ import type { Sort } from './utils';
 import { sortFn } from './utils';
 
 interface Props {
-  history: EnsDomainEventsResponse | undefined;
-  domain: EnsDomainDetailed | undefined;
+  history: bens.ListDomainEventsResponse | undefined;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

 import { Tr, Td, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
@@ -13,8 +13,8 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 
 interface Props {
-  event: EnsDomainEvent;
-  domain: EnsDomainDetailed | undefined;
+  event: bens.DomainEvent;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
 }
 

ui/nameDomain/history/utils.ts

-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
 
@@ -11,7 +11,7 @@ const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
 
 export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
 
-export const sortFn = (sort: Sort | undefined) => (a: EnsDomainEvent, b: EnsDomainEvent) => {
+export const sortFn = (sort: Sort | undefined) => (a: bens.DomainEvent, b: bens.DomainEvent) => {
   switch (sort) {
     case 'timestamp-asc': {
       return b.timestamp.localeCompare(a.timestamp);

ui/nameDomains/NameDomainsActionBar.tsx

 import { Box, Checkbox, CheckboxGroup, Flex, HStack, Image, Link, Text, VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainLookupFiltersOptions, EnsDomainProtocol } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
+import type { EnsDomainLookupFiltersOptions } from 'types/api/ens';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
@@ -21,7 +22,7 @@ interface Props {
   onSearchChange: (value: string) => void;
   filterValue: EnsDomainLookupFiltersOptions;
   onFilterValueChange: (nextValue: EnsDomainLookupFiltersOptions) => void;
-  protocolsData: Array<EnsDomainProtocol> | undefined;
+  protocolsData: Array<bens.ProtocolInfo> | undefined;
   protocolsFilterValue: Array<string>;
   onProtocolsFilterChange: (nextValue: Array<string>) => void;
   sort: TSort | undefined;

ui/nameDomains/NameDomainsListItem.tsx

 import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
 import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
@@ -9,7 +9,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-interface Props extends EnsDomain {
+interface Props extends bens.Domain {
   isLoading: boolean;
 }
 

ui/nameDomains/NameDomainsTable.tsx

 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainLookupResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
@@ -11,7 +11,7 @@ import NameDomainsTableItem from './NameDomainsTableItem';
 import { type Sort } from './utils';
 
 interface Props {
-  data: EnsDomainLookupResponse | undefined;
+  data: bens.LookupDomainNameResponse | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;

ui/nameDomains/NameDomainsTableItem.tsx

 import { chakra, Tr, Td, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
 import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 
-type Props = EnsDomain & {
+type Props = bens.Domain & {
   isLoading?: boolean;
 }
 

ui/pages/NameDomain.tsx

@@ -61,7 +61,7 @@ const NameDomain = () => {
         protocol={ infoQuery.data?.protocol }
         isLoading={ isLoading }
         noLink
-        maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'min-content' }}
+        maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'max-content' }}
       />
       { infoQuery.data?.resolved_address && (
         <Flex alignItems="center" maxW="100%" columnGap={ 3 }>

ui/pages/NameDomains.tsx

@@ -61,7 +61,7 @@ const NameDomains = () => {
     sorting: sortParams,
     options: {
       enabled: isAddressSearch,
-      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: undefined }),
     },
   });
 
@@ -76,7 +76,7 @@ const NameDomains = () => {
     sorting: sortParams,
     options: {
       enabled: !isAddressSearch,
-      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: undefined }),
     },
   });
 

ui/shared/entities/ens/EnsEntity.tsx

-import { chakra, Flex, Image, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react';
+import { Box, 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 type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
@@ -45,7 +45,7 @@ const Icon = (props: IconProps) => {
     return (
       <Popover trigger="hover" isLazy placement="bottom-start">
         <PopoverTrigger>
-          <div>
+          <Box flexShrink={ 0 }>
             <Image
               src={ props.protocol.icon_url }
               boxSize={ styles.boxSize }
@@ -55,7 +55,7 @@ const Icon = (props: IconProps) => {
               fallback={ icon }
               fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
             />
-          </div>
+          </Box>
         </PopoverTrigger>
         <Portal>
           <PopoverContent maxW={{ base: '100vw', lg: '440px' }} minW="250px" w="fit-content">
@@ -123,7 +123,7 @@ const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
   name: string;
-  protocol?: EnsDomainProtocol | null;
+  protocol?: bens.ProtocolInfo | null;
 }
 
 const EnsEntity = (props: EntityProps) => {

yarn.lock

@@ -1327,6 +1327,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@blockscout/bens-types@v1.3.0-beta":
+  version "1.3.0-beta"
+  resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.3.0-beta.tgz#791fa102a33b1add14188beffe7c879219825424"
+  integrity sha512-Gh4qYrj7bNo6fzPGsdtPDPqwboxv/4OWx9QyrblkKt4YSNAlyElIS9rcpGGJ9rVP3YyhflaCh52YOvtDcRXRLw==
+
 "@braintree/sanitize-url@=6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
@@ -14841,16 +14846,7 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14978,14 +14974,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -16145,7 +16134,7 @@ word-wrap@^1.2.5, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -16163,15 +16152,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"