From c0c3aee9727236231effeae5b00107617a6a88bc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:11:34 +0700
Subject: [PATCH 1/2] fix: selected chain 404

---
 CHANGELOG.md                                  |  1 +
 .../app-provider/hooks/useNetworkChange.ts    | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cbeebe81b..428408fe9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
 - [#538](https://github.com/alleslabs/celatone-frontend/pull/538) Add empty state in query and execute with json schema
diff --git a/src/lib/app-provider/hooks/useNetworkChange.ts b/src/lib/app-provider/hooks/useNetworkChange.ts
index 7e8facfb7..e3978b00c 100644
--- a/src/lib/app-provider/hooks/useNetworkChange.ts
+++ b/src/lib/app-provider/hooks/useNetworkChange.ts
@@ -14,11 +14,8 @@ export const useNetworkChange = (
   const navigate = useInternalNavigate();
 
   useEffect(() => {
-    const networkRoute = router.query.network
-      ? getFirstQueryParam(router.query.network, DEFAULT_SUPPORTED_CHAIN_ID)
-      : router.asPath.split("/")[1];
-
-    if (router.isReady || router.pathname === "/404") {
+    if (router.isReady) {
+      const networkRoute = getFirstQueryParam(router.query.network);
       // Redirect to default chain if there is no network query provided
       if (!router.query.network) {
         navigate({
@@ -31,13 +28,25 @@ export const useNetworkChange = (
         !SUPPORTED_CHAIN_IDS.includes(networkRoute)
       ) {
         navigate({
-          pathname: "/",
-          replace: true,
+          pathname: "/404",
+          query: {
+            network: DEFAULT_SUPPORTED_CHAIN_ID,
+          },
         });
       } else if (networkRoute !== networkRef.current) {
         networkRef.current = networkRoute;
         handleOnChainIdChange(networkRoute);
       }
+    } else if (router.pathname === "/404") {
+      const networkRoute = router.asPath.split("/")[1];
+      navigate({
+        pathname: "/404",
+        query: {
+          network: SUPPORTED_CHAIN_IDS.includes(networkRoute)
+            ? networkRoute
+            : DEFAULT_SUPPORTED_CHAIN_ID,
+        },
+      });
     }
   }, [
     handleOnChainIdChange,

From 9b81646fb2895229a1976560a3c7f128be318b9c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:23:16 +0700
Subject: [PATCH 2/2] fix: add comment

---
 src/lib/app-provider/hooks/useNetworkChange.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/app-provider/hooks/useNetworkChange.ts b/src/lib/app-provider/hooks/useNetworkChange.ts
index e3978b00c..0600fbacf 100644
--- a/src/lib/app-provider/hooks/useNetworkChange.ts
+++ b/src/lib/app-provider/hooks/useNetworkChange.ts
@@ -27,6 +27,7 @@ export const useNetworkChange = (
         router.pathname === "/[network]" &&
         !SUPPORTED_CHAIN_IDS.includes(networkRoute)
       ) {
+        // Redirect to default network 404 if `/invalid_network`
         navigate({
           pathname: "/404",
           query: {
@@ -39,6 +40,8 @@ export const useNetworkChange = (
       }
     } else if (router.pathname === "/404") {
       const networkRoute = router.asPath.split("/")[1];
+      // Redirect to the current network 404 if `/current_network/random_path`
+      // If the current network is also invalid, redicrect to default network 404
       navigate({
         pathname: "/404",
         query: {