diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx index cdf58335..6c124d3e 100644 --- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx @@ -23,6 +23,7 @@ import { ReactComponent as BulletIcon } from "assets/img/bullet.svg" import ReactPaginate from "react-paginate" import "../../DAOList/styles.css" import OpenInNewIcon from "@mui/icons-material/OpenInNew" +import numbro from "numbro" const localizedFormat = require("dayjs/plugin/localizedFormat") dayjs.extend(localizedFormat) @@ -67,10 +68,14 @@ const ProposalsFooterMobile = styled(Grid)({ }) const ItemContainer = styled(Grid)(({ theme }) => ({ - padding: "40px 48px 41px 48px", + padding: "40px 48px", gap: 8, borderRadius: 8, - background: theme.palette.primary.main + background: theme.palette.primary.main, + [theme.breakpoints.down("sm")]: { + padding: "30px 38px", + gap: 20 + } })) const Container = styled(Grid)({ @@ -119,6 +124,13 @@ interface RowData { const Titles = ["Token", "Date", "Recipient", "Amount"] +const formatConfig = { + average: true, + mantissa: 1, + thousandSeparated: true, + trimMantissa: true +} + const titleDataMatcher = (title: (typeof Titles)[number], rowData: RowData) => { switch (title) { case "Token": @@ -231,6 +243,8 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => { const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) + const theme = useTheme() + const isSmall = useMediaQuery(theme.breakpoints.down("xs")) const openBlockExplorer = (hash: string) => { window.open(`https://${networkNameMap[network]}.tzkt.io/` + hash, "_blank") @@ -252,24 +266,25 @@ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ {rows.slice(offset, offset + 5).map((row, i) => { return ( - + {row.token} - + To {toShortAddress(row.address)} - + {isSmall ? null : } {dayjs(row.date).format("ll")} - - + + - {row.type ? (row.type === "Deposit" ? "-" : "+") : null} {row.amount} {row.token}{" "} + {row.type ? (row.type === "Deposit" ? "-" : "+") : null}{" "} + {isSmall ? numbro(row.amount).format(formatConfig) : row.amount} {row.token}{" "} - + openBlockExplorer(row.hash)}> View on Block Explorer @@ -317,11 +332,7 @@ export const TransfersTable: React.FC<{ transfers: TransferWithBN[] }> = ({ tran return ( - {isSmall ? ( - - ) : ( - - )} + ) } diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx index f9a07f0e..bf123b36 100644 --- a/src/modules/explorer/pages/Treasury/index.tsx +++ b/src/modules/explorer/pages/Treasury/index.tsx @@ -130,7 +130,7 @@ export const Treasury: React.FC = () => { justifyContent="flex-end" alignItems="center" style={{ gap: 15 }} - direction={isMobileSmall ? "column" : "row"} + direction={isMobileSmall ? "row" : "row"} xs={isMobileSmall ? undefined : true} > {dao && ( @@ -138,7 +138,7 @@ export const Treasury: React.FC = () => { item xs container - justifyContent="flex-end" + justifyContent={"flex-end"} direction="row" style={isMobileSmall ? {} : { marginLeft: 30 }} >