Feat/update route network

CHANGELOG.md

@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1061](https://github.com/alleslabs/celatone-frontend/pull/1061) Refactor custom network routes and add support chain ids to hook
 - [#1053](https://github.com/alleslabs/celatone-frontend/pull/1053) Move move decoder and verifier links to env
 
 ### Bug fixes

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

@@ -59,7 +59,7 @@ const AppContext = createContext<AppContextInterface>(DEFAULT_STATES);
 
 export const AppProvider = observer(({ children }: AppProviderProps) => {
   const { setModalTheme } = useModalTheme();
-  const { chainConfigs } = useChainConfigs();
+  const { chainConfigs, supportedChainIds } = useChainConfigs();
 
   const [states, setStates] = useState<AppContextInterface>(DEFAULT_STATES);
 
@@ -73,7 +73,7 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
 
       setStates({
         isHydrated: true,
-        availableChainIds: SUPPORTED_CHAIN_IDS,
+        availableChainIds: supportedChainIds,
         currentChainId: newChainId,
         chainConfig,
         indexerGraphClient: new GraphQLClient(chainConfig.indexer, {
@@ -87,7 +87,7 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
           setStates((prev) => ({ ...prev, theme: newTheme })),
       });
     },
-    [chainConfigs]
+    [chainConfigs, supportedChainIds]
   );
 
   // Disable "Leave page" alert

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

@@ -1,5 +1,4 @@
-import { SUPPORTED_CHAIN_IDS } from "env";
-
+import { useChainConfigs } from "./useChainConfigs";
 import { useInternalNavigate } from "./useInternalNavigate";
 
 export const useAllowCustomNetworks = ({
@@ -8,8 +7,9 @@ export const useAllowCustomNetworks = ({
   shouldRedirect: boolean;
 }) => {
   const navigate = useInternalNavigate();
+  const { supportedChainIds } = useChainConfigs();
 
-  const isAllow = SUPPORTED_CHAIN_IDS.some(
+  const isAllow = supportedChainIds.some(
     (chainId) => chainId === "initiation-1"
   );
 

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

@@ -10,6 +10,7 @@ import { useMemo } from "react";
 
 import type { ChainConfig, ChainConfigs } from "config/chain";
 import { CHAIN_CONFIGS } from "config/chain";
+import { SUPPORTED_CHAIN_IDS } from "env";
 import {
   initiatestnet,
   initiatestnetAssets,
@@ -48,6 +49,7 @@ export const useChainConfigs = (): {
   chainConfigs: ChainConfigs;
   registryChains: Chain[];
   registryAssets: AssetList[];
+  supportedChainIds: string[];
 } => {
   const { chainConfigs } = useChainConfigStore();
 
@@ -88,7 +90,7 @@ export const useChainConfigs = (): {
             pretty_name: each.prettyName,
             chain_id: each.chainId,
             bech32_prefix: each.registry?.bech32_prefix ?? "",
-            slip44: 118,
+            slip44: each.registry?.slip44 ?? 118,
             fees: each.fees,
             staking: each.registry?.staking,
             logo_URIs: each.logo_URIs,
@@ -107,12 +109,14 @@ export const useChainConfigs = (): {
             },
             registryChains: [...acc.registryChains, localRegistryChain],
             registryAssets: [...acc.registryAssets, localRegistryAssets],
+            supportedChainIds: [...acc.supportedChainIds, each.chainId],
           };
         },
         {
           chainConfigs: {} as ChainConfigs,
           registryChains: [] as Chain[],
           registryAssets: [] as AssetList[],
+          supportedChainIds: [] as string[],
         }
       ),
     [chainConfigs]
@@ -139,5 +143,6 @@ export const useChainConfigs = (): {
       ...initiatestnetAssets,
       ...local.registryAssets,
     ],
+    supportedChainIds: [...SUPPORTED_CHAIN_IDS, ...local.supportedChainIds],
   };
 };

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

@@ -3,9 +3,11 @@ import type { Router } from "next/router";
 import type { ParsedUrlQueryInput } from "node:querystring";
 import { useCallback } from "react";
 
-import { FALLBACK_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
+import { FALLBACK_SUPPORTED_CHAIN_ID } from "env";
 import { getFirstQueryParam } from "lib/utils";
 
+import { useChainConfigs } from "./useChainConfigs";
+
 export interface NavigationArgs {
   pathname: string;
   query?: ParsedUrlQueryInput;
@@ -15,6 +17,7 @@ export interface NavigationArgs {
 
 export const useInternalNavigate = () => {
   const router = useRouter();
+  const { supportedChainIds } = useChainConfigs();
 
   return useCallback(
     ({
@@ -28,7 +31,7 @@ export const useInternalNavigate = () => {
         {
           pathname: `/[network]${pathname}`,
           query: {
-            network: SUPPORTED_CHAIN_IDS.includes(
+            network: supportedChainIds.includes(
               getFirstQueryParam(router.query.network)
             )
               ? router.query.network
@@ -40,6 +43,6 @@ export const useInternalNavigate = () => {
         options
       );
     },
-    [router]
+    [router.push, router.query.network, router.replace, supportedChainIds]
   );
 };

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

@@ -1,10 +1,11 @@
 import { useRouter } from "next/router";
 import { useEffect, useRef } from "react";
 
-import { FALLBACK_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
+import { FALLBACK_SUPPORTED_CHAIN_ID } from "env";
 import { useChainConfigStore } from "lib/providers/store";
 import { getFirstQueryParam } from "lib/utils";
 
+import { useChainConfigs } from "./useChainConfigs";
 import { useInternalNavigate } from "./useInternalNavigate";
 
 export const useNetworkChange = (
@@ -13,6 +14,7 @@ export const useNetworkChange = (
   const router = useRouter();
   const networkRef = useRef<string>();
   const navigate = useInternalNavigate();
+  const { supportedChainIds } = useChainConfigs();
   const { isHydrated: isChainConfigStoreHydrated } = useChainConfigStore();
 
   useEffect(() => {
@@ -27,7 +29,7 @@ export const useNetworkChange = (
         });
       } else if (
         router.pathname === "/[network]" &&
-        !SUPPORTED_CHAIN_IDS.includes(networkRoute)
+        !supportedChainIds.includes(networkRoute)
       ) {
         // Redirect to default network 404 if `/invalid_network`
         navigate({
@@ -47,7 +49,7 @@ export const useNetworkChange = (
       navigate({
         pathname: "/404",
         query: {
-          network: SUPPORTED_CHAIN_IDS.includes(networkRoute)
+          network: supportedChainIds.includes(networkRoute)
             ? networkRoute
             : FALLBACK_SUPPORTED_CHAIN_ID,
         },
@@ -61,5 +63,6 @@ export const useNetworkChange = (
     router.isReady,
     router.pathname,
     router.query,
+    supportedChainIds,
   ]);
 };

src/lib/components/AppLink.tsx

@@ -2,17 +2,19 @@ import { Text } from "@chakra-ui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { FALLBACK_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
+import { FALLBACK_SUPPORTED_CHAIN_ID } from "env";
+import { useChainConfigs } from "lib/app-provider/hooks/useChainConfigs";
 import { getFirstQueryParam } from "lib/utils";
 
 export const AppLink = ({
   children,
   ...linkProps
 }: React.ComponentProps<typeof Link>) => {
   const router = useRouter();
+  const { supportedChainIds } = useChainConfigs();
   const componentHref = linkProps.href.toString();
 
-  const network = SUPPORTED_CHAIN_IDS.includes(
+  const network = supportedChainIds.includes(
     getFirstQueryParam(router.query.network)
   )
     ? router.query.network

src/lib/components/MobileGuard.tsx

@@ -1,8 +1,7 @@
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 
-import { SUPPORTED_CHAIN_IDS } from "env";
-import { useMobile } from "lib/app-provider";
+import { useChainConfigs, useMobile } from "lib/app-provider";
 
 import { NoMobile } from "./modal";
 
@@ -11,11 +10,12 @@ interface MobileGuardProps {
 }
 export const MobileGuard = ({ children }: MobileGuardProps) => {
   const router = useRouter();
+  const { supportedChainIds } = useChainConfigs();
   const isMobile = useMobile();
 
   const pathName = router.asPath;
   const isResponsive =
-    SUPPORTED_CHAIN_IDS.includes(pathName.slice(1)) ||
+    supportedChainIds.includes(pathName.slice(1)) ||
     pathName.includes(`/accounts`) ||
     pathName.includes(`/txs`) ||
     pathName.includes(`/blocks`) ||

src/lib/components/modal/RemoveChainConfigModal.tsx

@@ -1,9 +1,10 @@
 import { Text, useToast } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useCelatoneApp } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { useChainConfigStore } from "lib/providers/store";
+import { useChainConfigStore, useNetworkStore } from "lib/providers/store";
 
 import { ActionModal } from "./ActionModal";
 
@@ -17,14 +18,22 @@ export function RemoveChainConfigModal({
   trigger,
 }: RemoveChainConfigModalProps) {
   const { removeChainConfig, getChainConfig } = useChainConfigStore();
-  const navigate = useInternalNavigate();
+  const { removeNetwork } = useNetworkStore();
+  const router = useRouter();
+  const { currentChainId } = useCelatoneApp();
 
   const chainConfig = getChainConfig(chainId);
 
   const toast = useToast();
   const handleRemove = () => {
+    // remove chain id from chain config store
     removeChainConfig(chainId);
-    navigate({ pathname: "/", replace: true });
+
+    // remove chain id from pinned network
+    removeNetwork(chainId);
+
+    // redirect to home page
+    router.push(currentChainId === chainId ? "/" : `/${currentChainId}`);
 
     setTimeout(() => {
       toast({

src/lib/layout/network-menu/NetworkMenuBody.tsx

@@ -88,7 +88,7 @@ export const NetworkMenuBody = observer(
                   }
                   onClose={onClose}
                 />
-                <AppLink href="/add-network">
+                <AppLink href="/custom-network/add">
                   <Button
                     variant="outline-gray"
                     justifyContent="flex-start"

src/lib/layout/network-menu/NetworkMenuTop.tsx

@@ -51,7 +51,7 @@ export const NetworkMenuTop = ({
             <Text as="span" variant="body3" color="text.dark">
               Want to add your network?
             </Text>{" "}
-            <AppLink href="/add-network" onClick={onClose}>
+            <AppLink href="/custom-network/add" onClick={onClose}>
               <Text
                 as="span"
                 variant="body3"

src/lib/layout/network-menu/network-card/NetworkCardCta.tsx

@@ -96,7 +96,7 @@ export const NetworkCardCta = observer(
             {...pinIconStyles}
             onClick={() =>
               navigate({
-                pathname: "/network-config",
+                pathname: "/custom-network/edit/[chainId]",
                 query: {
                   chainId,
                 },

src/lib/pages/add-network/index.tsx → src/lib/pages/custom-network/index.tsx

@@ -30,13 +30,13 @@ export const AddNetwork = () => {
           <ButtonCard
             title="Fill in Network Details Manually"
             description="Add new Minitia through fill in each configuration manually"
-            onClick={() => navigate({ pathname: "/add-network/manual" })}
+            onClick={() => navigate({ pathname: "/custom-network/add/manual" })}
           />
           {/* // TODO: Open this code to enable import JSON option entry point */}
           {/* <ButtonCard
             title="Import JSON"
             description="Import available JSON that contains all the configuration"
-            onClick={() => navigate({ pathname: "/add-network/json" })}
+            onClick={() => navigate({ pathname: "/custom-network/add/json" })}
           /> */}
         </Flex>
       </Flex>

src/lib/pages/add-network-manual/components/WalletRegistry.tsx → src/lib/pages/custom-network/manual/components/WalletRegistry.tsx

@@ -148,7 +148,7 @@ export const WalletRegistry = ({ control, errors }: WalletRegistryProps) => {
             label="Bech32 Prefix"
             variant="fixed-floating"
             w="full"
-            placeholder="ex. Init"
+            placeholder="ex. init"
             rules={{
               required: "",
             }}

src/lib/pages/add-network-manual/index.tsx → src/lib/pages/custom-network/manual/index.tsx

@@ -64,7 +64,7 @@ export const AddNetworkManual = () => {
       highGasPrice: "",
       gasForCosmosSend: "",
       gasForIbc: "",
-      bech32Prefix: "",
+      bech32Prefix: "init",
       slip44: 118,
       assets: [],
     },

src/pages/[network]/custom-network/add/index.tsx

@@ -0,0 +1,3 @@
+import { AddNetwork } from "lib/pages/custom-network";
+
+export default AddNetwork;

src/pages/[network]/custom-network/add/manual.tsx

@@ -0,0 +1,3 @@
+import { AddNetworkManual } from "lib/pages/custom-network/manual";
+
+export default AddNetworkManual;

src/pages/[network]/custom-network/edit/[chainId].tsx

@@ -0,0 +1,3 @@
+import { NetworkConfig } from "lib/pages/custom-network/edit";
+
+export default NetworkConfig;

src/pages/custom-network/add/index.tsx

@@ -0,0 +1,3 @@
+import { AddNetwork } from "lib/pages/custom-network";
+
+export default AddNetwork;

src/pages/custom-network/add/manual.tsx

@@ -0,0 +1,3 @@
+import { AddNetworkManual } from "lib/pages/custom-network/manual";
+
+export default AddNetworkManual;

src/pages/custom-network/edit/[chainId].tsx

@@ -0,0 +1,3 @@
+import { NetworkConfig } from "lib/pages/custom-network/edit";
+
+export default NetworkConfig;