Adjust search logiv

Global Search:
- Only show MainNet results by default; the rest only upon request.
- Group results by network and not scopes.
- Inside network sections, sort results by paratime.

Scoped search:
- Filter out other paratimes earlier in the process, and simplify data flow
- Before redirecting, also consider other results

Generel:
- Remove some unnecessary variables in conditions
  Just write the calculations inside the expressions,
  it makes it easier to understand.

src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx

@@ -1,34 +1,73 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { getFilterForScope, getKeyForScope, getNameForScope } from '../../../types/searchScope'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchResults } from './hooks'
-import { NoResults } from './NoResults'
+import { NoResultsOnMainnet, NoResultsWhatsoever } from './NoResults'
 import { SearchResultsList } from './SearchResultsList'
 import { AllTokenPrices } from '../../../coin-gecko/api'
+import {
+  getFilterForNetwork,
+  getNetworkNames,
+  isNotMainnet,
+  isNotOnMainnet,
+  isOnMainnet,
+  Network,
+} from '../../../types/network'
+import { HideMoreResults, ShowMoreResults } from './notifications'
+import { getThemesForNetworks } from '../../../styles/theme'
+import { orderByLayer } from '../../../types/layers'
 import { useRedirectIfSingleResult } from './useRedirectIfSingleResult'
 
 export const GlobalSearchResultsView: FC<{ searchResults: SearchResults; tokenPrices: AllTokenPrices }> = ({
   searchResults,
   tokenPrices,
 }) => {
   const { t } = useTranslation()
+  const [othersOpen, setOthersOpen] = useState(false)
   useRedirectIfSingleResult(undefined, searchResults)
 
-  return searchResults.length === 0 ? (
-    <NoResults />
-  ) : (
+  const themes = getThemesForNetworks()
+  const networkNames = getNetworkNames(t)
+  const otherNetworks = RouteUtils.getEnabledNetworks().filter(isNotMainnet)
+  const notificationTheme = themes[Network.testnet]
+  const mainnetResults = searchResults.filter(isOnMainnet).sort(orderByLayer)
+  const otherResults = searchResults.filter(isNotOnMainnet).sort(orderByLayer)
+
+  return (
     <>
-      {RouteUtils.getEnabledSearchScopes().map(scope => (
+      {!mainnetResults.length && (otherResults.length ? <NoResultsOnMainnet /> : <NoResultsWhatsoever />)}
+      {
         <SearchResultsList
-          key={getKeyForScope(scope)}
-          title={getNameForScope(t, scope)}
-          searchResults={searchResults.filter(getFilterForScope(scope))}
-          networkForTheme={scope.network}
+          key={Network.mainnet}
+          title={networkNames[Network.mainnet]}
+          searchResults={mainnetResults}
+          networkForTheme={Network.mainnet}
           tokenPrices={tokenPrices}
         />
-      ))}
+      }
+      {otherResults.length !== 0 &&
+        (othersOpen ? (
+          <>
+            <HideMoreResults theme={notificationTheme} onHide={() => setOthersOpen(false)} />
+            {otherNetworks.map(net => (
+              <SearchResultsList
+                key={net}
+                title={networkNames[net]}
+                searchResults={otherResults.filter(getFilterForNetwork(net))}
+                networkForTheme={net}
+                tokenPrices={tokenPrices}
+              />
+            ))}
+          </>
+        ) : (
+          <ShowMoreResults
+            theme={notificationTheme}
+            hasWantedResults={!!mainnetResults.length}
+            otherResultsCount={otherResults.length}
+            onShow={() => setOthersOpen(true)}
+          />
+        ))}
     </>
   )
 }

src/app/pages/SearchResultsPage/ScopedSearchResultsView.tsx

@@ -1,7 +1,6 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getFilterForNetwork, getNetworkNames, isOnMainnet, Network } from '../../../types/network'
-import { getFilterForLayer } from '../../../types/layers'
 import {
   getFilterForScope,
   getNameForScope,
@@ -28,18 +27,15 @@ export const ScopedSearchResultsView: FC<{
   const themes = getThemesForNetworks()
   const isInWantedScope = getFilterForScope(wantedScope)
   const isNotInWantedScope = getInverseFilterForScope(wantedScope)
-  const isOnTheRightParatime = getFilterForLayer(wantedScope.layer)
   const wantedResults = searchResults.filter(isInWantedScope)
-  const hasWantedResults = !!wantedResults.length
-  const otherResults = searchResults.filter(isNotInWantedScope).filter(isOnTheRightParatime)
-  const hasMainnetResults = otherResults.some(isOnMainnet)
-  const notificationTheme = themes[hasMainnetResults ? Network.mainnet : Network.testnet]
+  const otherResults = searchResults.filter(isNotInWantedScope)
+  const notificationTheme = themes[otherResults.some(isOnMainnet) ? Network.mainnet : Network.testnet]
 
-  useRedirectIfSingleResult(wantedScope, wantedResults)
+  useRedirectIfSingleResult(wantedScope, [...wantedResults, ...otherResults])
 
   return (
     <>
-      {hasWantedResults ? (
+      {wantedResults.length ? (
         <SearchResultsList
           title={getNameForScope(t, wantedScope)}
           searchResults={wantedResults}
@@ -69,7 +65,7 @@ export const ScopedSearchResultsView: FC<{
           <ShowMoreResults
             theme={notificationTheme}
             onShow={() => setOthersOpen(true)}
-            hasWantedResults={hasWantedResults}
+            hasWantedResults={!!wantedResults.length}
             otherResultsCount={otherResults.length}
           />
         )

src/app/pages/SearchResultsPage/SearchResultsView.tsx

@@ -8,6 +8,7 @@ import { SearchResults } from './hooks'
 import { GlobalSearchResultsView } from './GlobalSearchResultsView'
 import { ScopedSearchResultsView } from './ScopedSearchResultsView'
 import { AllTokenPrices } from '../../../coin-gecko/api'
+import { getFilterForLayer } from '../../../types/layers'
 
 export const SearchResultsView: FC<{
   wantedScope?: SearchScope
@@ -25,7 +26,7 @@ export const SearchResultsView: FC<{
       ) : wantedScope ? (
         <ScopedSearchResultsView
           wantedScope={wantedScope}
-          searchResults={searchResults}
+          searchResults={searchResults.filter(getFilterForLayer(wantedScope.layer))}
           tokenPrices={tokenPrices}
         />
       ) : (

src/types/network.ts

@@ -21,4 +21,7 @@ export const getFilterForNetwork = (network: Network) => (item: HasNetwork) => i
 export const getInverseFilterForNetwork = (network: Network) => (item: HasNetwork) => item.network !== network
 
 export const isOnMainnet = getFilterForNetwork(Network.mainnet)
+export const isNotOnMainnet = getInverseFilterForNetwork(Network.mainnet)
 export const isOnTestnet = getFilterForNetwork(Network.testnet)
+
+export const isNotMainnet = (network: Network) => network !== Network.mainnet