Feat/add config not found and rewrite network logic

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#363](https://github.com/alleslabs/celatone-frontend/pull/363) Add config not found page and rewrite network logic
 - [#343](https://github.com/alleslabs/celatone-frontend/pull/343) Apply fetching mechanism and keyboard arrow navigation to searchbar
 - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting
 - [#266](https://github.com/alleslabs/celatone-frontend/pull/250) Add proposal whitelisting page

src/lib/app-provider/contexts/app.tsx

@@ -17,6 +17,7 @@ import { CHAIN_CONFIGS, DEFAULT_CHAIN_CONFIG, PROJECT_CONSTANTS } from "config";
 import type { ChainConfig, ProjectConstants } from "config/types";
 import { SUPPORTED_CHAIN_IDS } from "env";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
+import { NetworkErrorState } from "lib/components/state/NetworkErrorState";
 import { DEFAULT_ADDRESS } from "lib/data";
 import {
   useCodeStore,
@@ -67,9 +68,7 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
   );
 
   const states = useMemo<AppContextInterface>(() => {
-    const chainConfig = currentChainId
-      ? CHAIN_CONFIGS[currentChainId]
-      : DEFAULT_CHAIN_CONFIG;
+    const chainConfig = CHAIN_CONFIGS[currentChainId] ?? DEFAULT_CHAIN_CONFIG;
 
     return {
       availableChainIds: SUPPORTED_CHAIN_IDS,
@@ -94,6 +93,9 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
 
   useAmplitude();
 
+  if (currentChainId && !(currentChainId in CHAIN_CONFIGS))
+    return <NetworkErrorState />;
+
   if (
     !isCodeUserKeyExist() ||
     !isContractUserKeyExist() ||
@@ -102,12 +104,7 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
   )
     return <LoadingOverlay />;
 
-  return currentChainId in CHAIN_CONFIGS ? (
-    <AppContext.Provider value={states}>{children}</AppContext.Provider>
-  ) : (
-    // TODO: fix to a proper component
-    <div>Something went wrong</div>
-  );
+  return <AppContext.Provider value={states}>{children}</AppContext.Provider>;
 });
 
 export const useCelatoneApp = (): AppContextInterface => {

src/lib/app-provider/hooks/useNetworkChange.ts

@@ -4,32 +4,47 @@ import { useEffect, useRef } from "react";
 import { DEFAULT_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
 import { getFirstQueryParam } from "lib/utils";
 
+import { useInternalNavigate } from "./useInternalNavigate";
+
 export const useNetworkChange = (
   handleOnChainIdChange: (newChainId: string) => void
 ) => {
   const router = useRouter();
   const networkRef = useRef<string>();
+  const navigate = useInternalNavigate();
 
   useEffect(() => {
-    let networkRoute = router.query.network
+    const networkRoute = router.query.network
       ? getFirstQueryParam(router.query.network, DEFAULT_SUPPORTED_CHAIN_ID)
       : router.asPath.split("/")[1];
 
     if (router.isReady || router.pathname === "/404") {
-      // Redirect to default chain if the chain is not supported by the app
-      if (!SUPPORTED_CHAIN_IDS.includes(networkRoute))
-        networkRoute = DEFAULT_SUPPORTED_CHAIN_ID;
-
-      if (networkRoute !== networkRef.current) {
+      // Redirect to default chain if there is no network query provided
+      if (!router.query.network) {
+        navigate({
+          pathname: router.pathname,
+          query: { ...router.query },
+          replace: true,
+        });
+      } else if (
+        router.pathname === "/[network]" &&
+        !SUPPORTED_CHAIN_IDS.includes(networkRoute)
+      ) {
+        navigate({
+          pathname: "/",
+          replace: true,
+        });
+      } else if (networkRoute !== networkRef.current) {
         networkRef.current = networkRoute;
         handleOnChainIdChange(networkRoute);
       }
     }
   }, [
     handleOnChainIdChange,
+    navigate,
     router.asPath,
     router.isReady,
     router.pathname,
-    router.query.network,
+    router.query,
   ]);
 };

src/lib/components/state/NetworkErrorState.tsx

@@ -0,0 +1,66 @@
+import { Button, Flex, Heading, Image, Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+const bullets = [
+  "The configuration for your chosen chain hasn't been set up yet.",
+  "The network you selected is no longer supported.",
+  "It's possible that your link is either deprecated or misspelled.",
+];
+
+export const NetworkErrorState = () => {
+  const router = useRouter();
+  return (
+    <Flex
+      flexDir="column"
+      align="center"
+      justifyContent="center"
+      gap="48px"
+      h="100vh"
+      bg="background.main"
+    >
+      <Image
+        src="https://assets.alleslabs.dev/branding/logo/logo.svg"
+        alt="Celatone"
+        width="300px"
+      />
+      <Flex
+        flexDir="column"
+        align="center"
+        sx={{ "& > p": { lineHeight: "22px" } }}
+      >
+        <Image
+          src="https://assets.alleslabs.dev/illustration/search-not-found.svg"
+          alt="config_not_found"
+          width="152px"
+        />
+        <Heading as="h5" variant="h5" mt={6} mb={1} color="text.dark">
+          Network Error
+        </Heading>
+        <Text fontWeight={500} color="text.dark" variant="body2">
+          The network you chose is currently unavailable. Here are a few
+          possibilities:
+        </Text>
+        {bullets.map((bullet) => (
+          <Text
+            key={bullet}
+            fontWeight={500}
+            color="text.dark"
+            variant="body2"
+            alignSelf="start"
+          >
+            <Text as="span" mx={2} color="text.dark">
+              &#x2022;
+            </Text>
+            {bullet}
+          </Text>
+        ))}
+      </Flex>
+      <Button
+        variant="outline-primary"
+        onClick={() => router.replace("/", undefined)}
+      >
+        Go to Celatone Homepage
+      </Button>
+    </Flex>
+  );
+};

src/lib/layout/Header.tsx

@@ -7,7 +7,6 @@ import {
   MenuItem,
   Image,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { CHAIN_CONFIGS } from "config";
 import { useCelatoneApp, useSelectChain } from "lib/app-provider";
@@ -21,7 +20,6 @@ import Searchbar from "./Searchbar";
 
 const Header = () => {
   const { availableChainIds, currentChainId } = useCelatoneApp();
-  const { getChainRecord } = useWallet();
   const selectChain = useSelectChain();
 
   return (
@@ -80,38 +78,38 @@ const Header = () => {
             </Flex>
           </MenuButton>
           <MenuList zIndex="dropdown">
-            {availableChainIds.map((chainId) => (
-              <MenuItem
-                key={chainId}
-                onClick={() => {
-                  selectChain(chainId);
-                }}
-                flexDirection="column"
-                alignItems="flex-start"
-                _hover={{
-                  backgroundColor: "pebble.800",
-                }}
-                transition="all .25s ease-in-out"
-              >
-                <Flex justify="space-between" align="center" w="full">
-                  <Flex direction="column">
-                    <Text variant="body2">
-                      {
-                        getChainRecord(
-                          CHAIN_CONFIGS[chainId]?.registryChainName
-                        )?.chain.pretty_name
-                      }
-                    </Text>
-                    <Text color="text.dark" variant="body3">
-                      {chainId}
-                    </Text>
+            {availableChainIds.map((chainId) => {
+              const noConfig = !(chainId in CHAIN_CONFIGS);
+              return (
+                <MenuItem
+                  key={chainId}
+                  onClick={() => {
+                    selectChain(chainId);
+                  }}
+                  flexDirection="column"
+                  alignItems="flex-start"
+                  _hover={{
+                    backgroundColor: "pebble.800",
+                  }}
+                  transition="all .25s ease-in-out"
+                  isDisabled={noConfig}
+                >
+                  <Flex justify="space-between" align="center" w="full">
+                    <Flex direction="column">
+                      <Text variant="body2">
+                        {CHAIN_CONFIGS[chainId]?.prettyName || chainId}
+                      </Text>
+                      <Text color="text.dark" variant="body3">
+                        {chainId}
+                      </Text>
+                    </Flex>
+                    {chainId === currentChainId && (
+                      <CustomIcon name="check" boxSize="3" />
+                    )}
                   </Flex>
-                  {chainId === currentChainId && (
-                    <CustomIcon name="check" boxSize="3" />
-                  )}
-                </Flex>
-              </MenuItem>
-            ))}
+                </MenuItem>
+              );
+            })}
           </MenuList>
         </Menu>
         <WalletSection />

src/lib/layout/index.tsx

@@ -40,6 +40,7 @@ const Layout = ({ children }: LayoutProps) => {
   useEffect(() => {
     scrollToTop();
   }, [router.asPath]);
+
   return (
     <Grid
       templateAreas={mode.templateAreas}

src/pages/[network]/404.tsx

@@ -0,0 +1,3 @@
+import NotFound from "lib/pages/not-found";
+
+export default NotFound;