91 lines
3.8 KiB
JavaScript
91 lines
3.8 KiB
JavaScript
import { useEffect } from "react";
|
|
import ReactGA from "react-ga4";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { Box, Container, Grid, Divider, Typography, useMediaQuery } from "@mui/material";
|
|
|
|
import Paper from "../../components/Paper/Paper";
|
|
import PageTitle from "../../components/PageTitle/PageTitle";
|
|
import { PrimaryButton } from "../../components/Button";
|
|
|
|
import GovernanceInfoText from "./components/GovernanceInfoText";
|
|
import ProposalsList from "./components/ProposalsList";
|
|
import { ProposalsCount, MinQuorumPercentage, ProposalThreshold } from "./components/Metric";
|
|
|
|
import { useTokenSymbol } from "../../hooks/tokens";
|
|
|
|
const Governance = ({ connect, config, address, chainId }) => {
|
|
const isSemiSmallScreen = useMediaQuery("(max-width: 745px)");
|
|
const isSmallScreen = useMediaQuery("(max-width: 650px)");
|
|
const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
|
|
const navigate = useNavigate();
|
|
|
|
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
|
|
|
|
const handleModal = () => {
|
|
const navigate = useNavigate();
|
|
}
|
|
|
|
useEffect(() => {
|
|
ReactGA.send({ hitType: "pageview", page: "/governance" });
|
|
}, []);
|
|
|
|
return (
|
|
<Box>
|
|
<PageTitle name="Protocol Governance" subtitle={`Cast $${ghstSymbol} to facilitate DAO decisions`} />
|
|
<Container
|
|
style={{
|
|
paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
|
|
paddingRight: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
|
|
minHeight: "calc(100vh - 128px)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center"
|
|
}}
|
|
>
|
|
<Box sx={{ mt: "15px" }}>
|
|
<Paper
|
|
fullWidth
|
|
enableBackground
|
|
headerContent={
|
|
<Box display="flex" alignItems="center" flexDirection="row" gap="5px">
|
|
<Typography variant="h6">
|
|
Proposal Requirements
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
>
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={isSmallScreen ? 12 : 4}>
|
|
<ProposalsCount chainId={chainId} />
|
|
</Grid>
|
|
<Grid item xs={isSmallScreen ? 12 : 4}>
|
|
<MinQuorumPercentage chainId={chainId} ghstSymbol={ghstSymbol} />
|
|
</Grid>
|
|
<Grid item xs={isSmallScreen ? 12 : 4}>
|
|
<ProposalThreshold chainId={chainId} ghstSymbol={ghstSymbol} />
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Box mt="45px" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
|
|
<PrimaryButton
|
|
fullWidth
|
|
onClick={() => navigate(`/governance/create`)}
|
|
sx={{ maxWidth: isSemiSmallScreen ? "100%" : "350px" }}
|
|
>
|
|
Create Proposal
|
|
</PrimaryButton>
|
|
<Box textAlign="center" mt="15px">
|
|
<GovernanceInfoText />
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
<ProposalsList address={address} config={config} chainId={chainId} />
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Governance;
|