From bf8af203231d9a032cb724ee127657817b218122 Mon Sep 17 00:00:00 2001 From: Joanna Dyczka Date: Mon, 26 Feb 2024 12:50:13 +0100 Subject: [PATCH] #217 add DRepDirectory page and nav items --- .../frontend/public/icons/DRepDirectory.svg | 13 ++ .../public/icons/DRepDirectoryActive.svg | 13 ++ govtool/frontend/src/App.tsx | 11 +- .../components/organisms/DashboardTopNav.tsx | 186 +++++++++--------- .../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 | 5 +- govtool/frontend/src/i18n/locales/en.ts | 1 + govtool/frontend/src/pages/DRepDirectory.tsx | 18 ++ .../src/pages/DRepDirectoryContent.tsx | 18 ++ govtool/frontend/src/pages/Dashboard.tsx | 6 +- govtool/frontend/src/pages/index.ts | 2 + govtool/frontend/src/theme.ts | 23 +++ 15 files changed, 448 insertions(+), 96 deletions(-) create mode 100644 govtool/frontend/public/icons/DRepDirectory.svg create mode 100644 govtool/frontend/public/icons/DRepDirectoryActive.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 create mode 100644 govtool/frontend/src/pages/DRepDirectoryContent.tsx 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/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/src/App.tsx b/govtool/frontend/src/App.tsx index 13bc34a7d..842b3d6de 100644 --- a/govtool/frontend/src/App.tsx +++ b/govtool/frontend/src/App.tsx @@ -22,6 +22,8 @@ import { GovernanceActionsCategory, DashboardGovernanceActionsCategory, RetireAsSoleVoter, + DRepDirectory, + DRepDirectoryContent, } from "@pages"; import { callAll, @@ -114,7 +116,12 @@ export default function App() { path={PATHS.dashboard_governance_actions_category} element={} /> + } + /> + } /> } /> } /> - 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 00f44fedd..194f949d7 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,13 +9,14 @@ 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; isVotingPowerHidden?: boolean; + sx?: BoxProps["sx"]; }; const DRAWER_PADDING = 2; @@ -27,6 +28,7 @@ export const DashboardTopNav = ({ imageWidth, imageHeight, isVotingPowerHidden, + sx }: DashboardTopNavProps) => { const { isMobile, screenWidth } = useScreenDimension(); const { voter } = useCardano(); @@ -40,7 +42,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} @@ -80,93 +85,98 @@ 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 && } + + {(voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter) && } 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} + + +