diff --git a/CHANGELOG.md b/CHANGELOG.md index a772968c2..fdf9077c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED` changes. ## [Unreleased] +- Add DRep directory page [Issue 217](https://github.com/IntersectMBO/govtool/issues/217) - Create GA creation form [Issue 360](https://github.com/IntersectMBO/govtool/issues/360) - Create TextArea [Issue 110](https://github.com/IntersectMBO/govtool/issues/110) - Abandoning registration as DRep [Issue 151](https://github.com/IntersectMBO/govtool/issues/151) diff --git a/govtool/frontend/public/icons/DRepDirectory.svg b/govtool/frontend/public/icons/DRepDirectory.svg new file mode 100644 index 000000000..b6cf0553d --- /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..7e012314e --- /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 3c6ead960..9c279e26b 100644 --- a/govtool/frontend/src/App.tsx +++ b/govtool/frontend/src/App.tsx @@ -22,6 +22,7 @@ import { GovernanceActionsCategory, DashboardGovernanceActionsCategory, RetireAsSoleVoter, + DRepDirectory, } from "@pages"; import { callAll, @@ -115,7 +116,12 @@ export default function App() { path={PATHS.dashboardGovernanceActionsCategory} element={} /> + } + /> + } /> } diff --git a/govtool/frontend/src/components/atoms/ContentBox.tsx b/govtool/frontend/src/components/atoms/ContentBox.tsx new file mode 100644 index 000000000..c2f058766 --- /dev/null +++ b/govtool/frontend/src/components/atoms/ContentBox.tsx @@ -0,0 +1,8 @@ +import { Box, BoxProps } from "@mui/material"; +import { FC } from "react"; + +export const ContentBox: FC = ({ children, ...props }) => ( + + {children} + +); diff --git a/govtool/frontend/src/components/atoms/PagePaddingBox.tsx b/govtool/frontend/src/components/atoms/PagePaddingBox.tsx new file mode 100644 index 000000000..72f0abc4c --- /dev/null +++ b/govtool/frontend/src/components/atoms/PagePaddingBox.tsx @@ -0,0 +1,8 @@ +import { Box, BoxProps } from "@mui/material"; +import { FC } from "react"; + +export const PagePaddingBox: FC = ({ children, ...props }) => ( + + {children} + +); diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts index 7072b7635..6caaf1961 100644 --- a/govtool/frontend/src/components/atoms/index.ts +++ b/govtool/frontend/src/components/atoms/index.ts @@ -3,6 +3,7 @@ export * from "./Background"; export * from "./Button"; export * from "./Checkbox"; export * from "./ClickOutside"; +export * from "./ContentBox"; export * from "./CopyButton"; export * from "./DrawerLink"; export * from "./FormErrorMessage"; @@ -16,6 +17,7 @@ export * from "./modal/Modal"; export * from "./modal/ModalContents"; export * from "./modal/ModalHeader"; export * from "./modal/ModalWrapper"; +export * from "./PagePaddingBox"; export * from "./Radio"; export * from "./ScrollToManage"; export * from "./ScrollToTop"; diff --git a/govtool/frontend/src/components/molecules/PageTitle.tsx b/govtool/frontend/src/components/molecules/PageTitle.tsx new file mode 100644 index 000000000..21687f0fa --- /dev/null +++ b/govtool/frontend/src/components/molecules/PageTitle.tsx @@ -0,0 +1,24 @@ +import { useScreenDimension } from "@hooks"; +import { Typography, PagePaddingBox, ContentBox } from "@/components/atoms"; +import { FC } from "react"; + +interface PageTitleProps { + title: string; +} + +export const PageTitle: FC = ({ title }) => { + const { isMobile } = useScreenDimension(); + + return ( + `1px solid ${theme.palette.neutralWhite}`} + py={3} + > + + + {title} + + + + ); +}; diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts index fb3f136af..d043379db 100644 --- a/govtool/frontend/src/components/molecules/index.ts +++ b/govtool/frontend/src/components/molecules/index.ts @@ -13,6 +13,7 @@ export * from "./GovernanceActionsFilters"; export * from "./GovernanceActionsSorting"; export * from "./GovernanceVotedOnCard"; export * from "./OrderActionsChip"; +export * from "./PageTitle"; export * from "./VoteActionForm"; export * from "./VotesSubmitted"; export * from "./WalletInfoCard"; diff --git a/govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx b/govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx new file mode 100644 index 000000000..dabdb8068 --- /dev/null +++ b/govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx @@ -0,0 +1,16 @@ +import { FC } from "react"; + +interface DRepDirectoryContentProps { + isConnected?: boolean; +} + +export const DRepDirectoryContent: FC = ({ + isConnected, +}) => { + return ( + <> +

DRepDirectory

+

connected: {String(!!isConnected)}

+ + ); +}; diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index 909081196..b5ef181bf 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -16,6 +16,7 @@ export * from "./DelegateTodRepStepOne"; export * from "./DelegateTodRepStepTwo"; export * from "./Drawer"; export * from "./DrawerMobile"; +export * from "./DRepDirectoryContent"; export * from "./ExternalLinkModal"; export * from "./Footer"; export * from "./GovernanceActionDetailsCard"; diff --git a/govtool/frontend/src/consts/icons.ts b/govtool/frontend/src/consts/icons.ts index 93574c43b..88b7914a1 100644 --- a/govtool/frontend/src/consts/icons.ts +++ b/govtool/frontend/src/consts/icons.ts @@ -13,6 +13,8 @@ export const ICONS = { dashboardActiveIcon: "/icons/DashboardActive.svg", dashboardIcon: "/icons/Dashboard.svg", drawerIcon: "/icons/DrawerIcon.svg", + dRepDirectoryActiveIcon: "/icons/DRepDirectoryActive.svg", + dRepDirectoryIcon: "/icons/DRepDirectory.svg", externalLinkIcon: "/icons/ExternalLink.svg", faqsActiveIcon: "/icons/FaqsActive.svg", faqsIcon: "/icons/Faqs.svg", diff --git a/govtool/frontend/src/consts/navItems.ts b/govtool/frontend/src/consts/navItems.ts index 1c3d0ec37..643f7a025 100644 --- a/govtool/frontend/src/consts/navItems.ts +++ b/govtool/frontend/src/consts/navItems.ts @@ -1,3 +1,4 @@ +import i18n from "@/i18n"; import { ICONS } from "./icons"; import { PATHS } from "./paths"; @@ -8,6 +9,11 @@ export const NAV_ITEMS = [ label: "Dashboard", newTabLink: null, }, + { + dataTestId: "drep-directory-link", + navTo: PATHS.dRepDirectory, + label: i18n.t("dRepDirectory.title"), + }, { dataTestId: "governance-actions-link", navTo: PATHS.governanceActions, @@ -37,6 +43,13 @@ export const CONNECTED_NAV_ITEMS = [ icon: ICONS.dashboardIcon, newTabLink: null, }, + { + dataTestId: "drep-directory-link", + label: i18n.t("dRepDirectory.title"), + navTo: PATHS.dashboardDRepDirectory, + activeIcon: ICONS.dRepDirectoryActiveIcon, + icon: ICONS.dRepDirectoryIcon, + }, { dataTestId: "governance-actions-link", label: "Governance Actions", diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts index 679962a36..bf56f4a2e 100644 --- a/govtool/frontend/src/consts/paths.ts +++ b/govtool/frontend/src/consts/paths.ts @@ -4,8 +4,10 @@ export const PATHS = { dashboardGovernanceActionsCategory: "/connected/governance_actions/category/:category", dashboardGovernanceActions: "/connected/governance_actions", + dashboardDRepDirectory: "/connected/drep_directory", dashboard: "/dashboard", delegateTodRep: "/delegate", + dRepDirectory: "/drep_directory", error: "/error", faqs: "/faqs", governanceActions: "/governance_actions", diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 258c5f27d..6a593b1dc 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -173,6 +173,7 @@ export const en = { noConfidenceDescription: "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals", noConfidenceTitle: "Signal No Confidence on Every Vote", + title: "DRep Directory", votingPower: "Voting Power", }, errorPage: { diff --git a/govtool/frontend/src/pages/DRepDirectory.tsx b/govtool/frontend/src/pages/DRepDirectory.tsx new file mode 100644 index 000000000..1c87e877a --- /dev/null +++ b/govtool/frontend/src/pages/DRepDirectory.tsx @@ -0,0 +1,32 @@ +import { useTranslation } from "@hooks"; +import { checkIsWalletConnected } from "@/utils"; +import { Background, PagePaddingBox, ContentBox } from "@/components/atoms"; +import { DRepDirectoryContent, TopNav } from "@/components/organisms"; +import { PageTitle } from "@/components/molecules"; + +export const DRepDirectory = () => { + const { t } = useTranslation(); + + const isConnected = !checkIsWalletConnected(); + + if (isConnected) + return ( + + + + ); + + return ( + + + + + + + + + + + + ); +}; diff --git a/govtool/frontend/src/pages/Dashboard.tsx b/govtool/frontend/src/pages/Dashboard.tsx index cda265b50..fc5771b1d 100644 --- a/govtool/frontend/src/pages/Dashboard.tsx +++ b/govtool/frontend/src/pages/Dashboard.tsx @@ -3,7 +3,7 @@ import { useLocation, Outlet, useNavigate } from "react-router-dom"; import { Box } from "@mui/material"; import { Background, ScrollToManage } from "@atoms"; -import { PATHS } from "@consts"; +import { CONNECTED_NAV_ITEMS, PATHS } from "@consts"; import { useCardano } from "@context"; import { useScreenDimension, useTranslation } from "@hooks"; import { DashboardTopNav, Drawer, Footer } from "@organisms"; @@ -18,12 +18,11 @@ export const Dashboard = () => { const { t } = useTranslation(); const getPageTitle = (pathname: string) => { - if (pathname === PATHS.dashboard) { - return t("dashboard.title"); - } else if (pathname.includes(PATHS.dashboardGovernanceActions)) { - return t("dashboard.govActions.title"); - } - return ""; + if (pathname === PATHS.dashboard) return t("dashboard.title"); + return ( + Object.values(CONNECTED_NAV_ITEMS).find(({ navTo }) => navTo === pathname) + ?.label ?? "" + ); }; useEffect(() => { diff --git a/govtool/frontend/src/pages/index.ts b/govtool/frontend/src/pages/index.ts index c2f422300..0a9494a6d 100644 --- a/govtool/frontend/src/pages/index.ts +++ b/govtool/frontend/src/pages/index.ts @@ -1,4 +1,6 @@ export * from "./ChooseStakeKey"; +export * from "./CreateGovernanceAction"; +export * from "./DRepDirectory"; export * from "./Dashboard"; export * from "./DashboardGovernanceActionsCategory"; export * from "./DelegateTodRep"; @@ -7,6 +9,7 @@ export * from "./GovernanceActionDetails"; export * from "./GovernanceActions"; export * from "./GovernanceActionsCategory"; export * from "./Home"; +export * from "./RegisterAsSoleVoter"; export * from "./RegisterAsdRep"; export * from "./RetireAsSoleVoter"; export * from "./UpdatedRepMetadata"; diff --git a/govtool/frontend/src/theme.ts b/govtool/frontend/src/theme.ts index e13fdefc3..838a34727 100644 --- a/govtool/frontend/src/theme.ts +++ b/govtool/frontend/src/theme.ts @@ -1,6 +1,14 @@ import { createTheme } from "@mui/material/styles"; declare module "@mui/material/styles" { + interface BreakpointOverrides { + xxs: true; + xs: true; + sm: true; + md: true; + lg: true; + xl: true; + } interface Palette { accentOrange: string; accentYellow: string; @@ -50,6 +58,16 @@ declare module "@mui/material/styles" { export type Theme = typeof theme; export const theme = createTheme({ + breakpoints: { + values: { + xxs: 0, + xs: 375, + sm: 425, + md: 768, + lg: 1024, + xl: 1440, + }, + }, components: { MuiInputBase: { styleOverrides: {