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

CHANGELOG.md

@@ -39,6 +39,8 @@ 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
+
 ### Improvements
 
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert

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

@@ -10,13 +10,14 @@ import {
   Image,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 
-import { useValidateAddress } from "lib/app-provider";
+import { useInternalNavigate, useValidateAddress } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
 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";
@@ -27,7 +28,7 @@ import {
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
-import { formatPrice, getFirstQueryParam, scrollToTop } from "lib/utils";
+import { formatPrice, getFirstQueryParam } from "lib/utils";
 
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
@@ -40,15 +41,17 @@ import {
 } from "./components/tables";
 import { useAccountTotalValue } from "./data";
 
+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 {
@@ -58,8 +61,9 @@ interface AccountDetailsBodyProps {
 const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
-  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);
@@ -76,14 +80,41 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
 
   const { totalAccountValue, isLoading } = useAccountTotalValue(accountAddress);
 
-  const handleTabChange = (tab: TabIndex) => {
-    AmpTrackUseTab(TabIndex[tab]);
-    setTabIndex(tab);
-    scrollToTop();
-  };
+  const handleTabChange = useCallback(
+    (nextTab: TabIndex) => {
+      if (nextTab === tab) return;
+      AmpTrackUseTab(nextTab);
+      navigate({
+        pathname: "/account/[accountAddress]/[tab]",
+        query: {
+          accountAddress,
+          tab: nextTab,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [accountAddress, tab, navigate]
+  );
 
   const displayName = publicInfo?.name ?? "Account Details";
 
+  useEffect(() => {
+    if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
+      navigate({
+        pathname: "/account/[accountAddress]/[tab]",
+        query: {
+          accountAddress,
+          tab: TabIndex.Overview,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    }
+  }, [router.isReady, tab, accountAddress, navigate]);
+
   return (
     <>
       <Flex direction="column" gap={1} mt={6} mb={6}>
@@ -135,7 +166,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </Flex>
       )}
 
-      <Tabs index={tabIndex}>
+      <Tabs index={Object.values(TabIndex).indexOf(tab)}>
         <TabList
           borderBottom="1px solid"
           borderColor="pebble.700"
@@ -325,10 +356,14 @@ const AccountDetails = () => {
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
   ) 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>

src/lib/pages/public-project/slug.tsx

@@ -1,12 +1,13 @@
 import { Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import { scrollToTop } from "lib/utils";
+import { getFirstQueryParam } from "lib/utils";
 
 import { DetailHeader } from "./components/DetailHeader";
 import { PublicProjectAccountTable } from "./components/table/account/PublicProjectAccountTable";
@@ -15,15 +16,16 @@ import { PublicProjectContractTable } from "./components/table/contract/PublicPr
 import { usePublicData } from "./data";
 
 enum TabIndex {
-  Overview,
-  Codes,
-  Contracts,
-  Accounts,
+  Overview = "overview",
+  Codes = "codes",
+  Contracts = "contracts",
+  Accounts = "accounts",
 }
 
-export const ProjectDetail = () => {
+const ProjectDetail = () => {
   const router = useRouter();
-  const [tabIndex, setTabIndex] = useState(TabIndex.Overview);
+  const navigate = useInternalNavigate();
+  const tab = getFirstQueryParam(router.query.tab) as TabIndex;
   const {
     publicCodes,
     publicContracts,
@@ -33,49 +35,73 @@ export const ProjectDetail = () => {
     isLoading,
   } = usePublicData();
 
-  useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_PROJECT_DETAIL);
-  }, [router.isReady]);
-
-  const handleOnViewMore = (tab: TabIndex) => {
-    setTabIndex(tab);
-    scrollToTop();
+  const handleTabChange = (nextTab: TabIndex) => () => {
+    if (nextTab === tab) return;
+    navigate({
+      pathname: "/public-project/[slug]/[tab]",
+      query: {
+        slug,
+        tab: nextTab,
+      },
+      options: {
+        shallow: true,
+      },
+    });
   };
 
+  useEffect(() => {
+    if (router.isReady) {
+      if (!tab || !Object.values(TabIndex).includes(tab)) {
+        navigate({
+          pathname: "/public-project/[slug]/[tab]",
+          query: {
+            slug,
+            tab: TabIndex.Overview,
+          },
+          options: {
+            shallow: true,
+          },
+        });
+      }
+      AmpTrack(AmpEvent.TO_PROJECT_DETAIL, { ...(tab && { tab }) });
+    }
+  }, [router.isReady, tab, slug, navigate]);
+
   if (isLoading) return <Loading />;
+
   return (
     <PageContainer>
       <DetailHeader details={projectDetail} slug={slug} />
-      <Tabs index={tabIndex}>
+      <Tabs index={Object.values(TabIndex).indexOf(tab)}>
         <TabList my={6} borderBottom="1px" borderColor="pebble.800">
           <CustomTab
             count={
               publicCodes.length +
               publicContracts.length +
               publicAccounts.length
             }
-            onClick={() => setTabIndex(TabIndex.Overview)}
+            onClick={handleTabChange(TabIndex.Overview)}
           >
             Overview
           </CustomTab>
           <CustomTab
             count={publicCodes.length}
             isDisabled={!publicCodes.length}
-            onClick={() => setTabIndex(TabIndex.Codes)}
+            onClick={handleTabChange(TabIndex.Codes)}
           >
             Codes
           </CustomTab>
           <CustomTab
             count={publicContracts.length}
             isDisabled={!publicContracts.length}
-            onClick={() => setTabIndex(TabIndex.Contracts)}
+            onClick={handleTabChange(TabIndex.Contracts)}
           >
             Contracts
           </CustomTab>
           <CustomTab
             count={publicAccounts.length}
             isDisabled={!publicAccounts.length}
-            onClick={() => setTabIndex(TabIndex.Accounts)}
+            onClick={handleTabChange(TabIndex.Accounts)}
           >
             Accounts
           </CustomTab>
@@ -85,15 +111,15 @@ export const ProjectDetail = () => {
           <TabPanel p={0}>
             <PublicProjectCodeTable
               codes={publicCodes}
-              onViewMore={() => handleOnViewMore(TabIndex.Codes)}
+              onViewMore={handleTabChange(TabIndex.Codes)}
             />
             <PublicProjectContractTable
               contracts={publicContracts}
-              onViewMore={() => handleOnViewMore(TabIndex.Contracts)}
+              onViewMore={handleTabChange(TabIndex.Contracts)}
             />
             <PublicProjectAccountTable
               accounts={publicAccounts}
-              onViewMore={() => handleOnViewMore(TabIndex.Accounts)}
+              onViewMore={handleTabChange(TabIndex.Accounts)}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -110,3 +136,5 @@ export const ProjectDetail = () => {
     </PageContainer>
   );
 };
+
+export default ProjectDetail;

src/pages/[network]/public-project/[slug]/[tab].tsx

@@ -0,0 +1,3 @@
+import ProjectDetail from "lib/pages/public-project/slug";
+
+export default ProjectDetail;

src/pages/[network]/public-project/[slug]/index.tsx

@@ -0,0 +1,3 @@
+import ProjectDetail from "lib/pages/public-project/slug";
+
+export default ProjectDetail;

src/pages/account/[accountAddress]/[tab].tsx

@@ -0,0 +1,3 @@
+import AccountDetails from "lib/pages/account-details";
+
+export default AccountDetails;

src/pages/account/[accountAddress]/index.tsx

@@ -0,0 +1,3 @@
+import AccountDetails from "lib/pages/account-details";
+
+export default AccountDetails;

src/pages/public-project/[slug]/[tab].tsx

@@ -0,0 +1,3 @@
+import ProjectDetail from "lib/pages/public-project/slug";
+
+export default ProjectDetail;

src/pages/public-project/[slug]/index.tsx

@@ -0,0 +1,3 @@
+import ProjectDetail from "lib/pages/public-project/slug";
+
+export default ProjectDetail;