diff --git a/src/components/WalletViewer.tsx b/src/components/WalletViewer.tsx index acf0d0f..b66d5b3 100644 --- a/src/components/WalletViewer.tsx +++ b/src/components/WalletViewer.tsx @@ -22,6 +22,7 @@ import { ChevronRight, Eye, EyeOff, + ExternalLink, } from "lucide-react"; import { Virtuoso } from "react-virtuoso"; import { useWallet } from "@/hooks/useWallet"; @@ -96,6 +97,29 @@ interface InvoiceDetails { const BATCH_SIZE = 20; const PAYMENT_CHECK_INTERVAL = 5000; // Check every 5 seconds +/** + * Helper: Detect if a transaction is a Bitcoin on-chain transaction + * Bitcoin transactions have a preimage that is a 64-character hex string (txid) + */ +function isBitcoinTransaction(transaction: Transaction): boolean { + if (!transaction.preimage) return false; + // Bitcoin txid is 64 hex characters (32 bytes) + return /^[0-9a-f]{64}$/i.test(transaction.preimage); +} + +/** + * Helper: Get mempool.space URL for a Bitcoin transaction + */ +function getMempoolUrl(txid: string, network?: string): string { + const baseUrl = + network === "testnet" + ? "https://mempool.space/testnet" + : network === "signet" + ? "https://mempool.space/signet" + : "https://mempool.space"; + return `${baseUrl}/tx/${txid}`; +} + /** * Helper: Format timestamp as a readable day marker */ @@ -1302,27 +1326,64 @@ export default function WalletViewer() { )} - {selectedTransaction.payment_hash && ( -
- -

- {selectedTransaction.payment_hash} -

-
- )} + {(() => { + const isBitcoin = isBitcoinTransaction(selectedTransaction); - {selectedTransaction.preimage && ( -
- -

- {selectedTransaction.preimage} -

-
- )} + if (isBitcoin && selectedTransaction.preimage) { + // Bitcoin on-chain transaction - show Transaction ID with mempool.space link + return ( +
+ +
+

+ {selectedTransaction.preimage} +

+ + + View on mempool.space + +
+
+ ); + } + + // Lightning transaction - show payment hash and preimage + return ( + <> + {selectedTransaction.payment_hash && ( +
+ +

+ {selectedTransaction.payment_hash} +

+
+ )} + + {selectedTransaction.preimage && ( +
+ +

+ {selectedTransaction.preimage} +

+
+ )} + + ); + })()} {/* Zap Details (if this is a zap payment) */}