feat: link addresses, tx hashes, and blocks to blockchain explorers

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>
   );
 };

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
@@ -170,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}

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>
               );

src/components/dashboard/SwapTracker.tsx

@@ -255,7 +255,8 @@ const SwapTracker: React.FC = () => {
                           color: 'text.secondary',
                         }}
                       >
-                        User: <CopyableAddress address={swap.userAddress} />
+                        User:{' '}
+                        <CopyableAddress address={swap.userAddress} />
                       </Typography>
                     )}
                     {swap.minerHotkey && (
@@ -268,7 +269,8 @@ const SwapTracker: React.FC = () => {
                           color: 'text.secondary',
                         }}
                       >
-                        Miner: <CopyableAddress address={swap.minerHotkey} />
+                        Miner:{' '}
+                        <CopyableAddress address={swap.minerHotkey} />
                       </Typography>
                     )}
                   </Stack>