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/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/src/App.tsx b/govtool/frontend/src/App.tsx
index 91dab6356..03409674f 100644
--- a/govtool/frontend/src/App.tsx
+++ b/govtool/frontend/src/App.tsx
@@ -21,6 +21,7 @@ import {
UpdatedRepMetadata,
GovernanceActionsCategory,
DashboardGovernanceActionsCategory,
+ DRepDirectory,
} from "@pages";
import {
callAll,
@@ -113,6 +114,10 @@ export default function App() {
element={}
/>
+ }
+ />
} />
} />
} />
@@ -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
}
>
diff --git a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx
index 5bf0a3be4..be9b591ff 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,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;
@@ -25,6 +26,7 @@ export const DashboardTopNav = ({
imageSRC,
imageWidth,
imageHeight,
+ sx
}: DashboardTopNavProps) => {
const { isMobile, screenWidth } = useScreenDimension();
const { dRep } = useCardano();
@@ -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}
@@ -77,101 +82,103 @@ 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 && }
+
+
- {dRep?.isRegistered && }
-
-
-
-
-
- )}
-
+
+
+ )
+ }
+
);
};
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}
+
+
+
+
+
+
+ );
+};
diff --git a/govtool/frontend/src/components/organisms/NewTopNav.tsx b/govtool/frontend/src/components/organisms/NewTopNav.tsx
new file mode 100644
index 000000000..37458f138
--- /dev/null
+++ b/govtool/frontend/src/components/organisms/NewTopNav.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useRef, useState } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import { AppBar, Box, Grid, IconButton } from "@mui/material";
+
+import { Button, Link } from "@atoms";
+import { ICONS, IMAGES, PATHS, NAV_ITEMS } from "@consts";
+import { useCardano, useModal } from "@context";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { openInNewTab } from "@utils";
+
+import { DrawerMobile } from "./DrawerMobile";
+
+const POSITION_TO_BLUR = 20;
+
+interface TopNavProps {
+ isConnectButton?: boolean;
+}
+
+export const NewTopNav = ({ isConnectButton = true }: TopNavProps) => {
+ const { openModal } = useModal();
+ const { screenWidth, isMobile } = useScreenDimension();
+ const navigate = useNavigate();
+ const { t } = useTranslation();
+
+ const { isEnabled, disconnectWallet, stakeKey } = useCardano();
+
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+ const containerRef = useRef(null);
+ const [isOverlapping, setIsOverlapping] = useState(false);
+ useEffect(() => {
+ const parent = containerRef.current?.parentElement;
+ if (!parent || !containerRef.current) return;
+
+ const onScroll = () => {
+ setIsOverlapping(parent.scrollTop > POSITION_TO_BLUR);
+ };
+
+ parent.addEventListener("scroll", onScroll, {
+ passive: true,
+ });
+
+ return () => parent.removeEventListener("scroll", onScroll);
+ }, []);
+
+ return (
+ = 1920 ? 37 : isMobile ? 2 : 5,
+ py: 3,
+ top: 0,
+ transition: "background-color 0.3s",
+ }}
+ >
+ (isConnectButton ? {} : disconnectWallet())}
+ to={PATHS.home}
+ >
+ 
+
+ {!isMobile ? (
+
+ ) : (
+ <>
+
+ {isConnectButton ? (
+
+ ) : null}
+ setIsDrawerOpen(true)}
+ sx={{ padding: 0 }}
+ >
+ 
+
+
+
+
+ )}
+
+ );
+};
diff --git a/govtool/frontend/src/consts/icons.ts b/govtool/frontend/src/consts/icons.ts
index c6facbf60..bea857e31 100644
--- a/govtool/frontend/src/consts/icons.ts
+++ b/govtool/frontend/src/consts/icons.ts
@@ -12,6 +12,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 ddaf508e5..5550cabd0 100644
--- a/govtool/frontend/src/consts/navItems.ts
+++ b/govtool/frontend/src/consts/navItems.ts
@@ -8,6 +8,11 @@ export const NAV_ITEMS = [
label: "Home",
newTabLink: null,
},
+ {
+ dataTestId: "drep-directory-link",
+ navTo: PATHS.dRepDirectory,
+ label: "DRep Directory",
+ },
{
dataTestId: "governance-actions-link",
navTo: PATHS.governance_actions,
@@ -37,6 +42,13 @@ export const CONNECTED_NAV_ITEMS = [
icon: ICONS.dashboardIcon,
newTabLink: null,
},
+ {
+ dataTestId: "drep-directory-link",
+ label: "DRep Directory",
+ navTo: PATHS.dRepDirectory,
+ 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 645f4e695..14bb4608f 100644
--- a/govtool/frontend/src/consts/paths.ts
+++ b/govtool/frontend/src/consts/paths.ts
@@ -7,6 +7,7 @@ export const PATHS = {
governance_actions_category_action:
"/governance_actions/category/:category/:proposalId",
governance_actions_action: "/governance_actions/:proposalId",
+ dRepDirectory: "/drep_directory",
dashboard_governance_actions: "/connected/governance_actions",
dashboard_governance_actions_action:
"/connected/governance_actions/:proposalId",
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index 9204175a4..06cf83ccd 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -125,6 +125,9 @@ export const en = {
title: "Delegate to myself",
},
},
+ dRepDirectory: {
+ title: "DRep Directory",
+ },
errorPage: {
backToDashboard: "Back to dashboard",
backToHomepage: "Back to homepage",
diff --git a/govtool/frontend/src/pages/DRepDirectory.tsx b/govtool/frontend/src/pages/DRepDirectory.tsx
new file mode 100644
index 000000000..58e6cd646
--- /dev/null
+++ b/govtool/frontend/src/pages/DRepDirectory.tsx
@@ -0,0 +1,23 @@
+
+import { useTranslation } from "@hooks";
+import { MainLayout } from "@/components/organisms/MainLayout";
+import { useMemo } from "react";
+import { WALLET_LS_KEY, getItemFromLocalStorage } from "@/utils";
+
+export const DRepDirectory = () => {
+ const { t } = useTranslation();
+
+ const isConnected = useMemo(() => (
+ getItemFromLocalStorage(`${WALLET_LS_KEY}_stake_key`) &&
+ getItemFromLocalStorage(`${WALLET_LS_KEY}_name`)
+ ), []);
+
+ return (
+
+ DRepDirectory
+
+ );
+};
diff --git a/govtool/frontend/src/pages/index.ts b/govtool/frontend/src/pages/index.ts
index e6cdcc6de..348def958 100644
--- a/govtool/frontend/src/pages/index.ts
+++ b/govtool/frontend/src/pages/index.ts
@@ -1,6 +1,7 @@
export * from "./ChooseStakeKey";
export * from "./Dashboard";
export * from "./DelegateTodRep";
+export * from "./DRepDirectory";
export * from "./GovernanceActionDetails";
export * from "./GovernanceActions";
export * from "./GovernanceActionsCategory";
diff --git a/govtool/frontend/src/theme.ts b/govtool/frontend/src/theme.ts
index e13fdefc3..4117cbc39 100644
--- a/govtool/frontend/src/theme.ts
+++ b/govtool/frontend/src/theme.ts
@@ -1,6 +1,16 @@
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;
@@ -16,6 +26,7 @@ declare module "@mui/material/styles" {
primaryBlue: string;
secondaryBlue: string;
specialCyan: string;
+ specialCyanLight: string;
specialCyanBorder: string;
lightBlue: string;
textBlack: string;
@@ -38,6 +49,7 @@ declare module "@mui/material/styles" {
primaryBlue: string;
secondaryBlue: string;
specialCyan: string;
+ specialCyanLight: string;
specialCyanBorder: string;
lightBlue: string;
textBlack: string;
@@ -50,6 +62,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: {
@@ -103,6 +125,7 @@ export const theme = createTheme({
secondary: { main: "rgb(255, 100, 10)" },
secondaryBlue: "#6F99FF",
specialCyan: "#1C94B2",
+ specialCyanLight: "#D2EAF0",
specialCyanBorder: "#77BFD1",
textBlack: "#242232",
textGray: "#525252",