Merge pull request #1159 from oasisprotocol/lw/simplify-scopes

Simplify scopes and recover from invalid URLs

.changelog/1159.internal.md

@@ -0,0 +1 @@
+Simplify search scopes and fix search on error pages

src/app/components/PageLayout/Header.tsx

@@ -49,7 +49,7 @@ export const Header: FC = () => {
               showText={!scrollTrigger && !isMobile}
             />
           </Grid>
-          {scope?.valid && (
+          {scope && (
             <>
               <Grid lg={6} xs={8}>
                 <NetworkSelector layer={scope.layer} network={scope.network} />

src/app/components/PageLayout/index.tsx

@@ -30,7 +30,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
     <>
       <BuildBanner />
       <NetworkOfflineBanner />
-      {scope?.valid && scope.layer !== Layer.consensus && <RuntimeOfflineBanner />}
+      {scope && scope.layer !== Layer.consensus && <RuntimeOfflineBanner />}
       <Box
         sx={{
           minHeight: '100vh',

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

@@ -10,7 +10,6 @@ import {
 import { Network } from '../../../types/network'
 import { RouteUtils, SpecifiedPerEnabledRuntime } from '../../utils/route-utils'
 import { AppError, AppErrors } from '../../../types/errors'
-import { Layer } from '../../../oasis-nexus/api'
 
 type LayerSuggestions = {
   suggestedBlock: string
@@ -19,7 +18,7 @@ type LayerSuggestions = {
   suggestedTokenFragment: string
 }
 
-export const searchSuggestionTerms: Record<Network, Partial<Record<Layer, LayerSuggestions>>> = {
+export const searchSuggestionTerms = {
   mainnet: {
     emerald: {
       suggestedBlock: '4260',
@@ -33,6 +32,8 @@ export const searchSuggestionTerms: Record<Network, Partial<Record<Layer, LayerS
       suggestedAccount: '0x90adE3B7065fa715c7a150313877dF1d33e777D5',
       suggestedTokenFragment: 'mock',
     },
+    cipher: undefined,
+    consensus: undefined,
   },
   testnet: {
     emerald: {
@@ -47,8 +48,10 @@ export const searchSuggestionTerms: Record<Network, Partial<Record<Layer, LayerS
       suggestedAccount: '0xfA3AC9f65C9D75EE3978ab76c6a1105f03156204',
       suggestedTokenFragment: 'USD',
     },
+    cipher: undefined,
+    consensus: undefined,
   },
-} satisfies SpecifiedPerEnabledRuntime
+} satisfies SpecifiedPerEnabledRuntime<LayerSuggestions>
 
 export const textSearchMininumLength = 3
 

src/app/hooks/useScopeParam.ts

@@ -1,68 +1,26 @@
-import { useRouteLoaderData, useParams, useRouteError } from 'react-router-dom'
+import { useRouteLoaderData, useParams } from 'react-router-dom'
 import { Network } from '../../types/network'
-import { RouteUtils } from '../utils/route-utils'
 import { AppError, AppErrors } from '../../types/errors'
 import { SearchScope } from '../../types/searchScope'
-import { Layer } from '../../oasis-nexus/api'
 
 export const useNetworkParam = (): Network | undefined => {
   const { network } = useParams()
   return network as Network | undefined
 }
 
-type ScopeInfo = SearchScope & {
-  valid: boolean
-}
-
-type Scope = {
-  layer: Layer | undefined
-  network: Network | undefined
-}
-
 /**
  * Use this in situations where we might or might not have a scope
  */
-export const useScopeParam = (): ScopeInfo | undefined => {
-  const runtimeScope = useRouteLoaderData('runtimeScope') as Scope
-  const consensusScope = useRouteLoaderData('consensusScope') as Scope
-  const loaderData = runtimeScope || consensusScope
-  const error = useRouteError()
-
-  if (loaderData?.network === undefined && loaderData?.layer === undefined) return undefined
-
-  const { network, layer } = loaderData
-
-  const scope: ScopeInfo = {
-    network: network as Network,
-    layer: layer as Layer,
-    valid: true,
-  }
-
-  if (network === undefined || layer === undefined) {
-    scope.valid = false
-    if (!error)
-      throw new Error(
-        'You must either specify both network and layer or none of them. You can not have one but not the other.',
-      )
-  }
-
-  if (!RouteUtils.getEnabledNetworks().includes(scope.network)) {
-    scope.valid = false
-    if (!error) throw new AppError(AppErrors.UnsupportedNetwork)
-  }
-
-  if (!RouteUtils.getEnabledLayersForNetwork(scope.network).includes(scope.layer)) {
-    scope.valid = false
-    if (!error) throw new AppError(AppErrors.UnsupportedLayer)
-  }
-
-  return scope
+export const useScopeParam = (): SearchScope | undefined => {
+  const runtimeScope = useRouteLoaderData('runtimeScope') as SearchScope | undefined
+  const consensusScope = useRouteLoaderData('consensusScope') as SearchScope | undefined
+  return runtimeScope ?? consensusScope ?? undefined
 }
 
 /**
  * Use this in situations where we require to have a scope
  */
-export const useRequiredScopeParam = (): ScopeInfo => {
+export const useRequiredScopeParam = (): SearchScope => {
   const scope = useScopeParam()
 
   if (!scope) throw new AppError(AppErrors.UnsupportedNetwork)

src/app/pages/ParatimeDashboardPage/LearningMaterials.tsx

@@ -44,8 +44,7 @@ type LayerContent = {
   secondary: Content
   tertiary: Content
 }
-type NetworkContent = Partial<Record<Layer, LayerContent>>
-const getContent = (t: TFunction): Record<Network, NetworkContent> => {
+const getContent = (t: TFunction) => {
   const labels = getLayerLabels(t)
 
   return {
@@ -84,6 +83,8 @@ const getContent = (t: TFunction): Record<Network, NetworkContent> => {
           url: docs.paraTimeTransfer,
         },
       },
+      [Layer.cipher]: undefined,
+      [Layer.consensus]: undefined,
     },
     [Network.testnet]: {
       [Layer.emerald]: {
@@ -120,8 +121,10 @@ const getContent = (t: TFunction): Record<Network, NetworkContent> => {
           url: docs.sapphireTestnetHardhat,
         },
       },
+      [Layer.cipher]: undefined,
+      [Layer.consensus]: undefined,
     },
-  } satisfies SpecifiedPerEnabledRuntime
+  } satisfies SpecifiedPerEnabledRuntime<LayerContent>
 }
 
 type LearningSectionProps = PaperProps & {

src/app/utils/route-utils.ts

@@ -8,28 +8,29 @@ import { SearchScope } from '../../types/searchScope'
 import { isStableDeploy } from '../../config'
 
 export type SpecifiedPerEnabledRuntime<T = any> = {
-  [N in keyof (typeof RouteUtils)['ENABLED_RUNTIMES_FOR_NETWORK']]: {
-    [L in keyof (typeof RouteUtils)['ENABLED_RUNTIMES_FOR_NETWORK'][N]]: T
+  [N in keyof (typeof RouteUtils)['ENABLED_LAYERS_FOR_NETWORK']]: {
+    [L in keyof (typeof RouteUtils)['ENABLED_LAYERS_FOR_NETWORK'][N]]: (typeof RouteUtils)['ENABLED_LAYERS_FOR_NETWORK'][N][L] extends true
+      ? T
+      : T | undefined
   }
 }
 
 export abstract class RouteUtils {
-  private static ENABLED_RUNTIMES_FOR_NETWORK = {
+  private static ENABLED_LAYERS_FOR_NETWORK = {
     [Network.mainnet]: {
       [Layer.emerald]: true,
       [Layer.sapphire]: true,
+      [Layer.cipher]: false,
+      // Disable WIP Consensus on production an staging
+      [Layer.consensus]: !isStableDeploy,
     },
     [Network.testnet]: {
       [Layer.emerald]: true,
       [Layer.sapphire]: true,
+      [Layer.cipher]: false,
+      [Layer.consensus]: false,
     },
-  } satisfies Partial<Record<Network, Partial<Record<Layer, true>>>>
-
-  private static ENABLED_CONSENSUS_FOR_NETWORK = {
-    // Disable WIP Consensus on production an staging
-    [Network.mainnet]: !isStableDeploy,
-    [Network.testnet]: false,
-  }
+  } satisfies Record<Network, Record<Layer, boolean>>
 
   static getDashboardRoute = ({ network, layer }: SearchScope) => {
     return `/${encodeURIComponent(network)}/${encodeURIComponent(layer)}`
@@ -108,9 +109,7 @@ export abstract class RouteUtils {
     )}/instance/${encodeURIComponent(instanceId)}`
 
   static getEnabledLayersForNetwork(network: Network): Layer[] {
-    const enabledRuntimes = Object.keys(RouteUtils.ENABLED_RUNTIMES_FOR_NETWORK[network]) as Layer[]
-    const enabledConsensus = RouteUtils.ENABLED_CONSENSUS_FOR_NETWORK[network] ? [Layer.consensus] : []
-    return [...enabledRuntimes, ...enabledConsensus]
+    return Object.values(Layer).filter(layer => RouteUtils.ENABLED_LAYERS_FOR_NETWORK[network][layer])
   }
 
   static getEnabledScopes(): SearchScope[] {
@@ -119,12 +118,10 @@ export abstract class RouteUtils {
     )
   }
 
-  static getEnabledNetworks() {
-    const networks = new Set([
-      ...Object.keys(RouteUtils.ENABLED_RUNTIMES_FOR_NETWORK),
-      ...Object.keys(RouteUtils.ENABLED_CONSENSUS_FOR_NETWORK),
-    ])
-    return Array.from(networks) as Network[]
+  static getEnabledNetworks(): Network[] {
+    return Object.values(Network).filter(network => {
+      return RouteUtils.getEnabledLayersForNetwork(network).length > 0
+    })
   }
 
   static getEnabledSearchScopes(): SearchScope[] {
@@ -176,26 +173,13 @@ export const transactionParamLoader = async ({ params }: LoaderFunctionArgs) =>
   return validateTxHashParam(params.hash!)
 }
 
-export const scopeConsensusLoader = async (args: LoaderFunctionArgs) => {
-  const {
-    params: { network },
-  } = args
-
-  if (!network || !RouteUtils.getEnabledNetworks().includes(network as Network)) {
-    throw new AppError(AppErrors.InvalidUrl)
-  }
-
-  return {
-    network: network as Network,
-    layer: Layer.consensus,
-  }
-}
-
-export const scopeRuntimeLoader = async (args: LoaderFunctionArgs) => {
-  const {
-    params: { network, layer },
-  } = args
-
+export const assertEnabledScope = ({
+  network,
+  layer,
+}: {
+  network: string | undefined
+  layer: string | undefined
+}): SearchScope => {
   if (!network || !RouteUtils.getEnabledNetworks().includes(network as Network)) {
     throw new AppError(AppErrors.InvalidUrl)
   }
@@ -206,9 +190,5 @@ export const scopeRuntimeLoader = async (args: LoaderFunctionArgs) => {
   ) {
     throw new AppError(AppErrors.UnsupportedLayer)
   }
-
-  return {
-    network: network as Network,
-    layer: layer as Layer,
-  }
+  return { network, layer } as SearchScope
 }

src/routes.tsx

@@ -13,8 +13,7 @@ import {
   addressParamLoader,
   blockHeightParamLoader,
   transactionParamLoader,
-  scopeConsensusLoader,
-  scopeRuntimeLoader,
+  assertEnabledScope,
 } from './app/utils/route-utils'
 import { searchParamLoader } from './app/components/Search/search-utils'
 import { RoutingErrorPage } from './app/pages/RoutingErrorPage'
@@ -31,6 +30,8 @@ import { TokenInventoryCard } from './app/pages/TokenDashboardPage/TokenInventor
 import { NFTInstanceDashboardPage, useNftDetailsProps } from './app/pages/NFTInstanceDashboardPage'
 import { NFTMetadataCard } from './app/pages/NFTInstanceDashboardPage/NFTMetadataCard'
 import { ConsensusDashboardPage } from 'app/pages/ConsensusDashboardPage'
+import { Layer } from './oasis-nexus/api'
+import { SearchScope } from './types/searchScope'
 
 const NetworkSpecificPart = () => (
   <ThemeByNetwork network={useRequiredScopeParam().network}>
@@ -58,10 +59,12 @@ export const routes: RouteObject[] = [
         loader: searchParamLoader,
       },
       {
-        path: '/:network/consensus',
+        path: '/:_network/consensus',
         element: <NetworkSpecificPart />,
         errorElement: withDefaultTheme(<RoutingErrorPage />),
-        loader: scopeConsensusLoader,
+        loader: async ({ params }): Promise<SearchScope> => {
+          return assertEnabledScope({ network: params._network, layer: Layer.consensus })
+        },
         id: 'consensusScope',
         children: [
           {
@@ -71,10 +74,12 @@ export const routes: RouteObject[] = [
         ],
       },
       {
-        path: '/:network/:layer',
+        path: '/:_network/:_layer',
         element: <NetworkSpecificPart />,
         errorElement: withDefaultTheme(<RoutingErrorPage />),
-        loader: scopeRuntimeLoader,
+        loader: async ({ params }): Promise<SearchScope> => {
+          return assertEnabledScope({ network: params._network, layer: params._layer })
+        },
         id: 'runtimeScope',
         children: [
           {