feat: add network to url path

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#95](https://github.com/alleslabs/celatone-frontend/pull/95) Add network to url path
 - [#90](https://github.com/alleslabs/celatone-frontend/pull/90) Add update admin (`/admin`) and migrate (`/migrate`) page routes
 - [#91](https://github.com/alleslabs/celatone-frontend/pull/91) Add migrate shortcut to the sidebar
 - [#75](https://github.com/alleslabs/celatone-frontend/pull/75) Add code-related contracts table to the code detail page

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

@@ -2,6 +2,7 @@ import { useWallet } from "@cosmos-kit/react";
 import big from "big.js";
 import { GraphQLClient } from "graphql-request";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 import { useEffect, useContext, useMemo, createContext } from "react";
 
@@ -12,7 +13,7 @@ import {
   getExplorerUserAddressUrl,
 } from "lib/app-fns/explorer";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
-import { DEFAULT_ADDRESS, DEFAULT_CHAIN } from "lib/data";
+import { DEFAULT_ADDRESS } from "lib/data";
 import { useCodeStore, useContractStore } from "lib/hooks";
 import type { ChainGasPrice, Token, U } from "lib/types";
 import { formatUserKey } from "lib/utils";
@@ -59,6 +60,7 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   appContractAddressMap,
   constants,
 }: AppProviderProps<ContractAddress, Constants>) => {
+  const router = useRouter();
   const { currentChainName, currentChainRecord, setCurrentChain } = useWallet();
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
@@ -113,9 +115,15 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   }, [currentChainName, setCodeUserKey, setContractUserKey]);
 
   useEffect(() => {
-    setCurrentChain(DEFAULT_CHAIN);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    /**
+     * @remarks Condition checking varies by chain
+     */
+    if (router.query.network === "mainnet") {
+      setCurrentChain("osmosis");
+    } else {
+      setCurrentChain("osmosistestnet");
+    }
+  }, [router.query.network, setCurrentChain]);
 
   const AppContent = observer(() => {
     if (isCodeUserKeyExist() && isContractUserKeyExist())

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

@@ -5,3 +5,4 @@ export * from "./useCelatoneApp";
 export * from "./useQueryCmds";
 export * from "./useExecuteCmds";
 export * from "./useTokensInfo";
+export * from "./useInternalNavigate";

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

@@ -0,0 +1,38 @@
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+
+import type { Dict } from "lib/types";
+
+interface TransitionOptions {
+  shallow?: boolean;
+  locale?: string | false;
+  scroll?: boolean;
+  unstable_skipClientCache?: boolean;
+}
+
+interface NavigationArgs {
+  pathname: string;
+  query?: Dict<string, string | number>;
+  options?: TransitionOptions;
+}
+
+export const useInternalNavigate = () => {
+  const router = useRouter();
+
+  return useCallback(
+    ({ pathname, query = {}, options = {} }: NavigationArgs) => {
+      router.push(
+        {
+          pathname: `/[network]${pathname}`,
+          query: {
+            network: router.query.network === "mainnet" ? "mainnet" : "testnet",
+            ...query,
+          },
+        },
+        undefined,
+        options
+      );
+    },
+    [router]
+  );
+};

src/lib/components/AppLink.tsx

@@ -0,0 +1,31 @@
+import { Text } from "@chakra-ui/react";
+import type { LinkProps } from "next/link";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export const AppLink = ({
+  children,
+  ...linkProps
+}: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> &
+  LinkProps & {
+    children?: React.ReactNode;
+  } & React.RefAttributes<HTMLAnchorElement>) => {
+  const router = useRouter();
+  const componentHref = linkProps.href.toString();
+  return (
+    <Link
+      {...linkProps}
+      href={
+        router.query.network === "mainnet"
+          ? `/mainnet${componentHref}`
+          : `/testnet${componentHref}`
+      }
+    >
+      {typeof children === "string" ? (
+        <Text color={linkProps.color}>{children}</Text>
+      ) : (
+        children
+      )}
+    </Link>
+  );
+};

src/lib/components/ExplorerLink.tsx

@@ -1,7 +1,6 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Box, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import Link from "next/link";
 
 import {
   getExplorerBlockUrl,
@@ -12,6 +11,7 @@ import {
 import type { AddressReturnType } from "lib/hooks";
 import { truncate } from "lib/utils";
 
+import { AppLink } from "./AppLink";
 import { Copier } from "./Copier";
 
 export type LinkType =
@@ -101,9 +101,9 @@ const LinkRender = ({
   );
 
   return isInternal ? (
-    <Link href={hrefLink} passHref onClick={(e) => e.stopPropagation()}>
+    <AppLink href={hrefLink} passHref onClick={(e) => e.stopPropagation()}>
       {textElement}
-    </Link>
+    </AppLink>
   ) : (
     <a
       href={hrefLink}

src/lib/components/button/InstantiateButton.tsx

@@ -1,9 +1,9 @@
 import type { ButtonProps } from "@chakra-ui/react";
 import { Button, chakra, Icon, Tooltip } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useRouter } from "next/router";
 import { MdHowToVote, MdPerson } from "react-icons/md";
 
+import { useInternalNavigate } from "lib/app-provider";
 import type { HumanAddr, PermissionAddresses } from "lib/types";
 import { InstantiatePermission } from "lib/types";
 
@@ -53,10 +53,10 @@ export const InstantiateButton = ({
   codeId,
   ...buttonProps
 }: InstantiateButtonProps) => {
-  const router = useRouter();
   const { address } = useWallet();
+  const navigate = useInternalNavigate();
   const goToInstantiate = () =>
-    router.push({ pathname: "/instantiate", query: { "code-id": codeId } });
+    navigate({ pathname: "/instantiate", query: { "code-id": codeId } });
 
   const isAllowed =
     permissionAddresses.includes(address as HumanAddr) ||

src/lib/components/modal/list/RemoveList.tsx

@@ -1,8 +1,8 @@
 import type { MenuItemProps } from "@chakra-ui/react";
 import { MenuItem, useToast, Icon, Text } from "@chakra-ui/react";
-import { useRouter } from "next/router";
 import { MdDeleteForever, MdCheckCircle } from "react-icons/md";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { ActionModal } from "lib/components/modal/ActionModal";
 import { useContractStore, useUserKey } from "lib/hooks";
 import type { LVPair } from "lib/types";
@@ -18,10 +18,10 @@ export function RemoveList({ list, menuItemProps }: ModalProps) {
   const { removeList } = useContractStore();
 
   const toast = useToast();
-  const router = useRouter();
+  const navigate = useInternalNavigate();
   const handleRemove = () => {
     removeList(userKey, list.value);
-    router.push("/contract-list");
+    navigate({ pathname: "/contract-list" });
     // TODO: show toast after removed and redirect to /contract-list
     setTimeout(() => {
       toast({

src/lib/components/modal/tx/ButtonSection.tsx

@@ -1,10 +1,10 @@
 import { Button, Icon } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useRouter } from "next/router";
 import { useCallback } from "react";
 import { FiChevronRight } from "react-icons/fi";
 
 import { getExplorerTxUrl } from "lib/app-fns/explorer";
+import { useInternalNavigate } from "lib/app-provider";
 import type { ActionVariant, TxReceipt } from "lib/types";
 
 interface ButtonSectionProps {
@@ -18,7 +18,7 @@ export const ButtonSection = ({
   onClose,
   receipts,
 }: ButtonSectionProps) => {
-  const router = useRouter();
+  const navigate = useInternalNavigate();
   const { currentChainName } = useWallet();
 
   const openExplorer = useCallback(() => {
@@ -40,7 +40,7 @@ export const ButtonSection = ({
           <Button
             variant="ghost-primary"
             onClick={() => {
-              router.push("/codes");
+              navigate({ pathname: "/codes" });
               onClose?.();
             }}
           >
@@ -53,7 +53,7 @@ export const ButtonSection = ({
             }
             onClick={() => {
               const codeId = receipts.find((r) => r.title === "Code ID")?.value;
-              router.push({
+              navigate({
                 pathname: "/instantiate",
                 query: { "code-id": codeId },
               });

src/lib/components/state/ZeroState.tsx

@@ -1,8 +1,8 @@
 import { Flex, Button, Icon, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useRouter } from "next/router";
 import { MdOutlineAdd, MdBookmarkBorder, MdSearch } from "react-icons/md";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { SaveNewContract } from "lib/components/modal/contract";
 import type { LVPair } from "lib/types";
 
@@ -56,7 +56,7 @@ export const ZeroState = ({
   isReadOnly,
   isInstantiatedByMe,
 }: ZeroStateProps) => {
-  const router = useRouter();
+  const navigate = useInternalNavigate();
   const { isWalletConnected } = useWallet();
 
   return (
@@ -82,7 +82,7 @@ export const ZeroState = ({
             <ActionSection
               isInstantiatedByMe={isInstantiatedByMe}
               list={list}
-              handleAction={() => router.push("/deploy")}
+              handleAction={() => navigate({ pathname: "/deploy" })}
             />
           )}
         </Flex>

src/lib/layout/Header.tsx

@@ -10,16 +10,35 @@ import {
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
+import { useCallback } from "react";
 import { FiChevronDown } from "react-icons/fi";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { WalletSection } from "lib/components/Wallet";
 import { CHAIN_NAMES } from "lib/data";
 
 import Searchbar from "./Searchbar";
 
 const Header = () => {
-  const { currentChainRecord, setCurrentChain, getChainRecord } = useWallet();
   const router = useRouter();
+  const navigate = useInternalNavigate();
+  const { currentChainRecord, setCurrentChain, getChainRecord } = useWallet();
+
+  const handleChainSelect = useCallback(
+    (chainName: string) => {
+      setCurrentChain(chainName);
+      navigate({
+        pathname: router.asPath.replace(`/${router.query.network}`, ""),
+        query: {
+          /**
+           * @remarks Condition checking varies by chain
+           */
+          network: chainName === "osmosis" ? "mainnet" : "testnet",
+        },
+      });
+    },
+    [setCurrentChain, navigate, router]
+  );
 
   return (
     <Flex
@@ -38,7 +57,7 @@ const Header = () => {
         width="115px"
         mr="36px"
         _hover={{ cursor: "pointer" }}
-        onClick={() => router.push({ pathname: "/" })}
+        onClick={() => navigate({ pathname: "/" })}
       />
       <Searchbar />
       <Flex gap={2}>
@@ -74,7 +93,9 @@ const Header = () => {
               return (
                 <MenuItem
                   key={chainName}
-                  onClick={() => setCurrentChain(chainName)}
+                  onClick={() => {
+                    handleChainSelect(chainName);
+                  }}
                   flexDirection="column"
                   alignItems="flex-start"
                 >

src/lib/layout/Navbar.tsx

@@ -1,7 +1,6 @@
 import { Flex, Box, Text, Icon, Button, Spacer } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
-import Link from "next/link";
 import {
   MdHome,
   MdCode,
@@ -15,6 +14,7 @@ import {
   MdReadMore,
 } from "react-icons/md";
 
+import { AppLink } from "lib/components/AppLink";
 import { CreateNewList } from "lib/components/modal";
 import { INSTANTIATED_LIST_NAME, getListIcon, SAVED_LIST_NAME } from "lib/data";
 import { useContractStore } from "lib/hooks";
@@ -144,7 +144,7 @@ const Navbar = observer(() => {
               )}
             </Flex>
             {item.submenu.map((submenu) => (
-              <Link href={submenu.slug} key={submenu.slug}>
+              <AppLink href={submenu.slug} key={submenu.slug}>
                 <Flex
                   gap="3"
                   p={2}
@@ -158,7 +158,7 @@ const Navbar = observer(() => {
                     {submenu.name}
                   </Text>
                 </Flex>
-              </Link>
+              </AppLink>
             ))}
           </Box>
         ))}
@@ -175,12 +175,12 @@ const Navbar = observer(() => {
         borderTop="4px solid"
         borderTopColor="background.main"
       >
-        <Link href="/deploy">
+        <AppLink href="/deploy">
           <Button>
             <Icon as={MdOutlineAdd} boxSize="4" />
             Deploy new contract
           </Button>
-        </Link>
+        </AppLink>
       </Flex>
     </Flex>
   );