Support for MPT-DEX in Explorer

src/containers/Transactions/DetailTab/Meta/Offer.tsx

@@ -10,8 +10,28 @@ import { Account } from '../../../shared/components/Account'
 import Currency from '../../../shared/components/Currency'
 import type { MetaRenderFunctionWithTx, MetaNode } from './types'
 
-const normalize = (value: number | string, currency: string): string =>
-  currency === 'XRP' ? (Number(value) / XRP_BASE).toString() : String(value)
+const getCurrency = (takerAmount: any): string => {
+  if (takerAmount?.mpt_issuance_id) return takerAmount.mpt_issuance_id
+  return takerAmount?.currency || 'XRP'
+}
+
+const getIsMPT = (takerAmount: any): boolean => !!takerAmount?.mpt_issuance_id
+
+const getIssuer = (takerAmount: any): string | undefined => {
+  if (takerAmount?.mpt_issuance_id) return undefined
+  return takerAmount?.issuer
+}
+
+const normalize = (
+  value: number | string,
+  currency: string,
+  isMPT: boolean = false,
+): string => {
+  if (isMPT) return String(value)
+  return currency === 'XRP'
+    ? (Number(value) / XRP_BASE).toString()
+    : String(value)
+}
 
 const renderChanges = (
   _t: any,
@@ -22,14 +42,16 @@ const renderChanges = (
   const meta: JSX.Element[] = []
   const final = node.FinalFields
   const prev = node?.PreviousFields
-  const paysCurrency = final.TakerPays.currency || 'XRP'
-  const getsCurrency = final.TakerGets.currency || 'XRP'
+  const paysCurrency = getCurrency(final.TakerPays)
+  const getsCurrency = getCurrency(final.TakerGets)
+  const paysIsMPT = getIsMPT(final.TakerPays)
+  const getsIsMPT = getIsMPT(final.TakerGets)
   const finalPays = final.TakerPays.value || final.TakerPays
   const finalGets = final.TakerGets.value || final.TakerGets
   const prevPays = prev?.TakerPays?.value || prev?.TakerPays
   const prevGets = prev?.TakerGets?.value || prev?.TakerGets
-  const changePays = normalize(prevPays - finalPays, paysCurrency)
-  const changeGets = normalize(prevGets - finalGets, getsCurrency)
+  const changePays = normalize(prevPays - finalPays, paysCurrency, paysIsMPT)
+  const changeGets = normalize(prevGets - finalGets, getsCurrency, getsIsMPT)
 
   if (prevPays && finalPays) {
     const options = { ...CURRENCY_OPTIONS, currency: paysCurrency }
@@ -39,7 +61,8 @@ const renderChanges = (
         <b>
           <Currency
             currency={paysCurrency}
-            issuer={final.TakerPays.issuer}
+            issuer={getIssuer(final.TakerPays)}
+            isMPT={paysIsMPT}
             displaySymbol={false}
           />
         </b>{' '}
@@ -50,7 +73,7 @@ const renderChanges = (
           <b>
             {{
               previous: localizeNumber(
-                normalize(prevPays, paysCurrency),
+                normalize(prevPays, paysCurrency, paysIsMPT),
                 language,
                 options,
               ),
@@ -60,7 +83,7 @@ const renderChanges = (
           <b>
             {{
               final: localizeNumber(
-                normalize(finalPays, paysCurrency),
+                normalize(finalPays, paysCurrency, paysIsMPT),
                 language,
                 options,
               ),
@@ -78,7 +101,8 @@ const renderChanges = (
         <b>
           <Currency
             currency={getsCurrency}
-            issuer={final.TakerGets.issuer}
+            issuer={getIssuer(final.TakerGets)}
+            isMPT={getsIsMPT}
             displaySymbol={false}
           />
         </b>{' '}
@@ -89,7 +113,7 @@ const renderChanges = (
           <b>
             {{
               previous: localizeNumber(
-                normalize(prevGets, getsCurrency),
+                normalize(prevGets, getsCurrency, getsIsMPT),
                 language,
                 options,
               ),
@@ -99,7 +123,7 @@ const renderChanges = (
           <b>
             {{
               final: localizeNumber(
-                normalize(finalGets, getsCurrency),
+                normalize(finalGets, getsCurrency, getsIsMPT),
                 language,
                 options,
               ),
@@ -123,11 +147,14 @@ const render: MetaRenderFunctionWithTx = (
 ) => {
   const lines: JSX.Element[] = []
   const fields = node.FinalFields || node.NewFields
-  const paysCurrency = fields.TakerPays.currency || 'XRP'
-  const getsCurrency = fields.TakerGets.currency || 'XRP'
+  const paysCurrency = getCurrency(fields.TakerPays)
+  const getsCurrency = getCurrency(fields.TakerGets)
+  const paysIsMPT = getIsMPT(fields.TakerPays)
+  const getsIsMPT = getIsMPT(fields.TakerGets)
   const takerPaysValue = normalize(
     fields.TakerPays.value || fields.TakerPays,
     paysCurrency,
+    paysIsMPT,
   )
   const invert =
     CURRENCY_ORDER.indexOf(getsCurrency) > CURRENCY_ORDER.indexOf(paysCurrency)
@@ -194,16 +221,22 @@ const render: MetaRenderFunctionWithTx = (
         components={{
           Currency: (
             <Currency
-              currency={(invert ? getsCurrency : paysCurrency) || 'XRP'}
-              issuer={invert ? tx.TakerGets?.issuer : tx.TakerPays?.issuer}
+              currency={invert ? getsCurrency : paysCurrency}
+              issuer={
+                invert ? getIssuer(tx.TakerGets) : getIssuer(tx.TakerPays)
+              }
+              isMPT={invert ? getsIsMPT : paysIsMPT}
               displaySymbol={false}
               shortenIssuer
             />
           ),
           Currency2: (
             <Currency
-              currency={(invert ? paysCurrency : getsCurrency) || 'XRP'}
-              issuer={invert ? tx.TakerPays?.issuer : tx.TakerGets?.issuer}
+              currency={invert ? paysCurrency : getsCurrency}
+              issuer={
+                invert ? getIssuer(tx.TakerPays) : getIssuer(tx.TakerGets)
+              }
+              isMPT={invert ? paysIsMPT : getsIsMPT}
               displaySymbol={false}
               shortenIssuer
             />

src/containers/Transactions/simpleTab.scss

@@ -74,6 +74,14 @@ $subdued-color: $black-40;
             }
           }
 
+          a.currency {
+            color: $green-30;
+
+            &:hover {
+              color: $green-50;
+            }
+          }
+
           &.list {
             margin-bottom: 12px;
 

src/containers/Transactions/test/Meta.test.tsx

@@ -10,6 +10,11 @@ import DirectMPTPayment from './mock_data/DirectMPTPayment.json'
 import { TransactionMeta } from '../DetailTab/Meta'
 import OfferCreateWithPermissionedDomainID from '../../shared/components/Transaction/OfferCreate/test/mock_data/OfferCreateWithPermissionedDomainID.json'
 
+jest.mock('../../shared/hooks/useMPTIssuance', () => ({
+  ...jest.requireActual('../../shared/hooks/useMPTIssuance'),
+  useMPTIssuance: () => ({ data: undefined }),
+}))
+
 describe('TransactionMeta container', () => {
   const renderMeta = (data: any = Transaction) =>
     render(

src/containers/shared/components/Amount.tsx

@@ -1,15 +1,8 @@
-import { useQuery } from 'react-query'
-import { useContext } from 'react'
 import { CURRENCY_OPTIONS, XRP_BASE } from '../transactionUtils'
-import { useLanguage } from '../hooks'
+import { useLanguage, useMPTIssuance } from '../hooks'
 import { localizeNumber, convertScaledPrice } from '../utils'
 import Currency from './Currency'
 import { ExplorerAmount } from '../types'
-import { FormattedMPTIssuance } from '../Interfaces'
-import { getMPTIssuance } from '../../../rippled/lib/rippled'
-import { formatMPTIssuance } from '../../../rippled/lib/utils'
-import SocketContext from '../SocketContext'
-import { useAnalytics } from '../analytics'
 
 export interface AmountProps {
   value: ExplorerAmount | string
@@ -27,8 +20,6 @@ export const Amount = ({
   displayCurrency = true,
 }: AmountProps) => {
   const language = useLanguage()
-  const rippledSocket = useContext(SocketContext)
-  const { trackException } = useAnalytics()
 
   // Handle the special case where amount is '< 0.0001' string
   const isSmallAmountString =
@@ -42,6 +33,9 @@ export const Amount = ({
 
   const options = { ...CURRENCY_OPTIONS, currency }
 
+  const mptID = isMPT ? (value as ExplorerAmount).currency : null
+  const { data: mptIssuanceData } = useMPTIssuance(mptID, isMPT)
+
   const renderAmount = (localizedAmount: any) => (
     <span className="amount" data-testid="amount">
       <span className="amount-localized" data-testid="amount-localized">
@@ -64,24 +58,6 @@ export const Amount = ({
     </span>
   )
 
-  const mptID = isMPT ? (value as ExplorerAmount).currency : null
-
-  // fetch MPTIssuance only if isMPT is true
-  const { data: mptIssuanceData } =
-    useQuery<FormattedMPTIssuance>(
-      ['getMPTIssuanceScale', mptID],
-      async () => {
-        const info = await getMPTIssuance(rippledSocket, mptID)
-        return formatMPTIssuance(info.node)
-      },
-      {
-        onError: (e: any) => {
-          trackException(`mptIssuance ${mptID} --- ${JSON.stringify(e)}`)
-        },
-        enabled: isMPT,
-      },
-    ) || {}
-
   // Handle the special case where amount is '< 0.0001'
   if (isSmallAmountString) {
     return renderAmount('< 0.0001')

src/containers/shared/components/Currency.tsx

@@ -1,6 +1,7 @@
 import { RouteLink } from '../routing'
 import { TOKEN_ROUTE, MPT_ROUTE } from '../../App/routes'
 import { shortenMPTID } from '../utils'
+import { useMPTIssuance, getMPTDisplayName } from '../hooks'
 
 // https://xrpl.org/currency-formats.html#nonstandard-currency-codes
 const NON_STANDARD_CODE_LENGTH = 40
@@ -34,10 +35,19 @@ const Currency = (props: Props) => {
     hideIssuer = false,
     shortenMPTIssuanceID = false,
   } = props
+
+  const { data: mptIssuanceData } = useMPTIssuance(
+    isMPT ? currency : null,
+    isMPT,
+  )
+
   let content: string
 
   if (isMPT) {
-    const display = `${shortenMPTIssuanceID ? shortenMPTID(currency) : currency}`
+    const displayName = getMPTDisplayName(
+      shortenMPTIssuanceID ? shortenMPTID(currency) : currency,
+      mptIssuanceData?.parsedMPTMetadata,
+    )
     if (link)
       return (
         <RouteLink
@@ -46,10 +56,10 @@ const Currency = (props: Props) => {
           to={MPT_ROUTE}
           params={{ id: currency }}
         >
-          {display}
+          {displayName}
         </RouteLink>
       )
-    content = display
+    content = displayName
   } else {
     let currencyCode =
       currency?.length === NON_STANDARD_CODE_LENGTH &&

src/containers/shared/components/Transaction/AMMClawback/parser.ts

@@ -6,7 +6,6 @@ export function parser(tx: AMMClawback, meta: any) {
   const holder = tx.Holder
   const amount = findAssetAmount(meta, tx.Asset, tx)
   if (tx.Flags) {
-    // @ts-expect-error - MPT is not being supported for AMM transactions until https://github.com/XRPLF/rippled/pull/5285 is merged
     const amount2 = findAssetAmount(meta, tx.Asset2, tx)
     return {
       amount,

src/containers/shared/components/Transaction/AMMClawback/test/AMMClawbackSimple.test.tsx

@@ -5,10 +5,21 @@ import { Simple } from '../Simple'
 import mockAMMClawbackNoFlag from './mock_data/withoutFlag.json'
 import mockAMMClawbackWithAmount from './mock_data/withAmount.json'
 import mockAMMClawbackWithFlag from './mock_data/withFlag.json'
+import mockAMMClawbackMPT from './mock_data/withMPT.json'
+import { useMPTIssuance } from '../../../../hooks/useMPTIssuance'
+
+jest.mock('../../../../hooks/useMPTIssuance', () => ({
+  ...jest.requireActual('../../../../hooks/useMPTIssuance'),
+  useMPTIssuance: jest.fn(),
+}))
 
 const renderSimple = createSimpleRenderFactory(Simple)
 
 describe('AMMClawback: Simple', () => {
+  beforeEach(() => {
+    ;(useMPTIssuance as jest.Mock).mockReturnValue({ data: undefined })
+  })
+
   it('renders without tfClawTwoAssets flag, only one asset should be clawed back', () => {
     const { container } = renderSimple(mockAMMClawbackNoFlag)
     expectSimpleRowText(
@@ -51,4 +62,47 @@ describe('AMMClawback: Simple', () => {
       '$20.00 USD.rK2Du3gUmFbg5UFFHFq9LKywVuGbqNsyyi',
     )
   })
+
+  it('renders with MPT assets (no ticker)', () => {
+    ;(useMPTIssuance as jest.Mock).mockReturnValue({
+      data: { assetScale: 0 },
+    })
+    const { container } = renderSimple(mockAMMClawbackMPT)
+    expectSimpleRowText(
+      container,
+      'asset1',
+      '260 000003C31D321B7DDA58324DC38CDF18934FAFFFCDF69D5F',
+    )
+    expectSimpleRowText(
+      container,
+      'asset2',
+      '100 00000ABC2E631B9DFA58324DC38CDF18934FAFFFCDF69D5F',
+    )
+    expectSimpleRowText(
+      container,
+      'holder',
+      'r4eWC5DixP74dpk7FDzXcap1BJ2NaoUeZN',
+    )
+  })
+
+  it('renders with MPT assets (with ticker)', () => {
+    ;(useMPTIssuance as jest.Mock).mockImplementation((mptID: string) => {
+      if (mptID === '000003C31D321B7DDA58324DC38CDF18934FAFFFCDF69D5F') {
+        return {
+          data: { assetScale: 0, parsedMPTMetadata: { ticker: 'XGLD' } },
+        }
+      }
+      return {
+        data: { assetScale: 0, parsedMPTMetadata: { ticker: 'XUSD' } },
+      }
+    })
+    const { container } = renderSimple(mockAMMClawbackMPT)
+    expectSimpleRowText(container, 'asset1', '260 XGLD')
+    expectSimpleRowText(container, 'asset2', '100 XUSD')
+    expectSimpleRowText(
+      container,
+      'holder',
+      'r4eWC5DixP74dpk7FDzXcap1BJ2NaoUeZN',
+    )
+  })
 })