Merge pull request #1686 from oasisprotocol/csillag/more-granular-config

Support for more granular configuration for hiding layers

.changelog/1686.trivial.md

@@ -0,0 +1 @@
+Support for more granular configuration for hiding layers

src/app/components/LayerPicker/LayerMenu.tsx

@@ -9,7 +9,7 @@ import Tooltip from '@mui/material/Tooltip'
 import { COLORS } from '../../../styles/theme/colors'
 import { Layer } from '../../../oasis-nexus/api'
 import { getLayerLabels } from '../../utils/content'
-import { isLayerHidden, RouteUtils } from '../../utils/route-utils'
+import { isScopeHidden, RouteUtils } from '../../utils/route-utils'
 import { Network } from '../../../types/network'
 import { orderByLayer } from '../../../types/layers'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -113,7 +113,11 @@ export const LayerMenu: FC<LayerMenuProps> = ({
   const [hoveredLayer, setHoveredLayer] = useState<undefined | Layer>()
   const options = Object.values(Layer)
     // Don't show hidden layers, unless we are already viewing them.
-    .filter(layer => !isLayerHidden(layer) || layer === currentScope?.layer)
+    .filter(
+      layer =>
+        !isScopeHidden({ network: selectedNetwork, layer }) ||
+        (layer === currentScope?.layer && selectedNetwork === currentScope?.network),
+    )
     .map(layer => ({
       layer,
       enabled: RouteUtils.getAllLayersForNetwork(selectedNetwork || network).enabled.includes(layer),

src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx

@@ -8,12 +8,13 @@ import Grid from '@mui/material/Unstable_Grid2'
 import { styled } from '@mui/material/styles'
 import { Layer, Runtime } from '../../../oasis-nexus/api'
 import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
-import { isNotOnHiddenLayer, RouteUtils } from '../../utils/route-utils'
+import { isNotInHiddenScope, RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { EnabledRuntimePreview, DisabledRuntimePreview } from './RuntimePreview'
+import { Network } from '../../../types/network'
 
-function shouldIncludeLayer(layer: Layer) {
-  return layer !== Layer.consensus && isNotOnHiddenLayer({ layer })
+function shouldIncludeLayer(network: Network, layer: Layer) {
+  return layer !== Layer.consensus && isNotInHiddenScope({ network, layer })
 }
 
 const StyledInnerGrid = styled(Grid)(({ theme }) => ({
@@ -40,8 +41,8 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
   const { t } = useTranslation()
   const { network } = scope
   const { enabled, disabled } = RouteUtils.getAllLayersForNetwork(network)
-  const enabledRuntimes = enabled.filter(shouldIncludeLayer) as Runtime[]
-  const disabledRuntimes = disabled.filter(shouldIncludeLayer) as Runtime[]
+  const enabledRuntimes = enabled.filter(layer => shouldIncludeLayer(network, layer)) as Runtime[]
+  const disabledRuntimes = disabled.filter(layer => shouldIncludeLayer(network, layer)) as Runtime[]
   const runtimesNumber = enabledRuntimes.length + disabledRuntimes.length
   const [firstEnabledRuntime, ...restEnabledRuntimes] = enabledRuntimes
   const spaceForSecondaryParaTimes = enabledRuntimes.length > 2

src/app/utils/route-utils.ts

@@ -2,12 +2,11 @@ import { LoaderFunctionArgs } from 'react-router-dom'
 import { isValidProposalId, isValidTxHash, isValidTxOasisHash } from './helpers'
 import { isValidBlockHeight, isValidOasisAddress, isValidEthAddress } from './helpers'
 import { AppError, AppErrors } from '../../types/errors'
-import { EvmTokenType, Layer } from '../../oasis-nexus/api'
+import { EvmTokenType, HasScope, Layer } from '../../oasis-nexus/api'
 import { Network } from '../../types/network'
 import { SearchScope } from '../../types/searchScope'
 import { specialScopePaths } from '../../config'
 import { getSearchTermFromRequest } from '../components/Search/search-utils'
-import type { HasLayer } from '../../types/layers'
 import { toChecksumAddress } from '@ethereumjs/util'
 import { orderByLayer } from '../../types/layers'
 
@@ -67,11 +66,16 @@ function invertSpecialScopePaths() {
 
 invertSpecialScopePaths()
 
-export const hiddenLayers: Layer[] = [Layer.pontusxdev]
+export const hiddenScopes: SearchScope[] = [
+  { network: Network.testnet, layer: Layer.pontusxdev },
+  { network: Network.mainnet, layer: Layer.pontusxdev },
+  // { network: Network.mainnet, layer: Layer.sapphire }, // This is only for testing
+]
 
-export const isLayerHidden = (layer: Layer): boolean => hiddenLayers.includes(layer)
+export const isScopeHidden = (scope: SearchScope): boolean =>
+  !!hiddenScopes.find(s => s.network === scope.network && s.layer === scope.layer)
 
-export const isNotOnHiddenLayer = (item: HasLayer) => !isLayerHidden(item.layer)
+export const isNotInHiddenScope = (item: HasScope) => !isScopeHidden(item)
 
 export abstract class RouteUtils {
   private static ENABLED_LAYERS_FOR_NETWORK = {
@@ -202,7 +206,7 @@ export abstract class RouteUtils {
 
   static getVisibleLayersForNetwork(network: Network, currentScope: SearchScope | undefined): Layer[] {
     return this.getAllLayersForNetwork(network).enabled.filter(
-      layer => !isLayerHidden(layer) || layer === currentScope?.layer,
+      layer => !isScopeHidden({ network, layer }) || layer === currentScope?.layer,
     )
   }
 
@@ -222,7 +226,7 @@ export abstract class RouteUtils {
 
   static getVisibleScopes(currentScope: SearchScope | undefined): SearchScope[] {
     return RouteUtils.getEnabledScopes().filter(
-      ({ network, layer }) => !isLayerHidden(layer) || layer === currentScope?.layer,
+      scope => !isScopeHidden(scope) || scope.layer === currentScope?.layer,
     )
   }