From 03e31240b5037e5976a0fb1b222e4588a04a2501 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Fri, 27 Oct 2023 19:35:20 +0200 Subject: [PATCH] home tab finished --- package.json | 1 + .../explorer/components/DAOStatsRow.tsx | 24 +-- .../explorer/components/NavigationMenu.tsx | 40 ++++- .../explorer/components/UsersTable.tsx | 139 ++++++++++-------- src/modules/explorer/pages/DAO/index.tsx | 11 +- src/modules/explorer/utils/FormatNumber.ts | 1 - yarn.lock | 12 ++ 7 files changed, 151 insertions(+), 77 deletions(-) diff --git a/package.json b/package.json index d1df13c5..3fd1c5ba 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "launchdarkly-react-client-sdk": "2.27.0", "mixpanel-browser": "^2.42.0", "notistack": "^1.0.3", + "numbro": "^2.4.0", "os-browserify": "^0.3.0", "prism-themes": "^1.9.0", "prismjs": "^1.28.0", diff --git a/src/modules/explorer/components/DAOStatsRow.tsx b/src/modules/explorer/components/DAOStatsRow.tsx index 55275c04..f959740a 100644 --- a/src/modules/explorer/components/DAOStatsRow.tsx +++ b/src/modules/explorer/components/DAOStatsRow.tsx @@ -17,7 +17,6 @@ import { formatNumber } from "../utils/FormatNumber" import { useDAOHoldings, useDAONFTHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings" const Item = styled(Paper)(({ theme }) => ({ - ...theme.typography.body2, backgroundColor: theme.palette.primary.main, borderRadius: 8, color: theme.palette.text.primary, @@ -32,22 +31,27 @@ const ItemContent = styled(Grid)({ gap: 8 }) -const ItemTitle = styled(Typography)({ +const ItemTitle = styled(Typography)(({ theme }) => ({ fontSize: 18, - fontWeight: 600 -}) + fontWeight: 600, + [theme.breakpoints.down("md")]: { + fontSize: 15 + } +})) -const ItemValue = styled(Typography)({ +const ItemValue = styled(Typography)(({ theme }) => ({ fontSize: 36, - fontWeight: 300 -}) + fontWeight: 300, + [theme.breakpoints.down("sm")]: { + fontSize: 28 + } +})) const Percentage = styled(Typography)({ fontSize: 18, fontWeight: 300, - marginLeft: 78, marginTop: 20, - position: "absolute" + paddingLeft: 18 }) export const DAOStatsRow: React.FC = () => { @@ -85,7 +89,7 @@ export const DAOStatsRow: React.FC = () => { const amountLockedPercentage = totalTokens ? amountLocked.div(totalTokens).multipliedBy(100) : new BigNumber(0) return ( - + diff --git a/src/modules/explorer/components/NavigationMenu.tsx b/src/modules/explorer/components/NavigationMenu.tsx index 4487b4a6..1d5928e0 100644 --- a/src/modules/explorer/components/NavigationMenu.tsx +++ b/src/modules/explorer/components/NavigationMenu.tsx @@ -57,6 +57,42 @@ const InnerContainerExplorer = styled(Grid)(({ theme }: { theme: Theme }) => ({ } })) +const PageItemMobile = styled(Grid)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({ + "display": "flex", + "alignItems": "center", + "borderTop": "2px solid transparent", + "backgroundColor": isSelected ? "rgba(129, 254, 183, 0.20)" : "inherit", + "height": "auto", + "padding": "20px 20px", + "borderRadius": 8, + "transition": isSelected ? "0s ease-in" : ".1s ease-out", + "width": 180, + "justifyContent": "center", + + "& > a > *": { + height: "100%" + }, + + "&:hover": { + "& > a > * > * > * > * > *": { + fill: isSelected ? theme.palette.secondary.main : theme.palette.secondary.main, + stroke: isSelected ? theme.palette.secondary.main : theme.palette.secondary.main, + transition: isSelected ? "none" : ".15s ease-in" + } + }, + + "& > a > * > * > * > * > *": { + transition: ".15s ease-out" + }, + + "& > a > * > * > *": { + transition: ".15s ease-out" + }, + [theme.breakpoints.down("sm")]: { + width: "45px" + } +})) + const PageItem = styled(Grid)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({ "display": "flex", "alignItems": "center", @@ -259,7 +295,7 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa ) : ( {pages.map((page, i) => ( - + @@ -269,7 +305,7 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa - + ))} ) diff --git a/src/modules/explorer/components/UsersTable.tsx b/src/modules/explorer/components/UsersTable.tsx index 04e23ba8..797cc1f6 100644 --- a/src/modules/explorer/components/UsersTable.tsx +++ b/src/modules/explorer/components/UsersTable.tsx @@ -15,6 +15,10 @@ import dayjs from "dayjs" import { UserBadge } from "modules/explorer/components/UserBadge" import { Blockie } from "modules/common/Blockie" import { CopyButton } from "./CopyButton" +import { toShortAddress } from "services/contracts/utils" +import { formatNumber } from "../utils/FormatNumber" +import BigNumber from "bignumber.js" +import numbro from "numbro" const localizedFormat = require("dayjs/plugin/localizedFormat") dayjs.extend(localizedFormat) @@ -73,7 +77,8 @@ const Value = styled(Typography)({ marginTop: 8, fontWeight: 300, gap: 6, - display: "flex" + display: "flex", + textTransform: "uppercase" }) const Symbol = styled(Typography)({ @@ -81,58 +86,72 @@ const Symbol = styled(Typography)({ fontWeight: 300 }) -const titleDataMatcher = (title: (typeof titles)[number], rowData: RowData) => { - switch (title) { - case "Rank": - return rowData.address - case "Votes": - return rowData.votes - case "Available Staked": - return rowData.availableStaked - case "Total Staked": - return rowData.totalStaked - case "Proposals Voted": - return rowData.proposalsVoted - } +const formatConfig = { + average: true, + mantissa: 1, + thousandSeparated: true, + trimMantissa: true } -const MobileTableHeader = styled(Grid)({ - width: "100%", - padding: 20, - borderBottom: "0.3px solid rgba(125,140,139, 0.2)" -}) - -const MobileUsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { +const MobileUsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data, symbol }) => { return ( - - - - Top Addresses - - - {data.map((row, i) => ( - - {titles.map((title, j) => ( - - {title === "Rank" ? ( - - ) : ( - - {title}: {titleDataMatcher(title, row)} + <> + + + + Top Addresses + + + + {data.map((item, i) => ( + + + + + {toShortAddress(item.address)} + + + + + + + Total Votes + + + {numbro(item.votes).format(formatConfig)} + + + + + Proposals Voted - )} + + {numbro(item.proposalsVoted).format(formatConfig)} + + + + + Available Staked + + + {numbro(item.availableStaked).format(formatConfig)} + {symbol} + + + + + Total Staked + + + {numbro(item.totalStaked).format(formatConfig)} + {symbol} + + - ))} - - ))} - + + ))} + + ) } @@ -156,37 +175,37 @@ const DesktopUsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data - + Total Votes - {item.votes} + {numbro(item.votes).format(formatConfig)} - + Proposals Voted - {item.proposalsVoted} + {numbro(item.proposalsVoted).format(formatConfig)} - + Available Staked - {item.availableStaked} + {numbro(item.availableStaked).format(formatConfig)} {symbol} - + Total Staked - {item.totalStaked} + {numbro(item.totalStaked).format(formatConfig)} {symbol} @@ -200,7 +219,11 @@ const DesktopUsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data export const UsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data, symbol }) => { const theme = useTheme() - const isExtraSmall = useMediaQuery(theme.breakpoints.down(960)) + const isExtraSmall = useMediaQuery(theme.breakpoints.down(820)) - return isExtraSmall ? : + return isExtraSmall ? ( + + ) : ( + + ) } diff --git a/src/modules/explorer/pages/DAO/index.tsx b/src/modules/explorer/pages/DAO/index.tsx index 45498695..11606da7 100644 --- a/src/modules/explorer/pages/DAO/index.tsx +++ b/src/modules/explorer/pages/DAO/index.tsx @@ -24,7 +24,10 @@ export const StyledAvatar = styled(Avatar)({ }) const HeroContainer = styled(ContentContainer)(({ theme }) => ({ - padding: "38px 38px" + padding: 38, + [theme.breakpoints.down("sm")]: { + width: "inherit" + } })) const TitleText = styled(Typography)(({ theme }) => ({ @@ -79,10 +82,6 @@ const SubtitleText = styled(Typography)({ } }) -const TableContainer = styled(ContentContainer)({ - width: "100%" -}) - export const DAO: React.FC = () => { const daoId = useDAOID() const { data, cycleInfo, ledger } = useDAO(daoId) @@ -149,7 +148,7 @@ export const DAO: React.FC = () => { - + diff --git a/src/modules/explorer/utils/FormatNumber.ts b/src/modules/explorer/utils/FormatNumber.ts index c688907f..6d770417 100644 --- a/src/modules/explorer/utils/FormatNumber.ts +++ b/src/modules/explorer/utils/FormatNumber.ts @@ -1,5 +1,4 @@ import BigNumber from "bignumber.js" - export const formatNumber = (number: BigNumber) => { if (number.isLessThan(1e3)) return number diff --git a/yarn.lock b/yarn.lock index bf2a5671..4d7a1553 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4544,6 +4544,11 @@ big.js@^5.2.2: resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== +"bignumber.js@^8 || ^9": + version "9.1.2" + resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c" + integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug== + bignumber.js@^9.0.1, bignumber.js@^9.1.0: version "9.1.1" resolved "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz" @@ -9809,6 +9814,13 @@ nth-check@^2.0.1: dependencies: boolbase "^1.0.0" +numbro@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/numbro/-/numbro-2.4.0.tgz#3cecae307ab2c2d9fd3e1c08249f4abd504bd577" + integrity sha512-t6rVkO1CcKvffvOJJu/zMo70VIcQSR6w3AmIhfHGvmk4vHbNe6zHgomB0aWFAPZWM9JBVWBM0efJv9DBiRoSTA== + dependencies: + bignumber.js "^8 || ^9" + nwsapi@^2.2.0: version "2.2.5" resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.5.tgz"