feat: add tab url path for account details and public project details

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#322](https://github.com/alleslabs/celatone-frontend/pull/322) Tab url path for account details and public project details pages
 - [#449](https://github.com/alleslabs/celatone-frontend/pull/449) Support searching with pool id
 - [#419](https://github.com/alleslabs/celatone-frontend/pull/419) Add error message box for tx failed modal and enhance styling
 - [#415](https://github.com/alleslabs/celatone-frontend/pull/415) Search by icns names feature and Show registered icns names on account details page

src/lib/pages/account-details/index.tsx

@@ -7,12 +7,17 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 
-import { useValidateAddress, useWasmConfig } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useValidateAddress,
+  useWasmConfig,
+} from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useAccountDetailsTableCounts } from "lib/model/account";
@@ -24,7 +29,7 @@ import {
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
-import { getFirstQueryParam, scrollToTop, truncate } from "lib/utils";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
 import { AccountHeader } from "./components/AccountHeader";
 import { AssetsSection } from "./components/asset";
@@ -38,15 +43,17 @@ import {
 } from "./components/tables";
 import { TotalAccountValue } from "./components/TotalAccountValue";
 
+const tableHeaderId = "accountDetailsTab";
+
 enum TabIndex {
-  Overview,
-  Assets,
-  Delegations,
-  Txs,
-  Codes,
-  Contracts,
-  Admins,
-  Proposals,
+  Overview = "overview",
+  Assets = "assets",
+  Delegations = "delegations",
+  Txs = "txs",
+  Codes = "codes",
+  Contracts = "contracts",
+  Admins = "admins",
+  Proposals = "proposals",
 }
 
 interface AccountDetailsBodyProps {
@@ -57,9 +64,9 @@ const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const wasm = useWasmConfig({ shouldRedirect: false });
-
-  const [tabIndex, setTabIndex] = useState(TabIndex.Overview);
-  const tableHeaderId = "accountDetailsTab";
+  const navigate = useInternalNavigate();
+  const router = useRouter();
+  const tab = getFirstQueryParam(router.query.tab) as TabIndex;
   const { data: publicInfo } = usePublicProjectByAccountAddress(accountAddress);
   const { data: publicInfoBySlug } = usePublicProjectBySlug(publicInfo?.slug);
   const { data: accountId } = useAccountId(accountAddress);
@@ -75,11 +82,38 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     loadingState: { txCountLoading },
   } = useAccountDetailsTableCounts(accountAddress, accountId);
 
-  const handleTabChange = (tab: TabIndex) => {
-    AmpTrackUseTab(TabIndex[tab]);
-    setTabIndex(tab);
-    scrollToTop();
-  };
+  const handleTabChange = useCallback(
+    (nextTab: TabIndex) => () => {
+      if (nextTab === tab) return;
+      AmpTrackUseTab(nextTab);
+      navigate({
+        pathname: "/accounts/[accountAddress]/[tab]",
+        query: {
+          accountAddress,
+          tab: nextTab,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [accountAddress, tab, navigate]
+  );
+
+  useEffect(() => {
+    if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
+      navigate({
+        pathname: "/accounts/[accountAddress]/[tab]",
+        query: {
+          accountAddress,
+          tab: TabIndex.Overview,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    }
+  }, [router.isReady, tab, accountAddress, navigate]);
 
   return (
     <>
@@ -127,61 +161,65 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </Flex>
       )}
 
-      <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
+      <Tabs
+        index={Object.values(TabIndex).indexOf(tab)}
+        isLazy
+        lazyBehavior="keepMounted"
+      >
         <TabList
           borderBottom="1px solid"
           borderColor="gray.700"
           overflowX="scroll"
           id={tableHeaderId}
         >
-          <CustomTab onClick={() => handleTabChange(TabIndex.Overview)}>
+          <CustomTab onClick={handleTabChange(TabIndex.Overview)}>
             Overview
           </CustomTab>
           <CustomTab
             count={tableCounts.assetsCount}
             isDisabled={!tableCounts.assetsCount}
-            onClick={() => handleTabChange(TabIndex.Assets)}
+            onClick={handleTabChange(TabIndex.Assets)}
           >
             Assets
           </CustomTab>
-          <CustomTab onClick={() => handleTabChange(TabIndex.Delegations)}>
+          <CustomTab onClick={handleTabChange(TabIndex.Delegations)}>
             Delegations
           </CustomTab>
           <CustomTab
             count={tableCounts.txsCount}
             isDisabled={txCountLoading || tableCounts.txsCount === 0}
-            onClick={() => handleTabChange(TabIndex.Txs)}
+            onClick={handleTabChange(TabIndex.Txs)}
           >
             Transactions
           </CustomTab>
           <CustomTab
             count={tableCounts.codesCount}
             isDisabled={!tableCounts.codesCount}
-            onClick={() => handleTabChange(TabIndex.Codes)}
+            onClick={handleTabChange(TabIndex.Codes)}
             hidden={!wasm.enabled}
           >
             Codes
           </CustomTab>
           <CustomTab
             count={tableCounts.contractsCount}
             isDisabled={!tableCounts.contractsCount}
-            onClick={() => handleTabChange(TabIndex.Contracts)}
+            onClick={handleTabChange(TabIndex.Contracts)}
             hidden={!wasm.enabled}
           >
             Contracts
           </CustomTab>
           <CustomTab
             count={tableCounts.contractsAdminCount}
             isDisabled={!tableCounts.contractsAdminCount}
-            onClick={() => handleTabChange(TabIndex.Admins)}
+            onClick={handleTabChange(TabIndex.Admins)}
             hidden={!wasm.enabled}
           >
             Admins
           </CustomTab>
           <CustomTab
             count={tableCounts.proposalsCount}
             isDisabled={!tableCounts.proposalsCount}
-            onClick={() => handleTabChange(TabIndex.Proposals)}
+            onClick={handleTabChange(TabIndex.Proposals)}
           >
             Proposals
           </CustomTab>
@@ -192,7 +230,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <AssetsSection
                 walletAddress={accountAddress}
-                onViewMore={() => handleTabChange(TabIndex.Assets)}
+                onViewMore={handleTabChange(TabIndex.Assets)}
               />
             </Flex>
             <Flex
@@ -201,13 +239,13 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             >
               <DelegationsSection
                 walletAddress={accountAddress}
-                onViewMore={() => handleTabChange(TabIndex.Delegations)}
+                onViewMore={handleTabChange(TabIndex.Delegations)}
               />
             </Flex>
             <TxsTable
               accountId={accountId}
               scrollComponentId={tableHeaderId}
-              onViewMore={() => handleTabChange(TabIndex.Txs)}
+              onViewMore={handleTabChange(TabIndex.Txs)}
             />
             {wasm.enabled && (
               <>
@@ -216,21 +254,21 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
                   scrollComponentId={tableHeaderId}
                   totalData={tableCounts.codesCount}
                   refetchCount={refetchCodesCount}
-                  onViewMore={() => handleTabChange(TabIndex.Codes)}
+                  onViewMore={handleTabChange(TabIndex.Codes)}
                 />
                 <InstantiatedContractsTable
                   walletAddress={accountAddress}
                   scrollComponentId={tableHeaderId}
                   totalData={tableCounts.contractsCount}
                   refetchCount={refetchContractsCount}
-                  onViewMore={() => handleTabChange(TabIndex.Contracts)}
+                  onViewMore={handleTabChange(TabIndex.Contracts)}
                 />
                 <AdminContractsTable
                   walletAddress={accountAddress}
                   scrollComponentId={tableHeaderId}
                   totalData={tableCounts.contractsAdminCount}
                   refetchCount={refetchContractsAdminCount}
-                  onViewMore={() => handleTabChange(TabIndex.Admins)}
+                  onViewMore={handleTabChange(TabIndex.Admins)}
                 />
               </>
             )}
@@ -239,7 +277,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               scrollComponentId={tableHeaderId}
               totalData={tableCounts.proposalsCount}
               refetchCount={refetchProposalsCount}
-              onViewMore={() => handleTabChange(TabIndex.Proposals)}
+              onViewMore={handleTabChange(TabIndex.Proposals)}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -296,10 +334,15 @@ const AccountDetails = () => {
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
   ).toLowerCase() as HumanAddr;
+  const tab = getFirstQueryParam(router.query.tab) as TabIndex;
 
   useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_ACCOUNT_DETAIL);
-  }, [router.isReady]);
+    if (router.isReady)
+      AmpTrack(AmpEvent.TO_ACCOUNT_DETAIL, { ...(tab && { tab }) });
+  }, [router.isReady, tab]);
+
+  if (!router.isReady) return <Loading />;
+
   return (
     <PageContainer>
       {validateUserAddress(accountAddressParam) &&