feat(gui): Display timelock status using a timeline (#153)

src-gui/src/renderer/components/pages/help/SettingsBox.tsx

@@ -347,6 +347,37 @@ function NodeTableModal({
   )
 }
 
+// Create a circle SVG with a given color and radius
+function Circle({ color, radius = 6 }: { color: string, radius?: number }) {
+  return <span>
+    <svg width={radius * 2} height={radius * 2} viewBox={`0 0 ${radius * 2} ${radius * 2}`}>
+      <circle cx={radius} cy={radius} r={radius} fill={color} />
+    </svg>
+  </span>
+}
+
+/**
+ * Displays a status indicator for a node
+ */
+function NodeStatus({ status }: { status: boolean | undefined }) {
+  const theme = useTheme();
+
+  switch (status) {
+    case true:
+      return <Tooltip title={"This node is available and responding to RPC requests"}>
+        <Circle color={theme.palette.success.dark} />
+      </Tooltip>;
+    case false:
+      return <Tooltip title={"This node is not available or not responding to RPC requests"}>
+        <Circle color={theme.palette.error.dark} />
+      </Tooltip>;
+    default:
+      return <Tooltip title={"The status of this node is currently unknown"}>
+        <HourglassEmpty />
+      </Tooltip>;
+  }
+}
+
 /**
  * A table that displays the available nodes for a given network and blockchain.
  * It allows you to add, remove, and move nodes up the list.
@@ -368,31 +399,6 @@ function NodeTable({
   const nodeStatuses = useNodes((s) => s.nodes);
   const [newNode, setNewNode] = useState("");
   const dispatch = useAppDispatch();
-  const theme = useTheme();
-
-  // Create a circle SVG with a given color and radius
-  const circle = (color: string, radius: number = 6) => <svg width={radius * 2} height={radius * 2} viewBox={`0 0 ${radius * 2} ${radius * 2}`}>
-    <circle cx={radius} cy={radius} r={radius} fill={color} />
-  </svg>;
-
-  // Show a green/red circle or a hourglass icon depending on the status of the node
-  const statusIcon = (node: string) => {
-    switch (nodeStatuses[blockchain][node]) {
-      case true:
-        return <Tooltip title={"This node is available and responding to RPC requests"}>
-          {circle(theme.palette.success.dark)}
-        </Tooltip>;
-      case false:
-        return <Tooltip title={"This node is not available or not responding to RPC requests"}>
-          {circle(theme.palette.error.dark)}
-        </Tooltip>;
-      default:
-        console.log(`Unknown status for node ${node}: ${nodeStatuses[node]}`);
-        return <Tooltip title={"The status of this node is currently unknown"}>
-          <HourglassEmpty />
-        </Tooltip>;
-    }
-  }
 
   const onAddNewNode = () => {
     dispatch(addNode({ network, type: blockchain, node: newNode }));
@@ -438,7 +444,9 @@ function NodeTable({
                 <Typography variant="overline">{node}</Typography>
               </TableCell>
               {/* Node status icon */}
-              <TableCell align="center" children={statusIcon(node)} />
+              <TableCell align="center">
+                <NodeStatus status={nodeStatuses[blockchain][node]} />
+              </TableCell>
               {/* Remove and move buttons */}
               <TableCell>
                 <Box style={{ display: "flex" }}>

src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx

@@ -15,6 +15,7 @@ import TruncatedText from "renderer/components/other/TruncatedText";
 import { PiconeroAmount, SatsAmount } from "../../../other/Units";
 import HistoryRowActions from "./HistoryRowActions";
 import HistoryRowExpanded from "./HistoryRowExpanded";
+import { bobStateNameToHumanReadable, GetSwapInfoResponseExt } from "models/tauriModelExt";
 
 const useStyles = makeStyles((theme) => ({
   amountTransferContainer: {
@@ -42,7 +43,7 @@ function AmountTransfer({
   );
 }
 
-export default function HistoryRow(swap: GetSwapInfoResponse) {
+export default function HistoryRow(swap: GetSwapInfoResponseExt) {
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -62,7 +63,7 @@ export default function HistoryRow(swap: GetSwapInfoResponse) {
             btcAmount={swap.btc_amount}
           />
         </TableCell>
-        <TableCell>{swap.state_name.toString()}</TableCell>
+        <TableCell>{bobStateNameToHumanReadable(swap.state_name)}</TableCell>
         <TableCell>
           <HistoryRowActions {...swap} />
         </TableCell>

src-gui/src/renderer/components/pages/history/table/HistoryRowExpanded.tsx

@@ -27,6 +27,11 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(1),
     gap: theme.spacing(1),
   },
+  outerAddressBox: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+  },
   actionsOuter: {
     display: "flex",
     flexDirection: "row",
@@ -88,7 +93,7 @@ export default function HistoryRowExpanded({
             <TableRow>
               <TableCell>Provider Address</TableCell>
               <TableCell>
-                <Box>
+                <Box className={classes.outerAddressBox}>
                   {swap.seller.addresses.map((addr) => (
                     <ActionableMonospaceTextBox
                       key={addr}
@@ -122,16 +127,6 @@ export default function HistoryRowExpanded({
           variant="outlined"
           size="small"
         />
-        {/*
-          // TOOD: reimplement these buttons using Tauri
-
-          <SwapCancelRefundButton swap={swap} variant="contained" size="small" />
-          <SwapMoneroRecoveryButton
-            swap={swap}
-            variant="contained"
-            size="small"
-          />
-          */}
       </Box>
     </Box>
   );