feat: Add basic ledger entry page by mvadari · Pull Request #1146 · ripple/explorer

mvadari · 2025-03-31T20:36:08Z

High Level Overview of Change

This PR adds a new type of page for ledger entries/objects. For now it just has a default page that shows all the fields of an object, but over time we can add special ones.

It also:

Adds links to these pages in the Detailed tab metadata breakdown
Redirects to the Account page if the object is an account
Handles deleted objects (if connected to a Clio node)

Context of Change

Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Refactor (non-breaking change that only restructures code)
Tests (You added tests for code that already exists, or your new feature included in this PR)
Documentation Updates
Translation Updates
Release

TypeScript/Hooks Update

Updated files to React Hooks
Updated files to TypeScript

Before / After

Test Plan

## High Level Overview of Change Fix typo for website in english translation ### Context of Change Bug introduced in #1056 ### Type of Change - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Refactor (non-breaking change that only restructures code) - [ ] Tests (You added tests for code that already exists, or your new feature included in this PR) - [ ] Documentation Updates - [ ] Translation Updates - [ ] Release ### TypeScript/Hooks Update - [ ] Updated files to React Hooks - [ ] Updated files to TypeScript

ckeshava · 2025-07-30T21:24:41Z

+      await getLedgerEntry(rippledContext, id)
+      return 'entry'


Is there any way we can cache the result of this method invocation? It feels wasteful to invoke this API only for the purpose of checking if the hash pertains to a transaction, ledger-entry (or) an NFT.

That change should probably be made in a separate PR

ckeshava · 2025-07-30T21:32:56Z

+    if (resp.error === 'lgrNotFound') {
      throw new Error('invalid ledger index/hash', 400)
    }


This RPC command always fetches the last validated ledger. This error cannot possibly occur.

Better to have an extra error handler and not need it - no need to delete it IMO

Copilot · 2026-05-21T16:43:28Z

@mvadari Thanks for sending me some feedback. Unfortunately, I hit an error while trying to use the custom Copilot setup steps configured for this repository. The error I am seeing is:

no `copilot-setup-steps` job found in your `copilot-setup-steps.yml` workflow file. Please ensure you have a single job named `copilot-setup-steps`. For more details, see https://gh.io/copilot/actions-setup-steps

Once you or someone with the necessary access fixes the problem, please let me know in a comment and I'll try again. Thanks!

Copilot

Pull request overview

Adds a new “Entry” page/route for XRPL ledger_entry objects and wires it into existing navigation (search + tx meta) so users can jump from affected ledger nodes / object IDs to a dedicated object view.

Changes:

Introduces /entry/:id/:tab? route and new Entry container with “Simple” + “Raw” tabs, plus redirects for certain entry types (e.g., AccountRoot).
Updates transaction meta renderers and some transaction/NFT UI to deep-link ledger object indices (Offer/PayChannel/RippleState/etc.) to the new Entry page.
Updates rippled client getLedgerEntry API (signature + optional deleted-entry support) and extends header search routing to detect ledger entry hashes.

Reviewed changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
src/rippled/lib/rippled.ts	Updates `getLedgerEntry` signature and adds `include_deleted` support for `ledger_entry` calls.
src/containers/Transactions/index.tsx	Minor formatting-only change.
src/containers/Transactions/DetailTab/Meta/RippleState.tsx	Adds Entry-page link for RippleState affected nodes; adjusts rendered currency display.
src/containers/Transactions/DetailTab/Meta/PayChannel.tsx	Adds Entry-page link for PayChannel affected nodes.
src/containers/Transactions/DetailTab/Meta/Offer.tsx	Adds Entry-page link placeholder via i18n component mapping for Offer affected nodes.
src/containers/Transactions/DetailTab/Meta/MPTokenIssuance.tsx	Adds Entry-page link for MPTokenIssuance affected nodes.
src/containers/Transactions/DetailTab/Meta/MPToken.tsx	Adds Entry-page link for MPToken affected nodes.
src/containers/Transactions/DetailTab/Meta/index.tsx	Enhances default meta line with an i18n-driven Entry-page link.
src/containers/Transactions/DetailTab/Meta/DirectoryNode.tsx	Enhances directory node meta lines with an i18n-driven Entry-page link.
src/containers/TokenNonMain/TokenHeader/index.tsx	Avoids rendering a transaction link row when `previousTxn` is missing.
src/containers/shared/components/Transaction/PaymentChannelCreate/Simple.tsx	Links created channel IDs to the Entry page.
src/containers/shared/components/Transaction/NFTokenCreateOffer/Simple.tsx	Links offer index to the Entry page.
src/containers/shared/components/Transaction/NFTokenCancelOffer/Simple.tsx	Links offer index to the Entry page.
src/containers/shared/components/Transaction/NFTokenAcceptOffer/Simple.tsx	Links offer index to the Entry page.
src/containers/NFT/NFTTabs/test/Offers.test.js	Updates anchor-count assertion due to new Entry links.
src/containers/NFT/NFTTabs/Offers.tsx	Links offer index values to the Entry page.
src/containers/Header/Search.tsx	Extends hash-type detection/routing to include Entry-page navigation.
src/containers/Entry/SimpleTab.tsx	New Simple tab layout for entries (summary + index/prev pointers).
src/containers/Entry/simpleTab.scss	Styling for Entry simple tab layout.
src/containers/Entry/Simple/index.tsx	Selects a “Simple” renderer for entries (currently reuses transaction mapping + fallback).
src/containers/Entry/Simple/DefaultSimple.tsx	Default Entry simple renderer that displays arbitrary ledger entry fields.
src/containers/Entry/index.tsx	New Entry container: fetches ledger entries, handles errors, and redirects for specific types.
src/containers/Entry/entry.scss	Styling for Entry page shell/summary.
src/containers/App/routes.ts	Makes accounts/transactions identifiers required in paths and adds new `ENTRY_ROUTE`.
src/containers/App/index.tsx	Registers new Entry route and adds explicit `/accounts` and `/transactions` routes.
src/containers/Accounts/AMM/AMMAccounts/index.tsx	Updates call site for new `getLedgerEntry` signature.
public/locales/en-US/translations.json	Adds/updates i18n strings to support Entry links and Entry page UI text.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

    command: 'ledger_entry',
    index,
    ledger_index: 'validated',
+    include_deleted: includeDeleted,



-  if (resp.error_message === 'invalidParams') {
+  if (resp.error === 'invalidParams') {
    throw new Error('invalidParams for ledger_entry', 404)


+  if (resp.error) {
+    throw new Error(resp.error, 500)


 export const ACCOUNT_ROUTE: RouteDefinition<{
  id?: string
  tab?: 'assets' | 'transactions'
  assetType?: 'issued' | 'nfts' | 'mpts'
 }> = {
-  path: '/accounts/:id?/:tab?/:assetType?',
+  path: '/accounts/:id/:tab?/:assetType?',
 }


+        <SimpleRow label={t('owner')} data-test="owner">
+          <Account account={owner} />
+        </SimpleRow>
+      )}
+      <SimpleRow label={t('prev_ledger_index')} data-test="prev-ledger-index">
+        <RouteLink to={LEDGER_ROUTE} params={{ identifier: prevLedgerIndex }}>
+          {prevLedgerIndex}
+        </RouteLink>
+      </SimpleRow>
+      <SimpleRow label={t('prev_tx_id')} data-test="prev-tx">


+import { ErrorBoundary } from 'react-error-boundary'
+import { useTranslation } from 'react-i18next'
+import { transactionTypes } from '../../shared/components/Transaction'
+import { DefaultSimple } from './DefaultSimple'
+
+export const Simple: FC<{
+  data: any
+  type: string
+}> = ({ data, type }) => {
+  // Locate the component for the left side of the simple tab that is unique per TransactionType.
+  const { t } = useTranslation()
+  const SimpleComponent = transactionTypes[type]?.Simple
+  if (SimpleComponent) {
+    return (
+      <ErrorBoundary
+        fallback={
+          <div className="error">
+            <div>{t('component_error')}</div>
+            <div>{t('try_detailed_raw')}</div>
+          </div>
+        }
+      >
+        <SimpleComponent data={data} />
+      </ErrorBoundary>
+    )
+  }


+  const { isLoading, data, error, isError } = useQuery(['entry', id], () => {
+    if (id === '') {
+      return undefined
+    }
+    if (HASH256_REGEX.test(id)) {
+      return getLedgerEntry(rippledSocket, id, true).catch(
+        (ledgerEntryRequestError) => {
+          const status = ledgerEntryRequestError.code
+          trackException(
+            `entry ${id} --- ${JSON.stringify(
+              ledgerEntryRequestError.message,
+            )}`,
+          )
+
+          return Promise.reject(status)
+        },
+      )
+    }
+
+    return Promise.reject(BAD_REQUEST)
+  })
+  const { width } = useWindowSize()
+
+  useEffect(() => {
+    trackScreenLoaded()
+
+    return () => {
+      window.scrollTo(0, 0)
+    }
+  }, [tab, trackScreenLoaded])
+
+  useEffect(() => {
+    if (id != null && data?.index != null) {
+      if (data.node.LedgerEntryType === 'AccountRoot') {
+        const path = buildPath(ACCOUNT_ROUTE, { id: data.node.Account })
+        navigate(path)
+      } else if (data.node.LedgerEntryType === 'MPTokenIssuance') {
+        const path = buildPath(MPT_ROUTE, { id: data.node.mpt_issuance_id })
+        navigate(path)
+      } else if (data.node.LedgerEntryType === 'AMM') {
+        const path = buildPath(ACCOUNT_ROUTE, { id: data.node.Account })
+        navigate(path)
+      }
+    }
+  }, [id, data, navigate])


+  "prev_tx_id": "Previous Modifying Transaction",
+  "entry_not_found": "Entry not found",
+  "entry_empty_title": "No entry hash supplied",
+  "entry_empty_hint": "Enter a entry hash in the search box",


    <Trans i18nKey="transaction_balance_line_one">
-      It {action} a{' '}
-      <b>
-        <Currency currency={currency} />
-      </b>
-      RippleState node between
+      It {action} a <b>{currency}</b>
+      RippleState{' '}
+      <RouteLink to={ENTRY_ROUTE} params={{ id: node.LedgerIndex }}>
+        node
+      </RouteLink>{' '}


 const determineHashType = async (
  id: string,
  rippledContext: ExplorerXrplClient,
 ) => {
  try {
    await getTransaction(rippledContext, id)
    return 'transactions'
  } catch (e) {
-    return 'nft'
+    try {
+      await getLedgerEntry(rippledContext, id)
+      return 'entry'
+    } catch (e2) {
+      // TODO: better error message here
+      return 'nft'
+    }


kennyzlei and others added 13 commits December 18, 2024 10:06

initial commit

a6a1ee8

get something working

1129c90

get sidebar working

adbd35c

link from metadata

ed6d9ef

basic deleted object support

7997ddb

get "no entry exists" working

b05c038

clean up translations

6d66b28

clean up css

68af77e

redirect accounts

a774d6b

fix linting issues

7e1845b

add links to all metadata objects

b4d3eff

add more redirects and links

12145f6

mvadari linked an issue Apr 1, 2025 that may be closed by this pull request

Feature request: Ledger object pages #926

Open

mvadari and others added 8 commits April 1, 2025 17:23

redirect AMM

c8133d5

Merge branch 'staging' into entry-page

d3d6dcc

Merge branch 'staging' into entry-page

f2dd700

Merge branch 'staging' into entry-page

7fceabb

Merge branch 'staging' into entry-page

20433a2

Merge branch 'staging' into entry-page

e74fcdf

Merge branch 'main' into entry-page

94ab2f9

Merge branch 'staging' into entry-page

61746da

ckeshava reviewed Jul 30, 2025

View reviewed changes

mvadari added 2 commits October 21, 2025 15:15

Merge branch 'staging' into entry-page

cca5a1e

run linter

ff7e79c

mrbeastmcnasty approved these changes Nov 12, 2025

View reviewed changes

JSTONE1111 approved these changes Dec 26, 2025

View reviewed changes

JSTONE1111 approved these changes Jan 3, 2026

View reviewed changes

Merge branch 'staging' into entry-page

c2abd3f

mvadari and others added 2 commits January 6, 2026 17:22

Merge branch 'staging' into entry-page

7b21c84

Merge branch 'staging' into entry-page

83b8d66

JSTONE1111 approved these changes Feb 6, 2026

View reviewed changes

Merge branch 'staging' into entry-page

c5c7342

JSTONE1111 approved these changes Feb 12, 2026

View reviewed changes

mvadari and others added 4 commits February 26, 2026 12:26

Merge branch 'staging' into entry-page

44dd2bc

Merge branch 'staging' into entry-page

a68d2fd

fix tests

595c098

fix linter

0e4beed

mvadari requested a review from Copilot May 21, 2026 16:43

Copilot started reviewing on behalf of mvadari May 21, 2026 16:43 View session

Copilot AI reviewed May 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add basic ledger entry page#1146

feat: Add basic ledger entry page#1146
mvadari wants to merge 31 commits into
stagingfrom
entry-page

mvadari commented Mar 31, 2025 •

edited

Loading

Uh oh!

ckeshava Jul 30, 2025

Uh oh!

mvadari Oct 21, 2025

Uh oh!

ckeshava Jul 30, 2025

Uh oh!

mvadari Jan 6, 2026

Uh oh!

Copilot AI commented May 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

mvadari commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

High Level Overview of Change

Context of Change

Type of Change

TypeScript/Hooks Update

Before / After

Test Plan

Uh oh!

ckeshava Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

mvadari Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

ckeshava Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

mvadari Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

mvadari commented Mar 31, 2025 •

edited

Loading