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

@@ -36,8 +36,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

@@ -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가 제공되지 않았습니다",

src/containers/Accounts/AccountAsset/styles.scss

@@ -115,8 +115,8 @@
 }
 
 .account-asset-table-wrapper-fixed .account-asset-table {
-  overflow: auto;               /* Vertical scroll when overflowing, keep horizontal if needed */
-  max-height: 255px;            /* Fixed viewport height for the table area */
+  overflow: auto; /* Vertical scroll when overflowing, keep horizontal if needed */
+  max-height: 255px; /* Fixed viewport height for the table area */
   background: transparent;
   -webkit-overflow-scrolling: touch;
 
@@ -161,7 +161,10 @@
   z-index: 2;
   top: 0;
   padding: 10px 12px;
-  backdrop-filter: blur(100px); /* As table rows scroll under the header, they appear blurred behind it */
+  backdrop-filter: blur(
+    100px
+  ); /* As table rows scroll under the header, they appear blurred behind it */
+
   color: $black-50;
   font-size: 12px;
   text-align: left;

src/containers/Accounts/AccountSummary/styles.scss

@@ -338,7 +338,7 @@
           grid-row: 1;
         }
 
-        > .details-box:nth-child(n+3) {
+        > .details-box:nth-child(n + 3) {
           grid-column: 1 / span 2;
         }
       }
@@ -371,7 +371,7 @@
         }
 
         /* Ensure all boxes span full width in grid */
-        > .details-box:nth-child(n+3) {
+        > .details-box:nth-child(n + 3) {
           grid-column: 1;
         }
       }
@@ -397,8 +397,14 @@
         padding: 12px;
         gap: 8px;
       }
-      .details-label { font-size: 12px; }
-      .details-value { font-size: 14px; }
+
+      .details-label {
+        font-size: 12px;
+      }
+
+      .details-value {
+        font-size: 14px;
+      }
     }
 
     /* Extra narrow screens - force better text wrapping */
@@ -442,12 +448,16 @@
         flex: none;
       }
 
-      .xrp, .usd, .reserve {
+      .xrp,
+      .usd,
+      .reserve {
         height: auto;
         padding: 20px;
       }
 
-      .balance-value { font-size: 18px; }
+      .balance-value {
+        font-size: 18px;
+      }
 
       .balance-icon {
         width: 20px;
@@ -458,7 +468,10 @@
     .properties {
       .properties-header {
         gap: 8px;
-        .properties-toggle { padding: 4px; }
+
+        .properties-toggle {
+          padding: 4px;
+        }
 
         .properties-arrow {
           width: 16px;
@@ -476,15 +489,22 @@
           padding: 16px;
         }
 
-        .flags-card { grid-column: auto; }
-        .signers-card { grid-column: auto; }
+        .flags-card {
+          grid-column: auto;
+        }
 
-        .flags-list, .signers-list {
+        .signers-card {
+          grid-column: auto;
+        }
+
+        .flags-list,
+        .signers-list {
           max-height: calc(5 * 64px);
           padding-inline: 4px;
         }
 
-        .flag-item, .signer-item {
+        .flag-item,
+        .signer-item {
           padding: 10px;
         }
       }
@@ -494,7 +514,9 @@
   @media (max-width: $tablet-portrait-upper-boundary) {
     .properties {
       .properties-header {
-        h3 { font-size: 18px; }
+        h3 {
+          font-size: 18px;
+        }
       }
 
       .properties-grid .card-header .header-title {

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,29 @@ 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 ? 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.jsx

@@ -4,6 +4,7 @@ import {
   localizeNumber,
   computeRippleStateBalanceChange,
 } from '../../../shared/utils'
+import Currency from '../../../shared/components/Currency'
 
 const render = (t, language, action, node, index) => {
   const {
@@ -18,8 +19,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'
@@ -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':