import React from "react"; import { Table, TableBody, TableCell, TableHead, TableRow, styled, Grid, Typography, useTheme, useMediaQuery, } from "@material-ui/core"; import dayjs from "dayjs"; import { UserBadge } from "modules/explorer/components/UserBadge"; const localizedFormat = require("dayjs/plugin/localizedFormat"); dayjs.extend(localizedFormat); const titles = ["Rank", "Votes", "Available Staked", "Total Staked", "Proposals Voted"] as const; interface RowData { address: string; votes: string; availableStaked: string; totalStaked: string; proposalsVoted: string; } const OverflowCell = styled(TableCell)({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 300, }); const StyledTableHead = styled(TableHead)({ minHeight: 34, }); const StyledTableRow = styled(TableRow)({ borderBottom: ".6px solid rgba(125,140,139, 0.2)", }); const MobileTableRow = styled(Grid)({ padding: "30px", borderBottom: "0.3px solid rgba(125,140,139, 0.2)", }); const TableText = styled(Typography)({ fontSize: "16px", fontWeight: 500, ["@media (max-width:1155px)"]: { fontSize: "15px", whiteSpace: "nowrap", }, }); 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 MobileTableHeader = styled(Grid)({ width: "100%", padding: 20, borderBottom: "0.3px solid rgba(125,140,139, 0.2)" }) const MobileUsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { return ( <Grid container direction="column" alignItems="center"> <MobileTableHeader item> <Typography align="center" variant="h4" color="textPrimary">Top Addresses</Typography> </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)} </Typography> )} </Grid> ))} </MobileTableRow> ))} </Grid> ); }; const DesktopUsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { return ( <> <Table> <StyledTableHead> <StyledTableRow> <TableCell><TableText>Top Addresses</TableText></TableCell> </StyledTableRow> <TableRow> {titles.map((title, i) => ( <TableCell key={`userstitle-${i}`}><TableText>{title}</TableText></TableCell> ))} </TableRow> </StyledTableHead> <TableBody> {data.map((row, i) => ( <TableRow key={`usersrow-${i}`}> <OverflowCell> <UserBadge smallText={true} address={row.address} size={44} gap={16} /> </OverflowCell> <TableCell>{row.votes}</TableCell> <TableCell>{row.availableStaked}</TableCell> <TableCell>{row.totalStaked}</TableCell> <TableCell>{row.proposalsVoted}</TableCell> </TableRow> ))} </TableBody> </Table> </> ); }; export const UsersTable: React.FC<{ data: RowData[] }> = ({ data }) => { const theme = useTheme(); const isExtraSmall = useMediaQuery(theme.breakpoints.down(960)); return isExtraSmall ? ( <MobileUsersTable data={data} /> ) : ( <DesktopUsersTable data={data} /> ); };