From 17f64d651e0c7830959359c53b23c57737e6177d Mon Sep 17 00:00:00 2001 From: Emmanuel Mutisya Date: Wed, 8 Jan 2025 17:38:00 +0300 Subject: [PATCH 1/3] feat: add support for governance actions outcomes --- govtool/frontend/package.json | 1 + govtool/frontend/src/App.tsx | 11 ++- .../organisms/DashboardDrawerMobile.tsx | 23 ++++++ .../src/components/organisms/Drawer.tsx | 24 ++++++ govtool/frontend/src/consts/navItems.tsx | 73 +++++++++++++------ govtool/frontend/src/consts/paths.ts | 9 +++ govtool/frontend/src/i18n/locales/en.json | 12 +++ govtool/frontend/src/pages/Dashboard.tsx | 16 ++-- .../src/pages/GovernanceActionOutComes.tsx | 49 +++++++++++++ govtool/frontend/src/types/global.d.ts | 10 +++ 10 files changed, 199 insertions(+), 29 deletions(-) create mode 100644 govtool/frontend/src/pages/GovernanceActionOutComes.tsx diff --git a/govtool/frontend/package.json b/govtool/frontend/package.json index 909459ad4..1cff721e0 100644 --- a/govtool/frontend/package.json +++ b/govtool/frontend/package.json @@ -27,6 +27,7 @@ "@emotion/styled": "^11.11.0", "@emurgo/cardano-serialization-lib-asmjs": "^12.1.1", "@hookform/resolvers": "^3.3.1", + "@intersect.mbo/govtool-outcomes-pillar-ui": "^1.0.0-beta.1", "@intersect.mbo/intersectmbo.org-icons-set": "^1.0.8", "@intersect.mbo/pdf-ui": "^0.5.5", "@mui/icons-material": "^5.14.3", diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx index 553d5295f..8f409ab4b 100644 --- a/govtool/frontend/src/App.tsx +++ b/govtool/frontend/src/App.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react"; import { Route, Routes, useNavigate } from "react-router-dom"; import { Modal, ScrollToTop } from "@atoms"; -import { PATHS, PDF_PATHS } from "@consts"; +import { PATHS, PDF_PATHS, OUTCOMES_PATHS, USER_PATHS } from "@consts"; import { useCardano, useFeatureFlag, useModal } from "@context"; import { useWalletConnectionListener } from "@hooks"; import { @@ -39,6 +39,7 @@ import { import { PublicRoute } from "./pages/PublicRoute"; import { TopBanners } from "./components/organisms/TopBanners"; import { DashboardHome } from "./pages/DashboardHome"; +import { GovernanceActionOutComesPillar } from "./pages/GovernanceActionOutComes"; export default () => { const { isProposalDiscussionForumEnabled } = useFeatureFlag(); @@ -111,6 +112,14 @@ export default () => { element={} /> )} + } + /> + } + /> } diff --git a/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx b/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx index 00bb80cec..0eab4b7a0 100644 --- a/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx +++ b/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx @@ -95,6 +95,29 @@ export const DashboardDrawerMobile = ({ }} isConnectWallet /> + {navItem.childNavItems && ( + + {navItem.childNavItems.map((childItem) => ( + { + // eslint-disable-next-line no-unused-expressions + childItem.newTabLink && openInNewTab(childItem.newTabLink); + setIsDrawerOpen(false); + }} + isConnectWallet + /> + ))} + + )} ); })} diff --git a/govtool/frontend/src/components/organisms/Drawer.tsx b/govtool/frontend/src/components/organisms/Drawer.tsx index 02b74ae1e..4a37cf540 100644 --- a/govtool/frontend/src/components/organisms/Drawer.tsx +++ b/govtool/frontend/src/components/organisms/Drawer.tsx @@ -64,6 +64,30 @@ export const Drawer = () => { : undefined } /> + {navItem.childNavItems && ( + + {navItem.childNavItems.map((childItem) => ( + openInNewTab(childItem.newTabLink!) + : undefined + } + /> + ))} + + )} ); })} diff --git a/govtool/frontend/src/consts/navItems.tsx b/govtool/frontend/src/consts/navItems.tsx index 74795d562..922f2b360 100644 --- a/govtool/frontend/src/consts/navItems.tsx +++ b/govtool/frontend/src/consts/navItems.tsx @@ -4,7 +4,7 @@ import { theme } from "@/theme"; import { ICONS } from "./icons"; import { LINKS } from "./links"; -import { PATHS, PDF_PATHS } from "./paths"; +import { PATHS, PDF_PATHS, OUTCOMES_PATHS, USER_PATHS } from "./paths"; export const NAV_ITEMS = [ { @@ -59,6 +59,7 @@ export const CONNECTED_NAV_ITEMS = [ navTo: PATHS.dashboardDRepDirectory, activeIcon: ICONS.dRepDirectoryActiveIcon, icon: ICONS.dRepDirectoryIcon, + newTabLink: null, }, { dataTestId: "governance-actions-link", @@ -67,28 +68,54 @@ export const CONNECTED_NAV_ITEMS = [ activeIcon: ICONS.governanceActionsActiveIcon, icon: ICONS.governanceActionsIcon, newTabLink: null, - }, - { - dataTestId: "proposal-discussion-link", - label: i18n.t("proposalDiscussion.title"), - navTo: PDF_PATHS.proposalDiscussion, - activeIcon: ( - - ), - icon: ( - - ), - newTabLink: null, + childNavItems: [ + { + dataTestId: "proposal-discussion-link", + label: i18n.t("proposalDiscussion.title"), + navTo: PDF_PATHS.proposalDiscussion, + activeIcon: ( + + ), + icon: ( + + ), + newTabLink: null, + }, + { + dataTestId: "governance-actions-live-voting-link", + label: i18n.t("govActions.liveVoting.title"), + navTo: OUTCOMES_PATHS.governanceActionsLiveVoting, + activeIcon: ICONS.governanceActionsActiveIcon, + icon: ICONS.governanceActionsIcon, + newTabLink: null, + }, + { + dataTestId: "governance-actions-outcomes-link", + label: i18n.t("govActions.outcomes.title"), + navTo: OUTCOMES_PATHS.governanceActionsOutcomes, + activeIcon: ICONS.governanceActionsActiveIcon, + icon: ICONS.governanceActionsIcon, + newTabLink: null, + }, + { + dataTestId: "governance-actions-voted-by-me-link", + label: i18n.t("govActions.votedByMe.title"), + navTo: USER_PATHS.governanceActionsVotedByMe, + activeIcon: ICONS.governanceActionsActiveIcon, + icon: ICONS.governanceActionsIcon, + newTabLink: null, + }, + ], }, { dataTestId: "guides-link", diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts index 296b61d7e..65ddcf7bb 100644 --- a/govtool/frontend/src/consts/paths.ts +++ b/govtool/frontend/src/consts/paths.ts @@ -31,3 +31,12 @@ export const PDF_PATHS = { proposalDiscussionProposal: "/proposal_discussion/:id", proposalDiscussionPropose: "/proposal_discussion/propose", }; + +export const USER_PATHS = { + governanceActionsVotedByMe: "/my/votes_and_favorites", +}; + +export const OUTCOMES_PATHS = { + governanceActionsOutcomes: "/outcomes", + governanceActionsLiveVoting: "/connected/governance_actions", +}; \ No newline at end of file diff --git a/govtool/frontend/src/i18n/locales/en.json b/govtool/frontend/src/i18n/locales/en.json index d3faf4074..75b45a80d 100644 --- a/govtool/frontend/src/i18n/locales/en.json +++ b/govtool/frontend/src/i18n/locales/en.json @@ -455,6 +455,18 @@ "title": "Info Action", "label": "Info Action" } + }, + "liveVoting": { + "title": "Live Voting", + "label": "Live Voting" + }, + "outcomes": { + "title": "Outcomes", + "label": "Outcomes" + }, + "votedByMe": { + "title": "Voted by me", + "label": "Voted by me" } }, "hero": { diff --git a/govtool/frontend/src/pages/Dashboard.tsx b/govtool/frontend/src/pages/Dashboard.tsx index 18f7a504b..77d9181d7 100644 --- a/govtool/frontend/src/pages/Dashboard.tsx +++ b/govtool/frontend/src/pages/Dashboard.tsx @@ -19,12 +19,18 @@ export const Dashboard = () => { const getPageTitle = (path: string) => { if (path === PATHS.dashboard) return t("dashboard.title"); - return ( - Object.values(CONNECTED_NAV_ITEMS).find(({ navTo }) => - pathname.startsWith(navTo), - )?.label ?? "" - ); + return findNavItem(CONNECTED_NAV_ITEMS, path) ?? ""; }; + + const findNavItem = (items: NavItem[], targetPath: string): string | null => ( + items.reduce((result, item) => ( + result ?? ( + targetPath === item.navTo + ? item.label + : (item.childNavItems ? findNavItem(item.childNavItems, targetPath) : null) + ) + ), null) + ); useEffect(() => { if (divRef.current && pathname !== PATHS.dashboardGovernanceActions) { diff --git a/govtool/frontend/src/pages/GovernanceActionOutComes.tsx b/govtool/frontend/src/pages/GovernanceActionOutComes.tsx new file mode 100644 index 000000000..024c03155 --- /dev/null +++ b/govtool/frontend/src/pages/GovernanceActionOutComes.tsx @@ -0,0 +1,49 @@ +import { Footer, TopNav } from "@/components/organisms"; +import { useCardano } from "@/context"; +import { useScreenDimension } from "@/hooks"; +import Outcomes from "@intersect.mbo/govtool-outcomes-pillar-ui"; +import { Box, CircularProgress } from "@mui/material"; +import { Suspense } from "react"; + +export const GovernanceActionOutComesPillar = () => { + const { pagePadding } = useScreenDimension(); + const { ...context } = useCardano(); + return ( + + {!context.isEnabled && } + + + + + } + > + + + + {!context.isEnabled &&