Skip to content

Commit

Permalink
home tab finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiolalombardim
fabiolalombardim committed Oct 27, 2023
1 parent d73c4f0 commit 03e3124
Show file tree
Hide file tree
Showing 7 changed files with 151 additions and 77 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
24 changes: 14 additions & 10 deletions src/modules/explorer/components/DAOStatsRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = () => {
Expand Down Expand Up @@ -85,7 +89,7 @@ export const DAOStatsRow: React.FC = () => {
const amountLockedPercentage = totalTokens ? amountLocked.div(totalTokens).multipliedBy(100) : new BigNumber(0)

return (
<Box sx={{ flexGrow: 1 }}>
<Box sx={{ flexGrow: 1, width: "inherit" }}>
<Grid container spacing={4}>
<Grid item xs={12} sm={6} md={4}>
<Item>
Expand Down
40 changes: 38 additions & 2 deletions src/modules/explorer/components/NavigationMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -259,7 +295,7 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa
) : (
<BottomNavBar>
{pages.map((page, i) => (
<PageItem key={`page-${i}`} isSelected={pathId === page.pathId} container item alignItems="center">
<PageItemMobile key={`page-${i}`} isSelected={pathId === page.pathId} container item alignItems="center">
<Link to={page.href}>
<Grid container alignItems="center" justifyContent="center">
<Grid item>
Expand All @@ -269,7 +305,7 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa
</Grid>
</Grid>
</Link>
</PageItem>
</PageItemMobile>
))}
</BottomNavBar>
)
Expand Down
139 changes: 81 additions & 58 deletions src/modules/explorer/components/UsersTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -73,66 +77,81 @@ const Value = styled(Typography)({
marginTop: 8,
fontWeight: 300,
gap: 6,
display: "flex"
display: "flex",
textTransform: "uppercase"
})

const Symbol = styled(Typography)({
marginLeft: 4,
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 (
<Grid container direction="column" alignItems="center">
<MobileTableHeader item>
<Title align="center" variant="h4" color="textPrimary">
Top Addresses
</Title>
</MobileTableHeader>
{data.map((row, i) => (
<MobileTableRow
key={`usersMobile-${i}`}
item
container
direction="column"
alignItems="center"
style={{ gap: 19 }}
>
{titles.map((title, j) => (
<Grid item key={`usersMobileItem-${j}`}>
{title === "Rank" ? (
<UserBadge address={row.address} size={44} gap={10} />
) : (
<Typography variant="h6" color="textPrimary">
{title}: {titleDataMatcher(title, row)}
<>
<Grid container style={{ gap: 32 }}>
<Grid item container direction="row">
<Grid item xs={12}>
<Title color="textPrimary">Top Addresses</Title>
</Grid>
</Grid>

{data.map((item, i) => (
<CardContainer key={`usersrow-${i}`} container direction="row" style={{ gap: 24 }}>
<Grid item container direction="row" alignItems="center" xs={12} style={{ gap: 8 }}>
<Blockie address={item.address} size={24} />
<Typography style={{ fontWeight: 300 }} color="textPrimary" variant="body2">
{toShortAddress(item.address)}
</Typography>
<CopyButton text={item.address} />
</Grid>
<Grid item container direction="row" xs={12} style={{ gap: 20 }}>
<Grid item xs={12}>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Total Votes
</Typography>
<Value variant="body2" color="secondary">
{numbro(item.votes).format(formatConfig)}
</Value>
</Grid>
<Grid item xs={12}>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Proposals Voted
</Typography>
)}
<Value variant="body2" color="secondary">
{numbro(item.proposalsVoted).format(formatConfig)}
</Value>
</Grid>
<Grid item xs={12}>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Available Staked
</Typography>
<Value variant="body2" color="secondary">
{numbro(item.availableStaked).format(formatConfig)}
<Symbol variant="body2">{symbol}</Symbol>
</Value>
</Grid>
<Grid item xs={12}>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Total Staked
</Typography>
<Value variant="body2" color="secondary">
{numbro(item.totalStaked).format(formatConfig)}
<Symbol variant="body2">{symbol}</Symbol>
</Value>
</Grid>
</Grid>
))}
</MobileTableRow>
))}
</Grid>
</CardContainer>
))}
</Grid>
</>
)
}

Expand All @@ -156,37 +175,37 @@ const DesktopUsersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data
<CopyButton text={item.address} />
</Grid>
<Grid item container direction="row" xs={12} justifyContent="space-between">
<Grid item xs={3}>
<Grid item>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Total Votes
</Typography>
<Value variant="body2" color="secondary">
{item.votes}
{numbro(item.votes).format(formatConfig)}
</Value>
</Grid>
<Grid item xs={3}>
<Grid item>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Proposals Voted
</Typography>
<Value variant="body2" color="secondary">
{item.proposalsVoted}
{numbro(item.proposalsVoted).format(formatConfig)}
</Value>
</Grid>
<Grid item xs={3}>
<Grid item>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Available Staked
</Typography>
<Value variant="body2" color="secondary">
{item.availableStaked}
{numbro(item.availableStaked).format(formatConfig)}
<Symbol variant="body2">{symbol}</Symbol>
</Value>
</Grid>
<Grid item xs={3}>
<Grid item>
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
Total Staked
</Typography>
<Value variant="body2" color="secondary">
{item.totalStaked}
{numbro(item.totalStaked).format(formatConfig)}
<Symbol variant="body2">{symbol}</Symbol>
</Value>
</Grid>
Expand All @@ -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 ? <MobileUsersTable data={data} /> : <DesktopUsersTable data={data} symbol={symbol} />
return isExtraSmall ? (
<MobileUsersTable data={data} symbol={symbol} />
) : (
<DesktopUsersTable data={data} symbol={symbol} />
)
}
11 changes: 5 additions & 6 deletions src/modules/explorer/pages/DAO/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => ({
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -149,7 +148,7 @@ export const DAO: React.FC = () => {
</HeroContainer>
<DAOStatsRow />

<Grid item>
<Grid item style={{ width: "inherit" }}>
<UsersTable data={usersTableData} symbol={symbol || ""} />
</Grid>
</Grid>
Expand Down
1 change: 0 additions & 1 deletion src/modules/explorer/utils/FormatNumber.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import BigNumber from "bignumber.js"

export const formatNumber = (number: BigNumber) => {
if (number.isLessThan(1e3))
return number
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 03e3124

Please sign in to comment.