fix: use Currency in the metadata description

.vscode/settings.json

@@ -65,6 +65,7 @@
     "Decomp",
     "esbuild",
     "fakenode",
+    "fullfillment",
     "Hant",
     "healthz",
     "hexbin",
@@ -74,12 +75,19 @@
     "nftoken",
     "nodemodules",
     "pageview",
+    "paychannel",
     "paychannels",
+    "paystring",
     "paystrings",
+    "setfee",
     "stylelint",
     "svgr",
     "topojson",
+    "trustlines",
+    "Txns",
+    "unauth",
     "VITE",
+    "Xahau",
     "xchain",
     "xchainbridge"
   ]

public/locales/ca-CA/translations.json

@@ -40,7 +40,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

@@ -40,7 +40,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",
@@ -246,7 +245,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_owned_directory": "It {{action}} a DirectoryNode node owned by",
   "transaction_unowned_directory": "It {{action}} a DirectoryNode node",
@@ -255,13 +254,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/>",
@@ -279,12 +278,12 @@
   "escrow_is_from": "The escrow is from <1><0>{{account}}</0></1> to <3><0>{{destination}}</0></3>",
   "escrow_is_created_by": "The escrow was created by <1><0>{{account}}</0></1> and the funds will be returned to the same account",
   "escrowed_amount": "It escrowed",
-  "escrow_condition": "The escrow has a fullfilment condition of",
+  "escrow_condition": "The escrow has a fullfillment condition of",
   "describe_cancel_after": "It can be cancelled after",
   "describe_finish_after": "It can be finished after",
   "escrow_completion_desc": "Completion was triggered by",
   "escrow_completion_desc_2": "The escrowed amount of <1><0>{{amount}}</0></1> was delivered to <3><0>{{destination}}</0></3>",
-  "escrow_finish_fullfillment_desc": "The escrow condition is fullfilled by",
+  "escrow_finish_fullfillment_desc": "The escrow condition is fulfilled by",
   "escrow_cancellation_desc": "Cancellation was triggered by",
   "escrow_cancellation_desc_2": "The escrowed amount of <1><0>{{amount}}</0></1> was returned to <3><0>{{owner}}</0></3>",
   "escrow_after_transaction_cost": "after transaction cost",

public/locales/es-ES/translations.json

@@ -40,7 +40,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

@@ -39,8 +39,7 @@
   "24H": "24H",
   "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",
+  "total_fees": "Frais Totaux",\
   "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

@@ -40,7 +40,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

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

src/containers/Transactions/DetailTab/Meta/DirectoryNode.jsx → src/containers/Transactions/DetailTab/Meta/DirectoryNode.tsx

@@ -1,6 +1,12 @@
+import { TFunction } from 'i18next'
 import { Account } from '../../../shared/components/Account'
 
-const render = (t, action, node, index) => {
+const render = (
+  t: TFunction<'translations', undefined>,
+  action: string,
+  node: any,
+  index: number,
+) => {
   const fields = node.FinalFields || node.NewFields
   return (
     <li key={`directory_${index}`} className="meta-line">

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

@@ -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'
 
 const normalize = (value, currency) =>
   currency === 'XRP' ? (value / XRP_BASE).toString() : value
@@ -24,21 +25,18 @@ const renderChanges = (t, language, node, index) => {
   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>
@@ -71,8 +69,13 @@ const renderChanges = (t, language, node, index) => {
     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>
@@ -115,9 +118,6 @@ const render = (t, language, action, node, index, tx) => {
   )
   const invert =
     CURRENCY_ORDER.indexOf(getsCurrency) > CURRENCY_ORDER.indexOf(paysCurrency)
-  const pair = invert
-    ? `${getsCurrency}/${paysCurrency}`
-    : `${paysCurrency}/${getsCurrency}`
 
   if (
     action === 'created' &&
@@ -175,12 +175,35 @@ const render = (t, language, action, node, index, tx) => {
 
   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 ? tx.TakerGets.currency : tx.TakerPays.currency) ||
+                'XRP'
+              }
+              issuer={invert ? tx.TakerGets.issuer : tx.TakerPays.issuer}
+              displaySymbol={false}
+              shortenIssuer
+            />
+          ),
+          Currency2: (
+            <Currency
+              currency={
+                (invert ? tx.TakerPays.currency : tx.TakerGets.currency) ||
+                '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.jsx

@@ -1,6 +1,7 @@
 import { Trans } from 'react-i18next'
 import { Account } from '../../../shared/components/Account'
 import { localizeNumber, computeBalanceChange } from '../../../shared/utils'
+import Currency from '../../../shared/components/Currency'
 
 const render = (t, language, action, node, index) => {
   const {
@@ -15,8 +16,11 @@ const render = (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'
@@ -8,7 +9,12 @@ import renderPayChannel from './PayChannel'
 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>
@@ -18,7 +24,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/shared/components/Transaction/OfferCreate/Description.tsx

@@ -4,14 +4,16 @@ import {
   DATE_OPTIONS,
   CURRENCY_ORDER,
   XRP_BASE,
-  normalizeAmount,
 } from '../../../transactionUtils'
 import { Account } from '../../Account'
 import {
   TransactionDescriptionComponent,
   TransactionDescriptionProps,
 } from '../types'
 import { convertRippleDate } from '../../../../../rippled/lib/utils'
+import Currency from '../../Currency'
+import { Amount } from '../../Amount'
+import { formatAmount } from '../../../../../rippled/lib/txSummary/formatAmount'
 
 const normalize = (amount: any) => amount.value || amount / XRP_BASE
 
@@ -33,9 +35,37 @@ const Description: TransactionDescriptionComponent = (
 
   if (invert) {
     rate = 1 / rate
-    pair = `${getsCurrency}/${paysCurrency}`
+    pair = (
+      <small>
+        <Currency
+          currency={data.tx.TakerGets.currency || 'XRP'}
+          issuer={data.tx.TakerGets.issuer}
+          displaySymbol={false}
+        />
+        /
+        <Currency
+          currency={data.tx.TakerPays.currency || 'XRP'}
+          issuer={data.tx.TakerPays.issuer}
+          displaySymbol={false}
+        />
+      </small>
+    )
   } else {
-    pair = `${paysCurrency}/${getsCurrency}`
+    pair = (
+      <small>
+        <Currency
+          currency={data.tx.TakerPays.currency || 'XRP'}
+          issuer={data.tx.TakerPays.issuer}
+          displaySymbol={false}
+        />
+        /
+        <Currency
+          currency={data.tx.TakerGets.currency || 'XRP'}
+          issuer={data.tx.TakerGets.issuer}
+          displaySymbol={false}
+        />
+      </small>
+    )
   }
 
   const renderLine4 = () => {
@@ -66,21 +96,19 @@ const Description: TransactionDescriptionComponent = (
           <Account account={data.tx.Account} />
           offered to pay
           <b>
-            {normalizeAmount(data.tx.TakerGets, language)}
-            <small>{data.tx.TakerGets.currency || 'XRP'}</small>
+            <Amount value={formatAmount(data.tx.TakerGets)} />
           </b>
           in order to receive
           <b>
-            {normalizeAmount(data.tx.TakerPays, language)}
-            <small>{data.tx.TakerPays.currency || 'XRP'}</small>
+            <Amount value={formatAmount(data.tx.TakerPays)} />
           </b>
         </Trans>
       </div>
       <div key="line2">
         {t('offer_create_desc_line_2')}
         <b>
           <span> {rate.toPrecision(5)}</span>
-          <small>{pair}</small>
+          {pair}
         </b>
       </div>
       {data.tx.OfferSequence && (