- ) : null}
-
+export default function TxDetail({
+ sourceChain,
+ targetChain,
+ acceptedTargetChain,
+ message,
+}: TxDetailProps) {
+ return (
+
+
+
+ {/* Overview panel */}
+
+
-
}
- >
-
-
+ {/* Transaction summary */}
+
+
-
}
- >
-
-
-
- ({message?.sourceDappAddress})
-
-
-
-
+ {/* Message information */}
+
+
-
}>
-
-
-
}>
-
-
-
}
- >
-
-
-
- ({message?.targetDappAddress})
-
-
-
-
-
}>
- {message?.ormp ?
: null}
-
+ {/* Protocol details (collapsible) */}
+ {message.accepted && (
+
-
-
+ )}
+
+ {/* Raw data (collapsible) */}
+ {(message.message || message.params) && (
+
+
+ )}
+
+
+
-
+
);
}
diff --git a/packages/web/src/app/message/[id]/components/sections/DetailHeader.tsx b/packages/web/src/app/message/[id]/components/sections/DetailHeader.tsx
new file mode 100644
index 0000000..721f15b
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/DetailHeader.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowLeft } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+
+import { toShortText } from '@/utils';
+import { CodeFont } from '@/config/font';
+import { cn } from '@/lib/utils';
+
+interface DetailHeaderProps {
+ msgId?: string;
+}
+
+export default function DetailHeader({ msgId }: DetailHeaderProps) {
+ const searchParams = useSearchParams();
+ const network = searchParams.get('network');
+ const backHref = network ? `/?network=${network}` : '/';
+
+ return (
+
+
+
+ Back to Messages
+
+
+
Message Detail
+ {msgId && (
+
+ {toShortText({ text: msgId, frontLength: 10, backLength: 4 })}
+
+ )}
+
+
+ );
+}
diff --git a/packages/web/src/app/message/[id]/components/sections/EventEvidencePanel.tsx b/packages/web/src/app/message/[id]/components/sections/EventEvidencePanel.tsx
new file mode 100644
index 0000000..441368f
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/EventEvidencePanel.tsx
@@ -0,0 +1,77 @@
+import { cn } from '@/lib/utils';
+
+import TransactionHashInfo from '../TransactionHashInfo';
+
+import { OBSERVED_EVENT_STATE_META, buildObservedEvidence } from './observed-events-model';
+
+import type { CHAIN } from '@/types/chains';
+import type { CompositeMessage } from '@/types/messages';
+
+interface EventEvidencePanelProps {
+ message: CompositeMessage;
+ sourceChain?: CHAIN;
+ targetChain?: CHAIN;
+}
+
+const UNKNOWN_TONE_META = {
+ label: 'Unknown',
+ evidencePillClass: 'bg-muted text-muted-foreground'
+};
+
+export default function EventEvidencePanel({
+ message,
+ sourceChain,
+ targetChain,
+}: EventEvidencePanelProps) {
+ const items = buildObservedEvidence(message, sourceChain, targetChain);
+
+ return (
+
+ {items.map((item) => {
+ const toneMeta =
+ OBSERVED_EVENT_STATE_META[
+ item.tone as keyof typeof OBSERVED_EVENT_STATE_META
+ ] ?? UNKNOWN_TONE_META;
+
+ return (
+
+
+ {item.label}
+
+ {toneMeta.label}
+
+
+
+
+ Time
+ {item.time}
+
+
+
Tx
+
+ {item.hash ? (
+ Not observed
+ )}
+
+
+
+ Rule
+ {item.rule}
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/packages/web/src/app/message/[id]/components/sections/MessageInfoSection.tsx b/packages/web/src/app/message/[id]/components/sections/MessageInfoSection.tsx
new file mode 100644
index 0000000..fc5adb8
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/MessageInfoSection.tsx
@@ -0,0 +1,87 @@
+import { cn } from '@/lib/utils';
+import { CodeFont } from '@/config/font';
+import { toShortText } from '@/utils';
+import ClipboardIconButton from '@/components/clipboard-icon-button';
+import AddressDisplayFilterDappRemark from '@/components/address-display-filter-dapp-remark';
+
+import AddressInfo from '../AddressInfo';
+
+import { SectionLabel, DetailRow } from './shared';
+
+import type { CHAIN } from '@/types/chains';
+import type { CompositeMessage } from '@/types/messages';
+
+interface MessageInfoSectionProps {
+ message: CompositeMessage;
+ sourceChain?: CHAIN;
+ targetChain?: CHAIN;
+ acceptedTargetChain?: CHAIN;
+}
+
+function DappDisplay({ address, chain }: { address?: string; chain?: CHAIN }) {
+ if (!address) return
- ;
+
+ return (
+
+
+ toShortText({ text: a, frontLength: 6, backLength: 4 })}
+ >
+ ({toShortText({ text: address, frontLength: 6, backLength: 4 })})
+
+
+
+ );
+}
+
+export default function MessageInfoSection({
+ message,
+ sourceChain,
+ targetChain,
+ acceptedTargetChain,
+}: MessageInfoSectionProps) {
+ return (
+
+
Message Info
+
+
+
+ {/* Message ID — full width */}
+
+
+
+ {toShortText({ text: message.msgId, frontLength: 10, backLength: 4 })}
+
+
+
+
+ {/* Source Dapp | Target Dapp */}
+
+
+
+
+
+
+ {/* Source Port | Target Port */}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/web/src/app/message/[id]/components/sections/OverviewPanel.tsx b/packages/web/src/app/message/[id]/components/sections/OverviewPanel.tsx
new file mode 100644
index 0000000..04a0fca
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/OverviewPanel.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useId, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+import StepProgressBar, { computeObservedSummary } from './StepProgressBar';
+import QuickInfoBar from './QuickInfoBar';
+import EventEvidencePanel from './EventEvidencePanel';
+
+import type { CHAIN } from '@/types/chains';
+import type { CompositeMessage } from '@/types/messages';
+
+interface OverviewPanelProps {
+ message: CompositeMessage;
+ sourceChain?: CHAIN;
+ targetChain?: CHAIN;
+}
+
+const summaryPillStyles = {
+ neutral: 'border-info/20 bg-info/15 text-info',
+ success: 'border-success/20 bg-success/15 text-success',
+ failure: 'border-failure/20 bg-failure/15 text-failure',
+} as const;
+
+export default function OverviewPanel({ message, sourceChain, targetChain }: OverviewPanelProps) {
+ const summary = computeObservedSummary(message);
+ const [showEvidence, setShowEvidence] = useState(false);
+ const evidencePanelId = useId();
+
+ return (
+
+ {/* Header */}
+
+
+ Observed Events
+
+
+ {summary.label}
+
+
+
+ {/* Progress bar */}
+
+
+
+ Indexed event evidence
+
+
setShowEvidence((prev) => !prev)}
+ aria-expanded={showEvidence}
+ aria-controls={evidencePanelId}
+ className="inline-flex items-center gap-1 rounded-md border border-border/50 bg-muted/60 px-2 py-1 text-xs font-medium text-foreground transition-colors hover:border-border hover:bg-muted"
+ >
+ {showEvidence ? 'Hide evidence' : 'View evidence'}
+
+
+
+ {showEvidence && (
+
+
+ )}
+
+
+ {/* Quick info */}
+
+
+
+ );
+}
diff --git a/packages/web/src/app/message/[id]/components/sections/ProtocolDetailsSection.tsx b/packages/web/src/app/message/[id]/components/sections/ProtocolDetailsSection.tsx
new file mode 100644
index 0000000..b292409
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/ProtocolDetailsSection.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { Layers, ChevronDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { CodeFont } from '@/config/font';
+import { toShortText } from '@/utils';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import ClipboardIconButton from '@/components/clipboard-icon-button';
+
+import AddressInfo from '../AddressInfo';
+
+import { SectionLabel, DetailRow } from './shared';
+
+import type { CHAIN } from '@/types/chains';
+import type { ORMPMessageAccepted } from '@/graphql/type';
+
+interface ProtocolDetailsSectionProps {
+ accepted: ORMPMessageAccepted;
+ targetChain?: CHAIN;
+}
+
+export default function ProtocolDetailsSection({
+ accepted,
+ targetChain,
+}: ProtocolDetailsSectionProps) {
+ return (
+
+
Protocol Details
+
+
+
+
+
+
+
+
+
+
+
+ {toShortText({ text: accepted.msgHash, frontLength: 6, backLength: 4 }) || '-'}
+
+ {accepted.msgHash &&
+
+
+
+
+ {accepted.index ? Number(accepted.index).toLocaleString() : '-'}
+
+
+
+
+
+ {accepted.fromChainId || '-'}
+
+
+
+
+
+ {accepted.toChainId || '-'}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/web/src/app/message/[id]/components/sections/QuickInfoBar.test.tsx b/packages/web/src/app/message/[id]/components/sections/QuickInfoBar.test.tsx
new file mode 100644
index 0000000..eb9b0e0
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/QuickInfoBar.test.tsx
@@ -0,0 +1,116 @@
+/** @vitest-environment jsdom */
+
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { MESSAGE_STATUS } from '@/types/message';
+
+import QuickInfoBar from './QuickInfoBar';
+
+import type { CompositeMessage } from '@/types/messages';
+
+function createMessage(overrides: Partial
= {}): CompositeMessage {
+ return {
+ msgId: '0xmsg',
+ protocol: 'ormp',
+ status: MESSAGE_STATUS.PENDING,
+ transactionHash: '0xtx',
+ targetTransactionHash: undefined,
+ transactionFrom: '0xfrom',
+ fromChainId: '1',
+ toChainId: '2',
+ fromDapp: 'from',
+ toDapp: 'to',
+ portAddress: '0xport',
+ message: '0xdata',
+ params: '0x',
+ sentBlockTimestampSec: 1700000000,
+ dispatchedBlockTimestampSec: undefined,
+ accepted: undefined,
+ dispatched: undefined,
+ sent: {} as CompositeMessage['sent'],
+ ...overrides
+ };
+}
+
+describe('QuickInfoBar', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date('2026-02-14T12:00:00.000Z'));
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.useRealTimers();
+ });
+
+ it('renders stable timestamp during server-side render', () => {
+ const message = createMessage({
+ sentBlockTimestampSec: 1739534400
+ });
+
+ const markup = renderToStaticMarkup(
;
+}
+
+function QiLabel({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** Status badge with icon */
+const statusStyles = {
+ [MESSAGE_STATUS.SUCCESS]: {
+ label: 'Success',
+ className: 'bg-success/15 text-success',
+ Icon: Check,
+ },
+ [MESSAGE_STATUS.PENDING]: {
+ label: 'Pending',
+ className: 'bg-info/15 text-info',
+ Icon: Clock,
+ },
+ [MESSAGE_STATUS.FAILED]: {
+ label: 'Failed',
+ className: 'bg-failure/15 text-failure',
+ Icon: XCircle,
+ },
+} as const;
+
+export default function QuickInfoBar({ message, sourceChain, targetChain }: QuickInfoBarProps) {
+ const [hydrated, setHydrated] = useState(false);
+ const updatedTimestampSec = resolveUpdatedTimestampSec(message);
+ const stableUpdated = updatedTimestampSec ? formatTimestampStable(updatedTimestampSec) : '';
+ const relativeUpdated = hydrated && updatedTimestampSec ? formatTimeAgo(updatedTimestampSec) : '';
+ const updatedDisplay = relativeUpdated || stableUpdated;
+
+ useEffect(() => {
+ setHydrated(true);
+ }, []);
+
+ const statusCfg =
+ typeof message.status !== 'undefined' && message.status !== -1
+ ? statusStyles[message.status as MESSAGE_STATUS]
+ : null;
+
+ return (
+
+ {/* Chain route capsule — flex-1 pushes remaining items to the right */}
+
+
+ {sourceChain?.iconUrl && (
+ {sourceChain?.name ?? 'Unknown'}
+ →
+ {targetChain?.iconUrl && (
+ {targetChain?.name ?? 'Unknown'}
+
+
+
+
+
+ {/* Status */}
+
+ Status
+ {statusCfg && (
+
+
+ )}
+
+
+ {updatedDisplay ? (
+ <>
+
+ {/* Updated */}
+
+ Updated
+ {updatedDisplay}
+
+
+
+ ) : (
+
+ )}
+
+ {/* Protocol */}
+
+ Protocol
+ {message.protocol?.toUpperCase() ?? '-'}
+
+
+
+
+ {label}
+
+
+
+ {value}
+
+
+
Raw Data
+
+
+
+
+
+
+
+
+ {message &&
+
+
+
= {}): CompositeMessage {
+ return {
+ msgId: '0xmsg',
+ protocol: 'ormp',
+ status: MESSAGE_STATUS.PENDING,
+ transactionHash: '0xtx',
+ targetTransactionHash: undefined,
+ transactionFrom: '0xfrom',
+ fromChainId: '1',
+ toChainId: '2',
+ fromDapp: 'from',
+ toDapp: 'to',
+ portAddress: '0xport',
+ message: '0xdata',
+ params: '0x',
+ sentBlockTimestampSec: 1700000000,
+ dispatchedBlockTimestampSec: undefined,
+ accepted: undefined,
+ dispatched: undefined,
+ sent: {} as CompositeMessage['sent'],
+ ...overrides,
+ };
+}
+
+describe('buildObservedEvents', () => {
+ it('keeps outcome pending when dispatched exists but final status is not success', () => {
+ const message = createMessage({
+ dispatched: {} as CompositeMessage['dispatched'],
+ status: MESSAGE_STATUS.PENDING,
+ });
+
+ const events = buildObservedEvents(message);
+
+ expect(events[3]?.label).toBe('Outcome');
+ expect(events[3]?.state).toBe('pending');
+ });
+
+ it('marks outcome success only when final status is success', () => {
+ const message = createMessage({
+ dispatched: {} as CompositeMessage['dispatched'],
+ status: MESSAGE_STATUS.SUCCESS,
+ });
+
+ const events = buildObservedEvents(message);
+
+ expect(events[3]?.state).toBe('success');
+ });
+
+ it('marks accepted as inferred when accepted event is missing but dispatched exists', () => {
+ const message = createMessage({
+ dispatched: {} as CompositeMessage['dispatched'],
+ accepted: undefined,
+ status: MESSAGE_STATUS.PENDING,
+ });
+
+ const events = buildObservedEvents(message);
+
+ expect(events[1]?.label).toBe('Accepted');
+ expect(events[1]?.state).toBe('inferred');
+ });
+});
+
+describe('computeObservedSummary', () => {
+ it('returns success summary when message status is success', () => {
+ const message = createMessage({
+ status: MESSAGE_STATUS.SUCCESS,
+ dispatched: {} as CompositeMessage['dispatched'],
+ });
+
+ const summary = computeObservedSummary(message);
+
+ expect(summary.tone).toBe('success');
+ });
+
+ it('returns failure summary when message status is failed', () => {
+ const message = createMessage({
+ dispatched: {} as CompositeMessage['dispatched'],
+ status: MESSAGE_STATUS.FAILED,
+ });
+
+ const summary = computeObservedSummary(message);
+
+ expect(summary.tone).toBe('failure');
+ });
+});
diff --git a/packages/web/src/app/message/[id]/components/sections/StepProgressBar.tsx b/packages/web/src/app/message/[id]/components/sections/StepProgressBar.tsx
new file mode 100644
index 0000000..a288bf8
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/StepProgressBar.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { Check, CircleDashed, HelpCircle, X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+import { OBSERVED_EVENT_STATE_META, buildObservedEvents } from './observed-events-model';
+
+import type { CompositeMessage } from '@/types/messages';
+
+export { buildObservedEvents, computeObservedSummary } from './observed-events-model';
+
+interface StepProgressBarProps {
+ message: CompositeMessage;
+}
+
+const UNKNOWN_STATE_META = {
+ label: 'Unknown',
+ stepDotClass: 'bg-step-incomplete text-muted-foreground'
+};
+
+export default function StepProgressBar({ message }: StepProgressBarProps) {
+ const events = buildObservedEvents(message);
+
+ return (
+
+ {events.map((event, index) => {
+ const isFailed = event.state === 'failed';
+ const isSuccess = event.state === 'success';
+ const isObserved = event.state === 'observed';
+ const isInferred = event.state === 'inferred';
+ const isPending = event.state === 'pending';
+ const stateMeta =
+ OBSERVED_EVENT_STATE_META[
+ event.state as keyof typeof OBSERVED_EVENT_STATE_META
+ ] ?? UNKNOWN_STATE_META;
+ const stateLabel = stateMeta.label;
+
+ return (
+
+ {index > 0 && (
+
+ )}
+
+
+ {(isSuccess || isObserved) && (
+
+
+ {event.label}
+
+
{stateLabel}
+
+
+ );
+ })}
+
+
Transaction Summary
+
+
+ {/* Source card */}
+
+
+
+ Source
+
+ {sourceChain?.name ?? 'Unknown'}
+
+
+
+
+
+
+ {message.sent?.blockNumber ? Number(message.sent.blockNumber).toLocaleString() : '-'}
+
+
+ {sourceAbsoluteTime && (
+
+
+ {sourceRelativeTime ?? sourceAbsoluteTime}
+
+
+ )}
+
+
+
+
+
+ {/* Target card */}
+
+
+
+ Target
+
+ {targetChain?.name ?? 'Unknown'}
+ {isFailed && (
+ Reverted
+ )}
+
+ {isPending ? (
+
+
+ Waiting for message dispatch
+
+
+ ) : (
+
+
+
+
+
+ {message.dispatched?.blockNumber ? Number(message.dispatched.blockNumber).toLocaleString() : '-'}
+
+
+ {targetAbsoluteTime && (
+
+
+ {targetRelativeTime ?? targetAbsoluteTime}
+
+
+ )}
+
+ )}
+
+
+
= {
+ observed: {
+ label: 'Observed',
+ stepDotClass: 'bg-step-1 text-white',
+ evidencePillClass: 'bg-step-1/15 text-step-1',
+ },
+ inferred: {
+ label: 'Inferred',
+ stepDotClass: 'bg-step-3 text-white',
+ evidencePillClass: 'bg-step-3/15 text-step-3',
+ },
+ pending: {
+ label: 'Pending',
+ stepDotClass: 'bg-step-incomplete text-muted-foreground',
+ evidencePillClass: 'bg-muted text-muted-foreground',
+ },
+ success: {
+ label: 'Success',
+ stepDotClass: 'bg-step-4-success text-white',
+ evidencePillClass: 'bg-success/15 text-success',
+ },
+ failed: {
+ label: 'Failed',
+ stepDotClass: 'bg-step-4-failed text-white',
+ evidencePillClass: 'bg-failure/15 text-failure',
+ },
+};
+
+export interface ObservedEvent {
+ id: ObservedEventId;
+ label: string;
+ subLabel: string;
+ state: ObservedEventState;
+}
+
+export type OverviewTone = 'neutral' | 'success' | 'failure';
+
+export interface EventEvidenceItem {
+ id: ObservedEventId;
+ label: string;
+ tone: ObservedEventState;
+ time: string;
+ hash?: string;
+ chain?: CHAIN;
+ rule: string;
+}
+
+interface ObservedSnapshot {
+ hasSent: boolean;
+ hasAccepted: boolean;
+ hasDispatched: boolean;
+ isFailed: boolean;
+ isSuccess: boolean;
+}
+
+function deriveObservedSnapshot(message: CompositeMessage): ObservedSnapshot {
+ return {
+ hasSent: Boolean(message.sent),
+ hasAccepted: Boolean(message.accepted),
+ hasDispatched: Boolean(message.dispatched),
+ isFailed: message.status === MESSAGE_STATUS.FAILED,
+ isSuccess: message.status === MESSAGE_STATUS.SUCCESS,
+ };
+}
+
+function msTimestampToAgo(timestamp?: string): string {
+ if (!timestamp) return 'Not observed';
+ const ms = Number(timestamp);
+ if (!Number.isFinite(ms)) return 'Not observed';
+ return formatTimeAgo(String(Math.floor(ms / 1000))) || 'Not observed';
+}
+
+function secTimestampToAgo(timestampSec?: number): string {
+ if (!timestampSec) return 'Not observed';
+ return formatTimeAgo(String(timestampSec)) || 'Not observed';
+}
+
+export function buildObservedEvents(message: CompositeMessage): ObservedEvent[] {
+ const { hasSent, hasAccepted, hasDispatched, isFailed, isSuccess } = deriveObservedSnapshot(message);
+
+ const acceptedState: ObservedEventState = hasAccepted
+ ? 'observed'
+ : hasDispatched
+ ? 'inferred'
+ : 'pending';
+ const acceptedSubLabel = hasAccepted
+ ? 'Accepted event observed'
+ : hasDispatched
+ ? 'Inferred from dispatched event'
+ : 'Waiting for accepted event';
+
+ const outcomeState: ObservedEventState = isSuccess ? 'success' : isFailed ? 'failed' : 'pending';
+ const outcomeSubLabel = isSuccess
+ ? 'Execution succeeded'
+ : isFailed
+ ? 'Execution failed'
+ : hasDispatched
+ ? 'Waiting for final result'
+ : 'Waiting for dispatch event';
+
+ return [
+ {
+ id: 'sent',
+ label: 'Sent',
+ subLabel: hasSent ? 'Sent event observed' : 'Waiting for sent event',
+ state: hasSent ? 'observed' : 'pending',
+ },
+ {
+ id: 'accepted',
+ label: 'Accepted',
+ subLabel: acceptedSubLabel,
+ state: acceptedState,
+ },
+ {
+ id: 'dispatched',
+ label: 'Dispatched',
+ subLabel: hasDispatched ? 'Dispatched event observed' : 'Waiting for dispatched event',
+ state: hasDispatched ? 'observed' : 'pending',
+ },
+ {
+ id: 'outcome',
+ label: 'Outcome',
+ subLabel: outcomeSubLabel,
+ state: outcomeState,
+ },
+ ];
+}
+
+export function computeObservedSummary(message: CompositeMessage): { label: string; tone: OverviewTone } {
+ const { hasSent, hasAccepted, hasDispatched, isFailed, isSuccess } = deriveObservedSnapshot(message);
+
+ if (isSuccess) {
+ return { label: 'Observed · Success', tone: 'success' };
+ }
+ if (isFailed) {
+ return { label: 'Observed · Failed', tone: 'failure' };
+ }
+ if (hasDispatched) {
+ return { label: 'Observed · Pending final result', tone: 'neutral' };
+ }
+ if (hasAccepted) {
+ return { label: 'Observed · In transit', tone: 'neutral' };
+ }
+ if (hasSent) {
+ return { label: 'Observed · Submitted', tone: 'neutral' };
+ }
+
+ return { label: 'Observed · Awaiting data', tone: 'neutral' };
+}
+
+export function buildObservedEvidence(
+ message: CompositeMessage,
+ sourceChain?: CHAIN,
+ targetChain?: CHAIN
+): EventEvidenceItem[] {
+ const { hasSent, hasAccepted, hasDispatched, isFailed, isSuccess } = deriveObservedSnapshot(message);
+ const inferredAcceptedHash = message.targetTransactionHash ?? message.dispatched?.transactionHash;
+
+ return [
+ {
+ id: 'sent',
+ label: 'Sent',
+ tone: hasSent ? 'observed' : 'pending',
+ time: secTimestampToAgo(message.sentBlockTimestampSec),
+ hash: message.transactionHash,
+ chain: sourceChain,
+ rule: hasSent ? 'Observed from MsgportMessageSent' : 'Awaiting MsgportMessageSent event',
+ },
+ {
+ id: 'accepted',
+ label: 'Accepted',
+ tone: hasAccepted ? 'observed' : hasDispatched ? 'inferred' : 'pending',
+ time: hasAccepted
+ ? msTimestampToAgo(message.accepted?.blockTimestamp)
+ : hasDispatched
+ ? msTimestampToAgo(message.dispatched?.blockTimestamp)
+ : 'Not observed',
+ hash: hasAccepted ? message.accepted?.transactionHash : inferredAcceptedHash,
+ chain: targetChain,
+ rule: hasAccepted
+ ? 'Observed from ORMPMessageAccepted'
+ : hasDispatched
+ ? 'Inferred from ORMPMessageDispatched (accepted event not indexed)'
+ : 'Awaiting ORMPMessageAccepted event',
+ },
+ {
+ id: 'dispatched',
+ label: 'Dispatched',
+ tone: hasDispatched ? 'observed' : 'pending',
+ time: msTimestampToAgo(message.dispatched?.blockTimestamp),
+ hash: message.targetTransactionHash ?? message.dispatched?.transactionHash,
+ chain: targetChain,
+ rule: hasDispatched
+ ? 'Observed from ORMPMessageDispatched'
+ : 'Awaiting ORMPMessageDispatched event',
+ },
+ {
+ id: 'outcome',
+ label: 'Outcome',
+ tone: isSuccess ? 'success' : isFailed ? 'failed' : 'pending',
+ time: hasDispatched ? msTimestampToAgo(message.dispatched?.blockTimestamp) : 'Not observed',
+ hash: message.targetTransactionHash ?? message.dispatched?.transactionHash,
+ chain: targetChain,
+ rule: hasDispatched
+ ? 'Derived from dispatchResult on ORMPMessageDispatched'
+ : 'Awaiting dispatchResult from ORMPMessageDispatched',
+ },
+ ];
+}
diff --git a/packages/web/src/app/message/[id]/components/sections/shared.tsx b/packages/web/src/app/message/[id]/components/sections/shared.tsx
new file mode 100644
index 0000000..39231bb
--- /dev/null
+++ b/packages/web/src/app/message/[id]/components/sections/shared.tsx
@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+
+interface SectionLabelProps {
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function SectionLabel({ className, children }: SectionLabelProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+interface DetailRowProps {
+ label: string;
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function DetailRow({ label, className, children }: DetailRowProps) {
+ return (
+
+
{label}
+
+ {children}
+
+
+ {props.title}
+ {props.description}
+
+ )
+}));
+
+describe('message detail route error boundary', () => {
+ it('renders and supports retry through reset', () => {
+ const reset = vi.fn();
+
+ render(
+
+ {/* DetailHeader */}
+
+
+
+ {/* OverviewPanel */}
+
+
+
+
+
+
+ {/* StepProgressBar skeleton — matches flex-nowrap with connector lines */}
+
+ {[0, 1, 2, 3].map((i) => (
+
+ ))}
+
+
+
+
+
+
+ {/* TransactionSummary */}
+
+
+
+ {[0, 1].map((i) => (
+
+
+
+
+ {[0, 1, 2].map((j) => (
+
+
+ ))}
+
+
+ ))}
+
+
+
+ {/* MessageInfoSection */}
+
+
+
+ {/* Grid matching sm:grid-cols-2 — Message ID full width, then pairs */}
+
+ {/* Message ID — full width */}
+
+
+ {/* Source Dapp / Target Dapp */}
+ {[0, 1].map((i) => (
+
+
+ ))}
+ {/* Source Port / Target Port */}
+ {[0, 1].map((i) => (
+
+
+ ))}
+
+
+
+
-
);
}
diff --git a/packages/web/src/app/not-found.tsx b/packages/web/src/app/not-found.tsx
index 15a25fa..479845d 100644
--- a/packages/web/src/app/not-found.tsx
+++ b/packages/web/src/app/not-found.tsx
@@ -1,9 +1,12 @@
+import Link from 'next/link';
+
import ErrorDisplay from '@/components/error-display';
+import { buttonVariants } from '@/components/ui/button-variants';
const NotFound = () => {
return (
{
title="404 Page not found"
svgPath="/images/common/404.svg"
svgPathLight="/images/common/404-light.svg"
- description="The resource reguested could not be found on this server!"
+ description="This page doesn't exist."
/>
+
);
};
diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index 40a5538..7ef744f 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -1,24 +1,22 @@
-import { getChainsByNetwork } from '@/utils/network';
-import SearchBar from '@/components/search-bar';
-import { Separator } from '@/components/ui/separator';
+import { getChainsByNetwork, getNetwork } from '@/utils/network';
import MessagePortTable from '@/components/message-port-table';
import MessageProgressStats from '@/components/message-progress-stats';
+import ChartContainer from '@/components/charts/chart-container';
interface PageProps {
- searchParams: {
- network: string;
- };
+ searchParams: Promise<{
+ network?: string;
+ }>;
}
-export default function Page({ searchParams }: PageProps) {
- const chains = getChainsByNetwork(searchParams?.network);
+export default async function Page({ searchParams }: PageProps) {
+ const { network } = await searchParams;
+ const effectiveNetwork = getNetwork(network);
+ const chains = getChainsByNetwork(effectiveNetwork);
return (
- <>
-
-
+
);
}
diff --git a/packages/web/src/app/sender/[address]/page.tsx b/packages/web/src/app/sender/[address]/page.tsx
index 256a5d6..247cfc1 100644
--- a/packages/web/src/app/sender/[address]/page.tsx
+++ b/packages/web/src/app/sender/[address]/page.tsx
@@ -1,37 +1,48 @@
-'use client';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
-import SearchBar from '@/components/search-bar';
-import { Separator } from '@/components/ui/separator';
-import { FlipWords } from '@/components/ui/flip-words';
-import { getChainsByNetwork } from '@/utils/network';
+import { getChainsByNetwork, getNetwork } from '@/utils/network';
import MessagePortTable from '@/components/message-port-table';
+import ClipboardIconButton from '@/components/clipboard-icon-button';
import { CodeFont } from '@/config/font';
import { cn } from '@/lib/utils';
interface PageProps {
- params: {
+ params: Promise<{
address: string;
- };
- searchParams: {
- network: string;
- };
+ }>;
+ searchParams: Promise<{
+ network?: string;
+ }>;
}
-export default function Page({ params, searchParams }: PageProps) {
- const chains = getChainsByNetwork(searchParams?.network);
- const words = [params?.address];
+export default async function Page({ params, searchParams }: PageProps) {
+ const [{ address }, { network }] = await Promise.all([params, searchParams]);
+ const effectiveNetwork = getNetwork(network);
+ const chains = getChainsByNetwork(effectiveNetwork);
+
return (
- <>
-
-
-
-
Address
-
+
+ {/* Breadcrumb */}
+
+ Sender
+
+
+ {/* Address header */}
+
+
Sender Address
+
+
+ {address}
+
+
-
-
-
+
+
+
);
}
diff --git a/packages/web/src/app/sw.ts b/packages/web/src/app/sw.ts
deleted file mode 100644
index 2a47239..0000000
--- a/packages/web/src/app/sw.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { defaultCache } from '@serwist/next/worker';
-import { Serwist } from 'serwist';
-
-import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';
-
-// This declares the value of `injectionPoint` to TypeScript.
-// `injectionPoint` is the string that will be replaced by the
-// actual precache manifest. By default, this string is set to
-// `"self.__SW_MANIFEST"`.
-declare global {
- interface WorkerGlobalScope extends SerwistGlobalConfig {
- __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
- }
-}
-
-declare const self: ServiceWorkerGlobalScope;
-
-const serwist = new Serwist({
- precacheEntries: self.__SW_MANIFEST,
- skipWaiting: true,
- clientsClaim: true,
- navigationPreload: true,
- runtimeCaching: defaultCache
-});
-
-serwist.addEventListeners();
diff --git a/packages/web/src/components/address-display-filter-dapp-remark.tsx b/packages/web/src/components/address-display-filter-dapp-remark.tsx
index 979be3f..d62c7ea 100644
--- a/packages/web/src/components/address-display-filter-dapp-remark.tsx
+++ b/packages/web/src/components/address-display-filter-dapp-remark.tsx
@@ -1,9 +1,8 @@
import React from 'react';
import Image from 'next/image';
-import { capitalize } from 'lodash-es';
import { dappRemark } from '@/config/dapp_remark';
-import { getDAppInfo } from '@/utils/dapp';
+import { capitalizeText, getDAppInfo } from '@/utils/dapp';
import { cn } from '@/lib/utils';
interface AddressDisplayFilterDappRemarkProps {
@@ -25,11 +24,11 @@ const AddressDisplayFilterDappRemark = ({
const displayAddress = formatAddress ? formatAddress(address) : address;
return dappName && dappLogo ? (
-
- {capitalize(dappName)}
+
+ {capitalizeText(dappName)}
{children}
-
+
) : (
displayAddress
);
diff --git a/packages/web/src/components/chain-tx-display.tsx b/packages/web/src/components/chain-tx-display.tsx
index 224362a..1ebd58d 100644
--- a/packages/web/src/components/chain-tx-display.tsx
+++ b/packages/web/src/components/chain-tx-display.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; // 假设shadcn已经提供了Tooltip组件
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { toShortText } from '@/utils';
import { CodeFont } from '@/config/font';
@@ -15,6 +15,7 @@ interface ChainTxDisplayProps {
isLink?: boolean;
href?: string;
isFullText?: boolean;
+ showIcon?: boolean;
rootClassName?: string;
className?: string;
iconClassName?: string;
@@ -26,16 +27,18 @@ const ChainTxDisplay = ({
isLink = true,
href,
isFullText = false,
+ showIcon = true,
rootClassName,
className,
iconClassName,
children
}: React.PropsWithChildren) => {
const renderContent = () => {
- let txLink = `${chain?.blockExplorers?.default?.url}/tx/${value}`;
+ const explorerBaseUrl = chain?.blockExplorers?.default?.url;
+ let txLink = explorerBaseUrl ? `${explorerBaseUrl}/tx/${value}` : undefined;
- if (chain?.name.includes("Tron")) {
- txLink = `${chain?.blockExplorers?.default?.url}/#/transaction/${value?.replace('0x', '')}`
+ if (chain?.name?.includes('Tron') && explorerBaseUrl) {
+ txLink = `${explorerBaseUrl}/#/transaction/${value?.replace('0x', '')}`;
}
if (isLink) {
if (href) {
@@ -55,23 +58,25 @@ const ChainTxDisplay = ({
);
}
- return (
-
@@ -81,21 +86,33 @@ const ChainTxDisplay = ({
text: value,
frontLength: 6,
backLength: 4
- })}
+ })}
);
}
+
+ return (
+
+ {isFullText
+ ? value
+ : toShortText({
+ text: value,
+ frontLength: 6,
+ backLength: 4
+ })}
+
+ );
};
return (
-
- {chain ? (
+
+ {showIcon && chain ? (
-
+ ('source');
+ const [isMounted, setIsMounted] = useState(false);
+
+ const activeData = direction === 'source' ? data : targetData;
+ const activeLoading = direction === 'source' ? isLoading : isTargetLoading;
+ const chartData = (activeData ?? []).slice(0, MAX_VISIBLE_CHAINS);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ if (activeLoading) {
+ return (
+
+
+ Chain Distribution
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ setDirection('source')}
+ aria-pressed={direction === 'source'}
+ className={cn(
+ 'rounded px-3 py-1 text-xs font-medium transition-colors cursor-pointer',
+ direction === 'source'
+ ? 'bg-background text-foreground shadow-sm'
+ : 'text-muted-foreground hover:text-foreground'
+ )}
+ >
+ Source Chain
+
+ setDirection('target')}
+ aria-pressed={direction === 'target'}
+ className={cn(
+ 'rounded px-3 py-1 text-xs font-medium transition-colors cursor-pointer',
+ direction === 'target'
+ ? 'bg-background text-foreground shadow-sm'
+ : 'text-muted-foreground hover:text-foreground'
+ )}
+ >
+ Target Chain
+
+
+
+
+ {chartData.length === 0 ? (
+
+ No data available
+
+ ) : (
+
+ {isMounted ? (
+
+
+ formatNumber(Number(v))}
+ />
+ [formatNumber(Number(value)), 'Messages']}
+ />
+
+ formatNumber(Number(v))}
+ />
+
+
+
+ ) : null}
+
+ )}
+
+
+ );
+}
diff --git a/packages/web/src/components/charts/chart-container.tsx b/packages/web/src/components/charts/chart-container.tsx
new file mode 100644
index 0000000..27c1747
--- /dev/null
+++ b/packages/web/src/components/charts/chart-container.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { useMessageTrend } from '@/hooks/use-message-trend';
+import { useChainDistribution } from '@/hooks/use-chain-distribution';
+
+import MessageTrendChart from './message-trend-chart';
+import ChainDistributionChart from './chain-distribution-chart';
+
+import type { CHAIN } from '@/types/chains';
+
+interface ChartContainerProps {
+ chains: CHAIN[];
+}
+
+export default function ChartContainer({ chains }: ChartContainerProps) {
+ const { data: trendData, isLoading: trendLoading } = useMessageTrend(chains);
+ const { data: distributionData, isLoading: distributionLoading } = useChainDistribution(chains);
+
+ return (
+
+
+ );
+}
diff --git a/packages/web/src/components/charts/message-trend-chart.tsx b/packages/web/src/components/charts/message-trend-chart.tsx
new file mode 100644
index 0000000..ce61a1c
--- /dev/null
+++ b/packages/web/src/components/charts/message-trend-chart.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis
+} from 'recharts';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+import type { TrendDataPoint } from '@/hooks/use-message-trend';
+
+interface MessageTrendChartProps {
+ data?: TrendDataPoint[];
+ isLoading?: boolean;
+}
+
+function ChartLegend() {
+ return (
+
+
+
+
+ );
+}
+
+function computeYTicks(data: TrendDataPoint[] | undefined): { domain: [number, number]; ticks: number[] } {
+ const maxCount = data && data.length > 0 ? Math.max(...data.map((d) => d.count), 0) : 0;
+ const yMax = Math.max(Math.ceil(maxCount * 1.25), 4);
+ const step = Math.ceil(yMax / 4);
+ const ticks = Array.from({ length: 5 }, (_, i) => i * step);
+ return { domain: [0, ticks[4]], ticks };
+}
+
+export default function MessageTrendChart({ data, isLoading }: MessageTrendChartProps) {
+ const [isMounted, setIsMounted] = useState(false);
+ const hasData = Boolean(data && data.length > 0);
+ const { domain, ticks } = computeYTicks(data);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ if (isLoading) {
+ return (
+
+
+ Message Volume (7 days)
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ Message Volume (7 days)
+ {hasData ?
+
+
+
+ {hasData ? (
+ isMounted ? (
+
+
+
+
+
+
+
+
+ ) : null
+ ) : (
+
+ No data available
+
+ )}
+
+
+ );
+}
diff --git a/packages/web/src/components/clipboard-icon-button.test.tsx b/packages/web/src/components/clipboard-icon-button.test.tsx
new file mode 100644
index 0000000..a2af861
--- /dev/null
+++ b/packages/web/src/components/clipboard-icon-button.test.tsx
@@ -0,0 +1,91 @@
+/** @vitest-environment jsdom */
+
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ClipboardIconButton from './clipboard-icon-button';
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+const { toastSuccessMock, toastErrorMock } = vi.hoisted(() => ({
+ toastSuccessMock: vi.fn(),
+ toastErrorMock: vi.fn()
+}));
+
+vi.mock('sonner', () => ({
+ toast: {
+ success: toastSuccessMock,
+ error: toastErrorMock
+ }
+}));
+
+vi.mock('./ui/tooltip', () => ({
+ Tooltip: ({ children }: { children: ReactNode }) => {children}
,
+ TooltipTrigger: ({
+ children,
+ ...props
+ }: {
+ children: ReactNode;
+ } & ButtonHTMLAttributes) => {children} ,
+ TooltipContent: ({ children }: { children: ReactNode }) => {children}
+}));
+
+describe('ClipboardIconButton', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ toastSuccessMock.mockReset();
+ toastErrorMock.mockReset();
+
+ Object.defineProperty(globalThis.navigator, 'clipboard', {
+ value: { writeText: vi.fn().mockResolvedValue(undefined) },
+ configurable: true
+ });
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.useRealTimers();
+ vi.clearAllMocks();
+ });
+
+ it('renders nothing when text is empty', () => {
+ const { container } = render(();
- const leaveTimeout = useRef();
+ const enterTimeout = useRef | undefined>(undefined);
+ const leaveTimeout = useRef | undefined>(undefined);
+ const copiedTimeout = useRef | undefined>(undefined);
const handleCopy = useCallback(() => {
if (!text) return;
- copyToClipboard(text);
- setCopied(true);
- setTimeout(() => setCopied(false), 1000);
- }, [copyToClipboard, text]);
-
- useEffect(() => {
- if (state.error) {
- console.error('Copy failed:', state.error);
- }
- }, [state]);
+ navigator.clipboard
+ .writeText(text)
+ .then(() => {
+ setCopied(true);
+ toast.success('Copied!');
+ clearTimeout(copiedTimeout.current);
+ copiedTimeout.current = setTimeout(() => {
+ setCopied(false);
+ copiedTimeout.current = undefined;
+ }, 1000);
+ })
+ .catch((error) => {
+ console.error('Copy failed:', error);
+ toast.error('Failed to copy');
+ });
+ }, [text]);
const handleMouseEnter = useCallback(() => {
clearTimeout(leaveTimeout.current);
@@ -50,6 +58,7 @@ const ClipboardIconButton = ({ text = '', size }: ClipboardIconButtonProps) => {
return () => {
clearTimeout(enterTimeout.current);
clearTimeout(leaveTimeout.current);
+ clearTimeout(copiedTimeout.current);
};
}, []);
@@ -57,30 +66,30 @@ const ClipboardIconButton = ({ text = '', size }: ClipboardIconButtonProps) => {
return (
-
-
-
+
+
{copied ? 'Copied!' : 'Copy to clipboard'}
diff --git a/packages/web/src/components/data-table/DesktopFilterToolbar/TableChainFilter.tsx b/packages/web/src/components/data-table/DesktopFilterToolbar/TableChainFilter.tsx
index 779d8a8..0a57bab 100644
--- a/packages/web/src/components/data-table/DesktopFilterToolbar/TableChainFilter.tsx
+++ b/packages/web/src/components/data-table/DesktopFilterToolbar/TableChainFilter.tsx
@@ -7,9 +7,15 @@ import { cn } from '@/lib/utils';
import { Checkbox } from '@/components/ui/checkbox';
import { Separator } from '@/components/ui/separator';
import SelectedLabels from '@/components/selected-labels';
+import { shouldShowAllOption } from '@/components/data-table/filter-option-policy';
import useChainFilterLogic from '../hooks/useChainFilterLogic';
+import {
+ FILTER_TRIGGER_BASE_CLASSNAME,
+ FILTER_TRIGGER_FOCUS_CLASSNAME
+} from './filterTriggerStyles';
+
import type { TableFilterOption } from '@/types/helper';
interface TableChainFilterProps {
@@ -32,84 +38,137 @@ const TableChainFilter = ({
contentClassName
}: TableChainFilterProps) => {
const [open, setOpen] = useState(false);
- const { sortedOptions, toggleItem, handleSelectAll, checkedAll } = useChainFilterLogic({
+ const optionFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+ const actionFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+ const showAllOption = shouldShowAllOption(options.length);
+ const { sortedOptions, toggleItem, handleSelectAll } = useChainFilterLogic({
options,
value,
onChange,
- limit
+ limit,
+ normalizeFullSelectionToAll: false
});
+ const isNoFilter = value.length === 0;
+ const isAllChecked = limit > 0 && value.length === limit;
+ const clearActionDisabled = isNoFilter;
+ const clearActionLabel = isNoFilter ? 'No filter (All)' : 'Clear to All';
+ const selectionSummary = isNoFilter
+ ? 'No filter'
+ : isAllChecked
+ ? 'All selected'
+ : `${value.length} / ${limit} Selected`;
return (
-
-
- {title}:
-
-
-
+ {title}:
+
+
-
-
-
-
- All
-
+ {showAllOption && (
+
+
+
+ {clearActionLabel}
+
+ {selectionSummary}
+
+
-
- {value.length || '0'} / {limit} Selected
-
-
-
-
+ )}
+
{sortedOptions.map(({ value: optionValue, label }) => {
const isSelected = value.includes(optionValue as number);
+ const isDisabled = value.length === limit && !isSelected;
return (
-
toggleItem(optionValue as number)}
+ disabled={isDisabled}
className={cn(
- 'flex items-center gap-[0.62rem] py-[0.62rem]',
- value.length < limit || isSelected ? 'cursor-pointer' : 'cursor-not-allowed'
+ 'flex items-center gap-[0.62rem] rounded-md px-1 py-[0.62rem] text-left transition-colors duration-200 hover:bg-muted/50',
+ optionFocusClassName,
+ isSelected && 'bg-accent hover:bg-accent/80',
+ isDisabled ? 'cursor-not-allowed opacity-40 hover:bg-transparent' : 'cursor-pointer'
)}
+ aria-pressed={isSelected}
+ aria-disabled={isDisabled}
>
{label}
-
-
+
+
);
})}
+ {!showAllOption && (
+ <>
+
+ {selectionSummary}
+
+
+
+
+ {clearActionLabel}
+
+
+
+ )}
);
diff --git a/packages/web/src/components/data-table/DesktopFilterToolbar/TableDateFilter.tsx b/packages/web/src/components/data-table/DesktopFilterToolbar/TableDateFilter.tsx
index 26e57ab..bac34b2 100644
--- a/packages/web/src/components/data-table/DesktopFilterToolbar/TableDateFilter.tsx
+++ b/packages/web/src/components/data-table/DesktopFilterToolbar/TableDateFilter.tsx
@@ -6,7 +6,12 @@ import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { cn } from '@/lib/utils';
-import type { DateRange, SelectRangeEventHandler } from 'react-day-picker';
+import {
+ FILTER_TRIGGER_BASE_CLASSNAME,
+ FILTER_TRIGGER_FOCUS_CLASSNAME
+} from './filterTriggerStyles';
+
+import type { DateRange } from 'react-day-picker';
interface TableDateFilterProps {
date?: DateRange;
@@ -23,8 +28,8 @@ const TableDateFilter = ({
}: TableDateFilterProps) => {
const [open, setOpen] = useState(false);
- const handleChange = useCallback
(
- (selectedDate) => {
+ const handleChange = useCallback(
+ (selectedDate: DateRange | undefined) => {
if (!selectedDate) return;
const { from, to } = selectedDate;
if (onChange) {
@@ -39,32 +44,35 @@ const TableDateFilter = ({
return (
-
-
- Date:
-
-
- {!date?.from && !date?.to
- ? 'All'
- : `${date.from?.toLocaleDateString() ?? ''} - ${date.to?.toLocaleDateString() ?? ''}`}
-
+
+ }
+ >
+
Date:
+
+
+ {!date?.from && !date?.to
+ ? 'All'
+ : `${date.from?.toLocaleDateString() ?? ''} - ${date.to?.toLocaleDateString() ?? ''}`}
+
-
-
+
+
-
+
{
onChange: (newValue: T[]) => void;
title: React.ReactNode;
onClearFilters?: () => void;
+ showAllOption?: boolean;
buttonClassName?: string;
contentClassName?: string;
}
@@ -26,89 +32,143 @@ const TableMultiSelectFilter = ({
onChange,
title,
onClearFilters,
+ showAllOption,
buttonClassName,
contentClassName
}: TableMultiSelectFilterProps) => {
const [open, setOpen] = useState(false);
+ const optionFocusClassName = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50';
+ const actionFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+ const safeValue = value ?? [];
+ const groupAriaLabel = typeof title === 'string' ? `${title} filter options` : 'Filter options';
const toggleItem = (itemValue: T) => {
- if (value?.includes(itemValue)) {
- onChange(value?.filter((s) => s !== itemValue));
+ if (safeValue.includes(itemValue)) {
+ onChange(safeValue.filter((s) => s !== itemValue));
} else {
- onChange([...(value || []), itemValue]);
+ onChange([...safeValue, itemValue]);
+ }
+ };
+
+ const handleClearToAll = () => {
+ if (onClearFilters) {
+ onClearFilters();
+ return;
}
+ onChange([]);
};
+ const isAllSelected = safeValue.length === 0;
+ const resolvedShowAllOption = showAllOption ?? shouldShowAllOption(options.length);
+ const clearActionDisabled = isAllSelected;
+
return (
-
-
- {title}:
-
-
-
+ {title}:
+
+
-
-
-
-
- {options.map(({ value: optionValue, label }) => {
- const isSelected = value?.includes(optionValue as T);
- return (
- toggleItem(optionValue as T)}
- className="cursor-pointer px-[1.25rem] py-[0.62rem]"
+
+
+ {resolvedShowAllOption && (
+
+
+
+ {isAllSelected ? 'No filter (All)' : 'Clear to All'}
+
+ {isAllSelected ? 'No filter' : `${safeValue.length} / ${options.length} Selected`}
+
+
+
+ )}
+
+ {options.map(({ value: optionValue, label }) => {
+ const isSelected = safeValue.includes(optionValue as T);
+ return (
+
toggleItem(optionValue as T)}
+ className={cn(
+ 'flex w-full cursor-pointer items-center gap-2 px-[1.25rem] py-[0.62rem] text-left transition-colors duration-200 hover:bg-muted/50',
+ optionFocusClassName,
+ isSelected && 'bg-accent hover:bg-accent/80'
+ )}
+ >
+
-
-
-
- {label}
-
-
- );
- })}
-
- {value?.length > 0 && (
- <>
-
-
- Clear filters
-
-
-
- )}
-
-
+ {label}
+
+
+ );
+ })}
+
+ {!resolvedShowAllOption && onClearFilters && (
+ <>
+
+
+
+ {isAllSelected ? 'No filter (All)' : 'Clear to All'}
+
+
+
+ )}
+
);
diff --git a/packages/web/src/components/data-table/DesktopFilterToolbar/filterTriggerStyles.ts b/packages/web/src/components/data-table/DesktopFilterToolbar/filterTriggerStyles.ts
new file mode 100644
index 0000000..7862186
--- /dev/null
+++ b/packages/web/src/components/data-table/DesktopFilterToolbar/filterTriggerStyles.ts
@@ -0,0 +1,5 @@
+export const FILTER_TRIGGER_BASE_CLASSNAME =
+ 'flex items-center gap-1.5 rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium shadow-none transition-colors duration-200 dark:border-border dark:bg-background hover:bg-accent hover:text-foreground active:bg-accent active:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground data-[state=open]:bg-accent data-[state=open]:text-foreground dark:hover:bg-accent dark:active:bg-accent dark:aria-expanded:bg-accent dark:data-[state=open]:bg-accent cursor-pointer';
+
+export const FILTER_TRIGGER_FOCUS_CLASSNAME =
+ 'focus-visible:outline-none focus-visible:border-border focus-visible:ring-0 focus-visible:bg-accent focus-visible:text-foreground';
diff --git a/packages/web/src/components/data-table/DesktopFilterToolbar/index.tsx b/packages/web/src/components/data-table/DesktopFilterToolbar/index.tsx
index 9857633..a3ecb98 100644
--- a/packages/web/src/components/data-table/DesktopFilterToolbar/index.tsx
+++ b/packages/web/src/components/data-table/DesktopFilterToolbar/index.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@/components/ui/button';
import { MESSAGE_STATUS_LIST } from '@/config/status';
import { cn } from '@/lib/utils';
import { getDappOptions } from '@/utils';
@@ -45,65 +44,70 @@ const TableFilterToolbar = ({ chains, className, hideDappFilter }: TableFilterTo
} = useQueryParamState();
const limit = CHAIN_OPTIONS?.length;
+
+ const hasActiveFilters =
+ (selectedDapps?.length ?? 0) > 0 ||
+ (selectedStatuses?.length ?? 0) > 0 ||
+ Boolean(dateFrom) ||
+ Boolean(dateTo) ||
+ (selectedSourceChains?.length ?? 0) > 0 ||
+ (selectedTargetChains?.length ?? 0) > 0;
+
return (
-
-
Messages
-
+
+
{!hideDappFilter && (
)}
-
-
-
-
-
-
- Reset
-
+ {hasActiveFilters &&
}
+ {hasActiveFilters && (
+
+ Reset
+
+ )}
);
diff --git a/packages/web/src/components/data-table/MobileFilterToolbar/DropdownButton.tsx b/packages/web/src/components/data-table/MobileFilterToolbar/DropdownButton.tsx
index 99a3ada..39b9ac1 100644
--- a/packages/web/src/components/data-table/MobileFilterToolbar/DropdownButton.tsx
+++ b/packages/web/src/components/data-table/MobileFilterToolbar/DropdownButton.tsx
@@ -21,13 +21,17 @@ const DropdownButton = ({
children,
className
}: React.PropsWithChildren
) => {
+ const triggerFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+
return (
onOpenChange?.(true)}
className={cn(
- 'flex items-center gap-[0.31rem] border-none text-sm font-normal focus-visible:ring-0',
+ 'flex items-center gap-[0.31rem] border-none text-sm font-normal cursor-pointer transition-colors duration-200 hover:bg-muted/50',
+ triggerFocusClassName,
className
)}
>
diff --git a/packages/web/src/components/data-table/MobileFilterToolbar/FilterBack.tsx b/packages/web/src/components/data-table/MobileFilterToolbar/FilterBack.tsx
index ddcb32f..3dc4551 100644
--- a/packages/web/src/components/data-table/MobileFilterToolbar/FilterBack.tsx
+++ b/packages/web/src/components/data-table/MobileFilterToolbar/FilterBack.tsx
@@ -7,13 +7,15 @@ interface FilterBackProps {
}
const MobileFilterBack = ({ onClick, title, isShowIcon = true }: FilterBackProps) => {
return (
-
- {isShowIcon ?
: null}
+ {isShowIcon ?
: null}
{title}
-
);
};
diff --git a/packages/web/src/components/data-table/MobileFilterToolbar/TableChainFilter.tsx b/packages/web/src/components/data-table/MobileFilterToolbar/TableChainFilter.tsx
index 6bb57cc..b4fdc59 100644
--- a/packages/web/src/components/data-table/MobileFilterToolbar/TableChainFilter.tsx
+++ b/packages/web/src/components/data-table/MobileFilterToolbar/TableChainFilter.tsx
@@ -1,6 +1,10 @@
+import { useState, useEffect } from 'react';
+
import { cn } from '@/lib/utils';
import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
+import { shouldShowAllOption } from '@/components/data-table/filter-option-policy';
import useChainFilterLogic from '../hooks/useChainFilterLogic';
@@ -11,65 +15,128 @@ interface TableChainFilterProps {
value: number[];
onChange: (newValue: number[]) => void;
limit: number;
+ title?: string;
}
-const TableChainFilter = ({ options, value, onChange, limit }: TableChainFilterProps) => {
- const { sortedOptions, toggleItem, handleSelectAll, checkedAll } = useChainFilterLogic({
+const TableChainFilter = ({ options, value: valueProp, onChange, limit, title }: TableChainFilterProps) => {
+ // Local state for immediate visual feedback, avoiding nuqs startTransition flicker
+ const [value, setValue] = useState(valueProp);
+
+ useEffect(() => {
+ setValue(valueProp);
+ }, [valueProp]);
+
+ const handleChange = (newValue: number[]) => {
+ setValue(newValue);
+ onChange(newValue);
+ };
+ const optionFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+ const actionFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+ const showAllOption = shouldShowAllOption(options.length);
+
+ const { sortedOptions, toggleItem, handleSelectAll } = useChainFilterLogic({
options,
value,
- onChange,
- limit
+ onChange: handleChange,
+ limit,
+ normalizeFullSelectionToAll: false
});
+ const isNoFilter = value.length === 0;
+ const isAllChecked = limit > 0 && value.length === limit;
+ const clearActionDisabled = isNoFilter;
+ const clearActionLabel = isNoFilter ? 'No filter (All)' : 'Clear to All';
+ const selectionSummary = isNoFilter
+ ? 'No filter'
+ : isAllChecked
+ ? 'All selected'
+ : `${value.length} / ${limit} Selected`;
+ const regionAriaLabel = title ? `${title} chain filter options` : 'Chain filter options';
return (
-
-
-
-
- All
-
-
-
- {value.length || '0'} / {limit} Selected
-
-
-
+
+ {showAllOption && (
+ <>
+
+
+ {clearActionLabel}
+
+ {selectionSummary}
+
+
+
+ )}
{sortedOptions.map(({ value: optionValue, label }) => {
const isSelected = value.includes(optionValue as number);
+ const isDisabled = value.length === limit && !isSelected;
return (
-
toggleItem(optionValue as number)}
+ disabled={isDisabled}
className={cn(
- 'flex h-[3.125rem] items-center gap-[0.62rem]',
- value.length < limit || isSelected ? 'cursor-pointer' : 'cursor-not-allowed'
+ 'flex h-[3.125rem] items-center gap-[0.62rem] rounded-sm text-left transition-colors duration-200',
+ optionFocusClassName,
+ isDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'
)}
+ aria-pressed={isSelected}
+ aria-disabled={isDisabled}
>
{label}
-
-
+
+
);
})}
+ {!showAllOption && (
+ <>
+
+ {selectionSummary}
+
+
+
+ {clearActionLabel}
+
+
+ )}
);
};
diff --git a/packages/web/src/components/data-table/MobileFilterToolbar/TableDateFilter.tsx b/packages/web/src/components/data-table/MobileFilterToolbar/TableDateFilter.tsx
index 34b4fd9..530045d 100644
--- a/packages/web/src/components/data-table/MobileFilterToolbar/TableDateFilter.tsx
+++ b/packages/web/src/components/data-table/MobileFilterToolbar/TableDateFilter.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
import { Calendar } from '@/components/ui/calendar';
-import type { DateRange, SelectRangeEventHandler } from 'react-day-picker';
+import type { DateRange } from 'react-day-picker';
interface TableDateFilterProps {
date?: DateRange;
@@ -10,8 +10,8 @@ interface TableDateFilterProps {
}
const TableDateFilter = ({ date, onChange }: TableDateFilterProps) => {
- const handleChange = useCallback
(
- (selectedDate) => {
+ const handleChange = useCallback(
+ (selectedDate: DateRange | undefined) => {
if (!selectedDate) return;
const { from, to } = selectedDate;
if (onChange) {
@@ -25,15 +25,15 @@ const TableDateFilter = ({ date, onChange }: TableDateFilterProps) => {
);
return (
-
+
);
diff --git a/packages/web/src/components/data-table/MobileFilterToolbar/TableMultiSelectFilter.tsx b/packages/web/src/components/data-table/MobileFilterToolbar/TableMultiSelectFilter.tsx
index 47b22f2..e947c3e 100644
--- a/packages/web/src/components/data-table/MobileFilterToolbar/TableMultiSelectFilter.tsx
+++ b/packages/web/src/components/data-table/MobileFilterToolbar/TableMultiSelectFilter.tsx
@@ -1,7 +1,10 @@
-import { CheckIcon } from '@radix-ui/react-icons';
+import { useState, useEffect } from 'react';
+import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+import { shouldShowAllOption } from '@/components/data-table/filter-option-policy';
import type { TableFilterOption } from '@/types/helper';
@@ -10,61 +13,133 @@ interface TableMultiSelectFilterProps
{
value: T[];
onChange: (newValue: T[]) => void;
onClearFilters?: () => void;
+ showAllOption?: boolean;
+ title?: string;
}
const TableMultiSelectFilter = ({
options,
- value,
+ value: valueProp,
onChange,
- onClearFilters
+ onClearFilters,
+ showAllOption,
+ title
}: TableMultiSelectFilterProps) => {
- const toggleItem = (itemValue: T) => {
- if (value.includes(itemValue)) {
- onChange(value.filter((s) => s !== itemValue));
+ // Local state for immediate visual feedback, avoiding nuqs startTransition flicker
+ const [value, setValue] = useState(valueProp);
+
+ useEffect(() => {
+ setValue(valueProp);
+ }, [valueProp]);
+
+ const handleChange = (newValue: T[]) => {
+ setValue(newValue);
+ onChange(newValue);
+ };
+
+ const handleClearWithLocal = () => {
+ setValue([]);
+ if (onClearFilters) {
+ onClearFilters();
} else {
- onChange([...(value || []), itemValue]);
+ onChange([]);
}
};
+ const optionFocusClassName = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50';
+ const actionFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
+ const safeValue = value ?? [];
+ const groupAriaLabel = title ? `${title} filter options` : 'Filter options';
+
+ const toggleItem = (itemValue: T) => {
+ const next = safeValue.includes(itemValue)
+ ? safeValue.filter((s) => s !== itemValue)
+ : [...safeValue, itemValue];
+ handleChange(next);
+ };
+
+ const isAllSelected = safeValue.length === 0;
+ const resolvedShowAllOption = showAllOption ?? shouldShowAllOption(options.length);
+ const clearActionDisabled = isAllSelected;
return (
<>
-
+
+ {resolvedShowAllOption && (
+ <>
+
+
+ {isAllSelected ? 'No filter (All)' : 'Clear to All'}
+
+ {isAllSelected ? 'No filter' : `${safeValue.length} / ${options.length} Selected`}
+
+
+
+ )}
{options.map(({ value: optionValue, label }) => {
- const isSelected = value.includes(optionValue as T);
+ const isSelected = safeValue.includes(optionValue as T);
return (
-
toggleItem(optionValue as T)}
- className="flex items-center gap-2 py-[0.62rem]"
+ role="checkbox"
+ aria-checked={isSelected}
+ className={cn(
+ 'flex w-full items-center gap-2 rounded-md px-2 py-[0.62rem] text-left transition-colors duration-200',
+ optionFocusClassName,
+ isSelected && 'bg-accent'
+ )}
>
-
-
+
+
{label}
-
+
);
})}
-
- Reset
-
+ {!resolvedShowAllOption && onClearFilters && (
+
+ {isAllSelected ? 'No filter (All)' : 'Clear to All'}
+
+ )}
);
diff --git a/packages/web/src/components/data-table/MobileFilterToolbar/index.tsx b/packages/web/src/components/data-table/MobileFilterToolbar/index.tsx
index 9edad9d..305b93f 100644
--- a/packages/web/src/components/data-table/MobileFilterToolbar/index.tsx
+++ b/packages/web/src/components/data-table/MobileFilterToolbar/index.tsx
@@ -102,6 +102,19 @@ const TableFilterToolbar = ({ chains, className, hideDappFilter }: TableFilterTo
});
}, []);
+ const handleStatusChangeAndBack = useCallback(
+ (newStatuses: number[]) => {
+ handleStatusChange(newStatuses);
+ handleFilterBack();
+ },
+ [handleStatusChange, handleFilterBack]
+ );
+
+ const handleResetStatusAndBack = useCallback(() => {
+ handleResetStatus();
+ handleFilterBack();
+ }, [handleResetStatus, handleFilterBack]);
+
const selectedNumber = useMemo(() => {
const dappNumber = selectedDapps?.length ? 1 : 0;
const dateNumber = dateFrom || dateTo ? 1 : 0;
@@ -123,137 +136,155 @@ const TableFilterToolbar = ({ chains, className, hideDappFilter }: TableFilterTo
selectedSourceChains,
selectedTargetChains
]);
+ const triggerFocusClassName =
+ 'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50';
return (
<>
-
Messages
-
Messages
+
setOpen(true)}
- className="flex items-center gap-[0.31rem] border-none text-sm font-normal"
+ aria-haspopup="dialog"
+ aria-expanded={open}
+ className={cn(
+ 'flex items-center gap-[0.31rem] rounded-full border px-3 py-1.5 text-sm font-normal transition-colors',
+ triggerFocusClassName,
+ selectedNumber > 0
+ ? 'border-primary/50 bg-primary/10 text-foreground'
+ : 'border-border text-secondary-foreground'
+ )}
>
-
- Filters {selectedNumber ? `(${selectedNumber})` : ''}
-
-
+
+
Filters
+ {selectedNumber > 0 && (
+
+ {selectedNumber}
+
+ )}
+
-
- {
-
- {currentFilterInfo?.value === CURRENT_FILTERS.DEFAULT && (
- <>
- {!hideDappFilter && (
- <>
-
-
-
- )}
-
-
-
-
- {!dateFrom && !dateTo
- ? 'All'
- : `${dateFrom?.toLocaleDateString() ?? ''} - ${dateTo?.toLocaleDateString() ?? ''}`}
-
-
-
-
-
-
-
-
- Reset
-
-
- )}
+
+ {/* Header */}
+
+
+ {/* Scrollable content */}
+
+ {currentFilterInfo?.value === CURRENT_FILTERS.DEFAULT && (
+ <>
+ {!hideDappFilter && (
+ <>
+
+ {!dateFrom && !dateTo
+ ? 'All'
+ : `${dateFrom?.toLocaleDateString() ?? ''} - ${dateTo?.toLocaleDateString() ?? ''}`}
+
+
- }
- {
-
+ Reset
+
+
+ )}
+
+ {currentFilterInfo?.value === CURRENT_FILTERS.DAPP && (
+
diff --git a/packages/web/src/components/data-table/columns.tsx b/packages/web/src/components/data-table/columns.tsx
index ce52b9a..3bd7eda 100644
--- a/packages/web/src/components/data-table/columns.tsx
+++ b/packages/web/src/components/data-table/columns.tsx
@@ -1,175 +1,281 @@
'use client';
+import Image from 'next/image';
import Link from 'next/link';
+import { ExternalLink } from 'lucide-react';
import MessageStatus from '@/components/message-status';
import { chains } from '@/config/chains';
-import { protocols } from '@/config/protocols';
-import { formatTimeAgo, formatTimeDifference } from '@/utils';
-import ChainTxDisplay from '@/components/chain-tx-display';
-import BlockchainAddressLink from '@/components/blockchain-address-link';
+import AddressDisplayFilterDappRemark from '@/components/address-display-filter-dapp-remark';
+import { formatTimeAgo, formatTimeAgoShort, toShortText } from '@/utils';
import { Skeleton } from '@/components/ui/skeleton';
import { CodeFont } from '@/config/font';
import { cn } from '@/lib/utils';
import { getNetwork } from '@/utils/network';
+import ClipboardIconButton from '@/components/clipboard-icon-button';
import type { ChAIN_ID } from '@/types/chains';
-import type { MessagePort } from '@/graphql/type';
+import type { CompositeMessage } from '@/types/messages';
+
+type ColumnDataIndex =
+ | 'status'
+ | 'msgId'
+ | 'fromChainId'
+ | 'toChainId'
+ | 'fromDapp'
+ | 'transactionFrom'
+ | 'transactionHash'
+ | 'targetTransactionHash'
+ | 'age';
+
+type ColumnRenderValue = string | undefined;
export type Column = {
- dataIndex: string;
+ dataIndex: ColumnDataIndex;
title: string;
width?: string;
- render: (value: any, record: MessagePort, index: number, network: string) => React.ReactNode;
+ hiddenClass?: string;
+ align?: 'left' | 'right' | 'center';
+ render: (
+ value: ColumnRenderValue,
+ record: CompositeMessage,
+ index: number,
+ network: string
+ ) => React.ReactNode;
};
+function findChain(chainId: string | undefined) {
+ if (!chainId) return undefined;
+ return chains?.find((c) => c.id === (Number(chainId) as unknown as ChAIN_ID));
+}
+
+function buildTxLink(chain: ReturnType, txHash: string) {
+ if (!chain?.blockExplorers?.default?.url) return undefined;
+ if (chain.name.includes('Tron')) {
+ return `${chain.blockExplorers.default.url}/#/transaction/${txHash.replace('0x', '')}`;
+ }
+ return `${chain.blockExplorers.default.url}/tx/${txHash}`;
+}
+
+function renderChainCell(chainId: string | undefined) {
+ const chain = findChain(chainId);
+ if (!chain) return null;
+
+ return (
+
+
+ {chain.name}
+
+
+ );
+}
+
export const columns: Column[] = [
{
dataIndex: 'status',
title: 'Status',
- width: '6rem',
- render(value, record) {
+ width: '5.5rem',
+ render(_value, record) {
if (record?.status === -1) {
return
+
+ {toShortText({ text: value, frontLength: 6, backLength: 4 })}
+
+
);
}
},
{
- dataIndex: 'protocol',
- title: 'Protocol',
- width: '5rem',
+ dataIndex: 'fromChainId',
+ title: 'Source',
+ width: '7rem',
render(value, record) {
if (record?.status === -1) {
return
- {protocol.title}
-
- );
- }
+ return renderChainCell(value);
}
},
{
- dataIndex: 'sender',
- title: 'Original Sender',
- width: '8rem',
- render(value, record, index, network) {
+ dataIndex: 'toChainId',
+ title: 'Target',
+ width: '7rem',
+ render(value, record) {
if (record?.status === -1) {
return -- ;
+
+ const href = `/dapp/${encodeURIComponent(value)}?network=${getNetwork(network)}`;
+
return (
- toShortText({ text: address, frontLength: 6, backLength: 4 })}
+ />
+
);
}
},
{
- dataIndex: 'targetTransactionHash',
- title: 'Target Tx Hash',
+ dataIndex: 'transactionFrom',
+ title: 'Original Sender',
width: '8rem',
- render(value, record) {
+ render(value, record, _index, network) {
if (record?.status === -1) {
return -- ;
+
+ const href = `/sender/${encodeURIComponent(value)}?network=${getNetwork(network)}`;
+
+ return (
+ -- ;
+ const chain = findChain(record?.fromChainId);
+ const href = buildTxLink(chain, value);
+ const short = toShortText({ text: value, frontLength: 6, backLength: 4 });
+ if (href) {
+ return (
+
+ {short}
+
);
- const href = `/dapp/${value}?network=${getNetwork(network)}`;
- return -- ;
+ const chain = findChain(record?.toChainId);
+ const href = buildTxLink(chain, value);
+ const short = toShortText({ text: value, frontLength: 6, backLength: 4 });
+ if (href) {
+ return (
+
+ {short}
+
+ );
}
},
{
- dataIndex: 'timeSpent',
- title: 'Time Spent',
- width: '6rem',
-
- render(value, record) {
+ dataIndex: 'age',
+ title: 'Age',
+ width: '5rem',
+ align: 'right',
+ render(_value, record) {
if (record?.status === -1) {
return
+ {shortAge}
+
+ );
}
}
];
diff --git a/packages/web/src/components/data-table/filter-option-policy.test.ts b/packages/web/src/components/data-table/filter-option-policy.test.ts
new file mode 100644
index 0000000..91a5104
--- /dev/null
+++ b/packages/web/src/components/data-table/filter-option-policy.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+
+import { MULTISELECT_ALL_THRESHOLD, shouldShowAllOption } from './filter-option-policy';
+
+describe('filter-option-policy', () => {
+ it('hides All option below threshold', () => {
+ expect(shouldShowAllOption(MULTISELECT_ALL_THRESHOLD - 1)).toBe(false);
+ });
+
+ it('shows All option at threshold', () => {
+ expect(shouldShowAllOption(MULTISELECT_ALL_THRESHOLD)).toBe(true);
+ });
+
+ it('shows All option above threshold', () => {
+ expect(shouldShowAllOption(MULTISELECT_ALL_THRESHOLD + 3)).toBe(true);
+ });
+});
diff --git a/packages/web/src/components/data-table/filter-option-policy.ts b/packages/web/src/components/data-table/filter-option-policy.ts
new file mode 100644
index 0000000..515373c
--- /dev/null
+++ b/packages/web/src/components/data-table/filter-option-policy.ts
@@ -0,0 +1,5 @@
+export const MULTISELECT_ALL_THRESHOLD = 6;
+
+export function shouldShowAllOption(optionsCount: number): boolean {
+ return optionsCount >= MULTISELECT_ALL_THRESHOLD;
+}
diff --git a/packages/web/src/components/data-table/hooks/useChainFilterLogic.ts b/packages/web/src/components/data-table/hooks/useChainFilterLogic.ts
index 25b3e0d..a6d8929 100644
--- a/packages/web/src/components/data-table/hooks/useChainFilterLogic.ts
+++ b/packages/web/src/components/data-table/hooks/useChainFilterLogic.ts
@@ -1,6 +1,5 @@
import { useMemo, useCallback } from 'react';
-import type { CheckedState } from '@radix-ui/react-checkbox';
import type { TableFilterOption } from '@/types/helper';
type UseChainFilterLogicType = {
@@ -8,50 +7,68 @@ type UseChainFilterLogicType = {
value: number[];
onChange: (newValue: number[]) => void;
limit: number;
+ normalizeFullSelectionToAll?: boolean;
};
-function useChainFilterLogic({ options, value, onChange, limit }: UseChainFilterLogicType) {
+function useChainFilterLogic({
+ options,
+ value,
+ onChange,
+ limit,
+ normalizeFullSelectionToAll = true
+}: UseChainFilterLogicType) {
const sortedOptions = useMemo(() => {
return [...options].sort((a, b) => (a?.label as string)?.localeCompare(b.label as string));
}, [options]);
const toggleItem = useCallback(
(itemValue: number) => {
- if (value.length >= limit && !value.includes(itemValue)) {
+ // Empty value means "All" (no filter). Picking any option switches to custom filtering.
+ if (value.length === 0) {
+ onChange([itemValue]);
return;
}
+
if (value.includes(itemValue)) {
onChange(value.filter((s) => s !== itemValue));
- } else {
- onChange([...value, itemValue]);
+ return;
}
+
+ if (value.length >= limit) return;
+
+ const next = [...value, itemValue];
+ // If user ends up selecting every option, normalize back to "All" to keep URL/state clean.
+ if (normalizeFullSelectionToAll && limit > 0 && options.length === limit && next.length === limit) {
+ onChange([]);
+ return;
+ }
+
+ onChange(next);
},
- [value, onChange, limit]
+ [value, onChange, limit, options.length, normalizeFullSelectionToAll]
);
const handleSelectAll = useCallback(() => {
- if (value.length === limit) {
- onChange([]);
- } else {
- const newValue = new Set(value);
- for (const option of sortedOptions) {
- if (newValue.size >= limit) break;
- newValue.add(option.value as number);
- }
- onChange(Array.from(newValue));
- }
- }, [value, onChange, limit, sortedOptions]);
+ // "All" is represented by an empty array.
+ onChange([]);
+ }, [onChange]);
+
+ const checkedAll = useMemo(() => {
+ return (
+ value.length === 0 ||
+ (normalizeFullSelectionToAll && options.length === limit && value.length === limit)
+ );
+ }, [value, limit, options.length, normalizeFullSelectionToAll]);
- const checkedAll = useMemo(() => {
- if (value.length === limit) return true;
- if (value.length !== 0) return 'indeterminate';
- return false;
- }, [value, limit]);
+ const indeterminateAll = useMemo(() => {
+ return !checkedAll && value.length > 0 && value.length < limit;
+ }, [checkedAll, value.length, limit]);
return {
sortedOptions,
toggleItem,
handleSelectAll,
- checkedAll
+ checkedAll,
+ indeterminateAll
};
}
diff --git a/packages/web/src/components/data-table/hooks/useFilter.ts b/packages/web/src/components/data-table/hooks/useFilter.ts
index e9e8bd8..be1d924 100644
--- a/packages/web/src/components/data-table/hooks/useFilter.ts
+++ b/packages/web/src/components/data-table/hooks/useFilter.ts
@@ -1,5 +1,4 @@
import { useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
import useQueryParamState from '@/hooks/useQueryParamState';
@@ -7,101 +6,74 @@ import type { DateRange } from 'react-day-picker';
import type { DAppConfigKeys } from '@/utils';
function useFilter() {
- const queryClient = useQueryClient();
-
const {
setSelectedDapps,
setSelectedStatuses,
- setDateFrom,
- setDateTo,
+ setDateRange,
setSelectedSourceChains,
setSelectedTargetChains
} = useQueryParamState();
const handleDappChange = useCallback(
(newDapps: DAppConfigKeys[]) => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setSelectedDapps(newDapps);
+ // Empty array means "All" (no filter) -> remove query param to keep URL clean.
+ setSelectedDapps(newDapps.length ? newDapps : null);
},
- [setSelectedDapps, queryClient]
+ [setSelectedDapps]
);
const handleStatusChange = useCallback(
(newStatuses: number[]) => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setSelectedStatuses(newStatuses);
+ // Empty array means "All" (no filter) -> remove query param to keep URL clean.
+ setSelectedStatuses(newStatuses.length ? newStatuses : null);
},
- [setSelectedStatuses, queryClient]
+ [setSelectedStatuses]
);
const handleDateChange = useCallback(
(newDate: DateRange) => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setDateFrom(newDate?.from ?? null);
- setDateTo(newDate?.to ?? null);
+ setDateRange(newDate?.from ?? null, newDate?.to ?? null);
},
- [setDateFrom, setDateTo, queryClient]
+ [setDateRange]
);
const handleSourceChainChange = useCallback(
(newSourceChains: number[]) => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setSelectedSourceChains(newSourceChains);
+ // Empty array means "All" (no filter) -> remove query param to keep URL clean.
+ setSelectedSourceChains(newSourceChains.length ? newSourceChains : null);
},
- [setSelectedSourceChains, queryClient]
+ [setSelectedSourceChains]
);
const handleTargetChainChange = useCallback(
(newTargetChains: number[]) => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setSelectedTargetChains(newTargetChains);
+ // Empty array means "All" (no filter) -> remove query param to keep URL clean.
+ setSelectedTargetChains(newTargetChains.length ? newTargetChains : null);
},
- [setSelectedTargetChains, queryClient]
+ [setSelectedTargetChains]
);
const handleReset = useCallback(() => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
setSelectedDapps(null);
setSelectedStatuses(null);
setSelectedSourceChains(null);
setSelectedTargetChains(null);
- setDateFrom(null);
- setDateTo(null);
+ setDateRange(null, null);
}, [
setSelectedDapps,
- setDateFrom,
- setDateTo,
+ setDateRange,
setSelectedSourceChains,
setSelectedStatuses,
- setSelectedTargetChains,
- queryClient
+ setSelectedTargetChains
]);
const handleResetStatus = useCallback(() => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setSelectedStatuses([]);
- }, [setSelectedStatuses, queryClient]);
+ setSelectedStatuses(null);
+ }, [setSelectedStatuses]);
const handleResetDapps = useCallback(() => {
- queryClient.resetQueries({
- queryKey: ['messagePort']
- });
- setSelectedDapps([]);
- }, [setSelectedDapps, queryClient]);
+ setSelectedDapps(null);
+ }, [setSelectedDapps]);
return {
handleDappChange,
diff --git a/packages/web/src/components/data-table/index.test.tsx b/packages/web/src/components/data-table/index.test.tsx
new file mode 100644
index 0000000..1d72559
--- /dev/null
+++ b/packages/web/src/components/data-table/index.test.tsx
@@ -0,0 +1,143 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import DataTable from './index';
+
+import type { CompositeMessage } from '@/types/messages';
+
+const { pushMock } = vi.hoisted(() => ({
+ pushMock: vi.fn()
+}));
+
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({
+ push: pushMock
+ })
+}));
+
+vi.mock('next/font/google', () => ({
+ Geist: () => ({
+ className: '',
+ variable: ''
+ }),
+ JetBrains_Mono: () => ({
+ className: '',
+ variable: ''
+ })
+}));
+
+const message = {
+ msgId: '0xdaf33c177c251e906a3cdf38572b049fcc49403a27deac44635bf675611899b4',
+ protocol: 'ormp',
+ status: 3,
+ transactionHash: '0x530d7d7273781f2fd9a6afea43bbcdc4db1824794f730d6b631cf567e44feef9',
+ targetTransactionHash: '0x18a9251d1989b4f12953f8aab32311f273737c1386a78135c5e16771eb823bbf',
+ transactionFrom: '0xebd9a48ed1128375eb4383ed4d53478b4fd85a8d',
+ fromChainId: '46',
+ toChainId: '1',
+ fromDapp: '0x682294d1c00a9ca13290b53b7544b8f734d6501f',
+ toDapp: '0x02e5c0a36fb0c83ccebcd4d6177a7e223d6f0b7c',
+ portAddress: '0x2cd1867fb8016f93710b6386f7f9f1d540a60812',
+ message: '0x',
+ params: '0x',
+ sentBlockTimestampSec: 1700000000,
+ sent: {}
+} as unknown as CompositeMessage;
+
+describe('DataTable row interaction', () => {
+ beforeEach(() => {
+ pushMock.mockReset();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ it('does not trigger row navigation when Enter is pressed on nested link', () => {
+ render(
+ {}}
+ onNextPageClick={() => {}}
+ />
+ );
+
+ const table = screen.getByRole('table');
+ const sourceTxLink = within(table).getByRole('link', { name: /0x530d/i });
+ sourceTxLink.focus();
+ fireEvent.keyDown(sourceTxLink, { key: 'Enter' });
+
+ expect(pushMock).not.toHaveBeenCalled();
+ });
+
+ it('still supports row keyboard navigation when row itself is focused', () => {
+ render(
+ {}}
+ onNextPageClick={() => {}}
+ />
+ );
+
+ const table = screen.getByRole('table');
+ const rowLink = within(table).getByRole('link', { name: /open message .* details/i });
+ rowLink.focus();
+ fireEvent.keyDown(rowLink, { key: 'Enter' });
+
+ expect(pushMock).toHaveBeenCalledWith(
+ '/message/0xdaf33c177c251e906a3cdf38572b049fcc49403a27deac44635bf675611899b4?network=mainnet'
+ );
+ });
+
+ it('keeps table body visible while loading when real data exists', () => {
+ const { container } = render(
+ {}}
+ onNextPageClick={() => {}}
+ />
+ );
+
+ const tableBody = container.querySelector('tbody');
+ expect(tableBody).not.toBeNull();
+ expect(tableBody?.className.includes('opacity-100')).toBe(true);
+ expect(tableBody?.className.includes('opacity-0')).toBe(false);
+ });
+
+ it('renders original sender link to sender page', () => {
+ const { container } = render(
+ {}}
+ onNextPageClick={() => {}}
+ />
+ );
+
+ const senderLink = container.querySelector(
+ `a[title="${message.transactionFrom}"]`
+ );
+
+ expect(senderLink).not.toBeNull();
+ expect(senderLink?.getAttribute('href')).toBe(
+ `/sender/${encodeURIComponent(message.transactionFrom)}?network=mainnet`
+ );
+ });
+});
diff --git a/packages/web/src/components/data-table/index.tsx b/packages/web/src/components/data-table/index.tsx
index d9b24bc..b2dd90e 100644
--- a/packages/web/src/components/data-table/index.tsx
+++ b/packages/web/src/components/data-table/index.tsx
@@ -1,6 +1,7 @@
'use client';
import { memo, useCallback, useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import { Inbox } from 'lucide-react';
import {
Table,
@@ -17,67 +18,101 @@ import {
PaginationNext,
PaginationPrevious
} from '@/components/ui/pagination';
-import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';
+import { getNetwork } from '@/utils/network';
+import MessageCard from '@/components/message/message-card';
import { columns } from './columns';
-import DesktopFilterToolbar from './DesktopFilterToolbar';
-import MobileFilterToolbar from './MobileFilterToolbar';
-import type { CHAIN } from '@/types/chains';
-import type { MessagePort, MessagePortQueryParams } from '@/graphql/type';
-
-const fadeInOut = {
- hidden: { opacity: 0 },
- visible: { opacity: 1, transition: { duration: 0.5 } }
-};
+import type { CompositeMessage } from '@/types/messages';
interface TableProps {
loading: boolean;
- dataSource: MessagePort[];
+ network: string;
+ dataSource: CompositeMessage[];
+ pageSize: number;
+ offset: number;
+ onPreviousPageClick: () => void;
+ onNextPageClick: () => void;
+ onResetFilters?: () => void;
}
-interface TableProps {
- hideDappFilter?: boolean;
- loading: boolean;
- network: string;
- chains: CHAIN[];
- dataSource: MessagePort[];
- offset: MessagePortQueryParams['offset'];
- onPreviousPageClick: React.MouseEventHandler;
- onNextPageClick: React.MouseEventHandler;
+function isInteractiveDescendant(target: EventTarget | null, container: HTMLElement): boolean {
+ if (!(target instanceof Element)) return false;
+ const interactive = target.closest('a,button,input,select,textarea,[role="link"],[data-interactive]');
+ return Boolean(interactive && interactive !== container);
+}
+
+function getColumnValue(message: CompositeMessage, dataIndex: string): string | undefined {
+ if (dataIndex === 'age') {
+ return typeof message.sentBlockTimestampSec === 'undefined'
+ ? undefined
+ : String(message.sentBlockTimestampSec);
+ }
+
+ const value = message[dataIndex as keyof CompositeMessage];
+ if (typeof value === 'string') return value;
+ if (typeof value === 'number') return String(value);
+ return undefined;
}
const DataTable = ({
- hideDappFilter,
loading,
network,
- chains,
dataSource,
+ pageSize,
offset,
onPreviousPageClick,
- onNextPageClick
+ onNextPageClick,
+ onResetFilters
}: TableProps) => {
+ const router = useRouter();
const [activePageType, setActivePageType] = useState<'previous' | 'next' | ''>('');
+ const realRowCount = dataSource.filter((message) => message.status !== -1).length;
+ const visibleRowCount = realRowCount > 0 ? realRowCount : dataSource.length;
- const showPagination = Boolean(dataSource?.length || offset !== 0);
+ const showPagination = Boolean(visibleRowCount || offset !== 0);
const enablePreviousPage = offset !== 0;
- const enableNextPage = Boolean(dataSource?.length);
+ const enableNextPage = !loading && realRowCount >= pageSize;
+ const hasData = dataSource?.length > 0;
+
+ const paginationLabel = !enableNextPage && offset > 0
+ ? 'End of results'
+ : !enableNextPage && offset === 0
+ ? `${visibleRowCount} message${visibleRowCount === 1 ? '' : 's'}`
+ : `Showing ${offset + 1}–${offset + visibleRowCount}`;
+
+ const handlePreviousPageClick = useCallback(() => {
+ setActivePageType('previous');
+ onPreviousPageClick();
+ }, [onPreviousPageClick]);
- const handlePreviousPageClick = useCallback>(
- (e) => {
- setActivePageType('previous');
- onPreviousPageClick(e);
+ const handleNextPageClick = useCallback(() => {
+ setActivePageType('next');
+ onNextPageClick();
+ }, [onNextPageClick]);
+
+ const handleRowClick = useCallback(
+ (message: CompositeMessage, event?: React.MouseEvent) => {
+ if (message.status === -1) return;
+ if (event && isInteractiveDescendant(event.target, event.currentTarget)) return;
+ router.push(`/message/${message.msgId}?network=${getNetwork(network)}`);
},
- [onPreviousPageClick]
+ [router, network]
);
- const handleNextPageClick = useCallback>(
- (e) => {
- setActivePageType('next');
- onNextPageClick(e);
+ const handleRowKeyDown = useCallback(
+ (e: React.KeyboardEvent, message: CompositeMessage) => {
+ if (message.status === -1) return;
+ if (e.defaultPrevented || isInteractiveDescendant(e.target, e.currentTarget)) return;
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleRowClick(message);
+ }
},
- [onNextPageClick]
+ [handleRowClick]
);
useEffect(() => {
@@ -87,124 +122,166 @@ const DataTable = ({
}, [loading]);
return (
-
-
-
-
-
-
-
- {columns.map((column, index) => (
-
- {column.title}
-
- ))}
-
-
-
- {dataSource?.length ? (
- dataSource.map((message) => (
-
- {columns.map((column, index) => (
-
-
- {column.render(
- (message as unknown as any)[column.dataIndex],
- message,
- index,
- network
+
+ {/* Mobile: Card list */}
+
+ {hasData ? (
+ dataSource.map((message) =>
+ message.status === -1 ? (
+
+
+ ) : (
+
+ )
+ )
+ ) : (
+
+
+
+
No messages found
+
Try adjusting your filters or check back later
+ {onResetFilters && (
+
+ Reset Filters
+
+ )}
+
+ )}
+
+
+ {/* Desktop: Table */}
+
+
+
+
+ {columns.map((column, index) => (
+
+ {column.title}
+
+ ))}
+
+
+
+ {hasData ? (
+ dataSource.map((message) => (
+ handleRowClick(message, e)}
+ onKeyDown={(e) => handleRowKeyDown(e, message)}
+ tabIndex={message.status !== -1 ? 0 : undefined}
+ >
+ {columns.map((column, index) => (
+
-
- ))}
+ style={column.width ? { minWidth: column.width } : undefined}
+ >
+
+ {column.render(
+ getColumnValue(message, column.dataIndex),
+ message,
+ 0,
+ network
+ )}
+
+
+ ))}
+
+ ))
+ ) : (
+
+
+
+
+
+
No messages found
+
Try adjusting your filters or check back later
+ {onResetFilters && (
+
+ Reset Filters
+
+ )}
+
- ))
- ) : (
-
-
- Sorry, there's no data available with your current filters selection, please
- try a different one.
-
-
- )}
-
-
+ )}
+
+
+
-
- {
-
+
+
+ {paginationLabel}
+
+
+
+
- }
- {
-
+ {paginationLabel}
+
+
- }
-
-
+
+
+
-
+
{title}
-
-
+
+
{description}
= ({ url, size = 16
return (
-
-