WIP - Onchain Proposal Details Page

src/modules/etherlink/components/EvmDaoSettingsModal.tsx

@@ -0,0 +1,138 @@
+import React, { useContext } from "react"
+import {
+  Grid,
+  styled,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from "@material-ui/core"
+import { ResponsiveDialog } from "modules/explorer/components/ResponsiveDialog"
+
+import { EtherlinkContext } from "services/wagmi/context"
+import { CopyButton } from "modules/common/CopyButton"
+import { CopyAddress } from "modules/common/CopyAddress"
+
+const CustomTableContainer = styled(TableContainer)(({ theme }) => ({
+  width: "inherit",
+  [theme.breakpoints.down("sm")]: {}
+}))
+
+const CustomTableCell = styled(TableCell)(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    paddingBottom: 0,
+    paddingLeft: "16px !important",
+    textAlign: "end"
+  }
+}))
+
+const CustomTableCellValue = styled(TableCell)(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    paddingTop: 0,
+    paddingRight: "16px !important",
+    textAlign: "end",
+    paddingBottom: 0
+  }
+}))
+
+const RowValue = styled(Typography)(({ theme }) => ({
+  fontWeight: 300,
+  fontSize: 18,
+  [theme.breakpoints.down("sm")]: {
+    fontSize: 16
+  }
+}))
+
+export const EvmDaoSettingModal: React.FC<{
+  open: boolean
+  handleClose: () => void
+}> = ({ open, handleClose }) => {
+  const { daoSelected } = useContext(EtherlinkContext)
+  const theme = useTheme()
+  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
+
+  const tableData = [
+    {
+      key: "DAO Contract Address",
+      value: daoSelected?.address
+    },
+    {
+      key: "Treasury Address",
+      value: daoSelected?.treasuryAddress
+    },
+    {
+      key: "Registry Address",
+      value: daoSelected?.registryAddress
+    },
+    {
+      key: "Governance Token",
+      value: daoSelected?.token
+    },
+    {
+      key: "Quorum",
+      value: daoSelected?.quorum
+    },
+    {
+      key: "Proposal Threshold",
+      value: daoSelected?.proposalThreshold
+    },
+    {
+      key: "Voting Duration (minutes",
+      value: daoSelected?.votingDuration
+    },
+    {
+      key: "Voting Delay (minutes)",
+      value: daoSelected?.votingDelay
+    },
+    {
+      key: "Execution Delay (minutes)",
+      value: daoSelected?.executionDelay
+    }
+  ]
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"Dao Settings"} template="xs">
+        <CustomTableContainer>
+          <Table aria-label="simple table">
+            <TableBody>
+              {daoSelected?.id &&
+                tableData.map((item: { key: string; value: string }) => (
+                  <TableRow>
+                    <CustomTableCell component="th" scope="row">
+                      <Typography color="textPrimary" variant="body1">
+                        {item.key}
+                      </Typography>
+                    </CustomTableCell>
+                    <CustomTableCellValue align="right">
+                      {typeof item.value === "string" && item?.value?.startsWith("0x") ? (
+                        <RowValue style={isMobileSmall ? { width: "max-content" } : {}}>
+                          {isMobileSmall ? (
+                            <CopyAddress address={item.value} />
+                          ) : (
+                            <>
+                              <Grid container direction="row" alignItems="center" justifyContent="flex-end">
+                                {item.value}
+                                <CopyButton text={item.value} />
+                              </Grid>
+                            </>
+                          )}
+                        </RowValue>
+                      ) : (
+                        <RowValue style={isMobileSmall ? { width: "max-content" } : {}}>{item.value}</RowValue>
+                      )}
+                    </CustomTableCellValue>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </CustomTableContainer>
+      </ResponsiveDialog>
+    </>
+  )
+}

src/modules/etherlink/components/EvmDaoStatsRow.tsx

@@ -0,0 +1,72 @@
+import React, { useContext, useMemo } from "react"
+import { Box, Grid, styled, useTheme, Typography, Paper } from "@material-ui/core"
+
+import { EtherlinkContext } from "services/wagmi/context"
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: "#24282d",
+  borderRadius: 8,
+  color: theme.palette.text.primary,
+  height: 84,
+  display: "flex",
+  padding: "33px 40px 30px 40px",
+  flexDirection: "column",
+  gap: 8
+}))
+
+const ItemContent = styled(Grid)({
+  gap: 8
+})
+
+const ItemTitle = styled(Typography)(({ theme }) => ({
+  fontSize: 18,
+  fontWeight: 500,
+  [theme.breakpoints.down("md")]: {
+    fontSize: 15
+  }
+}))
+
+const ItemValue = styled(Typography)(({ theme }) => ({
+  fontSize: 32,
+  fontWeight: 300,
+  overflowX: "scroll",
+  cursor: "default",
+  [theme.breakpoints.down("sm")]: {
+    fontSize: 28
+  }
+}))
+
+export const EvmDaoStatsRow = () => {
+  const { daoSelected } = useContext(EtherlinkContext)
+  return (
+    <Box sx={{ flexGrow: 1, width: "inherit" }}>
+      <Grid container spacing={4}>
+        {[
+          {
+            title: "Members",
+            value: daoSelected?.holders
+          },
+          {
+            title: "Active Proposals",
+            value: daoSelected?.proposals?.length || "0"
+          },
+          {
+            title: "Awaiting Executions",
+            value: daoSelected?.awaiting_executions || "-"
+          }
+        ].map((item, index) => (
+          <Grid item xs={12} sm={6} md={4} key={index}>
+            <Item>
+              <ItemContent item container direction="row" alignItems="center">
+                <ItemTitle color="textPrimary">{item.title} </ItemTitle>
+              </ItemContent>
+              <Grid item>
+                <ItemValue color="textPrimary">{item.value}</ItemValue>
+              </Grid>
+            </Item>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  )
+}