Feat/app

dashboard/src/components/EventExplorerCard.tsx

@@ -1,5 +1,7 @@
 import { memo, useMemo } from 'react';
 import type { BlockchainEvent } from '../types/event';
+import type { ContractStatus } from '../services/eventsApi';
+import { formatTimestamp, parseToDate } from '../utils/formatTime';
 import { formatTimestamp } from '../utils/formatTime';
 import { CopyButton } from './CopyButton';
 
@@ -18,6 +20,7 @@ interface EventExplorerCardProps {
   onCopyContract: (contractAddress: string) => void;
   isCopied: boolean;
   onSelect?: (event: BlockchainEvent) => void;
+  contractStatuses: ContractStatus[];
   contractStatuses?: ContractStatus[];
 }
 
@@ -33,6 +36,7 @@ export function EventExplorerCard({
   const label = event.eventName ?? event.type;
   const badgeClass = getEventKindClass(event.type);
   const kindLabel = getEventKindLabel(event.type);
+  const receivedAt = parseToDate(event.receivedAt);
 
   return (
     <article
@@ -78,6 +82,8 @@ export function EventExplorerCard({
       </div>
 
       <div className="event-explorer__cell" data-label="Received" role="cell">
+        <time dateTime={receivedAt?.toISOString()}>
+          {formatTimestamp(event.receivedAt)}
         <time dateTime={new Date(event.receivedAt).toISOString()}>
           {formattedTime}
         </time>

dashboard/src/components/EventExplorerTable.test.tsx

@@ -6,7 +6,7 @@ import {
   MIN_COLUMN_WIDTH,
   EventExplorerTable,
 } from './EventExplorerTable';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import type { BlockchainEvent } from '../types/event';
 
 const STORAGE_KEY = 'notify-chain-event-table-widths';
@@ -87,4 +87,11 @@ describe('EventExplorerTable resizing UI', () => {
     expect(after.split(' ').length).toBe(DEFAULT_COLUMN_WIDTHS.length);
     expect(localStorage.getItem(STORAGE_KEY)).toBeTruthy();
   });
+
+  it('renders invalid event timestamps without throwing', () => {
+    render(<EventExplorerTable events={[{ ...sampleEvent, receivedAt: NaN }]} />);
+
+    expect(screen.getByText('Unknown time')).toBeInTheDocument();
+    expect(screen.getByText('Unknown time').closest('time')).not.toHaveAttribute('dateTime');
+  });
 });

dashboard/src/components/EventExplorerTable.tsx

@@ -13,6 +13,23 @@ interface EventExplorerTableProps {
   events: BlockchainEvent[];
 }
 
+export function loadColumnWidths(): number[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [...DEFAULT_COLUMN_WIDTHS];
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed) || parsed.length !== DEFAULT_COLUMN_WIDTHS.length) {
+      return [...DEFAULT_COLUMN_WIDTHS];
+    }
+    return parsed.map((value, index) => {
+      const n = Number(value);
+      if (!Number.isFinite(n) || n < MIN_COLUMN_WIDTH) {
+        return DEFAULT_COLUMN_WIDTHS[index];
+      }
+      return n;
+    });
+  } catch {
+    return [...DEFAULT_COLUMN_WIDTHS];
 async function syncCopyText(text: string) {
   if (navigator.clipboard?.writeText) {
     return navigator.clipboard.writeText(text);