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/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/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/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 c2ae6ce2..d5794866 100644
--- a/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx
+++ b/src/modules/explorer/pages/Config/components/DAOInfoTable.tsx
@@ -1,109 +1,225 @@
/* 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,
+ useMediaQuery,
+ useTheme
+} 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"
+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)
+
+
+
+
+ {isMobileSmall ? (
+
+ ) : (
+ <>
+
+ {dao.data.address}
+
+
+
+ )}
+
+
+
+
+
+
+ Current Delegate
+
+
+
+
+ {currentDelegate && currentDelegate.data && currentDelegate.data.address ? (
+ isMobileSmall ? (
+
+ ) : (
+
+ {currentDelegate.data.address}
+
+
+ )
+ ) : (
+ "-"
+ )}
+
+
+
+
+ ) : null}
+
+
+
-
+
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}
@@ -115,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