From c845d652cd94945ff9efc92a94e837e6f694cd6b Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 22 Jun 2023 21:25:57 +0200 Subject: [PATCH 1/2] contract field & delegate added --- src/assets/img/download.svg | 3 + src/modules/common/CopyButton.tsx | 7 ++- .../pages/Config/components/DAOInfoTable.tsx | 55 ++++++++++++++++++- 3 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 src/assets/img/download.svg diff --git a/src/assets/img/download.svg b/src/assets/img/download.svg new file mode 100644 index 00000000..b3f04df2 --- /dev/null +++ b/src/assets/img/download.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/modules/common/CopyButton.tsx b/src/modules/common/CopyButton.tsx index af259835..3b2d9f0b 100644 --- a/src/modules/common/CopyButton.tsx +++ b/src/modules/common/CopyButton.tsx @@ -1,8 +1,9 @@ import React, { useState } from "react" import { Box, styled, Tooltip } from "@material-ui/core" -import { FileCopyOutlined } from "@material-ui/icons" +import { FileCopyOutlined, Image } from "@material-ui/icons" +import DownloadIcon from "assets/img/download.svg" -const CopyIcon = styled(FileCopyOutlined)({ +const CopyIcon = styled("img")({ cursor: "pointer" }) @@ -23,7 +24,7 @@ export const CopyButton: React.FC<{ text: string; style?: any }> = ({ text, styl }} > - + ) diff --git a/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx b/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx index c2ae6ce2..27f1f354 100644 --- a/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx +++ b/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx @@ -1,9 +1,21 @@ /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */ -import { styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@material-ui/core" +import { + Grid, + styled, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography +} from "@material-ui/core" import React from "react" import { useDAO } from "services/services/dao/hooks/useDAO" import BigNumber from "bignumber.js" import { useDAOID } from "../../DAO/router" +import { useDelegate } from "services/contracts/baseDAO/hooks/useDelegate" +import { CopyButton } from "modules/common/CopyButton" const RowValue = styled(Typography)({ fontWeight: 300, @@ -22,9 +34,50 @@ const CustomTableContainer = styled(TableContainer)(({ theme }) => ({ export const DaoInfoTables: React.FC = () => { const daoId = useDAOID() const { data: dao } = useDAO(daoId) + const currentDelegate = useDelegate(dao && dao?.data.address ? dao?.data.address : "") return ( <> + + + + {dao ? ( + <> + + + Contract Address (Treasury) + + + + + {dao.data.address} + + + + + + + + Current Delegate + + + + {currentDelegate && currentDelegate.data && currentDelegate.data.address ? ( + + {currentDelegate.data.address} + + + ) : ( + "-" + )} + + + + + ) : null} + +
+ From a0699327d695e28c1fe2925710916fb7d2443279 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Fri, 23 Jun 2023 11:04:58 +0200 Subject: [PATCH 2/2] responsive modal --- src/modules/common/CopyAddress.tsx | 2 +- .../explorer/components/ResponsiveDialog.tsx | 13 +- .../pages/Config/components/DAOInfoTable.tsx | 257 +++++++++++------- .../pages/DAO/components/Settings.tsx | 41 +-- src/theme/index.ts | 3 +- 5 files changed, 178 insertions(+), 138 deletions(-) diff --git a/src/modules/common/CopyAddress.tsx b/src/modules/common/CopyAddress.tsx index af74a764..71c0fc32 100644 --- a/src/modules/common/CopyAddress.tsx +++ b/src/modules/common/CopyAddress.tsx @@ -16,7 +16,7 @@ export const CopyAddress: React.FC = ({ address, typographyProps }) => { <> - + {isMobileSmall ? toShortAddress(address) : address} diff --git a/src/modules/explorer/components/ResponsiveDialog.tsx b/src/modules/explorer/components/ResponsiveDialog.tsx index a7138b4d..af351e42 100644 --- a/src/modules/explorer/components/ResponsiveDialog.tsx +++ b/src/modules/explorer/components/ResponsiveDialog.tsx @@ -8,12 +8,15 @@ const Content = styled(Grid)({ padding: "41px 46px" }) -const TitleText = styled(Typography)({ +const TitleText = styled(Typography)(({ theme }) => ({ color: "#ffff", fontWeight: 550, lineHeight: ".80", - textTransform: "capitalize" -}) + textTransform: "capitalize", + [theme.breakpoints.down("sm")]: { + fontSize: 18 + } +})) const CustomDialog = styled(Dialog)({ "& .MuiDialog-paperWidthMd": { @@ -57,7 +60,9 @@ export const ResponsiveDialog: React.FC<{ - {children} + + {children} + ) : ( diff --git a/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx b/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx index 27f1f354..d5794866 100644 --- a/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx +++ b/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx @@ -8,7 +8,9 @@ import { TableContainer, TableHead, TableRow, - Typography + Typography, + useMediaQuery, + useTheme } from "@material-ui/core" import React from "react" import { useDAO } from "services/services/dao/hooks/useDAO" @@ -16,62 +18,109 @@ import BigNumber from "bignumber.js" import { useDAOID } from "../../DAO/router" import { useDelegate } from "services/contracts/baseDAO/hooks/useDelegate" import { CopyButton } from "modules/common/CopyButton" +import { CopyAddress } from "modules/common/CopyAddress" -const RowValue = styled(Typography)({ +const RowValue = styled(Typography)(({ theme }) => ({ fontWeight: 300, - fontSize: 18 -}) + fontSize: 18, + [theme.breakpoints.down("sm")]: { + fontSize: 16 + } +})) -const TableTitle = styled(Typography)({ +const TableTitle = styled(Typography)(({ theme }) => ({ fontWeight: 500, - fontSize: 18 -}) + fontSize: 18, + [theme.breakpoints.down("sm")]: { + fontSize: 16 + } +})) 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 CustomTableCellTitle = styled(TableCell)(({ theme }) => ({ + [theme.breakpoints.down("sm")]: { + paddingLeft: "16px !important" + } +})) + +const CustomTableCellValue = styled(TableCell)(({ theme }) => ({ + [theme.breakpoints.down("sm")]: { + paddingTop: 0, + paddingRight: "16px !important", + textAlign: "end", + paddingBottom: 0 + } +})) + export const DaoInfoTables: React.FC = () => { const daoId = useDAOID() const { data: dao } = useDAO(daoId) + const theme = useTheme() + const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) const currentDelegate = useDelegate(dao && dao?.data.address ? dao?.data.address : "") return ( <> -
+
{dao ? ( <> - - Contract Address (Treasury) - - - - - {dao.data.address} - - + + + Contract Address (Treasury) + + + + + {isMobileSmall ? ( + + ) : ( + <> + + {dao.data.address} + + + + )} - + - - Current Delegate - - - + + + Current Delegate + + + + {currentDelegate && currentDelegate.data && currentDelegate.data.address ? ( - - {currentDelegate.data.address} - - + isMobileSmall ? ( + + ) : ( + + {currentDelegate.data.address} + + + ) ) : ( "-" )} - + ) : null} @@ -82,81 +131,95 @@ export const DaoInfoTables: React.FC = () => {
- + Proposal & Voting Settings - + {dao ? ( <> - - Voting Period Duration - - + + + Voting Period Duration + + + {dao.data.period} blocks - + - - Flush Delay Duration - - + + + Flush Delay Duration + + + {new BigNumber(dao.data.proposal_flush_level).toNumber() - 2 * new BigNumber(dao.data.period).toNumber()}{" "} blocks - + - - Proposal Blocks to Expire - - + + + Proposal Blocks to Expire + + + {new BigNumber(dao.data.proposal_expired_level).toNumber() - new BigNumber(dao.data.proposal_flush_level).toNumber()}{" "} blocks - + - - Stake Required to Propose - - + + + Stake Required to Propose + + + {new BigNumber(dao.data.extra.frozen_extra_value).toNumber()} locked {dao.data.token.symbol} - + - - Stake Returned if Rejected - - + + + Stake Returned if Rejected + + + {dao.data.extra.returnedPercentage}% of locked {dao.data.token.symbol} - + - - Transfer Maximum XTZ Amount - - + + + Transfer Maximum XTZ Amount + + + {new BigNumber(dao.data.extra.max_xtz_amount).div(10 ** 6).toNumber()} XTZ - + - - Transfer Minimum XTZ Amount - - + + + Transfer Minimum XTZ Amount + + + {new BigNumber(dao.data.extra.min_xtz_amount).div(10 ** 6).toNumber()} XTZ - + ) : null} @@ -168,55 +231,65 @@ export const DaoInfoTables: React.FC = () => {
- + Quorum Settings - + {dao ? ( <> - - Quorum Threshold - - + + + Quorum Threshold + + + {dao.data.quorum_threshold.toNumber()} {dao.data.token.symbol} - + - - Quorum Min Amount - - + + + Quorum Min Amount + + + {new BigNumber(dao.data.min_quorum_threshold).div(10000).toNumber()}% - + - - Quorum Max Amount - - + + + Quorum Max Amount + + + {new BigNumber(dao.data.max_quorum_threshold).div(10000).toNumber()}% - + - - Quorum Change - - + + + Quorum Change + + + {new BigNumber(dao.data.quorum_change).div(10000).toNumber()}% - + - - Quorum Max Change - - + + + Quorum Max Change + + + {new BigNumber(dao.data.max_quorum_change).div(10000).toNumber()}% - + ) : null} diff --git a/src/modules/explorer/pages/DAO/components/Settings.tsx b/src/modules/explorer/pages/DAO/components/Settings.tsx index 0a9d4025..32004f20 100644 --- a/src/modules/explorer/pages/DAO/components/Settings.tsx +++ b/src/modules/explorer/pages/DAO/components/Settings.tsx @@ -1,53 +1,14 @@ /* eslint-disable react/display-name */ -import { Grid, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core" -import React, { useState } from "react" -import { useDAO } from "services/services/dao/hooks/useDAO" -import { useDAOID } from "../router" +import React from "react" import { ResponsiveDialog } from "modules/explorer/components/ResponsiveDialog" import { DaoInfoTables } from "../../Config/components/DAOInfoTable" -const OptionContainer = styled(Grid)(({ theme }) => ({ - "minHeight": 80, - "background": theme.palette.primary.main, - "borderRadius": 8, - "padding": "35px 42px", - "marginBottom": 16, - "cursor": "pointer", - "height": 110, - "&:hover": { - background: theme.palette.secondary.dark, - scale: 1.01, - transition: "0.15s ease-in" - } -})) - -const ActionText = styled(Typography)(({ theme }) => ({ - fontWeight: 400, - fontSize: 20, - marginBottom: 8 -})) - -const ActionDescriptionText = styled(Typography)(({ theme }) => ({ - fontWeight: 300, - fontSize: 16 -})) - -interface Action { - id: any - name: string - description: string - isLambda: boolean -} - interface Props { open: boolean handleClose: () => void } export const DaoSettingModal: React.FC = ({ open, handleClose }) => { - const theme = useTheme() - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) - return ( <> diff --git a/src/theme/index.ts b/src/theme/index.ts index 239ee96a..f1c359cb 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -387,7 +387,8 @@ export const theme = createTheme({ root: { "height": 70, "& th:first-child, & td:first-child": { - paddingLeft: 46 + paddingLeft: 46, + textAlign: "inherit" }, "& th:last-child, & td:last-child": { paddingRight: 46