Explorer Account page revamp: Balances, Summary and Assets by kuan121 · Pull Request #1245 · ripple/explorer

kuan121 · 2025-10-01T16:09:12Z

High Level Overview of Change

Refactoring the Explorer Account page

Add a Balance section showing XRP Balance, XRP Balance (USD) and Reserve Balance
Group account information, flags and Signer into a Account Properties section
Replace Balance Dropdown and Asset Tab with two Assets sections
- Held Assets: IOUs, MPTs, LP Tokens and NFTs
- Issued Assets: IOUs, MPTs and NFTs

Context of Change

The current XRPL Explorer Account page provides functional access to raw ledger data and transaction history, but lacks the clarity, structure, and usability expected by both casual users and developers. Key information—such as account properties, AMM participation, trustlines, and assets held/issued—is presented in a fragmented way, making it difficult to interpret an account's status, asset relationships, and overall activity at a glance.

This is a revamp of the Explorer Account page to deliver a more organized, performant, and informative experience.

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

Codebase Modernization

Updated files to React Hooks
Updated files to TypeScript
Updated tests to React Testing Library

Before / After

Before - Account Information and XRP Balance

After - Account Information and XRP Balance

Before - Account Assets

After - Account Assets

Test Plan

Unit Tests
Manual Tests
1. npm run build && npm start
2. Visit account page for various accounts containing different types of assets and confirm that the page and data show as expected.

achowdhry-ripple · 2025-10-06T17:46:49Z

@@ -28,3 +28,6 @@ VITE_DATA_URL=https://data.xrpl.org/v1/network
 # Whether to use ws instead of wss (boolean)
 # Only used locally (the deployed Explorer requires wss)
 VITE_INSECURE_WS=0
+
+# LOS Endpoint URL
+VITE_LOS_URL=https://los.dev.ripplex.io


nit: could we update the example to the prod url just in the rare case that someone tries to use it?

For testing purpose, I think dev endpoint should be sufficient. In general, it's not a good idea to expose prod endpoint even though we have DDoS protection in place.

achowdhry-ripple · 2025-10-06T17:49:07Z

+  cursor: default;
+
+  .clock-icon {
+    width: px;


nit: looks like there is a missing px value

Good catch!

achowdhry-ripple · 2025-10-06T17:53:25Z

+const fetchAccountHeldIOUs = async (
+  rippledSocket: any,
+  accountId: string,
+): Promise<IOU[]> => {
+  let balancesResponse
+  try {
+    balancesResponse = await getBalances(rippledSocket, accountId)
+  } catch (error) {
+    log.error(
+      `Error calling 'gatewayBalances' for account ${accountId}: ${JSON.stringify(error)}`,
+    )
+    return []
+  }


I've seen these types of functions saved in the rippled folder in this repo. I don't feel strongly here but might be worth adding this there and importing for consistency

getBalances is defined in rippled/. Here, we have a special use case of finding held IOUs from the response of getBalances. I don't think it's generic enough, unlike getBalances, to be in rippled/`

achowdhry-ripple · 2025-10-06T17:58:17Z

+    for (const issuer of uniqueIssuers) {
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        const accountInfo = await getAccountInfo(rippledSocket, issuer, false)
+
+        const transferFee = formatTransferFee(accountInfo?.TransferRate, 'IOU')
+


could some sort of parallelism here save time? not sure how long this process takes currently from a UI experience

Based on my tests, parallel requests quickly get throttled by Clio. It’s fine to make these calls sequentially here: we display the Held IOU table with other fields almost immediately, then fetch the transfer fee and frozen status one by one, updating the columns as the data arrives. From the user’s perspective, the table shows up immediately, so the experience isn’t blocked.

achowdhry-ripple · 2025-10-06T18:09:47Z

+                    account={token.issuer}
+                    shortAccount={shortenAccount(token.issuer)}


nit: passing both of these in seems redundant?

It's not redundant since the caller of <Account /> can pass in a short version of account, e.g., rK2Y8ng...ZkyFm or an issuer name like Ripple as shortAccount. I will rename shortAccount to displayText since issuer name like Ripple is definitely not a short account.

achowdhry-ripple · 2025-10-06T18:12:39Z

+                <td>
+                  <FutureDataIcon />
+                </td>


how come we are unable to provide the usd prices right now?

Unlike IOU, MPT isn't being traded on the ledger at the moment. We need to have MPT DEX in mainnet so that MPT can be traded. Only after that will we have an MPT price in XRP and USD.

achowdhry-ripple · 2025-10-06T18:17:11Z

+          log.error(
+            `Error fetching offers for NFT ${nft.nftId}: ${JSON.stringify(error)}`,
+          )


should we add retry mechanisms here? or would a page reload be sufficient

Based on my tests, we don't need a retry for now since I have tested some accounts with large number of tokens and I don't see any throttle. I plan to add retry as a follow-up.

achowdhry-ripple · 2025-10-06T18:25:46Z

+export const formatUsdBalance = (balance: number, lang: string): string => {
+  if (balance === 0) {
+    return '--'
+  }
+
+  let options
+  if (balance >= 1) {
+    options = USD_CURRENCY_OPTIONS
+  } else if (balance >= 0.0001) {
+    options = USD_SMALL_BALANCE_CURRENCY_OPTIONS
+  } else {
+    options = USD_EXTRA_SMALL_BALANCE_CURRENCY_OPTIONS
+  }


I do believe there are exisitng utils in this repo to display amounts, were you able to try those / is this logic significantly different?

You’re right — we already have localizeNumber, and the functions in this file use it under the hood. However, I’ve added some custom logic, after discussed with Julian, to control how many decimals we display for different prices and balances. We can also update the Token and Token Ranking pages to use these functions for consistency.

Here’s the custom logic:
Token balance:

If the balance is greater than 999, keep 2 decimals (e.g., 100,001.94)

If the balance is less than or equal to 999, keep 2 to 4 decimals, (e.g., 151.194)

USD price or balance:

If the value is greater than 1, keep at most 2 decimals (e.g., $1.02).

If the value is between 0.0001 and 1, keep 2–4 decimals (e.g., $0.004, $0.02).

If the value is less than 0.0001, keep up to 10 decimals (e.g., $0.00004).

achowdhry-ripple

Great job with this, was a large change and looks very clean! Mainly small questions and nits, and main concern is over the large number of api calls and the lack of parallelism/retries. Not a big issue though, seems like it works great overall but I would be curious to understand more there.

…t assets

…e Account page

… `index.tsx` component

…eact Testing Library

…cies

Patel-Raj11

LGTM!

achowdhry-ripple

thanks for addressing the comments, lgtm!

…ogressively add non-LP tokens starting with 03 after confirming they aren’t LP tokens.

…ount flags

…USD after a `03` token is added to the table

kuan121 force-pushed the explorer-account-page-refactoring branch from adfe2d8 to 0384079 Compare October 2, 2025 12:35

kuan121 requested review from Patel-Raj11 and achowdhry-ripple October 2, 2025 14:44

kuan121 marked this pull request as ready for review October 2, 2025 14:46