Improve handling of routing errors on invalid layers

 - Don't throw more errors while already trying to display error
 - Use the most specific error message possible
 - Teach useScopeParam() to also return info about validity
 - Hide network selector and freshness info on invalid scopes

.changelog/557.bugfix.md

@@ -0,0 +1 @@
+Fix error display when using invalid layers

src/app/components/PageLayout/Header.tsx

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

src/app/components/PageLayout/index.tsx

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

src/app/hooks/useScopeParam.ts

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

src/app/utils/route-utils.ts

@@ -143,7 +143,7 @@ export const scopeLoader = async (args: LoaderFunctionArgs) => {
     !layer || // missing param
     !RouteUtils.getEnabledLayersForNetwork(network as Network).includes(layer as Layer) // unsupported on network
   ) {
-    throw new AppError(AppErrors.InvalidUrl)
+    throw new AppError(AppErrors.UnsupportedLayer)
   }
 
   return true