fix: use Currency in the metadata description

.vscode/settings.json

@@ -58,7 +58,7 @@
     "chopa",
     "chopb",
     "cimode",
-    "Clawback",
+    "clawback",
     "clsx",
     "ctid",
     "CUSTOMNETWORK",
@@ -76,13 +76,16 @@
     "nftoken",
     "nodemodules",
     "pageview",
+    "paychannel",
     "paychannels",
-    "Permissioned",
+    "permissioned",
+    "setfee",
     "stylelint",
     "svgr",
     "topojson",
     "trustlines",
     "Txns",
+    "unauth",
     "VITE",
     "Xahau",
     "xchain",

public/locales/ca-CA/translations.json

@@ -37,7 +37,6 @@
   "30D": "30D",
   "total_transactions": "# de Txns",
   "total_fees": "Total de comissions",
-  "async_component_timedout": "La càrrega del component ha trigat més del que s'esperava",
   "async_component_failed": "Error en carregar el component",
   "account_not_found": "No s'ha trobat el compte",
   "account_empty_title": "No s'ha proporcionat l'ID del compte",

public/locales/en-US/translations.json

@@ -38,7 +38,6 @@
   "30D": "30D",
   "total_transactions": "# of Txns",
   "total_fees": "Total Fees",
-  "async_component_timedout": "Loading component took longer than expected",
   "async_component_failed": "Failed to load Component",
   "account_not_found": "Account not found",
   "account_empty_title": "No account ID was supplied",
@@ -275,7 +274,7 @@
   "number_of_affected_node": "It affected {{count}} nodes in the ledger:",
   "nodes_type": "{{action}} nodes",
   "node_meta_type": "It {{action}} a node with type",
-  "transaction_balance_line_one": "It <1><0>{{action}}</0></1> a <3><0>{{currency}}</0></3> RippleState node between <5><0>{{account}}</0></5> and <7><0>{{counterAccount}}</0></7>",
+  "transaction_balance_line_one": "It <1><0>{{action}}</0></1> a <4><0>{{currency}}</0></4> RippleState node between <6><0>{{account}}</0></6> and <8><0>{{counterAccount}}</0></8>",
   "transaction_balance_line_two": "Balance changed by <1><0>{{change}}</0></1> from <3><0>{{previousBalance}}</0></3> to <5><0>{{finalBalance}}</0></5>",
   "transaction_outstanding_balance_line_two": "Outstanding balance changed by <1><0>{{change}}</0></1> from <3><0>{{previousBalance}}</0></3> to <5><0>{{finalBalance}}</0></5>",
   "transaction_owned_directory": "It {{action}} a DirectoryNode node owned by",
@@ -287,13 +286,13 @@
   "account_balance_increased": "Balance increased by <1><0>{{difference}}</0><1><0>{{currency}}</0></1></1> from <3><0>{{previous}}</0><1><0>{{currency}}</0></1></3> to <5><0>{{final}}</0><1><0>{{currency}}</0></1></5>",
   "account_balance_decreased": "Balance decreased by <1><0>{{difference}}</0><1><0>{{currency}}</0></1></1> from <3><0>{{previous}}</0><1><0>{{currency}}</0></1></3> to <5><0>{{final}}</0><1><0>{{currency}}</0></1></5>",
   "decreased_from_to": "decreased by <1><0>{{change}}</0></1> from <3><0>{{previous}}</0></3> to <5><0>{{final}}</0></5>",
-  "offer_node_meta": "It <1><0>{{action}}</0></1> a <3><0>{{pair}}</0></3> offer node owned by <5><0>{{account}}</0></5> with sequence # <7><0>{{sequence}}</0></7>",
+  "offer_node_meta": "It {{action}} a <Currency/> / <Currency2/> offer node owned by <Account/> with sequence # {{sequence}}",
   "offer_replaces": "This offer replaces the existing offer #",
-  "offer_partially_filled": "The offer was partially filled",
-  "offer_filled": "The offer was filled",
-  "offer_cancelled": "The offer was cancelled",
+  "offer_partially_filled": "The offer was partially filled.",
+  "offer_filled": "The offer was filled.",
+  "offer_cancelled": "The offer was cancelled.",
   "offer_replaced": "This offer was replaced by the new offer #",
-  "offer_lack_of_funds": "The offer was partially filled, then cancelled due to lack of funds",
+  "offer_lack_of_funds": "The offer was partially filled, then cancelled due to lack of funds.",
   "transaction_sequence": "The transaction's sequence number is",
   "trust_set_description": "It establishes <1><0>{{amount}}</0></1> as the maximum amount of <3><0>{{currency}}</0></3> from <5><0>{{issuer}}</0></5> that <7><0>{{account}}</0></7> is willing to hold",
   "payment_desc_line_1": "The payment is from <source/> to <destination/>",

public/locales/es-ES/translations.json

@@ -37,7 +37,6 @@
   "30D": "30D",
   "total_transactions": "# de Txs",
   "total_fees": "Comisiones Totales",
-  "async_component_timedout": "Cargar el componente tomó más tiempo del esperado",
   "async_component_failed": "Fallo al cargar Componente",
   "account_not_found": "Cuenta no encontrada",
   "account_empty_title": "El ID de la cuenta no fue facilitado",

public/locales/fr-FR/translations.json

@@ -37,7 +37,6 @@
   "30D": "30J",
   "total_transactions": "# de Txns",
   "total_fees": "Frais Totaux",
-  "async_component_timedout": "Le chargement du composant a pris plus de temps que prévu",
   "async_component_failed": "Impossible de charger le composant",
   "account_not_found": "Compte non trouvé",
   "account_empty_title": "Aucun id de compte n'a été fourni",

public/locales/ja-JP/translations.json

@@ -37,7 +37,6 @@
   "30D": "30日",
   "total_transactions": "トランザクション数",
   "total_fees": "合計トランザクション手数料",
-  "async_component_timedout": "コンポーネントの読み込みに通常以上の時間がかかりました",
   "async_component_failed": "コンポーネントの読み込みに失敗しました",
   "account_not_found": "アカウントが見つかりません",
   "account_empty_title": "アカウントIDが入力されていません",

public/locales/ko-KR/translations.json

@@ -38,7 +38,6 @@
   "30D": "30일",
   "total_transactions": "트랜잭션 수",
   "total_fees": "총 수수료",
-  "async_component_timedout": "컴포넌트 로딩이 예상보다 오래 걸렸습니다",
   "async_component_failed": "컴포넌트 로드 실패",
   "account_not_found": "계정을 찾을 수 없습니다",
   "account_empty_title": "계정 ID가 제공되지 않았습니다",

public/locales/my-MM/translations.json

@@ -38,7 +38,6 @@
   "30D": "၃၀ရက်",
   "total_transactions": "ငွေလွှဲမှု အရေအတွက်",
   "total_fees": "စုစုပေါင်း အခကြေးငွေ",
-  "async_component_timedout": "ကော်မပိုနင့် ဖွင့်ရန် မျှော်လင့်ထားသည်ထက် ပိုကြာနေပါသည်",
   "async_component_failed": "ကော်မပိုနင့် ဖွင့်၍မရပါ",
   "account_not_found": "အကောင့် မတွေ့ရှိပါ",
   "account_empty_title": "အကောင့် ID ထည့်သွင်းထားခြင်း မရှိပါ",

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

@@ -7,6 +7,7 @@ import {
 } from '../../../shared/transactionUtils'
 import { localizeNumber } from '../../../shared/utils'
 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 =>
@@ -30,21 +31,18 @@ const renderChanges = (
   const changePays = normalize(prevPays - finalPays, paysCurrency)
   const changeGets = normalize(prevGets - finalGets, getsCurrency)
 
-  const renderIssuer = (issuer) =>
-    issuer ? (
-      <>
-        .
-        <Account account={issuer} />
-      </>
-    ) : null
-
   if (prevPays && finalPays) {
     const options = { ...CURRENCY_OPTIONS, currency: paysCurrency }
     meta.push(
       <li key={`taker_pays_decreased_${index}`} className="meta-line">
         <span className="field">TakerPays </span>
-        <b>{paysCurrency}</b>
-        {renderIssuer(final.TakerPays.issuer)}{' '}
+        <b>
+          <Currency
+            currency={paysCurrency}
+            issuer={final.TakerPays.issuer}
+            displaySymbol={false}
+          />
+        </b>{' '}
         <Trans i18nKey="decreased_from_to">
           decreased by
           <b>{{ change: localizeNumber(changePays, language, options) }}</b>
@@ -77,8 +75,13 @@ const renderChanges = (
     meta.push(
       <li key={`taker_gets_decreased_${index}`} className="meta-line">
         <span className="field">TakerGets </span>
-        <b>{getsCurrency}</b>
-        {renderIssuer(final.TakerGets.issuer)}{' '}
+        <b>
+          <Currency
+            currency={getsCurrency}
+            issuer={final.TakerGets.issuer}
+            displaySymbol={false}
+          />
+        </b>{' '}
         <Trans i18nKey="decreased_from_to">
           decreased by
           <b>{{ change: localizeNumber(changeGets, language, options) }}</b>
@@ -128,9 +131,6 @@ const render: MetaRenderFunctionWithTx = (
   )
   const invert =
     CURRENCY_ORDER.indexOf(getsCurrency) > CURRENCY_ORDER.indexOf(paysCurrency)
-  const pair = invert
-    ? `${getsCurrency}/${paysCurrency}`
-    : `${paysCurrency}/${getsCurrency}`
 
   if (
     action === 'created' &&
@@ -188,12 +188,29 @@ const render: MetaRenderFunctionWithTx = (
 
   return (
     <li key={`offer_node_meta_${index}`} className="meta-line">
-      <Trans i18nKey="offer_node_meta">
-        It {action} a <b>{pair}</b>
-        owned by
-        <Account account={fields.Account} />
-        with sequence # <b>{{ sequence: fields.Sequence }}</b>
-      </Trans>
+      <Trans
+        i18nKey="offer_node_meta"
+        values={{ action, sequence: fields.Sequence }}
+        components={{
+          Currency: (
+            <Currency
+              currency={(invert ? getsCurrency : paysCurrency) || 'XRP'}
+              issuer={invert ? tx.TakerGets?.issuer : tx.TakerPays?.issuer}
+              displaySymbol={false}
+              shortenIssuer
+            />
+          ),
+          Currency2: (
+            <Currency
+              currency={(invert ? paysCurrency : getsCurrency) || 'XRP'}
+              issuer={invert ? tx.TakerPays?.issuer : tx.TakerGets?.issuer}
+              displaySymbol={false}
+              shortenIssuer
+            />
+          ),
+          Account: <Account account={fields.Account} />,
+        }}
+      />
       <ul>{lines}</ul>
     </li>
   )

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

@@ -4,6 +4,7 @@ import {
   localizeNumber,
   computeRippleStateBalanceChange,
 } from '../../../shared/utils'
+import Currency from '../../../shared/components/Currency'
 import type { MetaRenderFunction } from './types'
 
 const render: MetaRenderFunction = (_t, language, action, node, index) => {
@@ -19,8 +20,11 @@ const render: MetaRenderFunction = (_t, language, action, node, index) => {
 
   const line1 = (
     <Trans i18nKey="transaction_balance_line_one">
-      It {action} a <b>{currency}</b>
-      ripplestate node between
+      It {action} a{' '}
+      <b>
+        <Currency currency={currency} />
+      </b>
+      RippleState node between
       <Account account={account} />
       and
       <Account account={counterAccount} />

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

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { TFunction } from 'i18next'
 import renderAccountRoot from './AccountRoot'
 import renderDirectoryNode from './DirectoryNode'
 import renderOffer from './Offer'
@@ -10,7 +11,12 @@ import renderMPTokenIssuance from './MPTokenIssuance'
 import { groupAffectedNodes } from '../../../shared/transactionUtils'
 import { useLanguage } from '../../../shared/hooks'
 
-const renderDefault = (t, action, node, index) => (
+const renderDefault = (
+  t: TFunction<'translations', undefined>,
+  action: string,
+  node: any,
+  index: number,
+) => (
   <li key={`${node.LedgerEntryType}_${index}`} className="meta-line">
     {t('node_meta_type', { action })} <b>{node.LedgerEntryType}</b>
   </li>
@@ -20,7 +26,7 @@ export const TransactionMeta: FC<{ data: any }> = ({ data }) => {
   const language = useLanguage()
   const { t } = useTranslation()
 
-  const renderNodesMeta = (action, list, tx) => {
+  const renderNodesMeta = (action: string, list: any[], tx: any) => {
     const meta = list.map((node, index) => {
       switch (node.LedgerEntryType) {
         case 'AccountRoot':

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

@@ -36,7 +36,7 @@ describe('TransactionMeta container', () => {
 
     const listItems = container.querySelectorAll('li')
 
-    // Check first list item contains expected content
+    // Check first list item contains expected content (AccountRoot)
     expect(listItems[0]).toHaveTextContent('owned_account_root')
     expect(listItems[0]).toHaveTextContent('rUmustd4TbkjaEuS7S1damozpBEREgRz9z')
     expect(listItems[0]).toHaveTextContent('Balance decreased by')
@@ -62,10 +62,8 @@ describe('TransactionMeta container', () => {
     expect(listItems[6]).toHaveTextContent('transaction_owned_directory')
     expect(listItems[6]).toHaveTextContent('rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe')
 
-    // Check offer modification
-    expect(listItems[7]).toHaveTextContent('XRP/CNY')
-    expect(listItems[7]).toHaveTextContent('rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq')
-    expect(listItems[7]).toHaveTextContent('1181517')
+    // Check first offer modification
+    expect(listItems[7]).toHaveTextContent('offer_node_meta')
 
     expect(listItems[8]).toHaveTextContent('offer_partially_filled')
 
@@ -79,11 +77,7 @@ describe('TransactionMeta container', () => {
     )
 
     // Check second offer modification
-    expect(listItems[11]).toHaveTextContent('XRP/CNY')
-    expect(listItems[11]).toHaveTextContent(
-      'rUmustd4TbkjaEuS7S1damozpBEREgRz9z',
-    )
-    expect(listItems[11]).toHaveTextContent('5804')
+    expect(listItems[11]).toHaveTextContent('offer_node_meta')
 
     expect(listItems[12]).toHaveTextContent('offer_partially_filled')
 
@@ -95,25 +89,25 @@ describe('TransactionMeta container', () => {
 
     // Check ripplestate nodes
     expect(listItems[15]).toHaveTextContent('CNY')
-    expect(listItems[15]).toHaveTextContent('ripplestate')
+    expect(listItems[15]).toHaveTextContent('RippleState')
     expect(listItems[15]).toHaveTextContent(
       'rUmustd4TbkjaEuS7S1damozpBEREgRz9z',
     )
 
     expect(listItems[16]).toHaveTextContent('Balance changed by')
 
     expect(listItems[17]).toHaveTextContent('CNY')
-    expect(listItems[17]).toHaveTextContent('ripplestate')
+    expect(listItems[17]).toHaveTextContent('RippleState')
 
     expect(listItems[18]).toHaveTextContent('Balance changed by')
 
     expect(listItems[19]).toHaveTextContent('CNY')
-    expect(listItems[19]).toHaveTextContent('ripplestate')
+    expect(listItems[19]).toHaveTextContent('RippleState')
 
     expect(listItems[20]).toHaveTextContent('Balance changed by')
 
     expect(listItems[21]).toHaveTextContent('CNY')
-    expect(listItems[21]).toHaveTextContent('ripplestate')
+    expect(listItems[21]).toHaveTextContent('RippleState')
 
     expect(listItems[22]).toHaveTextContent('Balance changed by')
   })