From fc0919077bbab87b84245297b5adca3e68f768ee Mon Sep 17 00:00:00 2001
From: Landyn <landynmoreno@gmail.com>
Date: Tue, 5 May 2026 11:16:09 -0500
Subject: [PATCH] Dashboard: cleaner header tooltips, reservations info hover,
 swap-id search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Depth of Market column headers no longer show the help-cursor question
  mark on hover — pointer cursor only.
- Reservations title gets an info hover explaining what reservations are
  and why the step exists.
- Transactions search now treats "#N" or pure-digit input as an exact
  swap-id lookup, so swap #2 actually surfaces instead of being buried by
  addresses that happen to contain "2".
---
 src/api/SwapsApi.ts                           | 14 ++++---
 src/components/dashboard/OrderbookDepth.tsx   | 10 +++--
 .../dashboard/ReservationsTracker.tsx         | 41 ++++++++++++++-----
 src/components/dashboard/SwapTracker.tsx      | 21 ++++++----
 4 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/src/api/SwapsApi.ts b/src/api/SwapsApi.ts
index ec37e6d..a1edbfe 100644
--- a/src/api/SwapsApi.ts
+++ b/src/api/SwapsApi.ts
@@ -5,16 +5,20 @@ import { type ActiveSwap, type SwapDetail } from './models';
 export const useActiveSwaps = () =>
   useApiQuery<ActiveSwap[]>('swaps', '/swaps/active', SSE_FALLBACK_INTERVAL);
 
-export const useAllSwaps = (params?: {
-  search?: string;
-  limit?: number;
-  offset?: number;
-}) =>
+export const useAllSwaps = (
+  params?: {
+    search?: string;
+    limit?: number;
+    offset?: number;
+  },
+  enabled?: boolean,
+) =>
   useApiQuery<ActiveSwap[]>(
     'allSwaps',
     '/swaps',
     SSE_FALLBACK_INTERVAL,
     params,
+    enabled,
   );
 
 export const useSwapDetail = (swapId: string) =>
diff --git a/src/components/dashboard/OrderbookDepth.tsx b/src/components/dashboard/OrderbookDepth.tsx
index 6643243..6fa12bf 100644
--- a/src/components/dashboard/OrderbookDepth.tsx
+++ b/src/components/dashboard/OrderbookDepth.tsx
@@ -299,7 +299,9 @@ const OrderbookDepth: React.FC = () => {
                   arrow
                   placement="top"
                 >
-                  <span style={{ cursor: 'help', borderBottom: '1px dotted' }}>
+                  <span
+                    style={{ cursor: 'pointer', borderBottom: '1px dotted' }}
+                  >
                     Rate (TAO)
                   </span>
                 </Tooltip>
@@ -310,7 +312,9 @@ const OrderbookDepth: React.FC = () => {
                   arrow
                   placement="top"
                 >
-                  <span style={{ cursor: 'help', borderBottom: '1px dotted' }}>
+                  <span
+                    style={{ cursor: 'pointer', borderBottom: '1px dotted' }}
+                  >
                     Capacity (TAO)
                   </span>
                 </Tooltip>
@@ -326,7 +330,7 @@ const OrderbookDepth: React.FC = () => {
                       display: 'inline-flex',
                       alignItems: 'center',
                       gap: 0.75,
-                      cursor: 'help',
+                      cursor: 'pointer',
                     }}
                   >
                     {selected?.direction === 'reverse' ? (
diff --git a/src/components/dashboard/ReservationsTracker.tsx b/src/components/dashboard/ReservationsTracker.tsx
index c50e4bb..e16897f 100644
--- a/src/components/dashboard/ReservationsTracker.tsx
+++ b/src/components/dashboard/ReservationsTracker.tsx
@@ -6,9 +6,11 @@ import {
   InputAdornment,
   Stack,
   TextField,
+  Tooltip,
   Typography,
   useTheme,
 } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import SearchIcon from '@mui/icons-material/Search';
 import {
   useChainState,
@@ -76,17 +78,34 @@ const ReservationsTracker: React.FC = () => {
         alignItems={{ xs: 'stretch', sm: 'center' }}
         justifyContent="space-between"
       >
-        <Typography
-          sx={{
-            fontFamily: FONTS.mono,
-            fontSize: '0.7rem',
-            letterSpacing: '0.12em',
-            textTransform: 'uppercase',
-            color: 'text.secondary',
-          }}
-        >
-          Reservations
-        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          <Typography
+            sx={{
+              fontFamily: FONTS.mono,
+              fontSize: '0.7rem',
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+              color: 'text.secondary',
+            }}
+          >
+            Reservations
+          </Typography>
+          <Tooltip
+            title={
+              <Box sx={{ maxWidth: 260 }}>
+                A short hold a user places on a miner's quoted rate before
+                sending funds. The reservation locks the rate and prevents other
+                users from claiming the same miner mid-swap.
+              </Box>
+            }
+            arrow
+            placement="right"
+          >
+            <IconButton size="small" sx={{ p: 0, color: 'text.secondary' }}>
+              <InfoOutlinedIcon sx={{ fontSize: 14 }} />
+            </IconButton>
+          </Tooltip>
+        </Box>
         <Box
           component="form"
           onSubmit={submitSearch}
diff --git a/src/components/dashboard/SwapTracker.tsx b/src/components/dashboard/SwapTracker.tsx
index 96e9023..f79f695 100644
--- a/src/components/dashboard/SwapTracker.tsx
+++ b/src/components/dashboard/SwapTracker.tsx
@@ -11,7 +11,7 @@ import {
   useTheme,
 } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { useAllSwaps } from '../../api';
+import { useAllSwaps, useSwapDetail } from '../../api';
 import { FONTS } from '../../theme';
 import CopyableAddress from '../CopyableAddress';
 import { SwapTrackerSkeleton } from './Skeletons';
@@ -63,17 +63,24 @@ const SwapTracker: React.FC = () => {
   const [limit, setLimit] = useState(PAGE_SIZE);
   const debouncedSearch = useDebounce(search, 300);
 
-  const { data: swaps, isLoading } = useAllSwaps({
-    search: debouncedSearch || undefined,
-    limit,
-  });
+  const idMatch = debouncedSearch.trim().match(/^#?(\d+)$/);
+  const exactSwapId = idMatch?.[1] ?? '';
+
+  const { data: detail, isLoading: detailLoading } = useSwapDetail(exactSwapId);
+  const { data: fuzzy, isLoading: fuzzyLoading } = useAllSwaps(
+    { search: debouncedSearch || undefined, limit },
+    !exactSwapId,
+  );
+
+  const swaps = exactSwapId ? (detail?.swap ? [detail.swap] : []) : fuzzy;
+  const isLoading = exactSwapId ? detailLoading : fuzzyLoading;
 
   // Reset limit when search changes
   React.useEffect(() => {
     setLimit(PAGE_SIZE);
   }, [debouncedSearch]);
 
-  const hasMore = swaps?.length === limit;
+  const hasMore = !exactSwapId && swaps?.length === limit;
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const handleScroll = useCallback(() => {
@@ -122,7 +129,7 @@ const SwapTracker: React.FC = () => {
 
       <TextField
         size="small"
-        placeholder="Search by transaction ID or address..."
+        placeholder="Search by transaction ID (#N) or address..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         sx={{