Skip to content

Commit

Permalink
top addresses component
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiolalombardim
fabiolalombardim committed Oct 24, 2023
1 parent dc8dd26 commit d73c4f0
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 259 deletions.
3 changes: 3 additions & 0 deletions src/assets/img/copy_icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 3 additions & 8 deletions src/modules/explorer/components/CopyButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Box
padding="5px 0 0 10px"
marginTop="auto"
onClick={() => {
navigator.clipboard.writeText(text)
Expand All @@ -22,7 +17,7 @@ export const CopyButton: React.FC<{ text: string }> = ({ text }) => {
}}
>
<Tooltip placement="bottom" title={!copied ? "Copy to Clipboard" : "Copied!"}>
<CopyIcon color="secondary" fontSize="small" />
<CopyIcon />
</Tooltip>
</Box>
)
Expand Down
223 changes: 11 additions & 212 deletions src/modules/explorer/components/DAOStatsRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -206,7 +87,7 @@ export const DAOStatsRow: React.FC = () => {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={4}>
<Grid item xs={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
<ItemContent item container direction="row" alignItems="center">
<AccountBalanceWalletIcon color="secondary" />
Expand All @@ -217,7 +98,7 @@ export const DAOStatsRow: React.FC = () => {
</Grid>
</Item>
</Grid>
<Grid item xs={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
<ItemContent item container direction="row" alignItems="center">
<TzIcon color="secondary" />
Expand All @@ -228,7 +109,7 @@ export const DAOStatsRow: React.FC = () => {
</Grid>
</Item>
</Grid>
<Grid item xs={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
<ItemContent item container direction="row" alignItems="center">
<FiberSmartRecordIcon color="secondary" style={{ transform: "rotate(180deg)" }} />
Expand All @@ -239,7 +120,7 @@ export const DAOStatsRow: React.FC = () => {
</Grid>
</Item>
</Grid>
<Grid item xs={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
<ItemContent item container direction="row" alignItems="center">
<LockIcon color="secondary" /> <ItemTitle color="textPrimary">{symbol} Locked</ItemTitle>
Expand All @@ -250,7 +131,7 @@ export const DAOStatsRow: React.FC = () => {
</Grid>
</Item>
</Grid>
<Grid item xs={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
<ItemContent item container direction="row" alignItems="center">
<HowToVoteIcon color="secondary" />
Expand All @@ -266,99 +147,17 @@ export const DAOStatsRow: React.FC = () => {
</Grid>
</Item>
</Grid>
<Grid item xs={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
<ItemContent item container direction="row" alignItems="center">
<PaletteIcon color="secondary" />
<ItemTitle color="textPrimary">NFTs</ItemTitle>
</ItemContent>
<Grid item>
<ItemValue color="textPrimary"></ItemValue>
<ItemValue color="textPrimary">{nftHoldings?.length || "-"}</ItemValue>
</Grid>
</Item>
</Grid>
{/* <StatsContainer item xs>
<Grid container direction="column" style={{ gap: 24, marginTop: "-3px" }}>
<Grid item>
<CycleDescription daoAddress={daoId} />
</Grid>
<Grid item>
<Grid container wrap="nowrap">
<Grid item>
<ProgressContainer>
<ProgressBar
progress={data ? ((blocksLeft || 0) / Number(data.data.period)) * 100 : 100}
radius={35}
strokeWidth={6}
strokeColor={theme.palette.secondary.main}
trackStrokeWidth={5}
trackStrokeColor={"rgba(125,140,139, 0.2)"}
/>
</ProgressContainer>
</Grid>
<Grid item>
<ProposalInfoTitle color="secondary">Current Cycle</ProposalInfoTitle>
<CycleTime color="textPrimary">{cycleInfo?.currentCycle}</CycleTime>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container style={{ gap: 28 }} wrap="nowrap">
<Grid item>
<IconContainer>
<VotingPeriodIcon />
</IconContainer>
</Grid>
<Grid item>
<ProposalInfoTitle color="secondary" style={{ marginTop: "-6px" }}>
Time Left In Cycle
</ProposalInfoTitle>
<CycleTime>
{days}d {hours}h {minutes}m ({cycleInfo?.blocksLeft} blocks)
</CycleTime>
</Grid>
</Grid>
</Grid>
</Grid>
</StatsContainer> */}
{/* <StatsContainer item xs>
<Grid container direction="column" style={{ marginTop: "-3px" }}>
<Grid item>
<Grid container direction="column">
<Grid item>
<ProposalInfoTitle color="secondary">{symbol} Locked</ProposalInfoTitle>
</Grid>
<Grid item>
<LargeNumber>{amountLocked.dp(10, 1).toString()}</LargeNumber>
</Grid>
<Grid item>
<LockedTokensBar variant="determinate" value={amountLockedPercentage.toNumber()} color="secondary" />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid
container
style={{ gap: isExtraSmall ? 10 : 50 }}
wrap="nowrap"
justifyContent={isExtraSmall ? "space-between" : "flex-start"}
>
<Grid item>
<ProposalInfoTitle color="secondary">Voting Addresses</ProposalInfoTitle>
<LargeNumber>{data?.data.ledger.length || "-"}</LargeNumber>
</Grid>
<Grid item>
<ProposalInfoTitle color="secondary">Active Proposals</ProposalInfoTitle>
<LargeNumber color="textPrimary">
{activeLiteProposals
? Number(activeProposals?.length) + Number(activeLiteProposals?.length)
: Number(activeProposals?.length)}
</LargeNumber>
</Grid>
</Grid>
</Grid>
</Grid>
</StatsContainer> */}
</Grid>
</Box>
)
Expand Down
Loading

0 comments on commit d73c4f0

Please sign in to comment.