Support recovering from invalid URLs using search

.changelog/1146.bugfix.md

@@ -0,0 +1 @@
+Support recovering from invalid URLs using search

src/app/components/Search/SearchSuggestionsLinksForNoResults.tsx

@@ -9,12 +9,12 @@ import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
 import TokenIcon from '@mui/icons-material/Token'
 import { RouteUtils } from '../../utils/route-utils'
 import { OptionalBreak } from '../OptionalBreak'
-import { SearchScope } from '../../../types/searchScope'
+import { SearchScopeCandidate } from '../../../types/searchScope'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { SxProps } from '@mui/material/styles'
 
 interface Props {
-  scope: SearchScope | undefined
+  scope: SearchScopeCandidate | undefined
 }
 
 const iconSxProps: SxProps = {

src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx

@@ -36,7 +36,12 @@ export const GlobalSearchResultsView: FC<{ searchResults: SearchResults; tokenPr
 
   return (
     <>
-      {!mainnetResults.length && (otherResults.length ? <NoResultsOnMainnet /> : <NoResultsWhatsoever />)}
+      {!mainnetResults.length &&
+        (otherResults.length ? (
+          <NoResultsOnMainnet isScopeValid={true} />
+        ) : (
+          <NoResultsWhatsoever isScopeValid={true} />
+        ))}
       {
         <SearchResultsList
           key={Network.mainnet}

src/app/pages/SearchResultsPage/NoResults.tsx

@@ -7,14 +7,15 @@ import Link from '@mui/material/Link'
 import { SearchSuggestionsLinksForNoResults } from '../../components/Search/SearchSuggestionsLinksForNoResults'
 import { OptionalBreak } from '../../components/OptionalBreak'
 import { useTheme } from '@mui/material/styles'
-import { getNameForScope, SearchScope } from '../../../types/searchScope'
+import { getNameForScope, SearchScope, SearchScopeCandidate } from '../../../types/searchScope'
 import { getNetworkNames, Network } from '../../../types/network'
 import { Layer } from '../../../oasis-nexus/api'
 
 export const NoResults: FC<{
   network?: Network
   layer?: Layer
-}> = ({ network, layer }) => {
+  isScopeValid: boolean
+}> = ({ network, layer, isScopeValid }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const title = network
@@ -41,19 +42,28 @@ export const NoResults: FC<{
             />
           </p>
           <p>
-            <SearchSuggestionsLinksForNoResults scope={layer && network ? { network, layer } : undefined} />
+            <SearchSuggestionsLinksForNoResults
+              scope={layer && network ? { network, layer, valid: isScopeValid } : undefined}
+            />
           </p>
         </Box>
       }
     />
   )
 }
 
-export const NoResultsWhatsoever: FC = () => <NoResults />
-export const NoResultsOnNetwork: FC<{ network: Network }> = ({ network }) => <NoResults network={network} />
+export const NoResultsWhatsoever: FC<{ isScopeValid: boolean }> = ({ isScopeValid }) => (
+  <NoResults isScopeValid={isScopeValid} />
+)
+export const NoResultsOnNetwork: FC<{ network: Network; isScopeValid: boolean }> = ({
+  network,
+  isScopeValid,
+}) => <NoResults network={network} isScopeValid={isScopeValid} />
 
-export const NoResultsOnMainnet: FC = () => <NoResultsOnNetwork network={Network.mainnet} />
+export const NoResultsOnMainnet: FC<{ isScopeValid: boolean }> = ({ isScopeValid }) => (
+  <NoResultsOnNetwork network={Network.mainnet} isScopeValid={isScopeValid} />
+)
 
-export const NoResultsInScope: FC<{ scope: SearchScope }> = ({ scope }) => (
-  <NoResults network={scope.network} layer={scope.layer} />
+export const NoResultsInScope: FC<{ scope: SearchScopeCandidate }> = ({ scope }) => (
+  <NoResults network={scope.network} layer={scope.layer} isScopeValid={scope.valid} />
 )

src/app/pages/SearchResultsPage/ScopedSearchResultsView.tsx

@@ -5,7 +5,7 @@ import {
   getFilterForScope,
   getNameForScope,
   getInverseFilterForScope,
-  SearchScope,
+  SearchScopeCandidate,
 } from '../../../types/searchScope'
 import { getThemesForNetworks } from '../../../styles/theme'
 import { RouteUtils } from '../../utils/route-utils'
@@ -17,7 +17,7 @@ import { HideMoreResults, ShowMoreResults } from './notifications'
 import { useRedirectIfSingleResult } from './useRedirectIfSingleResult'
 
 export const ScopedSearchResultsView: FC<{
-  wantedScope: SearchScope
+  wantedScope: SearchScopeCandidate
   searchResults: SearchResults
   tokenPrices: AllTokenPrices
 }> = ({ wantedScope, searchResults, tokenPrices }) => {

src/app/pages/SearchResultsPage/SearchResultsView.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Divider from '@mui/material/Divider'
-import { SearchScope } from '../../../types/searchScope'
+import { SearchScopeCandidate } from '../../../types/searchScope'
 import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
 import { TextSkeleton } from '../../components/Skeleton'
@@ -12,7 +12,7 @@ import { getFilterForLayer } from '../../../types/layers'
 import { useScreenSize } from '../../hooks/useScreensize'
 
 export const SearchResultsView: FC<{
-  wantedScope?: SearchScope
+  wantedScope?: SearchScopeCandidate
   searchResults: SearchResults
   isLoading: boolean
   tokenPrices: AllTokenPrices

src/app/utils/route-utils.ts

@@ -4,7 +4,7 @@ import { isValidBlockHeight, isValidOasisAddress, isValidEthAddress } from './he
 import { AppError, AppErrors } from '../../types/errors'
 import { EvmTokenType, Layer } from '../../oasis-nexus/api'
 import { Network } from '../../types/network'
-import { SearchScope } from '../../types/searchScope'
+import { SearchScope, SearchScopeCandidate } from '../../types/searchScope'
 
 export type SpecifiedPerEnabledLayer<T = any> = {
   [N in keyof (typeof RouteUtils)['ENABLED_LAYERS_FOR_NETWORK']]: {
@@ -73,8 +73,8 @@ export abstract class RouteUtils {
     return tokenAddress ? `${tokenRoutes}#${encodeURIComponent(tokenAddress)}` : tokenRoutes
   }
 
-  static getSearchRoute = (scope: SearchScope | undefined, searchTerm: string) => {
-    return scope
+  static getSearchRoute = (scope: SearchScopeCandidate | undefined, searchTerm: string) => {
+    return scope?.valid
       ? `/${scope.network}/${scope.layer}/search?q=${encodeURIComponent(searchTerm)}`
       : `/search?q=${encodeURIComponent(searchTerm)}`
   }