Add contract detail pages to dashboard

dashboard/src/App.tsx

@@ -13,6 +13,7 @@ import { NotificationPreferencesPage } from './pages/NotificationPreferencesPage
 import { TemplatesPage } from './pages/TemplatesPage';
 import { ChannelDetailsPage } from './pages/ChannelDetailsPage';
 import { RpcBenchmarkPage } from './pages/RpcBenchmarkPage';
+import { ContractDetailPage } from './pages/ContractDetailPage';
 
 import { ThemeToggle } from './components/ThemeToggle';
 import { MobileNavDrawer, NAV_ITEMS, type Tab } from './components/MobileNavDrawer';
@@ -26,11 +27,17 @@ import { useEventStore } from './store/eventStore';
 import { SyncStatus } from './components/SyncStatus';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { DashboardLayout } from './layouts/DashboardLayout';
+import { EmptyState } from './components/EmptyState';
 
 export function App() {
   const [tab, setTab] = useState<Tab>(() => {
     const hash = window.location.hash.slice(1);
 
+    // Handle contract-detail route with address parameter
+    if (hash.startsWith('contract-detail?')) {
+      return 'contract-detail';
+    }
+
     if (NAV_ITEMS.some((item) => item.id === hash)) {
       return hash as Tab;
     }
@@ -302,6 +309,36 @@ function renderPanel(tab: Tab, events: any[]) {
         </ErrorBoundary>
       );
 
+    case 'contract-detail': {
+      const hash = window.location.hash.slice(1);
+      const params = new URLSearchParams(hash.split('?')[1] || '');
+      const contractAddress = params.get('address');
+
+      if (!contractAddress) {
+        return (
+          <ErrorBoundary section="Contract Details">
+            <EmptyState
+              icon="📄"
+              title="Contract address required"
+              message="Please provide a contract address to view its details."
+              action={{
+                label: 'Go to Event Explorer',
+                onClick: () => {
+                  window.location.hash = 'explorer';
+                },
+              }}
+            />
+          </ErrorBoundary>
+        );
+      }
+
+      return (
+        <ErrorBoundary section="Contract Details">
+          <ContractDetailPage contractAddress={contractAddress} />
+        </ErrorBoundary>
+      );
+    }
+
     default:
       return null;
   }

dashboard/src/components/EventExplorerCard.tsx

@@ -18,6 +18,7 @@ export interface EventExplorerCardProps {
   isCopied?: boolean;
   onSelect?: (event: BlockchainEvent) => void;
   contractStatuses?: ContractStatus[];
+  onContractClick?: (contractAddress: string) => void;
 }
 
 export const EventExplorerCard = memo(function EventExplorerCard({
@@ -26,6 +27,7 @@ export const EventExplorerCard = memo(function EventExplorerCard({
   isCopied = false,
   onSelect,
   contractStatuses = [],
+  onContractClick,
 }: EventExplorerCardProps) {
   const contractStatus = contractStatuses.find(
     (status) => status.address === event.contractAddress,
@@ -66,16 +68,24 @@ export const EventExplorerCard = memo(function EventExplorerCard({
     >
       <div className="event-explorer__cell" data-label="Contract" role="cell">
         <div className="event-explorer__contract-block">
-          <p className="event-explorer__contract" title={event.contractAddress}>
+          <button
+            type="button"
+            className="event-explorer__contract-link"
+            onClick={(e) => {
+              e.stopPropagation();
+              onContractClick?.(event.contractAddress);
+            }}
+            title={event.contractAddress}
+          >
             {shortenAddress(event.contractAddress)}
-          </p>
+          </button>
           <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
             <button
               type="button"
               className="event-explorer__copy-button"
               onClick={(e) => {
                 e.stopPropagation();
-                onCopyContract(event.contractAddress);
+                onCopyContract?.(event.contractAddress);
               }}
               aria-label={`Copy contract address ${event.contractAddress}`}
             >

dashboard/src/components/EventExplorerTable.tsx

@@ -28,6 +28,7 @@ interface EventExplorerTableProps {
   events: BlockchainEvent[];
   onSelectEvent?: (event: BlockchainEvent) => void;
   contractStatuses?: unknown[];
+  onContractClick?: (contractAddress: string) => void;
 }
 
 export function loadColumnWidths(): number[] {
@@ -100,6 +101,7 @@ async function syncCopyText(text: string) {
 export const EventExplorerTable = memo(function EventExplorerTable({
   events,
   onSelectEvent,
+  onContractClick,
 }: EventExplorerTableProps) {
   const [columnWidths, setColumnWidths] = useState<number[]>(
     loadColumnWidths,
@@ -243,6 +245,7 @@ export const EventExplorerTable = memo(function EventExplorerTable({
             onCopyContract={handleCopyContract}
             isCopied={isCopied(event.contractAddress)}
             onSelectEvent={handleSelectEvent}
+            onContractClick={onContractClick}
           />
         ))}
       </div>

dashboard/src/components/MobileNavDrawer.tsx

@@ -23,7 +23,8 @@ export type Tab =
   | 'preferences'
   | 'templates'
   | 'channels'
-  | 'rpc-benchmark';
+  | 'rpc-benchmark'
+  | 'contract-detail';
 
 export interface NavItem {
   id: Tab;