feat(gui, tauri): Display Monero redeem txid

UnstoppableSwap · Sep 18, 2024 · ddbca15 · ddbca15
1 parent a117d8a
commit ddbca15
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 38 deletions.
diff --git a/src-gui/src/renderer/components/modal/swap/BitcoinTransactionInfoBox.tsx b/src-gui/src/renderer/components/modal/swap/BitcoinTransactionInfoBox.tsx
@@ -1,23 +1,18 @@
-import { ReactNode } from "react";
 import BitcoinIcon from "renderer/components/icons/BitcoinIcon";
 import { isTestnet } from "store/config";
 import { getBitcoinTxExplorerUrl } from "utils/conversionUtils";
-import TransactionInfoBox from "./TransactionInfoBox";
-
-type Props = {
-  title: string;
-  txId: string;
-  additionalContent: ReactNode;
-  loading: boolean;
-};
-
-export default function BitcoinTransactionInfoBox({ txId, ...props }: Props) {
-  const explorerUrl = getBitcoinTxExplorerUrl(txId, isTestnet());
+import TransactionInfoBox, {
+  TransactionInfoBoxProps,
+} from "./TransactionInfoBox";
 
+export default function BitcoinTransactionInfoBox({
+  txId,
+  ...props
+}: Omit<TransactionInfoBoxProps, "icon" | "explorerUrlCreator">) {
   return (
     <TransactionInfoBox
       txId={txId}
-      explorerUrl={explorerUrl}
+      explorerUrlCreator={(txId) => getBitcoinTxExplorerUrl(txId, isTestnet())}
       icon={<BitcoinIcon />}
       {...props}
     />

diff --git a/src-gui/src/renderer/components/modal/swap/MoneroTransactionInfoBox.tsx b/src-gui/src/renderer/components/modal/swap/MoneroTransactionInfoBox.tsx
@@ -1,23 +1,18 @@
-import { ReactNode } from "react";
 import MoneroIcon from "renderer/components/icons/MoneroIcon";
 import { isTestnet } from "store/config";
 import { getMoneroTxExplorerUrl } from "utils/conversionUtils";
-import TransactionInfoBox from "./TransactionInfoBox";
-
-type Props = {
-  title: string;
-  txId: string;
-  additionalContent: ReactNode;
-  loading: boolean;
-};
-
-export default function MoneroTransactionInfoBox({ txId, ...props }: Props) {
-  const explorerUrl = getMoneroTxExplorerUrl(txId, isTestnet());
+import TransactionInfoBox, {
+  TransactionInfoBoxProps,
+} from "./TransactionInfoBox";
 
+export default function MoneroTransactionInfoBox({
+  txId,
+  ...props
+}: Omit<TransactionInfoBoxProps, "icon" | "explorerUrlCreator">) {
   return (
     <TransactionInfoBox
       txId={txId}
-      explorerUrl={explorerUrl}
+      explorerUrlCreator={(txid) => getMoneroTxExplorerUrl(txid, isTestnet())}
       icon={<MoneroIcon />}
       {...props}
     />

diff --git a/src-gui/src/renderer/components/modal/swap/TransactionInfoBox.tsx b/src-gui/src/renderer/components/modal/swap/TransactionInfoBox.tsx
@@ -2,10 +2,10 @@ import { Link, Typography } from "@material-ui/core";
 import { ReactNode } from "react";
 import InfoBox from "./InfoBox";
 
-type TransactionInfoBoxProps = {
+export type TransactionInfoBoxProps = {
   title: string;
-  txId: string;
-  explorerUrl: string;
+  txId: string | null;
+  explorerUrlCreator: ((txId: string) => string) | null;
   additionalContent: ReactNode;
   loading: boolean;
   icon: JSX.Element;
@@ -14,24 +14,31 @@ type TransactionInfoBoxProps = {
 export default function TransactionInfoBox({
   title,
   txId,
-  explorerUrl,
   additionalContent,
   icon,
   loading,
+  explorerUrlCreator,
 }: TransactionInfoBoxProps) {
   return (
     <InfoBox
       title={title}
-      mainContent={<Typography variant="h5">{txId}</Typography>}
+      mainContent={
+        <Typography variant="h5">
+          {txId ?? "Transaction ID not available"}
+        </Typography>
+      }
       loading={loading}
       additionalContent={
         <>
           <Typography variant="subtitle2">{additionalContent}</Typography>
-          <Typography variant="body1">
-            <Link href={explorerUrl} target="_blank">
-              View on explorer
-            </Link>
-          </Typography>
+          {explorerUrlCreator != null &&
+            txId != null && ( // Only show the link if the txId is not null and we have a creator for the explorer URL
+              <Typography variant="body1">
+                <Link href={explorerUrlCreator(txId)} target="_blank">
+                  View on explorer
+                </Link>
+              </Typography>
+            )}
         </>
       }
       icon={icon}

diff --git a/src-gui/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx b/src-gui/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx
@@ -6,8 +6,7 @@ import MoneroTransactionInfoBox from "../../MoneroTransactionInfoBox";
 export default function XmrRedeemInMempoolPage(
   state: TauriSwapProgressEventContent<"XmrRedeemInMempool">,
 ) {
-  const xmr_redeem_txid =
-    state.xmr_redeem_txids.length === 0 ? "Unknown" : state.xmr_redeem_txids.join(", ");
+  const xmr_redeem_txid = state.xmr_redeem_txids[0] ?? null;
 
   return (
     <Box>