Name service: use protocol list instead of chain ID (#3283)

tom2drum · web-flow · commit b6d92b41504e · 2026-02-23T10:37:31.000+01:00
* Name service: use protocol list instead of chain ID Resolves #3281 * fix envs for demo
diff --git a/configs/app/features/nameServices.ts b/configs/app/features/nameServices.ts
@@ -1,17 +1,18 @@
 import type { Feature } from './types';
 
 import apis from '../apis';
-import { getEnvValue } from '../utils';
+import { getEnvValue, parseEnvJson } from '../utils';
 
 const title = 'Name services integration';
 
-const config: Feature<{ ens: { isEnabled: boolean }; clusters: { isEnabled: boolean; cdnUrl: string } }> = (() => {
+const config: Feature<{ ens: { isEnabled: boolean; protocols: Array<string> }; clusters: { isEnabled: boolean; cdnUrl: string } }> = (() => {
   if (apis.bens || apis.clusters) {
     return Object.freeze({
       title,
       isEnabled: true,
       ens: {
         isEnabled: apis.bens ? true : false,
+        protocols: parseEnvJson<Array<string>>(getEnvValue('NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS')) || [ 'ens' ],
       },
       clusters: {
         isEnabled: apis.clusters ? true : false,
diff --git a/configs/envs/.env.gnosis b/configs/envs/.env.gnosis
@@ -9,6 +9,8 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS=['genome','ens']
+
 # Instance ENVs
 NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY=true
 NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol','drops','blockscoutbadges','gitpoap','efp','etherscore','webacy','humanpassport','trustblock','smartmuv','humanode','deepdao']
@@ -41,7 +43,6 @@ NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/0x
 NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://badges.blockscout.com/badges-list?utm_source=blockscout-explorer&utm_medium=marketplace-banner
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
-NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '1923', '42793', '59144'], 'fee': '0.004', 'integrator': 'blockscout'}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '59144', '7000'], 'posthogKey': 'phc_7O4WGsecqqDO1PeaKayHAxUWN1PjheOmQCiDxEMcmkx', 'posthogHost': 'https://us.i.posthog.com'}}
 NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/refs/heads/main/configs/marketplace-subgraph-links/subgraph-links.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
@@ -170,6 +170,7 @@ const schema = yup
   .concat(featuresSchemas.highlightsConfigSchema)
   .concat(featuresSchemas.marketplaceSchema)
   .concat(featuresSchemas.megaEthSchema)
+  .concat(featuresSchemas.nameServicesSchema)
   .concat(featuresSchemas.rollupSchema)
   .concat(featuresSchemas.tacSchema)
   .concat(featuresSchemas.userOpsSchema)
diff --git a/deploy/tools/envs-validator/schemas/apis.ts b/deploy/tools/envs-validator/schemas/apis.ts
@@ -16,11 +16,6 @@ export default yup.object({
 
     NEXT_PUBLIC_CONTRACT_INFO_API_HOST: yup.string().test(urlTest),
 
-    NEXT_PUBLIC_NAME_SERVICE_API_HOST: yup.string().test(urlTest),
-
-    NEXT_PUBLIC_CLUSTERS_API_HOST: yup.string().test(urlTest),
-    NEXT_PUBLIC_CLUSTERS_CDN_URL: yup.string().test(urlTest),
-
     NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: yup.string().test(urlTest),
 
     NEXT_PUBLIC_REWARDS_SERVICE_API_HOST: yup.string().test(urlTest),
diff --git a/deploy/tools/envs-validator/schemas/features/index.ts b/deploy/tools/envs-validator/schemas/features/index.ts
@@ -9,6 +9,7 @@ export * from './defiDropdown';
 export * from './highlights';
 export * from './marketplace';
 export * from './megaEth';
+export * from './nameServices';
 export * from './rollup';
 export * from './tac';
 export * from './userOps';
diff --git a/deploy/tools/envs-validator/schemas/features/nameServices.ts b/deploy/tools/envs-validator/schemas/features/nameServices.ts
@@ -0,0 +1,37 @@
+import { urlTest } from "../../utils";
+import * as yup from 'yup';
+import { replaceQuotes } from 'configs/app/utils';
+import type { ApiDocsTabId } from 'types/views/apiDocs';
+import { API_DOCS_TABS } from 'types/views/apiDocs';
+
+export const nameServicesSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_NAME_SERVICE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS: yup
+        .array()
+        .transform(replaceQuotes)
+        .json()
+        .when('NEXT_PUBLIC_NAME_SERVICE_API_HOST', {
+            is: (value: string) => Boolean(value),
+            then: (schema) => schema.of(yup.string()).min(1).optional(),
+            otherwise: (schema) => schema.test(
+                'not-exist',
+                'NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS cannot not be used if NEXT_PUBLIC_NAME_SERVICE_API_HOST is not set',
+                value => value === undefined,
+            ),
+        }),
+
+    NEXT_PUBLIC_CLUSTERS_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_CLUSTERS_CDN_URL: yup
+        .string()
+        .when('NEXT_PUBLIC_CLUSTERS_API_HOST', {
+            is: (value: string) => Boolean(value),
+            then: (schema) => schema.test(urlTest).optional(),
+            otherwise: (schema) => schema.test(
+                'not-exist',
+                'NEXT_PUBLIC_CLUSTERS_CDN_URL cannot not be used if NEXT_PUBLIC_CLUSTERS_API_HOST is not set',
+                value => value === undefined,
+            ),
+        }),
+  });
diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base
@@ -93,3 +93,7 @@ NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL=https://example.com
 NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG={'img_url': 'https://example.com/promo.svg', 'text': 'Promo text', 'bg_color': {'light': 'rgb(250, 245, 255)', 'dark': 'rgb(68, 51, 122)'}, 'text_color': {'light': 'rgb(107, 70, 193)', 'dark': 'rgb(233, 216, 253)'}, 'link_url': 'https://example.com'}
 NEXT_PUBLIC_FLASHBLOCKS_SOCKET_URL=wss://example.com/ws
 NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG=https://example.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://example.com
+NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS=['duck','goose']
+NEXT_PUBLIC_CLUSTERS_API_HOST=https://example.com
+NEXT_PUBLIC_CLUSTERS_CDN_URL=https://example.com
diff --git a/docs/ENVS.md b/docs/ENVS.md
@@ -711,6 +711,7 @@ This feature allows resolving blockchain addresses using human-readable domain n
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_NAME_SERVICE_API_HOST | `string` | Name Service API endpoint url | Required | - | `https://bens.services.blockscout.com` | v1.22.0+ |
+| NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS | `Array<string>` | List of the protocols used by the chain. The protocol ids can be obtained from [/api/v1/protocols](https://bens.services.blockscout.com/api/v1/protocols) resource. | - | `['ens']` | `['rns']` | upcoming |
 
 &nbsp;
 
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
@@ -172,6 +172,5 @@ export const b: PaginatedResourceName = 'general:addresses';
 export const c: PaginatedResourceResponseItems<'general:addresses'> = [];
 
 export const d: ResourcePathParams<'bens:address_domain'> = {
-  chainId: '1',
   address: '123',
 };
diff --git a/lib/api/services/bens.ts b/lib/api/services/bens.ts
@@ -4,32 +4,32 @@ import type { EnsAddressLookupFilters, EnsDomainLookupFilters, EnsLookupSorting
 
 export const BENS_API_RESOURCES = {
   addresses_lookup: {
-    path: '/api/v1/:chainId/addresses\\:lookup',
-    pathParams: [ 'chainId' as const ],
+    path: '/api/v1/addresses\\:lookup',
     filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const, 'protocols' as const ],
     paginated: true,
   },
   address_domain: {
-    path: '/api/v1/:chainId/addresses/:address',
-    pathParams: [ 'chainId' as const, 'address' as const ],
+    path: '/api/v1/addresses/:address',
+    pathParams: [ 'address' as const ],
+    filterFields: [ 'protocols' as const ],
   },
   domain_info: {
-    path: '/api/v1/:chainId/domains/:name',
-    pathParams: [ 'chainId' as const, 'name' as const ],
+    path: '/api/v1/domains/:name',
+    pathParams: [ 'name' as const ],
+    filterFields: [ 'protocols' as const ],
   },
   domain_events: {
-    path: '/api/v1/:chainId/domains/:name/events',
-    pathParams: [ 'chainId' as const, 'name' as const ],
+    path: '/api/v1/domains/:name/events',
+    pathParams: [ 'name' as const ],
+    filterFields: [ 'protocols' as const ],
   },
   domains_lookup: {
-    path: '/api/v1/:chainId/domains\\:lookup',
-    pathParams: [ 'chainId' as const ],
+    path: '/api/v1/domains\\:lookup',
     filterFields: [ 'name' as const, 'only_active' as const, 'protocols' as const ],
     paginated: true,
   },
-  domain_protocols: {
-    path: '/api/v1/:chainId/protocols',
-    pathParams: [ 'chainId' as const ],
+  protocols: {
+    path: '/api/v1/protocols',
   },
 } satisfies Record<string, ApiResource>;
 
@@ -42,7 +42,7 @@ R extends 'bens:address_domain' ? bens.GetAddressResponse :
 R extends 'bens:domain_info' ? bens.DetailedDomain :
 R extends 'bens:domain_events' ? bens.ListDomainEventsResponse :
 R extends 'bens:domains_lookup' ? bens.LookupDomainNameResponse :
-R extends 'bens:domain_protocols' ? bens.GetProtocolsResponse :
+R extends 'bens:protocols' ? bens.GetProtocolsResponse :
 never;
 /* eslint-enable @stylistic/indent */
 
diff --git a/lib/web3/useAccountWithDomain.ts b/lib/web3/useAccountWithDomain.ts
@@ -14,9 +14,11 @@ export default function useAccountWithDomain(isEnabled: boolean) {
 
   const domainQuery = useApiQuery('bens:address_domain', {
     pathParams: {
-      chainId: config.chain.id,
       address,
     },
+    queryParams: {
+      protocols: feature.isEnabled && feature.ens.isEnabled ? feature.ens.protocols : undefined,
+    },
     queryOptions: {
       enabled: isQueryEnabled,
       refetchOnMount: false,
diff --git a/playwright/fixtures/mockEnvs.ts b/playwright/fixtures/mockEnvs.ts
@@ -89,6 +89,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   ],
   nameService: [
     [ 'NEXT_PUBLIC_NAME_SERVICE_API_HOST', 'http://localhost:3008' ],
+    [ 'NEXT_PUBLIC_NAME_SERVICE_PROTOCOLS', '["ens","duck"]' ],
   ],
   rewardsService: [
     [ 'NEXT_PUBLIC_REWARDS_SERVICE_API_HOST', 'http://localhost:3009' ],
diff --git a/ui/address/utils/useCheckDomainNameParam.ts b/ui/address/utils/useCheckDomainNameParam.ts
@@ -15,9 +15,9 @@ export default function useCheckDomainNameParam(hashOrDomainName: string) {
   const [ isLoading, setIsLoading ] = React.useState(isQueryEnabled);
 
   const domainLookupQuery = useApiQuery('bens:domains_lookup', {
-    pathParams: { chainId: config.chain.id },
     queryParams: {
       name: hashOrDomainName,
+      protocols: feature.isEnabled && feature.ens.isEnabled ? feature.ens.protocols : undefined,
       only_active: false,
     },
     queryOptions: {
diff --git a/ui/nameDomain/NameDomainHistory.tsx b/ui/nameDomain/NameDomainHistory.tsx
@@ -14,18 +14,25 @@ import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
 import NameDomainHistoryTable from './history/NameDomainHistoryTable';
 import { getNextSortValue, type Sort, type SortField } from './history/utils';
 
+const feature = config.features.nameServices;
+const availableProtocols = feature.isEnabled && feature.ens.isEnabled ? feature.ens.protocols : [];
+
 interface Props {
   domain: bens.DetailedDomain | undefined;
 }
 
 const NameDomainHistory = ({ domain }: Props) => {
   const router = useRouter();
   const domainName = getQueryParamString(router.query.name);
+  const protocolId = getQueryParamString(router.query.protocol_id) || availableProtocols[0];
 
   const [ sort, setSort ] = React.useState<Sort>('default');
 
   const { isPlaceholderData, isError, data } = useApiQuery('bens:domain_events', {
-    pathParams: { name: domainName, chainId: config.chain.id },
+    pathParams: { name: domainName },
+    queryParams: {
+      protocol_id: protocolId,
+    },
     queryOptions: {
       placeholderData: { items: Array(4).fill(ENS_DOMAIN_EVENT) },
     },
diff --git a/ui/nameServices/domains/NameDomains.tsx b/ui/nameServices/domains/NameDomains.tsx
@@ -22,14 +22,31 @@ import NameDomainsTable from './NameDomainsTable';
 import type { Sort, SortField } from './utils';
 import { SORT_OPTIONS, getNextSortValue } from './utils';
 
+const feature = config.features.nameServices;
+const availableProtocols = feature.isEnabled && feature.ens.isEnabled ? feature.ens.protocols : [];
+
 const NameDomains = () => {
   const router = useRouter();
 
   const q = getQueryParamString(router.query.name) || getQueryParamString(router.query.address);
   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 protocols = (() => {
+    if (router.query.protocols) {
+      const valueFromQuery = getQueryParamString(router.query.protocols)
+        .split(',')
+        .filter(Boolean)
+        .filter((protocol) => availableProtocols.includes(protocol));
+
+      if (valueFromQuery.length > 0) {
+        return valueFromQuery;
+      }
+    }
+
+    return [];
+  })();
 
   const initialFilters: EnsDomainLookupFiltersOptions = [
     ownedBy === 'true' ? 'owned_by' as const : undefined,
@@ -49,13 +66,12 @@ const NameDomains = () => {
 
   const addressesLookupQuery = useQueryWithPages({
     resourceName: 'bens:addresses_lookup',
-    pathParams: { chainId: config.chain.id },
     filters: {
       address: debouncedSearchTerm,
       resolved_to: filterValue.includes('resolved_to'),
       owned_by: filterValue.includes('owned_by'),
       only_active: !filterValue.includes('with_inactive'),
-      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : availableProtocols,
     },
     sorting: sortParams,
     options: {
@@ -66,11 +82,10 @@ const NameDomains = () => {
 
   const domainsLookupQuery = useQueryWithPages({
     resourceName: 'bens:domains_lookup',
-    pathParams: { chainId: config.chain.id },
     filters: {
       name: debouncedSearchTerm,
       only_active: !filterValue.includes('with_inactive'),
-      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : availableProtocols,
     },
     sorting: sortParams,
     options: {
@@ -79,9 +94,7 @@ const NameDomains = () => {
     },
   });
 
-  const protocolsQuery = useApiQuery('bens:domain_protocols', {
-    pathParams: { chainId: config.chain.id },
-  });
+  const protocolsQuery = useApiQuery('bens:protocols');
 
   const query = isAddressSearch ? addressesLookupQuery : domainsLookupQuery;
   const { data, isError, isPlaceholderData: isLoading, onFilterChange, onSortingChange } = query;
@@ -186,7 +199,7 @@ const NameDomains = () => {
   }, [ debouncedSearchTerm, filterValue, onFilterChange ]);
 
   const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0 ||
-    (protocolsQuery.data && protocolsQuery.data.items.length > 1 ? protocolsFilter.length > 0 : false);
+    (protocolsQuery.data && availableProtocols.length > 1 ? protocolsFilter.length > 0 : false);
 
   const content = (
     <>
@@ -210,14 +223,18 @@ const NameDomains = () => {
     </>
   );
 
+  const protocolsData = React.useMemo(() => {
+    return protocolsQuery.data?.items?.filter((item) => availableProtocols.includes(item.id));
+  }, [ protocolsQuery.data?.items ]);
+
   const actionBar = (
     <NameDomainsActionBar
       isLoading={ isLoading }
       searchTerm={ searchTerm }
       onSearchChange={ handleSearchTermChange }
       filterValue={ filterValue }
       onFilterValueChange={ handleFilterValueChange }
-      protocolsData={ protocolsQuery.data?.items }
+      protocolsData={ protocolsData }
       protocolsFilterValue={ protocolsFilter }
       onProtocolsFilterChange={ handleProtocolsFilterChange }
       sort={ sort }
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
@@ -120,9 +120,9 @@ const AddressPageContent = () => {
   const userPropfileApiQuery = useAddressProfileApiQuery(hash, addressProfileAPIFeature.isEnabled && areQueriesEnabled);
 
   const addressEnsDomainsQuery = useApiQuery('bens:addresses_lookup', {
-    pathParams: { chainId: config.chain.id },
     queryParams: {
       address: hash,
+      protocols: nameServicesFeature.isEnabled && nameServicesFeature.ens.isEnabled ? nameServicesFeature.ens.protocols : undefined,
       resolved_to: true,
       owned_by: true,
       only_active: true,
diff --git a/ui/pages/NameDomain.pw.tsx b/ui/pages/NameDomain.pw.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import config from 'configs/app';
 import * as ensDomainMock from 'mocks/ens/domain';
 import * as ensDomainEventsMock from 'mocks/ens/events';
 import { test, expect } from 'playwright/lib';
@@ -10,7 +9,8 @@ import NameDomain from './NameDomain';
 test('details tab', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
   await mockTextAd();
   await mockApiResponse('bens:domain_info', ensDomainMock.ensDomainA, {
-    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+    pathParams: { name: ensDomainMock.ensDomainA.name },
+    queryParams: { protocol_id: 'ens' },
   });
   await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 
@@ -29,15 +29,17 @@ test('details tab', async({ render, mockTextAd, mockApiResponse, mockAssetRespon
 test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
   await mockTextAd();
   await mockApiResponse('bens:domain_info', ensDomainMock.ensDomainA, {
-    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+    pathParams: { name: ensDomainMock.ensDomainA.name },
+    queryParams: { protocol_id: 'ens' },
   });
   await mockApiResponse('bens:domain_events', {
     items: [
       ensDomainEventsMock.ensDomainEventA,
       ensDomainEventsMock.ensDomainEventB,
     ],
   }, {
-    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+    pathParams: { name: ensDomainMock.ensDomainA.name },
+    queryParams: { protocol_id: 'ens' },
   });
   await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
   const component = await render(
diff --git a/ui/pages/NameDomain.tsx b/ui/pages/NameDomain.tsx
diff --git a/ui/pages/NameServices.pw.tsx b/ui/pages/NameServices.pw.tsx
diff --git a/ui/shared/entities/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx
