feat: add amendments list page

public/locales/en-US/translations.json

@@ -6,6 +6,7 @@
   "assets.no_issued_message": "No tokens found.",
   "assets.no_nfts_message": "No NFTs found.",
   "network": "Network",
+  "amendments": "Amendments",
   "network_name": "Unknown Network",
   "network_name_testnet": "Testnet",
   "network_name_mainnet": "Mainnet",
@@ -326,6 +327,17 @@
   "quorum": "quorum",
   "load": "load",
   "latency": "latency",
+  "amendment_id": "id",
+  "amendment_name": "name",
+  "voters": "voters",
+  "threshold": "threshold",
+  "consensus": "consensus",
+  "enabled": "enabled",
+  "on_tx": "on (tx)",
+  "voting": "Voting",
+  "yes": "Yes",
+  "no": "No",
+  "deprecated": "deprecated",
   "domain": "domain",
   "unl": "unl",
   "fee": "fee",
@@ -486,17 +498,12 @@
   "api_version": "API Version",
   "triggered_on": "Triggered On",
   "name": "name",
-  "amendment_id": "Amendment ID",
   "introduced_in": "Introduced In",
-  "threshold": "threshold",
-  "voting": "Voting",
   "yeas": "yeas",
   "nays": "nays",
   "eta": "eta",
-  "consensus": "consensus",
   "amendment_summary": "Amendment Summary",
   "not": "not",
-  "enabled": "Enabled",
   "tx": "tx",
   "all": "all",
   "yeas_count": "# of Yea Votes: {{yeas_count}}",

public/locales/es-ES/translations.json

@@ -6,6 +6,7 @@
   "assets.no_issued_message": "No se han encontrado tokens.",
   "assets.no_nfts_message": "NFTs no encontrados.",
   "network": "Red",
+  "amendments": null,
   "network_name": "Red Desconocida",
   "network_name_testnet": "Testnet",
   "network_name_mainnet": "Mainnet",
@@ -322,6 +323,17 @@
   "quorum": "cuórum",
   "load": "carga",
   "latency": "latencia",
+  "amendment_id": null,
+  "amendment_name": null,
+  "voters": null,
+  "threshold": null,
+  "consensus": null,
+  "enabled": null,
+  "on_tx": null,
+  "voting": null,
+  "yes": null,
+  "no": null,
+  "deprecated": null,
   "domain": "dominio",
   "unl": "unl",
   "fee": "comisión",
@@ -482,17 +494,12 @@
   "api_version": "Versión API",
   "triggered_on": "Activado En",
   "name": null,
-  "amendment_id": null,
   "introduced_in": null,
-  "threshold": null,
-  "voting": null,
   "yeas": null,
   "nays": null,
   "eta": null,
-  "consensus": null,
   "amendment_summary": null,
   "not_enabled": null,
-  "enabled": null,
   "enabled_on": null,
   "tx": null,
   "yeas_all": null,

public/locales/fr-FR/translations.json

@@ -6,6 +6,7 @@
   "assets.no_issued_message": "Aucun token trouvé",
   "assets.no_nfts_message": "Aucun NFT trouvé.",
   "network": "Réseau",
+  "amendments": null,
   "network_name": "Réseau inconnu",
   "network_name_testnet": "Testnet",
   "network_name_mainnet": "Mainnet",
@@ -324,6 +325,17 @@
   "quorum": "quorum",
   "load": "charger",
   "latency": "latence",
+  "amendment_id": null,
+  "amendment_name": null,
+  "voters": null,
+  "threshold": null,
+  "consensus": null,
+  "enabled": null,
+  "on_tx": null,
+  "voting": null,
+  "yes": null,
+  "no": null,
+  "deprecated": null,
   "domain": "domaine",
   "unl": "unl",
   "fee": "frais",
@@ -485,16 +497,11 @@
   "api_version": "Version API",
   "triggered_on": "Déclenché Par",
   "name": null,
-  "amendment_id": null,
   "introduced_in": null,
-  "threshold": null,
-  "voting": null,
   "yeas": null,
   "nays": null,
   "eta": null,
-  "consensus": null,
   "amendment_summary": null,
-  "enabled": null,
   "not": null,
   "tx": null,
   "all": null,

public/locales/ja-JP/translations.json

@@ -6,6 +6,7 @@
   "assets.no_issued_message": "トークンが見つかりません。",
   "assets.no_nfts_message": "NFTが見つかりません。",
   "network": "ネットワーク",
+  "amendments": null,
   "network_name": "不明なネットワーク",
   "network_name_testnet": "Testnet",
   "network_name_mainnet": "Mainnet",
@@ -324,6 +325,17 @@
   "quorum": "定足数",
   "load": "読み込み",
   "latency": "遅延",
+  "amendment_id": null,
+  "amendment_name": null,
+  "voters": null,
+  "threshold": null,
+  "consensus": null,
+  "enabled": null,
+  "on_tx": null,
+  "voting": null,
+  "yes": null,
+  "no": null,
+  "deprecated": null,
   "domain": "ドメイン",
   "unl": "unl",
   "fee": "手数料",
@@ -484,16 +496,11 @@
   "api_version": "APIバージョン",
   "triggered_on": null,
   "name": null,
-  "amendment_id": null,
   "introduced_in": null,
-  "threshold": null,
-  "voting": null,
   "yeas": null,
   "nays": null,
   "eta": null,
-  "consensus": null,
   "amendment_summary": null,
-  "enabled": null,
   "not": null,
   "tx": null,
   "all": null,

public/locales/ko-KR/translations.json

@@ -7,6 +7,7 @@
   "no_tokens_message": "토큰을 찾을 수 없습니다",
   "assets.no_nfts_message": "NFT를 찾을 수 없습니다.",
   "network": "네트워크",
+  "amendments": null,
   "paystring_network": "네트워크",
   "network_name": "알 수 없는 네트워크",
   "network_name_testnet": "Testnet",
@@ -323,6 +324,17 @@
   "quorum": "쿼럼",
   "load": "로드",
   "latency": "레이턴시",
+  "amendment_id": null,
+  "amendment_name": null,
+  "voters": null,
+  "threshold": null,
+  "consensus": null,
+  "enabled": null,
+  "on_tx": null,
+  "voting": null,
+  "yes": null,
+  "no": null,
+  "deprecated": null,
   "domain": "도메인",
   "unl": "unl",
   "fee": "수수료",
@@ -482,16 +494,11 @@
   "api_version": "API 버전",
   "triggered_on": "Triggered On",
   "name": null,
-  "amendment_id": null,
   "introduced_in": null,
-  "threshold": null,
-  "voting": null,
   "yeas": null,
   "nays": null,
   "eta": null,
-  "consensus": null,
   "amendment_summary": null,
-  "enabled": null,
   "not": null,
   "tx": null,
   "all": null,

src/containers/Amendment/index.tsx

@@ -107,7 +107,7 @@ export const Amendment = () => {
   if (error) {
     const message = getErrorMessage(error)
     body = <NoMatch title={message.title} hints={message.hints} />
-  } else if (data?.id && validators.length) {
+  } else if (data?.id && validators instanceof Array) {
     body = (
       <>
         <div className="summary">

src/containers/Amendments/AmendmentsTable.tsx

@@ -0,0 +1,126 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AMENDMENT_ROUTE, TRANSACTION_ROUTE } from '../App/routes'
+import { Loader } from '../shared/components/Loader'
+import { useLanguage } from '../shared/hooks'
+import { RouteLink } from '../shared/routing'
+import { localizeDate } from '../shared/utils'
+import { AmendmentData, Voter } from '../shared/vhsTypes'
+
+const DATE_OPTIONS_AMENDMENTS = {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  timeZone: 'UTC',
+}
+
+const DEFAULT_EMPTY_VALUE = '--'
+
+export const AmendmentsTable: FC<{
+  amendments: AmendmentData[] | undefined
+}> = ({ amendments }) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+
+  const renderEnabled = (enabled: boolean) =>
+    enabled ? (
+      <span className="badge yes">{t('yes')}</span>
+    ) : (
+      <span className="badge no">{t('no')}</span>
+    )
+
+  const renderOnTx = (amendment) => {
+    if (amendment.voted) {
+      return <span className="voting">{t('voting')}</span>
+    }
+
+    if (amendment.date) {
+      const dateLocalized = localizeDate(
+        new Date(amendment.date),
+        language,
+        DATE_OPTIONS_AMENDMENTS,
+      )
+      return amendment.tx_hash ? (
+        <RouteLink
+          to={TRANSACTION_ROUTE}
+          params={{ identifier: amendment.tx_hash }}
+        >
+          {dateLocalized}
+        </RouteLink>
+      ) : (
+        <span>{dateLocalized}</span>
+      )
+    }
+
+    return DEFAULT_EMPTY_VALUE
+  }
+
+  const renderName = (name: string, id: string, deprecated: boolean) =>
+    deprecated ? (
+      <div className="name-deprecated">
+        <span className="name-text text-truncate">
+          <RouteLink to={AMENDMENT_ROUTE} params={{ identifier: id }}>
+            {name}
+          </RouteLink>
+        </span>
+        <span className="deprecated badge">{t('deprecated')}</span>
+      </div>
+    ) : (
+      <span className="name-text">
+        <RouteLink to={AMENDMENT_ROUTE} params={{ identifier: id }}>
+          {name}
+        </RouteLink>
+      </span>
+    )
+
+  const getVoter = (voted: Voter | undefined) => {
+    if (!voted) return DEFAULT_EMPTY_VALUE
+    return voted.validators.filter((val) => val.unl !== false).length
+  }
+
+  const renderAmendment = (amendment, index) => (
+    <tr key={amendment.id}>
+      <td className="count">{index + 1}</td>
+      <td className="version">
+        {amendment.rippled_version ?? DEFAULT_EMPTY_VALUE}
+      </td>
+      <td className="amendment-id text-truncate">{amendment.id}</td>
+      <td className="name text-truncate">
+        {renderName(amendment.name, amendment.id, amendment.deprecated)}
+      </td>
+      <td className="voters">{getVoter(amendment.voted)}</td>
+      <td className="threshold">
+        {amendment.threshold ?? DEFAULT_EMPTY_VALUE}
+      </td>
+      <td className="consensus">
+        {amendment.consensus ?? DEFAULT_EMPTY_VALUE}
+      </td>
+      <td className="enabled">
+        {renderEnabled(amendment.voted === undefined)}
+      </td>
+      <td className="on_tx">{renderOnTx(amendment)}</td>
+    </tr>
+  )
+
+  const content = amendments ? (
+    <table className="basic">
+      <thead>
+        <tr>
+          <th className="count">#</th>
+          <th className="version">{t('Version')}</th>
+          <th className="amendment-id">{t('amendment_id')}</th>
+          <th className="name">{t('amendment_name')}</th>
+          <th className="voters">{t('voters')}</th>
+          <th className="threshold">{t('threshold')}</th>
+          <th className="consensus">{t('consensus')}</th>
+          <th className="enabled">{t('enabled')}</th>
+          <th className="on_tx">{t('on_tx')}</th>
+        </tr>
+      </thead>
+      <tbody>{amendments.map(renderAmendment)}</tbody>
+    </table>
+  ) : (
+    <Loader />
+  )
+  return <div className="amendments-table">{content}</div>
+}