Skip to content

Commit

Permalink
#217 add DRepDirectory page and nav items
Browse files Browse the repository at this point in the history
  • Loading branch information
@j-dyczka
j-dyczka committed Feb 26, 2024
1 parent 7ac847f commit 7ae6457
Show file tree
Hide file tree
Showing 13 changed files with 435 additions and 98 deletions.
13 changes: 13 additions & 0 deletions govtool/frontend/public/icons/DRepDIrectoryActive.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions govtool/frontend/public/icons/DRepDirectory.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions govtool/frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
UpdatedRepMetadata,
GovernanceActionsCategory,
DashboardGovernanceActionsCategory,
DRepDirectory,
} from "@pages";
import {
callAll,
Expand Down Expand Up @@ -113,6 +114,10 @@ export default function App() {
element={<DashboardGovernanceActionsCategory />}
/>
</Route>
<Route
path={PATHS.dRepDirectory}
element={<DRepDirectory />}
/>
<Route path={PATHS.delegateTodRep} element={<DelegateTodRep />} />
<Route path={PATHS.registerAsdRep} element={<RegisterAsdRep />} />
<Route path={PATHS.stakeKeys} element={<ChooseStakeKey />} />
Expand All @@ -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
}
>
Expand Down
199 changes: 103 additions & 96 deletions govtool/frontend/src/components/organisms/DashboardTopNav.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;
Expand All @@ -25,6 +26,7 @@ export const DashboardTopNav = ({
imageSRC,
imageWidth,
imageHeight,
sx
}: DashboardTopNavProps) => {
const { isMobile, screenWidth } = useScreenDimension();
const { dRep } = useCardano();
Expand All @@ -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}
Expand Down Expand Up @@ -77,101 +82,103 @@ export const DashboardTopNav = ({
</IconButton>
)}
</Box>
{isMobile && (
<SwipeableDrawer
anchor="right"
open={isDrawerOpen}
onClose={() => setIsDrawerOpen(false)}
onOpen={() => setIsDrawerOpen(true)}
>
<Background>
<Box
flex={1}
px={DRAWER_PADDING}
pb={3}
display="flex"
flexDirection="column"
height={"100%"}
>
<Box flex={1}>
<Box
width={screenWidth - CALCULATED_DRAWER_PADDING}
display="flex"
flex={1}
py={3}
justifyContent="space-between"
>
<img src={ICONS.appLogoIcon} height={25} />
<IconButton
data-testid={"close-drawer-button"}
sx={{ padding: 0 }}
onClick={() => setIsDrawerOpen(false)}
{
isMobile && (
<SwipeableDrawer
anchor="right"
open={isDrawerOpen}
onClose={() => setIsDrawerOpen(false)}
onOpen={() => setIsDrawerOpen(true)}
>
<Background>
<Box
flex={1}
px={DRAWER_PADDING}
pb={3}
display="flex"
flexDirection="column"
height={"100%"}
>
<Box flex={1}>
<Box
width={screenWidth - CALCULATED_DRAWER_PADDING}
display="flex"
flex={1}
py={3}
justifyContent="space-between"
>
<img src={ICONS.closeDrawerIcon} />
</IconButton>
</Box>
<Grid container direction={"column"} rowGap={4} mt={6}>
<Grid item>
<Link
dataTestId="home-link"
navTo={PATHS.dashboard}
label={t("menu.myDashboard")}
size="big"
onClick={() => {
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
<Grid item>
<Link
dataTestId="governance-actions-link"
navTo={PATHS.dashboard_governance_actions}
label={t("menu.viewGovActions")}
size="big"
onClick={() => {
setIsDrawerOpen(false);
}}
isConnectWallet
/>
<img src={ICONS.appLogoIcon} height={25} />
<IconButton
data-testid={"close-drawer-button"}
sx={{ padding: 0 }}
onClick={() => setIsDrawerOpen(false)}
>
<img src={ICONS.closeDrawerIcon} />
</IconButton>
</Box>
<Grid container direction={"column"} rowGap={4} mt={6}>
<Grid item>
<Link
dataTestId="home-link"
navTo={PATHS.dashboard}
label={t("menu.myDashboard")}
size="big"
onClick={() => {
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
<Grid item>
<Link
dataTestId="governance-actions-link"
navTo={PATHS.dashboard_governance_actions}
label={t("menu.viewGovActions")}
size="big"
onClick={() => {
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
<Grid item>
<Link
dataTestId="guides-link"
navTo={""}
label={t("menu.guides")}
size="big"
onClick={() => {
openInNewTab(
"https://docs.sanchogov.tools/about/what-is-sanchonet-govtool"
);
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
<Grid item>
<Link
dataTestId="faqs-link"
navTo={""}
label={t("menu.faqs")}
size="big"
onClick={() => {
openInNewTab("https://docs.sanchogov.tools/faqs");
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
</Grid>
<Grid item>
<Link
dataTestId="guides-link"
navTo={""}
label={t("menu.guides")}
size="big"
onClick={() => {
openInNewTab(
"https://docs.sanchogov.tools/about/what-is-sanchonet-govtool"
);
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
<Grid item>
<Link
dataTestId="faqs-link"
navTo={""}
label={t("menu.faqs")}
size="big"
onClick={() => {
openInNewTab("https://docs.sanchogov.tools/faqs");
setIsDrawerOpen(false);
}}
isConnectWallet
/>
</Grid>
</Grid>
</Box>
{dRep?.isRegistered && <DRepInfoCard />}
<Box py={2} />
<WalletInfoCard />
</Box>
{dRep?.isRegistered && <DRepInfoCard />}
<Box py={2} />
<WalletInfoCard />
</Box>
</Background>
</SwipeableDrawer>
)}
</Box>
</Background>
</SwipeableDrawer>
)
}
</Box >
);
};
73 changes: 73 additions & 0 deletions govtool/frontend/src/components/organisms/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<DashboardTopNavProps, 'title'>
& ComponentProps<typeof Box> & {
isConnected: boolean;
hideDrawer?: boolean;
};

export const MainLayout: FC<DashboardLayoutProps> = ({
children,
sx,
title,
isConnected,
hideDrawer,
...boxProps
}) => {
const { isMobile } = useScreenDimension();

const showDrawer = !!isConnected && !isMobile && !hideDrawer;

return (
<Background opacity={0.7}>
<Box display={"flex"} flexDirection={"row"} position={"relative"}>
{showDrawer && <Drawer />}

<Box
flex={1}
height="100vh"
overflow="auto"
display="flex"
flexDirection="column"
>
{isConnected ? (
<DashboardTopNav
title={title}
imageSRC={isMobile ? ICONS.appLogoIcon : undefined}
imageHeight={24}
isDrawer={!hideDrawer}
sx={{ flexGrow: 0, position: "sticky", top: 0 }}
/>
) : (
<>
<NewTopNav />
{title && (
<Box
borderBottom={`1px solid ${theme.palette.neutralWhite}`}
px={{ xxs: 2, md: 5 }}
py={3}
>
<Typography variant="headline5">{title}</Typography>
</Box>
)}
</>
)}
<Box flex={1} px={5} py={1.5} {...boxProps}>
{children}
</Box>

<Footer />
</Box>
</Box>
</Background>
);
};
Loading

0 comments on commit 7ae6457

Please sign in to comment.