diff --git a/src/assets/img/copy_icon.svg b/src/assets/img/copy_icon.svg new file mode 100644 index 00000000..25e5b759 --- /dev/null +++ b/src/assets/img/copy_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/modules/explorer/components/CopyButton.tsx b/src/modules/explorer/components/CopyButton.tsx index a33ec8a7..44fa14cf 100644 --- a/src/modules/explorer/components/CopyButton.tsx +++ b/src/modules/explorer/components/CopyButton.tsx @@ -1,16 +1,11 @@ import React, { useState } from "react" -import { Box, styled, Tooltip } from "@material-ui/core" -import { FileCopyOutlined } from "@material-ui/icons" - -const CopyIcon = styled(FileCopyOutlined)({ - cursor: "pointer" -}) +import { Box, Tooltip } from "@material-ui/core" +import { ReactComponent as CopyIcon } from "assets/img/copy_icon.svg" export const CopyButton: React.FC<{ text: string }> = ({ text }) => { const [copied, setCopied] = useState(false) return ( { navigator.clipboard.writeText(text) @@ -22,7 +17,7 @@ export const CopyButton: React.FC<{ text: string }> = ({ text }) => { }} > - + ) diff --git a/src/modules/explorer/components/DAOStatsRow.tsx b/src/modules/explorer/components/DAOStatsRow.tsx index 2c902c43..55275c04 100644 --- a/src/modules/explorer/components/DAOStatsRow.tsx +++ b/src/modules/explorer/components/DAOStatsRow.tsx @@ -1,25 +1,10 @@ import React, { useMemo } from "react" -import { ReactComponent as VotingPeriodIcon } from "assets/logos/votingPeriod.svg" -import ProgressBar from "react-customizable-progressbar" -import { - Box, - Grid, - styled, - SvgIcon, - LinearProgress, - useTheme, - Typography, - useMediaQuery, - Paper -} from "@material-ui/core" -import { ContentContainer } from "./ContentContainer" -import { CycleDescription } from "./CycleDescription" +import { Box, Grid, styled, useTheme, Typography, Paper } from "@material-ui/core" import { useDAO } from "services/services/dao/hooks/useDAO" import { useProposals } from "services/services/dao/hooks/useProposals" import BigNumber from "bignumber.js" import { ProposalStatus } from "services/services/dao/mappers/proposal/types" import { useDAOID } from "../pages/DAO/router" -import { useTimeLeftInCycle } from "../hooks/useTimeLeftInCycle" import { usePolls } from "modules/lite/explorer/hooks/usePolls" import dayjs from "dayjs" import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet" @@ -29,108 +14,7 @@ import HowToVoteIcon from "@mui/icons-material/HowToVote" import PaletteIcon from "@mui/icons-material/Palette" import { ReactComponent as TzIcon } from "assets/img/tz_circle.svg" import { formatNumber } from "../utils/FormatNumber" -import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings" - -const StatsContainer = styled(ContentContainer)(({ theme }) => ({ - padding: "38px 38px", - maxHeight: "310px", - - ["@media (max-width:1030px)"]: { - maxHeight: "303px" - }, - - ["@media (max-width:831px)"]: { - minWidth: "99%" - }, - - ["@media (max-width:390px)"]: { - maxHeight: "340px" - } -})) - -const LockedTokensBar = styled(LinearProgress)(({ theme }) => ({ - "width": "100%", - "height": "8px", - "marginTop": "15px", - "marginBottom": "43px", - "&.MuiLinearProgress-colorSecondary": { - background: theme.palette.primary.light - }, - - ["@media (max-width:1030px)"]: { - marginTop: "13px", - marginBottom: "40px" - } -})) - -const IconContainer = styled(SvgIcon)({ - width: "auto", - height: 64 -}) - -const ProgressContainer = styled(Box)({ - marginLeft: "-18px", - marginTop: "-20px", - marginBottom: "-5px" - - // ["@media (max-width:1030px)"]: { - // marginBottom: "-7px" - // }, -}) - -const ProposalInfoTitle = styled(Typography)({ - fontSize: "18px", - - ["@media (max-width:1155px)"]: { - whiteSpace: "nowrap" - }, - - ["@media (max-width:1030px)"]: { - fontSize: "16.3px", - whiteSpace: "initial" - }, - - ["@media (max-width:830.99px)"]: { - fontSize: "18px" - }, - - ["@media (max-width:409.99px)"]: { - fontSize: "16px" - } -}) - -const LargeNumber = styled(Typography)(({ theme }) => ({ - fontSize: "36px", - fontWeight: 300, - color: theme.palette.text.primary, - marginTop: "7px", - - ["@media (max-width:1030px)"]: { - fontSize: "30px" - } -})) - -const CycleTime = styled(Typography)(({ theme }) => ({ - fontWeight: 300, - color: theme.palette.text.primary, - fontSize: "20px", - - ["@media (max-width:1030px)"]: { - fontSize: "16px" - }, - - ["@media (max-width:830.99px)"]: { - fontSize: "20px" - }, - - ["@media (max-width:434px)"]: { - fontSize: "18px" - }, - - ["@media (max-width:409.99px)"]: { - fontSize: "15px" - } -})) +import { useDAOHoldings, useDAONFTHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings" const Item = styled(Paper)(({ theme }) => ({ ...theme.typography.body2, @@ -168,17 +52,14 @@ const Percentage = styled(Typography)({ export const DAOStatsRow: React.FC = () => { const daoId = useDAOID() - const { data, cycleInfo, ledger } = useDAO(daoId) - + const { data, ledger } = useDAO(daoId) const symbol = data && data.data.token.symbol.toUpperCase() - const blocksLeft = cycleInfo && cycleInfo.blocksLeft const theme = useTheme() - const isExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) const { data: activeProposals } = useProposals(daoId, ProposalStatus.ACTIVE) - const { hours, minutes, days } = useTimeLeftInCycle() const { data: polls } = usePolls(data?.liteDAOData?._id) const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf()) const { tokenHoldings } = useDAOHoldings(daoId) + const { nftHoldings } = useDAONFTHoldings(daoId) const amountLocked = useMemo(() => { if (!ledger) { @@ -206,7 +87,7 @@ export const DAOStatsRow: React.FC = () => { return ( - + @@ -217,7 +98,7 @@ export const DAOStatsRow: React.FC = () => { - + @@ -228,7 +109,7 @@ export const DAOStatsRow: React.FC = () => { - + @@ -239,7 +120,7 @@ export const DAOStatsRow: React.FC = () => { - + {symbol} Locked @@ -250,7 +131,7 @@ export const DAOStatsRow: React.FC = () => { - + @@ -266,99 +147,17 @@ export const DAOStatsRow: React.FC = () => { - + NFTs - + {nftHoldings?.length || "-"} - {/* - - - - - - - - - - - - - Current Cycle - {cycleInfo?.currentCycle} - - - - - - - - - - - - - Time Left In Cycle - - - {days}d {hours}h {minutes}m ({cycleInfo?.blocksLeft} blocks) - - - - - - */} - {/* - - - - - {symbol} Locked - - - {amountLocked.dp(10, 1).toString()} - - - - - - - - - - Voting Addresses - {data?.data.ledger.length || "-"} - - - Active Proposals - - {activeLiteProposals - ? Number(activeProposals?.length) + Number(activeLiteProposals?.length) - : Number(activeProposals?.length)} - - - - - - */} ) diff --git a/src/modules/explorer/components/UsersTable.tsx b/src/modules/explorer/components/UsersTable.tsx index de05ad62..04e23ba8 100644 --- a/src/modules/explorer/components/UsersTable.tsx +++ b/src/modules/explorer/components/UsersTable.tsx @@ -13,6 +13,8 @@ import { } from "@material-ui/core" import dayjs from "dayjs" import { UserBadge } from "modules/explorer/components/UserBadge" +import { Blockie } from "modules/common/Blockie" +import { CopyButton } from "./CopyButton" const localizedFormat = require("dayjs/plugin/localizedFormat") dayjs.extend(localizedFormat) @@ -57,6 +59,28 @@ const TableText = styled(Typography)({ } }) +const Title = styled(Typography)({ + fontSize: 20 +}) + +const CardContainer = styled(Grid)(({ theme }) => ({ + background: theme.palette.primary.main, + padding: "40px 48px", + borderRadius: 8 +})) + +const Value = styled(Typography)({ + marginTop: 8, + fontWeight: 300, + gap: 6, + display: "flex" +}) + +const Symbol = styled(Typography)({ + marginLeft: 4, + fontWeight: 300 +}) + const titleDataMatcher = (title: (typeof titles)[number], rowData: RowData) => { switch (title) { case "Rank": @@ -82,9 +106,9 @@ const MobileUsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { return ( - + Top Addresses - </Typography> + {data.map((row, i) => ( = ({ data }) => { ) } -const DesktopUsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { +const DesktopUsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data, symbol }) => { return ( <> - - - - - Top Addresses - - - - {titles.map((title, i) => ( - - {title} - - ))} - - - - {data.map((row, i) => ( - - - - - {row.votes} - {row.availableStaked} - {row.totalStaked} - {row.proposalsVoted} - - ))} - -
+ + + + Top Addresses + + + + {data.map((item, i) => ( + + + + + {item.address} + + + + + + + Total Votes + + + {item.votes} + + + + + Proposals Voted + + + {item.proposalsVoted} + + + + + Available Staked + + + {item.availableStaked} + {symbol} + + + + + Total Staked + + + {item.totalStaked} + {symbol} + + + + + ))} + ) } -export const UsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { +export const UsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data, symbol }) => { const theme = useTheme() const isExtraSmall = useMediaQuery(theme.breakpoints.down(960)) - return isExtraSmall ? : + return isExtraSmall ? : } diff --git a/src/modules/explorer/pages/DAO/index.tsx b/src/modules/explorer/pages/DAO/index.tsx index bc257664..45498695 100644 --- a/src/modules/explorer/pages/DAO/index.tsx +++ b/src/modules/explorer/pages/DAO/index.tsx @@ -89,6 +89,7 @@ export const DAO: React.FC = () => { const { mutate } = useFlush() const theme = useTheme() const isExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) + const symbol = data && data.data.token.symbol.toUpperCase() const name = data && data.data.name const description = data && data.data.description @@ -124,9 +125,9 @@ export const DAO: React.FC = () => { return ( - + - + {name} @@ -148,9 +149,9 @@ export const DAO: React.FC = () => { - - - + + + ) }