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/ResultsFilteredThemed.tsx

@@ -1,56 +1,87 @@
 import { FC } from 'react'
-import { Network } from '../../../types/network'
 import { useTranslation } from 'react-i18next'
 import { ResultsGroupByType } from './ResultsGroupByType'
 import { BlockDetailView } from '../BlockDetailPage'
 import { RouteUtils } from '../../utils/route-utils'
 import { TransactionDetailView } from '../TransactionDetailPage'
 import { AccountDetailsView } from '../AccountDetailsPage'
-import { SearchQueries } from './hooks'
-import { getNetworkNames } from '../../../types/network'
-import { useTheme } from '@mui/material/styles'
+import { SearchResults } from './hooks'
+import { HasScope } from '../../../oasis-indexer/api'
 import { getThemesForNetworks } from '../../../styles/theme'
+import { Network } from '../../../types/network'
+import { SubPageCard } from '../../components/SubPageCard'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
+
+const ResultListFrame = styled(Box)(({ theme }) => {
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  return {
+    marginBottom: 20,
+    border: isMobile ? 'none' : `solid 15px ${theme.palette.layout.networkBubbleBorder}`,
+    background: theme.palette.layout.networkBubbleBackground,
+    borderRadius: 12,
+    boxShadow: '-20px 4px 40px rgba(34, 47, 63, 0.24)',
+    '&& .MuiCard-root': {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      paddingLeft: 64,
+      paddingRight: 64,
+      background: theme.palette.layout.networkBubbleBackground,
+    },
+    '&& .MuiCard-root > .MuiBox-root': {
+      background: theme.palette.layout.networkBubbleBorder,
+      borderRadius: 0,
+      marginLeft: -64,
+      marginTop: -32,
+      marginRight: -64,
+      paddingLeft: 64,
+      paddingRight: 64,
+      paddingBottom: 32,
+      paddingTop: 32,
+    },
+    '&& dt, && dd': {
+      boxShadow: `0px 1px 0px ${theme.palette.layout.descriptionListSeparator}`,
+    },
+  }
+})
+
+export type ResultFilter = (item: HasScope) => boolean
 
 /**
- * Component for selectively displaying a subset of search results that belongs to a specific network
+ * Component for selectively displaying a subset of search results that matches a filter
  *
  * It doesn't actually run a search query, but uses existing results.
  */
-export const ResultsOnNetwork: FC<{
-  network: Network
-  searchQueries: SearchQueries
+const ResultsFiltered: FC<{
+  searchResults: SearchResults
+  filter: ResultFilter
   roseFiatValue: number | undefined
-}> = ({ network, searchQueries, roseFiatValue }) => {
+}> = ({ searchResults, filter, roseFiatValue }) => {
   const { t } = useTranslation()
   return (
     <>
       <ResultsGroupByType
         title={t('search.results.blocks.title')}
-        results={searchQueries.blockHeight.results.filter(result => result.network === network)}
+        results={searchResults.blocks.filter(filter)}
         resultComponent={item => <BlockDetailView isLoading={false} block={item} showLayer={true} />}
-        link={item => RouteUtils.getBlockRoute(item, item.round)}
+        link={block => RouteUtils.getBlockRoute(block, block.round)}
         linkLabel={t('search.results.blocks.viewLink')}
       />
 
       <ResultsGroupByType
         title={t('search.results.transactions.title')}
-        results={searchQueries.txHash.results.filter(result => result.network === network)}
+        results={searchResults.transactions.filter(filter)}
         resultComponent={item => (
           <TransactionDetailView isLoading={false} transaction={item} showLayer={true} />
         )}
-        link={item => RouteUtils.getTransactionRoute(item, item.eth_hash || item.hash)}
+        link={tx => RouteUtils.getTransactionRoute(tx, tx.eth_hash || tx.hash)}
         linkLabel={t('search.results.transactions.viewLink')}
       />
 
       <ResultsGroupByType
         title={t('search.results.accounts.title')}
-        results={[
-          ...(searchQueries.oasisAccount.results ?? []).filter(result => result.network === network),
-          ...(searchQueries.evmBech32Account.results ?? []).filter(result => result.network === network),
-        ]}
+        results={searchResults.accounts.filter(filter)}
         resultComponent={item => (
           <AccountDetailsView
             isLoading={false}
@@ -59,54 +90,46 @@ export const ResultsOnNetwork: FC<{
             showLayer={true}
           />
         )}
-        link={item => RouteUtils.getAccountRoute(item, item.address_eth ?? item.address)}
+        link={acc => RouteUtils.getAccountRoute(acc, acc.address_eth ?? acc.address)}
         linkLabel={t('search.results.accounts.viewLink')}
       />
     </>
   )
 }
 
 /**
- * Component for selectively displaying a subset of search results that belongs to a specific network, with appropriate theming.
+ * Component for selectively displaying a subset of search results that matched a passed filter,
+ * with appropriate theming.
  *
  * It doesn't actually run a search query, but uses existing results.
- * Except the theming, it relies on ResultsOnNetwork.
  */
-export const ResultsOnNetworkThemed: FC<{
-  network: Network
-  searchQueries: SearchQueries
+export const ResultsFilteredThemed: FC<{
+  title: string
+  filter: ResultFilter
+  networkForTheme: Network
+  searchResults: SearchResults
   roseFiatValue: number | undefined
-}> = ({ network, searchQueries, roseFiatValue }) => {
+}> = ({ filter, title, networkForTheme, searchResults, roseFiatValue }) => {
   const { t } = useTranslation()
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const networkName = getNetworkNames(t)[network]
-  const otherTheme = getThemesForNetworks()[network]
 
-  const content = (
-    <ResultsOnNetwork network={network} searchQueries={searchQueries} roseFiatValue={roseFiatValue} />
-  )
+  const numberOfResults = searchResults.allResults.filter(filter).length
+
+  if (!numberOfResults) {
+    return null
+  }
+  const theme = getThemesForNetworks()[networkForTheme]
 
   return (
-    <>
-      <Typography variant="h1" color={theme.palette.layout.main}>
-        {t('search.sectionHeader', { scope: networkName })}
-      </Typography>
-      {network === Network.mainnet ? (
-        content
-      ) : (
-        <Box
-          sx={{
-            marginTop: 50,
-            pt: 4,
-            px: isMobile ? 0 : '4%',
-            border: isMobile ? 'none' : `solid 15px ${otherTheme.palette.layout.border}`,
-            background: otherTheme.palette.background.default,
-          }}
-        >
-          {content}
-        </Box>
-      )}
-    </>
+    <ResultListFrame theme={theme}>
+      <SubPageCard
+        title={title}
+        featured
+        subheader={t('search.results.count', {
+          count: numberOfResults,
+        })}
+      >
+        <ResultsFiltered filter={filter} searchResults={searchResults} roseFiatValue={roseFiatValue} />
+      </SubPageCard>
+    </ResultListFrame>
   )
 }

src/app/pages/SearchResultsPage/ResultsGroupByType.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
 import Button from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import { styled } from '@mui/material/styles'
-import { SubPageCard } from '../../components/SubPageCard'
+import Typography from '@mui/material/Typography'
 
 interface Props<T> {
   title: string
@@ -31,20 +30,23 @@ export const ViewResultButton = (() => {
  * It doesn't actually run a search query, but uses existing results.
  */
 export function ResultsGroupByType<T>({ title, results, resultComponent, link, linkLabel }: Props<T>) {
-  const { t } = useTranslation()
-
   if (!results || results.length <= 0) {
     return <></>
   }
 
   return (
-    <SubPageCard
-      featured
-      title={title}
-      subheader={t('search.results.count', {
-        count: results.length,
-      })}
-    >
+    <>
+      <Box sx={{ mb: 5 }}>
+        <Typography
+          variant="h4"
+          component="h4"
+          sx={{
+            display: 'inline',
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
       {results.map((item, i) => (
         <div key={i}>
           {resultComponent(item)}
@@ -56,6 +58,6 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
           {i < results.length - 1 && <Divider variant="card" />}
         </div>
       ))}
-    </SubPageCard>
+    </>
   )
 }