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 c73ca3bfb..fc20a4611 100644 --- a/govtool/frontend/src/App.tsx +++ b/govtool/frontend/src/App.tsx @@ -16,6 +16,7 @@ import { Dashboard, DashboardGovernanceActionsCategory, DelegateTodRep, + DRepDirectory, ErrorPage, GovernanceActionDetails, GovernanceActions, @@ -104,7 +105,12 @@ export default () => { 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 186752f80..b91dec294 100644 --- a/govtool/frontend/src/components/atoms/index.ts +++ b/govtool/frontend/src/components/atoms/index.ts @@ -2,6 +2,7 @@ export * from "./ActionRadio"; export * from "./Background"; export * from "./Button"; export * from "./Checkbox"; +export * from "./ContentBox"; export * from "./CopyButton"; export * from "./DrawerLink"; export * from "./ExternalModalButton"; @@ -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/AutomatedVotingCard.tsx b/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx index 7deef9a44..0ac7d78ec 100644 --- a/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx +++ b/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx @@ -1,8 +1,8 @@ import { Box, Divider } from "@mui/material"; -import { AutomatedVotingCardProps } from "./types"; import { Button, Spacer, Typography } from "@atoms"; import { useScreenDimension, useTranslation } from "@hooks"; +import { AutomatedVotingCardProps } from "./types"; export const AutomatedVotingCard = ({ description, diff --git a/govtool/frontend/src/components/molecules/PageTitle.tsx b/govtool/frontend/src/components/molecules/PageTitle.tsx new file mode 100644 index 000000000..6105f2f61 --- /dev/null +++ b/govtool/frontend/src/components/molecules/PageTitle.tsx @@ -0,0 +1,24 @@ +import { useScreenDimension } from "@hooks"; +import { FC } from "react"; +import { Typography, PagePaddingBox, ContentBox } from "@/components/atoms"; + +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 285228978..babd0e85e 100644 --- a/govtool/frontend/src/components/molecules/index.ts +++ b/govtool/frontend/src/components/molecules/index.ts @@ -30,6 +30,7 @@ export * from "./Share"; export * from "./SliderArrow"; export * from "./SliderArrows"; export * from "./Step"; +export * from "./PageTitle"; export * from "./VoteActionForm"; export * from "./VotesSubmitted"; export * from "./WalletInfoCard"; diff --git a/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx b/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx index 4848be2de..2f5d8abcf 100644 --- a/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx +++ b/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx @@ -53,7 +53,7 @@ export const AutomatedVotingOptions = () => { onClickDelegate={() => {}} onClickInfo={() => {}} title={t("dRepDirectory.abstainCardTitle")} - votingPower={"99,111,111"} + votingPower="99,111,111" /> { onClickDelegate={() => {}} onClickInfo={() => {}} title={t("dRepDirectory.noConfidenceTitle")} - votingPower={"99,111,111"} + votingPower="99,111,111" /> ) : null} diff --git a/govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx b/govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx new file mode 100644 index 000000000..cfdbde3d1 --- /dev/null +++ b/govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx @@ -0,0 +1,17 @@ +import { FC } from "react"; + +interface DRepDirectoryContentProps { + isConnected?: boolean; +} + +export const DRepDirectoryContent: FC = ({ + isConnected, +}) => ( + <> +

DRepDirectory

+

+ connected: + {String(!!isConnected)} +

+ +); diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index bcb646f55..e6cf14e92 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -15,6 +15,7 @@ export * from "./DelegateTodRepStepOne"; export * from "./DelegateTodRepStepTwo"; export * from "./Drawer"; export * from "./DrawerMobile"; +export * from "./DRepDirectoryContent"; export * from "./EditDRepInfoSteps"; export * from "./ExternalLinkModal"; export * from "./Footer"; diff --git a/govtool/frontend/src/consts/icons.ts b/govtool/frontend/src/consts/icons.ts index dfabf260d..02c6d5740 100644 --- a/govtool/frontend/src/consts/icons.ts +++ b/govtool/frontend/src/consts/icons.ts @@ -15,6 +15,8 @@ export const ICONS = { dashboardIcon: "/icons/Dashboard.svg", download: "/icons/Download.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 3361f31a3..b58c4b545 100644 --- a/govtool/frontend/src/consts/paths.ts +++ b/govtool/frontend/src/consts/paths.ts @@ -5,7 +5,9 @@ export const PATHS = { dashboardGovernanceActionsAction: "/connected/governance_actions/:proposalId", dashboardGovernanceActionsCategory: "/connected/governance_actions/category/:category", + dashboardDRepDirectory: "/connected/drep_directory", delegateTodRep: "/delegate", + dRepDirectory: "/drep_directory", editDrepMetadata: "/edit_drep", error: "/error", faqs: "/faqs", diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index d9413a52a..794eb0f1e 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -242,6 +242,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..71e4d38ec --- /dev/null +++ b/govtool/frontend/src/pages/DRepDirectory.tsx @@ -0,0 +1,33 @@ +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/index.ts b/govtool/frontend/src/pages/index.ts index d1878f196..3bd34f2bb 100644 --- a/govtool/frontend/src/pages/index.ts +++ b/govtool/frontend/src/pages/index.ts @@ -3,12 +3,14 @@ export * from "./CreateGovernanceAction"; export * from "./Dashboard"; export * from "./DashboardGovernanceActionsCategory"; export * from "./DelegateTodRep"; +export * from "./DRepDirectory"; export * from "./EditDRepMetadata"; export * from "./ErrorPage"; export * from "./GovernanceActionDetails"; export * from "./GovernanceActions"; export * from "./GovernanceActionsCategory"; export * from "./Home"; +export * from "./RegisterAsSoleVoter"; export * from "./RegisterAsdRep"; export * from "./RegisterAsSoleVoter"; export * from "./RetireAsDrep";