Continue the work on cross-site / cross-paratime search

src/app/components/StyledDescriptionList/index.tsx

@@ -43,6 +43,8 @@ export const StyledDescriptionList = styled(InlineDescriptionList, {
   'dt, dd': {
     display: 'flex',
     alignItems: 'center',
+    // TODO do we want to use this here? Discuss with Don
+    // boxShadow: `0px 1px 0px ${theme.palette.layout.descriptionListSeparator}`,
     boxShadow: `0px 1px 0px ${COLORS.grayLight}`,
     ':last-of-type': {
       boxShadow: 'none',

src/app/pages/SearchResultsPage/NoResults.tsx

@@ -7,15 +7,14 @@ import Link from '@mui/material/Link'
 import { SearchSuggestionsLinks } from '../../components/Search/SearchSuggestionsLinks'
 import { OptionalBreak } from '../../components/OptionalBreak'
 import { useTheme } from '@mui/material/styles'
-import { getNetworkNames } from '../../../types/network'
-import { SearchScope } from '../../../types/searchScope'
+import { getNameForScope, SearchScope } from '../../../types/searchScope'
 
 export const NoResults: FC<{ scope?: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const title = !scope
     ? t('search.noResults.header')
-    : t('search.noResults.scopeHeader', { scope: getNetworkNames(t)[scope.network] })
+    : t('search.noResults.scopeHeader', { scope: getNameForScope(t, scope) })
 
   return (
     <EmptyState

src/app/pages/SearchResultsPage/ResultsElsewhere.tsx

@@ -1,21 +1,23 @@
 import { FC, useState } from 'react'
-import { getNetworkNames, Network } from '../../../types/network'
 import { Trans, useTranslation } from 'react-i18next'
-import { styled, useTheme } from '@mui/material/styles'
+import { styled } from '@mui/material/styles'
 import { getThemesForNetworks } from '../../../styles/theme'
-import useMediaQuery from '@mui/material/useMediaQuery'
 import Box from '@mui/material/Box'
-import { ResultsOnNetwork } from './ResultsOnNetwork'
-import { COLORS } from '../../../styles/theme/colors'
-import ZoomIn from '@mui/icons-material/ZoomIn'
-import Warning from '@mui/icons-material/Warning'
 import { SearchResults } from './hooks'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
+import { getFilterForScope, getNotFilterForScope, SearchScope } from '../../../types/searchScope'
+import { getNetworkNames, Network } from '../../../types/network'
+import { RouteUtils } from '../../utils/route-utils'
+import { ResultsFilteredThemed } from './ResultsFilteredThemed'
 
 const NotificationBox = styled(Box)(({ theme }) => ({
   // TODO: this is probably not fully correct.
-  marginTop: 10,
-  marginBottom: 20,
+  marginTop: 30,
+  marginBottom: 30,
   fontSize: 14,
+  marginLeft: '10%',
+  marginRight: '10%',
 
   boxSizing: 'border-box',
   display: 'flex',
@@ -27,90 +29,113 @@ const NotificationBox = styled(Box)(({ theme }) => ({
 
   height: 50,
 
-  background: theme.palette.background.default,
-  border: `2px solid ${theme.palette.layout.border}`,
-  color: theme.palette.layout.main,
+  background: theme.palette.layout.notificationBackground,
+  border: `2px solid ${theme.palette.layout.darkBorder}`,
+  color: theme.palette.layout.notificationText,
 
   borderRadius: 50,
 }))
 
-/**
- * Component for selectively displaying a subset of search results that belongs to a specific foreign network,
- * with appropriate theming and collapse/open functionality.
- *
- * It doesn't actually run a search query, but uses existing results.
- * Except the theming and the collapse functionality, it relies on ResultsOnNetwork.
- */
-export const ResultsOnForeignNetworkThemed: FC<{
-  network: Network
-  alsoHasLocalResults: boolean
-  openByDefault?: boolean
+export const ResultsElsewhere: FC<{
+  wantedScope: SearchScope
   searchResults: SearchResults
-  numberOfResults: number
   roseFiatValue: number | undefined
-}> = ({
-  network,
-  searchResults,
-  numberOfResults,
-  roseFiatValue,
-  openByDefault = false,
-  alsoHasLocalResults,
-}) => {
-  const [open, setOpen] = useState(openByDefault)
+}> = ({ wantedScope, searchResults, roseFiatValue }) => {
+  const isInWantedScope = getFilterForScope(wantedScope)
+  const isNotInWantedScope = getNotFilterForScope(wantedScope)
   const { t } = useTranslation()
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const networkName = getNetworkNames(t)[network]
-  if (!numberOfResults) {
-    return null
-  }
-  const otherTheme = getThemesForNetworks()[network]
+  const { allResults } = searchResults
+  const allOtherResults = allResults.filter(isNotInWantedScope)
+  const alsoHasWantedResults = allResults.some(isInWantedScope)
+  const hasResultsOnDifferentParatimes = allOtherResults.some(
+    item => item.network === wantedScope.network && item.layer !== wantedScope.layer,
+  )
+  const hasResultsOnDifferentNetworks = allOtherResults.some(item => item.network !== wantedScope.network)
+  const hasAllKindsOfResults = hasResultsOnDifferentParatimes && hasResultsOnDifferentNetworks
+  const location = t(
+    hasAllKindsOfResults
+      ? 'search.otherResults.otherNetworksAndParatimes'
+      : hasResultsOnDifferentNetworks
+      ? 'search.otherResults.otherNetworks'
+      : 'search.otherResults.otherParatimes',
+  )
+
+  const totalNumberOfResults = allOtherResults.length
+
+  // openByDefault={scope.network === Network.mainnet && !hasNoResultsInWantedScope}
+  const openByDefault = false
+
+  const [open, setOpen] = useState(openByDefault)
+
+  const hasMainnetResults = allOtherResults.some(item => item.network === Network.mainnet)
+
+  const themes = getThemesForNetworks()
+  const networkNames = getNetworkNames(t)
+
+  const notificationTheme = hasMainnetResults ? themes[Network.mainnet] : themes[allOtherResults[0].network]
+
+  if (!allOtherResults.length) return null
+
+  const resultsInNetworks: Record<Network, number> = {} as any
+  const allNetworks = RouteUtils.getEnabledNetworks()
+  allNetworks.forEach(net => (resultsInNetworks[net] = 0))
+  allOtherResults.forEach(item => resultsInNetworks[item.network]++)
 
   if (!open) {
     return (
-      <NotificationBox theme={otherTheme} onClick={() => setOpen(true)}>
+      <NotificationBox theme={notificationTheme} onClick={() => setOpen(true)}>
         <ZoomIn />
         <span>
           <Trans
             t={t}
             i18nKey={
-              alsoHasLocalResults
+              alsoHasWantedResults
                 ? 'search.otherResults.clickToShowMore'
                 : 'search.otherResults.clickToShowThem'
             }
             values={{
-              countLabel: t(alsoHasLocalResults ? 'search.results.moreCount' : 'search.results.count', {
-                count: numberOfResults,
+              countLabel: t(alsoHasWantedResults ? 'search.results.moreCount' : 'search.results.count', {
+                count: totalNumberOfResults,
               }),
-              networkName,
+              location,
             }}
           />
         </span>
       </NotificationBox>
     )
   }
+
   return (
-    <Box
-      sx={{
-        marginTop: 50,
-        pt: 4,
-        px: isMobile ? 0 : '4%',
-        border: isMobile ? 'none' : `solid 15px ${otherTheme.palette.layout.border}`,
-        background: otherTheme.palette.background.default,
-      }}
-    >
-      <NotificationBox
-        sx={{
-          background: COLORS.white, // TODO should come from theme
-          color: COLORS.grayDark, // TODO should come from theme
-          border: `2px solid ${otherTheme.palette.layout.border}`,
-        }}
-        onClick={() => setOpen(false)}
-      >
-        <Warning />
-        {t('search.otherResults.clickToHide', { networkName })}
+    <>
+      <NotificationBox theme={notificationTheme} onClick={() => setOpen(false)}>
+        <ZoomOut />
+        <span>
+          <Trans i18nKey={'search.otherResults.clickToHide'} values={{ location }} />
+        </span>
       </NotificationBox>
-      <ResultsOnNetwork network={network} searchResults={searchResults} roseFiatValue={roseFiatValue} />
-    </Box>
+      {hasResultsOnDifferentParatimes && (
+        <ResultsFilteredThemed
+          title={t('search.otherResults.otherParatimesOnNetwork', {
+            network: networkNames[wantedScope.network],
+          })}
+          filter={item => item.network === wantedScope.network && item.layer !== wantedScope.layer}
+          networkForTheme={wantedScope.network}
+          searchResults={searchResults}
+          roseFiatValue={roseFiatValue}
+        />
+      )}
+      {allNetworks
+        .filter(net => net !== wantedScope.network && !!resultsInNetworks[net])
+        .map(net => (
+          <ResultsFilteredThemed
+            key={net}
+            networkForTheme={net}
+            title={networkNames[net]}
+            filter={item => item.network === net}
+            searchResults={searchResults}
+            roseFiatValue={roseFiatValue}
+          />
+        ))}
+    </>
   )
 }