revision v4 from the designers

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.5.3",
+  "version": "0.5.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -33,6 +33,7 @@ const Bridge = lazy(() => import("./containers/Bridge/Bridge"));
 const NotFound = lazy(() => import("./containers/NotFound/NotFound"));
 const Governance = lazy(() => import("./containers/Governance/Governance"));
 const ProposalDetails = lazy(() => import("./containers/Governance/ProposalDetails"));
+const NewProposal = lazy(() => import("./containers/Governance/NewProposal"));
 
 const PREFIX = "App";
 
@@ -217,6 +218,7 @@ function App() {
                                         <Route path="/dex/:name" element={<Dex connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                         <Route path="/governance" element={<Governance config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                         <Route path="/governance/:id" element={<ProposalDetails config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                        <Route path="/governance/create" element={<NewProposal config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                     </>
                                 }
                                 <Route path="/empty" element={<NotFound

src/containers/Dex/Dex.jsx

@@ -186,7 +186,7 @@ const Dex = ({ chainId, address, connect }) => {
 
             <PageTitle
                 name={`${pathname.name.charAt(0).toUpperCase() + pathname.name.slice(1).toLowerCase()} V2 Classic`}
-                subtitle="Classic interface to V2 smart contracts"
+                subtitle="Swap via Uniswap V2 Fork"
             />
             <Container
                 style={{

src/containers/Governance/Governance.jsx

@@ -1,5 +1,6 @@
 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";
 
@@ -17,11 +18,12 @@ 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 = () => {
-        alert("proposal modal here");
+        const navigate = useNavigate();
     }
 
     useEffect(() => {
@@ -72,7 +74,7 @@ const Governance = ({ connect, config, address, chainId }) => {
                         <Box mt="15px" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
                             <PrimaryButton
                                 fullWidth
-                                onClick={() => handleModal(true)}
+                                onClick={() => navigate(`/governance/create`)}
                                 sx={{ maxWidth: isSemiSmallScreen ? "100%" : "350px" }}
                             >
                                 Create Proposal

src/containers/Governance/NewProposal.jsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+
+import {
+    Box,
+    Container,
+    Typography,
+    OutlinedInput,
+    InputLabel,
+    FormControl,
+    useMediaQuery,
+} from "@mui/material";
+
+import Paper from "../../components/Paper/Paper";
+import PageTitle from "../../components/PageTitle/PageTitle";
+import { PrimaryButton } from "../../components/Button";
+
+const NewProposal = ({ config, address, connect, chainId }) => {
+    const isSemiSmallScreen = useMediaQuery("(max-width: 745px)");
+    const isSmallScreen = useMediaQuery("(max-width: 650px)");
+    const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
+
+    const [descriptionUrl, setDescriptionUrl] = useState("");
+
+    return (
+        <Box>
+            <PageTitle name="Create Proposal" subtitle="Cool text describing what's goinf on there" />
+            <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 Overview
+                                </Typography>
+                            </Box>
+                        }
+                    >
+                        <BasicInput id="discussion" label="Discussion URL" value={descriptionUrl} eventHandler={setDescriptionUrl} />
+                    </Paper>
+                </Box>
+            </Container>
+        </Box>
+    )
+}
+
+const BasicInput = ({ id, label, value, eventHandler }) => {
+    return (
+        <Box>
+            <InputLabel htmlFor={id}>{label}</InputLabel>
+            <Box mt="8px">
+                <FormControl variant="outlined" color="primary" fullWidth>
+                    <OutlinedInput
+                        inputProps={{ "data-testid": `${id}-dex` }}
+                        type="text"
+                        id={`${id}-dex`}
+                        value={value}
+                        onChange={event => eventHandler(event.currentTarget.value)}
+                    />
+                </FormControl>
+            </Box>
+        </Box>
+    )
+}
+
+export default NewProposal;