fix: display hex-decoded currency in AMM transaction table (#857)

Update the AMM transaction table to use the Currency component to
consolidate currency formatting logic

public/locales/en-US/translations.json

@@ -485,5 +485,7 @@
   "api_version": "API Version",
   "triggered_on": "Triggered On",
   "did_document": "DID Document",
-  "attestation": "Attestation"
+  "attestation": "Attestation",
+  "transaction_tokens_involved": "<Currency/> and <Currency2/>",
+  "transaction_tokens_swapped": "<Currency/> for <Currency2/>"
 }

public/locales/es-ES/translations.json

@@ -479,5 +479,7 @@
   "grant": "Subvención",
   "namespace": "Espacio de Nombres",
   "api_version": "Versión API",
-  "triggered_on": "Activado En"
+  "triggered_on": "Activado En",
+  "transaction_tokens_involved": null,
+  "transaction_tokens_swapped": null
 }

public/locales/fr-FR/translations.json

@@ -482,5 +482,7 @@
   "grant": "Allocation",
   "namespace": "Espace de noms",
   "api_version": "Version API",
-  "triggered_on": "Déclenché Par"
+  "triggered_on": "Déclenché Par",
+  "transaction_tokens_involved": null,
+  "transaction_tokens_swapped": null
 }

public/locales/ja-JP/translations.json

@@ -481,5 +481,7 @@
   "grant": null,
   "namespace": "ネームスペース",
   "api_version": "APIバージョン",
-  "triggered_on": null
+  "triggered_on": null,
+  "transaction_tokens_involved": null,
+  "transaction_tokens_swapped": null
 }

public/locales/ko-KR/translations.json

@@ -479,5 +479,7 @@
   "grant": "그랜트",
   "namespace": "Namespace",
   "api_version": "API 버전",
-  "triggered_on": "Triggered On"
+  "triggered_on": "Triggered On",
+  "transaction_tokens_involved": null,
+  "transaction_tokens_swapped": null
 }

src/containers/shared/components/Currency.tsx

@@ -4,6 +4,7 @@ import { TOKEN_ROUTE } from '../../App/routes'
 // https://xrpl.org/currency-formats.html#nonstandard-currency-codes
 const NON_STANDARD_CODE_LENGTH = 40
 const XRP = 'XRP'
+const LP_TOKEN_IDENTIFIER = '03'
 
 export interface Props {
   issuer?: string
@@ -26,10 +27,9 @@ const Currency = (props: Props) => {
     displaySymbol = true,
   } = props
 
-  const LPTokenIdentifier = '03'
   const currencyCode =
     currency?.length === NON_STANDARD_CODE_LENGTH &&
-    currency?.substring(0, 2) !== LPTokenIdentifier
+    currency?.substring(0, 2) !== LP_TOKEN_IDENTIFIER
       ? hexToString(currency)
       : currency
 

src/containers/shared/components/TxToken.tsx

@@ -1,3 +1,6 @@
+import { Trans } from 'react-i18next'
+import Currency from './Currency'
+
 import '../css/txlabel.scss'
 
 interface Props {
@@ -18,12 +21,28 @@ function getTokenPair(
     type === 'Payment'
   ) {
     const first =
-      amount?.amount && amount.amount !== fee ? amount.currency : undefined
+      amount?.amount && amount.amount !== fee ? (
+        <Currency currency={amount.currency} />
+      ) : undefined
     const second =
-      amount2?.amount && amount2.amount !== fee ? amount2.currency : undefined
+      amount2?.amount && amount2.amount !== fee ? (
+        <Currency currency={amount2.currency} />
+      ) : undefined
 
     if (first && second) {
-      return first + (type === 'Payment' ? ' for ' : ' and ') + second
+      return (
+        <Trans
+          i18nKey={
+            type === 'Payment'
+              ? 'transaction_tokens_swapped'
+              : 'transaction_tokens_involved'
+          }
+          components={{
+            Currency: first,
+            Currency2: second,
+          }}
+        />
+      )
     }
 
     return first || second
@@ -39,8 +58,8 @@ const TxToken = (props: Props) => {
       {getTokenPair(
         tx.type,
         tx.fee,
-        tx.details.instructions.amount,
-        tx.details.instructions.amount2,
+        tx.details?.instructions?.amount,
+        tx.details?.instructions?.amount2,
       )}
     </div>
   )

src/containers/shared/components/test/TxToken.test.tsx

@@ -0,0 +1,44 @@
+import { mount } from 'enzyme'
+import { I18nextProvider } from 'react-i18next'
+import i18n from '../../../../i18n/testConfigEnglish'
+import TxToken from '../TxToken'
+
+import withdrawUSDMock from '../Transaction/AMMWithdraw/test/mock_data/withdraw_usd.json'
+import withdrawXRPMock from '../Transaction/AMMWithdraw/test/mock_data/withdraw_xrp.json'
+import withdrawMock from '../Transaction/AMMWithdraw/test/mock_data/withdraw.json'
+import paymentMock from '../Transaction/Payment/test/mock_data/Payment.json'
+
+import summarizeTransaction from '../../../../rippled/lib/txSummary'
+
+describe('TxToken', () => {
+  const createWrapper = (transaction: any) =>
+    mount(
+      <I18nextProvider i18n={i18n}>
+        <TxToken tx={summarizeTransaction(transaction, true)} />
+      </I18nextProvider>,
+    )
+
+  it('to render for a Payment transaction', () => {
+    const wrapper = createWrapper(paymentMock)
+
+    expect(wrapper).toHaveText('\uE900 XRP')
+  })
+
+  it('to render for a NON Payment transaction with only issued currency', () => {
+    const wrapper = createWrapper(withdrawUSDMock)
+
+    expect(wrapper).toHaveText('USD')
+  })
+
+  it('to render for a NON Payment transaction with only XRP', () => {
+    const wrapper = createWrapper(withdrawXRPMock)
+
+    expect(wrapper).toHaveText('\uE900 XRP')
+  })
+
+  it('to render for a NON Payment transaction with multiple amounts', () => {
+    const wrapper = createWrapper(withdrawMock)
+
+    expect(wrapper).toHaveText('\uE900 XRP and USD')
+  })
+})