desktop update

dOrgTech · May 25, 2024 · 350d952 · 350d952
1 parent c459fc1
commit 350d952
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 49 deletions.
diff --git 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 (
     <>
-      <Table>
-        <TableHead>
-          <TableRow>
-            {Titles.map((title, i) => (
-              <TableCell key={`tokentitle-${i}`}>{title}</TableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.slice(offset, offset + 5).map((row, i) => (
-            <TableRow
-              component={Link}
-              key={`tokenrow-${i}`}
-              href={`https://${network === "mainnet" ? "" : networkNameMap[network] + "."}tzkt.io/${row.hash}`}
-              target="_blank"
-            >
-              <TableCell>
-                <div style={{ display: "flex", alignItems: "center" }}>
-                  <StyledBullet /> {row.token}
-                </div>
-              </TableCell>
-              <TableCell>{row.date}</TableCell>
-              <TableCell style={{ display: "flex", alignItems: "center" }}>
-                <RecipientText variant="body2">{toShortAddress(row.address)}</RecipientText>
-                <CopyButton text={row.address} style={{ marginBottom: 2 }} />
-              </TableCell>
-              <TableCell>{row.amount}</TableCell>
-            </TableRow>
-          ))}
-          {!(rows && rows.length > 0) ? (
-            <ProposalsFooter item container direction="column" justifyContent="center">
-              <Grid item>
-                <Typography color="textPrimary" align="left">
-                  No items
-                </Typography>
+      <Container item>
+        {rows.slice(offset, offset + 5).map((row, i) => {
+          return (
+            <ItemContainer container key={`${row.hash}`} justifyContent="space-between" alignItems="center">
+              <Grid item xs={5} container direction="column">
+                <Grid item container direction="row" alignItems="center">
+                  <StyledBullet />
+                  <Title>{row.token}</Title>
+                </Grid>
+                <Grid item container direction="row" style={{ gap: 10 }}>
+                  <Subtitle>To {toShortAddress(row.address)}</Subtitle>
+                  <Subtitle> •</Subtitle>
+                  <Subtitle>{dayjs(row.date).format("ll")}</Subtitle>
+                </Grid>
               </Grid>
-            </ProposalsFooter>
-          ) : null}
-        </TableBody>
-      </Table>
+              <Grid item xs={5} container direction="column">
+                <Grid item container direction="row" justifyContent="flex-end">
+                  <AmountText>
+                    {row.type ? (row.type === "Deposit" ? "-" : "+") : null} {row.amount} {row.token}{" "}
+                  </AmountText>
+                </Grid>
+                <Grid item direction="row" container justifyContent="flex-end">
+                  <BlockExplorer color="secondary" onClick={() => openBlockExplorer(row.hash)}>
+                    <OpenInNewIcon color="secondary" />
+                    View on Block Explorer
+                  </BlockExplorer>
+                </Grid>
+              </Grid>
+            </ItemContainer>
+          )
+        })}
+      </Container>
+
       <Grid container direction="row" justifyContent="flex-end">
         <ReactPaginate
           previousLabel={"<"}
@@ -276,7 +320,7 @@ export const TransfersTable: React.FC<{ transfers: TransferWithBN[] }> = ({ tran
       {isSmall ? (
         <MobileTransfersTable data={rows} network={network} />
       ) : (
-        <DesktopTransfersTable data={rows} network={network} />
+        <TransfersTableItems data={rows} network={network} />
       )}
     </TableContainer>
   )

diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx
@@ -1,5 +1,4 @@
 import { Button, Grid, Theme, Tooltip, Typography, useMediaQuery, useTheme } from "@material-ui/core"
-import { ProposalFormContainer } from "modules/explorer/components/ProposalForm"
 
 import React, { useMemo, useState } from "react"
 import { useDAO } from "services/services/dao/hooks/useDAO"
@@ -175,7 +174,9 @@ export const Treasury: React.FC = () => {
             <TabsContainer container>
               <Grid item>
                 <StyledTab
-                  startIcon={<TollIcon />}
+                  startIcon={
+                    <TollIcon style={{ color: "inherit" }} color={selectedTab === 0 ? "secondary" : "inherit"} />
+                  }
                   variant="contained"
                   disableElevation={true}
                   onClick={() => handleChangeTab(0)}
@@ -186,7 +187,9 @@ export const Treasury: React.FC = () => {
               </Grid>
               <Grid item>
                 <StyledTab
-                  startIcon={<PaletteIcon />}
+                  startIcon={
+                    <PaletteIcon style={{ color: "inherit" }} color={selectedTab === 1 ? "secondary" : "inherit"} />
+                  }
                   disableElevation={true}
                   variant="contained"
                   onClick={() => handleChangeTab(1)}
@@ -197,13 +200,15 @@ export const Treasury: React.FC = () => {
               </Grid>
               <Grid item>
                 <StyledTab
-                  startIcon={<ReceiptIcon />}
+                  startIcon={
+                    <ReceiptIcon style={{ color: "inherit" }} color={selectedTab === 2 ? "secondary" : "inherit"} />
+                  }
                   disableElevation={true}
                   variant="contained"
                   onClick={() => handleChangeTab(2)}
                   isSelected={selectedTab === 2}
                 >
-                  History
+                  Transactions
                 </StyledTab>
               </Grid>
             </TabsContainer>