Add support for searching for network proposal by name

.changelog/1192.feature.md

@@ -0,0 +1 @@
+Add support for searching for network proposal by name

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

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

src/app/pages/SearchResultsPage/SearchResultsList.tsx

@@ -9,6 +9,7 @@ import {
   AccountResult,
   BlockResult,
   ContractResult,
+  ProposalResult,
   SearchResults,
   TokenResult,
   TransactionResult,
@@ -19,6 +20,7 @@ import { SubPageCard } from '../../components/SubPageCard'
 import { AllTokenPrices } from '../../../coin-gecko/api'
 import { ResultListFrame } from './ResultListFrame'
 import { TokenDetails } from '../../components/Tokens/TokenDetails'
+import { ProposalDetailView } from '../ProposalDetailsPage'
 
 /**
  * Component for displaying a list of search results
@@ -114,6 +116,14 @@ export const SearchResultsList: FC<{
           link={token => RouteUtils.getTokenRoute(token, token.eth_contract_addr ?? token.contract_addr)}
           linkLabel={t('search.results.tokens.viewLink')}
         />
+
+        <ResultsGroupByType
+          title={t('search.results.proposals.title')}
+          results={searchResults.filter((item): item is ProposalResult => item.resultType === 'proposal')}
+          resultComponent={item => <ProposalDetailView proposal={item} showLayer />}
+          link={proposal => RouteUtils.getProposalRoute(proposal.network, proposal.id)}
+          linkLabel={t('search.results.proposals.viewLink')}
+        />
       </SubPageCard>
     </ResultListFrame>
   )

src/app/pages/SearchResultsPage/hooks.ts

@@ -13,6 +13,8 @@ import {
   EvmTokenList,
   EvmToken,
   useGetRuntimeBlockByHash,
+  Proposal,
+  useGetConsensusProposalsByName,
 } from '../../../oasis-nexus/api'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchParams } from '../../components/Search/search-utils'
@@ -24,7 +26,7 @@ function isDefined<T>(item: T): item is NonNullable<T> {
 export type ConditionalResults<T> = { isLoading: boolean; results: T[] }
 
 type SearchResultItemCore = HasScope & {
-  resultType: 'block' | 'transaction' | 'account' | 'contract' | 'token'
+  resultType: 'block' | 'transaction' | 'account' | 'contract' | 'token' | 'proposal'
 }
 
 export type BlockResult = SearchResultItemCore & RuntimeBlock & { resultType: 'block' }
@@ -37,7 +39,15 @@ export type ContractResult = SearchResultItemCore & RuntimeAccount & { resultTyp
 
 export type TokenResult = SearchResultItemCore & EvmToken & { resultType: 'token' }
 
-export type SearchResultItem = BlockResult | TransactionResult | AccountResult | ContractResult | TokenResult
+export type ProposalResult = SearchResultItemCore & Proposal & { resultType: 'proposal' }
+
+export type SearchResultItem =
+  | BlockResult
+  | TransactionResult
+  | AccountResult
+  | ContractResult
+  | TokenResult
+  | ProposalResult
 
 export type SearchResults = SearchResultItem[]
 
@@ -161,6 +171,24 @@ export function useRuntimeTokenConditionally(
   }
 }
 
+export function useNetworkProposalsConditionally(
+  nameFragment: string | undefined,
+): ConditionalResults<Proposal> {
+  const queries = RouteUtils.getEnabledNetworks()
+    .filter(network => RouteUtils.getEnabledLayersForNetwork(network).includes(Layer.consensus))
+    .map(network =>
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useGetConsensusProposalsByName(network, nameFragment),
+    )
+  return {
+    isLoading: queries.some(query => query.isInitialLoading),
+    results: queries
+      .map(query => query.results)
+      .filter(isDefined)
+      .flat(),
+  }
+}
+
 export const useSearch = (q: SearchParams) => {
   const queries = {
     blockHeight: useBlocksByHeightConditionally(q.blockHeight),
@@ -170,6 +198,7 @@ export const useSearch = (q: SearchParams) => {
     // TODO: remove evmBech32Account and use evmAccount when API is ready
     evmBech32Account: useRuntimeAccountConditionally(q.evmBech32Account),
     tokens: useRuntimeTokenConditionally(q.evmTokenNameFragment),
+    proposals: useNetworkProposalsConditionally(q.networkProposalNameFragment),
   }
   const isLoading = Object.values(queries).some(query => query.isLoading)
   const blocks = [...queries.blockHeight.results, ...queries.blockHash.results]
@@ -182,6 +211,7 @@ export const useSearch = (q: SearchParams) => {
     .map(l => l.evm_tokens)
     .flat()
     .sort((t1, t2) => t2.num_holders - t1.num_holders)
+  const proposals = queries.proposals.results
 
   const results: SearchResultItem[] = isLoading
     ? []
@@ -195,6 +225,7 @@ export const useSearch = (q: SearchParams) => {
           .filter(account => account.evm_contract)
           .map((account): ContractResult => ({ ...account, resultType: 'contract' })),
         ...tokens.map((token): TokenResult => ({ ...token, resultType: 'token' })),
+        ...proposals.map((proposal): ProposalResult => ({ ...proposal, resultType: 'proposal' })),
       ]
   return {
     isLoading,

src/app/pages/SearchResultsPage/useRedirectIfSingleResult.ts

@@ -18,6 +18,7 @@ export function useRedirectIfSingleResult(scope: SearchScope | undefined, result
   }
 
   let redirectTo: string | undefined
+
   if (shouldRedirect) {
     const item = results[0]
     switch (item.resultType) {
@@ -36,6 +37,9 @@ export function useRedirectIfSingleResult(scope: SearchScope | undefined, result
       case 'token':
         redirectTo = RouteUtils.getTokenRoute(item, item.eth_contract_addr || item.contract_addr)
         break
+      case 'proposal':
+        redirectTo = RouteUtils.getProposalRoute(item.network, item.id)
+        break
       default:
         exhaustedTypeWarning('Unexpected result type', item)
     }

src/locales/en/translation.json

@@ -495,6 +495,10 @@
         "title": "Transactions",
         "viewLink": "View Transaction"
       },
+      "proposals": {
+        "title": "Proposals",
+        "viewLink": "View Proposal"
+      },
       "count_one": "1 result",
       "count_other": "{{ count }} results",
       "moreCount_one": "1 more result",

src/oasis-nexus/api.ts

@@ -817,6 +817,7 @@ export const useGetConsensusProposals: typeof generated.useGetConsensusProposals
               return {
                 ...proposal,
                 network,
+                layer: Layer.consensus,
                 deposit: fromBaseUnits(proposal.deposit, consensusDecimals),
               }
             }),
@@ -854,6 +855,23 @@ export const useGetConsensusProposalsProposalId: typeof generated.useGetConsensu
   })
 }
 
+export const useGetConsensusProposalsByName = (network: Network, nameFragment: string | undefined) => {
+  const query = useGetConsensusProposals(network, {}, { query: { enabled: !!nameFragment } })
+  const { isLoading, isInitialLoading, data, status, error } = query
+  const textMatcher = nameFragment
+    ? (proposal: generated.Proposal): boolean =>
+        !!proposal.handler && proposal.handler?.includes(nameFragment)
+    : () => false
+  const results = data ? query.data.data.proposals.filter(textMatcher) : undefined
+  return {
+    isLoading,
+    isInitialLoading,
+    status,
+    error,
+    results,
+  }
+}
+
 export const useGetConsensusValidators: typeof generated.useGetConsensusValidators = (
   network,
   params?,