feat: add transaction page to view all messages in a tx by yorhodes · Pull Request #261 · hyperlane-xyz/hyperlane-explorer

yorhodes · 2026-01-28T23:46:30Z

Summary

Adds a /tx/[txHash] page that displays all Hyperlane messages dispatched in a single origin transaction. This is useful for multi-message transactions like superswaps (warp transfer + ICA calls).

Features

Transaction page (/tx/[txHash]) - Shows origin transaction info and a list of all messages with their status
Auto-redirect from search - When searching for a message ID or tx hash:
- Single result → redirects to /message/[msgId]
- Multiple results matching origin tx hash → redirects to /tx/[txHash]
"View all messages" link - Message detail page shows a link when the transaction contains multiple messages
Smooth redirect UX - Shows "Found it! Redirecting..." state instead of flashing results

Screenshots

Transaction page with multiple messages:

Shows origin chain, tx hash, sender, mailbox, time, and block
Lists each message with type detection (Warp Transfer, ICA Commitment, ICA Reveal, ICA Calls)
Displays delivery status and duration for each message

Stacked on #259 (feat/ica-decoding)

vercel · 2026-01-28T23:46:34Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
hyperlane-explorer	Ready	Preview, Comment	Jan 29, 2026 5:29pm

paulbalaji · 2026-01-29T10:39:29Z

src/components/search/SearchStates.tsx

+              <SpinnerIcon width={40} height={40} />
+            </div>
+            <div className="mt-4 text-center font-light leading-loose text-gray-700">
+              Found it! Redirecting...


in practice this text never actually shows up and it just flashes me from the search page to the tx page

paulbalaji · 2026-01-29T10:40:32Z

src/features/messages/MessageDetails.tsx

+            >
+              View all {txMessageCount} messages in tx →
+            </Link>
+          )}


the msg count is inaccurate (probs need to increase the fetch size or something?)

src/features/messages/queries/useMessageQuery.ts

src/features/messages/MessageSearch.tsx

src/features/transactions/TransactionDetails.tsx

src/features/transactions/MessageSummaryRow.tsx

paulbalaji · 2026-01-29T11:08:48Z

codex review

[P1] ICA decode can throw and crash render for valid CALLS messages — src/features/messages/ica.ts:136-138.
BigNumber.from(body).isZero() throws for payloads > 32 bytes (common for ICA CALLS) and it runs outside the try/catch, so any such message blows up IcaDetailsCard, MessageSummaryRow, and debugMessage. Suggest moving the zero check inside the try and using a safe hex check (e.g. const hex = strip0x(body); if (!hex || /^0*$/.test(hex)) return null;).

[P2] Search redirect can send users to an empty /tx page when results only come from PI — src/features/messages/MessageSearch.tsx:145-158 + src/features/transactions/useTransactionMessagesQuery.ts:24-42.
The redirect uses messageListResult (PI if GraphQL is empty), but the /tx page only queries GraphQL. If PI returns multiple messages matching the origin tx hash, you’ll redirect to a tx page that shows “No messages found.” Gate the tx redirect on isMessagesFound (GraphQL) or add PI support to the tx view.

[P2] Auto‑redirect triggers even with no user input — src/features/messages/MessageSearch.tsx:145-152.
When the default “latest messages” view has exactly one result, the page navigates away immediately. Consider requiring hasInput (or a valid hash match) before auto‑redirecting.

[P3] Tx message count is capped at 10, so the “View all N messages” link can undercount — src/features/messages/queries/useMessageQuery.ts:153-189.
If a transaction has >10 messages, the UI shows “View all 10…” even though there are more. Consider a count‑only query or a higher limit (or change the copy to avoid implying a full count).

[P3] Related COMMITMENT/REVEAL lookup is limited to 10 messages — src/features/messages/ica.ts:823-855.
In large fan‑out txs, the related ICA message can be missed, showing incorrect “pending” status and missing cross‑links. Raise the limit or query by commitment hash instead of scanning a capped list.

- Add /tx/[txHash] page showing all messages dispatched in a transaction - Add auto-redirect from search: single result → message page, tx hash match → tx page - Add 'View all messages in tx' link on message detail page when tx has multiple messages - Add SearchRedirecting state for smoother UX during redirects - Add useTransactionMessageCount hook for efficient message count queries - Make TransactionCard and KeyValueRow more responsive

- P1: Fix ICA decode crash for payloads >32 bytes by moving zero check inside try block and using safe regex instead of BigNumber.isZero() - P2: Prevent auto-redirect on homepage when latest messages has 1 result - P2: Gate tx page redirect on GraphQL results (not PI) since tx page only queries GraphQL - P3: Increase message count query limit from 10 to 1000 for accurate 'View all N messages' link - P3: Increase related ICA message lookup limit from 10 to 1000 to find related COMMITMENT/REVEAL in large fan-out transactions

Xaroz · 2026-01-30T16:07:20Z

src/features/messages/MessageSearch.tsx

+  const redirectUrl = (() => {
+    // Wait for queries to complete
+    if (!hasAllRun || isAnyFetching) return null;
+
+    // Don't redirect without user input (prevents redirect on homepage with latest messages)
+    if (!hasInput) return null;
+
+    // Don't redirect if filters are applied
+    if (originChainFilter || destinationChainFilter || startTimeFilter || endTimeFilter)
+      return null;
+
+    // Need at least one result
+    if (!messageListResult.length) return null;
+
+    const firstMessage = messageListResult[0];
+
+    // Single result → always go to message page
+    if (messageListResult.length === 1) {
+      return `/message/${firstMessage.msgId}`;
+    }
+
+    // Multiple results + origin tx hash match → go to tx page
+    // Only redirect if GraphQL found results (tx page uses GraphQL only, not PI)
+    const inputLower = sanitizedInput.toLowerCase();
+    if (isMessagesFound && firstMessage.origin?.hash?.toLowerCase() === inputLower) {
+      return `/tx/${firstMessage.origin.hash}`;
+    }
+
+    return null;
+  })();


rather than using a IIFE, I'd prefer if we just wrap it in a memo hook, this ensure it only applies when state changes happen

Xaroz · 2026-01-30T16:09:21Z

src/features/messages/MessageSearch.tsx

+  useEffect(() => {
+    if (redirectUrl) {
+      router.replace(redirectUrl);
+    }
+  }, [redirectUrl, router]);


use router.push, using replace will "replace" the current stack history and if I wanted to go back it wouldn't work, although with push we might run into an issue with the search looping itself 🤔, still if I press back I'd like to go back to the previous page

Xaroz · 2026-01-30T16:11:04Z

src/features/transactions/MessageSummaryRow.tsx

+  useEffect(() => {
+    setIsManuallyToggled(false);
+  }, [forceExpanded]);


nit: move effects to the end (right before the first return)

Xaroz · 2026-01-30T16:12:03Z

src/features/transactions/MessageSummaryRow.tsx

+  const title = useMemo(() => {
+    switch (messageType) {
+      case 'warp':
+        return 'Warp Transfer';
+      case 'ica-commitment':
+        return 'Interchain Account Commitment';
+      case 'ica-reveal':
+        return 'Interchain Account Reveal';
+      case 'ica-calls':
+        return 'Interchain Account Calls';
+      default:
+        return 'Message';
+    }
+  }, [messageType]);


can't this be combined with the summaryLine memo? Ideally wanna avoid usage of hooks if there is no need

Xaroz · 2026-01-30T16:12:35Z

src/features/transactions/MessageSummaryRow.tsx

+    return (
+      <div className="flex items-center gap-1.5 rounded-full bg-green-100 px-2.5 py-1">
+        <Image src={CheckmarkIcon} width={14} height={14} alt="" />
+        <span className="text-xs font-medium text-green-700">
+          Delivered{duration && ` (${duration})`}
+        </span>
+      </div>
+    );
+  }
+
+  if (status === MessageStatus.Failing) {
+    return (
+      <div className="flex items-center gap-1.5 rounded-full bg-red-100 px-2.5 py-1">
+        <span className="text-xs font-medium text-red-700">Failing</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 rounded-full bg-amber-100 px-2.5 py-1">
+      <SpinnerIcon width={14} height={14} color="#b45309" />
+      <span className="text-xs font-medium text-amber-700">{toTitleCase(status)}</span>
+    </div>
+  );
+}


Seems that some of these can be made into a reusable component that you can a children too

Xaroz · 2026-01-30T16:13:08Z

src/features/transactions/TransactionDetails.tsx

+  if (isFetching && !hasRun) {
+    return (
+      <div className="mx-auto max-w-2xl">
+        <Card className="flex min-h-[20rem] items-center justify-center">
+          <div className="flex flex-col items-center gap-4">
+            <SpinnerIcon width={40} height={40} />
+            <p className="text-gray-500">Loading transaction messages...</p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // Error state
+  if (isError) {
+    return (
+      <div className="mx-auto max-w-2xl">
+        <Card className="flex min-h-[20rem] items-center justify-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <p className="text-red-500">Error loading transaction</p>
+            <p className="text-sm text-gray-500">
+              Please check the transaction hash and try again.
+            </p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // Not found state
+  if (hasRun && !isMessagesFound) {
+    return (
+      <div className="mx-auto max-w-2xl">
+        <Card className="flex min-h-[20rem] items-center justify-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <p className="text-gray-700">No messages found</p>
+            <p className="max-w-md text-sm text-gray-500">
+              No Hyperlane messages were found for this transaction hash. The transaction may not
+              have dispatched any messages, or it may not be indexed yet.
+            </p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl">


same for these

Xaroz · 2026-01-30T16:15:24Z

src/features/transactions/useTransactionMessagesQuery.ts

+ * Hook to query all messages dispatched in a single origin transaction.
+ * Returns full Message objects (not stubs) for detailed display.
+ */
+export function useTransactionMessagesQuery(txHash: string) {


is this not basically the same hook as message query, can't it not be re-used/modified to fit this feature?

Xaroz · 2026-01-30T16:16:26Z

src/styles/global.css

+/* Ensure tooltips appear above the sticky header (z-10) */
+[role='tooltip'],
+.htw-tooltip {
+  z-index: 50 !important;
+}
+


the tooltip component has a prop called tooltipClassName you can use

yorhodes requested a review from Xaroz as a code owner January 28, 2026 23:46

vercel bot deployed to Preview January 28, 2026 23:50 View deployment

yorhodes force-pushed the feat/tx-page branch 2 times, most recently from e40c6f6 to 5764120 Compare January 29, 2026 00:14

vercel bot deployed to Preview January 29, 2026 00:18 View deployment

paulbalaji reviewed Jan 29, 2026

View reviewed changes

yorhodes force-pushed the feat/tx-page branch 2 times, most recently from 1c6b402 to 52cc0d1 Compare January 29, 2026 15:47

vercel bot deployed to Preview January 29, 2026 15:50 View deployment

yorhodes force-pushed the feat/tx-page branch from 52cc0d1 to 3be8dc2 Compare January 29, 2026 15:53

vercel bot deployed to Preview January 29, 2026 15:58 View deployment

yorhodes force-pushed the feat/tx-page branch from 3be8dc2 to 1411bdb Compare January 29, 2026 15:59

vercel bot deployed to Preview January 29, 2026 16:03 View deployment

vercel bot deployed to Preview January 29, 2026 16:28 View deployment

Merge feat/ica-decoding into feat/tx-page

e5e15ba

vercel bot deployed to Preview January 29, 2026 17:13 View deployment

fix: constrain tx page width for better layout

f5fa4d3

vercel bot deployed to Preview January 29, 2026 17:29 View deployment

Xaroz reviewed Jan 30, 2026

View reviewed changes

paulbalaji mentioned this pull request Feb 10, 2026

DO NOT MERGE: Offsite swap branch #273

Draft

Conversation

yorhodes commented Jan 28, 2026

Summary

Features

Screenshots

Uh oh!

vercel bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paulbalaji commented Jan 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Xaroz Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Jan 28, 2026 •

edited

Loading

Xaroz Jan 30, 2026 •

edited

Loading