{t('amm_pool')}
{asset1 && asset2 && (
{t('current_holder')}
{hasAuctionData && auctionSlot?.account ? (
{t('expiration')}
{auctionSlot?.expiration
? localizeDate(
new Date(auctionSlot.expiration),
'en-US',
DATE_OPTIONS_NUMERIC,
)
: '--'}
{t('discounted_fee')}
{discountedFee}
{t('price_paid')}
{pricePaidLP ? (
<>
{pricePaidLP} {t('lp_tokens')}
{pricePaidUSD != null && (
≈ {parseCurrencyAmount(pricePaidUSD)}
)}
) : (
'--'
)}
{t('replacement_cost')}
{replacementLP ? (
<>
{parseAmount(replacementLP)} {t('lp_tokens')}
{replacementUSD != null && (
≈ {parseCurrencyAmount(replacementUSD)}
)}
) : (
'--'
)}
{t('amm_account_id')}
{lpTokenCurrency && (
{t('lp_token_currency_code')}
)}
{t('trading_fee')}
{tradingFeePercent}%
{t('created_on')}
{createdDate}
{losData && (
<>
{t('tvl')}
{losData.tvl_usd != null
? parseCurrencyAmount(losData.tvl_usd)
: '--'}
{t('volume_24h')}
{renderTooltipIcon(t('volume_24h_tooltip'))}
{losData.trading_volume_usd != null
? parseCurrencyAmount(losData.trading_volume_usd)
: '--'}
{t('fees_24h')}
{renderTooltipIcon(t('fees_24h_tooltip'))}
{losData.fees_collected_usd != null
? parseCurrencyAmount(losData.fees_collected_usd)
: '--'}
{t('apr_24h')}
{renderTooltipIcon(t('apr_24h_tooltip'))}
{losData.annual_percentage_return != null
? parsePercent(losData.annual_percentage_return, 3, 0.001)
: '--'}
)}
{balance1 && (
{t('lp_tokens')}
)}
{parseAmount(lpTokenBalance)}
{losData && (
{parseIntegerAmount(losData.liquidity_provider_count)}{' '}
{t('liquidity_providers')}
)}
{isLoading &&
{(hasMore || currentPage > 1) && (
)
}
================================================
FILE: src/containers/AMMPool/TablePicker/index.tsx
================================================
import { FC, useState, useCallback, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { useQuery, useInfiniteQuery } from 'react-query'
import { Tabs } from '../../shared/components/Tabs'
import { TransactionTable } from '../../shared/components/TransactionTable/TransactionTable'
import SocketContext from '../../shared/SocketContext'
import { useAnalytics } from '../../shared/analytics'
import { getAccountTransactions } from '../../../rippled'
import {
DexTradeTable,
DexTradeFormatted,
} from '../../shared/components/DexTradeTable/DexTradeTable'
import { formatDexTrade } from '../../shared/components/DexTradeTable/formatDexTrade'
import {
HoldersTable,
XRPLHolder,
} from '../../shared/components/HoldersTable/HoldersTable'
import { CursorPaginationService } from '../../shared/services/CursorPaginationService'
import { useCursorPaginatedQuery } from '../../shared/hooks/useCursorPaginatedQuery'
import { fetchAMMDexTrades, fetchAMMTransactions } from '../api'
import { AMMDepositWithdrawTable } from './AMMDepositWithdrawTable'
import { AMMDepositWithdrawFormatted } from '../types'
import { formatDepositWithdraw } from '../utils'
import getTokenHolders from '../../Token/IOU/api/holders'
const BATCH_SIZE = 200
const PAGE_SIZE = 10
// DEX trades pagination — format function doesn't depend on pool assets
const dexTradesPagination = new CursorPaginationService{t('data_available_from_notice')}
| {t('tx_hash')} | {t('ledger')} | {t('timestamp')} | {t('account')} | {t('asset')} | {t('asset_2')} | {lpTokenLabel} | {t('usd_value')} |
|---|
{t('amm_pool_deleted_label')}
{t('amm_pool_deleted_text')}
Chart
,
}))
// AMMPoolTablePicker must be mocked — it uses useQuery(), useInfiniteQuery(), SocketContext, useAnalytics()
jest.mock('../TablePicker', () => ({
AMMPoolTablePicker: () => Table Picker
,
}))
const mockGetAMMInfo = rippled.getAMMInfoByAMMAccount as jest.Mock
const mockDetectDeleted = ammUtils.getDeletedAMMData as jest.Mock
const TEST_AMM_ID = 'rLjUKpwUVmz3vCTmFkXungxwzdoyrWRsFG'
const mockAmmInfoResponse = {
amm: {
amount: '500000000', // XRP in drops
amount2: {
currency: '524C555344000000000000000000000000000000',
issuer: 'rMxCKbEDwqr76QuheSUMdEGf4B9xJ8m5De',
value: '1000',
},
trading_fee: 500,
lp_token: {
currency: '03CE60C3DB22CF7F7157810936F27A5B485C8DB9',
issuer: TEST_AMM_ID,
value: '10000',
},
auction_slot: {
account: 'rSomeAccount',
expiration: '2026-12-31T00:00:00+0000',
discounted_fee: 100,
price: { value: '50', currency: 'LP', issuer: TEST_AMM_ID },
time_interval: 3,
},
},
}
describe('AMMPool Page', () => {
const renderComponent = (ammAccountId = TEST_AMM_ID) =>
render(
{iconContent}
{iconUrl && (
)
}
const PoolDisplay: FC<{ amm: AMMPool }> = ({ amm }) => (
{t('top_1000_amms')}
{CATEGORIES.map((cat) => (
))}
{
setSearchQuery(e.target.value)
setCurrentPage(1) // Reset to first page when search changes
}}
/>
| # | {t('asset_pair')} | {t('amm_account_id')} | {t('tvl')} | {t('number_of_lps')} | {t('trading_fee')} | {t('volume_24h')} {renderTooltip('volume_24h')} | {t('fees_24h')} {renderTooltip('fees_24h')} | {t('apr_24h')} {renderTooltip('apr_24h')} |
|---|
{t('tvl')}
{renderTooltip('tvl')}
{tvl ? formatCurrencyAmount(tvl) : DEFAULT_EMPTY_VALUE}
{t('number_of_amms')}
{renderTooltip('number_of_amms')}
{stats.amm_pool_count
? stats.amm_pool_count.toLocaleString()
: DEFAULT_EMPTY_VALUE}
{t('number_of_lps')}
{renderTooltip('number_of_lps')}
{stats.liquidity_provider_count
? stats.liquidity_provider_count.toLocaleString()
: DEFAULT_EMPTY_VALUE}
{t('volume_24h' as any)}
{renderTooltip('volume_24h_all')}
{volume24h ? formatCurrencyAmount(volume24h) : DEFAULT_EMPTY_VALUE}
{t('amms')}
| {t('account_page_asset_table_column_currency_code')} | {t('account_page_asset_table_column_issuer')} | {t('account_page_asset_table_column_price_usd')} | {t('account_page_asset_table_column_balance')} | {t('account_page_asset_table_column_balance_usd')} | {t('account_page_asset_table_column_asset_class')} | {t('account_page_asset_table_column_transfer_fee')} | {t('account_page_asset_table_column_frozen')} |
|---|---|---|---|---|---|---|---|
|
{token.tokenIcon ? (
|
|
{formattedUsdPrice} | {formattedBalance} | {formattedBalanceUsd} | {token.assetClass} | {token.transferFee || '--'} | {token.frozen} |
| {c} | ))}||||
|---|---|---|---|---|
|
|
|
{formattedBalance} | {formattedBalanceUsd} | {row.share < 1 ? row.share.toFixed(4) : row.share.toFixed(2)} % |
| {t('account_page_asset_table_column_token_id')} | {t('account_page_asset_table_column_ticker')} | {t('account_page_asset_table_column_issuer')} | {t('account_page_asset_table_column_price_usd')} | {t('account_page_asset_table_column_balance')} | {t('account_page_asset_table_column_balance_usd')} | {t('account_page_asset_table_column_asset_class')} | {t('account_page_asset_table_column_transfer_fee')} | {t('account_page_asset_table_column_locked')} |
|---|---|---|---|---|---|---|---|---|
|
|
{token.ticker ? token.ticker : '--'} |
|
|
{parseAmount(token.balance, 1, lang)} |
|
{token.assetClass ? token.assetClass.toUpperCase() : '--'} | {token.transferFee}% | {(() => { if (token.locked === '') { return '--' } if (token.locked === 'Global') { return t('account_page_asset_table_mpt_locked_global') } if (token.locked === 'Individual') { return t('account_page_asset_table_mpt_locked_individual') } return token.locked })()} |
| {t('account_page_asset_table_column_currency_code')} | {t('account_page_asset_table_column_price_usd')} | {t('account_page_asset_table_column_trustlines')} | {t('account_page_asset_table_column_holders')} | {t('account_page_asset_table_column_supply')} | {t('account_page_asset_table_column_asset_class')} | {t('account_page_asset_table_column_transfer_fee')} | {t('account_page_asset_table_column_frozen')} |
|---|---|---|---|---|---|---|---|
|
{token.tokenIcon ? (
|
{formatUsdValue(token.priceInUSD, lang)} | {localizeNumber(token.trustlines, lang)} | {localizeNumber(token.holders, lang)} | {formatTokenBalance(token.supply, lang)} | {token.assetClass} | {token.transferFee} | {token.frozen} |
| {t('account_page_asset_table_column_token_id')} | {t('account_page_asset_table_column_ticker')} | {t('account_page_asset_table_column_price_usd')} | {t('account_page_asset_table_column_circulating_supply')} | {t('account_page_asset_table_column_asset_class')} | {t('account_page_asset_table_column_transfer_fee')} | {t('account_page_asset_table_column_locked')} |
|---|---|---|---|---|---|---|
|
|
{token.ticker ? token.ticker : '--'} |
|
{parseAmount(token.supply, 1, lang)} | {token.assetClass ? token.assetClass.toUpperCase() : '--'} | {token.transferFee}% | {token.locked === '' ? '--' : t('account_page_asset_table_mpt_locked_global')} |
| {t('account_page_asset_table_column_token_id')} | {showIssuer && ({t('account_page_asset_table_column_issuer')} | )}{t('account_page_asset_table_column_url')} | {t('account_page_asset_table_column_transfer_fee')} | {t('account_page_asset_table_column_lowest_ask')} | {t('account_page_asset_table_column_highest_bid')} |
|---|---|---|---|---|---|
|
|
{showIssuer && nft.issuer && (
|
)}
{nft.url ? (
|
{nft.transferFee}% | {nft.lowestAsk ? localizeNumber( nft.lowestAsk, lang, XRP_SMALL_BALANCE_CURRENCY_OPTIONS, ) : '--'} | {nft.highestBid ? localizeNumber( nft.highestBid, lang, XRP_SMALL_BALANCE_CURRENCY_OPTIONS, ) : '--'} |
{t('account_page_asset_held_title')}
{t('account_page_asset_issued_title')}
{isAccountDeleted && (
)}
)
}
export default AccountHeader
================================================
FILE: src/containers/Accounts/AccountHeader/styles.scss
================================================
@use '../../shared/css/variables' as *;
.account-header {
padding: 50px 0 30px;
.deleted-banner {
display: flex;
flex-direction: column;
padding: 25px;
border: 1px solid $orange-50;
border-radius: 8px;
margin-bottom: 30px;
background: $black-90;
gap: 12px;
.deleted-label {
display: flex;
max-width: 180px;
align-items: center;
padding: 3px 12px;
border: 1px solid $orange-50;
border-radius: 100px;
margin-bottom: 8px;
background: $orange-80;
color: $black-0;
font-size: 12px;
@include semibold;
gap: 10px;
text-transform: uppercase;
.deleted-info-icon {
width: 16px;
height: 16px;
margin-right: 3px;
}
}
.deleted-message {
margin: 0;
color: $black-0;
font-size: 16px;
}
}
.address-panel {
display: flex;
height: auto;
box-sizing: border-box;
flex: none;
flex-direction: column;
flex-grow: 0;
align-items: flex-start;
align-self: stretch;
order: 0;
padding: 25px;
border: 1px solid $black-70;
border-radius: 8px;
background: $black-90;
gap: 10px;
.address-label {
color: $black-40;
font-size: 14px;
@include semibold;
line-height: 1;
text-transform: uppercase;
}
.address-value {
display: inline-flex;
align-items: center;
color: $black-0;
font-size: 24px;
@include bold;
line-height: 1;
word-break: break-all;
}
.domain {
display: flex;
.domain-label {
margin-right: 8px;
color: $black-40;
font-size: 14px;
line-height: 1;
}
a {
font-size: 14px;
line-height: 1;
word-break: break-all;
}
}
.classic-address {
display: flex;
.classic-address-label {
margin-right: 8px;
color: $black-40;
font-size: 14px;
line-height: 1;
}
a {
font-size: 14px;
line-height: 1;
word-break: break-all;
}
}
.address-tag {
display: flex;
.address-tag-label {
margin-right: 8px;
color: $black-40;
font-size: 14px;
line-height: 1;
}
.address-tag-value {
color: $black-0;
font-size: 14px;
line-height: 1;
word-break: break-all;
}
}
}
.info-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 68px;
@include for-size(desktop-up) {
flex-direction: row;
margin-top: 80px;
}
.values {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 18px;
color: $white;
@include for-size(desktop-up) {
flex-direction: column;
margin-bottom: 0;
}
.title {
padding-bottom: 4px;
margin-bottom: 4.5px;
color: $black-40;
font-size: 14px;
text-transform: uppercase;
@include semibold;
}
.value {
color: $white;
font-size: 18px;
line-height: 22.5px;
text-decoration: none;
@include bold;
}
}
}
}
================================================
FILE: src/containers/Accounts/AccountHeader/test/AccountHeader.test.tsx
================================================
import { render, screen } from '@testing-library/react'
import { I18nextProvider } from 'react-i18next'
import { BrowserRouter as Router } from 'react-router'
import i18n from '../../../../i18n/testConfigEnglish'
import AccountHeader from '../index'
// Mock the DomainLink component
jest.mock('../../../shared/components/DomainLink', () => ({
__esModule: true,
default: ({ domain }: { domain: string }) => (
{domain}
),
}))
// Mock the Account component
jest.mock('../../../shared/components/Account', () => ({
Account: ({ account }: { account: string }) => (
{account}
),
}))
// Mock the SVG import
jest.mock('../../../shared/images/info-duotone.svg', () => ({
__esModule: true,
default: ({ className }: { className?: string }) => (
),
}))
// Test wrapper component
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
{t('account_page_deleted_account_label')}
{t('account_page_deleted_account_warning')}
{xAddress
? t('account_page_extended_address')
: t('account_page_address')}
{accountId}
{xAddress?.classicAddress && (
{t('account_page_classic_address')}:
{t('account_page_address_tag')}:
{xAddress.tag}
{t('account_page_domain')}:
{typeof XrpIcon === 'string' ? (
) : (
{localizeNumber(xrpBalance, lang, XRP_CURRENCY_OPTIONS)}
{localizeNumber(xrpBalanceInUSD, lang, USD_CURRENCY_OPTIONS)}
{typeof ReserveIcon === 'string' ? (
) : (
{localizeNumber(
account.info?.reserve ?? 0,
lang,
XRP_CURRENCY_OPTIONS,
)}
{t('account_page_details')}
{t('account_page_current_sequence')}
{localizeNumber(account.info?.sequence, lang)}
{t('account_page_ticket_count')}
{localizeNumber(account.info?.ticketCount, lang)}
{t('account_page_email_hash')}
{account.info.emailHash}
{t('account_page_payment_channels')}
{t('account_page_payment_channels_text', {
currency: localizeNumber(
account.paychannels.total_available,
lang,
XRP_SMALL_BALANCE_CURRENCY_OPTIONS,
),
number: account.paychannels.channels.length,
})}
{t('account_page_nft_minter')}
{t('account_page_flags')}
{flags.map((flag, i) => (
))}
{flag.title}
{flag.description}
{(() => {
if (flag.key === 'lsfDisableMaster') {
return flag.enabled ? t('yes') : t('no')
}
return flag.enabled
? t('account_page_flag_status_enabled')
: t('account_page_flag_status_disabled')
})()}
{t('account_page_signers')}
{signers.map((signer, i) => (
{t('account_page_signer_weight')}{' '}
{localizeNumber(signer.weight)}
)}
{t('account_page_account_properties')}
Balance: {account.info?.balance} Rate: {xrpToUSDRate}
),
}))
jest.mock('../DetailsCard', () => ({
__esModule: true,
default: ({ account, lang }: any) => (
Sequence: {account.info?.sequence} Lang: {lang}
),
}))
jest.mock('../FlagsCard', () => ({
__esModule: true,
default: ({ account }: any) => (
Flags: {account.info?.flags?.length || 0}
),
}))
jest.mock('../SignersCard', () => ({
__esModule: true,
default: ({ signers }: any) => (
Signers: {signers.length}
),
}))
jest.mock('../../../shared/images/down_arrow.svg', () => ({
__esModule: true,
default: () => ,
}))
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
{t('transactions')}
Accounts Page
,
}))
const mockGetAccountInfo = rippled.getAccountInfo as jest.Mock
const mockDetectDeletedAMM = ammUtils.getDeletedAMMData as jest.Mock
describe('AccountsRouter', () => {
const ACTIVE_AMM_ACCOUNT = 'rLjUKpwUVmz3vCTmFkXungxwzdoyrWRsFG'
const DELETED_AMM_ACCOUNT = 'raxKnsu4ea6xoehws1tyvc7W2XPM5VcmJp'
const REGULAR_ACCOUNT = 'rncKvRcdDq9hVJpdLdTcKoxsS3NSkXsvfM'
const DELETED_ACCOUNT = 'rwGBCTYmPQ8NrfDVL5DdzS3aBbiXtbwngA'
const renderRouter = (accountId: string) =>
render(
Account Header
,
}))
jest.mock('../AccountSummary', () => ({
__esModule: true,
AccountSummary: () => (
Account Summary
),
}))
jest.mock('../AccountAsset', () => ({
__esModule: true,
default: () => Account Asset
,
}))
jest.mock('../AccountTransactionTable', () => ({
__esModule: true,
AccountTransactionTable: () => (
Account Transaction Table
),
}))
const mockedGetAccountState = getAccountState as Mock
describe('Account container', () => {
const TEST_ACCOUNT_ID = 'rncKvRcdDq9hVJpdLdTcKoxsS3NSkXsvfM'
const renderComponent = () =>
render(
{label}
{t('yeas_count', { yeas_count: payload ? payload[0].payload.yeas : 0, })}
{t('yeas_percent', { yeas_percent: payload ? payload[0].payload.yeas_percent.toFixed(2) : 0, })}
{t('nays_count', { nays_count: payload ? payload[0].payload.nays : 0, })}
{t('nays_percent', { nays_percent: payload ? payload[0].payload.nays_percent.toFixed(2) : 0, })}
{t('yeas')}
{t('nays')}
{`${t('not')} ${t('enabled')}`}
) : (
{t('enabled')}
)
const renderDate = (date: string | null) =>
date
? localizeDate(new Date(date), language, DATE_OPTIONS_AMENDMENT)
: DEFAULT_EMPTY_VALUE
const renderRowIndex = () =>
voting ? (
<>
{data.voted !== undefined && (
<>
{rowIndex}
)}
)
}
================================================
FILE: src/containers/Amendment/Votes.tsx
================================================
import { useTranslation } from 'react-i18next'
import { AmendmentData } from '../shared/vhsTypes'
import SuccessIcon from '../shared/images/success.svg'
import { RouteLink } from '../shared/routing'
import { VALIDATOR_ROUTE } from '../App/routes'
import { BarChartVoting } from './BarChartVoting'
interface VotesProps {
data: AmendmentData
validators: Array{t(label)}
{validatorsList.map((validator, index) => (
{index + 1}
{validator.domain ? validator.domain : validator.pubkey}
{validator.unl && (
))}
{aggregate &&
) : null
}
================================================
FILE: src/containers/Amendment/amendment.scss
================================================
@use '../shared/css/variables' as *;
@use '../shared/css/table';
.amendment-summary {
width: 80%;
max-width: 1200px;
margin: auto;
.simple-body {
max-width: 1100px;
}
.type {
display: inline-block;
margin-top: 80px;
margin-bottom: 32px;
color: $white;
font-size: 32px;
@include for-size(tablet-portrait-up) {
margin-top: 120px;
margin-bottom: 64px;
font-size: 42px;
}
@include bold;
}
.rows {
padding-left: 0;
}
.label {
margin-bottom: 0;
font-weight: 600;
}
.index {
width: 220px;
}
.badge {
max-width: fit-content;
margin: 0;
color: $black-100 !important;
text-transform: capitalize;
&.voting {
background-color: $black-30;
}
&.enabled {
background-color: $green-60;
}
&.consensus {
margin-top: 6px;
background-color: $yellow-50;
font-weight: 700 !important;
}
}
.value {
&.eta {
&.no {
color: $yellow-50 !important;
}
}
}
.note {
.unl {
display: inline-block;
margin: 0 10px;
color: $green-40;
vertical-align: middle;
}
}
.votes {
max-width: 1200px;
margin: 48px 0;
.votes-columns {
margin: 48px 0;
@include for-size(desktop-up) {
display: grid;
gap: 48px;
grid-template-columns: repeat(2, 1fr);
}
.label {
@include bold;
margin-bottom: 24px;
font-size: 24px;
text-transform: capitalize;
}
.votes-column {
min-width: 0;
max-width: 100%;
flex: 1 1 0px;
margin-top: 24px;
.vals {
background: $black-80;
.row {
display: flex;
overflow: hidden;
padding: 16px;
border-bottom: 1px solid $black-70;
white-space: nowrap;
.val {
overflow: hidden;
max-width: fit-content;
flex: 1;
font-size: 14px;
text-overflow: ellipsis;
}
.unl {
margin-left: 8px;
color: $green-40;
}
.index {
max-width: 16px;
margin-right: 24px;
}
}
}
}
}
}
}
================================================
FILE: src/containers/Amendment/index.tsx
================================================
import { useContext } from 'react'
import axios from 'axios'
import { useTranslation } from 'react-i18next'
import { useQuery } from 'react-query'
import { useWindowSize } from 'usehooks-ts'
import { useRouteParams } from '../shared/routing'
import { AMENDMENT_ROUTE } from '../App/routes'
import NetworkContext from '../shared/NetworkContext'
import {
FETCH_INTERVAL_ERROR_MILLIS,
FETCH_INTERVAL_VHS_MILLIS,
NOT_FOUND,
SERVER_ERROR,
} from '../shared/utils'
import { Simple } from './Simple'
import { AmendmentData } from '../shared/vhsTypes'
import Log from '../shared/log'
import { Votes } from './Votes'
import './amendment.scss'
import NoMatch from '../NoMatch'
import { useAnalytics } from '../shared/analytics'
import { Loader } from '../shared/components/Loader'
export const Amendment = () => {
const network = useContext(NetworkContext)
const { identifier = '' } = useRouteParams(AMENDMENT_ROUTE)
const { width } = useWindowSize()
const { t } = useTranslation()
const { trackException } = useAnalytics()
const ERROR_MESSAGES = {
[NOT_FOUND]: {
title: 'amendment_not_found',
hints: ['check_amendment_key'],
},
default: {
title: 'generic_error',
hints: ['not_your_fault'],
},
}
const getErrorMessage = (error: keyof typeof ERROR_MESSAGES | null) =>
(error && ERROR_MESSAGES[error]) || ERROR_MESSAGES.default
const {
data,
error,
isLoading: isAmendmentLoading,
} = useQuery
{renderColumn('yeas', yeas)}
{renderColumn('nays', nays)}
{t('note')}:
{t('amendment_summary')}
{data && validators && (
{data && validators &&
{(isValidatorsLoading || isAmendmentLoading) &&
)
}
================================================
FILE: src/containers/Amendment/test/AmendmentSummary.test.js
================================================
import { render, waitFor } from '@testing-library/react'
import moxios from 'moxios'
import { Route } from 'react-router'
import { Amendment } from '..'
import i18n from '../../../i18n/testConfig'
import NetworkContext from '../../shared/NetworkContext'
import { QuickHarness } from '../../test/utils'
import { AMENDMENT_ROUTE } from '../../App/routes'
import votingAmendment from './mockVotingAmendment.json'
import validators from './mockValidatorsList.json'
import { NOT_FOUND } from '../../shared/utils'
jest.mock('usehooks-ts', () => ({
useWindowSize: () => ({
width: 375,
height: 600,
}),
}))
const MOCK_IDENTIFIER = votingAmendment.amendment.id
describe('Amendments Page container', () => {
const renderAmendment = () =>
render(
mock-name
',
)
expect(rows[1].querySelector('.value').outerHTML).toBe(
'mock-amendment-id
',
)
expect(rows[2].querySelector('.value').outerHTML).toBe(
'',
)
expect(rows[3].querySelector('.value').outerHTML).toBe(
'3/4
',
)
expect(rows[4].querySelector('.value a').outerHTML).toBe(
'https://xrpl.org/known-amendments.html#mock-name',
)
expect(rows[5].querySelector('.value .badge').outerHTML).toBe(
'not enabled
',
)
expect(rows[6].querySelector('.value').outerHTML).toBe(
'2
',
)
expect(rows[7].querySelector('.value').outerHTML).toBe(
'4
',
)
expect(rows[8].querySelector('.value').outerHTML).toBe(
'1
',
)
expect(rows[9].querySelector('.value').outerHTML).toBe(
'3
',
)
expect(rows[10].querySelector('.value').outerHTML).toBe(
'voting
',
)
expect(rows[11].querySelector('.value').outerHTML).toBe(
'25%
',
)
expect(
container.querySelectorAll('.amendment-summary .barchart').length,
).toBe(1)
expect(
container.querySelectorAll(
'.amendment-summary .votes .votes-columns .votes-column',
).length,
).toBe(2)
const votesColumns = container.querySelectorAll(
'.amendment-summary .votes .votes-columns .votes-column',
)
expect(votesColumns[0].querySelectorAll('.vals .row').length).toBe(2)
expect(votesColumns[1].querySelectorAll('.vals .row').length).toBe(4)
})
it('renders 404 page on no match', async () => {
moxios.stubRequest(
`${process.env.VITE_DATA_URL}/amendment/vote/main/${MOCK_IDENTIFIER}`,
{
status: NOT_FOUND,
response: votingAmendment,
},
)
moxios.stubRequest(`${process.env.VITE_DATA_URL}/validators/main`, {
status: 200,
response: validators,
})
const { container } = renderAmendment()
await waitFor(() => {
expect(container.querySelector('.no-match')).toBeInTheDocument()
})
})
})
================================================
FILE: src/containers/Amendment/test/mockValidatorsList.json
================================================
{
"count": 6,
"validators": [
{
"validation_public_key": "pub1",
"signing_key": "sign1",
"domain": "domain1.com",
"unl": "vl.ripple.com"
},
{
"validation_public_key": "pub2",
"signing_key": "sign2",
"domain": "domain2.com",
"unl": false
},
{
"validation_public_key": "pub3",
"signing_key": "sign3",
"domain": "domain3.com",
"unl": "vl.ripple.com"
},
{
"validation_public_key": "pub4",
"signing_key": "sign4",
"domain": "domain4.com",
"unl": "vl.ripple.com"
},
{
"validation_public_key": "pub5",
"signing_key": "sign5",
"domain": "domain5.com",
"unl": false
},
{
"validation_public_key": "pub6",
"signing_key": "sign6",
"domain": "domain6.com",
"unl": "vl.ripple.com"
}
]
}
================================================
FILE: src/containers/Amendment/test/mockVotingAmendment.json
================================================
{
"amendment": {
"id": "mock-amendment-id",
"name": "mock-name",
"rippled_version": "1.12.0",
"deprecated": false,
"threshold": "3/4",
"consensus": "25%",
"voted": {
"count": 2,
"validators": [
{
"signing_key": "sign1",
"ledger_index": "index1",
"unl": "vl.ripple.com"
},
{
"signing_key": "sign2",
"ledger_index": "82658047",
"unl": false
}
]
}
}
}
================================================
FILE: src/containers/Amendments/AmendmentsTable.tsx
================================================
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router'
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 ? (
{t('yes')}
) : (
{t('no')}
)
const renderOnTx = (amendment) => {
if (amendment.voted) {
if (amendment.eta) {
const etaLocalized = localizeDate(
new Date(amendment.eta),
language,
DATE_OPTIONS_AMENDMENTS,
)
return (
{t('eta')}
{etaLocalized}
| # | {t('Version')} | {t('amendment_id')} | {t('amendment_name')} | {`${t('unl')} ${t('voters')}`} | {t('threshold')} | {t('consensus')} | {t('enabled')} | {t('on_tx')} |
|---|
{content}
}
================================================
FILE: src/containers/Amendments/amendmentsTable.scss
================================================
@use '../shared/css/variables' as *;
@use '../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 {
overflow: auto;
width: 100%;
max-width: 1500px;
min-height: 150px;
margin: auto;
}
}
.amendments-table {
position: relative;
table {
.incoming {
background: rgba($green-90, 0.7);
}
.eta-label {
font-weight: 700;
text-transform: uppercase;
}
.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;
text-transform: uppercase;
&.yes {
background-color: $green-60;
}
&.no {
background-color: $black-30;
}
}
.voting {
margin-left: 0;
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;
}
}
}
================================================
FILE: src/containers/Amendments/index.tsx
================================================
import axios from 'axios'
import { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { useQuery } from 'react-query'
import Log from '../shared/log'
import NetworkContext from '../shared/NetworkContext'
import {
FETCH_INTERVAL_ERROR_MILLIS,
FETCH_INTERVAL_VHS_MILLIS,
} from '../shared/utils'
import { AmendmentsTable } from './AmendmentsTable'
import './amendmentsTable.scss'
export const Amendments = () => {
const network = useContext(NetworkContext)
const { t } = useTranslation()
const { data } = useQuery(
['fetchNetworkAmendmentsData'],
async () => fetchData(),
{
refetchInterval: (returnedData, _) =>
returnedData == null
? FETCH_INTERVAL_ERROR_MILLIS
: FETCH_INTERVAL_VHS_MILLIS,
refetchOnMount: true,
enabled: !!network,
},
)
const fetchData = async () =>
axios
.get(`${process.env.VITE_DATA_URL}/amendments/vote/${network}`)
.then((resp) => resp.data.amendments)
.then((amendments) =>
amendments.sort((a, b) => {
if (a.eta && !b.eta) return -1
if (!a.eta && b.eta) return 1
if (a.voted && !b.voted) return -1
if (!a.voted && b.voted) return 1
return 0
}),
)
.catch((e) => Log.error(e))
return (
{t('amendments')}
amendments
',
)
await waitFor(() => {
expect(
container.querySelectorAll('.amendments-table table tr').length,
).toBe(amendmentsRaw.amendments.length + 1)
})
const rows = container.querySelectorAll('.amendments-table table tr')
// Test voting amendment row.
expect(rows[2].querySelector('.version').outerHTML).toBe(
'
{network}
{t('custom_network')}
{t('custom_network_input_help')}
setNetworkText(event.target.value)}
/>
{t('custom_networks')}
{customNetworks.map(renderCustomNetwork)}