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	Actions	Updated (UTC)
hyperlane-explorer	Ready	Preview, Comment	Apr 13, 2026 4:58pm

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

+              <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

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


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

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.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

- 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

+  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

+  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

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


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

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

+  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

+    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

+  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

Co-authored-by: pbio <10051819+paulbalaji@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…#292)

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

…308) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com> Co-authored-by: Jason Guo <33064781+Xaroz@users.noreply.github.com>

# Conflicts: # src/features/debugger/debugMessage.ts # src/features/messages/MessageDetails.tsx # src/features/messages/MessageSearch.tsx # src/features/messages/cards/IcaDetailsCard.tsx # src/features/messages/cards/KeyValueRow.tsx # src/features/messages/cards/TransactionCard.tsx # src/features/messages/ica.ts # src/types.ts

socket-security · 2026-04-13T16:56:02Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Package	Supply Chain Security	Vulnerability	Quality	Maintenance
next@15.4.10 ⏵ 16.2.1	^-6	⁺¹⁰	⁺¹
@types/react-dom@18.3.2 ⏵ 19.2.3	⁺¹		⁺¹
@hyperlane-xyz/widgets@20.1.0 ⏵ 31.0.0	⁺¹		⁺¹	⁺¹
@hyperlane-xyz/utils@20.1.0 ⏵ 31.0.0	⁺³		^-1	⁺¹
@types/react@19.0.1 ⏵ 19.2.14				^-1
@hyperlane-xyz/core@10.1.3 ⏵ 10.2.0	^-1		⁺⁵
react@18.3.1 ⏵ 19.2.4	⁺¹
@hyperlane-xyz/registry@23.9.0 ⏵ 24.3.0	⁺¹		⁺¹	⁺¹
@hyperlane-xyz/sdk@20.1.0 ⏵ 31.0.0	⁺⁴		⁺¹	⁺¹
typescript@5.7.2 ⏵ 6.0.2	⁺¹		⁺¹
react-dom@18.3.1 ⏵ 19.2.4	⁺⁸		⁺¹
@aws-sdk/client-s3@3.733.0 ⏵ 3.967.0	⁺¹			⁺⁴⁸

View full report

socket-security · 2026-04-13T16:56:04Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `@hyperlane-xyz/core` is 70.0% likely obfuscated Confidence: 0.70 Location: Package overview From: package.json → `npm/@hyperlane-xyz/core@10.2.0` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/@hyperlane-xyz/core@10.2.0`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm `entities` is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: pnpm-lock.yaml → `npm/entities@6.0.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/entities@6.0.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

paulbalaji · 2026-04-16T10:32:23Z

i think the pr should be targetting main instead?

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

fix: update error boundary support link to help center (#262)

4c53bf4

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

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

ci: add Claude code review workflow (#264)

01cf382

Xaroz reviewed Jan 30, 2026

View reviewed changes

yorhodes and others added 26 commits February 25, 2026 13:42

refactor: clean up message details UI (#260)

9251afe

Co-authored-by: pbio <10051819+paulbalaji@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

chore: update dependencies to latest (#282)

f477bc2

chore: update Hyperlane deps (#283)

98f1f58

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

fix: xERC20 lockbox collateral checks and VS variant support (#284)

f7d18d5

chore: update Hyperlane deps (#285)

785d88a

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

fix: title for seo (#286)

92c3525

fix: add key props to OG meta tags for deduplication (#288)

fa3fd9e

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix: aleo address format (#289)

bb93bcf

chore: add REVIEW.md, update AI review docs (#291)

7395e75

fix(ci): enable inline PR review comments for claude review workflows (…

105e479

…#292)

chore: update Hyperlane deps (#293)

8fa6f07

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

feat: ui rebrand to match nexus v2 (#248)

b79ab39

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

feat: upgrade to TypeScript 6 (#299)

f1254d2

chore: update brand link (#300)

4a53795

chore: update OG preview image to new brand artwork (#302)

ae53fb7

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

perf: reduce initial explorer bundles (#295)

9b8f72f

chore: Next 16, React 19, oxlint/oxfmt (#303)

a28b3f8

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix: restore header perf loading behavior (#304)

f705c44

ci: enforce minimum package release age in pnpm (#305)

bce4884

fix: dynamic OG meta tags for message pages (#306)

a6aeab0

chore: update Hyperlane deps (#298)

7c1f829

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com>

fix: dont show aleo when loading message (#307)

c3fbb85

feat: show distinct origin/destination tokens in warp transfer views (#…

fc391bf

…308) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

chore: update Hyperlane deps (#309)

707deff

Co-authored-by: hyper-gonk[bot] <246310972+hyper-gonk[bot]@users.noreply.github.com> Co-authored-by: Jason Guo <33064781+Xaroz@users.noreply.github.com>

Fixes

fe5c990

vercel bot deployed to Preview April 13, 2026 16:58 View deployment

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!

paulbalaji Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

paulbalaji Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paulbalaji commented Jan 29, 2026

Uh oh!

Xaroz Jan 30, 2026

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!

Xaroz Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Xaroz Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Xaroz Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Xaroz Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

socket-security bot commented Apr 13, 2026

Uh oh!

socket-security bot commented Apr 13, 2026

Uh oh!

paulbalaji commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

vercel bot commented Jan 28, 2026 •

edited

Loading

Xaroz Jan 30, 2026 •

edited

Loading