From 7ae6457f6cbb550f9eb68680ed6938b2c65d1455 Mon Sep 17 00:00:00 2001 From: Joanna Dyczka Date: Mon, 26 Feb 2024 10:07:45 +0100 Subject: [PATCH] #217 add DRepDirectory page and nav items --- .../public/icons/DRepDIrectoryActive.svg | 13 ++ .../frontend/public/icons/DRepDirectory.svg | 13 ++ govtool/frontend/src/App.tsx | 9 +- .../components/organisms/DashboardTopNav.tsx | 199 +++++++++--------- .../src/components/organisms/MainLayout.tsx | 73 +++++++ .../src/components/organisms/NewTopNav.tsx | 161 ++++++++++++++ govtool/frontend/src/consts/icons.ts | 2 + govtool/frontend/src/consts/navItems.ts | 12 ++ govtool/frontend/src/consts/paths.ts | 1 + govtool/frontend/src/i18n/locales/en.ts | 3 + govtool/frontend/src/pages/DRepDirectory.tsx | 23 ++ govtool/frontend/src/pages/index.ts | 1 + govtool/frontend/src/theme.ts | 23 ++ 13 files changed, 435 insertions(+), 98 deletions(-) create mode 100644 govtool/frontend/public/icons/DRepDIrectoryActive.svg create mode 100644 govtool/frontend/public/icons/DRepDirectory.svg create mode 100644 govtool/frontend/src/components/organisms/MainLayout.tsx create mode 100644 govtool/frontend/src/components/organisms/NewTopNav.tsx create mode 100644 govtool/frontend/src/pages/DRepDirectory.tsx diff --git a/govtool/frontend/public/icons/DRepDIrectoryActive.svg b/govtool/frontend/public/icons/DRepDIrectoryActive.svg new file mode 100644 index 000000000..6f1fd125a --- /dev/null +++ b/govtool/frontend/public/icons/DRepDIrectoryActive.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/govtool/frontend/public/icons/DRepDirectory.svg b/govtool/frontend/public/icons/DRepDirectory.svg new file mode 100644 index 000000000..e112e6275 --- /dev/null +++ b/govtool/frontend/public/icons/DRepDirectory.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx index 91dab6356..03409674f 100644 --- a/govtool/frontend/src/App.tsx +++ b/govtool/frontend/src/App.tsx @@ -21,6 +21,7 @@ import { UpdatedRepMetadata, GovernanceActionsCategory, DashboardGovernanceActionsCategory, + DRepDirectory, } from "@pages"; import { callAll, @@ -113,6 +114,10 @@ export default function App() { element={} /> + } + /> } /> } /> } /> @@ -126,8 +131,8 @@ export default function App() { handleClose={ !modals[modal.type].preventDismiss ? callAll(modals[modal.type]?.onClose, () => - openModal({ type: "none", state: null }) - ) + openModal({ type: "none", state: null }) + ) : undefined } > diff --git a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx index 5bf0a3be4..be9b591ff 100644 --- a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx +++ b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { Box, Grid, IconButton, SwipeableDrawer } from "@mui/material"; +import { Box, BoxProps, Grid, IconButton, SwipeableDrawer } from "@mui/material"; import { Background, Link, VotingPowerChips, Typography } from "@atoms"; import { useScreenDimension, useTranslation } from "@hooks"; @@ -9,12 +9,13 @@ import { useCardano } from "@context"; import { DRepInfoCard, WalletInfoCard } from "@molecules"; import { openInNewTab } from "@utils"; -type DashboardTopNavProps = { +export type DashboardTopNavProps = { imageSRC?: string; imageWidth?: number; imageHeight?: number; title: string; isDrawer?: boolean; + sx?: BoxProps["sx"]; }; const DRAWER_PADDING = 2; @@ -25,6 +26,7 @@ export const DashboardTopNav = ({ imageSRC, imageWidth, imageHeight, + sx }: DashboardTopNavProps) => { const { isMobile, screenWidth } = useScreenDimension(); const { dRep } = useCardano(); @@ -38,7 +40,10 @@ export const DashboardTopNav = ({ py={3} display={"flex"} bgcolor={isMobile ? "#FBFBFF" : undefined} - sx={{ backdropFilter: "blur(10px)" }} + sx={{ + backdropFilter: "blur(10px)", + ...sx + }} alignItems={"center"} justifyContent={"space-between"} borderBottom={1} @@ -77,101 +82,103 @@ export const DashboardTopNav = ({ )} - {isMobile && ( - setIsDrawerOpen(false)} - onOpen={() => setIsDrawerOpen(true)} - > - - - - - - setIsDrawerOpen(false)} + { + isMobile && ( + setIsDrawerOpen(false)} + onOpen={() => setIsDrawerOpen(true)} + > + + + + - - - - - - { - setIsDrawerOpen(false); - }} - isConnectWallet - /> - - - { - setIsDrawerOpen(false); - }} - isConnectWallet - /> + + setIsDrawerOpen(false)} + > + + + + + + { + setIsDrawerOpen(false); + }} + isConnectWallet + /> + + + { + setIsDrawerOpen(false); + }} + isConnectWallet + /> + + + { + openInNewTab( + "https://docs.sanchogov.tools/about/what-is-sanchonet-govtool" + ); + setIsDrawerOpen(false); + }} + isConnectWallet + /> + + + { + openInNewTab("https://docs.sanchogov.tools/faqs"); + setIsDrawerOpen(false); + }} + isConnectWallet + /> + - - { - openInNewTab( - "https://docs.sanchogov.tools/about/what-is-sanchonet-govtool" - ); - setIsDrawerOpen(false); - }} - isConnectWallet - /> - - - { - openInNewTab("https://docs.sanchogov.tools/faqs"); - setIsDrawerOpen(false); - }} - isConnectWallet - /> - - + + {dRep?.isRegistered && } + + - {dRep?.isRegistered && } - - - - - - )} - + + + ) + } + ); }; diff --git a/govtool/frontend/src/components/organisms/MainLayout.tsx b/govtool/frontend/src/components/organisms/MainLayout.tsx new file mode 100644 index 000000000..1dc08675a --- /dev/null +++ b/govtool/frontend/src/components/organisms/MainLayout.tsx @@ -0,0 +1,73 @@ +import { Box } from "@mui/material"; +import { ComponentProps, FC, PropsWithChildren } from "react"; + +import { ICONS } from "@consts"; +import { Background, Typography } from "@atoms"; +import { useScreenDimension } from "@hooks"; +import { DashboardTopNav, DashboardTopNavProps, Drawer, Footer } from "@organisms"; +import { NewTopNav } from "./NewTopNav"; +import { theme } from "@/theme"; + +export type DashboardLayoutProps = PropsWithChildren + & Pick + & ComponentProps & { + isConnected: boolean; + hideDrawer?: boolean; + }; + +export const MainLayout: FC = ({ + children, + sx, + title, + isConnected, + hideDrawer, + ...boxProps +}) => { + const { isMobile } = useScreenDimension(); + + const showDrawer = !!isConnected && !isMobile && !hideDrawer; + + return ( + + + {showDrawer && } + + + {isConnected ? ( + + ) : ( + <> + + {title && ( + + {title} + + )} + + )} + + {children} + + +