Merge pull request #449 from oasisprotocol/csillag/cross-chain-search…

…-reloaded

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

src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx

@@ -0,0 +1,31 @@
+import { FC } 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 { SearchResultsList } from './SearchResultsList'
+import { AllTokenPrices } from '../../../coin-gecko/api'
+
+export const GlobalSearchResultsView: FC<{ searchResults: SearchResults; tokenPrices: AllTokenPrices }> = ({
+  searchResults,
+  tokenPrices,
+}) => {
+  const { t } = useTranslation()
+  return searchResults.length === 0 ? (
+    <NoResults />
+  ) : (
+    <>
+      {RouteUtils.getEnabledSearchScopes().map(scope => (
+        <SearchResultsList
+          key={getKeyForScope(scope)}
+          title={getNameForScope(t, scope)}
+          searchResults={searchResults.filter(getFilterForScope(scope))}
+          networkForTheme={scope.network}
+          tokenPrices={tokenPrices}
+        />
+      ))}
+    </>
+  )
+}

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

@@ -0,0 +1,37 @@
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { cardClasses } from '@mui/material/Card'
+import { boxClasses } from '../../utils/mui-helpers'
+
+export 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)',
+    [`&& .{cardClasses.root}`]: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      paddingLeft: 64,
+      paddingRight: 64,
+      background: theme.palette.layout.networkBubbleBackground,
+    },
+    [`&& .${cardClasses.root}. > .${boxClasses.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}`,
+    },
+  }
+})

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>
+    </>
   )
 }