From 4d32c56eb9b32ccb3f7cc7679cb6198a7405cec3 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 13 Jan 2025 17:17:35 +0100 Subject: [PATCH] Support for more granular configuration for hiding layers Now we can hide different layers on different networks. --- src/app/components/LayerPicker/LayerMenu.tsx | 4 ++-- .../ConsensusDashboardPage/ParaTimesCard.tsx | 11 ++++++----- src/app/utils/route-utils.ts | 17 ++++++++++------- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/app/components/LayerPicker/LayerMenu.tsx b/src/app/components/LayerPicker/LayerMenu.tsx index 452f9232f4..dc1d75e800 100644 --- a/src/app/components/LayerPicker/LayerMenu.tsx +++ b/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,7 @@ export const LayerMenu: FC = ({ const [hoveredLayer, setHoveredLayer] = useState() 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, layer }) || layer === currentScope?.layer) .map(layer => ({ layer, enabled: RouteUtils.getAllLayersForNetwork(selectedNetwork || network).enabled.includes(layer), diff --git a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx index ebdcd54378..bce0cf48f9 100644 --- a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx +++ b/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 = ({ 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 diff --git a/src/app/utils/route-utils.ts b/src/app/utils/route-utils.ts index f2a7d9eba6..d7320044e4 100644 --- a/src/app/utils/route-utils.ts +++ b/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,15 @@ function invertSpecialScopePaths() { invertSpecialScopePaths() -export const hiddenLayers: Layer[] = [Layer.pontusxdev] +export const hiddenScopes: SearchScope[] = [ + { network: Network.testnet, 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 +205,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 +225,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, ) }