diff --git a/apps/deploy-web/src/components/authorizations/GrantModal.tsx b/apps/deploy-web/src/components/authorizations/GrantModal.tsx index f4c3749e4..a7c847049 100644 --- 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 = ({ editingGrant, addre min={0} step={0.000001} max={denomData?.inputMax} - startIcon={{denomData?.label}} + startIcon={{denomData?.label}} 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 index 46ede2fae..0d6e0cb41 100644 --- 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 = ({ 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 => , - url: UrlService.home(), - activeRoutes: [UrlService.home()] - }, - { - title: "Deployments", - icon: props => , - url: UrlService.deploymentList(), - activeRoutes: [UrlService.deploymentList(), "/deployments", "/new-deployment"] - }, - { - title: "Templates", - icon: props => , - url: UrlService.templates(), - activeRoutes: [UrlService.templates()] - }, - { - title: "SDL Builder", - icon: props => , - url: UrlService.sdlBuilder(), - activeRoutes: [UrlService.sdlBuilder()], - testId: "sidebar-sdl-builder-link" - }, - { - title: "Providers", - icon: props => , - url: UrlService.providers(), - activeRoutes: [UrlService.providers()] - }, - { - title: "FAQ", - icon: props => , - url: UrlService.faq(), - activeRoutes: [UrlService.faq()] - }, - { - title: "Settings", - icon: props => , - url: UrlService.settings(), - activeRoutes: [UrlService.settings()] - } - ] - }, - { - hasDivider: true, - routes: [ - { - title: "Akash Network", - icon: props => Akash Logo, - url: "https://akash.network", - activeRoutes: [], - target: "_blank" - }, - { - title: "Stats", - icon: props => , - url: "https://stats.akash.network", - activeRoutes: [], - target: "_blank" - }, - { - title: "Price Compare", - icon: props => , - url: "https://akash.network/about/pricing/custom/", - activeRoutes: [], - target: "_blank" - }, - { - title: "API", - icon: props => , - url: "https://api.cloudmos.io/v1/swagger", - activeRoutes: [], - target: "_blank" - }, - { - title: "Docs", - icon: props => , - url: "https://akash.network/docs", - activeRoutes: [], - target: "_blank" - } - ] + const mainRoutes = useMemo(() => { + const routes = [ + { + title: "Home", + icon: props => , + url: UrlService.home(), + activeRoutes: [UrlService.home()] + }, + { + title: "Deployments", + icon: props => , + url: UrlService.deploymentList(), + activeRoutes: [UrlService.deploymentList(), "/deployments", "/new-deployment"] + }, + { + title: "Templates", + icon: props => , + url: UrlService.templates(), + activeRoutes: [UrlService.templates()] + }, + { + title: "SDL Builder", + icon: props => , + url: UrlService.sdlBuilder(), + activeRoutes: [UrlService.sdlBuilder()], + testId: "sidebar-sdl-builder-link" + }, + { + title: "Providers", + icon: props => , + url: UrlService.providers(), + activeRoutes: [UrlService.providers()] + }, + { + title: "FAQ", + icon: props => , + url: UrlService.faq(), + activeRoutes: [UrlService.faq()] + } + ]; + + if (wallet.isWalletConnected && !wallet.isManaged) { + routes.push({ + title: "Settings", + icon: 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 => Akash Logo, + url: "https://akash.network", + activeRoutes: [], + target: "_blank" + }, + { + title: "Stats", + icon: props => , + url: "https://stats.akash.network", + activeRoutes: [], + target: "_blank" + }, + { + title: "Price Compare", + icon: props => , + url: "https://akash.network/about/pricing/custom/", + activeRoutes: [], + target: "_blank" + }, + { + title: "API", + icon: props => , + url: "https://api.cloudmos.io/v1/swagger", + activeRoutes: [], + target: "_blank" + }, + { + title: "Docs", + icon: props => , + url: "https://akash.network/docs", + activeRoutes: [], + target: "_blank" + } + ] + } + ], + [mainRoutes] + ); const onToggleMenuClick = () => { setIsHovering(false); @@ -173,7 +187,7 @@ export const Sidebar: React.FunctionComponent = ({ isMobileOpen, handleDr {_isNavOpen && (
- + {wallet.isWalletConnected && !wallet.isManaged && }
{ 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);