Skip to content

Commit

Permalink
feat: governance action cards
Browse files Browse the repository at this point in the history
  • Loading branch information
Cindy committed Jan 22, 2025
1 parent b877eab commit 1621cbf
Show file tree
Hide file tree
Showing 4 changed files with 721 additions and 453 deletions.
15 changes: 12 additions & 3 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
},
"homepage": "https://github.com/IntersectMBO/govtool-outcomes-pillar",
"devDependencies": {
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^28.0.2",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-terser": "^0.4.4",
Expand All @@ -56,7 +57,15 @@
"typescript": "^5.7.2"
},
"dependencies": {
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-serve": "^1.1.1"
"@fontsource/poppins": "^5.1.1",
"@intersect.mbo/intersectmbo.org-icons-set": "^1.1.0"
},
"peerDependencies": {
"@emotion/react": "11.11.4",
"@emotion/styled": "11.11.5",
"@mui/material": "5.15.18",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.0.1"
}
}
57 changes: 55 additions & 2 deletions ui/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { Box, Grid } from "@mui/material";
import GovernanceActionCard from "./Components/GovernanceActionCard";
import { IconArrowCircleRight } from "@intersect.mbo/intersectmbo.org-icons-set";
import "./index.scss";

export type AppProps = {
Expand All @@ -12,8 +15,58 @@ function App({ description }: AppProps) {
height: "100%",
}}
>
<h1>govtool-outcomes-pillar-ui hel</h1>
<p>{description}</p>
<Box
sx={{
padding: 2,
maxWidth: '1200px',
margin: '0 auto', // Center the content
}}
>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={4}>
<GovernanceActionCard
dateSubmitted="18 Jan 2024"
epoch={430}
status="Ratified"
title="Plutus V3 Cost Model Parameter Changes Prior to Chang#2"
abstract="In light of recent network congestion and scalability concerns I propose implementing a dynamic fee adjustment mechanism that autonomously regulates transaction fees based on network demand and resource availability."
governanceActionType="Protocol Parameter Changes"
governanceActionID="cnewjfbe82rg39udbjwbksomething"
cipGovernanceActionID="cnewjfbe82rg39udbjwbksomething"
statusDate="22nd Jan 2024"
statusEpoch={440}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<GovernanceActionCard
dateSubmitted="18 Jan 2024"
epoch={430}
status="Expired"
title="Plutus V3 Cost Model Parameter Changes Prior to Chang#2"
abstract="In light of recent network congestion and scalability concerns I propose implementing a dynamic fee adjustment mechanism that autonomously regulates transaction fees based on network demand and resource availability."
governanceActionType="Protocol Parameter Changes"
governanceActionID="cnewjfbe82rg39udbjwbksomething"
cipGovernanceActionID="cnewjfbe82rg39udbjwbksomething"
statusDate="22nd Jan 2024"
statusEpoch={440}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<GovernanceActionCard
dateSubmitted="18 Jan 2024"
epoch={430}
status="Enacted"
title="Plutus V3 Cost Model Parameter Changes Prior to Chang#2"
abstract="In light of recent network congestion and scalability concerns I propose implementing a dynamic fee adjustment mechanism that autonomously regulates transaction fees based on network demand and resource availability."
governanceActionType="Protocol Parameter Changes"
governanceActionID="cnewjfbe82rg39udbjwbksomething"
cipGovernanceActionID="cnewjfbe82rg39udbjwbksomething"
statusDate="22nd Jan 2024"
statusEpoch={440}
/>
</Grid>
</Grid>
</Box>
</div>
);
}
Expand Down
160 changes: 160 additions & 0 deletions ui/src/Components/GovernanceActionCard/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import { Box, Button, Card, CardContent, Typography } from "@mui/material";
import { IconClipboardCopy } from "@intersect.mbo/intersectmbo.org-icons-set";

interface GovernanceActionCardProps {
dateSubmitted: string;
epoch: number;
status: string;
title: string;
abstract: string;
governanceActionType: string;
governanceActionID: string;
cipGovernanceActionID: string;
statusDate: string;
statusEpoch: Number;
}

function GovernanceActionCard({
dateSubmitted,
epoch,
status,
title,
abstract,
governanceActionType,
governanceActionID,
cipGovernanceActionID,
statusDate,
statusEpoch,
}: GovernanceActionCardProps) {
return (
<Card
sx={{
width: "100%",
backgroundColor: "transparent",
padding: 2,
borderRadius: "20px",
}}
>
<CardContent>
<Box display="flex" justifyContent="space-between">
<Box>
<Typography sx={{ fontSize: "12px" }}>
Submitted:{" "}
<Typography
sx={{ fontSize: "12px", fontWeight: "bold" }}
component="span"
>
{dateSubmitted}
</Typography>{" "}
{`(Epoch ${epoch})`}
</Typography>
</Box>
<Box>
<Typography
sx={{
fontSize: "12px",
color:
status === "Ratified"
? "#00B83D"
: status === "Expired"
? "#FF2616"
: "#FFC916",
}}
>
{status}
</Typography>
</Box>
</Box>
<Box sx={{ marginTop: 3 }}>
<Typography sx={{ fontWeight: 600 }}>{title}</Typography>
</Box>
<Box sx={{ marginTop: 2 }}>
<Typography
sx={{ fontSize: "12px", color: "#8E908E", marginBottom: 1 }}
>
Abstract
</Typography>
<Typography sx={{ fontSize: "14px" }}>{abstract}</Typography>
</Box>
<Box sx={{ marginTop: 2 }}>
<Typography
sx={{ fontSize: "12px", color: "#8E908E", marginBottom: 1 }}
>
Governance Action Type
</Typography>
<Typography sx={{ fontSize: "14px" }}>
{governanceActionType}
</Typography>
</Box>
<Box sx={{ marginTop: 2 }}>
<Typography
sx={{ fontSize: "12px", color: "#8E908E", marginBottom: 1 }}
>
Governance Action ID
</Typography>
<Box>
<Typography sx={{ fontSize: "14px", color: "#0033AD" }}>
{governanceActionID}
</Typography>
<Box>
<IconClipboardCopy width='18'
height='18'
fill="#0033AD" />
</Box>
</Box>
</Box>
<Box sx={{ marginTop: 2 }}>
<Typography
sx={{ fontSize: "12px", color: "#8E908E", marginBottom: 1 }}
>
(CIP-129)Governance Action ID
</Typography>
<Box>
<Typography sx={{ fontSize: "14px", color: "#0033AD" }}>
{cipGovernanceActionID}
</Typography>
<Box>
<IconClipboardCopy color="#0033AD" />
</Box>
</Box>
</Box>
<Box display="flex" justifyContent="center" marginTop={3}>
<Typography
sx={{
fontSize: "14px",
color: status === "Expired" ? "#900B09" : "#29984E",
}}
>
{status}:{" "}
<Typography
sx={{
fontSize: "14px",
fontWeight: "bold",
color: status === "Expired" ? "#900B09" : "#29984E",
}}
component="span"
>
{statusDate}
</Typography>{" "}
{`(Epoch ${statusEpoch})`}
</Typography>
</Box>
<Box display="flex" justifyContent="center" marginTop={3}>
<Button
variant="contained"
sx={{
borderRadius: "50px",
color: "#FFF",
backgroundColor: "#0033AD",
width: "100%",
}}
>
View Details
</Button>
</Box>
</CardContent>
</Card>
);
}

export default GovernanceActionCard;
Loading

0 comments on commit 1621cbf

Please sign in to comment.