Merge pull request #447 from oasisprotocol/lw/search-scope

Replace network and layer filters with SearchScope

src/app/components/Account/AccountLink.tsx

@@ -5,20 +5,18 @@ import useMediaQuery from '@mui/material/useMediaQuery'
 import Link from '@mui/material/Link'
 import { TrimLinkLabel } from '../TrimLinkLabel'
 import { RouteUtils } from '../../utils/route-utils'
-import { Layer } from '../../../oasis-indexer/api'
 import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
-import { Network } from '../../../types/network'
+import { SearchScope } from '../../../types/searchScope'
 
-export const AccountLink: FC<{ network: Network; address: string; layer: Layer; alwaysTrim?: boolean }> = ({
-  network,
+export const AccountLink: FC<{ scope: SearchScope; address: string; alwaysTrim?: boolean }> = ({
+  scope,
   address,
-  layer,
   alwaysTrim,
 }) => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const to = RouteUtils.getAccountRoute(network, address, layer)
+  const to = RouteUtils.getAccountRoute(scope, address)
   return (
     <Typography variant="mono" component="span" sx={{ color: COLORS.brandDark, fontWeight: 700 }}>
       {alwaysTrim || isMobile ? (

src/app/components/Account/ShowMoreTokensLink.tsx

@@ -24,16 +24,14 @@ type ShowMoreTokensLinkProps = {
 export const ShowMoreTokensLink: FC<ShowMoreTokensLinkProps> = ({ account, tokens, pills }) => {
   const { t } = useTranslation()
   const erc20link = RouteUtils.getAccountTokensRoute(
-    account.network,
+    account,
     account.address_eth ?? account.address,
-    account.layer,
     'ERC20',
     accountTokenContainerId,
   )
   const erc721Link = RouteUtils.getAccountTokensRoute(
-    account.network,
+    account,
     account.address_eth ?? account.address,
-    account.layer,
     'ERC721',
     accountTokenContainerId,
   )

src/app/components/Account/TokenPills.tsx

@@ -43,9 +43,8 @@ type PillProps = {
 
 export const Pill: FC<PillProps> = ({ account, pill }) => {
   const tokenRoute = RouteUtils.getAccountTokensRoute(
-    account.network,
+    account,
     account.address_eth ?? account.address,
-    account.layer,
     pill.token_type!,
     pill.token_contract_addr,
   )

src/app/components/Account/index.tsx

@@ -60,9 +60,8 @@ export const Account: FC<AccountProps> = ({ account, isLoading, roseFiatValue, s
 
   const transactionsAnchor = account
     ? `${RouteUtils.getAccountRoute(
-        account.network,
+        account,
         account.address_eth ?? account.address,
-        account.layer,
       )}#${accountTransactionsContainerId}`
     : undefined
 
@@ -81,7 +80,7 @@ export const Account: FC<AccountProps> = ({ account, isLoading, roseFiatValue, s
             <JazzIcon diameter={isMobile ? 30 : 40} seed={addressToNumber(account.address)} />
           </StyledAvatarContainer>
           <dd>
-            <AccountLink network={account.network} address={address!} layer={account.layer} />
+            <AccountLink scope={account} address={address!} />
             <CopyToClipboard value={address!} />
           </dd>
 

src/app/components/AppendMobileSearch/index.tsx

@@ -3,7 +3,7 @@ import { styled, useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import { Search } from '../Search'
 import useMediaQuery from '@mui/material/useMediaQuery'
-import { Network } from '../../../types/network'
+import { SearchScope } from '../../../types/searchScope'
 
 interface AppendMobileSearchProps {
   action?: ReactNode
@@ -33,8 +33,8 @@ const SearchWrapper = styled(Box)(() => ({
   marginLeft: 'auto',
 }))
 
-export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> & { network?: Network }> = ({
-  network,
+export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> & { scope?: SearchScope }> = ({
+  scope,
   children,
   action,
 }) => {
@@ -49,7 +49,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
 
       {isMobile && (
         <SearchWrapper>
-          <Search network={network} variant="expandable" />
+          <Search scope={scope} variant="expandable" />
         </SearchWrapper>
       )}
     </Layout>

src/app/components/Blocks/BlockLink.tsx

@@ -3,30 +3,24 @@ import { Link as RouterLink } from 'react-router-dom'
 import Typography from '@mui/material/Typography'
 import Link from '@mui/material/Link'
 
-import { Layer } from '../../../oasis-indexer/api'
 import { RouteUtils } from '../../utils/route-utils'
 import { TrimLinkLabel } from '../TrimLinkLabel'
-import { Network } from '../../../types/network'
+import { SearchScope } from '../../../types/searchScope'
 
-export const BlockLink: FC<{ network: Network; layer: Layer; height: number }> = ({
-  network,
-  layer,
-  height,
-}) => (
+export const BlockLink: FC<{ scope: SearchScope; height: number }> = ({ scope, height }) => (
   <Typography variant="mono">
-    <Link component={RouterLink} to={RouteUtils.getBlockRoute(network, height, layer)}>
+    <Link component={RouterLink} to={RouteUtils.getBlockRoute(scope, height)}>
       {height.toLocaleString()}
     </Link>
   </Typography>
 )
 
-export const BlockHashLink: FC<{ network: Network; layer: Layer; hash: string; height: number }> = ({
-  network,
-  layer,
+export const BlockHashLink: FC<{ scope: SearchScope; hash: string; height: number }> = ({
+  scope,
   hash,
   height,
 }) => (
   <Typography variant="mono">
-    <TrimLinkLabel label={hash} to={RouteUtils.getBlockRoute(network, height, layer)} />
+    <TrimLinkLabel label={hash} to={RouteUtils.getBlockRoute(scope, height)} />
   </Typography>
 )

src/app/components/Blocks/index.tsx

@@ -54,7 +54,7 @@ export const Blocks = (props: BlocksProps) => {
         },
         {
           align: TableCellAlign.Right,
-          content: <BlockLink network={block.network} layer={block.layer} height={block.round} />,
+          content: <BlockLink scope={block} height={block.round} />,
           key: 'block',
         },
         {
@@ -72,14 +72,7 @@ export const Blocks = (props: BlocksProps) => {
         ...(verbose
           ? [
               {
-                content: (
-                  <BlockHashLink
-                    network={block.network}
-                    layer={block.layer}
-                    hash={block.hash}
-                    height={block.round}
-                  />
-                ),
+                content: <BlockHashLink scope={block} hash={block.hash} height={block.round} />,
                 key: 'hash',
               },
             ]

src/app/components/PageLayout/Footer.tsx

@@ -6,7 +6,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'
 import { styled, useTheme } from '@mui/material/styles'
 import { useConstant } from '../../hooks/useConstant'
 import { AppendMobileSearch } from '../AppendMobileSearch'
-import { Network } from '../../../types/network'
+import { SearchScope } from '../../../types/searchScope'
 
 const FooterBox = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -20,11 +20,11 @@ const FooterBox = styled(Box)(({ theme }) => ({
 }))
 
 interface FooterProps {
-  network?: Network
+  scope?: SearchScope
   mobileSearchAction?: ReactNode
 }
 
-export const Footer: FC<FooterProps> = ({ network, mobileSearchAction }) => {
+export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
@@ -35,7 +35,7 @@ export const Footer: FC<FooterProps> = ({ network, mobileSearchAction }) => {
     <footer>
       <FooterBox>
         {isTablet ? (
-          <AppendMobileSearch network={network} action={isMobile && mobileSearchAction}>
+          <AppendMobileSearch scope={scope} action={isMobile && mobileSearchAction}>
             <Typography variant="footer">
               {isTablet ? t('footer.mobileTitle') : t('footer.title')} | {currentYear}
             </Typography>

src/app/components/PageLayout/Header.tsx

@@ -4,24 +4,18 @@ import useMediaQuery from '@mui/material/useMediaQuery'
 import { useTheme } from '@mui/material/styles'
 import { Logotype } from './Logotype'
 import { Search } from '../Search'
-import { useLayerParam } from '../../hooks/useLayerParam'
-import { RouteUtils } from '../../utils/route-utils'
-import { useNetworkParam } from '../../hooks/useNetworkParam'
 import { NetworkSelector } from './NetworkSelector'
 import Box from '@mui/material/Box'
-import { Network } from '../../../types/network'
+import { useScopeParam } from '../../hooks/useScopeParam'
 
 export const Header: FC = () => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const isDesktop = useMediaQuery(theme.breakpoints.up('md'))
-  const layer = useLayerParam()
-  const network = useNetworkParam()
+  const scope = useScopeParam()
 
-  const isValidNetwork = RouteUtils.getEnabledNetworks().includes(network as any)
-
-  if (!layer) {
-    // On search page there's no NetworkHeader
+  if (!scope) {
+    // On home-page and global search page there's no NetworkHeader
     return (
       <header>
         <Grid
@@ -33,7 +27,7 @@ export const Header: FC = () => {
             <Logotype />
           </Grid>
           <Grid xs={8} sm={6} md={7} lg={8}>
-            <Search network={network} variant={isDesktop ? 'button' : 'icon'} />
+            <Search variant={isDesktop ? 'button' : 'icon'} />
           </Grid>
         </Grid>
       </header>
@@ -56,13 +50,13 @@ export const Header: FC = () => {
           <Logotype />
         </Grid>
         <Grid md={6} xs={8}>
-          {isValidNetwork && <NetworkSelector layer={layer} network={network as Network} />}
+          <NetworkSelector layer={scope.layer} network={scope.network} />
         </Grid>
         <Grid md={3} xs={0} />
       </Grid>
       {!isMobile && (
         <Box sx={{ mb: 6, px: isMobile ? 0 : '4%' }}>
-          <Search network={network} variant="icon" />
+          <Search scope={scope} variant="icon" />
         </Box>
       )}
     </header>

src/app/components/PageLayout/index.tsx

@@ -5,7 +5,7 @@ import Box from '@mui/material/Box'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { styled, useTheme } from '@mui/material/styles'
 import { BuildPreviewBanner } from '../BuildPreviewBanner'
-import { useNetworkParam } from '../../hooks/useNetworkParam'
+import { useScopeParam } from '../../hooks/useScopeParam'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -18,7 +18,7 @@ export const StyledMain = styled('main')({
 export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, mobileFooterAction }) => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const network = useNetworkParam()
+  const scope = useScopeParam()
 
   return (
     <>
@@ -36,7 +36,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
           }}
         >
           <StyledMain>{children}</StyledMain>
-          <Footer network={network} mobileSearchAction={mobileFooterAction} />
+          <Footer scope={scope} mobileSearchAction={mobileFooterAction} />
         </Box>
       </Box>
     </>

src/app/components/Search/SearchSuggestionsLinks.tsx

@@ -5,13 +5,13 @@ import { Link as RouterLink } from 'react-router-dom'
 import Link from '@mui/material/Link'
 import { RouteUtils } from '../../utils/route-utils'
 import { OptionalBreak } from '../OptionalBreak'
-import { Network } from '../../../types/network'
+import { SearchScope } from '../../../types/searchScope'
 
 interface Props {
-  network?: Network
+  scope?: SearchScope
 }
 
-export const SearchSuggestionsLinks: FC<Props> = ({ network }) => {
+export const SearchSuggestionsLinks: FC<Props> = ({ scope }) => {
   const { t } = useTranslation()
   const { suggestedBlock, suggestedTransaction, suggestedAccount } = searchSuggestionTerms
 
@@ -22,15 +22,13 @@ export const SearchSuggestionsLinks: FC<Props> = ({ network }) => {
       components={{
         OptionalBreak: <OptionalBreak />,
         BlockIcon: <></>,
-        BlockLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(network, suggestedBlock)} />,
+        BlockLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedBlock)} />,
         TransactionIcon: <></>,
         TransactionLink: (
-          <Link component={RouterLink} to={RouteUtils.getSearchRoute(network, suggestedTransaction)} />
+          <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTransaction)} />
         ),
         AccountIcon: <></>,
-        AccountLink: (
-          <Link component={RouterLink} to={RouteUtils.getSearchRoute(network, suggestedAccount)} />
-        ),
+        AccountLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedAccount)} />,
       }}
     />
   )

src/app/components/Search/index.tsx

@@ -12,9 +12,9 @@ import useMediaQuery from '@mui/material/useMediaQuery'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
 import IconButton from '@mui/material/IconButton'
 import { SearchSuggestionsButtons } from './SearchSuggestionsButtons'
-import { Network } from '../../../types/network'
 import { formHelperTextClasses } from '@mui/material/FormHelperText'
 import { outlinedInputClasses } from '@mui/material/OutlinedInput'
+import { SearchScope } from '../../../types/searchScope'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -86,13 +86,13 @@ SearchButton.defaultProps = {
 }
 
 export interface SearchProps {
-  network?: Network
+  scope?: SearchScope
   variant: SearchVariant
   disabled?: boolean
   onFocusChange?: (hasFocus: boolean) => void
 }
 
-const SearchCmp: FC<SearchProps> = ({ network, variant, disabled, onFocusChange: onFocusChangeProp }) => {
+const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: onFocusChangeProp }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const theme = useTheme()
@@ -113,7 +113,7 @@ const SearchCmp: FC<SearchProps> = ({ network, variant, disabled, onFocusChange:
 
   const onFormSubmit = (e?: FormEvent) => {
     e?.preventDefault()
-    navigate(RouteUtils.getSearchRoute(network, value))
+    navigate(RouteUtils.getSearchRoute(scope, value))
   }
 
   const onClearValue = () => {