Merge branch 'staging' into entry-page

Author: mvadari

.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 <Link>node</Link> with type",
-  "transaction_balance_line_one": "It <1><0>{{action}}</0></1> a <3><0>{{currency}}</0></3> RippleState <5><0>{{node}}</0></5> between <7><0>{{account}}</0></7> and <9><0>{{counterAccount}}</0></9>",
+  "transaction_balance_line_one": "It {{action}} a <Currency/> RippleState <Link>node</Link> between <Account/> and <CounterAccount/>",
   "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 <Link>node</Link> 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 <5><0>{{node}}</0></5> owned by <7><0>{{account}}</0></7> with sequence # <9><0>{{sequence}}</0></9>",
+  "offer_node_meta": "It {{action}} a <Currency/> / <Currency2/> offer <Link>node</Link> 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

@@ -9,6 +9,7 @@ import { localizeNumber } from '../../../shared/utils'
 import { Account } from '../../../shared/components/Account'
 import { ENTRY_ROUTE } from '../../../App/routes'
 import { RouteLink } from '../../../shared/routing'
+import Currency from '../../../shared/components/Currency'
 import type { MetaRenderFunctionWithTx, MetaNode } from './types'
 
 const normalize = (value: number | string, currency: string): string =>
@@ -32,21 +33,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>
@@ -79,8 +77,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>
@@ -130,9 +133,6 @@ const render: MetaRenderFunctionWithTx = (
   )
   const invert =
     CURRENCY_ORDER.indexOf(getsCurrency) > CURRENCY_ORDER.indexOf(paysCurrency)
-  const pair = invert
-    ? `${getsCurrency}/${paysCurrency}`
-    : `${paysCurrency}/${getsCurrency}`
 
   if (
     action === 'created' &&
@@ -190,15 +190,34 @@ const render: MetaRenderFunctionWithTx = (
 
   return (
     <li key={`offer_node_meta_${index}`} className="meta-line">
-      <Trans i18nKey="offer_node_meta">
-        It {action} a <b>{pair}</b> offer
-        <RouteLink to={ENTRY_ROUTE} params={{ id: node.LedgerIndex }}>
-          node
-        </RouteLink>
-        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} />,
+          Link: (
+            <RouteLink to={ENTRY_ROUTE} params={{ id: node.LedgerIndex }}>
+              {/* Content from i18n */}
+            </RouteLink>
+          ),
+        }}
+      />
       <ul>{lines}</ul>
     </li>
   )

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

@@ -6,6 +6,7 @@ import {
 } from '../../../shared/utils'
 import { RouteLink } from '../../../shared/routing'
 import { ENTRY_ROUTE } from '../../../App/routes'
+import Currency from '../../../shared/components/Currency'
 import type { MetaRenderFunction } from './types'
 
 const render: MetaRenderFunction = (_t, language, action, node, index) => {
@@ -20,17 +21,20 @@ const render: MetaRenderFunction = (_t, language, action, node, index) => {
   } = computeRippleStateBalanceChange(node)
 
   const line1 = (
-    <Trans i18nKey="transaction_balance_line_one">
-      It {action} a <b>{currency}</b>
-      ripplestate
-      <RouteLink to={ENTRY_ROUTE} params={{ id: node.LedgerIndex }}>
-        node
-      </RouteLink>
-      between
-      <Account account={account} />
-      and
-      <Account account={counterAccount} />
-    </Trans>
+    <Trans
+      i18nKey="transaction_balance_line_one"
+      values={{ action }}
+      components={{
+        Currency: <Currency currency={currency} />,
+        Link: (
+          <RouteLink to={ENTRY_ROUTE} params={{ id: node.LedgerIndex }}>
+            {/* Content from i18n */}
+          </RouteLink>
+        ),
+        Account: <Account account={account} />,
+        CounterAccount: <Account account={counterAccount} />,
+      }}
+    />
   )
 
   const line2 = change ? (