feat(gui): add Details to transaction view, show fee and splits (if available)

Author: nabijaczleweli

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

@@ -18,6 +18,7 @@ type Props = {
   enableQrCode?: boolean;
   light?: boolean;
   spoilerText?: string;
+  centered?: boolean;
 };
 
 function QRCodeModal({ open, onClose, content }: ModalProps) {
@@ -65,6 +66,7 @@ export default function ActionableMonospaceTextBox({
   enableQrCode = true,
   light = false,
   spoilerText,
+  centered = false,
 }: Props) {
   const [copied, setCopied] = useState(false);
   const [qrCodeOpen, setQrCodeOpen] = useState(false);
@@ -101,6 +103,7 @@ export default function ActionableMonospaceTextBox({
           >
             <MonospaceTextBox
               light={light}
+              centered={centered}
               actions={
                 <>
                   {displayCopyIcon && (

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

@@ -3,12 +3,14 @@ import { Box, Typography } from "@mui/material";
 type Props = {
   children: React.ReactNode;
   light?: boolean;
+  centered?: boolean;
   actions?: React.ReactNode;
 };
 
 export default function MonospaceTextBox({
   children,
   light = false,
+  centered = false,
   actions,
 }: Props) {
   return (
@@ -33,6 +35,7 @@ export default function MonospaceTextBox({
           fontFamily: "monospace",
           lineHeight: 1.5,
           flex: 1,
+          ...(centered ? { textAlign: "center" } : {}),
         }}
       >
         {children}

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

@@ -231,19 +231,20 @@ export function SatsAmount({
   return <BitcoinAmount amount={btcAmount} disableTooltip={disableTooltip} />;
 }
 
+export interface PiconeroAmountArgs {
+  amount: Amount;
+  fixedPrecision?: number;
+  labelStyles?: SxProps;
+  amountStyles?: SxProps;
+  disableTooltip?: boolean;
+}
 export function PiconeroAmount({
   amount,
   fixedPrecision = 8,
   labelStyles,
   amountStyles,
   disableTooltip = false,
-}: {
-  amount: Amount;
-  fixedPrecision?: number;
-  labelStyles?: SxProps;
-  amountStyles?: SxProps;
-  disableTooltip?: boolean;
-}) {
+}: PiconeroAmountArgs) {
   return (
     <MoneroAmount
       amount={amount == null ? null : piconerosToXmr(amount)}

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

@@ -0,0 +1,126 @@
+import {
+  Box,
+  Chip,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Dialog,
+  DialogActions,
+  Button,
+  TableContainer,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@mui/material";
+import {
+  TransactionDirection,
+  TransactionInfo,
+  Amount,
+} from "models/tauriModel";
+import { PiconeroAmountArgs } from "renderer/components/other/Units";
+import ActionableMonospaceTextBox from "renderer/components/other/ActionableMonospaceTextBox";
+
+// https://stackoverflow.com/a/22015930/2851815
+function zip<A, B>(a: A[], b: B[]) {
+  return Array(Math.max(b.length, a.length))
+    .fill(undefined)
+    .map((_, i) => [a[i], b[i]]);
+}
+
+export default function TransactionDetailsDialog({
+  open,
+  onClose,
+  transaction,
+  UnitAmount,
+}: {
+  open: boolean;
+  onClose: () => void;
+  transaction: TransactionInfo;
+  UnitAmount: React.FC<PiconeroAmountArgs>;
+}) {
+  const rowKey = (input: [string, number], output: [string, number]) =>
+    `${input && input[0]}${output && output[0]}`;
+  const rowPair = (split: [string, number]) => {
+    if (!split) return <TableCell colSpan={2} />;
+
+    const [id, amount] = split;
+    return (
+      <>
+        <TableCell>
+          <ActionableMonospaceTextBox
+            displayCopyIcon={false}
+            enableQrCode={false}
+            content={id}
+          />
+        </TableCell>
+        <TableCell>
+          <UnitAmount
+            amount={amount}
+            labelStyles={{ fontSize: 14, ml: -0.3 }}
+            disableTooltip
+          />
+        </TableCell>
+      </>
+    );
+  };
+  const rows =
+    transaction.splits &&
+    zip(transaction.splits.inputs, transaction.splits.outputs).map(
+      ([input, output]) => {
+        return (
+          <TableRow key={rowKey(input, output)}>
+            {rowPair(input)}
+            {rowPair(output)}
+          </TableRow>
+        );
+      },
+    );
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <ActionableMonospaceTextBox
+        displayCopyIcon={false}
+        enableQrCode={false}
+        content={transaction.tx_hash}
+        centered
+      />
+
+      <TableContainer>
+        <Table>
+          <TableHead>
+            {transaction.splits && (
+              <TableRow>
+                <TableCell>Input</TableCell>
+                <TableCell>Amount</TableCell>
+                <TableCell>Output</TableCell>
+                <TableCell>Amount</TableCell>
+              </TableRow>
+            )}
+          </TableHead>
+          <TableBody>
+            {rows}
+            <TableRow>
+              <TableCell component="th">Fee</TableCell>
+              <TableCell colSpan={4}>
+                <UnitAmount
+                  amount={transaction.fee}
+                  labelStyles={{ fontSize: 14, ml: -0.3 }}
+                  disableTooltip
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <DialogActions>
+        <Button onClick={onClose} color="primary" variant="text">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

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

@@ -21,8 +21,10 @@ import {
   FiatSatsAmount,
   PiconeroAmount,
   SatsAmount,
+  PiconeroAmountArgs,
 } from "renderer/components/other/Units";
 import ConfirmationsBadge from "./ConfirmationsBadge";
+import TransactionDetailsDialog from "./TransactionDetailsDialog";
 import {
   getMoneroTxExplorerUrl,
   getBitcoinTxExplorerUrl,
@@ -52,12 +54,9 @@ export default function TransactionItem({
 
   const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
   const menuOpen = Boolean(menuAnchorEl);
+  const [showDetails, setShowDetails] = useState(false);
 
-  const UnitAmount =
-    currency == "monero"
-      ? PiconeroAmount
-      : (args: { amount: Amount }) =>
-          SatsAmount({ disableTooltip: true, ...args });
+  const UnitAmount = currency == "monero" ? PiconeroAmount : SatsAmount;
   const FiatUnitAmount =
     currency == "monero" ? FiatPiconeroAmount : FiatSatsAmount;
   const getExplorerUrl =
@@ -72,6 +71,12 @@ export default function TransactionItem({
         justifyContent: "space-between",
       }}
     >
+      <TransactionDetailsDialog
+        open={showDetails}
+        onClose={() => setShowDetails(false)}
+        transaction={transaction}
+        UnitAmount={UnitAmount}
+      />
       <Box
         sx={{
           display: "flex",
@@ -165,12 +170,20 @@ export default function TransactionItem({
           </MenuItem>
           <MenuItem
             onClick={() => {
-              open(getMoneroTxExplorerUrl(transaction.tx_hash, isTestnet()));
+              open(getExplorerUrl(transaction.tx_hash, isTestnet()));
               setMenuAnchorEl(null);
             }}
           >
             <Typography>View on Explorer</Typography>
           </MenuItem>
+          <MenuItem
+            onClick={() => {
+              setShowDetails(true);
+              setMenuAnchorEl(null);
+            }}
+          >
+            <Typography>Details</Typography>
+          </MenuItem>
         </Menu>
       </Box>
     </Box>

swap/src/asb/rpc/server.rs

@@ -10,8 +10,8 @@ use std::sync::Arc;
 use swap_controller_api::{
     ActiveConnectionsResponse, AsbApiServer, BitcoinBalanceResponse, BitcoinSeedResponse,
     MoneroAddressResponse, MoneroBalanceResponse, MoneroSeedResponse, MultiaddressesResponse,
-    PeerIdResponse, RegistrationStatusItem, RegistrationStatusResponse,
-    RendezvousConnectionStatus, RendezvousRegistrationStatus, Swap,
+    PeerIdResponse, RegistrationStatusItem, RegistrationStatusResponse, RendezvousConnectionStatus,
+    RendezvousRegistrationStatus, Swap,
 };
 use tokio_util::task::AbortOnDropHandle;
 

swap/src/bitcoin/wallet.rs

@@ -20,7 +20,7 @@ use bdk_wallet::WalletPersister;
 use bdk_wallet::{Balance, PersistedWallet};
 use bitcoin::bip32::Xpriv;
 use bitcoin::{psbt::Psbt as PartiallySignedTransaction, Txid};
-use bitcoin::{Psbt, ScriptBuf, Weight};
+use bitcoin::{OutPoint, Psbt, ScriptBuf, Weight};
 use derive_builder::Builder;
 use electrum_pool::ElectrumBalancer;
 use moka;
@@ -64,6 +64,7 @@ pub struct TransactionInfo {
     pub direction: TransactionDirection,
     #[typeshare(serialized_as = "number")]
     pub timestamp: u64,
+    pub splits: TransactionSplits,
 }
 
 #[typeshare]
@@ -73,6 +74,15 @@ pub enum TransactionDirection {
     Out,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[typeshare]
+pub struct TransactionSplits {
+    #[typeshare(serialized_as = "[string, number][]")]
+    inputs: Vec<(String, Amount)>,
+    #[typeshare(serialized_as = "[string, number][]")]
+    outputs: Vec<(String, Amount)>,
+}
+
 /// This is our wrapper around a bdk wallet and a corresponding
 /// bdk electrum client.
 /// It unifies all the functionality we need when interacting
@@ -1327,7 +1337,6 @@ where
         Ok(address)
     }
 
-    /// Get list
     pub async fn history(&self) -> Vec<TransactionInfo> {
         let wallet = self.wallet.lock().await;
         let current_height = wallet.latest_checkpoint().height();
@@ -1356,6 +1365,37 @@ where
                         false => TransactionDirection::Out,
                     },
                     timestamp,
+                    splits: TransactionSplits {
+                        inputs: txd
+                            .tx
+                            .input
+                            .iter()
+                            .map(|i| {
+                                (
+                                    i.previous_output.to_string(),
+                                    wallet
+                                        .get_tx(i.previous_output.txid)
+                                        .and_then(|tx| {
+                                            tx.tx_node
+                                                .tx
+                                                .output
+                                                .get(i.previous_output.vout as usize)
+                                                .map(|txo| txo.value)
+                                        })
+                                        .unwrap_or_default(),
+                                )
+                            })
+                            .collect(),
+                        outputs: txd
+                            .tx
+                            .output
+                            .iter()
+                            .enumerate()
+                            .map(|(vout, o)| {
+                                (OutPoint::new(txd.txid, vout as _).to_string(), o.value)
+                            })
+                            .collect(),
+                    },
                 }
             })
             .collect();