Get rid of Network constants

Author: csillag

src/app/components/Account/__tests__/ShowMoreTokensLink.test.tsx

@@ -1,14 +1,13 @@
 import { describe, expect, it } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../utils/__tests__/renderWithProviders.test'
-import { ShowMoreTokensLink } from './../ShowMoreTokensLink'
-import { Layer, EvmTokenType, RuntimeAccount, Token } from '../../../../oasis-nexus/api'
-import { Network } from '../../../../types/network'
+import { ShowMoreTokensLink } from '../ShowMoreTokensLink'
+import { EvmTokenType, RuntimeAccount, Token } from '../../../../oasis-nexus/api'
 
 const mockedAccount = {
   address: 'oasis1qrvha284gfztn7wwq6z50c86ceu28jp7csqhpx9t',
   layer: 'emerald',
-  network: Network.mainnet,
+  network: 'mainnet',
 } as RuntimeAccount
 
 const mockedToken1: Token = {

src/app/components/AnalyticsConsent/index.tsx

@@ -7,7 +7,6 @@ import Link from '@mui/material/Link'
 import { Trans, useTranslation } from 'react-i18next'
 import * as matomo from './initializeMatomo'
 import { ThemeByScope } from '../ThemeByScope'
-import { Network } from '../../../types/network'
 import { AnalyticsIsBlocked } from './AnalyticsIsBlocked'
 import { AnalyticsDialogLayout } from './AnalyticsDialogLayout'
 
@@ -66,7 +65,7 @@ export const AnalyticsConsentProvider = (props: { children: React.ReactNode }) =
     >
       {props.children}
       {/* Theme is needed because AnalyticsConsentProvider is outside network-themed routes */}
-      <ThemeByScope isRootTheme={false} network={Network.mainnet}>
+      <ThemeByScope isRootTheme={false} network={'mainnet'}>
         <AnalyticsConsentView
           isOpen={hasAccepted === 'not-chosen'}
           onAccept={async () => {

src/app/components/ContractVerificationIcon/AbiPlaygroundLink.tsx

@@ -14,15 +14,15 @@ export const AbiPlaygroundLink: FC<{
   const { t } = useTranslation()
 
   const scopeToPlaygroundURL: Record<Network, Partial<Record<Layer, string>>> = {
-    [Network.mainnet]: {
+    mainnet: {
       emerald: `${externalLinks.dapps.abiPlayground}?network=42262&contractAddress=${address_eth}`,
       sapphire: `${externalLinks.dapps.abiPlayground}?network=23294&contractAddress=${address_eth}`,
     },
-    [Network.testnet]: {
+    testnet: {
       emerald: `${externalLinks.dapps.abiPlayground}?network=42261&contractAddress=${address_eth}`,
       sapphire: `${externalLinks.dapps.abiPlayground}?network=23295&contractAddress=${address_eth}`,
     },
-    [Network.localnet]: {
+    localnet: {
       emerald: `${externalLinks.dapps.abiPlayground}?network=42260&contractAddress=${address_eth}`,
       sapphire: `${externalLinks.dapps.abiPlayground}?network=23293&contractAddress=${address_eth}`,
     },

src/app/components/LayerPicker/LayerDetails.tsx

@@ -34,7 +34,7 @@ type LayerDetailsContent = {
 type NetworkDetails = Partial<Record<Layer, LayerDetailsContent>>
 type Details = Record<Network, NetworkDetails>
 const getDetails = (t: TFunction): Details => ({
-  [Network.mainnet]: {
+  mainnet: {
     emerald: {
       description: t('layerPicker.mainnet.emerald'),
       rpcHttp: 'https://emerald.oasis.io',
@@ -52,7 +52,7 @@ const getDetails = (t: TFunction): Details => ({
       docs: docs.sapphire,
     },
   },
-  [Network.testnet]: {
+  testnet: {
     emerald: {
       description: t('layerPicker.testnet.emerald'),
       rpcHttp: 'https://testnet.emerald.oasis.io',
@@ -86,7 +86,7 @@ const getDetails = (t: TFunction): Details => ({
       docs: docs.pontusx1,
     },
   },
-  [Network.localnet]: {
+  localnet: {
     sapphire: {
       chainHexId: '0x5afd',
       chainDecimalId: '23293',

src/app/components/OfflineBanner/index.tsx

@@ -10,7 +10,7 @@ import { StickyAlert } from '../StickyAlert'
 export const NetworkOfflineBanner: FC<{ wantedNetwork?: Network }> = ({ wantedNetwork }) => {
   const scope = useScopeParam()
   const { t } = useTranslation()
-  const targetNetwork = wantedNetwork || scope?.network || Network.mainnet
+  const targetNetwork = wantedNetwork ?? scope?.network ?? 'mainnet'
   const isNetworkReachable = useIsApiReachable(targetNetwork)
   const networkNames = getNetworkNames(t)
   const target = networkNames[targetNetwork]

src/app/components/PageLayout/NetworkSelector.tsx

@@ -88,7 +88,7 @@ const NetworkSelectorView: FC<NetworkSelectorViewProps> = ({ isOutOfDate, layer,
       {!isMobile && (
         <NetworkButton isOutOfDate={isOutOfDate} layer={layer} network={network} onClick={handleDrawerOpen} />
       )}
-      {!fixedNetwork && !fixedLayer && !isTablet && network !== Network.mainnet && (
+      {!fixedNetwork && !fixedLayer && !isTablet && network !== 'mainnet' && (
         <StyledBox>
           <Typography
             component="span"

src/app/components/PageLayout/index.tsx

@@ -9,7 +9,6 @@ import { useScopeParam } from '../../hooks/useScopeParam'
 import { NetworkOfflineBanner, RuntimeOfflineBanner, ConsensusOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiReachable } from '../OfflineBanner/hook'
-import { Network } from '../../../types/network'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -23,7 +22,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const theme = useTheme()
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
-  const isApiReachable = useIsApiReachable(scope?.network || Network.mainnet).reachable
+  const isApiReachable = useIsApiReachable(scope?.network ?? 'mainnet').reachable
 
   return (
     <>

src/app/components/Search/SearchSuggestionsButtons.tsx

@@ -11,7 +11,6 @@ import TokenIcon from '@mui/icons-material/Token'
 import { searchSuggestionTerms } from './search-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
-import { Network } from '../../../types/network'
 
 const StyledPlainTextButton = styled(Button)({
   fontSize: 'inherit',
@@ -39,7 +38,7 @@ export const SearchSuggestionsButtons: FC<Props> = ({ scope, onClickSuggestion }
   const { t } = useTranslation()
   const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
-    searchSuggestionTerms[Network.mainnet]['sapphire']!
+    searchSuggestionTerms.mainnet.sapphire!
   const defaultComponents = {
     OptionalBreak: <OptionalBreak />,
     BlockIcon: <WidgetsIcon sx={{ fontSize: '18px' }} />,

src/app/components/Search/SearchSuggestionsLinksForNoResults.tsx

@@ -12,7 +12,6 @@ import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { SxProps } from '@mui/material/styles'
-import { Network } from '../../../types/network'
 
 interface Props {
   scope: SearchScope | undefined
@@ -31,7 +30,7 @@ export const SearchSuggestionsLinksForNoResults: FC<Props> = ({ scope }) => {
   const { isMobile } = useScreenSize()
   const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
-    searchSuggestionTerms[Network.mainnet].sapphire!
+    searchSuggestionTerms.mainnet.sapphire!
   const defaultComponents = {
     OptionalBreak: <OptionalBreak />,
     BlockIcon: isMobile ? empty : <WidgetsIcon sx={iconSxProps} />,

src/app/components/ThemeByScope/index.tsx

@@ -19,10 +19,7 @@ export const ThemeByScope: FC<{
 )
 
 export const withDefaultTheme = (node: ReactNode, alwaysMainnet = false) => (
-  <ThemeByScope
-    isRootTheme={true}
-    network={alwaysMainnet ? Network.mainnet : (fixedNetwork ?? Network.mainnet)}
-  >
+  <ThemeByScope isRootTheme={true} network={alwaysMainnet ? 'mainnet' : (fixedNetwork ?? 'mainnet')}>
     {node}
   </ThemeByScope>
 )