Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add amendments list page #836

Merged
merged 20 commits into from
Nov 16, 2023
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions public/locales/en-US/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -325,6 +326,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",
Expand Down
12 changes: 12 additions & 0 deletions public/locales/es-ES/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -321,6 +322,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",
Expand Down
12 changes: 12 additions & 0 deletions public/locales/fr-FR/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -323,6 +324,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",
Expand Down
12 changes: 12 additions & 0 deletions public/locales/ja-JP/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": "手数料",
Expand Down
12 changes: 12 additions & 0 deletions public/locales/ko-KR/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"no_tokens_message": "토큰을 찾을 수 없습니다",
"assets.no_nfts_message": "NFT를 찾을 수 없습니다.",
"network": "네트워크",
"amendments": null,
"paystring_network": "네트워크",
"network_name": "알 수 없는 네트워크",
"network_name_testnet": "Testnet",
Expand Down Expand Up @@ -322,6 +323,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": "수수료",
Expand Down
116 changes: 116 additions & 0 deletions src/containers/Amendments/AmendmentsTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { 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, deprecated: boolean) =>
deprecated ? (
<div className="name-deprecated">
<span className="name-text text-truncate">{name}</span>
<span className="deprecated badge">{t('deprecated')}</span>
</div>
) : (
<span className="name-text">{name}</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}</td>
<td className="amendment-id text-truncate">{amendment.id}</td>
<td className="name text-truncate">
{renderName(amendment.name, 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>
}
137 changes: 137 additions & 0 deletions src/containers/Amendments/amendmentsTable.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
@import '../shared/css/variables';
@import '../shared/css/table';

.amendments-page{
.summary {
padding: 0 16px;
margin-top: 100px;

@include for-size(tablet-portrait-up) {
padding: 0;
}

.type {
display: inline-block;
padding-bottom: 24px;
color: $white;
font-size: 32px;

@include for-size(tablet-portrait-up) {
font-size: 42px;
}

@include bold;
}
}

.wrap {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try using <section> tags instead. I think there is styling for that already that falls within these sizes.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the only place where the same style is being used in .network-page .wrap and I don't see any <section> tag being used anywhere else in the code

overflow: auto;
width: 100%;
max-width: 1500px;
min-height: 150px;
margin: auto;
}
}

.amendments-table {
position: relative;

table {
.name {
max-width: 120px;

@include for-size(tablet-portrait-up) {
max-width: 180px;
}

@include for-size(desktop-up) {
max-width: 280px;
}
}

.amendment-id {
display: none;
max-width: 120px;

@include for-size(desktop-up) {
display: table-cell;
padding-right: 3%;
}
}

.name-deprecated {
display: flex;
overflow: hidden;
align-items: center;
gap: 6px;

@include for-size(tablet-portrait-up) {
gap: 12px;
}

.name-text {
overflow: hidden;
max-width: fit-content;
flex: 1;
text-overflow: ellipsis;
}

.deprecated {
overflow: hidden;
max-width: 60%;
font-size: 12px;
text-overflow: ellipsis;
text-transform: uppercase;

&.badge {
border: 1px solid $black-30;
background-color: $black-80;
color: $black-30;
}
}
}

.version, .enabled, .consensus {
max-width: 70px;
overflow-wrap: break-word;
@include for-size(tablet-portrait-up) {
max-width: 100px;
}
}
}

.badge {
margin: 0;
color: $black-100;

&.yes {
background-color: $green-60;
}

&.no {
background-color: $black-30;
}
}

.voting {
color: $yellow-50;
}

.voters,
.threshold {
display: none;
max-width: 70px;

@include for-size(desktop-up) {
display: table-cell;
}
}

.count {
display: none;

@include for-size(tablet-portrait-up) {
display: table-cell;
}
}
}
Loading