Merge pull request #1026 from alleslabs/fix/nav-menu-on-mobile

fix: add missing menu items for sequencer tier
alleslabs · Jul 17, 2024 · 5d986fe · 5d986fe
2 parents 952d199 + 3bbfcc9
commit 5d986fe
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1026](https://github.com/alleslabs/celatone-frontend/pull/1026) Add missing menu items for sequencer tier
 - [#1025](https://github.com/alleslabs/celatone-frontend/pull/1025) Handle new tx query params for contract txs
 
 ## v1.7.1

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "celatone",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "author": "Alles Labs",
   "contributors": [
     {

diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
@@ -12,6 +12,7 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import { NetworkMenu } from "../NetworkMenu";
 import { AmpEvent, track } from "lib/amplitude";
@@ -29,10 +30,14 @@ import { CustomIcon } from "lib/components/icon";
 import { useIsCurrentPage } from "lib/hooks";
 import { usePublicProjectStore } from "lib/providers/store";
 
-import { getNavDrawerFull, getNavDrawerLite } from "./utils";
+import {
+  getNavDrawerFull,
+  getNavDrawerLite,
+  getNavDrawerSequencer,
+} from "./utils";
 
 export const NavDrawer = () => {
-  const { isFullTier } = useTierConfig();
+  const { tier } = useTierConfig();
   const govConfig = useGovConfig({ shouldRedirect: false });
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const moveConfig = useMoveConfig({ shouldRedirect: false });
@@ -43,37 +48,63 @@ export const NavDrawer = () => {
   const { getSavedPublicProjects } = usePublicProjectStore();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const navMenu = isFullTier
-    ? getNavDrawerFull(
-        govConfig.enabled,
-        wasmConfig.enabled,
-        moveConfig.enabled,
-        nftConfig.enabled
-      )
-    : getNavDrawerLite(
-        govConfig.enabled,
-        wasmConfig.enabled,
-        moveConfig.enabled
-      );
+  const navMenu = useMemo(() => {
+    let navMenuTmp = [];
+    switch (tier) {
+      case "full":
+        navMenuTmp = getNavDrawerFull(
+          govConfig.enabled,
+          wasmConfig.enabled,
+          moveConfig.enabled,
+          nftConfig.enabled
+        );
+        break;
+      case "sequencer":
+        navMenuTmp = getNavDrawerSequencer(
+          govConfig.enabled,
+          wasmConfig.enabled,
+          moveConfig.enabled
+        );
+        break;
+      case "lite":
+        navMenuTmp = getNavDrawerLite(
+          govConfig.enabled,
+          wasmConfig.enabled,
+          moveConfig.enabled
+        );
+        break;
+      default:
+        throw new Error(`Invalid tier: ${tier}`);
+    }
+
+    if (publicProject.enabled)
+      navMenuTmp.push({
+        category: "Public Projects",
+        slug: "public-projects",
+        submenu: [
+          ...getSavedPublicProjects().map((list) => ({
+            name: list.name,
+            slug: `/projects/${list.slug}`,
+            logo: list.logo,
+          })),
+          {
+            name: "View All Projects",
+            slug: "/projects",
+            icon: "public-project" as IconKeys,
+          },
+        ],
+      });
 
-  if (publicProject.enabled) {
-    navMenu.push({
-      category: "Public Projects",
-      slug: "public-projects",
-      submenu: [
-        ...getSavedPublicProjects().map((list) => ({
-          name: list.name,
-          slug: `/projects/${list.slug}`,
-          logo: list.logo,
-        })),
-        {
-          name: "View All Projects",
-          slug: "/projects",
-          icon: "public-project" as IconKeys,
-        },
-      ],
-    });
-  }
+    return navMenuTmp;
+  }, [
+    getSavedPublicProjects,
+    govConfig.enabled,
+    moveConfig.enabled,
+    nftConfig.enabled,
+    publicProject.enabled,
+    tier,
+    wasmConfig.enabled,
+  ]);
 
   return (
     <>

diff --git a/src/lib/layout/mobile/utils.ts b/src/lib/layout/mobile/utils.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import type { MenuInfo } from "../navbar/types";
 import type { IconKeys } from "lib/components/icon";
 
@@ -43,7 +44,7 @@ export const getNavDrawerLite = (
         ? [
             {
               name: "0x1 Page",
-              slug: "/account/0x1",
+              slug: "/accounts/0x1",
               icon: "hex" as IconKeys,
             },
           ]
@@ -52,6 +53,72 @@ export const getNavDrawerLite = (
   },
 ];
 
+export const getNavDrawerSequencer = (
+  isGov: boolean,
+  isWasm: boolean,
+  isMove: boolean
+): MenuInfo[] => [
+  {
+    category: "Overview",
+    slug: "overview",
+    submenu: [
+      { name: "Overview", slug: "/", icon: "home" as IconKeys },
+      {
+        name: "Transactions",
+        slug: "/txs",
+        icon: "file" as IconKeys,
+      },
+      {
+        name: "Blocks",
+        slug: "/blocks",
+        icon: "block" as IconKeys,
+      },
+      ...(isGov
+        ? [
+            {
+              name: "Validators",
+              slug: "/validators",
+              icon: "validator" as IconKeys,
+            },
+            {
+              name: "Proposals",
+              slug: "/proposals",
+              icon: "proposal" as IconKeys,
+            },
+          ]
+        : []),
+      ...(isWasm
+        ? [
+            {
+              name: "Codes",
+              slug: "/codes",
+              icon: "code" as IconKeys,
+            },
+            {
+              name: "Query",
+              slug: "/interact-contract",
+              icon: "query" as IconKeys,
+            },
+          ]
+        : []),
+      ...(isMove
+        ? [
+            {
+              name: "0x1 Page",
+              slug: "/accounts/0x1",
+              icon: "hex" as IconKeys,
+            },
+            {
+              name: "View Module",
+              slug: "/interact",
+              icon: "query" as IconKeys,
+            },
+          ]
+        : []),
+    ],
+  },
+];
+
 export const getNavDrawerFull = (
   isGov: boolean,
   isWasm: boolean,
@@ -115,7 +182,7 @@ export const getNavDrawerFull = (
             },
             {
               name: "0x1 Page",
-              slug: "/account/0x1",
+              slug: "/accounts/0x1",
               icon: "hex" as IconKeys,
             },
             {

diff --git a/src/lib/layout/subheader/index.tsx b/src/lib/layout/subheader/index.tsx
@@ -44,11 +44,7 @@ const SubHeader = () => {
         );
       case "sequencer":
       case "mesa":
-        return getSubHeaderSequencer(
-          govConfig.enabled,
-          wasmConfig.enabled,
-          nftConfig.enabled
-        );
+        return getSubHeaderSequencer(govConfig.enabled, wasmConfig.enabled);
       case "lite":
       default:
         return getSubHeaderLite(govConfig.enabled, wasmConfig.enabled);

diff --git a/src/lib/layout/subheader/utils.ts b/src/lib/layout/subheader/utils.ts
@@ -30,11 +30,7 @@ export const getSubHeaderLite = (isGov: boolean, isWasm: boolean) => {
   return base;
 };
 
-export const getSubHeaderSequencer = (
-  isGov: boolean,
-  isWasm: boolean,
-  isNft: boolean
-) => {
+export const getSubHeaderSequencer = (isGov: boolean, isWasm: boolean) => {
   const base: SubHeaderMenuInfo[] = [
     { name: "Overview", slug: "/", icon: "home" },
     { name: "Transactions", slug: "/txs", icon: "file" },
@@ -56,21 +52,7 @@ export const getSubHeaderSequencer = (
     );
 
   if (isWasm)
-    base.push(
-      { name: "Codes", slug: "/codes", icon: "code" as IconKeys }
-      // {
-      //   name: "Contracts",
-      //   slug: "/contracts",
-      //   icon: "contract-address" as IconKeys,
-      // }
-    );
-
-  if (isNft)
-    base.push({
-      name: "NFTs",
-      slug: "/nft-collections",
-      icon: "group" as IconKeys,
-    });
+    base.push({ name: "Codes", slug: "/codes", icon: "code" as IconKeys });
 
   return base;
 };

diff --git a/src/lib/pages/home/components/QuickMenuMobileLite.tsx b/src/lib/pages/home/components/QuickMenuMobileLite.tsx
@@ -142,7 +142,7 @@ export const QuickMenuMobileLite = ({ prettyName }: { prettyName: string }) => {
     if (move.enabled)
       base.push({
         title: "0x1 Page",
-        slug: "/account/0x1",
+        slug: "/accounts/0x1",
         icon: "hex" as IconKeys,
         isDocument: false,
       });