Enable search by validator name

.changelog/1633.trivial.md

@@ -0,0 +1 @@
+Enable search by validator name

src/app/components/Account/ConsensusAccountDetailsView.tsx

@@ -11,7 +11,7 @@ import { styled } from '@mui/material/styles'
 import { useFormattedTimestampStringWithDistance } from '../../hooks/useFormattedTimestamp'
 import { AccountAvatar } from '../AccountAvatar'
 import { AccountSizeBadge } from '../AccountSizeBadge'
-import { AccountLink } from './AccountLink'
+import { ConsensusAccountLink } from './ConsensusAccountLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 
@@ -60,8 +60,9 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
         </Box>
       </StyledListTitleWithAvatar>
       <dd>
-        <AccountLink
-          scope={account}
+        <ConsensusAccountLink
+          alwaysTrim={false}
+          network={account.network}
           address={account.address}
           highlightedPartOfName={highlightedPartOfName}
         />

src/app/components/Account/ConsensusAccountLink.tsx

@@ -9,18 +9,27 @@ type ConsensusAccountLinkProps = {
   alwaysTrim?: boolean
   labelOnly?: boolean
   network: Network
+  highlightedPartOfName?: string | undefined
 }
 
 export const ConsensusAccountLink: FC<ConsensusAccountLinkProps> = ({
   address,
   alwaysTrim = true,
   labelOnly,
   network,
+  highlightedPartOfName,
 }) => {
   const { data } = useGetConsensusValidatorsAddressNameMap(network)
 
   if (data?.data?.[address]) {
-    return <ValidatorLink address={address} network={network} alwaysTrim={alwaysTrim} />
+    return (
+      <ValidatorLink
+        address={address}
+        network={network}
+        alwaysTrim={alwaysTrim}
+        highlightedPartOfName={highlightedPartOfName}
+      />
+    )
   }
 
   return (
@@ -29,6 +38,7 @@ export const ConsensusAccountLink: FC<ConsensusAccountLinkProps> = ({
       scope={{ network, layer: Layer.consensus }}
       address={address}
       alwaysTrim={alwaysTrim}
+      highlightedPartOfName={highlightedPartOfName}
     />
   )
 }

src/app/components/Search/search-utils.ts

@@ -146,6 +146,11 @@ export const validateAndNormalize = {
       return searchTerm.toLowerCase()
     }
   },
+  validatorNameFragment: (searchTerm: string) => {
+    if (searchTerm?.length >= textSearchMinimumLength) {
+      return searchTerm.toLowerCase()
+    }
+  },
 } satisfies { [name: string]: (searchTerm: string) => string | undefined }
 
 export function isSearchValid(searchTerm: string) {

src/app/components/Validators/DeferredValidatorLink.tsx

@@ -22,7 +22,7 @@ export const DeferredValidatorLink: FC<{
       address={address}
       network={scope.network}
       name={validator?.media?.name}
-      highlightedPart={highlightedPart}
+      highlightedPartOfName={highlightedPart}
     />
   )
 }

src/app/components/Validators/ValidatorLink.tsx

@@ -15,15 +15,15 @@ type ValidatorLinkProps = {
   name?: string
   network: Network
   alwaysTrim?: boolean
-  highlightedPart?: string
+  highlightedPartOfName?: string
 }
 
 export const ValidatorLink: FC<ValidatorLinkProps> = ({
   address,
   name,
   network,
   alwaysTrim,
-  highlightedPart,
+  highlightedPartOfName,
 }) => {
   const { isTablet } = useScreenSize()
   const to = RouteUtils.getValidatorRoute(network, address)
@@ -36,15 +36,15 @@ export const ValidatorLink: FC<ValidatorLinkProps> = ({
           address={address}
           name={name || validatorName}
           to={to}
-          highlightedPart={highlightedPart}
+          highlightedPart={highlightedPartOfName}
         />
       ) : (
         <DesktopValidatorLink
           address={address}
           alwaysTrim={alwaysTrim}
           name={name || validatorName}
           to={to}
-          highlightedPart={highlightedPart}
+          highlightedPart={highlightedPartOfName}
         />
       )}
     </Typography>

src/app/hooks/useSearchForValidatorsByName.ts

@@ -0,0 +1,42 @@
+import { hasTextMatch } from 'app/components/HighlightedText/text-matching'
+import {
+  Layer,
+  useGetConsensusValidatorsAddressNameMap,
+  useGetConsensusAccountsAddresses,
+  ValidatorAddressNameMap,
+} from 'oasis-nexus/api'
+import { Network } from 'types/network'
+import { AccountNameSearchResults, AccountNameSearchConsensusMatch } from '../data/named-accounts'
+
+function findAddressesWithMatch(addressMap: ValidatorAddressNameMap, nameFragment: string, network: Network) {
+  const matchedAddresses: AccountNameSearchConsensusMatch[] = []
+
+  for (const [address, name] of Object.entries(addressMap)) {
+    if (hasTextMatch(name, [nameFragment])) {
+      matchedAddresses.push({ address, layer: Layer.consensus, network })
+    }
+  }
+
+  return matchedAddresses
+}
+
+export const useSearchForValidatorsByName = (
+  network: Network,
+  nameFragment: string | undefined,
+): AccountNameSearchResults => {
+  const { isLoading, isError, data } = useGetConsensusValidatorsAddressNameMap(network)
+  const matches = data?.data && nameFragment ? findAddressesWithMatch(data?.data, nameFragment, network) : []
+  const {
+    isLoading: areConsensusAccountsLoading,
+    isError: areConsensusAccountsError,
+    data: consensusResults,
+  } = useGetConsensusAccountsAddresses(matches, {
+    enabled: !isLoading && !isError,
+  })
+
+  return {
+    isLoading: isLoading || areConsensusAccountsLoading,
+    isError: isError || areConsensusAccountsError,
+    results: [...consensusResults],
+  }
+}

src/app/pages/SearchResultsPage/hooks.ts

@@ -22,6 +22,7 @@ import { RouteUtils } from '../../utils/route-utils'
 import { SearchParams } from '../../components/Search/search-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { useSearchForAccountsByName } from '../../hooks/useAccountMetadata'
+import { useSearchForValidatorsByName } from '../../hooks/useSearchForValidatorsByName'
 
 function isDefined<T>(item: T): item is NonNullable<T> {
   return item != null
@@ -234,6 +235,21 @@ export function useNamedAccountConditionally(
   }
 }
 
+export function useNamedValidatorConditionally(nameFragment: string | undefined) {
+  const queries = RouteUtils.getEnabledNetworksForLayer(Layer.consensus).map(network =>
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useSearchForValidatorsByName(network, nameFragment),
+  )
+  return {
+    isLoading: queries.some(query => query.isLoading),
+    isError: queries.some(query => query.isError),
+    results: queries
+      .map(query => query.results)
+      .filter(isDefined)
+      .flat(),
+  }
+}
+
 export const useSearch = (currentScope: SearchScope | undefined, q: SearchParams) => {
   const queries = {
     blockHeight: useBlocksByHeightConditionally(currentScope, q.blockHeight),
@@ -243,6 +259,7 @@ export const useSearch = (currentScope: SearchScope | undefined, q: SearchParams
     oasisRuntimeAccount: useRuntimeAccountConditionally(currentScope, q.consensusAccount),
     evmAccount: useRuntimeAccountConditionally(currentScope, q.evmAccount),
     accountsByName: useNamedAccountConditionally(currentScope, q.accountNameFragment),
+    validatorByName: useNamedValidatorConditionally(q.validatorNameFragment),
     tokens: useRuntimeTokenConditionally(currentScope, q.evmTokenNameFragment),
     proposals: useNetworkProposalsConditionally(q.networkProposalNameFragment),
   }
@@ -255,6 +272,7 @@ export const useSearch = (currentScope: SearchScope | undefined, q: SearchParams
     ...(queries.oasisRuntimeAccount.results || []),
     ...(queries.evmAccount.results || []),
     ...(queries.accountsByName.results || []),
+    ...(queries.validatorByName.results || []),
   ].filter(isAccountNonEmpty)
   const tokens = queries.tokens.results
     .map(l => l.evm_tokens)