diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx index 6b598071..cdf58335 100644 --- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx @@ -1,5 +1,5 @@ -import dayjs from "dayjs" import React, { useMemo, useState } from "react" +import dayjs from "dayjs" import { Grid, Link, @@ -20,9 +20,9 @@ import { ContentContainer } from "modules/explorer/components/ContentContainer" import { networkNameMap } from "services/bakingBad" import { toShortAddress } from "services/contracts/utils" import { ReactComponent as BulletIcon } from "assets/img/bullet.svg" -import { CopyButton } from "modules/common/CopyButton" import ReactPaginate from "react-paginate" import "../../DAOList/styles.css" +import OpenInNewIcon from "@mui/icons-material/OpenInNew" const localizedFormat = require("dayjs/plugin/localizedFormat") dayjs.extend(localizedFormat) @@ -33,7 +33,8 @@ const createData = (transfer: TransferWithBN) => { date: dayjs(transfer.date).format("L"), address: transfer.recipient, amount: transfer.amount.dp(10, 1).toString(), - hash: transfer.hash + hash: transfer.hash, + type: transfer.type } } @@ -65,12 +66,55 @@ const ProposalsFooterMobile = styled(Grid)({ borderBottomRightRadius: 8 }) +const ItemContainer = styled(Grid)(({ theme }) => ({ + padding: "40px 48px 41px 48px", + gap: 8, + borderRadius: 8, + background: theme.palette.primary.main +})) + +const Container = styled(Grid)({ + gap: 24, + display: "grid" +}) + +const Title = styled(Typography)({ + color: "#fff", + fontSize: 24 +}) + +const Subtitle = styled(Typography)(({ theme }) => ({ + color: theme.palette.primary.light, + fontSize: 16, + fontWeight: 300 +})) + +const AmountText = styled(Typography)(({ theme }) => ({ + color: "#fff", + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" +})) + +const BlockExplorer = styled(Typography)({ + "fontSize": 16, + "fontWeight": 400, + "cursor": "pointer", + "display": "flex", + "alignItems": "center", + "& svg": { + fontSize: 16, + marginRight: 6 + } +}) + interface RowData { token: string date: string amount: string address: string hash: string + type: string | undefined } const Titles = ["Token", "Date", "Recipient", "Amount"] @@ -122,6 +166,7 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ const newOffset = (event.selected * 5) % data.length setOffset(newOffset) setCurrentPage(event.selected) + window.scrollTo({ top: 0, behavior: "smooth" }) } } const pageCount = Math.ceil(data ? data.length / 5 : 0) @@ -183,60 +228,59 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ ) } -const DesktopTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => { +const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => { const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) + + const openBlockExplorer = (hash: string) => { + window.open(`https://${networkNameMap[network]}.tzkt.io/` + hash, "_blank") + } + // Invoke when user click to request another page. const handlePageClick = (event: { selected: number }) => { if (rows) { const newOffset = (event.selected * 5) % rows.length setOffset(newOffset) setCurrentPage(event.selected) + window.scrollTo({ top: 0, behavior: "smooth" }) } } const pageCount = Math.ceil(rows ? rows.length / 5 : 0) return ( <> -