From 0b8b15a0eab9dc992f49a71ccbeb78f6512d29dc Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Mon, 19 Jun 2023 12:27:23 +0200
Subject: [PATCH] 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                 |  1 +
 src/app/components/PageLayout/Header.tsx |  2 +-
 src/app/components/PageLayout/index.tsx  |  2 +-
 src/app/hooks/useScopeParam.ts           | 28 ++++++++++++++++--------
 src/app/utils/route-utils.ts             |  2 +-
 5 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 .changelog/557.bugfix.md

diff --git a/.changelog/557.bugfix.md b/.changelog/557.bugfix.md
new file mode 100644
index 0000000000..24359d99bc
--- /dev/null
+++ b/.changelog/557.bugfix.md
@@ -0,0 +1 @@
+Fix error display when using invalid layers
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
index 99270824de..4a5ecb2e93 100644
--- a/src/app/components/PageLayout/Header.tsx
+++ b/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} />
diff --git a/src/app/components/PageLayout/index.tsx b/src/app/components/PageLayout/index.tsx
index 4e5c7357ec..687a43797f 100644
--- a/src/app/components/PageLayout/index.tsx
+++ b/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',
diff --git a/src/app/hooks/useScopeParam.ts b/src/app/hooks/useScopeParam.ts
index 5694a189f9..7362a30da3 100644
--- a/src/app/hooks/useScopeParam.ts
+++ b/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,30 +10,40 @@ 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
 }
@@ -41,7 +51,7 @@ export const useScopeParam = (): SearchScope | undefined => {
 /**
  * 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)
diff --git a/src/app/utils/route-utils.ts b/src/app/utils/route-utils.ts
index 1d18d34fe6..c3f3b4fb51 100644
--- a/src/app/utils/route-utils.ts
+++ b/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