Simplify code, eliminate the GlobalNetwork constant

.storybook/preview.tsx

@@ -1,20 +1,11 @@
 import React from 'react'
 import { Preview } from '@storybook/react'
-import { defaultTheme } from '../src/styles/theme'
-import { ThemeProvider } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import '../src/locales/i18n'
+import { withDefaultTheme } from '../src/app/components/NetworkThemeBubble'
 
 const preview: Preview = {
-  decorators: [
-    Story => (
-      <ThemeProvider theme={defaultTheme}>
-        <CssBaseline />
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
+  decorators: [Story => withDefaultTheme(<Story />)],
   parameters: {
     controls: {
       matchers: {

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 { NetworkOrGlobal } from '../../../types/network'
+import { Network } from '../../../types/network'
 
 interface AppendMobileSearchProps {
   action?: ReactNode
@@ -33,9 +33,11 @@ const SearchWrapper = styled(Box)(() => ({
   marginLeft: 'auto',
 }))
 
-export const AppendMobileSearch: FC<
-  PropsWithChildren<AppendMobileSearchProps> & { network: NetworkOrGlobal }
-> = ({ network, children, action }) => {
+export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> & { network?: Network }> = ({
+  network,
+  children,
+  action,
+}) => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 

src/app/components/NetworkThemeBubble/index.tsx

@@ -1,9 +1,19 @@
-import React, { FC } from 'react'
-import { NetworkOrGlobal } from '../../../types/network'
+import React, { FC, ReactNode } from 'react'
+import { Network } from '../../../types/network'
 import { ThemeProvider } from '@mui/material/styles'
 import { getThemesForNetworks } from '../../../styles/theme'
+import CssBaseline from '@mui/material/CssBaseline'
 
-export const NetworkThemeBubble: FC<{ network: NetworkOrGlobal; children: React.ReactNode }> = ({
+export const NetworkThemeBubble: FC<{ network: Network; children: React.ReactNode }> = ({
   network,
   children,
-}) => <ThemeProvider theme={getThemesForNetworks()[network]}>{children}</ThemeProvider>
+}) => (
+  <ThemeProvider theme={getThemesForNetworks()[network]}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+)
+
+export const withDefaultTheme = (node: ReactNode) => (
+  <NetworkThemeBubble network={Network.mainnet} children={node} />
+)

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 { NetworkOrGlobal } from '../../../types/network'
+import { Network } from '../../../types/network'
 
 const FooterBox = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -20,7 +20,7 @@ const FooterBox = styled(Box)(({ theme }) => ({
 }))
 
 interface FooterProps {
-  network: NetworkOrGlobal
+  network?: Network
   mobileSearchAction?: ReactNode
 }
 

src/app/components/Search/SearchSuggestionsLinks.tsx

@@ -5,10 +5,10 @@ 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 { NetworkOrGlobal } from '../../../types/network'
+import { Network } from '../../../types/network'
 
 interface Props {
-  network: NetworkOrGlobal
+  network?: Network
 }
 
 export const SearchSuggestionsLinks: FC<Props> = ({ network }) => {

src/app/components/Search/index.tsx

@@ -12,7 +12,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
 import IconButton from '@mui/material/IconButton'
 import { SearchSuggestionsButtons } from './SearchSuggestionsButtons'
-import { NetworkOrGlobal } from '../../../types/network'
+import { Network } from '../../../types/network'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -84,7 +84,7 @@ SearchButton.defaultProps = {
 }
 
 export interface SearchProps {
-  network: NetworkOrGlobal
+  network?: Network
   variant: SearchVariant
   disabled?: boolean
   onFocusChange?: (hasFocus: boolean) => void

src/app/components/Search/search-utils.ts

@@ -7,7 +7,7 @@ import {
   isValidEthAddress,
   getEvmBech32Address,
 } from '../../utils/helpers'
-import { GlobalNetwork, Network } from '../../../types/network'
+import { Network } from '../../../types/network'
 import { RouteUtils } from '../../utils/route-utils'
 import { AppError, AppErrors } from '../../../types/errors'
 
@@ -65,10 +65,7 @@ export function isSearchValid(searchTerm: string) {
 
 export const searchParamLoader = async ({ request, params }: LoaderFunctionArgs) => {
   const { network } = params
-  if (
-    !network ||
-    (network !== GlobalNetwork && !RouteUtils.getEnabledNetworks().includes(network as Network))
-  ) {
+  if (!!network && !RouteUtils.getEnabledNetworks().includes(network as Network)) {
     throw new AppError(AppErrors.InvalidUrl)
   }
 

src/app/hooks/useNetworkParam.ts

@@ -1,20 +1,19 @@
 import { useParams } from 'react-router-dom'
-import { Network, NetworkOrGlobal } from '../../types/network'
+import { Network } from '../../types/network'
 import { RouteUtils } from '../utils/route-utils'
 import { AppError, AppErrors } from '../../types/errors'
 
-export const useNetworkParam = (): NetworkOrGlobal => {
+export const useNetworkParam = (): Network | undefined => {
   const { network } = useParams()
-
-  return network as NetworkOrGlobal
+  return network as Network | undefined
 }
 
 /**
  * Use this in situations where we can be sure that the network has already been checked
  */
 export const useSafeNetworkParam = (): Network => {
   const network = useNetworkParam()
-  if (!RouteUtils.getEnabledNetworks().includes(network as any)) {
+  if (!network || !RouteUtils.getEnabledNetworks().includes(network as any)) {
     throw new AppError(AppErrors.UnsupportedNetwork)
   }
   return network as Network

src/app/pages/HomePage/index.tsx

@@ -15,9 +15,6 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import { useTranslation } from 'react-i18next'
 import { ParaTimeSelectorStep } from './Graph/types'
 import { BuildPreviewBanner } from '../../components/BuildPreviewBanner'
-import { GlobalNetwork } from '../../../types/network'
-import { defaultTheme } from '../../../styles/theme'
-import CssBaseline from '@mui/material/CssBaseline'
 
 export const zIndexHomePage = {
   paraTimeSelector: 1,
@@ -135,12 +132,7 @@ export const HomePage: FC = () => {
           </LogotypeBox>
           <SearchInputContainer>
             <SearchInputBox>
-              <Search
-                network={GlobalNetwork}
-                disabled={isApiOffline}
-                variant={searchVariant}
-                onFocusChange={onFocusChange}
-              />
+              <Search disabled={isApiOffline} variant={searchVariant} onFocusChange={onFocusChange} />
             </SearchInputBox>
             {isApiOffline && (
               <Box sx={{ display: 'flex', justifyContent: 'center' }}>
@@ -159,16 +151,9 @@ export const HomePage: FC = () => {
               <InfoOutlinedIcon fontSize="medium" sx={{ color: 'white' }} />
             </IconButton>
           )}
-          {!isMobile && <Footer network={GlobalNetwork} />}
+          {!isMobile && <Footer />}
         </FooterStyled>
       </HomepageLayout>
     </>
   )
 }
-
-export const ThemedHomePage: FC = () => (
-  <ThemeProvider theme={defaultTheme}>
-    <CssBaseline />
-    <HomePage />
-  </ThemeProvider>
-)

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, GlobalNetwork, NetworkOrGlobal } from '../../../types/network'
+import { getNetworkNames, Network } from '../../../types/network'
 
-export const NoResults: FC<{ network: NetworkOrGlobal }> = ({ network }) => {
+export const NoResults: FC<{ network?: Network }> = ({ network }) => {
   const { t } = useTranslation()
   const theme = useTheme()
-  const title =
-    network === GlobalNetwork
-      ? t('search.noResults.header')
-      : t('search.noResults.networkHeader', { network: getNetworkNames(t)[network] })
+  const title = !network
+    ? t('search.noResults.header')
+    : t('search.noResults.networkHeader', { network: getNetworkNames(t)[network] })
 
   return (
     <EmptyState

src/app/pages/SearchResultsPage/ResultsOnForeignNetwork.tsx

@@ -4,7 +4,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import { styled, useTheme } from '@mui/material/styles'
 import { getThemesForNetworks } from '../../../styles/theme'
 import useMediaQuery from '@mui/material/useMediaQuery'
-import { NetworkThemeBubble } from '../../components/NetworkThemeBubble'
 import Box from '@mui/material/Box'
 import { SearchResultsList } from './SearchResultsList'
 import { SearchQueries } from './hooks'
@@ -55,50 +54,46 @@ export const ResultsOnForeignNetwork: FC<{
 
   if (!open) {
     return (
-      <NetworkThemeBubble network={network}>
-        <NotificationBox className={'foreignNote'} onClick={() => setOpen(true)}>
-          <ZoomIn />
-          {/*{countLabel}*/}
-          <Trans
-            t={t}
-            i18nKey={
-              hasLocalMatches ? 'search.otherResults.clickToShowMore' : 'search.otherResults.clickToShowThem'
-            }
-            values={{
-              countLabel: t(hasLocalMatches ? 'search.results.moreCount' : 'search.results.count', {
-                count: matches,
-              }),
-              networkName,
-            }}
-          />
-        </NotificationBox>
-      </NetworkThemeBubble>
+      <NotificationBox theme={otherTheme} className={'foreignNote'} onClick={() => setOpen(true)}>
+        <ZoomIn />
+        {/*{countLabel}*/}
+        <Trans
+          t={t}
+          i18nKey={
+            hasLocalMatches ? 'search.otherResults.clickToShowMore' : 'search.otherResults.clickToShowThem'
+          }
+          values={{
+            countLabel: t(hasLocalMatches ? 'search.results.moreCount' : 'search.results.count', {
+              count: matches,
+            }),
+            networkName,
+          }}
+        />
+      </NotificationBox>
     )
   }
   return (
-    <NetworkThemeBubble network={network}>
-      <Box
+    <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={{
-          marginTop: 50,
-          pt: 4,
-          px: isMobile ? 0 : '4%',
-          border: isMobile ? 'none' : `solid 15px ${otherTheme.palette.layout.border}`,
-          background: otherTheme.palette.background.default,
+          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)}
       >
-        <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>
-        <SearchResultsList network={network} searchQueries={searchQueries} roseFiatValue={roseFiatValue} />
-      </Box>
-    </NetworkThemeBubble>
+        <Warning />
+        {t('search.otherResults.clickToHide', { networkName })}
+      </NotificationBox>
+      <SearchResultsList network={network} searchQueries={searchQueries} roseFiatValue={roseFiatValue} />
+    </Box>
   )
 }

src/app/pages/SearchResultsPage/ResultsOnNetwork.tsx

@@ -33,19 +33,19 @@ export const ResultsOnNetwork: FC<{
       {network === Network.mainnet ? (
         content
       ) : (
-        <NetworkThemeBubble network={network}>
-          <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>
-        </NetworkThemeBubble>
+        // <NetworkThemeBubble network={network}>
+        <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>
+        // </NetworkThemeBubble>
       )}
     </>
   )

src/app/pages/SearchResultsPage/index.tsx

@@ -9,7 +9,7 @@ import { TextSkeleton } from '../../components/Skeleton'
 import { useRedirectIfSingleResult } from './useRedirectIfSingleResult'
 import { NoResults } from './NoResults'
 import { RouteUtils } from '../../utils/route-utils'
-import { GlobalNetwork, Network, NetworkOrGlobal } from '../../../types/network'
+import { Network } from '../../../types/network'
 import { useNetworkParam } from '../../hooks/useNetworkParam'
 import { SearchResultsList } from './SearchResultsList'
 import {
@@ -46,7 +46,7 @@ export const SearchResultsPage: FC = () => {
 }
 
 export const SearchResultsView: FC<{
-  wantedNetwork: NetworkOrGlobal
+  wantedNetwork?: Network
   searchQueries: SearchQueries
   roseFiatValue: number | undefined
 }> = ({ wantedNetwork, searchQueries, roseFiatValue }) => {
@@ -64,7 +64,7 @@ export const SearchResultsView: FC<{
 
   const matchingNetworkList = allNetworks.filter(net => !!matchesInNetworks[net])
 
-  const isGlobal = wantedNetwork === GlobalNetwork
+  const isGlobal = !wantedNetwork
 
   const hasNoResultsWhatsoever = allResults.length === 0
   const hasNoResultsOnWantedNetwork = !isGlobal && matchesInNetworks[wantedNetwork] === 0