Support Clusters as the only Name service (#3064)

* Support Clusters as the only Name service

Resolves #3033

* update screenshots

* fix screenshots in main branch

icons/ENS.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.41 3 7.764 7.625c-.396.263-.72.62-.946 1.038a4.74 4.74 0 0 0-.046.1l-.009.019a4.786 4.786 0 0 0 .01 3.93c.233.508.828 1.51.828 1.51L14.41 3ZM4.076 16.404A15.45 15.45 0 0 1 4 14.886l1.168-3.159a6.617 6.617 0 0 0 .755 2.095C9.802 20.393 14.401 27 14.401 27l-7.35-5.108A7.562 7.562 0 0 1 4.25 17.57a7.53 7.53 0 0 1-.174-1.166ZM4 14.886l1.144-3.306a3.575 3.575 0 0 1 0-1.076c-.101.187-.298.57-.298.57a8.68 8.68 0 0 0-.794 2.534A15.45 15.45 0 0 0 4 14.886ZM15.192 27l.063-.103 6.734-11.113.005.009.007-.012s.589 1.002.827 1.51a4.787 4.787 0 0 1-.045 4.05c-.225.417-.55.774-.946 1.037L15.192 27Zm9.263-7.504c.054-.357.054-.72 0-1.076a6.622 6.622 0 0 0-.776-2.242C19.796 9.607 15.2 3 15.2 3l7.35 5.108a7.533 7.533 0 0 1 2.975 5.488c.091.93.098 1.865.02 2.796a8.68 8.68 0 0 1-.794 2.535s-.196.382-.297.57v-.001Z" fill="currentColor"/>
-</svg>

icons/name_services.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.232 23.08h6.577v2.23H5.115A1.115 1.115 0 0 1 4 24.194V4.115A1.115 1.115 0 0 1 5.115 3h17.617a1.117 1.117 0 0 1 1.116 1.115V13h-2.23V5.231H6.231V23.08Z" fill="currentColor"/>
+  <path d="M14.188 13.584c1.085.04 2.092.36 2.966.877-.72.33-1.373.78-1.931 1.327a4.22 4.22 0 0 0-1.268-.195c-1.48 0-2.78.725-3.589 1.879a.418.418 0 0 1-.34.178H8.643a.417.417 0 0 1-.368-.609c1.088-2.07 3.208-3.461 5.68-3.462l.233.005ZM14.086 6.6a3.184 3.184 0 0 1 3.022 3.179 3.184 3.184 0 0 1-3.022 3.178l-.164.005a3.185 3.185 0 0 1-3.186-3.183 3.186 3.186 0 0 1 3.186-3.184l.164.005Zm-.164 2.009a1.17 1.17 0 0 0-1.17 1.17l.006.119a1.17 1.17 0 0 0 2.335-.12l-.006-.119a1.171 1.171 0 0 0-1.165-1.05Z" fill="currentColor"/>
+  <path clip-rule="evenodd" d="M22.998 24.393a4.805 4.805 0 1 1 .728-.728l2.457 2.456a.515.515 0 1 1-.728.728l-2.457-2.456Zm.761-3.743a3.776 3.776 0 1 1-7.55 0 3.776 3.776 0 0 1 7.55 0Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+</svg>

lib/hooks/useNavItems.tsx

@@ -85,7 +85,7 @@ export default function useNavItems(): ReturnType {
     const nameLookup = config.features.nameService.isEnabled || config.features.clusters.isEnabled ? {
       text: 'Name services lookup',
       nextRoute: { pathname: '/name-domains' as const },
-      icon: 'ENS',
+      icon: 'name_services',
       isActive: pathname === '/name-domains' || pathname === '/name-domains/[name]' || pathname === '/clusters/[name]',
     } : null;
     const validators = config.features.validators.isEnabled ? {

public/icons/name.d.ts

@@ -60,7 +60,6 @@
 	| "email"
 	| "empty_search_result"
 	| "ENS_slim"
-	| "ENS"
 	| "error-pages/403"
 	| "error-pages/404"
 	| "error-pages/422"
@@ -120,6 +119,7 @@
 	| "moon"
 	| "MUD_menu"
 	| "MUD"
+	| "name_services"
 	| "networks"
 	| "networks/icon-placeholder"
 	| "networks/logo-placeholder"

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -47,7 +47,7 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
     return <Skeleton loading h={ 8 } w={{ base: '50px', xl: '120px' }} borderRadius="base"/>;
   }
 
-  if (data.items.length === 0) {
+  if (!data || data.items.length === 0) {
     return null;
   }
 

ui/nameDomains/directories/Clusters.tsx

@@ -17,6 +17,7 @@ import { useClustersData } from 'lib/clusters/useClustersData';
 import { useClusterSearch } from 'lib/clusters/useClusterSearch';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { useQueryParams } from 'lib/router/useQueryParams';
+import { Link } from 'toolkit/chakra/link';
 import { apos } from 'toolkit/utils/htmlEntities';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -138,7 +139,8 @@ const Clusters = () => {
   return (
     <>
       <Text mb={ 6 } textStyle={{ base: 'sm', lg: 'md' }}>
-        Clusters is a cross-chain name service for managing addresses on multiple blockchains using a universal naming directory.
+        <Link href="https://clusters.xyz/?utm_source=blockscout" external noIcon>Clusters</Link>{ ' ' }
+        is a cross-chain name service for managing addresses on multiple blockchains using a universal naming directory.
       </Text>
       <DataListDisplay
         isError={ isError }

ui/pages/Address.tsx

@@ -450,9 +450,9 @@ const AddressPageContent = () => {
       <HStack ml="auto" gap={ 2 }/>
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled &&
         <SolidityscanReport hash={ hash }/> }
-      { !isLoading && addressEnsDomainsQuery.data && config.features.nameService.isEnabled &&
+      { !isLoading && config.features.nameService.isEnabled &&
         <AddressEnsDomains query={ addressEnsDomainsQuery } addressHash={ hash } mainDomainName={ addressQuery.data?.ens_domain_name }/> }
-      { !isLoading && addressClustersQuery.data && config.features.clusters.isEnabled &&
+      { !isLoading && config.features.clusters.isEnabled &&
         <AddressClusters query={ addressClustersQuery } addressHash={ hash }/> }
       <NetworkExplorers type="address" pathParam={ hash }/>
     </Flex>