history table upgraded

dOrgTech · Mar 31, 2023 · 2be1bee · 2be1bee
1 parent e9718d0
commit 2be1bee
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 51 deletions.
diff --git a/src/modules/explorer/components/ProposalForm.tsx b/src/modules/explorer/components/ProposalForm.tsx
@@ -187,7 +187,7 @@ export const ProposalFormContainer: React.FC<Props> = ({ open, handleClose, defa
             <CustomContainer container direction="row" justifyContent="space-between" alignItems="center">
               <Grid item container direction="row" alignItems="center" style={{ width: "80%" }}>
                 <DialogTitle>{forms[selectedTab].label.toLowerCase()}</DialogTitle>
-                <IconSwap />
+                {selectedTab === 0 || selectedTab === 1 ? <IconSwap /> : null}
                 <SwapText>{getLabel(selectedTab)}</SwapText>
               </Grid>
               <Grid item>

diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx
@@ -19,6 +19,8 @@ import { useTezos } from "services/beacon/hooks/useTezos"
 import { Network } from "services/beacon"
 import { ContentContainer } from "modules/explorer/components/ContentContainer"
 import { networkNameMap } from "services/bakingBad"
+import { Blockie } from "modules/common/Blockie"
+import { toShortAddress } from "services/contracts/utils"
 
 const localizedFormat = require("dayjs/plugin/localizedFormat")
 dayjs.extend(localizedFormat)
@@ -32,12 +34,12 @@ const TokenSymbol = styled(Typography)(({ theme }) => ({
   width: "min-content"
 }))
 
-const createData = (transfer: TransferWithBN, isInbound: boolean) => {
+const createData = (transfer: TransferWithBN) => {
   return {
     token: transfer.name,
     date: dayjs(transfer.date).format("ll"),
+    address: transfer.recipient,
     amount: transfer.amount.dp(10, 1).toString(),
-    address: isInbound ? transfer.sender : transfer.recipient,
     hash: transfer.hash
   }
 }
@@ -46,6 +48,11 @@ const TableContainer = styled(ContentContainer)({
   width: "100%"
 })
 
+const RecipientText = styled(Typography)({
+  marginLeft: 8,
+  marginTop: 8
+})
+
 interface RowData {
   token: string
   date: string
@@ -54,17 +61,11 @@ interface RowData {
   hash: string
 }
 
-const outboundTitles = ["Outbound Transfers", "Date", "Recipient", "Amount"]
-const inboundTitles = ["Inbound Transfers", "Date", "Sender", "Amount"]
+const Titles = ["Transfer History", "Date", "Recipient", "Amount"]
 
-const titleDataMatcher = (
-  title: (typeof outboundTitles)[number] | (typeof inboundTitles)[number],
-  rowData: RowData
-) => {
+const titleDataMatcher = (title: (typeof Titles)[number], rowData: RowData) => {
   switch (title) {
-    case "Outbound Transfers":
-      return rowData.token
-    case "Inbound Transfers":
+    case "Transfer History":
       return rowData.token
     case "Date":
       return rowData.date
@@ -89,12 +90,12 @@ const MobileTableRow = styled(Grid)({
 
 //TODO: Should mobile table items also redirect to block explorer on click?
 
-const MobileTransfersTable: React.FC<{ data: RowData[]; isInbound: boolean }> = ({ isInbound, data }) => {
+const MobileTransfersTable: React.FC<{ data: RowData[] }> = ({ data }) => {
   return (
     <Grid container direction="column" alignItems="center">
       <MobileTableHeader item>
         <Typography align="center" variant="h4" color="textPrimary">
-          {isInbound ? "Inbound" : "Outbound"} Transfer History
+          Transfer History
         </Typography>
       </MobileTableHeader>
       {data.map((row, i) => (
@@ -106,7 +107,7 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; isInbound: boolean }> =
           alignItems="center"
           style={{ gap: 19 }}
         >
-          {(isInbound ? inboundTitles : outboundTitles).map((title, j) => (
+          {Titles.map((title, j) => (
             <Grid item key={`transfersMobileItem-${j}`}>
               <Typography variant="h6" color="secondary" align="center">
                 {title === "Outbound Transfers" || title === "Inbound Transfers" ? "Token:" : title}
@@ -122,17 +123,13 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; isInbound: boolean }> =
   )
 }
 
-const DesktopTransfersTable: React.FC<{ isInbound: boolean; data: RowData[]; network: Network }> = ({
-  isInbound,
-  data: rows,
-  network
-}) => {
+const DesktopTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => {
   return (
     <>
       <Table>
         <TableHead>
           <TableRow>
-            {(isInbound ? inboundTitles : outboundTitles).map((title, i) => (
+            {Titles.map((title, i) => (
               <TableCell key={`tokentitle-${i}`}>{title}</TableCell>
             ))}
           </TableRow>
@@ -149,7 +146,10 @@ const DesktopTransfersTable: React.FC<{ isInbound: boolean; data: RowData[]; net
                 <TokenSymbol>{row.token}</TokenSymbol>
               </TableCell>
               <TableCell>{row.date}</TableCell>
-              <TableCell>{row.address}</TableCell>
+              <TableCell style={{ display: "flex", alignItems: "center" }}>
+                <Blockie address={row.address} size={24} style={{ marginTop: 8 }} />
+                <RecipientText variant="body2">{toShortAddress(row.address)}</RecipientText>
+              </TableCell>
               <TableCell>{row.amount}</TableCell>
             </TableRow>
           ))}
@@ -159,10 +159,7 @@ const DesktopTransfersTable: React.FC<{ isInbound: boolean; data: RowData[]; net
   )
 }
 
-export const TransfersTable: React.FC<{ transfers: TransferWithBN[]; isInbound: boolean }> = ({
-  isInbound,
-  transfers
-}) => {
+export const TransfersTable: React.FC<{ transfers: TransferWithBN[] }> = ({ transfers }) => {
   const theme = useTheme()
   const isSmall = useMediaQuery(theme.breakpoints.down("sm"))
 
@@ -171,18 +168,14 @@ export const TransfersTable: React.FC<{ transfers: TransferWithBN[]; isInbound:
       return []
     }
 
-    return transfers.map(t => createData(t, isInbound))
-  }, [isInbound, transfers])
+    return transfers.map(t => createData(t))
+  }, [transfers])
 
   const { network } = useTezos()
 
   return (
     <TableContainer>
-      {isSmall ? (
-        <MobileTransfersTable data={rows} isInbound={isInbound} />
-      ) : (
-        <DesktopTransfersTable data={rows} network={network} isInbound={isInbound} />
-      )}
+      {isSmall ? <MobileTransfersTable data={rows} /> : <DesktopTransfersTable data={rows} network={network} />}
     </TableContainer>
   )
 }
diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx
@@ -46,22 +46,6 @@ export const Treasury: React.FC = () => {
   }
   const { data: transfers } = useTransfers(daoId)
 
-  const inboundTransfers = useMemo(() => {
-    if (!transfers) {
-      return []
-    }
-
-    return transfers.filter(t => t.recipient.toLowerCase() === daoId.toLowerCase())
-  }, [transfers, daoId])
-
-  const outboundTransfers = useMemo(() => {
-    if (!transfers) {
-      return []
-    }
-
-    return transfers.filter(t => t.recipient.toLowerCase() !== daoId.toLowerCase())
-  }, [transfers, daoId])
-
   const shouldDisable = useIsProposalButtonDisabled(daoId)
 
   const handleChangeTab = (newValue: number) => {
@@ -172,8 +156,7 @@ export const Treasury: React.FC = () => {
           </TabPanel>
 
           <TabPanel value={selectedTab} index={2}>
-            <TransfersTable isInbound={true} transfers={inboundTransfers} />
-            <TransfersTable isInbound={false} transfers={outboundTransfers} />
+            <TransfersTable transfers={transfers || []} />
           </TabPanel>
         </ItemGrid>
       </Grid>

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -371,6 +371,9 @@ export const theme = createTheme({
     MuiTableCell: {
       root: {
         borderBottom: "unset"
+      },
+      head: {
+        fontWeight: 300
       }
     },
     MuiTableRow: {