Support for MPT-DEX in Explorer by ckeshava · Pull Request #1302 · ripple/explorer

ckeshava · 2026-03-25T00:19:04Z

High Level Overview of Change

This feature implements the MPT-DEX feature in Explorer.

English specification: https://github.com/XRPLF/XRPL-Standards/pull/451/changes
C++ implementation of MPT-DEX feature: XRPLF/rippled#5285
xrpl.js library implementation of MPT-DEX feature: XRPLF/xrpl.js#3214

Please watch the attached video for the visual experience of a few transactions that highlight the changes in this PR:

explorer-mpt-dex.mov

This PR updates the visual look of the following transactions:
AMMCreate
AMMDeposit
AMMWithdraw
AMMClawback
AMMDelete
Payment
OfferCreate
Any other transaction that displays MPT / IOU values in the Simple/ Description/Meta/Detail views of the Explorer.

The PR also updates the IOUs and MPTs to appear in green color in the Simple view for all transactions (commit: 7498ce0). This indicates that it is a clickable link.

This PR has been deployed in the staging environment of the Explorer. However, since MPT-DEX feature is unavailable on a public devnet, readers will need to run a custom rippled image to be able to play around the feature (as demonstrated in the video)

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

Codebase Modernization

Updated files to React Hooks
Updated files to TypeScript

Before / After

Please watch the attached video for before/after changes

Test Plan

Appropriate tests have been added

… MPT Amounts

…saction-Simple view page

cybele-ripple · 2026-04-13T17:04:32Z


-const normalize = (value: number | string, currency: string): string =>
-  currency === 'XRP' ? (Number(value) / XRP_BASE).toString() : String(value)
+const getCurrency = (takerAmount: any): string => {


Can we use a specific type for takerAmount instead of any?

Hello! thanks for the review. I can think of two alternatives for the question of type safety:

Wait for this PR to be merged -- this provides for MPTAmount as a variant of the Amount type in xrpl package.

Introduce an interface in all these files that simulates the true Amount type i.e.

interface AmountType { value: string issuerAccount?: string currency?: string mpt_issuance_id?: string }

Option-1 is more type-safe because 'xrpl' package includes additional validation for the different kinds of Amount -- IOU, MPT or XRP.

What do you suggest?

Maybe we can add the shared interface in option 2 and add a TODO comment to use xrpl package when that PR is merged and released so we don't have to wait

cybele-ripple · 2026-04-13T17:04:59Z

+  return takerAmount?.currency || 'XRP'
+}
+
+const getIsMPT = (takerAmount: any): boolean => !!takerAmount?.mpt_issuance_id


Use a specific type instead of any

cybele-ripple · 2026-04-13T17:05:11Z

+
+const getIsMPT = (takerAmount: any): boolean => !!takerAmount?.mpt_issuance_id
+
+const getIssuer = (takerAmount: any): string | undefined => {


Use a specific type instead of any

cybele-ripple · 2026-04-13T17:15:46Z

+const isCurrency = (value: any) =>
+  isMPTAsset(value) ||
+  (typeof value === 'object' &&
+    Object.keys(value).length <= 2 &&


Is 2 something we should put as a constant at the top of the file?

cybele-ripple · 2026-04-13T17:17:57Z

000003C31D321B7DDA58324DC38CDF18934FAFFFCDF69D5F is used several times in this file. Can we define this value at the top of the file and then use a constant? Something like

export const TEST_MPT_ID = '000003C31D321B7DDA58324DC38CDF18934FAFFFCDF69D5F'

cybele-ripple · 2026-04-13T17:23:32Z

+  })
+
  it('renders', () => {
-    const { container, unmount } = renderComponent(mockAMMDelete) // TOOD: - Make this look up asset 1 / asset 2 currency codes


Has this // TODO been addressed?

Hello, no the TODO comment has not been addressed. I was not convinced that the TODO is relevant.

Most of the Explorer pages render the incoming data in Simple, Description, Detail and Raw views. They do not explicitly fetch the ledger-object in question. The exception to this behavior is the fetching of mpt_issuance_id in Vault Explorer pages because we need the Vault-metadata.

However, in the case of AMMs, I do not understand why we need to fetch the AMM ledger-object. Indeed, I have not found examples of such behavior in other AMM related transactions (like AMMCreate).

what do you think?

cybele-ripple · 2026-04-13T17:44:57Z

We should add a new test file to cover this, specifically the error handling

getMPTDisplayName method is already covered by the tests in the Currency with MPT ticker describe block of currency.test.tsx file.

useMPTIssuance is a thin wrapper around useQuery. Did you have any other parameters in mind for the tests? ad688b6

cybele-ripple · 2026-04-13T17:46:23Z

With all the changes to this file, we should add more tests to/update the DefaultSimple.test file

cybele-ripple · 2026-04-13T17:46:57Z

  return s
 }

 export function normalizeAmount(


We should add a test for this function

On second thought -- the changes in this file are not required. This file is only used in PaymentChannelClaim and TrustSet transactions. Both of those transactions have nothing to do with MPTs

cybele-ripple · 2026-04-13T17:51:14Z

Since 000003C31D321B7DDA58324DC38CDF18934FAFFFCDF69D5F is used multiple times in this file we can assign it as a constant at the top of the file and just reuse that constant throughout the file

cybele-ripple · 2026-04-13T17:52:52Z

+export const formatAsset = (asset) => {
+  if (typeof asset === 'string') return { currency: 'XRP' }
+  if (asset.mpt_issuance_id) {
+    return {
+      currency: asset.mpt_issuance_id,
+      isMPT: true,
+    }
+  }
+  return {
+    currency: asset.currency,
+    issuer: asset.issuer,
+  }
+}


We should add a test for this change

pdp2121 · 2026-04-15T14:27:01Z

+import {
+  formatAmount,
+  isMPTAmount,
+  formatAsset,


There are 2 separate formatAsset (from formatAmount and utils.js). Can we dedup and just use one?

thanks d20a0c4

pdp2121 · 2026-04-15T14:37:06Z

+  const amount =
+    node.FinalFields?.MPTAmount != null
+      ? Math.abs(
+          Number(node.FinalFields.MPTAmount) -


I think we should use BigInt for MPTAmount since maximum for Number is only around 53 bits so this might be inaccurate for large amount

thanks. c82d0c3

pdp2121 · 2026-04-15T14:47:19Z

+  if (typeof amount === 'object' && 'mpt_issuance_id' in amount) {
+    const currency = amount.mpt_issuance_id
+    const numberOption = { ...CURRENCY_OPTIONS, currency }
+    return localizeNumber(amount.value, language, numberOption)


Do we need to apply asset scale for this value? See convertScaledPrice in utils.js?

the changes in this file are not required. I have reverted them.

…pt-dex

… is rendered

- Update test imports from react-router-dom to react-router (deprecated post-v7) - Replace @testing-library/react-hooks with @testing-library/react (merged renderHook) - Add `as any` cast to <Trans> interpolation objects in Offer.tsx, matching the pattern already applied to sibling `change:` blocks during the React 18 upgrade Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

cybele-ripple · 2026-05-06T20:17:58Z

+  const changePays = normalize(prevPays - finalPays, paysCurrency, paysIsMPT)
+  const changeGets = normalize(prevGets - finalGets, getsCurrency, getsIsMPT)


Do we need to use BigInt here like we do in src/containers/shared/metaParser.tsx?

thanks 67ba204

Mirror the precision-preserving pattern already used in metaParser.tsx so large MPTAmount values (up to 2^63 - 1) are not truncated when computing the change between previous and final TakerPays / TakerGets. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

MPTAmount values can be up to 2^63 - 1, beyond Number.MAX_SAFE_INTEGER. Three layers were silently truncating large MPT values: - Amount.tsx routed `amount` through parseInt before scaling, losing precision before convertScaledPrice could apply BigInt arithmetic. - formatAmountWithAsset parseFloat'd the value before reaching the MPT branch, so the returned `amount` was already lossy. - localizeNumber parseFloat'd its input as the first step, undoing any precision preserved upstream. Fix each layer to keep MPT amounts as exact integer/decimal strings and add a BigInt-backed grouping path in localizeNumber that activates only for isMPT string inputs. Non-MPT call sites are unaffected. Tests cover MPT amounts at the spec maximum (2^63 - 1) at both assetScale 0 and 6, and IOU amounts near the ripple-binary-codec limits. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

pdp2121 · 2026-05-14T15:21:05Z

              {
                previous: localizeNumber(
-                  normalize(prevPays, paysCurrency),
+                  normalize(prevPays, paysCurrency, paysIsMPT),


localizeNumber has a argument isMPT, should we set it in all of the localizeNumber calls here (e.g payIsMPT) so that BigInt will be execute?

thanks, fixed in 2a15173

follow-up in b02b7c6: added regression tests in Meta.test.tsx covering all 6 localizeNumber calls, plus mixed MPT/XRP offers and the MPToken/MPTokenIssuance renderers. they surfaced a small bug where Intl.NumberFormat rejected the mpt_issuance_id as a currency code (it validates currency even with style: decimal) — fix is in the same commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Intl.NumberFormat validates `currency` even when `style: 'decimal'`, so the BigInt branch threw on mpt_issuance_id values (48-hex, not ISO). Adds regression tests on the Offer meta renderer covering all 6 localizeNumber calls plus mixed MPT/XRP offers and MPToken / MPTokenIssuance renderers at full precision. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ckeshava added 14 commits March 23, 2026 15:29

draft: first draft of the MPT-DEX feature support in Explorer

0b8367b

fix existing failing tests

cd9ff32

tests: OfferCreate transaction with MPT Amounts

9453ff8

test: Payment transaction Simple, Description and Detailed views with…

67626a2

… MPT Amounts

test: AMMDelete transaction with MPT Amount

13c81a6

test: AMMDeposit tests with MPT amounts

54cd50a

test: AMMCreate transaction with two MPT assets

5fc004f

test: AMMClawback tests with MPT assets

5782f14

test: AMMWithdraw transaction with MPT asset/s

d31ee18

[trivial] linter updates

8ac00cd

minor: strongly typed tx parameter in Payment.parser

ec33f9c

minor: do not use shortened MPT-ID values, except in Vault component

805e630

fix: Ensure IOU and MPT Currencies are displayed in Green inside Tran…

7498ce0

…saction-Simple view page

[trivial] linter complaints

72a44ea

cybele-ripple reviewed Apr 13, 2026

View reviewed changes

ckeshava and others added 2 commits April 14, 2026 12:44

Merge branch 'main' into mpt-dex

976236f

minor: refactor commonly used magic numbers/hashes

a3641a8

pdp2121 reviewed Apr 15, 2026

View reviewed changes

ckeshava and others added 9 commits April 16, 2026 13:50

use Amount type instead of any type

a8f1f71

test: unit test file for useMPTIssuance hook

ad688b6

minor: add unit tests for isMPTAsset and isMPTAmount methods

416846f

Merge branch 'main' into mpt-dex

ab4553c

revert unnecessary changes to transactionUtils file

d14cd92

Merge branch 'mpt-dex' of https://github.com/ckeshava/explorer into m…

d749048

…pt-dex

minor: add unit test for formatAsset MPT case

599e3bc

feat: Use BigInt type to handle potentially large MPTAmount values

c82d0c3

feat: remove formatAsset second def in utils.js file

d20a0c4

ckeshava requested review from cybele-ripple and pdp2121 April 16, 2026 22:00

ckeshava and others added 4 commits April 16, 2026 15:12

minor: wrap tests with QueryClientProvider whenver Currency component…

78c4164

… is rendered

Merge branch 'main' into mpt-dex

bcf8cff

Merge branch 'main' into mpt-dex

ddf45fc

cybele-ripple reviewed May 6, 2026

View reviewed changes

ckeshava and others added 2 commits May 12, 2026 14:46

ckeshava requested a review from cybele-ripple May 13, 2026 01:02

pdp2121 reviewed May 14, 2026

View reviewed changes

ckeshava and others added 3 commits May 18, 2026 10:57

Merge branch 'main' into mpt-dex

f18ce99

feat: Forward isMPT flag to localizeNumber in Offer meta renderer

2a15173

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ckeshava requested a review from pdp2121 May 18, 2026 18:45


		const getIsMPT = (takerAmount: any): boolean => !!takerAmount?.mpt_issuance_id

		const getIssuer = (takerAmount: any): string \| undefined => {

		const changePays = normalize(prevPays - finalPays, paysCurrency, paysIsMPT)
		const changeGets = normalize(prevGets - finalGets, getsCurrency, getsIsMPT)

Conversation

ckeshava commented Mar 25, 2026 • 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

Codebase Modernization

Before / After

Test Plan

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!

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!

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!

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!

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!

cybele-ripple May 6, 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!

ckeshava commented Mar 25, 2026 •

edited

Loading

cybele-ripple May 6, 2026 •

edited

Loading