Merge pull request #553 from oasisprotocol/csillag/fix-layer-error-di…

…splay

Fix displaying error messages on unsupported layers

.changelog/557.bugfix.md

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

src/app/components/PageLayout/Header.tsx

@@ -66,7 +66,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

@@ -46,7 +46,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
       <Box ref={bannersRef}>
         <BuildBanner />
         <NetworkOfflineBanner />
-        {scope && <RuntimeOfflineBanner />}
+        {scope?.valid && <RuntimeOfflineBanner />}
       </Box>
       <Box
         sx={{

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,50 @@ 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) {
-    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 (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.getEnabledLayersForNetwork(scope.network).includes(scope.layer))
-    throw new AppError(AppErrors.UnsupportedLayer)
+  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
 }
 
 /**
  * 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