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 7db190366..2b7f615a0 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, @@ -103,7 +104,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 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/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 f412bbe21..e12ce4bc8 100644 --- a/govtool/frontend/src/components/molecules/index.ts +++ b/govtool/frontend/src/components/molecules/index.ts @@ -15,6 +15,7 @@ export * from "./GovernanceVotedOnCard"; export * from "./LinkWithIcon"; export * from "./OrderActionsChip"; 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 1085d0c4c..356eb19f6 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 "./ExternalLinkModal"; export * from "./Footer"; export * from "./GovernanceActionDetailsCard"; diff --git a/govtool/frontend/src/consts/icons.ts b/govtool/frontend/src/consts/icons.ts index 2a5fc394d..b6381d482 100644 --- a/govtool/frontend/src/consts/icons.ts +++ b/govtool/frontend/src/consts/icons.ts @@ -14,6 +14,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 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 2ba0d37f9..8bc043238 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -258,6 +258,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 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";