feat(setting): only show setting page for a connected user wallet

refs #247
akash-network · Aug 13, 2024 · 4dd6e51 · 4dd6e51
1 parent fa9de2f
commit 4dd6e51
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 92 deletions.
diff --git a/apps/deploy-web/src/components/authorizations/GrantModal.tsx b/apps/deploy-web/src/components/authorizations/GrantModal.tsx
@@ -188,7 +188,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
                     min={0}
                     step={0.000001}
                     max={denomData?.inputMax}
-                    startIcon={<span className="text-xs pl-2">{denomData?.label}</span>}
+                    startIcon={<span className="pl-2 text-xs">{denomData?.label}</span>}
                     className="ml-4 flex-grow"
                   />
                 );

diff --git a/apps/deploy-web/src/components/layout/Sidebar.tsx b/apps/deploy-web/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useMemo, useState } from "react";
 import { Badge, Button, buttonVariants } from "@akashnetwork/ui/components";
 import Drawer from "@mui/material/Drawer";
 import { useTheme as useMuiTheme } from "@mui/material/styles";
@@ -11,6 +11,7 @@ import getConfig from "next/config";
 import Image from "next/image";
 import Link from "next/link";
 
+import { useWallet } from "@src/context/WalletProvider";
 import sdlStore from "@src/store/sdlStore";
 import { ISidebarGroupMenu } from "@src/types";
 import { closedDrawerWidth, drawerWidth } from "@src/utils/constants";
@@ -37,97 +38,110 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
   const [, setDeploySdl] = useAtom(sdlStore.deploySdl);
   const muiTheme = useMuiTheme();
   const smallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
+  const wallet = useWallet();
 
-  const routeGroups: ISidebarGroupMenu[] = [
-    {
-      hasDivider: false,
-      routes: [
-        {
-          title: "Home",
-          icon: props => <Home {...props} />,
-          url: UrlService.home(),
-          activeRoutes: [UrlService.home()]
-        },
-        {
-          title: "Deployments",
-          icon: props => <Cloud {...props} />,
-          url: UrlService.deploymentList(),
-          activeRoutes: [UrlService.deploymentList(), "/deployments", "/new-deployment"]
-        },
-        {
-          title: "Templates",
-          icon: props => <MultiplePages {...props} />,
-          url: UrlService.templates(),
-          activeRoutes: [UrlService.templates()]
-        },
-        {
-          title: "SDL Builder",
-          icon: props => <Tools {...props} />,
-          url: UrlService.sdlBuilder(),
-          activeRoutes: [UrlService.sdlBuilder()],
-          testId: "sidebar-sdl-builder-link"
-        },
-        {
-          title: "Providers",
-          icon: props => <Server {...props} />,
-          url: UrlService.providers(),
-          activeRoutes: [UrlService.providers()]
-        },
-        {
-          title: "FAQ",
-          icon: props => <HelpCircle {...props} />,
-          url: UrlService.faq(),
-          activeRoutes: [UrlService.faq()]
-        },
-        {
-          title: "Settings",
-          icon: props => <Settings {...props} />,
-          url: UrlService.settings(),
-          activeRoutes: [UrlService.settings()]
-        }
-      ]
-    },
-    {
-      hasDivider: true,
-      routes: [
-        {
-          title: "Akash Network",
-          icon: props => <Image src="/images/akash-logo.svg" alt="Akash Logo" quality={100} width={20} height={20} {...props} />,
-          url: "https://akash.network",
-          activeRoutes: [],
-          target: "_blank"
-        },
-        {
-          title: "Stats",
-          icon: props => <OpenInWindow {...props} />,
-          url: "https://stats.akash.network",
-          activeRoutes: [],
-          target: "_blank"
-        },
-        {
-          title: "Price Compare",
-          icon: props => <OpenInWindow {...props} />,
-          url: "https://akash.network/about/pricing/custom/",
-          activeRoutes: [],
-          target: "_blank"
-        },
-        {
-          title: "API",
-          icon: props => <OpenInWindow {...props} />,
-          url: "https://api.cloudmos.io/v1/swagger",
-          activeRoutes: [],
-          target: "_blank"
-        },
-        {
-          title: "Docs",
-          icon: props => <OpenInWindow {...props} />,
-          url: "https://akash.network/docs",
-          activeRoutes: [],
-          target: "_blank"
-        }
-      ]
+  const mainRoutes = useMemo(() => {
+    const routes = [
+      {
+        title: "Home",
+        icon: props => <Home {...props} />,
+        url: UrlService.home(),
+        activeRoutes: [UrlService.home()]
+      },
+      {
+        title: "Deployments",
+        icon: props => <Cloud {...props} />,
+        url: UrlService.deploymentList(),
+        activeRoutes: [UrlService.deploymentList(), "/deployments", "/new-deployment"]
+      },
+      {
+        title: "Templates",
+        icon: props => <MultiplePages {...props} />,
+        url: UrlService.templates(),
+        activeRoutes: [UrlService.templates()]
+      },
+      {
+        title: "SDL Builder",
+        icon: props => <Tools {...props} />,
+        url: UrlService.sdlBuilder(),
+        activeRoutes: [UrlService.sdlBuilder()],
+        testId: "sidebar-sdl-builder-link"
+      },
+      {
+        title: "Providers",
+        icon: props => <Server {...props} />,
+        url: UrlService.providers(),
+        activeRoutes: [UrlService.providers()]
+      },
+      {
+        title: "FAQ",
+        icon: props => <HelpCircle {...props} />,
+        url: UrlService.faq(),
+        activeRoutes: [UrlService.faq()]
+      }
+    ];
+
+    if (wallet.isWalletConnected && !wallet.isManaged) {
+      routes.push({
+        title: "Settings",
+        icon: props => <Settings {...props} />,
+        url: UrlService.settings(),
+        activeRoutes: [UrlService.settings()]
+      });
     }
-  ];
+
+    return routes;
+  }, [wallet]);
+
+  const routeGroups: ISidebarGroupMenu[] = useMemo(
+    () => [
+      {
+        hasDivider: false,
+        routes: mainRoutes
+      },
+      {
+        hasDivider: true,
+        routes: [
+          {
+            title: "Akash Network",
+            icon: props => <Image src="/images/akash-logo.svg" alt="Akash Logo" quality={100} width={20} height={20} {...props} />,
+            url: "https://akash.network",
+            activeRoutes: [],
+            target: "_blank"
+          },
+          {
+            title: "Stats",
+            icon: props => <OpenInWindow {...props} />,
+            url: "https://stats.akash.network",
+            activeRoutes: [],
+            target: "_blank"
+          },
+          {
+            title: "Price Compare",
+            icon: props => <OpenInWindow {...props} />,
+            url: "https://akash.network/about/pricing/custom/",
+            activeRoutes: [],
+            target: "_blank"
+          },
+          {
+            title: "API",
+            icon: props => <OpenInWindow {...props} />,
+            url: "https://api.cloudmos.io/v1/swagger",
+            activeRoutes: [],
+            target: "_blank"
+          },
+          {
+            title: "Docs",
+            icon: props => <OpenInWindow {...props} />,
+            url: "https://akash.network/docs",
+            activeRoutes: [],
+            target: "_blank"
+          }
+        ]
+      }
+    ],
+    [mainRoutes]
+  );
 
   const onToggleMenuClick = () => {
     setIsHovering(false);
@@ -173,7 +187,7 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
 
         {_isNavOpen && (
           <div className="space-y-2 pb-4 pl-4 pr-4">
-            <NodeStatusBar />
+            {wallet.isWalletConnected && !wallet.isManaged && <NodeStatusBar />}
 
             <div className="flex items-center justify-center space-x-1 pt-4">
               <Link

diff --git a/apps/deploy-web/src/components/settings/SettingsContainer.tsx b/apps/deploy-web/src/components/settings/SettingsContainer.tsx
@@ -2,12 +2,15 @@
 import { useState } from "react";
 import { Button } from "@akashnetwork/ui/components";
 import { Edit } from "iconoir-react";
+import { useRouter } from "next/navigation";
 import { NextSeo } from "next-seo";
 
 import { LocalDataManager } from "@src/components/settings/LocalDataManager";
 import { Fieldset } from "@src/components/shared/Fieldset";
 import { LabelValue } from "@src/components/shared/LabelValue";
+import { useWallet } from "@src/context/WalletProvider";
 import { useSelectedNetwork } from "@src/hooks/useSelectedNetwork";
+import { useWhen } from "@src/hooks/useWhen";
 import Layout from "../layout/Layout";
 import { CertificateList } from "./CertificateList";
 import CloudmosImportPanel from "./CloudmosImportPanel";
@@ -19,6 +22,10 @@ import { SettingsLayout, SettingsTabs } from "./SettingsLayout";
 export const SettingsContainer: React.FunctionComponent = () => {
   const [isSelectingNetwork, setIsSelectingNetwork] = useState(false);
   const selectedNetwork = useSelectedNetwork();
+  const wallet = useWallet();
+  const router = useRouter();
+
+  useWhen(!wallet.isWalletConnected || wallet.isManaged, () => router.push("/"));
 
   const onSelectNetworkModalClose = () => {
     setIsSelectingNetwork(false);