feat(gui): Pretty Monero transaction history

src-gui/src/renderer/components/other/Units.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@mui/material";
+import { Box, SxProps, Tooltip, Typography } from "@mui/material";
 import { useAppSelector, useSettings } from "store/hooks";
 import { getMarkup, piconerosToXmr, satsToBtc } from "utils/conversionUtils";
 
@@ -10,12 +10,18 @@ export function AmountWithUnit({
   fixedPrecision,
   exchangeRate,
   parenthesisText = null,
+  labelStyles,
+  amountStyles,
+  disableTooltip = false,
 }: {
   amount: Amount;
   unit: string;
   fixedPrecision: number;
   exchangeRate?: Amount;
   parenthesisText?: string;
+  labelStyles?: SxProps;
+  amountStyles?: SxProps;
+  disableTooltip?: boolean;
 }) {
   const [fetchFiatPrices, fiatCurrency] = useSettings((settings) => [
     settings.fetchFiatPrices,
@@ -29,12 +35,25 @@ export function AmountWithUnit({
       ? `≈ ${(exchangeRate * amount).toFixed(2)} ${fiatCurrency}`
       : "";
 
+  const content = (
+    <span>
+      <Box sx={{ display: "inline", ...amountStyles }}>
+        {amount != null ? amount.toFixed(fixedPrecision) : "?"}
+      </Box>{" "}
+      <Box sx={{ display: "inline", ...labelStyles }}>
+        {unit}
+        {parenthesisText != null ? ` (${parenthesisText})` : null}
+      </Box>
+    </span>
+  );
+
+  if (disableTooltip) {
+    return content;
+  }
+
   return (
     <Tooltip arrow title={title}>
-      <span>
-        {amount != null ? amount.toFixed(fixedPrecision) : "?"} {unit}
-        {parenthesisText != null ? ` (${parenthesisText})` : null}
-      </span>
+      {content}
     </Tooltip>
   );
 }
@@ -89,9 +108,15 @@ export function BitcoinAmount({ amount }: { amount: Amount }) {
 export function MoneroAmount({
   amount,
   fixedPrecision = 4,
+  labelStyles,
+  amountStyles,
+  disableTooltip = false,
 }: {
   amount: Amount;
   fixedPrecision?: number;
+  labelStyles?: SxProps;
+  amountStyles?: SxProps;
+  disableTooltip?: boolean;
 }) {
   const xmrRate = useAppSelector((state) => state.rates.xmrPrice);
 
@@ -101,6 +126,9 @@ export function MoneroAmount({
       unit="XMR"
       fixedPrecision={fixedPrecision}
       exchangeRate={xmrRate}
+      labelStyles={labelStyles}
+      amountStyles={amountStyles}
+      disableTooltip={disableTooltip}
     />
   );
 }
@@ -164,14 +192,23 @@ export function SatsAmount({ amount }: { amount: Amount }) {
 export function PiconeroAmount({
   amount,
   fixedPrecision = 8,
+  labelStyles,
+  amountStyles,
+  disableTooltip = false,
 }: {
   amount: Amount;
   fixedPrecision?: number;
+  labelStyles?: SxProps;
+  amountStyles?: SxProps;
+  disableTooltip?: boolean;
 }) {
   return (
     <MoneroAmount
       amount={amount == null ? null : piconerosToXmr(amount)}
       fixedPrecision={fixedPrecision}
+      labelStyles={labelStyles}
+      amountStyles={amountStyles}
+      disableTooltip={disableTooltip}
     />
   );
 }

src-gui/src/renderer/components/pages/monero/components/ConfirmationsBadge.tsx

@@ -0,0 +1,50 @@
+import { Box, Chip, Tooltip, Typography } from "@mui/material";
+import {
+  AutoAwesome as AutoAwesomeIcon,
+  CheckCircleOutline as CheckCircleOutlineIcon,
+} from "@mui/icons-material";
+
+export default function ConfirmationsBadge({
+  confirmations,
+}: {
+  confirmations: number;
+}) {
+  if (confirmations === 0) {
+    return (
+      <Chip
+        icon={<AutoAwesomeIcon />}
+        label="Published"
+        color="secondary"
+        size="small"
+      />
+    );
+  } else if (confirmations < 10) {
+    const label = (
+      <>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "end",
+            gap: 0.4,
+          }}
+        >
+          <Typography variant="body2" sx={{ fontWeight: "bold" }}>
+            {confirmations}
+          </Typography>
+          <Typography variant="caption">/10</Typography>
+        </Box>
+      </>
+    );
+    return <Chip label={label} color="warning" size="small" />;
+  } else {
+    return (
+      <Tooltip title={`${confirmations} Confirmations`}>
+        <CheckCircleOutlineIcon
+          sx={{ color: "text.secondary" }}
+          fontSize="small"
+        />
+      </Tooltip>
+    );
+  }
+}

src-gui/src/renderer/components/pages/monero/components/TransactionHistory.tsx

@@ -1,102 +1,61 @@
-import {
-  Typography,
-  Card,
-  CardContent,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-  Chip,
-  IconButton,
-  Tooltip,
-  Stack,
-} from "@mui/material";
-import { OpenInNew as OpenInNewIcon } from "@mui/icons-material";
-import { open } from "@tauri-apps/plugin-shell";
-import { PiconeroAmount } from "../../../other/Units";
-import { getMoneroTxExplorerUrl } from "../../../../../utils/conversionUtils";
-import { isTestnet } from "store/config";
+import { Typography, Box, Paper } from "@mui/material";
 import { TransactionInfo } from "models/tauriModel";
+import _ from "lodash";
+import dayjs from "dayjs";
+import TransactionItem from "./TransactionItem";
 
 interface TransactionHistoryProps {
   history?: {
     transactions: TransactionInfo[];
   };
 }
 
+interface TransactionGroup {
+  date: string;
+  displayDate: string;
+  transactions: TransactionInfo[];
+}
+
 // Component for displaying transaction history
 export default function TransactionHistory({
   history,
 }: TransactionHistoryProps) {
   if (!history || !history.transactions || history.transactions.length === 0) {
-    return <Typography variant="h5">Transaction History</Typography>;
+    return <Typography variant="h5">Transactions</Typography>;
   }
 
-  return (
-    <>
-      <Typography variant="h5">Transaction History</Typography>
+  const transactions = history.transactions;
 
-      <TableContainer component={Paper} variant="outlined">
-        <Table size="small">
-          <TableHead>
-            <TableRow>
-              <TableCell>Amount</TableCell>
-              <TableCell>Fee</TableCell>
-              <TableCell align="right">Confirmations</TableCell>
-              <TableCell align="center">Explorer</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {[...history.transactions]
-              .sort((a, b) => a.confirmations - b.confirmations)
-              .map((tx, index) => (
-                <TableRow key={index}>
-                  <TableCell>
-                    <Stack direction="row" spacing={1} alignItems="center">
-                      <PiconeroAmount amount={tx.amount} />
-                      <Chip
-                        label={tx.direction === "In" ? "Received" : "Sent"}
-                        color={tx.direction === "In" ? "success" : "default"}
-                        size="small"
-                      />
-                    </Stack>
-                  </TableCell>
-                  <TableCell>
-                    <PiconeroAmount amount={tx.fee} />
-                  </TableCell>
-                  <TableCell align="right">
-                    <Chip
-                      label={tx.confirmations}
-                      color={tx.confirmations >= 10 ? "success" : "warning"}
-                      size="small"
-                    />
-                  </TableCell>
-                  <TableCell align="center">
-                    {tx.tx_hash && (
-                      <Tooltip title="View on block explorer">
-                        <IconButton
-                          size="small"
-                          onClick={() => {
-                            const url = getMoneroTxExplorerUrl(
-                              tx.tx_hash,
-                              isTestnet(),
-                            );
-                            open(url);
-                          }}
-                        >
-                          <OpenInNewIcon fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
-                    )}
-                  </TableCell>
-                </TableRow>
+  // Group transactions by date using dayjs and lodash
+  const transactionGroups: TransactionGroup[] = _(transactions)
+    .groupBy((tx) => dayjs(tx.timestamp * 1000).format("YYYY-MM-DD")) // Convert Unix timestamp to date string
+    .map((txs, dateKey) => ({
+      date: dateKey,
+      displayDate: dayjs(dateKey).format("MMMM D, YYYY"), // Human-readable format
+      transactions: _.orderBy(txs, ["timestamp"], ["desc"]), // Sort transactions within group by newest first
+    }))
+    .orderBy(["date"], ["desc"]) // Sort groups by newest date first
+    .value();
+
+  return (
+    <Box>
+      <Typography variant="h5" sx={{ mb: 2 }}>
+        Transactions
+      </Typography>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        {transactionGroups.map((group) => (
+          <Box key={group.date}>
+            <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
+              {group.displayDate}
+            </Typography>
+            <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              {group.transactions.map((tx) => (
+                <TransactionItem key={tx.tx_hash} transaction={tx} />
               ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Box>
   );
 }