From 1ce9974833f33c90497bd35f98301c9241748570 Mon Sep 17 00:00:00 2001
From: wmagev <74554762+wmagev@users.noreply.github.com>
Date: Sat, 18 Apr 2026 22:14:05 +0900
Subject: [PATCH 1/2] feat: link addresses, tx hashes, and blocks to blockchain
 explorers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds getExplorerUrl(chain, type, value) mapping BTC → blockchain.com
(address/tx) and TAO → taostats.io (account/block). CopyableAddress
splits the single click-to-copy behavior into two affordances: the
label becomes an explorer link when chain is provided, and a dedicated
copy IconButton handles clipboard separately.

Wires chain/type through EventFeed, MinerRatesTable, SwapTracker, and
SwapDetailPage so hotkeys, source/dest tx hashes, and block numbers in
the timeline are all jump-to-explorer links.
---
 src/components/CopyableAddress.tsx           |  84 ++++++++++++---
 src/components/dashboard/EventFeed.tsx       |  12 ++-
 src/components/dashboard/MinerRatesTable.tsx |   2 +-
 src/components/dashboard/SwapTracker.tsx     |  12 ++-
 src/pages/SwapDetailPage.tsx                 | 106 +++++++++++++++----
 src/utils/explorer.ts                        |  26 +++++
 src/utils/index.ts                           |   1 +
 7 files changed, 204 insertions(+), 39 deletions(-)
 create mode 100644 src/utils/explorer.ts

diff --git a/src/components/CopyableAddress.tsx b/src/components/CopyableAddress.tsx
index eaee6e9..d05f590 100644
--- a/src/components/CopyableAddress.tsx
+++ b/src/components/CopyableAddress.tsx
@@ -1,44 +1,102 @@
 import React, { useState } from 'react';
-import { Tooltip, Typography } from '@mui/material';
+import { IconButton, Link, Stack, Tooltip, Typography } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
 import { FONTS } from '../theme';
+import { getExplorerUrl, type ExplorerType } from '../utils/explorer';
 
 const shortAddr = (addr: string) =>
   addr.length > 10 ? `${addr.slice(0, 4)}..${addr.slice(-4)}` : addr;
 
 interface CopyableAddressProps {
   address: string;
+  chain?: string | null;
+  type?: ExplorerType;
+  display?: string;
   fontSize?: string;
   color?: string;
+  showCopy?: boolean;
 }
 
 const CopyableAddress: React.FC<CopyableAddressProps> = ({
   address,
+  chain,
+  type = 'address',
+  display,
   fontSize = '0.7rem',
   color = 'text.secondary',
+  showCopy = true,
 }) => {
   const [copied, setCopied] = useState(false);
+  const explorerUrl = getExplorerUrl(chain, type, address);
+  const text = display ?? shortAddr(address);
 
-  const handleClick = () => {
+  const handleCopy = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     navigator.clipboard.writeText(address);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
 
+  const label = explorerUrl ? (
+    <Link
+      href={explorerUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
+      sx={{
+        fontFamily: FONTS.mono,
+        fontSize,
+        color,
+        textDecoration: 'none',
+        '&:hover': { textDecoration: 'underline', color: 'primary.main' },
+      }}
+    >
+      {text}
+    </Link>
+  ) : (
+    <Typography
+      component="span"
+      sx={{ fontFamily: FONTS.mono, fontSize, color }}
+    >
+      {text}
+    </Typography>
+  );
+
   return (
     <Tooltip title={copied ? 'Copied!' : address} arrow placement="top">
-      <Typography
+      <Stack
         component="span"
-        onClick={handleClick}
-        sx={{
-          fontFamily: FONTS.mono,
-          fontSize,
-          color,
-          cursor: 'pointer',
-          '&:hover': { textDecoration: 'underline' },
-        }}
+        direction="row"
+        alignItems="center"
+        spacing={0.5}
+        sx={{ display: 'inline-flex', verticalAlign: 'baseline' }}
       >
-        {shortAddr(address)}
-      </Typography>
+        {label}
+        {showCopy && (
+          <IconButton
+            onClick={handleCopy}
+            size="small"
+            aria-label="Copy to clipboard"
+            sx={{
+              p: 0.25,
+              color: 'text.secondary',
+              fontSize,
+              '&:hover': {
+                color: 'primary.main',
+                backgroundColor: 'transparent',
+              },
+            }}
+          >
+            {copied ? (
+              <CheckIcon sx={{ fontSize: '1.3em' }} />
+            ) : (
+              <ContentCopyIcon sx={{ fontSize: '1.3em' }} />
+            )}
+          </IconButton>
+        )}
+      </Stack>
     </Tooltip>
   );
 };
diff --git a/src/components/dashboard/EventFeed.tsx b/src/components/dashboard/EventFeed.tsx
index 72d10b8..8ec6dcc 100644
--- a/src/components/dashboard/EventFeed.tsx
+++ b/src/components/dashboard/EventFeed.tsx
@@ -4,6 +4,7 @@ import { Box, Button, Chip, Stack, Typography, useTheme } from '@mui/material';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { useLatestEvents } from '../../api';
 import { FONTS } from '../../theme';
+import { getExplorerUrl } from '../../utils';
 import CopyableAddress from '../CopyableAddress';
 import { EventFeedSkeleton } from './Skeletons';
 
@@ -111,10 +112,19 @@ const EventFeed: React.FC = () => {
                   }}
                 />
                 <Typography
+                  component="a"
+                  href={
+                    getExplorerUrl('tao', 'block', String(event.blockNumber)) ??
+                    undefined
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
                   sx={{
                     fontFamily: FONTS.mono,
                     fontSize: '0.65rem',
                     color: 'text.secondary',
+                    textDecoration: 'none',
+                    '&:hover': { color: 'primary.main' },
                   }}
                 >
                   #{event.blockNumber}
@@ -155,7 +165,7 @@ const EventFeed: React.FC = () => {
                   </Typography>
                 )}
                 {event.minerHotkey && (
-                  <CopyableAddress address={event.minerHotkey} />
+                  <CopyableAddress address={event.minerHotkey} chain="tao" />
                 )}
                 {event.taoAmount && (
                   <Typography
diff --git a/src/components/dashboard/MinerRatesTable.tsx b/src/components/dashboard/MinerRatesTable.tsx
index 33494c7..16abe09 100644
--- a/src/components/dashboard/MinerRatesTable.tsx
+++ b/src/components/dashboard/MinerRatesTable.tsx
@@ -451,7 +451,7 @@ const MinerRatesTable: React.FC = () => {
                       color: 'text.secondary',
                     }}
                   >
-                    <CopyableAddress address={miner.hotkey} />
+                    <CopyableAddress address={miner.hotkey} chain="tao" />
                   </TableCell>
                 </TableRow>
               );
diff --git a/src/components/dashboard/SwapTracker.tsx b/src/components/dashboard/SwapTracker.tsx
index 54360c4..558028b 100644
--- a/src/components/dashboard/SwapTracker.tsx
+++ b/src/components/dashboard/SwapTracker.tsx
@@ -255,7 +255,11 @@ const SwapTracker: React.FC = () => {
                           color: 'text.secondary',
                         }}
                       >
-                        User: <CopyableAddress address={swap.userAddress} />
+                        User:{' '}
+                        <CopyableAddress
+                          address={swap.userAddress}
+                          chain="tao"
+                        />
                       </Typography>
                     )}
                     {swap.minerHotkey && (
@@ -268,7 +272,11 @@ const SwapTracker: React.FC = () => {
                           color: 'text.secondary',
                         }}
                       >
-                        Miner: <CopyableAddress address={swap.minerHotkey} />
+                        Miner:{' '}
+                        <CopyableAddress
+                          address={swap.minerHotkey}
+                          chain="tao"
+                        />
                       </Typography>
                     )}
                   </Stack>
diff --git a/src/pages/SwapDetailPage.tsx b/src/pages/SwapDetailPage.tsx
index 1c648d0..43b9574 100644
--- a/src/pages/SwapDetailPage.tsx
+++ b/src/pages/SwapDetailPage.tsx
@@ -18,6 +18,7 @@ import {
   chainSymbol,
   formatBlockEstimate,
 } from '../utils/format';
+import { getExplorerUrl } from '../utils';
 
 type TimelineStep = {
   label: string;
@@ -215,15 +216,35 @@ const SwapDetailPage: React.FC = () => {
                 >
                   {step.label}
                 </Typography>
-                <Typography
-                  sx={{
-                    fontFamily: FONTS.mono,
-                    fontSize: '0.7rem',
-                    color: step.done ? stepColor : 'text.secondary',
-                  }}
-                >
-                  {step.block ? `Block #${step.block}` : '\u2014'}
-                </Typography>
+                {step.block ? (
+                  <Typography
+                    component="a"
+                    href={
+                      getExplorerUrl('tao', 'block', step.block) ?? undefined
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    sx={{
+                      fontFamily: FONTS.mono,
+                      fontSize: '0.7rem',
+                      color: step.done ? stepColor : 'text.secondary',
+                      textDecoration: 'none',
+                      '&:hover': { color: 'primary.main' },
+                    }}
+                  >
+                    Block #{step.block}
+                  </Typography>
+                ) : (
+                  <Typography
+                    sx={{
+                      fontFamily: FONTS.mono,
+                      fontSize: '0.7rem',
+                      color: 'text.secondary',
+                    }}
+                  >
+                    {'\u2014'}
+                  </Typography>
+                )}
               </Stack>
             );
           })}
@@ -253,7 +274,24 @@ const SwapDetailPage: React.FC = () => {
                   color: 'text.secondary',
                 }}
               >
-                Block #{swap.timeoutBlock}
+                <Typography
+                  component="a"
+                  href={
+                    getExplorerUrl('tao', 'block', swap.timeoutBlock) ??
+                    undefined
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  sx={{
+                    fontFamily: FONTS.mono,
+                    fontSize: '0.7rem',
+                    color: 'inherit',
+                    textDecoration: 'none',
+                    '&:hover': { color: 'primary.main' },
+                  }}
+                >
+                  Block #{swap.timeoutBlock}
+                </Typography>
                 {!isTimedOut &&
                   swap.status !== 'COMPLETED' &&
                   swap.initiatedBlock && (
@@ -282,11 +320,15 @@ const SwapDetailPage: React.FC = () => {
               label="Source TX"
               value={swap.sourceTxHash || '\u2014'}
               copyable={!!swap.sourceTxHash}
+              chain={swap.sourceChain}
+              type="tx"
             />
             <LabelValue
               label="Dest TX"
               value={swap.destTxHash || '\u2014'}
               copyable={!!swap.destTxHash}
+              chain={swap.destChain}
+              type="tx"
             />
           </Stack>
         </Card>
@@ -297,19 +339,31 @@ const SwapDetailPage: React.FC = () => {
         <SectionTitle>Participants</SectionTitle>
         <Stack spacing={1}>
           {swap.userAddress && (
-            <LabelAddr label="User" address={swap.userAddress} />
+            <LabelAddr label="User" address={swap.userAddress} chain="tao" />
           )}
           {swap.userSourceAddress && (
-            <LabelAddr label="User Source" address={swap.userSourceAddress} />
+            <LabelAddr
+              label="User Source"
+              address={swap.userSourceAddress}
+              chain={swap.sourceChain}
+            />
           )}
           {swap.userDestAddress && (
-            <LabelAddr label="User Dest" address={swap.userDestAddress} />
+            <LabelAddr
+              label="User Dest"
+              address={swap.userDestAddress}
+              chain={swap.destChain}
+            />
           )}
           {swap.minerHotkey && (
-            <LabelAddr label="Miner" address={swap.minerHotkey} />
+            <LabelAddr label="Miner" address={swap.minerHotkey} chain="tao" />
           )}
           {swap.minerSourceAddress && (
-            <LabelAddr label="Miner Source" address={swap.minerSourceAddress} />
+            <LabelAddr
+              label="Miner Source"
+              address={swap.minerSourceAddress}
+              chain={swap.sourceChain}
+            />
           )}
         </Stack>
       </Card>
@@ -434,7 +488,9 @@ const LabelValue: React.FC<{
   label: string;
   value: string;
   copyable?: boolean;
-}> = ({ label, value, copyable }) => (
+  chain?: string | null;
+  type?: 'address' | 'tx' | 'block';
+}> = ({ label, value, copyable, chain, type }) => (
   <Stack direction="row" spacing={1} alignItems="baseline">
     <Typography
       sx={{
@@ -447,7 +503,12 @@ const LabelValue: React.FC<{
       {label}
     </Typography>
     {copyable ? (
-      <CopyableAddress address={value} fontSize="0.75rem" />
+      <CopyableAddress
+        address={value}
+        fontSize="0.75rem"
+        chain={chain}
+        type={type}
+      />
     ) : (
       <Typography
         sx={{
@@ -462,10 +523,11 @@ const LabelValue: React.FC<{
   </Stack>
 );
 
-const LabelAddr: React.FC<{ label: string; address: string }> = ({
-  label,
-  address,
-}) => (
+const LabelAddr: React.FC<{
+  label: string;
+  address: string;
+  chain?: string | null;
+}> = ({ label, address, chain }) => (
   <Stack direction="row" spacing={1} alignItems="baseline">
     <Typography
       sx={{
@@ -477,7 +539,7 @@ const LabelAddr: React.FC<{ label: string; address: string }> = ({
     >
       {label}
     </Typography>
-    <CopyableAddress address={address} fontSize="0.75rem" />
+    <CopyableAddress address={address} fontSize="0.75rem" chain={chain} />
   </Stack>
 );
 
diff --git a/src/utils/explorer.ts b/src/utils/explorer.ts
new file mode 100644
index 0000000..6820ffa
--- /dev/null
+++ b/src/utils/explorer.ts
@@ -0,0 +1,26 @@
+export type ExplorerChain = 'btc' | 'tao';
+export type ExplorerType = 'address' | 'tx' | 'block';
+
+const builders: Record<
+  ExplorerChain,
+  Partial<Record<ExplorerType, (v: string) => string>>
+> = {
+  btc: {
+    address: (v) => `https://www.blockchain.com/btc/address/${v}`,
+    tx: (v) => `https://www.blockchain.com/btc/tx/${v}`,
+  },
+  tao: {
+    address: (v) => `https://taostats.io/account/${v}`,
+    block: (v) => `https://taostats.io/block/${v}`,
+  },
+};
+
+export const getExplorerUrl = (
+  chain: string | undefined | null,
+  type: ExplorerType,
+  value: string | undefined | null,
+): string | null => {
+  if (!chain || !value) return null;
+  const key = chain.toLowerCase() as ExplorerChain;
+  return builders[key]?.[type]?.(value) ?? null;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 16c5b2b..7874fd9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './format';
+export * from './explorer';

From 57f3ba119b70132ef2a2703cfea99c9230549f31 Mon Sep 17 00:00:00 2001
From: wmagev <74554762+wmagev@users.noreply.github.com>
Date: Sat, 18 Apr 2026 22:40:18 +0900
Subject: [PATCH 2/2] fix: link remaining block numbers and unnest anchors on
 swap tracker

- Link `reservedUntil` block and event-history block numbers to taostats
- Drop explorer link on tracker card addresses to fix nested <a> DOM warning
---
 src/components/dashboard/EventFeed.tsx   | 12 ++++++++++++
 src/components/dashboard/SwapTracker.tsx | 10 ++--------
 src/pages/SwapDetailPage.tsx             | 12 ++++++++++++
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/dashboard/EventFeed.tsx b/src/components/dashboard/EventFeed.tsx
index 8ec6dcc..b61547f 100644
--- a/src/components/dashboard/EventFeed.tsx
+++ b/src/components/dashboard/EventFeed.tsx
@@ -180,10 +180,22 @@ const EventFeed: React.FC = () => {
                 )}
                 {event.reservedUntil && (
                   <Typography
+                    component="a"
+                    href={
+                      getExplorerUrl(
+                        'tao',
+                        'block',
+                        String(event.reservedUntil),
+                      ) ?? undefined
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
                     sx={{
                       fontFamily: FONTS.mono,
                       fontSize: '0.65rem',
                       color: 'text.secondary',
+                      textDecoration: 'none',
+                      '&:hover': { color: 'primary.main' },
                     }}
                   >
                     until #{event.reservedUntil}
diff --git a/src/components/dashboard/SwapTracker.tsx b/src/components/dashboard/SwapTracker.tsx
index 558028b..c81dc7f 100644
--- a/src/components/dashboard/SwapTracker.tsx
+++ b/src/components/dashboard/SwapTracker.tsx
@@ -256,10 +256,7 @@ const SwapTracker: React.FC = () => {
                         }}
                       >
                         User:{' '}
-                        <CopyableAddress
-                          address={swap.userAddress}
-                          chain="tao"
-                        />
+                        <CopyableAddress address={swap.userAddress} />
                       </Typography>
                     )}
                     {swap.minerHotkey && (
@@ -273,10 +270,7 @@ const SwapTracker: React.FC = () => {
                         }}
                       >
                         Miner:{' '}
-                        <CopyableAddress
-                          address={swap.minerHotkey}
-                          chain="tao"
-                        />
+                        <CopyableAddress address={swap.minerHotkey} />
                       </Typography>
                     )}
                   </Stack>
diff --git a/src/pages/SwapDetailPage.tsx b/src/pages/SwapDetailPage.tsx
index 43b9574..2856e50 100644
--- a/src/pages/SwapDetailPage.tsx
+++ b/src/pages/SwapDetailPage.tsx
@@ -394,10 +394,22 @@ const SwapDetailPage: React.FC = () => {
                   }}
                 />
                 <Typography
+                  component="a"
+                  href={
+                    getExplorerUrl(
+                      'tao',
+                      'block',
+                      String(event.blockNumber),
+                    ) ?? undefined
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
                   sx={{
                     fontFamily: FONTS.mono,
                     fontSize: '0.65rem',
                     color: 'text.secondary',
+                    textDecoration: 'none',
+                    '&:hover': { color: 'primary.main' },
                   }}
                 >
                   #{event.blockNumber}