feat(cli, gui, tauri): Emit events on Monero transaction confirmation update and redeem transaction publication (#57)

We now,
- emit a Tauri event when the Monero lock transaction receives a new confirmation
- emit a Tauri event with a list of transaction hashes once we have published the Monero redeem transaction 
- gui: display the confirmations and txids

This PR closes #12.

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}
     />

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}
     />

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}

src-gui/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx

@@ -3,16 +3,10 @@ import { TauriSwapProgressEventContent } from "models/tauriModelExt";
 import FeedbackInfoBox from "../../../../pages/help/FeedbackInfoBox";
 import MoneroTransactionInfoBox from "../../MoneroTransactionInfoBox";
 
-export default function XmrRedeemInMempoolPage({
-  xmr_redeem_address,
-  xmr_redeem_txid,
-}: TauriSwapProgressEventContent<"XmrRedeemInMempool">) {
-  // TODO: Reimplement this using Tauri
-  //const additionalContent = swap
-  //  ? `This transaction transfers ${getSwapXmrAmount(swap).toFixed(6)} XMR to ${
-  //      state?.bobXmrRedeemAddress
-  //    }`
-  //  : null;
+export default function XmrRedeemInMempoolPage(
+  state: TauriSwapProgressEventContent<"XmrRedeemInMempool">,
+) {
+  const xmr_redeem_txid = state.xmr_redeem_txids[0] ?? null;
 
   return (
     <Box>
@@ -30,7 +24,7 @@ export default function XmrRedeemInMempoolPage({
         <MoneroTransactionInfoBox
           title="Monero Redeem Transaction"
           txId={xmr_redeem_txid}
-          additionalContent={`The funds have been sent to the address ${xmr_redeem_address}`}
+          additionalContent={`The funds have been sent to the address ${state.xmr_redeem_address}`}
           loading={false}
         />
         <FeedbackInfoBox />