\n
\n )\n}\n"
},
{
"path": "src/containers/AMMPool/InfoCards/AuctionCard.tsx",
"content": "import { FC } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Account } from '../../shared/components/Account'\nimport {\n shortenAccount,\n formatTradingFee,\n localizeDate,\n DATE_OPTIONS_NUMERIC,\n TRADING_FEE_BASE,\n} from '../../shared/utils'\nimport {\n parseAmount,\n parseCurrencyAmount,\n} from '../../shared/NumberFormattingUtils'\nimport AuctionIcon from '../../shared/images/auction_icon.svg'\nimport { AuctionSlot } from '../types'\n\ninterface AuctionCardProps {\n auctionSlot?: AuctionSlot\n tvlUsd?: number\n lpTokenBalance?: string\n tradingFee: number\n}\n\n/**\n * Calculate the minimum bid to replace the current auction slot holder.\n *\n * From XRPL docs (AMMBid - Auction Slot Price):\n *\n * Minimum bid (M): M = L * F / 25\n * L = total LP tokens issued, F = trading fee as decimal\n *\n * Empty/expired/last interval: P = M\n *\n * First interval (time_interval=0): P = B * 1.05 + M\n *\n * Otherwise: P = B * 1.05 * (1 - t^60) + M\n * B = current bid price in LP tokens\n * t = fraction of time elapsed, rounded down to multiples of 0.05\n * (time_interval / 20, where time_interval is 0-19)\n */\nconst calcReplacementCost = (\n auctionSlot: AuctionSlot | undefined,\n lpTokenBalance: string | undefined,\n tradingFee: number,\n): number | null => {\n if (!lpTokenBalance) {\n return null\n }\n\n // XRPL stores trading fees as integers in units of 1/100,000 (e.g. 1000 = 1%)\n const tradingFeeAsDecimal = tradingFee / TRADING_FEE_BASE\n const M = (Number(lpTokenBalance) * tradingFeeAsDecimal) / 25\n\n const hasHolder = !!auctionSlot?.account\n // time_interval: 0-19 = active intervals, 20 = expired\n const interval = auctionSlot?.time_interval ?? 20\n\n // Empty, expired (20), or last interval (19): just the minimum bid\n if (!hasHolder || interval >= 19) {\n return M\n }\n\n const B = Number(auctionSlot?.price?.value ?? 0)\n\n // First interval: B * 1.05 + M\n if (interval === 0) {\n return B * 1.05 + M\n }\n\n // Otherwise: B * 1.05 * (1 - t^60) + M\n const t = interval / 20\n return B * 1.05 * (1 - t ** 60) + M\n}\n\nexport const AuctionCard: FC\n
\n {t('amm_pool')}
\n {asset1 && asset2 && (\n \n\n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/AMMPool/InfoCards/BasicInfoCard.tsx",
"content": "import { FC } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { CopyableText } from '../../shared/components/CopyableText'\nimport { convertRippleDate } from '../../../rippled/lib/convertRippleDate'\nimport {\n formatTradingFee,\n shortenAccount,\n shortenLPToken,\n} from '../../shared/utils'\nimport BasicInfoIcon from '../../shared/images/info_book_icon.svg'\n\ninterface BasicInfoCardProps {\n ammAccountId: string\n tradingFee: number\n createdTimestamp: number | null | undefined\n lpTokenCurrency?: string\n}\n\nexport const BasicInfoCard: FC\n
\n \n
\n \n {t('current_holder')}\n \n {hasAuctionData && auctionSlot?.account ? (\n
\n \n {t('expiration')}\n \n {auctionSlot?.expiration\n ? localizeDate(\n new Date(auctionSlot.expiration),\n 'en-US',\n DATE_OPTIONS_NUMERIC,\n )\n : '--'}\n \n
\n \n {t('discounted_fee')}\n \n {discountedFee}\n \n
\n \n {t('price_paid')}\n \n {pricePaidLP ? (\n <>\n
\n \n {pricePaidLP} {t('lp_tokens')}\n
\n {pricePaidUSD != null && (\n \n ≈ {parseCurrencyAmount(pricePaidUSD)}\n
\n )}\n \n ) : (\n '--'\n )}\n \n \n {t('replacement_cost')}\n \n {replacementLP ? (\n <>\n
\n \n {parseAmount(replacementLP)} {t('lp_tokens')}\n
\n {replacementUSD != null && (\n \n ≈ {parseCurrencyAmount(replacementUSD)}\n
\n )}\n \n ) : (\n '--'\n )}\n \n \n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/AMMPool/InfoCards/MarketDataCard.tsx",
"content": "import { FC } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTooltip } from '../../shared/components/Tooltip'\nimport HoverIcon from '../../shared/images/hover.svg'\nimport MarketDataIcon from '../../shared/images/market_data_icon.svg'\nimport {\n parseCurrencyAmount,\n parsePercent,\n parseAmount,\n parseIntegerAmount,\n} from '../../shared/NumberFormattingUtils'\nimport Currency from '../../shared/components/Currency'\nimport { LOSAMMPoolData, FormattedBalance } from '../types'\n\n/** Renders \"BALANCE (XRP)\" or \"BALANCE (CRYPTO)\" with no extra whitespace */\nconst BalanceLabel = ({\n currency,\n issuer,\n}: {\n currency: string\n issuer?: string\n}) => {\n const { t } = useTranslation()\n return (\n \n {`${t('balance').toUpperCase()} (`}\n \n
\n \n
\n \n {t('amm_account_id')}\n \n
\n {lpTokenCurrency && (\n \n \n {t('lp_token_currency_code')}\n \n \n
\n )}\n \n {t('trading_fee')}\n \n {tradingFeePercent}%\n \n
\n \n {t('created_on')}\n {createdDate}\n
\n \n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/AMMPool/InfoCards/test/AuctionCard.test.tsx",
"content": "import { render, screen } from '@testing-library/react'\nimport { MemoryRouter } from 'react-router'\nimport { I18nextProvider } from 'react-i18next'\nimport i18n from '../../../../i18n/testConfig'\nimport { AuctionCard } from '../AuctionCard'\n\njest.mock('../../../shared/images/auction_icon.svg', () => ({\n __esModule: true,\n default: () => ,\n}))\n\ninterface RenderProps {\n auctionSlot?: {\n account?: string\n expiration?: string | number\n discounted_fee?: number\n price?: { value: string; currency: string; issuer?: string }\n time_interval?: number\n }\n tvlUsd?: number\n lpTokenBalance?: string\n tradingFee: number\n}\n\nconst renderComponent = ({\n auctionSlot,\n tvlUsd,\n lpTokenBalance,\n tradingFee,\n}: RenderProps) =>\n render(\n \n
\n \n {losData && (\n <>\n
\n \n {t('tvl')}\n \n {losData.tvl_usd != null\n ? parseCurrencyAmount(losData.tvl_usd)\n : '--'}\n \n
\n \n \n {t('volume_24h')}\n {renderTooltipIcon(t('volume_24h_tooltip'))}\n \n \n {losData.trading_volume_usd != null\n ? parseCurrencyAmount(losData.trading_volume_usd)\n : '--'}\n \n
\n \n \n {t('fees_24h')}\n {renderTooltipIcon(t('fees_24h_tooltip'))}\n \n \n {losData.fees_collected_usd != null\n ? parseCurrencyAmount(losData.fees_collected_usd)\n : '--'}\n \n
\n \n \n {t('apr_24h')}\n {renderTooltipIcon(t('apr_24h_tooltip'))}\n \n \n {losData.annual_percentage_return != null\n ? parsePercent(losData.annual_percentage_return, 3, 0.001)\n : '--'}\n \n
\n \n )}\n {balance1 && (\n \n
\n )}\n {balance2 && (\n \n
\n )}\n {lpTokenBalance && (\n \n {t('lp_tokens')}\n \n
\n )}\n {parseAmount(lpTokenBalance)}
\n {losData && (\n \n {parseIntegerAmount(losData.liquidity_provider_count)}{' '}\n {t('liquidity_providers')}\n
\n )}\n \n \n {isLoading &&
\n )\n}\n"
},
{
"path": "src/containers/AMMPool/TablePicker/index.tsx",
"content": "import { FC, useState, useCallback, useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery, useInfiniteQuery } from 'react-query'\nimport { Tabs } from '../../shared/components/Tabs'\nimport { TransactionTable } from '../../shared/components/TransactionTable/TransactionTable'\nimport SocketContext from '../../shared/SocketContext'\nimport { useAnalytics } from '../../shared/analytics'\nimport { getAccountTransactions } from '../../../rippled'\nimport {\n DexTradeTable,\n DexTradeFormatted,\n} from '../../shared/components/DexTradeTable/DexTradeTable'\nimport { formatDexTrade } from '../../shared/components/DexTradeTable/formatDexTrade'\nimport {\n HoldersTable,\n XRPLHolder,\n} from '../../shared/components/HoldersTable/HoldersTable'\nimport { CursorPaginationService } from '../../shared/services/CursorPaginationService'\nimport { useCursorPaginatedQuery } from '../../shared/hooks/useCursorPaginatedQuery'\nimport { fetchAMMDexTrades, fetchAMMTransactions } from '../api'\nimport { AMMDepositWithdrawTable } from './AMMDepositWithdrawTable'\nimport { AMMDepositWithdrawFormatted } from '../types'\nimport { formatDepositWithdraw } from '../utils'\nimport getTokenHolders from '../../Token/IOU/api/holders'\n\nconst BATCH_SIZE = 200\nconst PAGE_SIZE = 10\n\n// DEX trades pagination — format function doesn't depend on pool assets\nconst dexTradesPagination = new CursorPaginationService\n
\n {t('data_available_from_notice')}
\n \n \n \n
\n
\n {(hasMore || currentPage > 1) && (\n | {t('tx_hash')} | \n{t('ledger')} | \n{t('timestamp')} | \n{t('account')} | \n{t('asset')} | \n{t('asset_2')} | \n{lpTokenLabel} | \n{t('usd_value')} | \n
|---|
\n
\n txFetchNextPage()}\n hasAdditionalResults={txHasNextPage}\n />\n )}\n\n {activeTab === 'dex-trades' && isMainnet && (\n 1}\n hideType\n sortField={dexTrades.sortField}\n setSortField={dexTrades.setSortField}\n sortOrder={dexTrades.sortOrder}\n setSortOrder={dexTrades.setSortOrder}\n onRefresh={dexTrades.refresh}\n />\n )}\n\n {activeTab === 'deposits' && isMainnet && (\n
\n )\n}\n"
},
{
"path": "src/containers/AMMPool/TablePicker/test/AMMDepositWithdrawTable.test.tsx",
"content": "import { render, screen } from '@testing-library/react'\nimport { MemoryRouter } from 'react-router'\nimport { I18nextProvider } from 'react-i18next'\nimport { QueryClient, QueryClientProvider } from 'react-query'\nimport i18n from '../../../../i18n/testConfig'\nimport { AMMDepositWithdrawTable } from '../AMMDepositWithdrawTable'\nimport { AMMDepositWithdrawFormatted } from '../../types'\n\nconst queryClient = new QueryClient({\n defaultOptions: { queries: { retry: false } },\n})\n\ninterface RenderProps {\n transactions?: AMMDepositWithdrawFormatted[]\n isLoading?: boolean\n totalItems?: number\n currentPage?: number\n onPageChange?: (page: number) => void\n pageSize?: number\n hasMore?: boolean\n type?: 'deposit' | 'withdraw'\n}\n\nconst renderComponent = ({\n transactions = [],\n isLoading = false,\n totalItems = 20,\n currentPage = 1,\n onPageChange = jest.fn(),\n pageSize = 10,\n hasMore = true,\n type = 'deposit',\n}: RenderProps = {}) =>\n render(\n \n
\n
\n\n {activeTab === 'transactions' && (\n \n
\n)\n\n/** Order assets: non-XRP first, XRP second (for header display) */\nconst orderAssets = (\n b1: FormattedBalance | null,\n b2: FormattedBalance | null,\n): [FormattedBalance | null, FormattedBalance | null] => {\n if (b1 && b2 && b1.currency === 'XRP') {\n return [b2, b1]\n }\n return [b1, b2]\n}\n\n/**\n * Build FormattedBalance objects from deleted AMM data.\n * Deleted pools have no live balances, so amount is 0.\n */\nconst buildDeletedBalances = (\n data: DeletedAMMData,\n): [FormattedBalance, FormattedBalance] => [\n {\n currency: data.asset.currency,\n issuer: data.asset.issuer,\n amount: 0,\n },\n {\n currency: data.asset2.currency,\n issuer: data.asset2.issuer,\n amount: 0,\n },\n]\n\nexport const AMMPool = () => {\n const { t } = useTranslation()\n const { trackScreenLoaded, trackException } = useAnalytics()\n const { id: ammAccountId = '', tab = 'transactions' } = useParams<{\n id: string\n tab: string\n }>()\n const [error, setError] = useState\n
\n )}\n\n \n
\n \n {t('amm_pool_deleted_text')}\n
\n \n
\n\n {isMainnet && (\n Chart
,\n}))\n\n// AMMPoolTablePicker must be mocked — it uses useQuery(), useInfiniteQuery(), SocketContext, useAnalytics()\njest.mock('../TablePicker', () => ({\n AMMPoolTablePicker: () => Table Picker
,\n}))\n\nconst mockGetAMMInfo = rippled.getAMMInfoByAMMAccount as jest.Mock\nconst mockDetectDeleted = ammUtils.getDeletedAMMData as jest.Mock\n\nconst TEST_AMM_ID = 'rLjUKpwUVmz3vCTmFkXungxwzdoyrWRsFG'\n\nconst mockAmmInfoResponse = {\n amm: {\n amount: '500000000', // XRP in drops\n amount2: {\n currency: '524C555344000000000000000000000000000000',\n issuer: 'rMxCKbEDwqr76QuheSUMdEGf4B9xJ8m5De',\n value: '1000',\n },\n trading_fee: 500,\n lp_token: {\n currency: '03CE60C3DB22CF7F7157810936F27A5B485C8DB9',\n issuer: TEST_AMM_ID,\n value: '10000',\n },\n auction_slot: {\n account: 'rSomeAccount',\n expiration: '2026-12-31T00:00:00+0000',\n discounted_fee: 100,\n price: { value: '50', currency: 'LP', issuer: TEST_AMM_ID },\n time_interval: 3,\n },\n },\n}\n\ndescribe('AMMPool Page', () => {\n const renderComponent = (ammAccountId = TEST_AMM_ID) =>\n render(\n \n {iconContent}\n {iconUrl && (\n
\n )\n}\n\nconst PoolDisplay: FC<{ amm: AMMPool }> = ({ amm }) => (\n \n
\n)\n\nexport const AMMRankingsTable: FC\n
\n \n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/AMMRankings/GeneralInfoCard.tsx",
"content": "import { FC } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { AggregatedStats } from './api'\nimport {\n parseAmount,\n parseCurrencyAmount,\n} from '../shared/NumberFormattingUtils'\nimport InfoIcon from '../shared/images/info_book_icon.svg'\nimport HoverIcon from '../shared/images/hover.svg'\nimport { useTooltip } from '../shared/components/Tooltip'\n\ninterface GeneralInfoCardProps {\n stats: AggregatedStats | undefined\n currencyMode: 'usd' | 'xrp'\n}\n\nconst DEFAULT_EMPTY_VALUE = '--'\n\nexport const GeneralInfoCard: FC{t('top_1000_amms')}
\n\n\n \n setTableCurrency(value === 'USD' ? 'usd' : 'xrp')\n }\n />\n
\n\n \n \n {CATEGORIES.map((cat) => (\n handleFilterClick(cat)}\n >\n \n {CATEGORY_LABELS[cat]}\n \n ))}\n
\n\n \n {\n setSearchQuery(e.target.value)\n setCurrentPage(1) // Reset to first page when search changes\n }}\n />\n
\n\n \n \n \n
\n
\n\n | # | \n{t('asset_pair')} | \n{t('amm_account_id')} | \n{t('tvl')} | \n{t('number_of_lps')} | \n{t('trading_fee')} | \n\n \n {t('volume_24h')}\n {renderTooltip('volume_24h')}\n \n | \n\n \n {t('fees_24h')}\n {renderTooltip('fees_24h')}\n \n | \n\n \n {t('apr_24h')}\n {renderTooltip('apr_24h')}\n \n | \n
|---|
\n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/AMMRankings/ammRankings.scss",
"content": "@use '../shared/css/variables' as *;\n@use '../shared/css/table';\n@use '../shared/css/info-card';\n\n.amm-rankings-page {\n overflow: visible;\n width: 100%;\n max-width: 1500px;\n min-height: 150px;\n padding: 0 24px;\n margin: 40px auto 0;\n color: $white;\n\n // ─── Page header ───────────────────────────────────────────────\n .page-header {\n margin-bottom: 16px;\n\n .page-title {\n margin: 0;\n color: $white;\n font-size: 36px;\n @include bold;\n }\n }\n\n // ─── Chart + General Info side-by-side ────────────────────────\n .chart-and-info-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: stretch;\n margin-bottom: 64px;\n gap: 32px;\n\n @include for-size(desktop-up) {\n flex-direction: row;\n align-items: flex-start;\n }\n }\n\n // The shared TVLVolumeChart wraps everything in .tvl-volume-section,\n // which is the direct flex child of .chart-and-info-container.\n .tvl-volume-section {\n min-width: 0;\n margin-bottom: 0; // Override shared component's 50px margin\n\n @include for-size(desktop-up) {\n flex: 3;\n }\n }\n\n // ─── General Info Card ────────────────────────────────────────\n // Align the top of the card with the top of the chart container,\n // accounting for the section title + controls above the chart.\n .info-card {\n @include for-size(desktop-up) {\n min-width: 200px;\n max-width: 320px;\n flex: 1;\n // Offset = chart-section-title height + margin + controls height + margin\n margin-top: 84px;\n }\n }\n\n // ─── Table section ────────────────────────────────────────────\n .amm-rankings-table-container {\n .table-title {\n padding-bottom: 0;\n border-bottom: none;\n margin: 0 0 40px;\n color: $white;\n font-size: 20px;\n @include bold;\n }\n }\n\n .table-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 16px;\n gap: 12px;\n\n .currency-switch {\n margin-left: auto;\n }\n }\n\n .search-wrapper {\n position: relative;\n max-width: 400px;\n flex: 1;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 12px;\n width: 16px;\n height: 16px;\n background-image: url('../shared/images/search.svg');\n background-repeat: no-repeat;\n background-size: contain;\n content: '';\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .amm-search {\n width: 100%;\n box-sizing: border-box;\n padding: 7px 12px 7px 36px;\n border: 1px solid $black-50;\n border-radius: $border-radius;\n background-color: $black;\n color: $white;\n font-size: 13px;\n outline: none;\n transition: border-color 0.15s;\n\n &::placeholder {\n color: $black-50;\n }\n\n &:focus {\n border-color: $blue-50;\n }\n }\n }\n\n .table-filters {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n\n .filter-icon-btn {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n background-image: url('../shared/images/group.svg');\n background-repeat: no-repeat;\n background-size: contain;\n }\n\n .category-filter {\n display: flex;\n align-items: center;\n padding: 6px 12px;\n border: 1px solid $black-50;\n border-radius: $border-radius;\n background-color: $black;\n color: $white;\n cursor: pointer;\n font-size: 14px;\n gap: 6px;\n transition: background-color 0.15s;\n @include medium;\n\n &:hover {\n background-color: $black-70;\n }\n\n &.selected {\n background-color: $white;\n color: $black;\n\n .item-icon {\n filter: invert(1);\n }\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .item-icon {\n width: 18px;\n height: 18px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n\n &.icon-rwa {\n background-image: url('../shared/images/rwa.svg');\n }\n\n &.icon-stablecoin {\n background-image: url('../shared/images/stablecoin.svg');\n }\n\n &.icon-memes {\n background-image: url('../shared/images/memes.svg');\n }\n\n &.icon-defi {\n background-image: url('../shared/images/decentralized.svg');\n }\n }\n }\n }\n\n // ─── Table Wrapper ────────────────────────────────────────────\n .table-wrap {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n }\n\n // ─── AMM Rankings Table ───────────────────────────────────────\n .amm-rankings-table {\n width: 100%;\n min-width: 1000px; // Ensure horizontal scroll on smaller viewports\n\n // Table headers - match explorer standard\n th {\n padding: 12px 8px;\n color: $black-40; // Match standard explorer table headers\n font-size: 12px;\n font-weight: 600; // Figma: Semi Bold\n line-height: 1.5em; // Figma: 18px (1.5 * 12px)\n text-align: left;\n text-transform: uppercase;\n }\n\n td {\n padding: 12px 8px; // Reduced horizontal padding for tighter columns\n }\n\n th.rank,\n td.rank {\n width: 50px;\n padding-right: 4px;\n padding-left: 12px;\n }\n\n // Rank column text color\n td.rank {\n color: $white; // Figma: XRPL/Primary/White\n }\n\n td.pool {\n .pool-display {\n display: flex;\n align-items: center;\n gap: 10px;\n\n .token-pair {\n position: relative;\n display: flex;\n width: 48px; // Fixed width: 28px (first icon) + 20px (second icon visible after -8px overlap)\n flex-shrink: 0;\n align-items: center;\n\n // Apply overlap only to the wrapper/link level, not the icon itself\n .token-icon-link,\n .token-icon-wrapper {\n position: relative;\n display: inline-block;\n\n &:nth-child(2) {\n z-index: 1;\n margin-left: -8px; // Overlap per Figma: 24px icon offset at 16px → 8px overlap\n }\n\n &:first-child {\n z-index: 2; // Keep first icon on top\n }\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .token-icon-link {\n text-decoration: none;\n transition: transform 0.2s ease;\n\n &:hover {\n z-index: 10;\n transform: scale(1.1);\n }\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .token-icon-wrapper {\n &.fallback-mode {\n .token-icon:not(.fallback) {\n display: none;\n }\n\n .token-icon.fallback {\n display: flex !important;\n }\n }\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .token-icon {\n display: flex;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 2px solid $black-90;\n border-radius: 50%;\n background-color: $black-90; // Ensure solid background\n color: $white;\n font-size: 9px;\n object-fit: cover;\n @include bold;\n\n /* stylelint-disable-next-line no-descending-specificity */\n &.fallback {\n background: linear-gradient(135deg, $blue-50, $blue-purple-50);\n }\n }\n }\n\n .pool-name {\n min-width: 0; // Allow text to shrink if needed\n flex: 1;\n color: $white;\n font-size: 14px;\n white-space: nowrap;\n @include regular;\n\n .currency {\n font: inherit;\n }\n }\n }\n }\n\n td.amm-account-id {\n font-size: 13px;\n\n .account {\n color: $green-30;\n\n &:hover {\n color: $green-50;\n }\n }\n }\n\n td.apr {\n color: $white;\n }\n }\n\n // ─── Responsive ───────────────────────────────────────────────\n @include for-size(phone-only) {\n padding: 0 12px;\n\n .page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n @include for-size(desktop-up) {\n padding: 0 80px;\n margin-top: 60px;\n\n .page-header {\n .page-title {\n font-size: 36px;\n }\n }\n\n // On larger viewports, reduce spacing to fit all columns without scrolling\n .amm-rankings-table {\n min-width: auto; // Remove min-width constraint\n\n th,\n td {\n padding: 12px 6px; // Further reduced horizontal padding\n }\n\n th.rank,\n td.rank {\n padding-right: 4px;\n padding-left: 12px;\n }\n }\n }\n}\n"
},
{
"path": "src/containers/AMMRankings/api.ts",
"content": "import axios from 'axios'\n\nexport interface AMMPool {\n amm_account_id: string\n currency_1: string\n issuer_1?: string\n currency_2: string\n issuer_2?: string\n tvl_xrp: number\n tvl_usd: number\n trading_volume_xrp: number\n trading_volume_usd: number\n fees_collected_xrp: number\n fees_collected_usd: number\n annual_percentage_return: number\n liquidity_provider_count: number\n amm_created_timestamp: string\n // Trading fee from amm_info RPC (0-1000, where 1000 = 1%)\n trading_fee?: number\n // Token data from LOS /tokens/batch-get (server-cached)\n icon_1?: string\n icon_2?: string\n asset_class_1?: string\n asset_class_2?: string\n asset_subclass_1?: string\n asset_subclass_2?: string\n}\n\nexport interface AMMRankingsResponse {\n size: number\n sort_field: string\n sort_order: string\n count: number\n results: AMMPool[]\n}\n\nexport interface AggregatedStats {\n tvl_xrp: number\n tvl_usd: number\n amm_pool_count: number\n liquidity_provider_count: number\n trading_volume_xrp: number\n trading_volume_usd: number\n}\n\nexport interface HistoricalDataPoint {\n date: string\n tvl_xrp: number\n tvl_usd: number\n trading_volume_xrp: number\n trading_volume_usd: number\n}\n\nexport interface HistoricalTrendsResponse {\n amm_account_id: string\n time_range?: string\n start_date?: string\n total_data_points: number\n data_points: HistoricalDataPoint[]\n}\n\n/**\n * Fetch AMM rankings (top 1000 AMMs)\n * Icons, asset_class/asset_subclass, and trading_fee are included from server cache\n */\nexport const fetchAMMRankings = async (\n sortField: string = 'tvl_usd',\n sortOrder: 'asc' | 'desc' = 'desc',\n): Promise\n
\n \n
\n \n \n {t('tvl')}\n {renderTooltip('tvl')}\n \n \n {tvl ? formatCurrencyAmount(tvl) : DEFAULT_EMPTY_VALUE}\n \n
\n \n \n {t('number_of_amms')}\n {renderTooltip('number_of_amms')}\n \n \n {stats.amm_pool_count\n ? stats.amm_pool_count.toLocaleString()\n : DEFAULT_EMPTY_VALUE}\n \n
\n \n \n {t('number_of_lps')}\n {renderTooltip('number_of_lps')}\n \n \n {stats.liquidity_provider_count\n ? stats.liquidity_provider_count.toLocaleString()\n : DEFAULT_EMPTY_VALUE}\n \n
\n \n \n {t('volume_24h' as any)}\n {renderTooltip('volume_24h_all')}\n \n \n {volume24h ? formatCurrencyAmount(volume24h) : DEFAULT_EMPTY_VALUE}\n \n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/AMMRankings/svg.d.ts",
"content": "declare module '*.svg?url' {\n const content: string\n export default content\n}\n"
},
{
"path": "src/containers/AMMRankings/test/AMMRankingsTable.test.tsx",
"content": "import { render, screen, fireEvent } from '@testing-library/react'\nimport { AMMRankingsTable } from '../AMMRankingsTable'\nimport { AMMPool } from '../api'\nimport i18n from '../../../i18n/testConfigEnglish'\nimport { QuickHarness } from '../../test/utils'\n\n// Mock SVG imports\njest.mock('../../shared/images/hover.svg', () => 'svg')\njest.mock('../../shared/images/xrp_icon.svg?url', () => 'xrp_icon.svg')\njest.mock('../../shared/images/default_token_icon.svg', () => 'svg')\n\nconst createAMM = (overrides: Partial\n
\n\n {isInitialLoading ? (\n {t('amms')}
\n\n ({\n date: point.date,\n tvl: currencyMode === 'usd' ? point.tvl_usd : point.tvl_xrp,\n volume:\n currencyMode === 'usd'\n ? point.trading_volume_usd\n : point.trading_volume_xrp,\n }))}\n isLoading={isLoadingHistory}\n displayCurrency={currencyMode}\n setDisplayCurrency={setCurrencyMode}\n onTimeRangeChange={(range) => setTimeRange(range as TimeRange)}\n />\n\n
\n\n \n \n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/Accounts/AccountAsset/assetTables/HeldLPTokens.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { useEffect, useContext, useMemo } from 'react'\nimport { Loader } from '../../../shared/components/Loader'\nimport SocketContext from '../../../shared/SocketContext'\nimport Currency, {\n LP_TOKEN_IDENTIFIER,\n} from '../../../shared/components/Currency'\nimport { Account } from '../../../shared/components/Account'\nimport {\n formatUsdValue,\n formatTokenBalance,\n} from '../../../shared/NumberFormattingUtils'\nimport { useLanguage } from '../../../shared/hooks'\nimport { shortenAccount } from '../../../shared/utils'\n\nimport {\n getBalances,\n getAMMInfoByAMMAccount,\n} from '../../../../rippled/lib/rippled'\nimport { XRP_BASE } from '../../../shared/transactionUtils'\nimport { EmptyMessageTableRow } from '../../../shared/EmptyMessageTableRow'\nimport logger from '../../../../rippled/lib/logger'\n\nconst log = logger({ name: 'HeldLPTokens' })\n\nconst fetchAccountHeldLPTokens = async (rippledSocket, accountId) => {\n let balancesResponse\n try {\n balancesResponse = await getBalances(rippledSocket, accountId)\n } catch (error) {\n log.error(\n `Error calling gatewayBalances for account ${accountId}: ${JSON.stringify(error)}`,\n )\n return []\n }\n const lpTokens: any[] = []\n for (const [issuerAccount, assets] of Object.entries(\n balancesResponse?.assets ?? {},\n )) {\n for (const asset of assets as any[]) {\n if (asset.currency && asset.currency.startsWith(LP_TOKEN_IDENTIFIER)) {\n // eslint-disable-next-line no-await-in-loop\n const result = await processLPTokenAsset(\n rippledSocket,\n issuerAccount,\n asset,\n )\n\n // The currency code of an IOU could start with `LP_TOKEN_IDENTIFIER` as well,\n // but `result` will be null since getAMMInfoByAMMAccount will throw an exception\n if (result) {\n lpTokens.push(result)\n }\n }\n }\n }\n\n return lpTokens\n}\n\nconst processLPTokenAsset = async (rippledSocket, issuerAccount, asset) => {\n let ammInfoResponse\n try {\n ammInfoResponse = await getAMMInfoByAMMAccount(rippledSocket, issuerAccount)\n } catch (error) {\n log.error(`Error fetching AMM pool: ${JSON.stringify(error)}`)\n return null\n }\n\n if (!ammInfoResponse.amm) {\n return null\n }\n\n const ammData = ammInfoResponse.amm\n\n // Calculate share percentage\n const accountLPTokenBalance = parseFloat(asset.value)\n const ammLPTokenBalance = parseFloat(ammData.lp_token?.value || 0)\n const sharePercentage =\n ammLPTokenBalance > 0\n ? (100 * accountLPTokenBalance) / ammLPTokenBalance\n : 0\n\n const isAmount1XRP = typeof ammData.amount === 'string'\n const isAmount2XRP = typeof ammData.amount2 === 'string'\n\n // Calculate LP Token price in XRP only when one of the assets is XRP\n let lpTokenPriceInXRP = 0\n if (isAmount1XRP || isAmount2XRP) {\n const xrpAmount = isAmount1XRP\n ? parseFloat(ammData.amount) / XRP_BASE\n : parseFloat(ammData.amount2) / XRP_BASE\n\n if (ammLPTokenBalance > 0 && xrpAmount > 0) {\n // Price per LP token = (XRP in pool * 2) / total LP tokens\n // We multiply by 2 because LP token represents share of both assets\n lpTokenPriceInXRP = (xrpAmount * 2) / ammLPTokenBalance\n }\n }\n\n let currency1\n let currency2\n if (isAmount1XRP && !isAmount2XRP) {\n currency1 = 'XRP'\n currency2 = ammData.amount2.currency\n } else if (!isAmount1XRP && isAmount2XRP) {\n currency1 = 'XRP'\n currency2 = ammData.amount.currency\n } else {\n // Both are tokens (no XRP)\n currency1 = ammData.amount.currency\n currency2 = ammData.amount2.currency\n }\n\n return {\n ammInstance: issuerAccount,\n currency1,\n currency2,\n lpTokenBalance: accountLPTokenBalance,\n lpTokenPriceInXRP,\n share: sharePercentage,\n }\n}\n\ninterface HeldLPTokensProps {\n accountId: string\n xrpToUSDRate: number\n onChange?: (data: { count: number; isLoading: boolean }) => void\n}\n\nexport const HeldLPTokens = ({\n accountId,\n xrpToUSDRate,\n onChange,\n}: HeldLPTokensProps) => {\n const lang = useLanguage()\n const { t } = useTranslation()\n const rippledSocket = useContext(SocketContext)\n\n const heldLPTokensQuery = useQuery(['heldLPTokens', accountId], () =>\n fetchAccountHeldLPTokens(rippledSocket, accountId),\n )\n\n const lpTokenData = useMemo(\n () => heldLPTokensQuery.data ?? [],\n [heldLPTokensQuery.data],\n )\n\n // Two-tier sort: 1) XRP pairs first, 2) within XRP pairs, sort by USD value descending\n const rows = lpTokenData.sort((a, b) => {\n const aHasXRP = a.currency1 === 'XRP' || a.currency2 === 'XRP'\n const bHasXRP = b.currency1 === 'XRP' || b.currency2 === 'XRP'\n\n // First, prioritize XRP pairs\n if (aHasXRP && !bHasXRP) {\n return -1\n }\n if (!aHasXRP && bHasXRP) {\n return 1\n }\n\n // Then sort by Balance USD descending (only for XRP pairs)\n if (aHasXRP && bHasXRP) {\n const aBalanceUSD = a.lpTokenBalance * a.lpTokenPriceInXRP * xrpToUSDRate\n const bBalanceUSD = b.lpTokenBalance * b.lpTokenPriceInXRP * xrpToUSDRate\n return bBalanceUSD - aBalanceUSD\n }\n\n // For non-XRP pairs, maintain original order\n return 0\n })\n\n // Communicate count and loading state back to parent\n useEffect(() => {\n if (onChange) {\n onChange({ count: rows.length, isLoading: heldLPTokensQuery.isLoading })\n }\n }, [rows.length, heldLPTokensQuery.isLoading, onChange])\n\n if (heldLPTokensQuery.isLoading) {\n return | {t('account_page_asset_table_column_currency_code')} | \n{t('account_page_asset_table_column_issuer')} | \n{t('account_page_asset_table_column_price_usd')} | \n{t('account_page_asset_table_column_balance')} | \n{t('account_page_asset_table_column_balance_usd')} | \n{t('account_page_asset_table_column_asset_class')} | \n{t('account_page_asset_table_column_transfer_fee')} | \n{t('account_page_asset_table_column_frozen')} | \n
|---|---|---|---|---|---|---|---|
| \n \n {token.tokenIcon ? (\n \n \n | \n \n | \n {formattedUsdPrice} | \n{formattedBalance} | \n{formattedBalanceUsd} | \n{token.assetClass} | \n{token.transferFee || '--'} | \n{token.frozen} | \n
\n \n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/Accounts/AccountAsset/assetTables/HeldMPTs.tsx",
"content": "import { useQuery } from 'react-query'\nimport { useEffect, useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { RouteLink } from '../../../shared/routing'\nimport { MPT_ROUTE } from '../../../App/routes'\nimport { Loader } from '../../../shared/components/Loader'\nimport { EmptyMessageTableRow } from '../../../shared/EmptyMessageTableRow'\nimport { Account } from '../../../shared/components/Account'\nimport { Tooltip, useTooltip } from '../../../shared/components/Tooltip'\nimport {\n formatMPTIssuance,\n formatMPToken,\n formatTransferFee,\n} from '../../../../rippled/lib/utils'\nimport { getAccountMPTs, getMPTIssuance } from '../../../../rippled/lib/rippled'\nimport SocketContext from '../../../shared/SocketContext'\nimport {\n shortenAccount,\n shortenMPTID,\n convertScaledPrice,\n} from '../../../shared/utils'\nimport { useLanguage } from '../../../shared/hooks'\nimport logger from '../../../../rippled/lib/logger'\nimport { FutureDataIcon } from '../FutureDataIcon'\nimport { parseAmount } from '../../../shared/NumberFormattingUtils'\n\nconst log = logger({ name: 'HeldMPTs' })\n\ninterface HeldMPTsProps {\n accountId: string\n onChange?: (data: { count: number; isLoading: boolean }) => void\n}\n\nconst fetchAccountHeldMPTs = async (accountId: string, rippledSocket: any) => {\n const mpts: any[] = []\n let marker = ''\n do {\n try {\n // eslint-disable-next-line no-await-in-loop\n const response = await getAccountMPTs(rippledSocket, accountId, marker)\n if (!response?.account_objects) {\n break\n }\n\n mpts.push(...response.account_objects)\n marker = response.marker || ''\n } catch (error) {\n log.error(`Error fetching MPTs: ${JSON.stringify(error)}`)\n // Break the loop on error to avoid infinite retry\n break\n }\n } while (marker)\n\n // Format and filter MPTs\n const positiveBalanceMPTs = mpts\n .map((mpToken: any) => formatMPToken(mpToken))\n .filter((mpToken: any) => parseInt(mpToken.mptAmount || '0', 10) > 0)\n\n // For each MPTokenIssuanceID, call getMPTIssuance and format the response\n const mptIssuancePromises = positiveBalanceMPTs.map(async (mpToken: any) => {\n try {\n const mptIssuanceResponse = await getMPTIssuance(\n rippledSocket,\n mpToken.mptIssuanceID,\n )\n\n const formattedMPTIssuance = formatMPTIssuance(mptIssuanceResponse.node)\n return {\n mptIssuanceId: mpToken.mptIssuanceID,\n mptIssuance: formattedMPTIssuance,\n }\n } catch (error) {\n log.error(\n `Error fetching MPT issuance for token ${mpToken.mptIssuanceID}: ${JSON.stringify(error)}`,\n )\n return { mptIssuanceId: mpToken.mptIssuanceID, mptIssuance: null }\n }\n })\n\n const mptIssuanceResults = await Promise.all(mptIssuancePromises)\n const mptIssuanceIdToIssuance = new Map()\n mptIssuanceResults.forEach((result) => {\n if (result && result.mptIssuance) {\n mptIssuanceIdToIssuance.set(result.mptIssuanceId, result.mptIssuance)\n }\n })\n\n // Combine MPToken and MPTIssuance data\n const combinedMPTs = positiveBalanceMPTs.map((mpToken: any) => {\n const mptIssuance = mptIssuanceIdToIssuance.get(mpToken.mptIssuanceID)\n const { parsedMPTMetadata } = mptIssuance ?? {}\n\n return {\n tokenId: mpToken.mptIssuanceID,\n balance: convertScaledPrice(\n BigInt(mpToken.mptAmount),\n mptIssuance?.assetScale ?? 0,\n ),\n ticker: (parsedMPTMetadata?.ticker as string) || null,\n issuer: mptIssuance?.issuer || '',\n issuerName: (parsedMPTMetadata?.issuer_name as string) || null,\n assetClass: (parsedMPTMetadata?.asset_class as string) || null,\n transferFee: formatTransferFee(mptIssuance?.transferFee, 'MPT'),\n locked: (() => {\n if (mptIssuance?.flags?.includes('lsfMPTLocked')) {\n return 'Global'\n }\n if (mpToken.flags?.includes('lsfMPTLocked')) {\n return 'Individual'\n }\n\n return ''\n })(),\n }\n })\n\n return combinedMPTs\n}\n\nconst HeldMPTsContent = ({ accountId, onChange }: HeldMPTsProps) => {\n const lang = useLanguage()\n const { t } = useTranslation()\n const rippledSocket = useContext(SocketContext)\n const { tooltip } = useTooltip()\n\n const heldMPTsQuery = useQuery(['heldMPTs', accountId], () =>\n fetchAccountHeldMPTs(accountId, rippledSocket),\n )\n // TODO: When MPT Dex is live, sort MPTs based on USD balances\n const rows = heldMPTsQuery.data ?? []\n\n // Communicate count and loading state back to parent\n useEffect(() => {\n if (onChange) {\n onChange({ count: rows.length, isLoading: heldMPTsQuery.isLoading })\n }\n }, [rows.length, heldMPTsQuery.isLoading, onChange])\n\n if (heldMPTsQuery.isLoading) {\n return | {c} | \n ))}\n||||
|---|---|---|---|---|
| \n | \n \n | \n {formattedBalance} | \n{formattedBalanceUsd} | \n\n {row.share < 1\n ? row.share.toFixed(4)\n : row.share.toFixed(2)}\n %\n | \n
\n \n \n
\n
\n )\n}\n\nexport const HeldMPTs = ({ accountId, onChange }: HeldMPTsProps) => (\n | {t('account_page_asset_table_column_token_id')} | \n{t('account_page_asset_table_column_ticker')} | \n{t('account_page_asset_table_column_issuer')} | \n{t('account_page_asset_table_column_price_usd')} | \n{t('account_page_asset_table_column_balance')} | \n{t('account_page_asset_table_column_balance_usd')} | \n{t('account_page_asset_table_column_asset_class')} | \n{t('account_page_asset_table_column_transfer_fee')} | \n{t('account_page_asset_table_column_locked')} | \n
|---|---|---|---|---|---|---|---|---|
| \n | \n {token.ticker ? token.ticker : '--'} | \n\n | \n \n | \n {parseAmount(token.balance, 1, lang)} | \n\n | \n \n {token.assetClass ? token.assetClass.toUpperCase() : '--'}\n | \n{token.transferFee}% | \n\n {(() => {\n if (token.locked === '') {\n return '--'\n }\n if (token.locked === 'Global') {\n return t('account_page_asset_table_mpt_locked_global')\n }\n if (token.locked === 'Individual') {\n return t('account_page_asset_table_mpt_locked_individual')\n }\n return token.locked\n })()}\n | \n
\n \n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/Accounts/AccountAsset/assetTables/IssuedMPTs.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { useEffect, useContext } from 'react'\nimport { RouteLink } from '../../../shared/routing'\nimport { MPT_ROUTE } from '../../../App/routes'\nimport { Loader } from '../../../shared/components/Loader'\nimport { EmptyMessageTableRow } from '../../../shared/EmptyMessageTableRow'\nimport { FutureDataIcon } from '../FutureDataIcon'\nimport { Tooltip, useTooltip } from '../../../shared/components/Tooltip'\nimport { getAccountObjects } from '../../../../rippled/lib/rippled'\nimport SocketContext from '../../../shared/SocketContext'\nimport {\n formatMPTIssuance,\n formatTransferFee,\n} from '../../../../rippled/lib/utils'\nimport { shortenMPTID, convertScaledPrice } from '../../../shared/utils'\nimport { useLanguage } from '../../../shared/hooks'\nimport logger from '../../../../rippled/lib/logger'\nimport { parseAmount } from '../../../shared/NumberFormattingUtils'\n\nconst log = logger({ name: 'IssuedMPTs' })\n\ninterface IssuedMPTsProps {\n accountId: string\n onChange?: (data: { count: number; isLoading: boolean }) => void\n}\n\nconst fetchAccountIssuedMPTs = async (\n accountId: string,\n rippledSocket: any,\n) => {\n const mptIssuances: any[] = []\n let marker = ''\n do {\n try {\n // eslint-disable-next-line no-await-in-loop\n const response = await getAccountObjects(\n rippledSocket,\n accountId,\n 'mpt_issuance',\n marker,\n )\n if (!response?.account_objects) {\n break\n }\n\n mptIssuances.push(...response.account_objects)\n marker = response.marker || ''\n } catch (error) {\n log.error(`Error fetching MPT issuances: ${JSON.stringify(error)}`)\n // Break the loop on error to avoid infinite retry\n break\n }\n } while (marker)\n\n // Format the MPT issuances\n const issuedMPTs = mptIssuances.map((mptIssuance: any) => {\n const formattedIssuance = formatMPTIssuance(mptIssuance)\n const { parsedMPTMetadata } = formattedIssuance\n\n return {\n tokenId: mptIssuance.mpt_issuance_id,\n ticker: (parsedMPTMetadata?.ticker as string) || null,\n supply: convertScaledPrice(\n BigInt(formattedIssuance?.outstandingAmt) || 0,\n formattedIssuance?.assetScale || 0,\n ),\n assetClass: (parsedMPTMetadata?.asset_class as string) || null,\n transferFee: formatTransferFee(formattedIssuance?.transferFee, 'MPT'),\n locked: formattedIssuance?.flags?.includes('lsfMPTLocked')\n ? 'Global'\n : '',\n }\n })\n\n return issuedMPTs\n}\n\nconst IssuedMPTsContent = ({ accountId, onChange }: IssuedMPTsProps) => {\n const lang = useLanguage()\n const { t } = useTranslation()\n const rippledSocket = useContext(SocketContext)\n const { tooltip } = useTooltip()\n\n const issuedMPTsQuery = useQuery(['issuedMPTs', accountId], () =>\n fetchAccountIssuedMPTs(accountId, rippledSocket),\n )\n // TODO: When MPT Dex is live, sort MPTs based on USD price\n const rows = issuedMPTsQuery.data ?? []\n\n // Communicate count and loading state back to parent\n useEffect(() => {\n if (onChange) {\n onChange({ count: rows.length, isLoading: issuedMPTsQuery.isLoading })\n }\n }, [rows.length, issuedMPTsQuery.isLoading, onChange])\n\n if (issuedMPTsQuery.isLoading) {\n return | {t('account_page_asset_table_column_currency_code')} | \n{t('account_page_asset_table_column_price_usd')} | \n{t('account_page_asset_table_column_trustlines')} | \n{t('account_page_asset_table_column_holders')} | \n{t('account_page_asset_table_column_supply')} | \n{t('account_page_asset_table_column_asset_class')} | \n{t('account_page_asset_table_column_transfer_fee')} | \n{t('account_page_asset_table_column_frozen')} | \n
|---|---|---|---|---|---|---|---|
| \n \n {token.tokenIcon ? (\n \n \n | \n {formatUsdValue(token.priceInUSD, lang)} | \n{localizeNumber(token.trustlines, lang)} | \n{localizeNumber(token.holders, lang)} | \n{formatTokenBalance(token.supply, lang)} | \n{token.assetClass} | \n{token.transferFee} | \n{token.frozen} | \n
\n \n \n
\n
\n )\n}\n\nexport const IssuedMPTs = ({ accountId, onChange }: IssuedMPTsProps) => (\n | {t('account_page_asset_table_column_token_id')} | \n{t('account_page_asset_table_column_ticker')} | \n{t('account_page_asset_table_column_price_usd')} | \n{t('account_page_asset_table_column_circulating_supply')} | \n{t('account_page_asset_table_column_asset_class')} | \n{t('account_page_asset_table_column_transfer_fee')} | \n{t('account_page_asset_table_column_locked')} | \n
|---|---|---|---|---|---|---|
| \n | \n {token.ticker ? token.ticker : '--'} | \n\n | \n {parseAmount(token.supply, 1, lang)} | \n\n {token.assetClass ? token.assetClass.toUpperCase() : '--'}\n | \n{token.transferFee}% | \n\n {token.locked === ''\n ? '--'\n : t('account_page_asset_table_mpt_locked_global')}\n | \n
\n \n \n
\n
\n )\n }\n\n return (\n | {t('account_page_asset_table_column_token_id')} | \n {showIssuer && (\n{t('account_page_asset_table_column_issuer')} | \n )}\n{t('account_page_asset_table_column_url')} | \n{t('account_page_asset_table_column_transfer_fee')} | \n{t('account_page_asset_table_column_lowest_ask')} | \n{t('account_page_asset_table_column_highest_bid')} | \n
|---|---|---|---|---|---|
| \n | \n {showIssuer && nft.issuer && (\n \n | \n )}\n \n {nft.url ? (\n | \n {nft.transferFee}% | \n\n {nft.lowestAsk\n ? localizeNumber(\n nft.lowestAsk,\n lang,\n XRP_SMALL_BALANCE_CURRENCY_OPTIONS,\n )\n : '--'}\n | \n\n {nft.highestBid\n ? localizeNumber(\n nft.highestBid,\n lang,\n XRP_SMALL_BALANCE_CURRENCY_OPTIONS,\n )\n : '--'}\n | \n
\n setHeldSectionOpen((s) => !s)}\n aria-expanded={heldSectionOpen}\n aria-label=\"Toggle assets held section\"\n >\n
\n \n {t('account_page_asset_held_title')}\n
\n\n setIssuedSectionOpen((s) => !s)}\n aria-expanded={issuedSectionOpen}\n aria-label=\"Toggle assets issued section\"\n >\n
\n \n {t('account_page_asset_issued_title')}\n
\n\n {isAccountDeleted && (\n
\n )\n}\n\nexport default AccountHeader\n"
},
{
"path": "src/containers/Accounts/AccountHeader/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n\n.account-header {\n padding: 50px 0 30px;\n\n .deleted-banner {\n display: flex;\n flex-direction: column;\n padding: 25px;\n border: 1px solid $orange-50;\n border-radius: 8px;\n margin-bottom: 30px;\n background: $black-90;\n gap: 12px;\n\n .deleted-label {\n display: flex;\n max-width: 180px;\n align-items: center;\n padding: 3px 12px;\n border: 1px solid $orange-50;\n border-radius: 100px;\n margin-bottom: 8px;\n background: $orange-80;\n color: $black-0;\n font-size: 12px;\n @include semibold;\n\n gap: 10px;\n text-transform: uppercase;\n\n .deleted-info-icon {\n width: 16px;\n height: 16px;\n margin-right: 3px;\n }\n }\n\n .deleted-message {\n margin: 0;\n color: $black-0;\n font-size: 16px;\n }\n }\n\n .address-panel {\n display: flex;\n height: auto;\n box-sizing: border-box;\n flex: none;\n flex-direction: column;\n flex-grow: 0;\n align-items: flex-start;\n align-self: stretch;\n order: 0;\n padding: 25px;\n border: 1px solid $black-70;\n border-radius: 8px;\n background: $black-90;\n gap: 10px;\n\n .address-label {\n color: $black-40;\n font-size: 14px;\n @include semibold;\n\n line-height: 1;\n text-transform: uppercase;\n }\n\n .address-value {\n display: inline-flex;\n align-items: center;\n color: $black-0;\n font-size: 24px;\n @include bold;\n\n line-height: 1;\n word-break: break-all;\n }\n\n .domain {\n display: flex;\n\n .domain-label {\n margin-right: 8px;\n color: $black-40;\n font-size: 14px;\n line-height: 1;\n }\n\n a {\n font-size: 14px;\n line-height: 1;\n word-break: break-all;\n }\n }\n\n .classic-address {\n display: flex;\n\n .classic-address-label {\n margin-right: 8px;\n color: $black-40;\n font-size: 14px;\n line-height: 1;\n }\n\n a {\n font-size: 14px;\n line-height: 1;\n word-break: break-all;\n }\n }\n\n .address-tag {\n display: flex;\n\n .address-tag-label {\n margin-right: 8px;\n color: $black-40;\n font-size: 14px;\n line-height: 1;\n }\n\n .address-tag-value {\n color: $black-0;\n font-size: 14px;\n line-height: 1;\n word-break: break-all;\n }\n }\n }\n\n .info-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-top: 68px;\n\n @include for-size(desktop-up) {\n flex-direction: row;\n margin-top: 80px;\n }\n\n .values {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 18px;\n color: $white;\n\n @include for-size(desktop-up) {\n flex-direction: column;\n margin-bottom: 0;\n }\n\n .title {\n padding-bottom: 4px;\n margin-bottom: 4.5px;\n color: $black-40;\n font-size: 14px;\n text-transform: uppercase;\n @include semibold;\n }\n\n .value {\n color: $white;\n font-size: 18px;\n line-height: 22.5px;\n text-decoration: none;\n @include bold;\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Accounts/AccountHeader/test/AccountHeader.test.tsx",
"content": "import { render, screen } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport i18n from '../../../../i18n/testConfigEnglish'\nimport AccountHeader from '../index'\n\n// Mock the DomainLink component\njest.mock('../../../shared/components/DomainLink', () => ({\n __esModule: true,\n default: ({ domain }: { domain: string }) => (\n \n {domain}\n \n ),\n}))\n\n// Mock the Account component\njest.mock('../../../shared/components/Account', () => ({\n Account: ({ account }: { account: string }) => (\n {account}\n ),\n}))\n\n// Mock the SVG import\njest.mock('../../../shared/images/info-duotone.svg', () => ({\n __esModule: true,\n default: ({ className }: { className?: string }) => (\n \n ),\n}))\n\n// Test wrapper component\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n \n
\n )}\n\n \n
\n \n {t('account_page_deleted_account_warning')}\n
\n \n
\n \n {xAddress\n ? t('account_page_extended_address')\n : t('account_page_address')}\n
\n \n {accountId}\n
\n {xAddress?.classicAddress && (\n \n
\n )}\n {xAddress?.tag && (\n \n {t('account_page_classic_address')}:\n
\n \n
\n )}\n {account?.info?.domain && (\n \n {t('account_page_address_tag')}:\n
\n {xAddress.tag}
\n \n
\n )}\n {t('account_page_domain')}:
\n \n
\n )\n}\n\nexport default Balances\n"
},
{
"path": "src/containers/Accounts/AccountSummary/DetailsCard.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { localizeNumber } from '../../shared/utils'\nimport { XRP_SMALL_BALANCE_CURRENCY_OPTIONS } from '../../shared/NumberFormattingUtils'\nimport { Account } from '../../shared/components/Account'\n\ninterface DetailsCardProps {\n account: any\n lang: string\n}\n\nconst DetailsCard = ({ account, lang }: DetailsCardProps) => {\n const { t } = useTranslation()\n\n return (\n \n
\n \n {typeof XrpIcon === 'string' ? (\n 
\n ) : (\n
\n \n {localizeNumber(xrpBalance, lang, XRP_CURRENCY_OPTIONS)}\n
\n \n
\n \n
\n \n {localizeNumber(xrpBalanceInUSD, lang, USD_CURRENCY_OPTIONS)}\n
\n \n
\n \n {typeof ReserveIcon === 'string' ? (\n 
\n ) : (\n
\n \n {localizeNumber(\n account.info?.reserve ?? 0,\n lang,\n XRP_CURRENCY_OPTIONS,\n )}\n
\n \n
\n )\n}\n\nexport default DetailsCard\n"
},
{
"path": "src/containers/Accounts/AccountSummary/FlagsCard.tsx",
"content": "import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\n\ninterface FlagsCardProps {\n account: any\n}\n\nconst FlagsCard = ({ account }: FlagsCardProps) => {\n const { t } = useTranslation()\n\n const flags = useMemo<\n Array<{\n key: string\n title: string\n description: string\n enabled: boolean\n }>\n >(() => {\n const accountFlags: string[] = account.info?.flags ?? []\n\n return [\n {\n key: 'lsfGlobalFreeze',\n title: t('account_flag_title_lsf_global_freeze'),\n description: t('account_flag_description_lsf_global_freeze'),\n enabled: accountFlags.includes('lsfGlobalFreeze'),\n },\n {\n key: 'lsfDisableMaster',\n title: t('account_flag_title_lsf_disable_master'),\n description: t('account_flag_description_lsf_disable_master'),\n enabled: accountFlags.includes('lsfDisableMaster'),\n },\n {\n key: 'lsfDefaultRipple',\n title: t('account_flag_title_lsf_default_ripple'),\n description: t('account_flag_description_lsf_default_ripple'),\n enabled: accountFlags.includes('lsfDefaultRipple'),\n },\n {\n key: 'lsfAllowTrustLineClawback',\n title: t('account_flag_title_lsf_allow_trustline_clawback'),\n description: t('account_flag_description_lsf_allow_trustline_clawback'),\n enabled: accountFlags.includes('lsfAllowTrustLineClawback'),\n },\n {\n key: 'lsfAllowTrustLineLocking',\n title: t('account_flag_title_lsf_allow_trustline_locking'),\n description: t('account_flag_description_lsf_allow_trustline_locking'),\n enabled: accountFlags.includes('lsfAllowTrustLineLocking'),\n },\n {\n key: 'lsfRequireDestTag',\n title: t('account_flag_title_lsf_require_destination_tag'),\n description: t('account_flag_description_lsf_require_destination_tag'),\n enabled: accountFlags.includes('lsfRequireDestTag'),\n },\n {\n key: 'lsfNoFreeze',\n title: t('account_flag_title_lsf_no_freeze'),\n description: t('account_flag_description_lsf_no_freeze'),\n enabled: accountFlags.includes('lsfNoFreeze'),\n },\n {\n key: 'lsfRequireAuth',\n title: t('account_flag_title_lsf_require_auth'),\n description: t('account_flag_description_lsf_require_auth'),\n enabled: accountFlags.includes('lsfRequireAuth'),\n },\n {\n key: 'lsfDisallowXRP',\n title: t('account_flag_title_lsf_disallow_xrp'),\n description: t('account_flag_description_lsf_disallow_xrp'),\n enabled: accountFlags.includes('lsfDisallowXRP'),\n },\n {\n key: 'lsfDisallowIncomingTrustline',\n title: t('account_flag_title_lsf_disallow_incoming_trustline'),\n description: t(\n 'account_flag_description_lsf_disallow_incoming_trustline',\n ),\n enabled: accountFlags.includes('lsfDisallowIncomingTrustline'),\n },\n {\n key: 'lsfDisallowIncomingPayChannel',\n title: t('account_flag_title_lsf_disallow_incoming_pay_chan'),\n description: t(\n 'account_flag_description_lsf_disallow_incoming_pay_chan',\n ),\n enabled: accountFlags.includes('lsfDisallowIncomingPayChannel'),\n },\n {\n key: 'lsfDisallowIncomingNFTokenOffer',\n title: t('account_flag_title_lsf_disallow_incoming_nft_token_offer'),\n description: t(\n 'account_flag_description_lsf_disallow_incoming_nft_token_offer',\n ),\n enabled: accountFlags.includes('lsfDisallowIncomingNFTokenOffer'),\n },\n {\n key: 'asfAuthorizedNFTokenMinter',\n title: t('account_flag_title_asf_authorized_nft_token_minter'),\n description: t(\n 'account_flag_description_asf_authorized_nft_token_minter',\n ),\n // No ledger flag exists for the AccountSet flag `asfAuthorizedNFTokenMinter`.\n // The NFTokenMinter field's presence or absence is sufficient to determine the flag's status.\n enabled: !!account.info?.nftMinter,\n },\n {\n key: 'lsfDisallowIncomingCheck',\n title: t('account_flag_title_lsf_disallow_incoming_check'),\n description: t('account_flag_description_lsf_disallow_incoming_check'),\n enabled: accountFlags.includes('lsfDisallowIncomingCheck'),\n },\n {\n key: 'lsfDepositAuth',\n title: t('account_flag_title_lsf_deposit_auth'),\n description: t('account_flag_description_lsf_deposit_auth'),\n enabled: accountFlags.includes('lsfDepositAuth'),\n },\n {\n key: 'asfAccountTxnID',\n title: t('account_flag_title_asf_account_txn_id'),\n description: t('account_flag_description_asf_account_txn_id'),\n // No ledger flag exists for the AccountSet flag `asfAccountTxnID`.\n // The AccountTxnID field's presence or absence is sufficient to determine the flag's status.\n enabled: !!account.info?.accountTransactionID,\n },\n ]\n }, [account.info, t])\n\n return (\n \n
\n {t('account_page_details')}
\n \n
\n \n
\n \n {t('account_page_current_sequence')}\n
\n \n {localizeNumber(account.info?.sequence, lang)}\n
\n \n
\n {account.info?.emailHash && (\n {t('account_page_ticket_count')}
\n \n {localizeNumber(account.info?.ticketCount, lang)}\n
\n \n
\n )}\n {account.paychannels?.total_available && (\n {t('account_page_email_hash')}
\n {account.info.emailHash}
\n \n
\n )}\n {account.info?.nftMinter && (\n \n {t('account_page_payment_channels')}\n
\n \n {t('account_page_payment_channels_text', {\n currency: localizeNumber(\n account.paychannels.total_available,\n lang,\n XRP_SMALL_BALANCE_CURRENCY_OPTIONS,\n ),\n number: account.paychannels.channels.length,\n })}\n
\n \n
\n )}\n {t('account_page_nft_minter')}
\n \n
\n \n
\n \n )\n}\n\nexport default FlagsCard\n"
},
{
"path": "src/containers/Accounts/AccountSummary/SignersCard.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { Account } from '../../shared/components/Account'\nimport { localizeNumber, shortenAccount } from '../../shared/utils'\n\ninterface Signer {\n account: string\n weight?: number // Individual weight values cannot exceed 2^16-1.\n}\n\ninterface SignersCardProps {\n signers: Signer[]\n}\nconst SignersCard = ({ signers }: SignersCardProps) => {\n const { t } = useTranslation()\n return (\n \n
\n {t('account_page_flags')}
\n \n {flags.map((flag, i) => (\n
\n ))}\n \n \n {(() => {\n if (flag.key === 'lsfDisableMaster') {\n return flag.enabled ? t('yes') : t('no')\n }\n return flag.enabled\n ? t('account_page_flag_status_enabled')\n : t('account_page_flag_status_disabled')\n })()}\n
\n \n
\n {flag.title}
\n {flag.description}
\n \n
\n )\n}\n\nexport default SignersCard\n"
},
{
"path": "src/containers/Accounts/AccountSummary/index.tsx",
"content": "import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\n\nimport { useLanguage } from '../../shared/hooks'\nimport ArrowIcon from '../../shared/images/down_arrow.svg'\nimport Balances from './Balances'\nimport DetailsCard from './DetailsCard'\nimport FlagsCard from './FlagsCard'\nimport SignersCard from './SignersCard'\n\nimport './styles.scss'\n\ninterface AccountSummaryProps {\n account: any\n xrpToUSDRate: number\n}\n\nexport const AccountSummary = ({\n account = {},\n xrpToUSDRate,\n}: AccountSummaryProps) => {\n const { t } = useTranslation()\n const lang = useLanguage()\n const [propertiesOpen, setPropertiesOpen] = useState(false)\n\n return (\n \n
\n {t('account_page_signers')}
\n \n {signers.map((signer, i) => (\n
\n \n
\n ))}\n \n
\n {signer.weight !== undefined && (\n \n {t('account_page_signer_weight')}{' '}\n {localizeNumber(signer.weight)}\n
\n )}\n \n
\n \n setPropertiesOpen((s) => !s)}\n aria-expanded={propertiesOpen}\n aria-label=\"Toggle account properties\"\n >\n
\n {propertiesOpen && (\n {t('account_page_account_properties')}
\n\n
\n )}\n \n Balance: {account.info?.balance} Rate: {xrpToUSDRate}\n
\n ),\n}))\n\njest.mock('../DetailsCard', () => ({\n __esModule: true,\n default: ({ account, lang }: any) => (\n \n Sequence: {account.info?.sequence} Lang: {lang}\n
\n ),\n}))\n\njest.mock('../FlagsCard', () => ({\n __esModule: true,\n default: ({ account }: any) => (\n \n Flags: {account.info?.flags?.length || 0}\n
\n ),\n}))\n\njest.mock('../SignersCard', () => ({\n __esModule: true,\n default: ({ signers }: any) => (\n Signers: {signers.length}
\n ),\n}))\n\njest.mock('../../../shared/images/down_arrow.svg', () => ({\n __esModule: true,\n default: () => ,\n}))\n\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n \n fetchNextPage()}\n hasAdditionalResults={hasNextPage}\n />\n
\n )\n}\n"
},
{
"path": "src/containers/Accounts/AccountTransactionTable/index.ts",
"content": "export * from './AccountTransactionTable'\n"
},
{
"path": "src/containers/Accounts/AccountTransactionTable/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n\n.transactions-header {\n @include bold;\n\n font-size: 20px;\n}\n\n@media (max-width: $tablet-portrait-upper-boundary) {\n .transactions-header {\n font-size: 18px;\n }\n}\n"
},
{
"path": "src/containers/Accounts/AccountTransactionTable/test/AccountTransactionTable.test.tsx",
"content": "import { render, waitFor } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\nimport i18n from '../../../../i18n/testConfig'\nimport { AccountTransactionTable } from '../index'\nimport TEST_TRANSACTIONS_DATA from './mockTransactions.json'\nimport { getAccountTransactions } from '../../../../rippled'\nimport { flushPromises, QuickHarness } from '../../../test/utils'\nimport Mock = jest.Mock\n\njest.mock('../../../../rippled', () => ({\n __esModule: true,\n getAccountTransactions: jest.fn(),\n}))\n\nconst TEST_ACCOUNT_ID = 'rTEST_ACCOUNT'\n\ndescribe('AccountTransactionsTable container', () => {\n beforeEach(() => {\n jest.resetModules()\n })\n\n const renderComponent = (\n getAccountTransactionsImpl: () => Promise\n
\n {t('transactions')}
\n\n
\n )\n}\n\nexport const AccountsRouter = () => {\n const { id: accountId = '' } = useParams<{ id: string }>()\n const rippledSocket = useContext(SocketContext)\n\n const { data: comp, error } = useQuery([accountId], async () => {\n let classicAddress = accountId\n if (isValidXAddress(accountId)) {\n classicAddress = xAddressToClassicAddress(accountId).classicAddress\n }\n\n if (!isValidClassicAddress(classicAddress)) {\n throw new Error('account malformed', BAD_REQUEST)\n }\n\n try {\n const data = await getAccountInfo(rippledSocket, classicAddress)\n\n if (data.AMMID) {\n return (\n \n
\n )\n}\n"
},
{
"path": "src/containers/Accounts/styles.scss",
"content": "@use '../shared/css/variables';\n\n.accounts-page {\n .loader {\n min-height: 100px;\n }\n}\n"
},
{
"path": "src/containers/Accounts/test/AccountsRouter.test.tsx",
"content": "import { render, screen, waitFor } from '@testing-library/react'\nimport { Route } from 'react-router'\nimport i18n from '../../../i18n/testConfig'\nimport { AccountsRouter } from '../AccountsRouter'\nimport { QuickHarness } from '../../test/utils'\nimport { ACCOUNT_ROUTE } from '../../App/routes'\nimport * as rippled from '../../../rippled/lib/rippled'\nimport * as ammUtils from '../../AMMPool/utils'\nimport { Error as RippledError } from '../../../rippled/lib/utils'\n\njest.mock('../../../rippled/lib/rippled')\njest.mock('../../AMMPool/utils')\n\njest.mock('../index', () => ({\n __esModule: true,\n Accounts: () => Accounts Page
,\n}))\n\nconst mockGetAccountInfo = rippled.getAccountInfo as jest.Mock\nconst mockDetectDeletedAMM = ammUtils.getDeletedAMMData as jest.Mock\n\ndescribe('AccountsRouter', () => {\n const ACTIVE_AMM_ACCOUNT = 'rLjUKpwUVmz3vCTmFkXungxwzdoyrWRsFG'\n const DELETED_AMM_ACCOUNT = 'raxKnsu4ea6xoehws1tyvc7W2XPM5VcmJp'\n const REGULAR_ACCOUNT = 'rncKvRcdDq9hVJpdLdTcKoxsS3NSkXsvfM'\n const DELETED_ACCOUNT = 'rwGBCTYmPQ8NrfDVL5DdzS3aBbiXtbwngA'\n\n const renderRouter = (accountId: string) =>\n render(\n Account Header
,\n}))\n\njest.mock('../AccountSummary', () => ({\n __esModule: true,\n AccountSummary: () => (\n Account Summary
\n ),\n}))\n\njest.mock('../AccountAsset', () => ({\n __esModule: true,\n default: () => Account Asset
,\n}))\n\njest.mock('../AccountTransactionTable', () => ({\n __esModule: true,\n AccountTransactionTable: () => (\n Account Transaction Table
\n ),\n}))\n\nconst mockedGetAccountState = getAccountState as Mock\n\ndescribe('Account container', () => {\n const TEST_ACCOUNT_ID = 'rncKvRcdDq9hVJpdLdTcKoxsS3NSkXsvfM'\n\n const renderComponent = () =>\n render(\n \n
\n )\n }\n return null\n}\n\nconst CustomLegend = () => {\n const { t } = useTranslation()\n return (\n {label}
\n\n {t('yeas_count', {\n yeas_count: payload ? payload[0].payload.yeas : 0,\n })}\n
\n\n {t('yeas_percent', {\n yeas_percent: payload\n ? payload[0].payload.yeas_percent.toFixed(2)\n : 0,\n })}\n
\n\n {t('nays_count', {\n nays_count: payload ? payload[0].payload.nays : 0,\n })}\n
\n\n {t('nays_percent', {\n nays_percent: payload\n ? payload[0].payload.nays_percent.toFixed(2)\n : 0,\n })}\n
\n\n
\n )\n}\n\nexport const BarChartVoting = ({ data }: Props) => {\n const { t } = useTranslation()\n const [showTooltips, setShowTooltips] = useState(false)\n\n return (\n \n
\n \n \n {t('yeas')}\n
\n \n \n {t('nays')}\n
\n \n \n \n \n setShowTooltips(true)}\n onMouseLeave={() => setShowTooltips(false)}\n />\n setShowTooltips(true)}\n onMouseLeave={() => setShowTooltips(false)}\n />\n \n
\n )\n}\n"
},
{
"path": "src/containers/Amendment/Simple.tsx",
"content": "/* eslint-disable no-nested-ternary -- Disabled for this file */\nimport { useTranslation } from 'react-i18next'\nimport { Link } from 'react-router'\nimport { TRANSACTION_ROUTE } from '../App/routes'\nimport { SimpleRow } from '../shared/components/Transaction/SimpleRow'\nimport { useLanguage } from '../shared/hooks'\nimport { RouteLink } from '../shared/routing'\nimport { BREAKPOINTS, localizeDate } from '../shared/utils'\nimport { AmendmentData, Voter } from '../shared/vhsTypes'\n\ninterface validatorUNL {\n signing_key: string\n domain: string\n unl: string | false\n}\n\ninterface SimpleProps {\n data: AmendmentData\n validators: Array{`${t('not')} ${t('enabled')}`}
\n ) : (\n {t('enabled')}
\n )\n\n const renderDate = (date: string | null) =>\n date\n ? localizeDate(new Date(date), language, DATE_OPTIONS_AMENDMENT)\n : DEFAULT_EMPTY_VALUE\n\n const renderRowIndex = () =>\n voting ? (\n <>\n {data.voted !== undefined && (\n <>\n \n {data.name} \n {data.id} \n \n {data.rippled_version ? (\n \n {`v${data.rippled_version}`}\n \n ) : (\n t('n_a')\n )}\n \n {voting ? (\n {data.threshold} \n ) : (\n data.tx_hash && (\n \n \n {' '}\n {data.tx_hash}\n \n \n )\n )}\n \n \n {details}\n \n \n {renderStatus()} \n {width < BREAKPOINTS.landscape && rowIndex}\n
\n {width >= BREAKPOINTS.landscape && (\n {rowIndex}
\n )}\n \n )\n}\n"
},
{
"path": "src/containers/Amendment/Votes.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { AmendmentData } from '../shared/vhsTypes'\nimport SuccessIcon from '../shared/images/success.svg'\nimport { RouteLink } from '../shared/routing'\nimport { VALIDATOR_ROUTE } from '../App/routes'\nimport { BarChartVoting } from './BarChartVoting'\n\ninterface VotesProps {\n data: AmendmentData\n validators: Array\n
\n )\n\n const getNays = () =>\n validators\n .filter(\n (validator) =>\n !data.voted?.validators.some(\n (voted) => voted.signing_key === validator.signing_key,\n ),\n )\n .sort(compareValidators)\n\n const getYeas = () =>\n validators\n .filter((validator) =>\n data.voted?.validators.some(\n (voted) => voted.signing_key === validator.signing_key,\n ),\n )\n .sort(compareValidators)\n\n const yeas = getYeas()\n const nays = getNays()\n const validatorsUNLCount = validators.filter(\n (val) => val.unl !== false,\n ).length\n const validatorsNonUNLCount = validators.filter(\n (val) => val.unl === false,\n ).length\n\n const aggregateVoting = () => [\n {\n label: 'UNL',\n yeas: yeas.filter((val) => val.unl !== false).length,\n nays: nays.filter((val) => val.unl !== false).length,\n yeas_percent:\n (yeas.filter((val) => val.unl !== false).length / validatorsUNLCount) *\n 100,\n nays_percent:\n (nays.filter((val) => val.unl !== false).length / validatorsUNLCount) *\n 100,\n },\n {\n label: 'non-UNL',\n yeas: yeas.filter((val) => val.unl === false).length,\n nays: nays.filter((val) => val.unl === false).length,\n yeas_percent:\n (yeas.filter((val) => val.unl === false).length /\n validatorsNonUNLCount) *\n 100,\n nays_percent:\n (nays.filter((val) => val.unl === false).length /\n validatorsNonUNLCount) *\n 100,\n },\n ]\n\n const aggregate = aggregateVoting()\n\n return voting ? (\n {t(label)}
\n \n {validatorsList.map((validator, index) => (\n
\n \n {index + 1}\n \n \n {validator.domain ? validator.domain : validator.pubkey}\n \n \n {validator.unl && (\n \n
\n ))}\n \n {aggregate &&
\n ) : null\n}\n"
},
{
"path": "src/containers/Amendment/amendment.scss",
"content": "@use '../shared/css/variables' as *;\n@use '../shared/css/table';\n\n.amendment-summary {\n width: 80%;\n max-width: 1200px;\n margin: auto;\n\n .simple-body {\n max-width: 1100px;\n }\n\n .type {\n display: inline-block;\n margin-top: 80px;\n margin-bottom: 32px;\n color: $white;\n font-size: 32px;\n\n @include for-size(tablet-portrait-up) {\n margin-top: 120px;\n margin-bottom: 64px;\n font-size: 42px;\n }\n\n @include bold;\n }\n\n .rows {\n padding-left: 0;\n }\n\n .label {\n margin-bottom: 0;\n font-weight: 600;\n }\n\n .index {\n width: 220px;\n }\n\n .badge {\n max-width: fit-content;\n margin: 0;\n color: $black-100 !important;\n text-transform: capitalize;\n\n &.voting {\n background-color: $black-30;\n }\n\n &.enabled {\n background-color: $green-60;\n }\n\n &.consensus {\n margin-top: 6px;\n background-color: $yellow-50;\n font-weight: 700 !important;\n }\n }\n\n .value {\n &.eta {\n &.no {\n color: $yellow-50 !important;\n }\n }\n }\n\n .note {\n .unl {\n display: inline-block;\n margin: 0 10px;\n color: $green-40;\n vertical-align: middle;\n }\n }\n\n .votes {\n max-width: 1200px;\n margin: 48px 0;\n\n .votes-columns {\n margin: 48px 0;\n\n @include for-size(desktop-up) {\n display: grid;\n gap: 48px;\n grid-template-columns: repeat(2, 1fr);\n }\n\n .label {\n @include bold;\n\n margin-bottom: 24px;\n font-size: 24px;\n text-transform: capitalize;\n }\n\n .votes-column {\n min-width: 0;\n max-width: 100%;\n flex: 1 1 0px;\n margin-top: 24px;\n\n .vals {\n background: $black-80;\n\n .row {\n display: flex;\n overflow: hidden;\n padding: 16px;\n border-bottom: 1px solid $black-70;\n white-space: nowrap;\n\n .val {\n overflow: hidden;\n max-width: fit-content;\n flex: 1;\n font-size: 14px;\n text-overflow: ellipsis;\n }\n\n .unl {\n margin-left: 8px;\n color: $green-40;\n }\n\n .index {\n max-width: 16px;\n margin-right: 24px;\n }\n }\n }\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Amendment/index.tsx",
"content": "import { useContext } from 'react'\nimport axios from 'axios'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { useWindowSize } from 'usehooks-ts'\nimport { useRouteParams } from '../shared/routing'\nimport { AMENDMENT_ROUTE } from '../App/routes'\nimport NetworkContext from '../shared/NetworkContext'\nimport {\n FETCH_INTERVAL_ERROR_MILLIS,\n FETCH_INTERVAL_VHS_MILLIS,\n NOT_FOUND,\n SERVER_ERROR,\n} from '../shared/utils'\nimport { Simple } from './Simple'\nimport { AmendmentData } from '../shared/vhsTypes'\nimport Log from '../shared/log'\nimport { Votes } from './Votes'\n\nimport './amendment.scss'\nimport NoMatch from '../NoMatch'\nimport { useAnalytics } from '../shared/analytics'\nimport { Loader } from '../shared/components/Loader'\n\nexport const Amendment = () => {\n const network = useContext(NetworkContext)\n const { identifier = '' } = useRouteParams(AMENDMENT_ROUTE)\n const { width } = useWindowSize()\n const { t } = useTranslation()\n const { trackException } = useAnalytics()\n\n const ERROR_MESSAGES = {\n [NOT_FOUND]: {\n title: 'amendment_not_found',\n hints: ['check_amendment_key'],\n },\n default: {\n title: 'generic_error',\n hints: ['not_your_fault'],\n },\n }\n\n const getErrorMessage = (error: keyof typeof ERROR_MESSAGES | null) =>\n (error && ERROR_MESSAGES[error]) || ERROR_MESSAGES.default\n\n const {\n data,\n error,\n isLoading: isAmendmentLoading,\n } = useQuery\n {renderColumn('yeas', yeas)}\n {renderColumn('nays', nays)}\n
\n \n {t('note')}:\n \n
\n \n
\n {t('amendment_summary')}
\n \n {data && validators && (\n
\n {data && validators && \n {(isValidatorsLoading || isAmendmentLoading) &&
\n )\n}\n"
},
{
"path": "src/containers/Amendment/test/AmendmentSummary.test.js",
"content": "import { render, waitFor } from '@testing-library/react'\nimport moxios from 'moxios'\nimport { Route } from 'react-router'\nimport { Amendment } from '..'\nimport i18n from '../../../i18n/testConfig'\nimport NetworkContext from '../../shared/NetworkContext'\nimport { QuickHarness } from '../../test/utils'\nimport { AMENDMENT_ROUTE } from '../../App/routes'\nimport votingAmendment from './mockVotingAmendment.json'\nimport validators from './mockValidatorsList.json'\nimport { NOT_FOUND } from '../../shared/utils'\n\njest.mock('usehooks-ts', () => ({\n useWindowSize: () => ({\n width: 375,\n height: 600,\n }),\n}))\n\nconst MOCK_IDENTIFIER = votingAmendment.amendment.id\n\ndescribe('Amendments Page container', () => {\n const renderAmendment = () =>\n render(\n mock-name
',\n )\n\n expect(rows[1].querySelector('.value').outerHTML).toBe(\n 'mock-amendment-id
',\n )\n\n expect(rows[2].querySelector('.value').outerHTML).toBe(\n '',\n )\n\n expect(rows[3].querySelector('.value').outerHTML).toBe(\n '3/4
',\n )\n\n expect(rows[4].querySelector('.value a').outerHTML).toBe(\n 'https://xrpl.org/known-amendments.html#mock-name',\n )\n\n expect(rows[5].querySelector('.value .badge').outerHTML).toBe(\n 'not enabled
',\n )\n\n expect(rows[6].querySelector('.value').outerHTML).toBe(\n '2
',\n )\n\n expect(rows[7].querySelector('.value').outerHTML).toBe(\n '4
',\n )\n\n expect(rows[8].querySelector('.value').outerHTML).toBe(\n '1
',\n )\n\n expect(rows[9].querySelector('.value').outerHTML).toBe(\n '3
',\n )\n\n expect(rows[10].querySelector('.value').outerHTML).toBe(\n 'voting
',\n )\n\n expect(rows[11].querySelector('.value').outerHTML).toBe(\n '25%
',\n )\n\n expect(\n container.querySelectorAll('.amendment-summary .barchart').length,\n ).toBe(1)\n\n expect(\n container.querySelectorAll(\n '.amendment-summary .votes .votes-columns .votes-column',\n ).length,\n ).toBe(2)\n\n const votesColumns = container.querySelectorAll(\n '.amendment-summary .votes .votes-columns .votes-column',\n )\n\n expect(votesColumns[0].querySelectorAll('.vals .row').length).toBe(2)\n expect(votesColumns[1].querySelectorAll('.vals .row').length).toBe(4)\n })\n\n it('renders 404 page on no match', async () => {\n moxios.stubRequest(\n `${process.env.VITE_DATA_URL}/amendment/vote/main/${MOCK_IDENTIFIER}`,\n {\n status: NOT_FOUND,\n response: votingAmendment,\n },\n )\n\n moxios.stubRequest(`${process.env.VITE_DATA_URL}/validators/main`, {\n status: 200,\n response: validators,\n })\n\n const { container } = renderAmendment()\n\n await waitFor(() => {\n expect(container.querySelector('.no-match')).toBeInTheDocument()\n })\n })\n})\n"
},
{
"path": "src/containers/Amendment/test/mockValidatorsList.json",
"content": "{\n \"count\": 6,\n \"validators\": [\n {\n \"validation_public_key\": \"pub1\",\n \"signing_key\": \"sign1\",\n \"domain\": \"domain1.com\",\n \"unl\": \"vl.ripple.com\"\n },\n {\n \"validation_public_key\": \"pub2\",\n \"signing_key\": \"sign2\",\n \"domain\": \"domain2.com\",\n \"unl\": false\n },\n {\n \"validation_public_key\": \"pub3\",\n \"signing_key\": \"sign3\",\n \"domain\": \"domain3.com\",\n \"unl\": \"vl.ripple.com\"\n },\n {\n \"validation_public_key\": \"pub4\",\n \"signing_key\": \"sign4\",\n \"domain\": \"domain4.com\",\n \"unl\": \"vl.ripple.com\"\n },\n {\n \"validation_public_key\": \"pub5\",\n \"signing_key\": \"sign5\",\n \"domain\": \"domain5.com\",\n \"unl\": false\n },\n {\n \"validation_public_key\": \"pub6\",\n \"signing_key\": \"sign6\",\n \"domain\": \"domain6.com\",\n \"unl\": \"vl.ripple.com\"\n }\n ]\n}\n"
},
{
"path": "src/containers/Amendment/test/mockVotingAmendment.json",
"content": "{\n \"amendment\": {\n \"id\": \"mock-amendment-id\",\n \"name\": \"mock-name\",\n \"rippled_version\": \"1.12.0\",\n \"deprecated\": false,\n \"threshold\": \"3/4\",\n \"consensus\": \"25%\",\n \"voted\": {\n \"count\": 2,\n \"validators\": [\n {\n \"signing_key\": \"sign1\",\n \"ledger_index\": \"index1\",\n \"unl\": \"vl.ripple.com\"\n },\n {\n \"signing_key\": \"sign2\",\n \"ledger_index\": \"82658047\",\n \"unl\": false\n }\n ]\n }\n }\n}\n"
},
{
"path": "src/containers/Amendments/AmendmentsTable.tsx",
"content": "import { FC } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Link } from 'react-router'\nimport { AMENDMENT_ROUTE, TRANSACTION_ROUTE } from '../App/routes'\nimport { Loader } from '../shared/components/Loader'\nimport { useLanguage } from '../shared/hooks'\nimport { RouteLink } from '../shared/routing'\nimport { localizeDate } from '../shared/utils'\nimport { AmendmentData, Voter } from '../shared/vhsTypes'\n\nconst DATE_OPTIONS_AMENDMENTS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n timeZone: 'UTC',\n}\n\nconst DEFAULT_EMPTY_VALUE = '--'\n\nexport const AmendmentsTable: FC<{\n amendments: AmendmentData[] | undefined\n}> = ({ amendments }) => {\n const { t } = useTranslation()\n const language = useLanguage()\n\n const renderEnabled = (enabled: boolean) =>\n enabled ? (\n {t('yes')}\n ) : (\n {t('no')}\n )\n\n const renderOnTx = (amendment) => {\n if (amendment.voted) {\n if (amendment.eta) {\n const etaLocalized = localizeDate(\n new Date(amendment.eta),\n language,\n DATE_OPTIONS_AMENDMENTS,\n )\n return (\n \n
\n )\n }\n return {t('voting')}\n }\n\n if (amendment.date) {\n const dateLocalized = localizeDate(\n new Date(amendment.date),\n language,\n DATE_OPTIONS_AMENDMENTS,\n )\n return amendment.tx_hash ? (\n {t('eta')}
\n {etaLocalized}
\n \n \n \n {name}\n \n \n {t('deprecated')}\n
\n ) : (\n \n | # | \n{t('Version')} | \n{t('amendment_id')} | \n{t('amendment_name')} | \n{`${t('unl')} ${t('voters')}`} | \n{t('threshold')} | \n{t('consensus')} | \n{t('enabled')} | \n{t('on_tx')} | \n
|---|
{content}
\n}\n"
},
{
"path": "src/containers/Amendments/amendmentsTable.scss",
"content": "@use '../shared/css/variables' as *;\n@use '../shared/css/table';\n\n.amendments-page {\n .summary {\n padding: 0 16px;\n margin-top: 100px;\n\n @include for-size(tablet-portrait-up) {\n padding: 0;\n }\n\n .type {\n display: inline-block;\n padding-bottom: 24px;\n color: $white;\n font-size: 32px;\n\n @include for-size(tablet-portrait-up) {\n font-size: 42px;\n }\n\n @include bold;\n }\n }\n\n .wrap {\n overflow: auto;\n width: 100%;\n max-width: 1500px;\n min-height: 150px;\n margin: auto;\n }\n}\n\n.amendments-table {\n position: relative;\n\n table {\n .incoming {\n background: rgba($green-90, 0.7);\n }\n\n .eta-label {\n font-weight: 700;\n text-transform: uppercase;\n }\n\n .name {\n max-width: 120px;\n\n @include for-size(tablet-portrait-up) {\n max-width: 180px;\n }\n\n @include for-size(desktop-up) {\n max-width: 280px;\n }\n }\n\n .amendment-id {\n display: none;\n max-width: 120px;\n\n @include for-size(desktop-up) {\n display: table-cell;\n padding-right: 3%;\n }\n }\n\n .name-deprecated {\n display: flex;\n overflow: hidden;\n align-items: center;\n gap: 6px;\n\n @include for-size(tablet-portrait-up) {\n gap: 12px;\n }\n\n .name-text {\n overflow: hidden;\n max-width: fit-content;\n flex: 1;\n text-overflow: ellipsis;\n }\n\n .deprecated {\n overflow: hidden;\n max-width: 60%;\n font-size: 12px;\n text-overflow: ellipsis;\n text-transform: uppercase;\n\n &.badge {\n border: 1px solid $black-30;\n background-color: $black-80;\n color: $black-30;\n }\n }\n }\n\n .version,\n .enabled,\n .consensus {\n max-width: 70px;\n overflow-wrap: break-word;\n @include for-size(tablet-portrait-up) {\n max-width: 100px;\n }\n }\n }\n\n .badge {\n margin: 0;\n color: $black-100;\n text-transform: uppercase;\n\n &.yes {\n background-color: $green-60;\n }\n\n &.no {\n background-color: $black-30;\n }\n }\n\n .voting {\n margin-left: 0;\n color: $yellow-50;\n }\n\n .voters,\n .threshold {\n display: none;\n max-width: 70px;\n\n @include for-size(desktop-up) {\n display: table-cell;\n }\n }\n\n .count {\n display: none;\n\n @include for-size(tablet-portrait-up) {\n display: table-cell;\n }\n }\n}\n"
},
{
"path": "src/containers/Amendments/index.tsx",
"content": "import axios from 'axios'\nimport { useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport Log from '../shared/log'\nimport NetworkContext from '../shared/NetworkContext'\nimport {\n FETCH_INTERVAL_ERROR_MILLIS,\n FETCH_INTERVAL_VHS_MILLIS,\n} from '../shared/utils'\nimport { AmendmentsTable } from './AmendmentsTable'\nimport './amendmentsTable.scss'\n\nexport const Amendments = () => {\n const network = useContext(NetworkContext)\n const { t } = useTranslation()\n\n const { data } = useQuery(\n ['fetchNetworkAmendmentsData'],\n async () => fetchData(),\n {\n refetchInterval: (returnedData, _) =>\n returnedData == null\n ? FETCH_INTERVAL_ERROR_MILLIS\n : FETCH_INTERVAL_VHS_MILLIS,\n refetchOnMount: true,\n enabled: !!network,\n },\n )\n\n const fetchData = async () =>\n axios\n .get(`${process.env.VITE_DATA_URL}/amendments/vote/${network}`)\n .then((resp) => resp.data.amendments)\n .then((amendments) =>\n amendments.sort((a, b) => {\n if (a.eta && !b.eta) return -1\n if (!a.eta && b.eta) return 1\n if (a.voted && !b.voted) return -1\n if (!a.voted && b.voted) return 1\n return 0\n }),\n )\n .catch((e) => Log.error(e))\n\n return (\n \n
\n )\n}\n"
},
{
"path": "src/containers/Amendments/test/amendments.test.js",
"content": "import { render, waitFor } from '@testing-library/react'\nimport moxios from 'moxios'\nimport { Route } from 'react-router'\nimport i18n from '../../../i18n/testConfig'\nimport { Amendments } from '../index'\nimport NetworkContext from '../../shared/NetworkContext'\nimport { QuickHarness } from '../../test/utils'\nimport { AMENDMENTS_ROUTE } from '../../App/routes'\nimport amendmentsRaw from './mockAmendments.json'\n\njest.mock('usehooks-ts', () => ({\n useWindowSize: () => ({\n width: 375,\n height: 600,\n }),\n}))\n\ndescribe('Amendments Page container', () => {\n const renderAmendments = () =>\n render(\n \n
\n \n
\n {t('amendments')}
\n amendments
',\n )\n\n await waitFor(() => {\n expect(\n container.querySelectorAll('.amendments-table table tr').length,\n ).toBe(amendmentsRaw.amendments.length + 1)\n })\n\n const rows = container.querySelectorAll('.amendments-table table tr')\n\n // Test voting amendment row.\n expect(rows[2].querySelector('.version').outerHTML).toBe(\n '\n
\n \n \n \n \n \n \n \n
\n \n \n {/* Start: Redirects */}\n {/* Ensures redirects happen without loading other routes. Specifically for hash routes */}\n {redirect && (\n \n \n
\n \n {network}\n
\n \n
\n \n )\n}\n\nexport default CustomNetworkHome\n"
},
{
"path": "src/containers/CustomNetworkHome/test/CustomNetworkHome.test.js",
"content": "import { render, fireEvent } from '@testing-library/react'\nimport i18n from '../../../i18n/testConfig'\nimport CustomNetworkHome from '../index'\nimport MockWsClient from '../../test/mockWsClient'\nimport { CUSTOM_NETWORKS_STORAGE_KEY } from '../../shared/hooks'\nimport { QuickHarness } from '../../test/utils'\nimport { locationAssign } from '../../shared/navigate'\n\njest.mock('../../shared/navigate', () => ({\n locationAssign: jest.fn(),\n}))\n\ndescribe('CustomNetworkHome page', () => {\n let client\n\n const renderCustomNetworkHome = (localNetworks = null) => {\n localStorage.removeItem(CUSTOM_NETWORKS_STORAGE_KEY)\n if (localNetworks) {\n localStorage.setItem(\n CUSTOM_NETWORKS_STORAGE_KEY,\n JSON.stringify(localNetworks),\n )\n }\n\n return render(\n \n setNetworkText(event.target.value)}\n />\n
\n {customNetworks.length > 0 && (\n {t('custom_network')}
\n {t('custom_network_input_help')}
\n \n
\n )}\n {t('custom_networks')}
\n {customNetworks.map(renderCustomNetwork)}\n \n
\n )\n}\n\nexport default Footer\n"
},
{
"path": "src/containers/Footer/test/Footer.test.tsx",
"content": "import { render } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport i18n from '../../../i18n/testConfig'\nimport Footer from '../index'\n\ndescribe('Footer component', () => {\n const renderFooter = () =>\n render(\n \n \n\n \n\n
\n \n \n XRPL.org Docs on GitHub\n \n
\n Contribute
\n \n How to Contribute\n \n \n XRPL Explorer on GitHub\n \n \n
\n \n
\n \n © \n \n XRP Ledger Project\n \n 2012-{new Date().getFullYear()}\n
\n \n \n {Object.entries(supportedLanguages)\n .filter(([language]) => language !== currentLanguage)\n .map(([language, languageName]) => (\n \n {languageName}\n \n ))}\n \n
\n )\n}\n"
},
{
"path": "src/containers/Header/LanguagePicker/test/LanguagePicker.test.tsx",
"content": "import { render, fireEvent } from '@testing-library/react'\nimport i18next from 'i18next'\nimport { I18nextProvider } from 'react-i18next'\nimport { LanguagePicker } from '../LanguagePicker'\nimport testConfigEnglish from '../../../../i18n/testConfigEnglish'\n\ndescribe('LanguagePicker component', () => {\n it('should switch language', () => {\n const { container } = render(\n \n
\n \n )\n}\n"
},
{
"path": "src/containers/Header/NavigationMenu/index.ts",
"content": "export * from './NavigationMenu'\n"
},
{
"path": "src/containers/Header/NetworkPicker/NetworkPicker.scss",
"content": "@use '../../shared/css/variables' as *;\n\n@mixin dropdown-network-item(\n $background,\n $background-hover: $background,\n $border: $background,\n $color: $black\n) {\n .dropdown-toggle {\n border-color: $border;\n background: $background;\n color: $color;\n\n &:hover {\n background: $background-hover;\n }\n\n .arrow {\n color: $color;\n }\n }\n}\n\n.network {\n min-width: 0;\n\n .dropdown-toggle {\n width: 100%;\n max-width: 100%;\n overflow-x: clip;\n }\n\n .dropdown-toggle-text {\n @extend %truncate;\n }\n\n .dropdown-menu {\n min-width: max(100%, 250px);\n }\n\n &.network-mainnet {\n @include dropdown-network-item($white, $black-20);\n }\n\n &.network-testnet {\n @include dropdown-network-item($testnet, $orange-60);\n }\n\n &.network-devnet {\n @include dropdown-network-item($devnet, $blue-purple-40);\n }\n\n /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */\n &.network-xahau_mainnet {\n @include dropdown-network-item($xahau-mainnet, $green-50);\n }\n\n /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */\n &.network-xahau_testnet {\n @include dropdown-network-item($xahau-testnet, $magenta-40);\n }\n\n &.network-custom {\n @include dropdown-network-item($custom, $yellow-60);\n }\n}\n"
},
{
"path": "src/containers/Header/NetworkPicker/NetworkPicker.tsx",
"content": "import { useContext, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Dropdown, DropdownItem } from '../../shared/components/Dropdown'\nimport { useCustomNetworks } from '../../shared/hooks'\nimport SocketContext from '../../shared/SocketContext'\nimport './NetworkPicker.scss'\nimport { useAnalytics } from '../../shared/analytics'\nimport { locationAssign } from '../../shared/navigate'\n\nexport interface Network {\n network: string\n title: string\n url: string\n}\n\nexport const NetworkPicker = () => {\n const { track } = useAnalytics()\n const rippledSocket = useContext(SocketContext)\n const { t } = useTranslation()\n const [newRippledUrl, setNewRippledUrl] = useState('')\n const [customNetworks = [], setCustomNetworks] = useCustomNetworks()\n\n // Remove trailing slash from custom network link\n const CUSTOM_NETWORK_BASE_LINK =\n process.env.VITE_CUSTOMNETWORK_LINK?.charAt(\n process.env.VITE_CUSTOMNETWORK_LINK.length - 1,\n ) === '/'\n ? process.env.VITE_CUSTOMNETWORK_LINK?.slice(0, -1)\n : process.env.VITE_CUSTOMNETWORK_LINK\n const STATIC_ENV_LINKS: Record- \n
- \n
\n \n {routes.map((nav) => {\n const title = t(nav.title)\n\n if ('children' in nav) {\n return (\n - \n
\n setCurrentSearchInput(e.target.value)}\n />\n {process.env.VITE_ENVIRONMENT === 'mainnet' && (\n
\n )\n}\n"
},
{
"path": "src/containers/Header/header.scss",
"content": "@use '../shared/css/variables' as *;\n\n/* Header */\n.header {\n position: sticky;\n z-index: 20;\n top: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 16px;\n background: $black;\n gap: 8px;\n\n .topbar {\n display: flex;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n gap: 0 16px;\n\n .dropdown-toggle {\n padding: 8px 12px;\n }\n\n .dropdown-menu,\n .dropdown-item {\n padding: 8px;\n }\n }\n}\n"
},
{
"path": "src/containers/Header/index.tsx",
"content": "import { FC } from 'react'\nimport classnames from 'classnames'\n\nimport { navigationConfig } from '../App/navigation'\nimport { NavigationMenu } from './NavigationMenu'\n\nimport './header.scss'\nimport { LanguagePicker } from './LanguagePicker/LanguagePicker'\nimport { NetworkPicker } from './NetworkPicker/NetworkPicker'\n\nexport const Header: FC<{ inNetwork?: boolean }> = ({ inNetwork = true }) => (\n \n
\n - \n
- \n {t('transaction_type')}\n{t('account')}\n{t('sequence_number_short')}\n{t('transaction_cost_short')}\n \n {!transactions || (!loading && transactions.length === 0) ? (\n
\n {emptyMessage || t('no_transactions_message')}\n
\n ) : (\n transactions.map(renderListItem)\n )}\n \n
\n {tx.details && (\n \n
\n {tx.account}
\n \n
\n \n {formatPrice(tx.fee, {\n lang: language,\n currency: 'XRP',\n padding: TXN_COST_PADDING,\n })}\n
\n \n {success ? null :
\n )}\n \n )\n}\n"
},
{
"path": "src/containers/Ledger/index.tsx",
"content": "import { useContext, useEffect } from 'react'\nimport { Helmet } from 'react-helmet-async'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport NoMatch from '../NoMatch'\nimport { Loader } from '../shared/components/Loader'\nimport SocketContext from '../shared/SocketContext'\nimport { useAnalytics } from '../shared/analytics'\nimport { useLanguage } from '../shared/hooks'\nimport {\n localizeDate,\n localizeNumber,\n formatPrice,\n NOT_FOUND,\n BAD_REQUEST,\n DECIMAL_REGEX,\n HASH256_REGEX,\n} from '../shared/utils'\n\nimport LeftArrow from '../shared/images/ic_left_arrow.svg'\nimport RightArrow from '../shared/images/ic_right_arrow.svg'\nimport { LedgerTransactionTable } from './LedgerTransactionTable'\n\nimport './ledger.scss'\nimport { getLedger } from '../../rippled'\nimport { useRouteParams, RouteLink } from '../shared/routing'\nimport { LEDGER_ROUTE } from '../App/routes'\n\nconst TIME_ZONE = 'UTC'\nconst DATE_OPTIONS = {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour12: true,\n timeZone: TIME_ZONE,\n}\n\nconst ERROR_MESSAGES: any = {}\nERROR_MESSAGES[NOT_FOUND] = {\n title: 'ledger_not_found',\n hints: ['server_ledgers_hint'],\n}\nERROR_MESSAGES[BAD_REQUEST] = {\n title: 'invalid_ledger_id',\n hints: ['check_ledger_id'],\n}\nERROR_MESSAGES.default = {\n title: 'generic_error',\n hints: ['not_your_fault'],\n}\n\nconst getErrorMessage = (error) =>\n ERROR_MESSAGES[error] || ERROR_MESSAGES.default\n\nexport const Ledger = () => {\n const rippledSocket = useContext(SocketContext)\n const { identifier = '' } = useRouteParams(LEDGER_ROUTE)\n const { t } = useTranslation()\n const language = useLanguage()\n const { trackException, trackScreenLoaded } = useAnalytics()\n\n const {\n data: ledgerData,\n error,\n isLoading,\n } = useQuery(['ledger', identifier], () => {\n if (\n !DECIMAL_REGEX.test(identifier.toString()) &&\n !HASH256_REGEX.test(identifier.toString())\n ) {\n return Promise.reject(BAD_REQUEST)\n }\n\n return getLedger(identifier, rippledSocket).catch(\n (transactionRequestError) => {\n const status = transactionRequestError.code\n trackException(`ledger ${identifier} --- ${JSON.stringify(error)}`)\n return Promise.reject(status)\n },\n )\n })\n\n useEffect(() => {\n trackScreenLoaded()\n }, [trackScreenLoaded])\n\n const renderNav = (data: any) => {\n const { ledger_index: LedgerIndex, ledger_hash: LedgerHash } = data\n const previousIndex = LedgerIndex - 1\n const nextIndex = LedgerIndex + 1\n const date = new Date(data.close_time)\n return (\n \n
\n )\n }\n\n const renderLedger = () =>\n ledgerData?.ledger_hash ? (\n <>\n {renderNav(ledgerData)}\n \n \n \n \n \n \n
\n \n
\n \n {nextIndex}\n
\n \n
\n \n
\n \n
\n \n
\n {t('ledger_index')}
\n {LedgerIndex}
\n \n
\n {t('total_transactions')}
\n \n {localizeNumber(data.transactions.length, language)}\n
\n \n
\n {t('total_fees')}
\n \n {formatPrice(data.total_fees, {\n lang: language,\n currency: 'XRP',\n })}\n
\n {LedgerHash}
\n \n {localizeDate(date, language, DATE_OPTIONS)} {TIME_ZONE}\n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Ledger/ledger.scss",
"content": "@use '../shared/css/variables' as *;\n\n.ledger-page {\n margin: 0 auto;\n\n @include for-size(tablet-landscape-up) {\n width: 600px;\n }\n @include for-size(desktop-up) {\n width: 772px;\n }\n @include for-size(big-desktop-up) {\n width: 864px;\n }\n\n .loader {\n z-index: 1;\n }\n\n .ledger-nav {\n padding: 8px 4px;\n margin-top: 40px;\n margin-bottom: 60px;\n color: $black-40;\n font-size: 12px;\n letter-spacing: 0px;\n line-height: 15px;\n\n svg {\n position: relative;\n height: 8px;\n color: $black-40;\n }\n\n .previous {\n padding: 6px 16px;\n border: 1px solid $black-40;\n border-radius: 100px;\n float: left;\n\n svg {\n margin-right: 16px;\n }\n\n &:focus,\n &:hover {\n background-color: $black-70;\n }\n }\n\n .next {\n padding: 6px 16px;\n border: 1px solid $black-40;\n border-radius: 100px;\n float: right;\n\n svg {\n margin-left: 16px;\n }\n\n &:focus,\n &:hover {\n background-color: $black-70;\n }\n }\n }\n\n .ledger-header {\n margin: 0px auto;\n\n .ledger-info {\n overflow: hidden;\n padding: 10px 8px;\n\n @include for-size(desktop-up) {\n padding: 10px 0px;\n }\n\n .closed-date,\n .ledger-hash {\n overflow: hidden;\n padding-top: 48px;\n margin: auto;\n color: $black-30;\n font-size: 12px;\n line-height: 18px;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .closed-date {\n color: $black-30;\n font-size: 10px;\n\n @include for-size(desktop-up) {\n float: right;\n }\n }\n\n .ledger-hash {\n @include for-size(desktop-up) {\n float: left;\n }\n\n @include for-size(big-desktop-up) {\n font-size: 12px;\n }\n }\n\n .summary {\n display: block;\n overflow: hidden;\n\n .title {\n color: $black-40;\n font-size: 10px;\n letter-spacing: 0px;\n line-height: 18px;\n text-transform: uppercase;\n @include medium;\n\n @include for-size(desktop-up) {\n font-size: 10px;\n line-height: 20px;\n }\n }\n\n .value {\n color: $white;\n @include bold;\n }\n\n .ledger-cols {\n display: table;\n width: 100%;\n margin-bottom: 20px;\n text-align: right;\n\n .ledger-col {\n display: table-cell;\n\n &:first-child {\n text-align: left;\n }\n\n @include for-size(desktop-up) {\n width: auto;\n margin-right: 0px;\n margin-left: 40px;\n }\n @include for-size(big-desktop-up) {\n margin-right: 0px;\n margin-left: 40px;\n }\n\n .value {\n margin-top: -4px;\n font-size: 18px;\n line-height: 28px;\n\n @include for-size(desktop-up) {\n margin-top: -8px;\n font-size: 18px;\n line-height: 36px;\n }\n }\n\n &.ledger-index .value {\n margin-top: 4px;\n font-size: 42px;\n }\n }\n }\n }\n }\n }\n\n .transaction-table {\n padding: 30px 0;\n\n .col-type,\n .col-fee,\n .col-sequence {\n flex: none;\n }\n\n .col-type {\n width: 175px;\n\n @include for-size(big-desktop-up) {\n width: 210px;\n }\n }\n\n .col-account {\n display: block;\n text-align: right; // on mobile it is the last column\n\n @include for-size(tablet-portrait-up) {\n text-align: left;\n }\n }\n\n .col-sequence {\n display: none;\n\n @include for-size(tablet-landscape-up) {\n display: inline-block;\n width: 85px;\n }\n\n @include for-size(desktop-up) {\n width: 100px;\n }\n }\n\n .col-fee {\n display: none;\n text-align: right;\n\n @include for-size(tablet-portrait-up) {\n display: inline-block;\n width: 100px;\n }\n }\n\n .upper {\n .col-account {\n font-size: 10px;\n\n @include for-size(tablet-portrait-up) {\n font-size: 12px;\n }\n }\n\n .col-sequence,\n .col-fee {\n color: $black-40;\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Ledger/test/Ledger.test.js",
"content": "import { render, waitFor } from '@testing-library/react'\nimport { Route } from 'react-router'\nimport mockLedger from './storedLedger.json'\nimport i18n from '../../../i18n/testConfig'\nimport { Ledger } from '../index'\nimport { getLedger } from '../../../rippled'\nimport { Error as RippledError } from '../../../rippled/lib/utils'\nimport { QuickHarness } from '../../test/utils'\n\njest.mock('../../../rippled', () => {\n const originalModule = jest.requireActual('../../../rippled')\n\n return {\n __esModule: true,\n ...originalModule,\n getLedger: jest.fn(),\n }\n})\n\nconst mockedGetLedger = getLedger\n\ndescribe('Ledger container', () => {\n const renderLedger = (identifier = 38079857) =>\n render(\n \n \n
\n )\n}\n"
},
{
"path": "src/containers/Ledgers/LedgerEntryHashTrustedCount.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport { useTooltip } from '../shared/components/Tooltip'\nimport { useVHSValidators } from '../shared/components/VHSValidators'\nimport { LedgerValidation } from '../shared/components/Streams'\n\nexport const LedgerEntryHashTrustedCount = ({\n validations,\n}: {\n validations: LedgerValidation[]\n}) => {\n const { t } = useTranslation()\n const { hideTooltip, showTooltip } = useTooltip()\n const { unl, validators } = useVHSValidators()\n\n const status = useMemo(() => {\n const missing = [...(unl || [])]\n validations.forEach((v) => {\n if (!validators?.[v.validation_public_key]) {\n return\n }\n\n const missingIndex = missing.findIndex(\n (assumedMissing) => assumedMissing === v.validation_public_key,\n )\n if (missingIndex !== -1) {\n missing.splice(missingIndex, 1)\n }\n })\n\n return {\n missing: missing.map((v) => validators?.[v]),\n trustedCount: (unl?.length || 0) - missing.length,\n }\n }, [unl, validations, validators])\n\n return status.trustedCount ? (\n \n
\n {hash.hash.substring(0, 6)}
\n {validated}\n \n
\n \n
\n {t('total')}:
\n {hash.validations.length}\n \n {hash.validations.map((validation, i) => (\n
\n {t('unl')}:
\n \n {status.trustedCount}/{unl?.length}\n \n \n ) : null\n}\n"
},
{
"path": "src/containers/Ledgers/LedgerEntryTransaction.tsx",
"content": "import classNames from 'classnames'\nimport { getAction, getCategory } from '../shared/components/Transaction'\nimport { TRANSACTION_ROUTE } from '../App/routes'\nimport { TransactionActionIcon } from '../shared/components/TransactionActionIcon/TransactionActionIcon'\nimport { RouteLink } from '../shared/routing'\nimport { useTooltip } from '../shared/components/Tooltip'\nimport { TransactionSummary } from '../shared/types'\n\nexport const LedgerEntryTransaction = ({\n transaction,\n}: {\n transaction: TransactionSummary\n}) => {\n const { hideTooltip, showTooltip } = useTooltip()\n\n return (\n \n {transactions?.map((tx) => (\n
\n \n ),\n (prevProps, nextProps) =>\n prevProps.transactions &&\n nextProps.transactions &&\n prevProps.transactions.length === nextProps.transactions.length,\n)\n"
},
{
"path": "src/containers/Ledgers/LedgerEntryValidator.tsx",
"content": "import classNames from 'classnames'\nimport { useSelectedValidator } from './useSelectedValidator'\nimport { useTooltip } from '../shared/components/Tooltip'\nimport { useVHSValidators } from '../shared/components/VHSValidators'\nimport { LedgerValidation } from '../shared/components/Streams'\n\nexport const LedgerEntryValidator = ({\n validation,\n index,\n}: {\n validation: LedgerValidation\n index: number\n}) => {\n const { validators } = useVHSValidators()\n const { showTooltip, hideTooltip } = useTooltip()\n const { selectedValidator, setSelectedValidator } = useSelectedValidator()\n\n const className = classNames(\n 'validation',\n validators?.[validation.validation_public_key]?.unl && 'trusted',\n selectedValidator && 'unselected',\n selectedValidator === validation.validation_public_key && 'selected',\n validation.validation_public_key,\n )\n\n return (\n \n
\n )\n}\n\nexport const LedgerListEntry = ({ ledger }: { ledger: Ledger }) => (\n \n
\n {time}
\n {/* Render Transaction Count (can be 0) */}\n {ledger.txCount !== undefined && (\n \n {t('txn_count')}:{ledger.txCount.toLocaleString()}\n
\n )}\n {/* Render Total Fees (can be 0) */}\n {ledger.totalFees !== undefined && (\n \n {SIGMA} {t('fees')}:\n \n
\n )}\n \n {(ledger.hashes ?? []).map((hash) => (\n
\n \n
\n )\n } else {\n content = data[key]\n }\n\n return (\n \n {renderMetricIcon(key)}\n
\n {content}\n \n \n showTooltip('nUnl', e, { nUnl: data.nUnl })\n }\n onMouseOut={() => hideTooltip()}\n onFocus={() => {}}\n onBlur={() => {}}\n tabIndex={0}\n >\n \n {t(key)}\n \n \n\n {renderTextTooltip(key)}\n
\n \n
\n )\n })\n .reverse()\n\n return (\n \n {renderMetricIcon(key)}\n
\n {content}\n \n \n {t(key, { defaultValue: 'load_fee' })}\n \n {renderTextTooltip(key)}\n
\n \n {isOnline && (\n <>\n
\n )\n}\n"
},
{
"path": "src/containers/Ledgers/Ledgers.tsx",
"content": "import './css/ledgers.scss'\nimport DomainLink from '../shared/components/DomainLink'\nimport { Loader } from '../shared/components/Loader'\nimport { useIsOnline } from '../shared/SocketContext'\nimport { Legend } from './Legend'\nimport { RouteLink } from '../shared/routing'\nimport { VALIDATOR_ROUTE } from '../App/routes'\nimport { LedgerListEntry } from './LedgerListEntry'\nimport { useSelectedValidator } from './useSelectedValidator'\nimport { usePreviousWithPausing } from '../shared/hooks/usePreviousWithPausing'\nimport { useStreams, Ledger } from '../shared/components/Streams'\nimport { useVHSValidators } from '../shared/components/VHSValidators'\n\nexport const Ledgers = ({ paused }: { paused: boolean }) => {\n const { validators: validatorsFromVHS } = useVHSValidators()\n const { selectedValidator } = useSelectedValidator()\n const { ledgers } = useStreams()\n const localLedgers = usePreviousWithPausing{renderPause()}
\n {items}
\n \n {isOnline && Object.keys(ledgers).length > 0 ? (\n <>\n \n
\n )\n}\n"
},
{
"path": "src/containers/Ledgers/Legend.tsx",
"content": "import { useEffect, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWindowSize } from 'usehooks-ts'\nimport {\n TransactionAction,\n TransactionCategory,\n} from '../shared/components/Transaction/types'\nimport { useLocalStorage } from '../shared/hooks'\nimport { TransactionActionIcon } from '../shared/components/TransactionActionIcon/TransactionActionIcon'\nimport './css/legend.scss'\n\nexport const LEGEND_STORAGE_KEY = 'explorer-legend-previous-interaction'\n\nexport const Legend = () => {\n const { t } = useTranslation()\n const windowSize = useWindowSize()\n const [previousInteraction, setPreviousInteraction] =\n useLocalStorage\n {selectedValidator && validatorsFromVHS && (\n
\n \n {validatorsFromVHS[selectedValidator].domain && (\n \n {selectedValidator}\n \n
\n )}\n \n {Object.values(localLedgers ?? {})\n .reverse()\n .slice(0, 20)\n ?.map((ledger) => (\n
\n \n ) : (\n \n {!hidden && (\n <>\n
\n \n )}\n Shapes Legend
\n \n {actions.map((action) => (\n
\n \n
\n ))}\n Colors Legend
\n \n {categories.map((category: string) => (\n \n {' '}\n {t(`transaction_category`, {\n context: category,\n defaultValue: TransactionCategory.OTHER,\n })}\n
\n ))}\n \n \n \n \n pause()} paused={paused} />\n \n \n \n
\n )\n}\n"
},
{
"path": "src/containers/Ledgers/test/LedgersPage.test.js",
"content": "import { render, fireEvent, waitFor, cleanup } from '@testing-library/react'\nimport moxios from 'moxios'\nimport WS from 'jest-websocket-mock'\nimport i18n from '../../../i18n/testConfig'\nimport { LedgersPage } from '../index'\nimport SocketContext from '../../shared/SocketContext'\nimport NetworkContext from '../../shared/NetworkContext'\nimport BaseMockWsClient from '../../test/mockWsClient'\nimport prevLedgerMessage from './mock/prevLedger.json'\nimport ledgerMessage from './mock/ledger.json'\nimport validationMessage from './mock/validation.json'\nimport rippledResponses from './mock/rippled.json'\nimport { QuickHarness } from '../../test/utils'\nimport { SelectedValidatorProvider } from '../useSelectedValidator'\n\nfunction sleep(ms) {\n return new Promise((resolve) => setTimeout(resolve, ms))\n}\n\nconst LEDGER_HASH_MAP = new Map([\n [\n 'A5F887A191348B69129B168EDA5BC8EEE9EAC60E2599A8034742199471C70604',\n 68992561,\n ],\n [\n '0C12B30677B3D8D6ADC7DCC8528694E2FD1515950FB2AAD621D9E9B31833B444',\n 68992560,\n ],\n])\n\nconst MOCK_VALIDATORS = [\n {\n signing_key: 'n9M2anhK2HzFFiJZRoGKhyLpkh55ZdeWw8YyGgvkzY7AkBvz5Vyj',\n master_key: 'nHUfPizyJyhAJZzeq3duRVrZmsTZfcLn7yLF5s2adzHdcHMb9HmQ',\n unl: process.env.VITE_VALIDATOR,\n },\n {\n signing_key: 'n9KaxgJv69FucW5kkiaMhCqS6sAR1wUVxpZaZmLGVXxAcAse9YhR',\n master_key: 'nHBidG3pZK11zQD6kpNDoAhDxH6WLGui6ZxSbUx7LSqLHsgzMPec',\n unl: process.env.VITE_VALIDATOR,\n },\n {\n signing_key: 'n9K7Wfxgyqw4XSQ1BaiKPHKxw2D9BiBiseyn7Ldg7KieQZJfrPf4',\n master_key: 'nHUkhmyFPr3vEN3C8yfhKp4pu4t3wkTCi2KEDBWhyMNpsMj2HbnD',\n unl: null,\n },\n]\n\nclass MockWsClient extends BaseMockWsClient {\n send(message) {\n if (this.debug) {\n // eslint-disable-next-line no-console -- For debugging purposes\n console.log(message)\n }\n if (this.returnError) {\n return Promise.reject(new Error({}))\n }\n const { command } = message\n if (command === 'ledger') {\n const response = JSON.parse(JSON.stringify(this.responses[command]))\n response.result.ledger_hash = message.ledger_hash\n response.result.ledger.hash = message.ledger_hash\n response.result.ledger.ledger_hash = message.ledger_hash\n response.result.ledger.ledger_index = LEDGER_HASH_MAP.get(\n message.ledger_hash,\n )\n response.result.ledger_index = LEDGER_HASH_MAP.get(message.ledger_hash)\n return Promise.resolve(response.result)\n }\n return Promise.resolve(this.responses[command]?.result)\n }\n}\n\nconst WS_URL = 'wss://fakenode.ripple.com:51233'\n\ndescribe('Ledgers Page container', () => {\n let server\n let client\n const renderLedgersPage = (props = { network: 'main', path: '/' }) =>\n render(\n \n
\n)\n\nexport const NFT = () => {\n const { trackScreenLoaded } = useAnalytics()\n const { id: tokenId = '' } = useParams<{ id: string }>()\n const [error, setError] = useState\n
\n )\n }\n\n if (error) {\n return \n
\n )}\n Enter a NFT ID in the search box
\n\n
\n )\n }\n\n return (\n \n
\n \n
\n {t('issuer_address')}
\n \n
\n \n
\n \n
\n \n
\n {t('details')}
\n\n
\n {t('settings')}
\n\n
\n \n {!loading && (\n
\n )}\n \n showTooltip(e, { tokenId })}\n onFocus={() => {}}\n onMouseLeave={hideTooltip}\n >\n {tokenId}\n
\n \n NFT ID\n
\n NFT
\n \n {loading ?
\n \n
\n {renderTabs()}\n
\n )\n}\n"
},
{
"path": "src/containers/NFT/NFTTabs/Offers.tsx",
"content": "import { useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useInfiniteQuery } from 'react-query'\nimport { Loader } from '../../shared/components/Loader'\nimport './styles.scss'\nimport NoInfo from '../../shared/images/no_info.svg'\nimport { useAnalytics } from '../../shared/analytics'\nimport SocketContext from '../../shared/SocketContext'\nimport { Amount } from '../../shared/components/Amount'\nimport '../../shared/components/TransactionTable/styles.scss' // Reuse load-more-btn\nimport { formatAmount } from '../../../rippled/lib/txSummary/formatAmount'\nimport { LoadMoreButton } from '../../shared/LoadMoreButton'\nimport { ACCOUNT_ROUTE } from '../../App/routes'\nimport { RouteLink } from '../../shared/routing'\n\ninterface Props {\n tokenId: string\n offerType: string\n fetchOffers: (\n socket: any,\n id: string,\n limit: number | undefined,\n marker: any,\n ) => Promise{renderTransactions()}
\n \n \n \n
\n {loading ?
\n )\n\n return | {t('offer_index')} | \n{t('owner')} | \n{t('amount')} | \n
|---|---|---|
| \n \n {offerType === 'BuyOffers'\n ? t('no_buy_offers')\n : t('no_sell_offers')}\n \n | \n
{loading ?
\n}\n"
},
{
"path": "src/containers/NFT/NFTTabs/Transactions.tsx",
"content": "import { useContext } from 'react'\nimport { useInfiniteQuery } from 'react-query'\nimport './styles.scss'\nimport SocketContext from '../../shared/SocketContext'\nimport { getNFTTransactions } from '../../../rippled/NFTTransactions'\nimport { TransactionTable } from '../../shared/components/TransactionTable/TransactionTable'\n\ninterface Props {\n tokenId: string\n}\n\nexport const Transactions = (props: Props) => {\n const { tokenId } = props\n const rippledSocket = useContext(SocketContext)\n\n const {\n data,\n isFetching: loading,\n fetchNextPage,\n hasNextPage,\n } = useInfiniteQuery(\n ['fetchTransactions', tokenId],\n ({ pageParam = '' }) =>\n getNFTTransactions(rippledSocket, tokenId, undefined, pageParam),\n {\n getNextPageParam: (lastPage) => lastPage.marker,\n },\n )\n\n const renderListContents = () => {\n const flatData = data?.pages?.map((page: any) => page.transactions).flat()\n return (\n \n
\n )\n }\n return null\n}\n\nconst CustomLegend = (props: LegendProps) => {\n const { stableVersion } = props\n const { t } = useTranslation()\n return (\n {t('version_display', { version: label })}
\n\n {t('validator_count', {\n val_count: `${valCount} (${valPercent}%)`,\n })}\n
\n\n {t('node_count', {\n node_count: `${nodeCount} (${nodePercent}%)`,\n })}\n
\n\n
\n )\n}\n\nconst stableColorCode = (\n type: string,\n dataLabel: string,\n stableVersion: string,\n) => {\n if (dataLabel === stableVersion) {\n if (type === 'validators') return GREEN_500\n return PURPLE_500\n }\n if (type === 'validators') return GREEN_800\n return PURPLE_700\n}\n\nconst BarChartVersion = (props: Props) => {\n const { data, stableVersion } = props\n const { t } = useTranslation()\n const [showTooltips, setShowTooltips] = useState(false)\n const customTick = (e) => {\n const {\n payload: { value },\n } = e\n const color = value === stableVersion ? GREY_0 : GREY_400\n e.fill = color\n if (value === stableVersion)\n /* eslint-disable react/jsx-props-no-spreading */\n return (\n \n
\n \n \n {t('validators')}\n
\n \n \n {t('nodes')}\n
\n \n
\n \n {t('current_stable_version')}:\n \n {' '}\n {t('stable_version', { stableVersion })}{' '}\n \n
\n \n \n \n `${tick}%`}\n stroke={GREY_400}\n >\n setShowTooltips(true)}\n onMouseLeave={() => setShowTooltips(false)}\n >\n {stableVersion &&\n data.map((_entry, index) => (\n setShowTooltips(true)}\n onMouseLeave={() => setShowTooltips(false)}\n >\n {stableVersion &&\n data.map((_entry, index) => (\n \n {!(data !== null && data.length > 0 && stableVersion) &&
\n )\n}\n\nexport default BarChartVersion\n"
},
{
"path": "src/containers/Network/Hexagons.tsx",
"content": "import { useEffect, useState } from 'react'\nimport { useWindowSize } from 'usehooks-ts'\n\nimport { hexbin } from 'd3-hexbin'\nimport { Loader } from '../shared/components/Loader'\nimport { Tooltip, useTooltip } from '../shared/components/Tooltip'\nimport './css/hexagons.scss'\nimport { ValidatorResponse } from '../shared/vhsTypes'\n\nconst MAX_WIDTH = 1200\nconst getDimensions = (width) => ({\n width,\n height: Math.min(width, MAX_WIDTH) / 2.4,\n radius: Math.min(width, MAX_WIDTH) / 25,\n})\n\ntype Hexagon = {\n cookie?: string\n pubkey?: string\n ledger_hash: string\n x: number\n y: number\n}\n\nconst prepareHexagons = (\n data,\n list: Record\n
\n )\n}\n"
},
{
"path": "src/containers/Network/Map.tsx",
"content": "import axios from 'axios'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { geoPath, geoNaturalEarth1 } from 'd3-geo'\nimport { scaleLinear } from 'd3-scale'\nimport { hexbin } from 'd3-hexbin'\nimport { feature } from 'topojson-client'\nimport { useWindowSize } from 'usehooks-ts'\nimport { Loader } from '../shared/components/Loader'\nimport './css/map.scss'\n\nconst MAX_WIDTH = 1200\nconst BAR_COUNT = 30\nconst HEX_RADIUS_FACTOR = 40\n\nexport interface MapProps {\n locations?: any[]\n}\n\nexport const Map = ({ locations = undefined }: MapProps) => {\n const [tooltip, setTooltip] = useState<{\n count: number\n x: number\n y: number\n } | null>(null)\n const { t } = useTranslation()\n const { width: propsWidth } = useWindowSize()\n const { data: countries } = useQuery('countries', () =>\n axios\n .get('/countries.json')\n .then(\n (response) =>\n feature(response.data, response.data.objects.countries).features,\n ),\n )\n\n const getProjection = (width, height) =>\n geoNaturalEarth1()\n .scale(width / 4.8)\n .translate([width / 2.2, height / 1.7])\n\n const getHexbin = (offset, width, height) =>\n hexbin()\n .extent([\n [0, 0],\n [offset * 2 + width, height],\n ])\n .radius(Math.sqrt(width / HEX_RADIUS_FACTOR))\n\n const getDimensions = () => {\n const pageWidth = propsWidth\n const width = Math.min(pageWidth, MAX_WIDTH)\n return {\n width,\n height: width / 2,\n }\n }\n\n const renderMap = (width, height) => {\n const offset = (propsWidth - width) / 2\n const projection = getProjection(width, height)\n const hex = getHexbin(offset, width, height)\n const bins = hex(\n locations?.map((node) => projection([node.long, node.lat])),\n )\n const counts = bins.map((bin) => bin.length)\n const max = counts.length ? Math.max(...counts) : 0\n // @ts-ignore -- d3-color allows strings to be returned\n const color: Function\n \n {hexagons?.length === 0 &&
\n \n {!locations &&
\n )\n}\n"
},
{
"path": "src/containers/Network/Nodes.tsx",
"content": "import { useContext } from 'react'\nimport axios from 'axios'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { Map } from './Map'\nimport { NodesTable } from './NodesTable'\nimport Log from '../shared/log'\nimport {\n FETCH_INTERVAL_ERROR_MILLIS,\n FETCH_INTERVAL_NODES_MILLIS,\n isEarlierVersion,\n localizeNumber,\n} from '../shared/utils'\nimport { useLanguage } from '../shared/hooks'\nimport { NodeData, NodeResponse } from '../shared/vhsTypes'\nimport NetworkContext from '../shared/NetworkContext'\nimport './css/style.scss'\n\nexport const ledgerCompare = (a: NodeData, b: NodeData) => {\n const aLedger = a.validated_ledger.ledger_index\n const bLedger = b.validated_ledger.ledger_index\n const compareVersion = isEarlierVersion(b.version, a.version) ? -1 : 1\n return bLedger === aLedger ? compareVersion : bLedger - aLedger\n}\n\nexport const Nodes = () => {\n const language = useLanguage()\n const { t } = useTranslation()\n const network = useContext(NetworkContext)\n\n const { data } = useQuery(['fetchNodesData'], async () => fetchData(), {\n refetchInterval: (returnedData, _) =>\n returnedData == null\n ? FETCH_INTERVAL_ERROR_MILLIS\n : FETCH_INTERVAL_NODES_MILLIS,\n enabled: !!network,\n })\n\n const fetchData = async () =>\n axios\n .get(`${process.env.VITE_DATA_URL}/topology/nodes/${network}`)\n .then((resp) => resp.data.nodes)\n .then((allNodes) => {\n const nodes: NodeData[] = allNodes.map((node: NodeResponse) => ({\n ...node,\n version: node.version?.startsWith('rippled')\n ? node.version.split('-').slice(1).join('-')\n : node.version,\n validated_ledger: {\n ledger_index: node.complete_ledgers\n ? Number(node.complete_ledgers.split('-')[1])\n : 0,\n },\n load_factor: node.load_factor_server\n ? Number(node.load_factor_server)\n : null,\n }))\n\n nodes.sort((a: NodeData, b: NodeData) => {\n if (a.server_state === b.server_state) {\n return ledgerCompare(a, b)\n }\n if (a.server_state && !b.server_state) {\n return -1\n }\n return 1\n })\n const nodesWithLocations = nodes.filter(\n (node: any) => 'lat' in node && 'long' in node,\n )\n return {\n nodes,\n unmapped: nodes.length - nodesWithLocations.length,\n locations: nodesWithLocations,\n }\n })\n .catch((e) => Log.error(e))\n\n return (\n \n
\n )\n}\n"
},
{
"path": "src/containers/Network/NodesTable.tsx",
"content": "import { FC } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Loader } from '../shared/components/Loader'\nimport { durationToHuman } from '../shared/utils'\nimport { NodeData } from '../shared/vhsTypes'\nimport './css/nodesTable.scss'\nimport { LEDGER_ROUTE } from '../App/routes'\nimport { RouteLink } from '../shared/routing'\n\nconst renderLastLedger = (ledger) =>\n ledger && ledger.ledger_index ? (\n {t('nodes')}
\n {\n // @ts-ignore - Work around for complex type assignment issues\n \n }\n \n {data?.nodes && (\n <>\n {t('nodes_found')}: \n \n {localizeNumber(data?.nodes.length, language)}\n {data?.unmapped ? (\n \n {' '}\n ({data?.unmapped} {t('unmapped')})\n \n ) : null}\n \n \n )}\n
\n \n
\n \n {boxes}\n
\n {`~${durationToHuman(count * 3.55, 0)}`}\n \n )\n }\n\n return null\n}\n\nconst formatLedgerHistory = (nodes) =>\n nodes.map((d) => {\n if (d.complete_ledgers != null && typeof d.complete_ledgers === 'string') {\n const ranges = d.complete_ledgers.split(',')\n const ledgers = ranges\n .map((l) => {\n const local = l.split('-')\n const low = Number(local[0])\n return isNaN(low) ? undefined : [low, Number(local[1] || local[0])]\n })\n .filter((l) => Boolean(l))\n\n return { ...d, ledgers }\n }\n\n return { ...d }\n })\n\nconst getLedgerRange = (data) => {\n let min = Infinity\n let max = 0\n data.forEach((d) => {\n if (d.ledgers) {\n d.ledgers.forEach((l) => {\n const [low, high] = l\n if (low < min) {\n min = low\n }\n\n if (high > max) {\n max = high\n }\n })\n }\n })\n\n return [min, max]\n}\n\nconst getVersion = (version) => {\n if (version && version.includes('+')) {\n return `${version.split('+')[0]}*`\n }\n return version\n}\n\nexport const NodesTable: FC<{ nodes: NodeData[] }> = ({\n nodes: unformattedNodes,\n}) => {\n const nodes = unformattedNodes ? formatLedgerHistory(unformattedNodes) : null\n const ledgerRange = nodes && getLedgerRange(nodes)\n\n const { t } = useTranslation()\n const renderNode = (node) => (\n | {t('node_pubkey')} | \n{t('ip')} | \n{t('state')} | \n{t('rippled_version')} | \n{t('last_ledger')} | \n{t('uptime')} | \n{t('peers')} | \n\n {t('in_out')}\n | \n{t('ledger_history')} | \n{t('quorum')} | \n{t('load')} | \n{t('latency')} | \n
|---|
{content}
\n}\n"
},
{
"path": "src/containers/Network/UpgradeStatus.tsx",
"content": "import { useState, useContext } from 'react'\nimport axios from 'axios'\nimport { useQuery } from 'react-query'\nimport { useTranslation } from 'react-i18next'\nimport BarChartVersion from './BarChartVersion'\nimport {\n FETCH_INTERVAL_MILLIS,\n FETCH_INTERVAL_ERROR_MILLIS,\n isEarlierVersion,\n} from '../shared/utils'\nimport Log from '../shared/log'\nimport { NodeData, NodeResponse, ValidatorResponse } from '../shared/vhsTypes'\nimport NetworkContext from '../shared/NetworkContext'\nimport { ledgerCompare } from './Nodes'\nimport { Loader } from '../shared/components/Loader'\nimport './css/style.scss'\n\ninterface NodeStats {\n nodePercent: number\n nodeCount: number\n}\n\ninterface ValidatorStats {\n validatorPercent: number\n validatorCount: number\n}\n\ninterface ValidatorAggregation {\n [label: string]: ValidatorStats\n}\n\ninterface NodeAggregation {\n [label: string]: NodeStats\n}\n\ninterface DataAggregation extends ValidatorStats, NodeStats {\n label: string\n}\n\nexport const aggregateValidators = (validators: ValidatorResponse[]) => {\n let totalVals = 0\n const aggregation: ValidatorAggregation = {}\n validators?.forEach((validator) => {\n if (!validator.signing_key) return\n const version = validator.server_version\n totalVals += 1\n if (version) {\n if (!aggregation[version]) {\n aggregation[version] = { validatorCount: 0, validatorPercent: 0 }\n }\n aggregation[version].validatorCount += 1\n }\n })\n for (const label of Object.keys(aggregation)) {\n aggregation[label].validatorPercent =\n totalVals > 0 ? (aggregation[label].validatorCount / totalVals) * 100 : 0\n }\n\n return aggregation\n}\n\nexport const aggregateNodes = (nodes: NodeResponse[]) => {\n let totalNodes = 0\n const aggregation: NodeAggregation = {}\n nodes?.forEach((node) => {\n const { version } = node\n if (!node.node_public_key) return\n totalNodes += 1\n if (version) {\n if (!aggregation[version]) {\n aggregation[version] = { nodeCount: 0, nodePercent: 0 }\n }\n aggregation[version].nodeCount += 1\n }\n })\n for (const label of Object.keys(aggregation)) {\n aggregation[label].nodePercent =\n totalNodes > 0 ? (aggregation[label].nodeCount / totalNodes) * 100 : 0\n }\n\n return aggregation\n}\n\nexport const aggregateData = (\n validatorAggregation: ValidatorAggregation,\n nodeAggregation: NodeAggregation,\n): DataAggregation[] => {\n const combinedAggregation: { [label: string]: ValidatorStats & NodeStats } =\n {}\n for (const label of Object.keys(validatorAggregation)) {\n combinedAggregation[label] = {\n validatorPercent: validatorAggregation[label].validatorPercent,\n validatorCount: validatorAggregation[label].validatorCount,\n nodePercent: 0,\n nodeCount: 0,\n }\n }\n\n for (const label of Object.keys(nodeAggregation)) {\n if (!combinedAggregation[label]) {\n combinedAggregation[label] = {\n validatorPercent: 0,\n validatorCount: 0,\n nodePercent: nodeAggregation[label].nodePercent,\n nodeCount: nodeAggregation[label].nodeCount,\n }\n } else {\n combinedAggregation[label].nodePercent =\n nodeAggregation[label].nodePercent\n combinedAggregation[label].nodeCount = nodeAggregation[label].nodeCount\n }\n }\n\n return Object.entries(combinedAggregation)\n .map(([label, stats]) => ({\n label,\n ...stats,\n }))\n .sort((a, b) => (isEarlierVersion(a.label, b.label) ? -1 : 1))\n}\n\n/**\n * Extracts the correct node version format from the source data.\n * (https://data.xrpl.org/v1/network/topology/nodes)\n *\n * Node versions often come in in this format:\n * rippled-[version]-[release (optional)]+[rippled hash (optional)]\n * Output format:\n * [version]-[release (optional)]\n * e.g. rippled-1.9.4+ba3c0e51455a88d76d90b996f20c0f102ac3f5a0.DEBUG should returns 1.9.4\n * rippled-1.9.4-b1 should returns 1.9.4-b1\n *\n * @param version - The version retrieved from source data.\n * @returns - The correct version format.\n */\nconst handleNodeVersion = (version: string | undefined) => {\n let cleanedVersion = version\n if (version?.startsWith('rippled'))\n cleanedVersion = `${version.split('-').slice(1).join('-')}`\n if (version?.includes('+'))\n cleanedVersion = `${cleanedVersion?.split('+')[0]}`\n return cleanedVersion\n}\n\nexport const UpgradeStatus = () => {\n const { t } = useTranslation()\n const [validatorAggregation, setValidatorAggregation] =\n useState\n
\n )\n}\n"
},
{
"path": "src/containers/Network/Validators.tsx",
"content": "import './css/style.scss'\n\nimport { useContext, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Helmet } from 'react-helmet-async'\nimport { useQuery } from 'react-query'\nimport { getServerState } from '../../rippled/lib/rippled'\nimport { ValidatorsTable } from './ValidatorsTable'\nimport {\n FETCH_INTERVAL_ERROR_MILLIS,\n FETCH_INTERVAL_FEE_SETTINGS_MILLIS,\n localizeNumber,\n} from '../shared/utils'\nimport { useLanguage } from '../shared/hooks'\nimport { Hexagons } from './Hexagons'\nimport { FeeSettings, StreamValidator } from '../shared/vhsTypes'\nimport { VALIDATORS_ROUTE } from '../App/routes'\nimport { useRouteParams } from '../shared/routing'\nimport ValidatorsTabs from './ValidatorsTabs'\nimport { useStreams, StreamsProvider } from '../shared/components/Streams'\nimport {\n VHSValidatorsProvider,\n useVHSValidators,\n} from '../shared/components/VHSValidators'\nimport SocketContext from '../shared/SocketContext'\nimport NetworkContext from '../shared/NetworkContext'\n\nexport const ValidatorsData = () => {\n const rippledSocket = useContext(SocketContext)\n const network = useContext(NetworkContext)\n\n const language = useLanguage()\n const { t } = useTranslation()\n const { validators: validatorsFromValidations, metrics } = useStreams()\n const { validators: validatorsFromVHS, unl } = useVHSValidators()\n const [feeSettings, setFeeSettings] = useState{t('upgrade_status')}
\n \n {Object.keys(validatorAggregation).length > 0 ||\n Object.keys(nodeAggregation).length > 0 ? (\n
\n \n
\n ) : (\n \n
\n )\n}\n\nexport const Validators = () => (\n {t('validators')}
\n {\n // @ts-ignore - Work around for complex type assignment issues\n \n {t('validators_found')}: \n \n {localizeNumber(validatorCount, language)}\n {unl?.length !== 0 && (\n \n {' '}\n ({t('unl')}: {unl?.length})\n \n )}\n \n
\n \n
\n | {t('pubkey')} | \n{t('domain')} | \n{t('unl')} | \n{t('nUnlCol')} | \n{t('Version')} | \n {tab === 'uptime' ? (\n <>\n{t('1H')} | \n{t('24H')} | \n{t('30D')} | \n \n ) : (\n <>\n {' '}\n\n {t('base')}\n | \n{t('owner')} | \n{t('base_fee')} | \n \n )}\n{t('ledger')} | \n
|---|
{content}
\n}\n"
},
{
"path": "src/containers/Network/ValidatorsTabs.tsx",
"content": "import { Tabs } from '../shared/components/Tabs'\nimport { buildPath } from '../shared/routing'\nimport { VALIDATORS_ROUTE } from '../App/routes'\n\ninterface Props {\n selected: string\n}\n\nconst ValidatorsTabs = (props: Props) => {\n const { selected } = props\n const tabs = ['uptime', 'voting']\n return (\n nodes_found: 3 (1 unmapped)
',\n )\n })\n\n expect(container.querySelectorAll('.nodes-map .tooltip').length).toBe(0)\n const nodeElement = container.querySelector('.nodes-map path.node')\n fireEvent.mouseOver(nodeElement)\n\n await waitFor(() => {\n expect(container.querySelectorAll('.nodes-map .tooltip').length).toBe(1)\n })\n expect(container.querySelector('.nodes-map .tooltip').outerHTML).toBe(\n '\n {t(hint as any, values)}\n
\n ))\n const derivedWarning = warning ?? (notFound && t('not_found'))\n\n return (\n \n
\n )\n}\n\nexport default NoMatch\n"
},
{
"path": "src/containers/NoMatch/nomatch.scss",
"content": "@use '../shared/css/variables' as *;\n\n.no-match {\n margin: 10% auto;\n text-align: center;\n\n .uh-oh {\n display: inline-block;\n padding: 2px 8px;\n border: 1px solid $black-80;\n border-radius: 4px;\n margin-bottom: 24px;\n color: $black-20;\n font-size: 12px;\n line-height: 20px;\n @include bold;\n }\n\n .title {\n margin-bottom: 16px;\n color: $black-20;\n font-size: 40px;\n line-height: 48px;\n @include bold;\n }\n\n .hint {\n margin-bottom: 16px;\n color: $black-50;\n font-size: 16px;\n line-height: 24px;\n @include bold;\n }\n\n .warning {\n justify-content: center;\n }\n}\n"
},
{
"path": "src/containers/NoMatch/test/NoMatch.test.tsx",
"content": "import { render, screen } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { HelmetProvider } from 'react-helmet-async'\nimport MockWsClient from '../../test/mockWsClient'\nimport SocketContext, { ExplorerXrplClient } from '../../shared/SocketContext'\nimport i18n from '../../../i18n/testConfigEnglish'\nimport NoMatch from '../index'\n\n/* eslint-disable react/jsx-props-no-spreading */\ndescribe('NoMatch container', () => {\n const renderNoMatch = (props = {}) => {\n const client = new MockWsClient() as unknown as ExplorerXrplClient\n\n return render(\n {t('uh_oh')}
}\n {t(title as any, values)}
\n {hintMsg}\n {(derivedWarning || isError) && (\n \n
\n )}\n \n
\n )\n}\n"
},
{
"path": "src/containers/Token/IOU/Header/styles.scss",
"content": "@use '../../../shared/css/variables' as *;\n\n// IOU-specific category pill variant (white border)\n.token-header.iou {\n .token-indicator {\n .category-pill {\n border: 1px solid $white;\n background: $black-80;\n }\n }\n}\n"
},
{
"path": "src/containers/Token/IOU/Header/test/actNotFound.json",
"content": "{\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"error\": \"actNotFound\",\n \"error_code\": 19,\n \"error_message\": \"Account not found.\",\n \"ledger_hash\": \"97992DBB4ED350B572B39D0026604943ACC84A3E5967454147253CB317551891\",\n \"ledger_index\": 68989958,\n \"request\": {\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"command\": \"account_info\",\n \"ledger_index\": \"validated\",\n \"queue\": false,\n \"signer_lists\": false,\n \"strict\": false\n },\n \"validated\": true\n}\n"
},
{
"path": "src/containers/Token/IOU/Header/test/rippledResponses.json",
"content": "{\n \"account_info\": {\n \"result\": {\n \"account_data\": {\n \"Account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"Balance\": \"123456000\",\n \"Flags\": 0,\n \"LedgerEntryType\": \"AccountRoot\",\n \"OwnerCount\": 0,\n \"PreviousTxnID\": \"6B6F2CA1633A22247058E988372BA9EFFFC5BF10212230B67341CA32DC9D4A82\",\n \"PreviousTxnLgrSeq\": 68990183,\n \"Sequence\": 2148991,\n \"index\": \"C3B625B296E95A21D7BBBB7E3D343AF423B463B87B5D56EE7F79C8E16A47A6F5\",\n \"signer_lists\": []\n },\n \"ledger_hash\": \"43C4195B2C90423771E6C5DF4AED11BF3D77FFD1E8A153A489E5B00C96318FCA\",\n \"ledger_index\": 68990183,\n \"validated\": true\n },\n \"status\": \"success\",\n \"type\": \"response\"\n },\n \"account_objects\": {\n \"result\": {\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"account_objects\": [],\n \"ledger_current_index\": 24402380,\n \"validated\": false\n },\n \"status\": \"success\",\n \"type\": \"response\"\n },\n \"gateway_balances\": {\n \"result\": {\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"ledger_hash\": \"F4023C801B8B4D05F16EFE5D8C4C3C14D02354AABBB94151F581A6BF0E04C20B\",\n \"ledger_index\": 24402706,\n \"obligations\": {\n \"ABC\": \"100\"\n },\n \"validated\": true\n },\n \"status\": \"success\",\n \"type\": \"response\"\n },\n \"server_info\": {\n \"result\": {\n \"info\": {\n \"validated_ledger\": {\n \"age\": 1,\n \"base_fee_xrp\": 0.00001,\n \"hash\": \"EA01E248FCA5CFD33A3393DA5EBCCD9219BA8DB6AF6DC28A3B0A968604F46A76\",\n \"reserve_base_xrp\": 10,\n \"reserve_inc_xrp\": 2,\n \"seq\": 24402729\n },\n \"validation_quorum\": 5\n }\n },\n \"status\": \"success\",\n \"type\": \"response\"\n }\n}\n"
},
{
"path": "src/containers/Token/IOU/TablePicker/index.tsx",
"content": "import { useState, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\n\nimport { TransactionTable } from '../../../shared/components/TransactionTable/TransactionTable'\nimport { Tabs } from '../../../shared/components/Tabs'\nimport { useAccountTransactions } from '../../shared/hooks/useAccountTransactions'\nimport {\n DexTradeTable,\n DexTradeFormatted,\n} from '../../../shared/components/DexTradeTable/DexTradeTable'\nimport {\n HoldersTable,\n XRPLHolder,\n} from '../../../shared/components/HoldersTable/HoldersTable'\nimport {\n LOSTransfer,\n TransfersTable,\n} from '../../shared/components/TransfersTable/TransfersTable'\nimport { TokenHoldersData } from '../api/holders'\nimport { LOSToken } from '../../../shared/losTypes'\nimport { TablePaginationState } from '../../shared/hooks/usePaginationState'\nimport { TableSortingState } from '../../shared/hooks/useSortingState'\n\n// Re-export for backward compatibility\nexport type { TablePaginationState, TableSortingState }\n\n/**\n * Data and loading state for a single table\n */\nexport interface TableDataState {\n data: any\n isLoading: boolean\n}\n\nexport interface TablePickerProps {\n accountId: string\n currency: string\n xrpUSDRate: string\n tokenData: LOSToken\n\n // Holders table state\n holdersData?: TokenHoldersData\n holdersPagination: TablePaginationState\n holdersLoading: boolean\n\n // Dex trades table state\n dexTradesData?: DexTradeFormatted[]\n dexTradesPagination: TablePaginationState\n dexTradesSorting: TableSortingState\n dexTradesLoading: boolean\n onRefreshDexTrades?: () => void\n\n // Transfers table state\n transfersData?: LOSTransfer[]\n transfersPagination: TablePaginationState\n transfersSorting: TableSortingState\n transfersLoading: boolean\n onRefreshTransfers?: () => void\n}\n\nexport const TablePicker = ({\n accountId,\n currency,\n xrpUSDRate,\n tokenData,\n holdersData,\n holdersPagination,\n holdersLoading,\n dexTradesData,\n dexTradesPagination,\n dexTradesSorting,\n dexTradesLoading,\n onRefreshDexTrades,\n transfersData,\n transfersPagination,\n transfersSorting,\n transfersLoading,\n onRefreshTransfers,\n}: TablePickerProps) => {\n const { t } = useTranslation()\n\n const { data, error, loading, fetchNextPage, hasNextPage } =\n useAccountTransactions({\n account: accountId,\n tokenId: currency,\n })\n\n const [tablePickerState, setTablePickerState] = useState<\n 'all' | 'dex' | 'transfers' | 'holders'\n >('all')\n\n // Reset table picker state when token changes\n useEffect(() => {\n setTablePickerState('all')\n }, [currency, accountId])\n\n // Format data for tables\n const XRPUSDPrice = Number(xrpUSDRate) || 0\n\n const holdersFormatted: XRPLHolder[] = useMemo(\n () =>\n holdersData?.holders?.map((holder, index) => ({\n ...holder,\n rank:\n (holdersPagination.currentPage - 1) * holdersPagination.pageSize +\n index +\n 1,\n value_usd: holder.balance * Number(tokenData?.price) * XRPUSDPrice,\n })) || [],\n [\n holdersData,\n holdersPagination.currentPage,\n holdersPagination.pageSize,\n tokenData?.price,\n XRPUSDPrice,\n ],\n )\n\n // transfers is already formatted array from pagination service\n const transfersFormatted: LOSTransfer[] = transfersData || []\n\n // dexTrades is already formatted array from pagination service\n const dexTradesFormatted: DexTradeFormatted[] = dexTradesData || []\n\n // Helper to reset pagination to page 1\n const resetTablePagination = (setCurrentPage: (page: number) => void) => {\n setCurrentPage(1)\n }\n\n // Helper to render transaction table\n const renderTransactionTable = () => (\n \n
\n {t('token')}
\n \n
\n {t('token_type.iou')}
\n \n
\n \n {tokenData.icon ? (\n
\n\n {tokenData.issuer_domain && (\n \n (\n \n {tokenData.issuer_name\n .trim()\n .toUpperCase()\n .replace(/\\(/g, '')\n .replace(/\\)/g, '')}\n \n )\n
\n )}\n \n
\n )}\n \n
\n \n
\n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/Token/IOU/api/holders.ts",
"content": "import axios from 'axios'\nimport logger from '../../../../rippled/lib/logger'\n\nconst log = logger({ name: 'iou' })\n\nexport interface TokenHoldersData {\n totalSupply: number\n totalHolders: number\n holders: Array<{\n account: string\n balance: number\n percent: number\n }>\n}\n\nconst fetchTokenHoldersInfo = (\n currency: string,\n issuer: string,\n limit: number,\n offset: number,\n): Promise\n
\n \n setTablePickerState(\n tabId as 'all' | 'dex' | 'transfers' | 'holders',\n )\n }\n />\n
\n\n {tablePickerState === 'all' && renderTransactionTable()}\n\n {tablePickerState === 'dex' && renderDexTradesTable()}\n\n {tablePickerState === 'transfers' && renderTransfersTable()}\n\n {tablePickerState === 'holders' && renderHoldersTable()}\n \n
\n )\n}\n"
},
{
"path": "src/containers/Token/IOU/hooks/useMarketCalculations.ts",
"content": "import { useMemo } from 'react'\nimport { formatPrice } from '../../../shared/utils'\nimport { TokenHoldersData } from '../api/holders'\nimport { LOSToken } from '../../../shared/losTypes'\nimport {\n calculateCirculatingSupply,\n formatCirculatingSupply,\n} from '../utils/tokenCalculations'\n\ninterface MarketCalculations {\n marketCap: string | null\n circSupply: number\n formattedCircSupply: string\n}\n\ninterface UseMarketCalculationsProps {\n holdersData: TokenHoldersData | undefined\n tokenData: LOSToken\n price: string\n xrpUSDRate: string\n isHoldersDataLoading: boolean\n}\n\nexport const useMarketCalculations = ({\n holdersData,\n tokenData,\n price,\n xrpUSDRate,\n isHoldersDataLoading,\n}: UseMarketCalculationsProps): MarketCalculations =>\n useMemo(() => {\n const circSupply = calculateCirculatingSupply(holdersData, tokenData)\n\n const marketCap =\n !isHoldersDataLoading && circSupply && price && xrpUSDRate\n ? formatPrice(\n Number(circSupply) * Number(price) * Number(xrpUSDRate),\n ) || null\n : null\n\n const formattedCircSupply = formatCirculatingSupply(circSupply)\n\n return {\n marketCap,\n circSupply,\n formattedCircSupply,\n }\n }, [holdersData, tokenData, price, xrpUSDRate, isHoldersDataLoading])\n"
},
{
"path": "src/containers/Token/IOU/index.tsx",
"content": "import { FC, PropsWithChildren, useState, useContext, useEffect } from 'react'\nimport { Helmet } from 'react-helmet-async'\nimport { useQuery } from 'react-query'\nimport { Header } from './Header'\nimport { TablePicker } from './TablePicker'\nimport NoMatch from '../../NoMatch'\n\nimport './styles.scss'\nimport '../shared/styles.scss'\nimport { NOT_FOUND, BAD_REQUEST, DROPS_TO_XRP_FACTOR } from '../../shared/utils'\nimport { useAnalytics } from '../../shared/analytics'\nimport { ErrorMessages } from '../../shared/Interfaces'\nimport { TOKEN_ROUTE } from '../../App/routes'\nimport { useRouteParams } from '../../shared/routing'\nimport { Loader } from '../../shared/components/Loader'\nimport { Tooltip, useTooltip } from '../../shared/components/Tooltip'\nimport SocketContext from '../../shared/SocketContext'\nimport { getAMMInfoByAssets } from '../../../rippled/lib/rippled'\nimport getTokenHolders from './api/holders'\nimport { paginationService as dexTradesPaginationService } from './services/dexTradesPagination'\nimport { paginationService as transfersPaginationService } from '../shared/services/transfersPagination'\nimport { useCursorPaginatedQuery } from '../../shared/hooks/useCursorPaginatedQuery'\nimport { PAGINATION_CONFIG, INITIAL_PAGE } from '../shared/constants'\nimport { useXRPToUSDRate } from '../../shared/hooks/useXRPToUSDRate'\nimport getToken from './api/token'\n\nconst ERROR_MESSAGES: ErrorMessages = {\n default: {\n title: 'generic_error',\n hints: ['not_your_fault'],\n },\n [NOT_FOUND]: {\n title: 'account_not_found',\n hints: ['check_account_id'],\n },\n [BAD_REQUEST]: {\n title: 'invalid_xrpl_address',\n hints: ['check_account_id'],\n },\n}\n\nconst getErrorMessage = (error: unknown) =>\n ERROR_MESSAGES[error as string | number] || ERROR_MESSAGES.default\n\nconst Page: FC\n
\n\n \n {t('token_page.general_overview')}\n
\n \n
\n \n
\n {t('token_page.issuer')}
\n \n
\n \n
\n {t('token_page.price')}
\n {price}
\n \n
\n {t('token_page.holders')}
\n {holders}
\n \n
\n {t('iou_page.trustlines')}
\n {trustlines}
\n \n
\n {t('token_page.transfer_fee')}
\n {transferFee}
\n \n
\n {t('token_page.market_data')}
\n \n
\n \n
\n {t('token_page.supply')}
\n {supply}
\n \n
\n \n {t('token_page.circulating_supply')}\n
\n \n {isHoldersDataLoading ? (\n \n ) : (\n circSupply\n )}\n
\n \n
\n {t('token_page.market_cap')}
\n \n {isHoldersDataLoading ? (\n \n ) : (\n marketData.market_cap\n )}\n
\n \n
\n {t('token_page.volume_24h')}
\n {volume24h}
\n \n
\n {t('token_page.trades_24h')}
\n {trades24h}
\n \n
\n {t('token_page.amm_tvl')}
\n \n {isAmmTvlLoading && }\n {!isAmmTvlLoading &&\n (shouldShowAccountLink ? (\n
\n \n
\n)\n\nexport const IOU = () => {\n const { trackScreenLoaded, trackException } = useAnalytics()\n const { tooltip } = useTooltip()\n const { token = '' } = useRouteParams(TOKEN_ROUTE)\n const [currency, accountId] = token.split('.')\n\n // Holders pagination\n const [holdersPage, setHoldersPage] = useState(INITIAL_PAGE)\n\n // get basic token stats and info\n const {\n data: tokenData,\n error: tokenDataError,\n isLoading: isTokenDataLoading,\n } = useQuery({\n queryKey: ['token', currency, accountId],\n queryFn: () => getToken(currency, accountId),\n })\n\n // Track token data API errors\n useEffect(() => {\n if (tokenDataError) {\n trackException(\n `token ${currency}.${accountId} --- ${JSON.stringify(tokenDataError)}`,\n )\n }\n }, [tokenDataError, currency, accountId, trackException])\n\n // get top holders information for calculations and holders table\n const { data: holdersData, isLoading: isHoldersDataLoading } = useQuery({\n queryKey: ['holders', currency, accountId, holdersPage],\n queryFn: () => {\n const offset = (holdersPage - 1) * PAGINATION_CONFIG.HOLDERS_PAGE_SIZE\n return getTokenHolders(\n currency,\n accountId,\n PAGINATION_CONFIG.HOLDERS_PAGE_SIZE,\n offset,\n )\n },\n })\n\n // get XRP to USD rate\n const XRPUSDPrice = useXRPToUSDRate()\n\n // get rippled socket for AMM info\n const rippledSocket = useContext(SocketContext)\n\n // DEX Trades — using shared hook\n const tokenId = `${currency}.${accountId}`\n const dexTrades = useCursorPaginatedQuery({\n service: dexTradesPaginationService,\n id: tokenId,\n pageSize: PAGINATION_CONFIG.DEX_TRADES_PAGE_SIZE,\n enabled: !!currency && !!accountId,\n })\n\n // Transfers — using shared hook\n const transfers = useCursorPaginatedQuery({\n service: transfersPaginationService,\n id: tokenId,\n pageSize: PAGINATION_CONFIG.TRANSFERS_PAGE_SIZE,\n enabled: !!currency && !!accountId,\n })\n\n // get amm info for TVL calculation\n // note: only fetch xrp-\n 1,\n }}\n dexTradesSorting={{\n sortField: dexTrades.sortField,\n setSortField: dexTrades.setSortField,\n sortOrder: dexTrades.sortOrder,\n setSortOrder: dexTrades.setSortOrder,\n }}\n dexTradesLoading={dexTrades.isLoading}\n onRefreshDexTrades={dexTrades.refresh}\n transfersData={transfers.data?.items || []}\n transfersPagination={{\n currentPage: transfers.page,\n setCurrentPage: transfers.setPage,\n pageSize: PAGINATION_CONFIG.TRANSFERS_PAGE_SIZE,\n total: transfers.data?.totalItems || 0,\n hasMore: transfers.data?.hasMore || false,\n hasPrevPage: transfers.page > 1,\n }}\n transfersSorting={{\n sortField: transfers.sortField,\n setSortField: transfers.setSortField,\n sortOrder: transfers.sortOrder,\n setSortOrder: transfers.setSortOrder,\n }}\n transfersLoading={transfers.isLoading}\n onRefreshTransfers={transfers.refresh}\n />\n
\n )}\n {currency}
,\n}))\n\njest.mock('../../components/HeaderBoxes', () => ({\n HeaderBoxes: () => HeaderBoxes
,\n}))\n\njest.mock('../../../../shared/components/Account', () => ({\n Account: ({ displayText }: { displayText: string }) => (\n {displayText}
\n ),\n}))\n\njest.mock('../../../../shared/utils', () => ({\n shortenAccount: (account: string) => account.substring(0, 10),\n localizeNumber: (num: number) => num.toString(),\n formatLargeNumber: (d: number, digits: number = 1) => {\n if (d >= 1000000) return { num: (d / 1000000).toFixed(digits), unit: 'M' }\n if (d >= 1000) return { num: (d / 1000).toFixed(digits), unit: 'K' }\n return { num: d.toString(), unit: '' }\n },\n formatSmallNumber: (value: number) => value.toFixed(4),\n shortenDomain: (domain: string) => domain,\n stripHttpProtocol: (url: string) => url.replace(/^https?:\\/\\//, ''),\n}))\n\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n {displayText}
\n ),\n}))\n\njest.mock('../../../../shared/utils', () => ({\n shortenAccount: (account: string) => account.substring(0, 10),\n}))\n\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n \n
\n )\n}\n"
},
{
"path": "src/containers/Token/MPT/Header/MarketData.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { convertScaledPrice } from '../../../shared/utils'\nimport { parseAmount } from '../../../shared/NumberFormattingUtils'\n\ninterface MarketDataProps {\n maxAmt?: string\n outstandingAmt?: string\n assetScale?: number\n}\n\nexport const MarketData = ({\n maxAmt,\n outstandingAmt,\n assetScale,\n}: MarketDataProps): JSX.Element => {\n const { t } = useTranslation()\n\n const formattedSupply = parseAmount(\n convertScaledPrice(BigInt(maxAmt || '0'), assetScale ?? 0),\n )\n\n const formattedCircSupply = parseAmount(\n convertScaledPrice(BigInt(outstandingAmt || '0'), assetScale ?? 0),\n )\n\n return (\n {t('token_page.general_overview')}
\n \n
\n \n
\n {t('token_page.issuer')}
\n \n
\n \n
\n {t('token_page.price')}
\n --
\n \n
\n {t('token_page.holders')}
\n \n {holdersLoading ? (\n \n ) : (\n parseIntegerAmount(holdersCount ?? 0)\n )}\n
\n \n
\n {t('token_page.transfer_fee')}
\n \n {(transferFee && parsePercent(transferFee / 1000, 3)) ?? '--'}\n
\n \n
\n {showMptIssuanceId && (\n {t('asset_scale')}
\n {assetScale ?? 0}
\n \n
\n )}\n {t('mpt_issuance_id')}
\n \n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Token/MPT/Header/Metadata.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { JsonView } from '../../../shared/components/JsonView'\n\ninterface MetadataProps {\n decodedMPTMetadata: Record{t('token_page.market_data')}
\n \n
\n \n
\n {t('token_page.supply')}
\n {formattedSupply}
\n \n
\n {t('token_page.circulating_supply')}
\n {formattedCircSupply}
\n \n
\n {t('token_page.market_cap')}
\n --
\n \n
\n {t('token_page.volume_24h')}
\n --
\n \n
\n {t('token_page.trades_24h')}
\n --
\n \n
\n {t('token_page.amm_tvl')}
\n --
\n \n {displayMetadataTitle && (\n
\n )\n}\n"
},
{
"path": "src/containers/Token/MPT/Header/Settings.tsx",
"content": "import { useTranslation } from 'react-i18next'\n\ninterface Props {\n flags?: string[]\n}\n\ninterface FlagItem {\n key: string\n label: string\n enabled: boolean\n}\n\nexport const Settings = ({ flags = [] }: Props): JSX.Element => {\n const { t } = useTranslation()\n\n const flagItems: FlagItem[] = [\n {\n key: 'locked',\n label: t('locked'),\n enabled: flags.includes('lsfMPTLocked'),\n },\n {\n key: 'canLock',\n label: t('can_lock'),\n enabled: flags.includes('lsfMPTCanLock'),\n },\n {\n key: 'requireAuth',\n label: t('require_auth'),\n enabled: flags.includes('lsfMPTRequireAuth'),\n },\n {\n key: 'canEscrow',\n label: t('can_escrow'),\n enabled: flags.includes('lsfMPTCanEscrow'),\n },\n {\n key: 'canTrade',\n label: t('can_trade'),\n enabled: flags.includes('lsfMPTCanTrade'),\n },\n {\n key: 'canTransfer',\n label: t('can_transfer'),\n enabled: flags.includes('lsfMPTCanTransfer'),\n },\n {\n key: 'canClawback',\n label: t('can_clawback'),\n enabled: flags.includes('lsfMPTCanClawback'),\n },\n ]\n\n return (\n {t('metadata')}
\n )}\n \n {isString ? (\n
\n {decodedMPTMetadata}
\n ) : (\n \n
\n \n )\n}\n"
},
{
"path": "src/containers/Token/MPT/Header/index.tsx",
"content": "import { useEffect, useState, useRef } from 'react'\nimport { useTranslation, Trans } from 'react-i18next'\nimport { Loader } from '../../../shared/components/Loader'\nimport './styles.scss'\nimport {\n BAD_REQUEST,\n HASH192_REGEX,\n shortenDomain,\n shortenMPTID,\n stripHttpProtocol,\n convertToHttpURL,\n shortenAccount,\n} from '../../../shared/utils'\nimport { CopyableText } from '../../../shared/components/CopyableText'\nimport DomainLink from '../../../shared/components/DomainLink'\nimport { FormattedMPTIssuance } from '../../../shared/Interfaces'\nimport { GeneralOverview } from './GeneralOverview'\nimport { MarketData } from './MarketData'\nimport { Settings } from './Settings'\n\nimport { Metadata } from './Metadata'\nimport GlobeSvg from '../../../shared/images/globe.svg'\nimport DefaultTokenIcon from '../../../shared/images/default_token_icon.svg'\nimport DownArrow from '../../../shared/images/down_arrow.svg'\nimport InfoIcon from '../../../shared/images/info-duotone.svg'\n\ninterface MetadataUri {\n uri: string\n category: string\n title: string\n}\n\ninterface Props {\n mptIssuanceId: string\n data?: FormattedMPTIssuance\n loading?: boolean\n setError: (error: number | null) => void\n holdersCount?: number\n holdersLoading?: boolean\n}\n\nexport const Header = (props: Props) => {\n const { t } = useTranslation()\n const {\n mptIssuanceId,\n data,\n loading,\n setError,\n holdersCount,\n holdersLoading,\n } = props\n const [showURLDropdown, setShowURLDropdown] = useState(false)\n const dropdownRef = useRef{t('settings')}
\n \n {flagItems.map((flag) => (\n
\n ))}\n \n \n {flag.enabled ? t('enabled') : t('disabled')}\n
\n {flag.label}
\n \n
\n )\n }\n\n if (!data) {\n return null\n }\n\n const {\n issuer,\n assetScale,\n maxAmt,\n outstandingAmt,\n transferFee,\n flags,\n rawMPTMetadata,\n parsedMPTMetadata,\n isMPTMetadataCompliant,\n } = data\n const ticker = parsedMPTMetadata?.ticker as string | undefined\n const logoUrl = parsedMPTMetadata?.icon as string | undefined\n const issuerName = parsedMPTMetadata?.issuer_name as string | undefined\n const uris = parsedMPTMetadata?.uris as MetadataUri[] | undefined\n\n const showMPTMetadataWarning = !isMPTMetadataCompliant\n // Only show MPT issuance ID if ticker exists (since we show ticker in header, need to show ID somewhere)\n const showMPTIssuanceId = !!ticker\n\n // Convert logo URL to HTTP/HTTPS format (handles IPFS URLs)\n const RenderedLogoUrl = logoUrl ? convertToHttpURL(logoUrl) : undefined\n\n // Get all URIs for dropdown, filtering out items without uri\n const allUris = (uris || []).filter((u) => u.uri)\n\n return (\n \n {showMPTMetadataWarning && (\n
\n \n
\n )}\n \n \n {/* placeholder */}\n \n ),\n }}\n />\n
\n \n
\n {t('token')}
\n \n
\n {t('token_type.mpt')}
\n \n
\n )}\n \n {RenderedLogoUrl ? (\n
\n\n {allUris.length > 0 && (\n \n ({shortenAccount(issuerName)}\n )\n
\n )}\n \n \n setShowURLDropdown(!showURLDropdown)}\n >\n
\n \n {allUris.slice(1).map((uriItem) => (\n
\n )}\n \n
\n \n )\n}\n"
},
{
"path": "src/containers/Token/MPT/Header/styles.scss",
"content": "@use '../../../shared/css/variables' as *;\n\n// =============================================================================\n// MPT HEADER - MPT-specific header styles only\n// All shared styles are in src/containers/Token/shared/styles.scss\n// =============================================================================\n\n.token-header.mpt {\n // MPT-specific category pill variant ($mpt color)\n .token-indicator {\n .category-pill {\n border: 1px solid $mpt;\n background: $mpt;\n }\n }\n\n // MPT metadata warning banner\n .metadata-warning {\n display: flex;\n align-items: center;\n padding: 25px;\n border: 1px solid $orange-50;\n border-radius: 8px;\n margin-bottom: 30px;\n background: $orange-90;\n gap: 12px;\n\n .warning-icon {\n width: 16px;\n min-width: 16px;\n height: 16px;\n min-height: 16px;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .warning-message {\n margin: 0;\n color: $black-0;\n font-size: 16px;\n line-height: 1.5;\n\n a {\n color: $black-0;\n text-decoration: underline;\n\n &:hover {\n color: $orange-30;\n }\n }\n }\n }\n\n .mpt-id {\n word-break: break-all;\n }\n\n // MPT-specific dropdown styles (base styles are in shared/styles.scss)\n .links-dropdown-container {\n position: relative;\n }\n\n .dropdown-toggle-button {\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n\n .dropdown-arrow {\n width: 12px;\n height: 12px;\n\n path {\n fill: $green-30;\n transition: fill 0.2s ease;\n }\n }\n }\n\n .domain-link-container:hover {\n .dropdown-arrow path {\n fill: $green-50;\n }\n }\n\n .links-dropdown-menu {\n position: absolute;\n z-index: 100;\n top: 100%;\n right: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n padding: 8px 0;\n border: 1px solid $green-30;\n border-radius: 8px;\n margin-top: 4px;\n background: $black-80;\n box-shadow: 0 4px 12px rgb(0 0 0 / 30%);\n\n .links-dropdown-item {\n padding: 8px 16px;\n color: $green-30;\n font-size: 14px;\n text-decoration: none;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba($green-30, 0.1);\n color: $green-50;\n }\n }\n }\n\n // MPT-specific description value styling\n .description-value {\n max-width: 300px;\n overflow-wrap: break-word;\n }\n\n // Settings box flag status styling\n .settings-box {\n .flag-status {\n min-width: 85px;\n padding: 4px 10px;\n border-radius: 999px;\n font-size: 12px;\n letter-spacing: 0.06em;\n text-align: center;\n text-transform: uppercase;\n white-space: nowrap;\n @include semibold;\n\n &.enabled {\n background: $green-50;\n color: $black-100;\n }\n\n &.disabled {\n background: $black-50;\n color: $black-0;\n }\n }\n }\n\n // Metadata box takes full width\n .metadata-box {\n @include for-size(tablet-landscape-up) {\n width: 100%;\n max-width: 100%;\n flex: 0 0 100%;\n }\n\n .metadata-json {\n max-height: 250px;\n overflow-y: auto;\n scrollbar-color: rgb(255 255 255 / 20%) transparent;\n\n /* Firefox */\n scrollbar-width: thin;\n\n /* WebKit */\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n border: 2px solid transparent; /* create padding effect */\n border-radius: 6px;\n background: rgb(255 255 255 / 20%);\n background-clip: padding-box;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: rgb(255 255 255 / 12%);\n }\n\n .json-view {\n padding: 16px;\n margin-bottom: 0;\n }\n\n .json-view-controls {\n top: 16px;\n right: 16px;\n\n @include for-size(phone-only) {\n top: 16px;\n left: 16px;\n }\n }\n\n .metadata-string {\n padding: 16px;\n font-family: monospace;\n font-size: 14px;\n line-height: 1.5;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Token/MPT/TablePicker/index.tsx",
"content": "import { useState, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\n\nimport { TransactionTable } from '../../../shared/components/TransactionTable/TransactionTable'\nimport { Tabs } from '../../../shared/components/Tabs'\nimport { useAccountTransactions } from '../../shared/hooks/useAccountTransactions'\nimport {\n HoldersTable,\n XRPLHolder,\n} from '../../../shared/components/HoldersTable/HoldersTable'\nimport {\n TransfersTable,\n LOSTransfer,\n} from '../../shared/components/TransfersTable/TransfersTable'\nimport { TablePaginationState } from '../../shared/hooks/usePaginationState'\nimport { TableSortingState } from '../../shared/hooks/useSortingState'\nimport { convertScaledPrice } from '../../../shared/utils'\n\nexport interface TablePickerProps {\n mptIssuanceId: string\n issuer: string\n assetScale?: number\n\n // Holders table state\n holdersData?: XRPLHolder[]\n holdersPagination: TablePaginationState\n holdersLoading: boolean\n\n // Transfers table state\n transfersData?: LOSTransfer[]\n transfersPagination: TablePaginationState\n transfersSorting: TableSortingState\n transfersLoading: boolean\n onRefreshTransfers?: () => void\n}\n\nexport const TablePicker = ({\n mptIssuanceId,\n issuer,\n assetScale,\n holdersData,\n holdersPagination,\n holdersLoading,\n transfersData,\n transfersPagination,\n transfersSorting,\n transfersLoading,\n onRefreshTransfers,\n}: TablePickerProps) => {\n const { t } = useTranslation()\n\n const { data, error, loading, fetchNextPage, hasNextPage } =\n useAccountTransactions({\n account: issuer,\n tokenId: mptIssuanceId,\n limit: 50,\n })\n\n const [tablePickerState, setTablePickerState] = useState<\n 'all' | 'transfers' | 'holders'\n >('all')\n\n // Reset table picker state when token changes\n useEffect(() => {\n setTablePickerState('all')\n }, [mptIssuanceId])\n\n // Helper to reset pagination to page 1\n const resetTablePagination = (setCurrentPage: (page: number) => void) => {\n setCurrentPage(1)\n }\n\n // Helper to render transaction table\n const renderTransactionTable = () => (\n \n
\n \n
\n
\n )\n}\n"
},
{
"path": "src/containers/Token/MPT/api/holders.ts",
"content": "import { getMPTHolders } from '../../../../rippled/lib/rippled'\nimport { convertScaledPrice } from '../../../shared/utils'\n\ninterface MPTHolderFromClio {\n account: string\n flags: number\n mpt_amount: string\n mptoken_index: string\n}\n\ninterface MPTHolder {\n rank: number\n account: string\n balance: string\n percent: number\n value_usd: number | null\n}\nexport interface MPTHolderSummary {\n holders: MPTHolder[]\n totalHolders: number\n}\n\nexport async function fetchAllMPTHolders(\n rippledSocket: any,\n tokenId: string,\n outstandingAmount: string,\n assetScale: number,\n): Promise\n
\n \n setTablePickerState(tabId as 'all' | 'transfers' | 'holders')\n }\n />\n
\n\n {tablePickerState === 'all' && renderTransactionTable()}\n\n {tablePickerState === 'transfers' && renderTransfersTable()}\n\n {tablePickerState === 'holders' && renderHoldersTable()}\n \n
\n)\n\nexport const MPT = () => {\n const { trackScreenLoaded, trackException } = useAnalytics()\n const { id: mptIssuanceId = '' } = useRouteParams(MPT_ROUTE)\n const [error, setError] = useState\n
\n )\n }\n\n if (error) {\n return \n 1,\n }}\n transfersSorting={{\n sortField: transfers.sortField,\n setSortField: transfers.setSortField,\n sortOrder: transfers.sortOrder,\n setSortOrder: transfers.setSortOrder,\n }}\n transfersLoading={transfers.isLoading}\n onRefreshTransfers={transfers.refresh}\n />\n
\n )}\n {tx.action}
\n \n {isTransfersLoading &&
\n )\n}\n"
},
{
"path": "src/containers/Token/shared/components/TransfersTable/styles.scss",
"content": "@use '../../../../shared/css/variables' as *;\n@use '../../../../shared/css/table';\n@use '../../../../shared/css/data-tables-notice';\n\n// =============================================================================\n// TRANSFERS TABLE - Component-specific styles\n// =============================================================================\n\n// Add spacing between action and timestamp columns\n.tx-action {\n padding-right: 16px;\n\n @include for-size(phone-only) {\n padding-right: 12px;\n }\n}\n\n// Scoped styles for transfers table to prevent conflicts with other tables\n.tokens-table {\n table.basic {\n // Fix column widths for transfers table with equal spacing\n .tx-hash {\n width: 130px;\n min-width: 130px;\n }\n\n .tx-ledger {\n width: 110px;\n min-width: 110px;\n }\n\n .tx-action {\n width: 110px;\n min-width: 110px;\n }\n\n .tx-timestamp {\n width: 160px;\n min-width: 160px;\n }\n\n .tx-from,\n .tx-to {\n width: 130px;\n min-width: 130px;\n }\n\n .tx-amount {\n width: 130px;\n min-width: 130px;\n }\n }\n}\n"
},
{
"path": "src/containers/Token/shared/constants.ts",
"content": "/**\n * Pagination configuration for Token page tables\n */\nexport const PAGINATION_CONFIG = {\n HOLDERS_PAGE_SIZE: 20,\n TRANSFERS_PAGE_SIZE: 10,\n DEX_TRADES_PAGE_SIZE: 10,\n} as const\n\n/**\n * Initial pagination state\n */\nexport const INITIAL_PAGE = 1\n"
},
{
"path": "src/containers/Token/shared/hooks/useAccountTransactions.ts",
"content": "import { useContext, useEffect, useMemo, useState } from 'react'\nimport { useInfiniteQuery } from 'react-query'\n\nimport { useAnalytics } from '../../../shared/analytics'\nimport SocketContext from '../../../shared/SocketContext'\nimport { getAccountTransactions } from '../../../../rippled'\n\n/**\n * Maximum number of automatic page fetches when no transactions match the filter.\n * This prevents excessive API calls for accounts with many non-matching transactions.\n */\nconst MAX_AUTO_FETCH_ATTEMPTS = 10\n\n/**\n * Delay between automatic fetch attempts in milliseconds.\n */\nconst AUTO_FETCH_DELAY_MS = 200\n\ninterface UseAccountTransactionsOptions {\n account: string\n /** Token identifier: currency code for IOU, MPT issuance ID for MPT */\n tokenId: string\n limit?: number\n}\n\n/**\n * Hook to fetch paginated account transactions filtered by token.\n *\n * Transactions are filtered client-side after fetching from rippled.\n * If a fetched page contains no matching transactions but more pages exist,\n * automatically fetches additional pages (up to MAX_AUTO_FETCH_ATTEMPTS)\n * to find matching transactions.\n */\nexport function useAccountTransactions({\n account,\n tokenId,\n limit,\n}: UseAccountTransactionsOptions) {\n const { trackException } = useAnalytics()\n const rippledSocket = useContext(SocketContext)\n\n const {\n data,\n error,\n isFetching: isLoading,\n fetchNextPage,\n hasNextPage,\n } = useInfiniteQuery\n \n ↻\n \n
\n {t('data_available_from_notice')}
\n \n \n \n
\n
\n {(hasMore || hasPrevPage) && (\n | {t('tx_hash')} | \n{t('ledger')} | \n{t('action')} | \n{t('from')} | \n{t('to')} | \n{t('amount')} | \n
|---|
{new Date(timestamp * 1000).toISOString()}
\n ),\n}))\n\njest.mock('../../../../../shared/components/Pagination', () => ({\n Pagination: ({\n onPageChange,\n totalItems,\n pageSize = 15,\n }: {\n onPageChange: (page: number) => void\n totalItems: number\n pageSize?: number\n }) => {\n const totalPages = Math.max(1, Math.ceil(totalItems / pageSize))\n if (totalPages <= 1) return null\n return (\n \n \n
\n )\n },\n}))\n\njest.mock('../../../../../shared/components/Loader', () => ({\n Loader: () => Loading...
,\n}))\n\njest.mock('../../../../../shared/NumberFormattingUtils', () => ({\n parseAmount: (amount: any) => String(amount),\n}))\n\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n \n
\n )\n }\n\n return (\n \n
\n \n
\n {t('accounts.xrp_balance')}
\n {currencyBalance}
\n \n
\n {t('reserve')}
\n {reserveBalance}
\n \n
\n {t('sequence_number_short')}
\n {sequence}
\n \n
\n {t('issuer_address')}
\n \n
\n \n
\n {t('obligations')}
\n \n {obligationsBalance.num}\n {obligationsBalance.unit}\n
\n \n
\n \n
\n {t('details')}
\n {renderDetails()}\n\n
\n {t('settings')}
\n {renderSettings()}\n\n
\n )\n}\n"
},
{
"path": "src/containers/TokenNonMain/TokenHeader/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n@use '../../shared/css/table';\n\n.token-header-non-main {\n .header-container {\n .bottom-container {\n display: flex;\n flex-direction: column;\n padding-top: 64px;\n\n @include for-size(desktop-up) {\n flex-direction: row;\n padding-top: 80px;\n }\n\n .details {\n width: 100%;\n @include for-size(desktop-up) {\n width: 490px;\n }\n }\n\n .settings {\n width: 100%;\n @include for-size(desktop-up) {\n width: 650px;\n }\n }\n }\n\n .info-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-top: 68px;\n\n @include for-size(desktop-up) {\n flex-direction: row;\n margin-top: 80px;\n }\n\n .values {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 18px;\n color: $white;\n\n @include for-size(desktop-up) {\n flex-direction: column;\n margin-bottom: 0px;\n }\n\n .title {\n padding-bottom: 4px;\n color: $black-40;\n font-size: 14px;\n text-transform: uppercase;\n @include semibold;\n }\n\n .value {\n color: $white;\n font-size: 18px;\n line-height: 22.5px;\n text-decoration: none;\n @include bold;\n }\n }\n }\n }\n\n .token-header {\n margin-bottom: 16px;\n\n .box-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 106px;\n text-align: left;\n\n span {\n margin: 0px;\n color: $white;\n font-size: 32px;\n @include bold;\n\n @include for-size(tablet-landscape-up) {\n font-size: 42px;\n }\n }\n\n img {\n width: 24px;\n height: 24px;\n margin-left: 16px;\n object-fit: contain;\n }\n }\n\n .box-content {\n min-height: 100px;\n padding-bottom: 20px;\n }\n\n .column {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n\n @include for-size(desktop-up) {\n width: 450px;\n\n &.second {\n width: calc(100% - 450px);\n text-align: right;\n }\n }\n\n .secondary {\n padding: 0px 8px;\n border-bottom: 1px solid $black-20;\n margin-bottom: 20px;\n color: $black-90;\n font-size: 12px;\n @include bold;\n\n @include for-size(desktop-up) {\n border: none;\n }\n\n .title {\n color: $black-40;\n font-size: 14px;\n text-transform: uppercase;\n @include medium;\n }\n\n .label {\n color: $black-40;\n text-transform: uppercase;\n @include medium;\n }\n\n ul {\n padding: 0px;\n margin: 0px;\n list-style: none;\n\n li {\n padding: 1px;\n vertical-align: top;\n\n a {\n display: inline-block;\n overflow: hidden;\n color: inherit;\n text-overflow: ellipsis;\n text-transform: none;\n vertical-align: middle;\n white-space: nowrap;\n @include medium;\n }\n\n b {\n color: $white;\n word-break: break-all;\n @include bold;\n }\n\n &.flags {\n color: $blue-purple-30;\n font-style: italic;\n }\n }\n }\n\n &.x-address ul {\n width: 100%;\n\n li {\n display: flex;\n justify-content: space-between;\n\n @media (width >= 450px) {\n display: block;\n }\n\n .tag {\n font-weight: 500;\n }\n\n .network {\n font-weight: 500;\n }\n\n &.tag-info {\n padding-top: 14px;\n font-size: 14px;\n }\n }\n }\n\n &.signer-list ul {\n width: 100%;\n\n li {\n display: flex;\n justify-content: space-between;\n\n @media (width >= 450px) {\n display: block;\n }\n\n .account {\n overflow: hidden;\n width: 285px;\n padding-right: 10px;\n color: $white;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .weight {\n text-align: right;\n white-space: nowrap;\n }\n\n &.quorum {\n display: block;\n }\n }\n }\n }\n }\n }\n}\n"
},
{
"path": "src/containers/TokenNonMain/TokenHeader/test/actNotFound.json",
"content": "{\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"error\": \"actNotFound\",\n \"error_code\": 19,\n \"error_message\": \"Account not found.\",\n \"ledger_hash\": \"97992DBB4ED350B572B39D0026604943ACC84A3E5967454147253CB317551891\",\n \"ledger_index\": 68989958,\n \"request\": {\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"command\": \"account_info\",\n \"ledger_index\": \"validated\",\n \"queue\": false,\n \"signer_lists\": false,\n \"strict\": false\n },\n \"validated\": true\n}\n"
},
{
"path": "src/containers/TokenNonMain/TokenHeader/test/rippledResponses.json",
"content": "{\n \"account_info\": {\n \"result\": {\n \"account_data\": {\n \"Account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"Balance\": \"123456000\",\n \"Flags\": 0,\n \"LedgerEntryType\": \"AccountRoot\",\n \"OwnerCount\": 0,\n \"PreviousTxnID\": \"6B6F2CA1633A22247058E988372BA9EFFFC5BF10212230B67341CA32DC9D4A82\",\n \"PreviousTxnLgrSeq\": 68990183,\n \"Sequence\": 2148991,\n \"index\": \"C3B625B296E95A21D7BBBB7E3D343AF423B463B87B5D56EE7F79C8E16A47A6F5\",\n \"signer_lists\": []\n },\n \"ledger_hash\": \"43C4195B2C90423771E6C5DF4AED11BF3D77FFD1E8A153A489E5B00C96318FCA\",\n \"ledger_index\": 68990183,\n \"validated\": true\n },\n \"status\": \"success\",\n \"type\": \"response\"\n },\n \"account_objects\": {\n \"result\": {\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"account_objects\": [],\n \"ledger_current_index\": 24402380,\n \"validated\": false\n },\n \"status\": \"success\",\n \"type\": \"response\"\n },\n \"gateway_balances\": {\n \"result\": {\n \"account\": \"rDsbeomae4FXwgQTJp9Rs64Qg9vDiTCdBv\",\n \"ledger_hash\": \"F4023C801B8B4D05F16EFE5D8C4C3C14D02354AABBB94151F581A6BF0E04C20B\",\n \"ledger_index\": 24402706,\n \"obligations\": {\n \"ABC\": \"100\"\n },\n \"validated\": true\n },\n \"status\": \"success\",\n \"type\": \"response\"\n },\n \"server_info\": {\n \"result\": {\n \"info\": {\n \"validated_ledger\": {\n \"age\": 1,\n \"base_fee_xrp\": 0.00001,\n \"hash\": \"EA01E248FCA5CFD33A3393DA5EBCCD9219BA8DB6AF6DC28A3B0A968604F46A76\",\n \"reserve_base_xrp\": 10,\n \"reserve_inc_xrp\": 2,\n \"seq\": 24402729\n },\n \"validation_quorum\": 5\n }\n },\n \"status\": \"success\",\n \"type\": \"response\"\n }\n}\n"
},
{
"path": "src/containers/TokenNonMain/TokenTransactionTable/TokenTransactionTable.tsx",
"content": "import { useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useInfiniteQuery } from 'react-query'\n\nimport { useAnalytics } from '../../shared/analytics'\nimport SocketContext from '../../shared/SocketContext'\nimport { TransactionTable } from '../../shared/components/TransactionTable/TransactionTable'\nimport { getAccountTransactions } from '../../../rippled'\n\nexport interface TokenTransactionsTableProps {\n accountId: string\n currency: string\n}\n\nexport const TokenTransactionTable = ({\n accountId,\n currency,\n}: TokenTransactionsTableProps) => {\n const { trackException } = useAnalytics()\n const rippledSocket = useContext(SocketContext)\n const { t } = useTranslation()\n\n const {\n data,\n error,\n isFetching: loading,\n fetchNextPage,\n hasNextPage,\n } = useInfiniteQuery\n \n
\n {emailHash && (\n
\n \n
\n {emailHash && (\n {renderHeaderContent()}
\n \n
\n)\n\nexport const TokenNonMain = () => {\n const rippledSocket = useContext(SocketContext)\n const { trackScreenLoaded } = useAnalytics()\n const { token = '' } = useRouteParams(TOKEN_ROUTE)\n const [currency, accountId] = token.split('.')\n const { t } = useTranslation()\n const {\n data: tokenData,\n error: tokenDataError,\n isLoading: isTokenDataLoading,\n } = useQuery({\n queryKey: ['token', currency, accountId],\n queryFn: () => getToken(currency, accountId, rippledSocket),\n })\n\n useEffect(() => {\n trackScreenLoaded({\n issuer: accountId,\n currency_code: currency,\n })\n\n return () => {\n window.scrollTo(0, 0)\n }\n }, [accountId, currency, trackScreenLoaded])\n\n const renderError = () => {\n const message = getErrorMessage(tokenDataError)\n return \n
\n )}\n {!accountId && (\n {t('token_transactions')}
\n\n
\n )}\n Enter an account ID in the search box
\n 0 ? 'increase' : 'decrease'}`}>\n
\n)\n\nexport const TokensTable = ({\n tokens,\n sortField,\n setSortField,\n sortOrder,\n setSortOrder,\n setPage,\n}: TokensTableProps) => {\n const { t } = useTranslation()\n\n const renderIssuer = (token: LOSToken) => (\n \n {percent > 0\n ? parsePercent(percent)\n : parsePercent(percent).replace('-', '')}\n
\n {percent > 0 ? (\n \n {token.issuer_name && (\n {token.issuer_name} (\n )}\n
\n )\n\n const renderToken = (token: LOSToken) => (\n \n
\n ) : (\n \n \n \n
\n
\n | # | \n{t('name')} | \n{t('issuer')} | \n
|---|
\n \n {categories.map((cat) => (\n handleClick(cat)}\n type=\"button\"\n >\n \n
\n )\n}\n\nexport const Tokens = () => {\n const [sortField, setSortField] = useState('market_cap')\n const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')\n const [filterField, setFilterField] = useState('')\n const [page, setPage] = useState(1)\n const { tooltip, showTooltip, hideTooltip } = useTooltip()\n\n const { t } = useTranslation()\n const { trackScreenLoaded, trackException } = useAnalytics()\n\n // Track page load\n useEffect(() => {\n trackScreenLoaded()\n }, [trackScreenLoaded])\n\n const filterCategories: CategoryKey[] = ['stablecoin', 'wrapped']\n\n const { data: tokensData } = useQuery{t(cat)}
\n \n ))}\n \n
\n )\n}\n"
},
{
"path": "src/containers/Tokens/test/index.test.tsx",
"content": "import { render, waitFor } from '@testing-library/react'\nimport moxios from 'moxios'\nimport { Route } from 'react-router'\nimport i18n from '../../../i18n/testConfigEnglish'\nimport { Tokens } from '..'\nimport NetworkContext from '../../shared/NetworkContext'\nimport { flushPromises, QuickHarness } from '../../test/utils'\nimport tokensData from './mock_data/tokens.json'\nimport { TOKENS_ROUTE } from '../../App/routes'\n\njest.mock('usehooks-ts', () => ({\n useWindowSize: () => ({\n width: 375,\n height: 600,\n }),\n}))\n\ndescribe('Tokens Page container', () => {\n const renderTokens = () =>\n render(\n {t('tokens')}
\n {tokensData?.metrics && (\n \n
\n )}\n {pagedTokens.length > 0 ? (\n <>\n \n
\n {t('no_of_tokens')}
\n {tokensData.metrics.count}
\n \n
\n \n {t('market_cap')}\n {renderTextTooltip('market_cap_metric')}\n
\n \n {parseCurrencyAmount(tokensData.metrics.market_cap)}\n
\n \n
\n \n {t('volume_24h_total')}\n {renderTextTooltip('volume_24h_total')}\n
\n \n {parseCurrencyAmount(tokensData.metrics.volume_24h)}\n
\n \n
\n \n {t('stablecoin')}\n {renderTextTooltip('stablecoin')}\n
\n \n {parseCurrencyAmount(tokensData.metrics.stablecoin)}\n
\n \n {` ${t('xrplmeta_guidelines')}`}\n ),\n }}\n />\n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Transactions/DetailTab/HookDetails.tsx",
"content": "import { FC } from 'react'\nimport { Trans, useTranslation } from 'react-i18next'\nimport { convertHexToString } from '../../../rippled/lib/utils'\nimport { Account } from '../../shared/components/Account'\nimport { RouteLink } from '../../shared/routing'\nimport { TRANSACTION_ROUTE } from '../../App/routes'\n\nconst renderHookParameterName = (name: string) => {\n // Example:\n // 4556520100000000000000000000000000000000000000000000000000000002 -> EVR 2\n const split = name.split('0000').filter((d) => d !== '')\n if (split.length === 2) {\n return `${convertHexToString(split[0])}${Number(split[1])}`\n }\n return name\n}\n\nconst EmitDetails: FC<{ emitDetails: any }> = ({ emitDetails }) => {\n const { t } = useTranslation()\n return (\n {t('description')}
\n \n {t('transaction_sequence')}{' '}\n \n
\n {data.tx.Delegate && (\n \n
\n )}\n {DescriptionComponent && \n \n \n \n \n \n \n \n {emitDetails.EmitCallback && (\n \n \n \n )}\n
\n )\n}\n\nconst HookParameter: FC<{ HookParameter: any }> = ({\n HookParameter: param,\n}) => (\n {t('emit_details')}
\n - \n
- \n
- \n
\n
\n )\n}\n"
},
{
"path": "src/containers/Transactions/DetailTab/Meta/AccountRoot.tsx",
"content": "import { Trans } from 'react-i18next'\nimport { CURRENCY_OPTIONS, XRP_BASE } from '../../../shared/transactionUtils'\nimport { localizeNumber } from '../../../shared/utils'\nimport { Account } from '../../../shared/components/Account'\nimport type { MetaRenderFunction } from './types'\n\nconst render: MetaRenderFunction = (t, language, action, node, index) => {\n const fields = node.FinalFields || node.NewFields || { Balance: 0 }\n const prev = node.PreviousFields || { Balance: 0 }\n const change = (fields.Balance - prev.Balance) / XRP_BASE\n const numberOption = { ...CURRENCY_OPTIONS, currency: 'XRP' }\n const prevBalance = localizeNumber(\n prev.Balance / XRP_BASE,\n language,\n numberOption,\n )\n const finalBalance = localizeNumber(\n fields.Balance / XRP_BASE,\n language,\n numberOption,\n )\n\n const renderLine2 = () => {\n if (change > 0) {\n return (\n {t('hooks')}
\n {tx.EmitDetails && \n
\n )}\n {meta.HookExecutions && (\n {t('hook_parameters')}
\n {tx.HookParameters.map(HookParameter)}\n \n
\n )}\n {t('hook_executions')}
\n {meta.HookExecutions.map(HookExecution)}\n - \n
- \n
\n Balance increased by\n \n {localizeNumber(change, language, numberOption)}\n XRP\n \n from\n \n {prevBalance}\n XRP\n \n to\n \n {finalBalance}\n XRP\n \n \n \n
- \n
- \n
\n Balance decreased by\n \n {localizeNumber(change, language, numberOption)}\n XRP\n \n from\n \n {prevBalance}\n XRP\n \n to\n \n {finalBalance}\n XRP\n \n \n \n
- \n
- \n
\n Balance changed by\n {changeStr}\n from\n {previousBalanceStr}\n to\n {finalBalanceStr}\n \n \n
- \n
- \n
\n Outstanding balance changed by\n {changeStr}\n from\n {previousBalanceStr}\n to\n {finalBalanceStr}\n \n \n
- {lines}
- \n {line2}\n {line3}\n
- \n
- \n
\n Balance changed by\n {localizeNumber(change, language, numberOption)}\n from\n {localizeNumber(previousBalance, language, numberOption)}\n to\n {localizeNumber(finalBalance, language, numberOption)}\n \n \n
\n
\n )\n )\n }\n\n const affectedNodes = groupAffectedNodes(data)\n\n return (\n {t('nodes_type', { action })}
\n - {meta}
\n
\n )\n}\n"
},
{
"path": "src/containers/Transactions/DetailTab/Meta/types.ts",
"content": "// Union type for all possible node types - using any to handle the different field structures\nexport type MetaNode = any\n\n// Render function signatures for Meta components\nexport type MetaRenderFunction = (\n t: any,\n language: string,\n action: string,\n node: MetaNode,\n index: number,\n) => JSX.Element\n\nexport type MetaRenderFunctionWithTx = (\n t: any,\n language: string,\n action: string,\n node: MetaNode,\n index: number,\n tx: any,\n) => JSX.Element\n\nexport type DirectoryNodeRenderFunction = (\n t: any,\n action: string,\n node: MetaNode,\n index: number,\n) => JSX.Element\n"
},
{
"path": "src/containers/Transactions/DetailTab/detailTab.scss",
"content": "@use '../../shared/css/variables' as *;\n\n.detail-body {\n margin-top: 20px;\n color: $black-40;\n font-size: 12px;\n letter-spacing: 0px;\n\n .detail-section {\n padding: 5px 15px;\n border-bottom: 1px solid $black-70;\n margin: 0px 0px 30px;\n\n &:last-child {\n border: none;\n }\n\n li {\n overflow-wrap: break-word;\n }\n\n @include for-size(tablet-landscape-up) {\n width: 552px;\n }\n @include for-size(desktop-up) {\n width: 772px;\n }\n @include for-size(big-desktop-up) {\n width: 882px;\n }\n\n b {\n color: $black-30;\n @include medium;\n\n small {\n margin-left: 5px;\n }\n }\n\n ul {\n padding: 0px 30px;\n margin: 0px;\n\n li {\n ul {\n list-style: square;\n }\n\n li {\n margin: 0px;\n font-size: 14px;\n }\n }\n }\n\n .flags {\n font-style: italic;\n }\n\n .title {\n margin-bottom: 4px;\n color: $white;\n font-size: 16px;\n text-transform: capitalize;\n @include bold;\n\n span {\n margin-left: 8px;\n font-size: 10px;\n line-height: 18px;\n }\n }\n\n .detail-subtitle {\n margin-top: 16px;\n margin-bottom: 2px;\n color: $black-40;\n font-size: 14px;\n text-transform: uppercase;\n @include medium;\n }\n\n .ledger {\n @include medium;\n }\n\n .tx-result.fail {\n color: $orange-40;\n }\n\n .time {\n color: $blue-purple-30;\n }\n\n .hash {\n @include medium;\n }\n\n .condition,\n .fulfillment,\n .channel,\n .regular-key,\n .email,\n .message-key {\n color: $blue-purple-30;\n font-size: 13px;\n word-break: break-all;\n }\n\n .domain {\n color: $blue-purple-30;\n }\n\n .flag {\n color: $blue-purple-30;\n font-style: italic;\n }\n\n .account {\n font-size: 11px;\n @include bold;\n }\n\n .signers {\n margin: 5px 0px;\n list-style: decimal;\n\n li {\n margin: 2px;\n\n .label {\n font-size: 12px;\n text-transform: uppercase;\n }\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Transactions/DetailTab/index.tsx",
"content": "import { FC } from 'react'\nimport { Trans, useTranslation } from 'react-i18next'\nimport { TransactionMeta } from './Meta'\nimport { TransactionDescription } from './Description'\nimport { Account } from '../../shared/components/Account'\nimport { localizeDate, localizeNumber } from '../../shared/utils'\nimport {\n DATE_OPTIONS,\n CURRENCY_OPTIONS,\n SUCCESSFUL_TRANSACTION,\n XRP_BASE,\n buildFlags,\n buildMemos,\n} from '../../shared/transactionUtils'\nimport './detailTab.scss'\nimport { useLanguage } from '../../shared/hooks'\nimport { HookDetails } from './HookDetails'\nimport { RouteLink } from '../../shared/routing'\nimport { LEDGER_ROUTE } from '../../App/routes'\n\nexport const DetailTab: FC<{ data: any }> = ({ data }) => {\n const { t } = useTranslation()\n const language = useLanguage()\n\n const renderStatus = () => {\n const { TransactionResult } = data.meta\n const time = localizeDate(new Date(data.date), language, DATE_OPTIONS)\n let line1\n\n if (TransactionResult === SUCCESSFUL_TRANSACTION) {\n line1 = t('successful_transaction')\n } else {\n line1 = (\n {t('meta')}
\n \n {t('number_of_affected_node', {\n count: data.meta.AffectedNodes.length,\n })}\n
\n {renderNodesMeta('created', affectedNodes.created, data.tx)}\n {renderNodesMeta('modified', affectedNodes.modified, data.tx)}\n {renderNodesMeta('deleted', affectedNodes.deleted, data.tx)}\n \n \n {data.ledger_index}\n \n {t('on')}\n {`${time} ${DATE_OPTIONS.timeZone}`}\n
\n )\n }\n\n const renderMemos = () => {\n const memos = buildMemos(data)\n return memos.length ? (\n {t('status')}
\n {line1}\n {t('transaction_validated')}\n \n
\n ) : null\n }\n\n const renderFee = () => {\n const numberOptions = { ...CURRENCY_OPTIONS, currency: 'XRP' }\n const totalCost = data.tx.Fee\n ? localizeNumber(\n Number.parseFloat(data.tx.Fee) / XRP_BASE,\n language,\n numberOptions,\n )\n : null\n return (\n totalCost && (\n \n {t('memos')}\n ({t('decoded_hex')})\n
\n {memos.map((memo) => (\n {memo}
\n ))}\n \n
\n )\n )\n }\n\n const renderFlags = () => {\n const flags = buildFlags(data)\n return flags.length ? (\n {t('transaction_cost')}
\n \n {t('transaction_consumed_fee')}\n \n {totalCost}\n XRP\n \n
\n \n
\n ) : null\n }\n\n const renderSigners = () =>\n data.tx.Signers ? (\n {t('flags')}
\n \n {flags.map((flag) => (\n
\n {flag}
\n ))}\n \n
\n ) : null\n\n return (\n {t('signers')}
\n - \n {data.tx.Signers.map((d) => (\n
- \n
\n \n ))}\n
\n {renderStatus()}\n
\n )\n}\n"
},
{
"path": "src/containers/Transactions/Simple/index.tsx",
"content": "import { FC } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { transactionTypes } from '../../shared/components/Transaction'\nimport { DefaultSimple } from '../../shared/components/Transaction/DefaultSimple'\n\nexport const Simple: FC<{\n data: any\n type: string\n}> = ({ data, type }) => {\n // Locate the component for the left side of the simple tab that is unique per TransactionType.\n const { t } = useTranslation()\n const SimpleComponent = transactionTypes[type]?.Simple\n if (SimpleComponent) {\n return (\n {t('component_error')}
\n {t('try_detailed_raw')}
\n \n }\n >\n \n
\n )\n}\n"
},
{
"path": "src/containers/Transactions/index.tsx",
"content": "import { useContext, useEffect } from 'react'\nimport { Helmet } from 'react-helmet-async'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { useWindowSize } from 'usehooks-ts'\nimport NoMatch from '../NoMatch'\nimport { Loader } from '../shared/components/Loader'\nimport { Tabs } from '../shared/components/Tabs'\nimport {\n NOT_FOUND,\n BAD_REQUEST,\n HASH256_REGEX,\n CTID_REGEX,\n} from '../shared/utils'\nimport { SimpleTab } from './SimpleTab'\nimport { DetailTab } from './DetailTab'\nimport './transaction.scss'\nimport { AnalyticsFields, useAnalytics } from '../shared/analytics'\nimport SocketContext from '../shared/SocketContext'\nimport { TxStatus } from '../shared/components/TxStatus'\nimport { getAction, getCategory } from '../shared/components/Transaction'\nimport { buildPath, useRouteParams } from '../shared/routing'\nimport { SUCCESSFUL_TRANSACTION } from '../shared/transactionUtils'\nimport { getTransaction } from '../../rippled'\nimport { TRANSACTION_ROUTE } from '../App/routes'\nimport { JsonView } from '../shared/components/JsonView'\n\nconst WRONG_NETWORK = 406\n\nconst ERROR_MESSAGES: Record\n
\n {width >= BREAKPOINTS.landscape && (\n {rowIndex}
\n )}\n \n \n
\n )\n }\n\n function renderTabs() {\n const tabs = ['simple', 'detailed', 'raw']\n const mainPath = buildPath(TRANSACTION_ROUTE, { identifier })\n return {type}
\n \n
\n {data?.processed.tx.ctid && (\n {t('hash')}:
\n {data?.processed.hash}\n \n
\n )}\n CTID:
\n {data.processed.tx.ctid}\n {body}
\n \n )\n }\n\n let body\n\n if (isError) {\n const message = getErrorMessage(error)\n body = \n
\n )\n}\n"
},
{
"path": "src/containers/Transactions/simpleTab.scss",
"content": "@use '../shared/css/variables' as *;\n\n$subdued-color: $black-40;\n\n.simple-body-tx {\n .rows {\n padding-top: 0px;\n\n .groups-title {\n display: block;\n flex-direction: row;\n color: $black-40;\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .partial-row {\n display: flex;\n overflow: hidden;\n flex-grow: 1;\n flex-wrap: wrap;\n padding-top: 20px;\n padding-left: 5px;\n color: $red-dark;\n float: right;\n font-size: 14px;\n font-style: italic;\n text-align: right;\n vertical-align: middle;\n @include regular;\n }\n\n .row {\n .value {\n text-align: right;\n\n .grant {\n .account {\n padding-bottom: 8px;\n font-size: 11px;\n text-align: right;\n @include medium;\n }\n }\n\n .amount {\n text-align: right;\n\n .amount-localized {\n display: block;\n }\n\n .one-line {\n display: flex;\n }\n\n .currency {\n display: block;\n }\n\n .currency,\n .one-line {\n margin: -1px 0px -16px;\n color: $subdued-color;\n font-size: 11px;\n text-align: right;\n @include medium;\n\n .account {\n font-size: inherit;\n line-height: inherit;\n vertical-align: bottom;\n }\n }\n\n &.list {\n margin-bottom: 12px;\n\n .one-line {\n justify-content: flex-end;\n margin: -1px 0px 0px;\n }\n }\n }\n\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n &.flex-column {\n display: flex;\n flex-direction: column;\n }\n\n &.partial,\n &.closed,\n &.unset {\n color: $red-dark;\n font-size: 14px;\n font-style: italic;\n @include regular;\n }\n\n &.flag {\n color: $blue-purple-30;\n font-size: 14px;\n font-style: italic;\n @include regular;\n }\n\n &.condition,\n &.fulfillment,\n &.tx,\n &.channel {\n width: calc(100% - 120px);\n color: $subdued-color;\n font-size: 14px;\n white-space: normal;\n word-break: break-all;\n @include regular;\n }\n }\n\n &:first-child {\n padding-top: 40px;\n }\n }\n\n .error {\n padding: 50px;\n color: $orange-40;\n font-size: 14px;\n text-align: center;\n\n .type {\n margin: 0 5px;\n @include bold;\n }\n }\n\n .group {\n margin: 16px 0 16px -16px;\n background: rgba($black-80, 0.7);\n gap: 15px;\n\n &:first-child {\n margin-top: 0px;\n }\n\n &:last-child {\n margin-bottom: 0px;\n }\n\n .group-title {\n display: block;\n flex-direction: row;\n padding: 16px 0 0 16px;\n color: $black-40;\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .row {\n padding: 16px 28px 12px 16px;\n\n &:last-child {\n padding-bottom: 16px;\n border: none;\n }\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Transactions/test/Description.test.tsx",
"content": "import { render } from '@testing-library/react'\nimport { BrowserRouter as Router } from 'react-router'\nimport { I18nextProvider } from 'react-i18next'\nimport { QueryClientProvider } from 'react-query'\nimport i18n from '../../../i18n/testConfigEnglish'\nimport { TransactionDescription } from '../DetailTab/Description'\nimport Transaction from './mock_data/Transaction.json'\nimport OfferCreateTicket from './mock_data/OfferCreateTicket.json'\nimport EmittedPayment from './mock_data/EmittedPayment.json'\nimport DelegatePayment from './mock_data/DelegatePayment.json'\nimport { queryClient } from '../../shared/QueryClient'\n\ndescribe('Description container', () => {\n const renderDescription = (data = {}) =>\n render(\n \n {localizeDate(new Date(report.date), language, {\n dateStyle: 'full',\n timeZone: DEFAULT_HISTORY_TIMEZONE,\n })}\n
\n \n {localizeDate(new Date(report.date), language, {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n timeZone: DEFAULT_HISTORY_TIMEZONE,\n })}\n
\n | {t('validator_history.date')} | \n{t('validator_history.chain')} | \n{t('validator_history.score')} | \n{t('total')} | \n{t('validator_history.missed')} | \n
|---|---|---|---|---|
| \n | \n
\n \n {Number.parseFloat(d.score).toFixed(5)}\n {d.incomplete && *}\n
\n \n ) : (\n \n )\n\n return (\n <>\n {label}
\n \n
\n Master Key
\n {data.master_key || 'Unknown'}
\n \n
\n {data.current_index && (\n Signing Key
\n {data.signing_key || 'Unknown'}
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Validators/VotingTab.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { FC } from 'react'\nimport axios from 'axios'\nimport { useQuery } from 'react-query'\n\nimport { ValidatorSupplemented } from '../shared/vhsTypes'\nimport { SimpleRow } from '../shared/components/Transaction/SimpleRow'\nimport {\n FETCH_INTERVAL_ERROR_MILLIS,\n FETCH_INTERVAL_VHS_MILLIS,\n SERVER_ERROR,\n renderXRP,\n} from '../shared/utils'\nimport { useAnalytics } from '../shared/analytics'\nimport { XRP_BASE } from '../shared/transactionUtils'\n\nimport './votingTab.scss'\nimport { RouteLink } from '../shared/routing'\nimport { AMENDMENT_ROUTE } from '../App/routes'\nimport { Loader } from '../shared/components/Loader'\n\nexport const VotingTab: FC<{\n validatorData: ValidatorSupplemented\n network: string | undefined\n}> = ({ validatorData, network }) => {\n const { t } = useTranslation()\n const { trackException } = useAnalytics()\n\n const votedAmendments = new Set(\n validatorData.amendments\n ? validatorData.amendments.map((amendment) => amendment.id)\n : [],\n )\n const { data, isLoading } = useQuery\n
\n {width >= BREAKPOINTS.landscape && (\n {rowIndex}
\n )}\n \n \n \n \n {name}\n \n \n \n {id}\n \n {voted ? (\n \n Yea\n \n ) : (\n \n Nay\n \n )}\n
\n )\n\n return (\n \n
\n )\n}\n"
},
{
"path": "src/containers/Validators/historyTab.scss",
"content": "@use '../shared/css/variables' as *;\n\n.history-table {\n // Col overall styling\n .col-date,\n .col-chain,\n .col-score,\n .col-missed,\n .col-total {\n @extend %truncate;\n }\n\n .col-date {\n width: 90px;\n @include for-size(tablet-landscape-up) {\n width: 200px;\n }\n @include for-size(desktop-up) {\n width: 300px;\n }\n @include for-size(big-desktop-up) {\n width: 390px;\n }\n\n .abbrev-date {\n @include for-size(tablet-landscape-up) {\n display: none;\n }\n }\n\n .full-date {\n display: none;\n @include for-size(tablet-landscape-up) {\n display: table-cell;\n }\n }\n }\n\n .col-chain {\n width: 55px;\n @include for-size(tablet-landscape-up) {\n width: 70px;\n }\n @include for-size(desktop-up) {\n width: 100px;\n }\n @include for-size(big-desktop-up) {\n width: 200px;\n }\n }\n\n .col-score {\n width: 55px;\n @include for-size(tablet-landscape-up) {\n width: 70px;\n }\n @include for-size(desktop-up) {\n width: 100px;\n }\n @include for-size(big-desktop-up) {\n width: 150px;\n }\n }\n\n .col-total {\n width: 55px;\n @include for-size(tablet-landscape-up) {\n width: 70px;\n }\n @include for-size(desktop-up) {\n width: 100px;\n }\n @include for-size(big-desktop-up) {\n width: 165px;\n }\n }\n\n .col-missed {\n width: 55px;\n @include for-size(tablet-landscape-up) {\n width: 70px;\n }\n @include for-size(desktop-up) {\n width: 100px;\n }\n @include for-size(big-desktop-up) {\n width: 165px;\n }\n }\n\n .td-missed {\n color: $orange-50;\n }\n}\n"
},
{
"path": "src/containers/Validators/index.tsx",
"content": "import { useContext, useEffect } from 'react'\nimport axios from 'axios'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { useWindowSize } from 'usehooks-ts'\nimport { Helmet } from 'react-helmet-async'\nimport NoMatch from '../NoMatch'\nimport { Loader } from '../shared/components/Loader'\nimport { Tabs } from '../shared/components/Tabs'\nimport { useAnalytics } from '../shared/analytics'\nimport {\n FETCH_INTERVAL_ERROR_MILLIS,\n FETCH_INTERVAL_VHS_MILLIS,\n NOT_FOUND,\n SERVER_ERROR,\n} from '../shared/utils'\nimport { getLedger } from '../../rippled'\nimport { SimpleTab } from './SimpleTab'\nimport { HistoryTab } from './HistoryTab'\nimport './validator.scss'\nimport SocketContext from '../shared/SocketContext'\nimport { ValidatorReport, ValidatorSupplemented } from '../shared/vhsTypes'\nimport NetworkContext from '../shared/NetworkContext'\nimport { VALIDATOR_ROUTE } from '../App/routes'\nimport { buildPath, useRouteParams } from '../shared/routing'\nimport { VotingTab } from './VotingTab'\nimport logger from '../../rippled/lib/logger'\n\nconst log = logger({ name: 'validator' })\n\nconst ERROR_MESSAGES = {\n [NOT_FOUND]: {\n title: 'validator_not_found',\n hints: ['check_validator_key'],\n },\n default: {\n title: 'generic_error',\n hints: ['not_your_fault'],\n },\n}\n\nconst getErrorMessage = (error: keyof typeof ERROR_MESSAGES | null) =>\n (error && ERROR_MESSAGES[error]) || ERROR_MESSAGES.default\n\nexport const Validator = () => {\n const rippledSocket = useContext(SocketContext)\n const network = useContext(NetworkContext)\n const { identifier = '', tab = 'details' } = useRouteParams(VALIDATOR_ROUTE)\n const { width } = useWindowSize()\n const { trackException, trackScreenLoaded } = useAnalytics()\n const { t } = useTranslation()\n\n const {\n data,\n error,\n isFetching: dataIsLoading,\n } = useQuery\n
\n \n
\n {t('base_fee')}
\n {renderXRP(validatorData.base_fee / XRP_BASE)}
\n \n
\n {t('account_reserve')}
\n {renderXRP(validatorData.reserve_base / XRP_BASE)}
\n \n
\n {t('object_reserve')}
\n {renderXRP(validatorData.reserve_inc / XRP_BASE)}
\n {t('amendments')}
\n \n {isLoading &&
\n \n
\n )}\n {t('no_amendment_in_voting')}
\n \n
\n )\n }\n\n function renderTabs() {\n const tabs = ['details', 'history', 'voting']\n const mainPath = buildPath(VALIDATOR_ROUTE, { identifier })\n return {name}
\n \n {subtitle}\n
\n {body}
\n \n )\n }\n\n const isLoading = dataIsLoading || reportIsLoading\n let body\n\n if (error) {\n const message = getErrorMessage(error)\n body = \n
\n )\n }\n\n return (\n Could not load validator
\n\n {renderPageTitle()}\n {isLoading &&
\n )\n}\n"
},
{
"path": "src/containers/Validators/simpleTab.scss",
"content": "@use '../shared/css/variables' as *;\n\n.simple-body-validator {\n .row {\n .unl {\n img {\n height: 16px;\n padding-top: 2px;\n }\n }\n }\n}\n"
},
{
"path": "src/containers/Validators/test/HistoryTab.test.tsx",
"content": "import { render } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { HistoryTab } from '../HistoryTab'\nimport history from './mock_data/history.json'\nimport i18n from '../../../i18n/testConfig'\nimport { ValidatorReport } from '../../shared/vhsTypes'\n\ndescribe(`HistoryTab:`, () => {\n const renderHistoryTab = (reports?: ValidatorReport[]) =>\n render(\n \n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultDepositors/api/depositors.ts",
"content": "import { getMPTHolders } from '../../../../rippled/lib/rippled'\nimport { XRPLHolder } from '../../../shared/components/HoldersTable/HoldersTable'\n\ninterface VaultHolderFromClio {\n account: string\n mpt_amount: string\n}\n\nexport interface VaultDepositorSummary {\n depositors: XRPLHolder[]\n totalDepositors: number\n}\n\n/**\n * Fetches all vault depositors and calculates their share values.\n *\n * @param rippledSocket - The rippled socket connection\n * @param shareMptId - The MPT ID for vault shares\n * @param totalSupply - Total supply of vault shares\n * @param assetsTotal - Total assets in the vault\n * @param tokenToUsdRate - Exchange rate from token to USD\n * @returns Summary with all depositors and total count\n */\nexport async function fetchAllVaultDepositors(\n rippledSocket: any,\n shareMptId: string,\n totalSupply: string | undefined,\n assetsTotal: string | undefined,\n tokenToUsdRate: number,\n): Promise\n onToggle('')}\n >\n {nativeCurrencyDisplay}\n \n \n \n {usdLoading ? '...' : USD}\n \n {usdLoading && renderTextTooltip('currency_toggle_loading')}\n {!usdLoading &&\n usdDisabled &&\n renderTextTooltip('currency_toggle_unavailable')}\n \n
\n {/* Only show tooltip if USD currency conversion data is available */}\n {!usdLoading && !usdDisabled && renderTextTooltip('currency_toggle')}\n \n
\n )\n }\n\n if (loading && !data) {\n return (\n {t('depositors')}
\n \n\n {t('depositors_fetch_error')}\n
\n \n
\n )\n }\n\n if (!data || data.depositors.length === 0) {\n return (\n {t('depositors')}
\n \n\n
\n )\n }\n\n // TODO: Test the visual appearance of this table after Clio API mpt_holders is implemented\n return (\n {t('depositors')}
\n \n\n {t('no_depositors_message')}\n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultDepositors/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n\n.vault-depositors-section {\n width: 100%;\n padding: 0 24px;\n margin-top: 48px;\n\n @include for-size(desktop-up) {\n padding: 0 64px;\n }\n\n .vault-depositors-title {\n margin: 0 0 16px;\n color: $white;\n font-size: 24px;\n @include bold;\n }\n\n .vault-depositors-divider {\n background: $black-70;\n }\n\n .no-depositors-message {\n padding: 32px;\n color: $black-40;\n text-align: center;\n }\n\n .depositors-error-message {\n padding: 32px;\n color: #ff6b6b;\n text-align: center;\n }\n}\n\n.depositor-table {\n width: 100%;\n border-collapse: collapse;\n\n thead {\n tr {\n border-bottom: 1px solid $black-70;\n }\n\n th {\n padding: 16px 12px;\n color: $black-40;\n font-size: 12px;\n font-weight: normal;\n letter-spacing: 0.5px;\n text-align: left;\n text-transform: uppercase;\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n }\n\n tbody {\n tr {\n border-bottom: 1px solid $black-80;\n\n &:hover {\n background: rgba($white, 0.02);\n }\n }\n\n td {\n padding: 16px 12px;\n color: $white;\n font-size: 14px;\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n }\n\n .rank-cell {\n width: 80px;\n color: $black-40;\n }\n\n .account-cell {\n min-width: 150px;\n\n a {\n color: $green;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .tokens-cell {\n min-width: 120px;\n }\n\n .percent-cell {\n min-width: 100px;\n }\n\n .value-cell {\n min-width: 100px;\n }\n}\n\n.pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n margin-top: 24px;\n gap: 16px;\n\n .pagination-btn {\n padding: 8px 16px;\n border: 1px solid $black-60;\n border-radius: 4px;\n background: transparent;\n color: $white;\n cursor: pointer;\n font-size: 14px;\n transition: all 0.2s;\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n }\n\n &:hover:not(:disabled) {\n border-color: $green;\n color: $green;\n }\n }\n\n .pagination-info {\n color: $white;\n font-size: 14px;\n }\n}\n"
},
{
"path": "src/containers/Vault/VaultDepositors/test/VaultDepositors.test.tsx",
"content": "import React from 'react'\nimport { render, screen, fireEvent, waitFor } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport { QueryClientProvider, QueryClient } from 'react-query'\nimport i18n from '../../../../i18n/testConfigEnglish'\nimport SocketContext from '../../../shared/SocketContext'\nimport { VaultDepositors } from '../index'\nimport { fetchAllVaultDepositors } from '../api/depositors'\nimport Mock = jest.Mock\n\njest.mock('../api/depositors', () => ({\n fetchAllVaultDepositors: jest.fn(),\n}))\n\njest.mock('../../../shared/analytics', () => ({\n useAnalytics: () => ({ trackException: jest.fn() }),\n}))\n\njest.mock('../../../shared/hooks/useTokenToUSDRate', () => ({\n useTokenToUSDRate: () => ({ rate: 1.5, isAvailable: true, isLoading: false }),\n}))\n\nconst mockedFetchAllDepositors = fetchAllVaultDepositors as Mock\nconst mockSocket = {} as any\n\nconst createQueryClient = () =>\n new QueryClient({\n defaultOptions: { queries: { retry: false, staleTime: 0, cacheTime: 0 } },\n })\n\nconst TestWrapper =\n (queryClient: QueryClient) =>\n ({ children }: { children: React.ReactNode }) => (\n {t('depositors')}
\n \n\n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultHeader/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n@use '../../shared/css/table';\n\n.vault-section {\n width: 100%;\n padding: 0 24px;\n\n @include for-size(desktop-up) {\n padding: 0 64px;\n }\n\n .vault-section-title {\n margin: 0 0 16px;\n color: $white;\n font-size: 24px;\n @include bold;\n }\n\n .vault-section-divider {\n margin-bottom: 24px;\n background: $black-70;\n }\n}\n\n.vault-details-container {\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n @include for-size(desktop-up) {\n flex-direction: row;\n gap: 80px;\n }\n\n .details-column {\n min-width: 0;\n flex: 1;\n\n .token-table {\n margin-top: 0;\n }\n }\n}\n\n// Override the MPT-page Metadata styles to fit inside a table row\n.vault-details-container .header-box.metadata-box {\n width: 100%;\n max-width: 100%;\n flex: initial;\n gap: 0;\n\n // Strip the outer wrapper — the JsonView container provides its own box\n .header-box-contents {\n padding: 0;\n border: none;\n }\n\n .metadata-json {\n overflow: visible;\n max-height: none;\n }\n\n .json-view-container {\n padding: 12px;\n border-radius: 6px;\n }\n\n .json-view {\n margin-bottom: 0;\n\n @include for-size(phone-only) {\n padding-top: 0;\n }\n }\n\n // Hide the Expand button — vault data is small enough to show fully\n .json-view-controls {\n display: none;\n }\n\n .metadata-string {\n padding: 0;\n font-size: 13px;\n }\n}\n\n.private-vault-toggle {\n display: inline-flex;\n gap: 8px;\n\n .toggle-pill {\n padding: 4px 16px;\n border: 1px solid $black-50;\n border-radius: 16px;\n color: $black-50;\n font-size: 12px;\n text-transform: uppercase;\n @include medium;\n\n &.active {\n border-color: $green;\n background: $green;\n color: $black;\n }\n }\n}\n"
},
{
"path": "src/containers/Vault/VaultHeader/test/VaultHeader.test.tsx",
"content": "/**\n * VaultHeader Component Unit Tests\n *\n * This test suite validates the VaultHeader component which displays\n * vault information including owner, assets, privacy settings, and\n * various financial metrics.\n *\n * Key concepts tested:\n * - Vault privacy flag (lsfVaultPrivate: 0x00010000)\n * - Asset types: XRP, IOU tokens, and MPTs (Multi-Purpose Tokens)\n * - Compact number formatting (K for thousands, M for millions)\n * - Hex-encoded Data field decoding\n * - Withdrawal policies from XLS-65d spec\n * - Vault credentials (DomainID from MPTokenIssuance)\n */\n\nimport { render, screen, waitFor, cleanup } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport { QueryClientProvider } from 'react-query'\nimport i18n from '../../../../i18n/testConfigEnglish'\nimport SocketContext from '../../../shared/SocketContext'\nimport { VaultHeader } from '../index'\nimport { queryClient } from '../../../shared/QueryClient'\nimport { getMPTIssuance } from '../../../../rippled/lib/rippled'\nimport Mock = jest.Mock\n\n// Mock the rippled library to control API responses\njest.mock('../../../../rippled/lib/rippled')\n\n// Mock the XRP to USD rate hook\nconst mockXRPToUSDRate = jest.fn()\njest.mock('../../../shared/hooks/useXRPToUSDRate', () => ({\n useXRPToUSDRate: () => mockXRPToUSDRate(),\n}))\n\n// Mock the token to USD rate hook\nconst mockTokenToUSDRate = jest.fn()\njest.mock('../../../shared/hooks/useTokenToUSDRate', () => ({\n useTokenToUSDRate: (token: any) => {\n const result = mockTokenToUSDRate(token)\n // Return object structure if mockTokenToUSDRate returns a number\n if (typeof result === 'number') {\n return { rate: result, isAvailable: result > 0, isLoading: false }\n }\n // Otherwise return the result as-is (for custom mock implementations)\n return result\n },\n}))\n\nconst mockedGetMPTIssuance = getMPTIssuance as Mock\n\n// Mock socket client - represents the WebSocket connection to rippled\nconst mockSocket = {} as any\n\n/**\n * TestWrapper Component\n *\n * Provides all necessary context providers for the VaultHeader component:\n * - I18nextProvider: Internationalization for translated text\n * - Router: React Router for link components\n * - SocketContext: WebSocket connection for rippled queries\n * - QueryClientProvider: React Query for data fetching/caching\n */\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n {t('vault')}
\n \n\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultLoans/BrokerLoansTable.tsx",
"content": "import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { LoanRow, LoanData } from './LoanRow'\nimport { LSF_LOAN_DEFAULT, LSF_LOAN_IMPAIRED } from './utils'\nimport { Pagination } from '../../shared/components/Pagination/Pagination'\nimport FilterIcon from '../../shared/images/filter.svg'\n\nconst ITEMS_PER_PAGE = 10\n\ntype LoanFilter = 'all' | 'default' | 'impaired'\n\ninterface AssetInfo {\n currency: string\n issuer?: string\n mpt_issuance_id?: string\n}\n\ninterface Props {\n loans: LoanData[] | undefined\n currency: string\n displayCurrency: string\n asset?: AssetInfo\n isCurrencySpecialSymbol?: boolean\n}\n\nexport const BrokerLoansTable = ({\n loans,\n currency,\n displayCurrency,\n asset,\n isCurrencySpecialSymbol = false,\n}: Props) => {\n const { t } = useTranslation()\n const [currentPage, setCurrentPage] = useState(1)\n const [filter, setFilter] = useState\n
\n\n \n {t('loan_broker_id')}\n
\n \n
\n \n
\n \n {t('total_debt')}\n \n {formatBrokerAmount(broker.DebtTotal, asset)}\n \n
\n \n {t('maximum_debt')}\n \n {formatBrokerAmount(broker.DebtMaximum, asset)}\n \n
\n \n
\n\n \n {t('management_fee')}\n \n {formatRate(broker.ManagementFeeRate)}\n \n
\n \n {t('first_loss_capital')}\n \n {formatBrokerAmount(broker.CoverAvailable, asset)}\n \n
\n \n {t('cover_rate_minimum')}\n \n {formatRate(broker.CoverRateMinimum)}\n \n
\n \n {t('cover_rate_liquidation')}\n \n {formatRate(broker.CoverRateLiquidation)}\n \n
\n \n
\n )}\n \n
\n )\n }\n\n // Filter loans based on selected filter\n const filteredLoans = loans.filter((loan) => {\n if (filter === 'all') return true\n if (filter === 'default') {\n // eslint-disable-next-line no-bitwise\n return (\n Number(loan.TotalValueOutstanding) > 0 &&\n (loan.Flags ?? 0) & LSF_LOAN_DEFAULT\n )\n }\n if (filter === 'impaired') {\n // eslint-disable-next-line no-bitwise\n return (\n Number(loan.TotalValueOutstanding) > 0 &&\n (loan.Flags ?? 0) & LSF_LOAN_IMPAIRED\n )\n }\n return true\n })\n\n // Handle filter change and reset pagination\n const handleFilterChange = (newFilter: LoanFilter) => {\n setFilter(newFilter)\n setCurrentPage(1)\n }\n\n // Pagination logic\n const startIndex = (currentPage - 1) * ITEMS_PER_PAGE\n const endIndex = startIndex + ITEMS_PER_PAGE\n const paginatedLoans = filteredLoans.slice(startIndex, endIndex)\n\n return (\n {t('no_loans_message')}
\n\n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultLoans/BrokerTabs.tsx",
"content": "interface LoanBrokerData {\n index: string\n Data?: string\n}\n\ninterface Props {\n brokers: LoanBrokerData[]\n selectedIndex: number\n onSelect: (index: number) => void\n loanCountMap: Record\n
\n\n \n handleFilterChange('all')}\n >\n {t('all_loans')}\n \n handleFilterChange('default')}\n >\n {t('loan_status_default')}\n \n handleFilterChange('impaired')}\n >\n {t('loan_status_impaired')}\n \n
\n \n
\n \n
\n\n {t('loan_id')}
\n {t('borrower')}
\n \n {t('amount_requested')}\n
\n {t('interest_rate')}
\n \n {t('outstanding_balance')}\n
\n {t('status')}
\n \n {paginatedLoans.map((loan) => (\n
\n\n \n {brokers.map((broker, index) => {\n const name = `Broker ${index + 1}`\n const loanCount = loanCountMap[broker.index] ?? 0\n const isSelected = index === selectedIndex\n return (\n onSelect(index)}\n >\n {name} ({loanCount})\n \n )\n })}\n
\n)\n"
},
{
"path": "src/containers/Vault/VaultLoans/LoanRow.tsx",
"content": "import { useContext, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery } from 'react-query'\nimport { Account } from '../../shared/components/Account'\nimport SocketContext from '../../shared/SocketContext'\nimport { useLanguage } from '../../shared/hooks'\nimport { useTokenToUSDRate } from '../../shared/hooks/useTokenToUSDRate'\nimport { parseAmount } from '../../shared/NumberFormattingUtils'\nimport { getLedgerEntry } from '../../../rippled/lib/rippled'\nimport {\n formatRate,\n formatPaymentInterval,\n formatLoanStatus,\n formatRippleDate,\n truncateId,\n} from './utils'\nimport ExpandIcon from '../../shared/images/down_arrow.svg'\nimport { getCurrencySymbol } from '../../shared/utils'\n\nexport interface LoanData {\n index: string\n Borrower: string\n LoanBrokerID: string\n TotalValueOutstanding: string\n InterestRate: number\n LateInterestRate: number\n CloseInterestRate: number\n LoanOriginationFee: string\n LoanServiceFee: string\n LatePaymentFee: string\n ClosePaymentFee: string\n OverpaymentFee: number\n PaymentInterval: number\n PaymentRemaining: number\n GracePeriod: number\n StartDate: number\n NextPaymentDueDate: number\n Flags: number\n PaymentTotal?: number\n PreviousTxnLgrSeq?: number\n PrincipalOutstanding?: string\n}\n\ninterface AssetInfo {\n currency: string\n issuer?: string\n mpt_issuance_id?: string\n}\n\ninterface Props {\n loan: LoanData\n currency: string\n displayCurrency: string\n asset?: AssetInfo\n isCurrencySpecialSymbol?: boolean\n}\n\nexport const LoanRow = ({\n loan,\n currency,\n displayCurrency,\n asset,\n isCurrencySpecialSymbol = false,\n}: Props) => {\n const { t } = useTranslation()\n const language = useLanguage()\n const rippledSocket = useContext(SocketContext)\n const { rate: tokenToUsdRate } = useTokenToUSDRate(asset)\n const [expanded, setExpanded] = useState(false)\n\n const { data: originalPrincipal, isLoading: isPrincipalLoading } = useQuery(\n ['originalPrincipal', loan.index],\n async () => {\n if (!loan.PreviousTxnLgrSeq) return loan.PrincipalOutstanding ?? null\n\n let lastSuccessful: any = null\n let currentSeq = loan.PreviousTxnLgrSeq\n const MAX_ITERATIONS = 100\n\n for (let i = 0; i < MAX_ITERATIONS; i += 1) {\n try {\n // eslint-disable-next-line no-await-in-loop\n const resp = await getLedgerEntry(\n rippledSocket,\n { index: loan.index },\n currentSeq - 1,\n )\n lastSuccessful = resp.node\n if (currentSeq === resp.node.PreviousTxnLgrSeq) break\n currentSeq = resp.node.PreviousTxnLgrSeq\n } catch {\n // entryNotFound means we've gone past creation — last success is the creation state\n break\n }\n }\n\n return (\n lastSuccessful?.PrincipalOutstanding ??\n loan.PrincipalOutstanding ??\n null\n )\n },\n {\n staleTime: Infinity,\n enabled: !!rippledSocket,\n },\n )\n\n const { status, colorClass } = formatLoanStatus(\n loan.Flags,\n loan.TotalValueOutstanding ?? 0,\n )\n\n const formatAmount = (amount: string | number): string => {\n const num = typeof amount === 'string' ? Number(amount) : amount\n if (Number.isNaN(num)) return String(amount)\n\n // Convert to USD if needed\n let displayNum = num\n if (displayCurrency === 'USD' && tokenToUsdRate > 0) {\n displayNum = num * tokenToUsdRate\n } else if (displayCurrency === 'USD' && tokenToUsdRate === 0) {\n return '--'\n }\n\n const prefix = displayCurrency === 'USD' ? '$' : ''\n if (isCurrencySpecialSymbol && displayCurrency !== 'USD')\n return `${getCurrencySymbol(currency)} ${parseAmount(displayNum, 1, language)}`\n return `${prefix}${parseAmount(displayNum, 1, language)} ${displayCurrency}`\n }\n\n const formatFee = (fee: string | number): string => {\n // this method is used with fields which have a soeDEFAULT configuration. If they are not specified, display 0.\n if (!fee) return '0'\n const num = typeof fee === 'string' ? Number(fee) : fee\n if (Number.isNaN(num)) return String(fee)\n if (num === 0) return '0'\n\n // Convert to USD if needed\n let displayNum = num\n if (displayCurrency === 'USD' && tokenToUsdRate > 0) {\n displayNum = num * tokenToUsdRate\n } else if (displayCurrency === 'USD' && tokenToUsdRate === 0) {\n return '--'\n }\n\n const prefix = displayCurrency === 'USD' ? '$' : ''\n if (isCurrencySpecialSymbol)\n return `${getCurrencySymbol(currency)} ${parseAmount(displayNum, 1, language)}`\n return `${prefix}${parseAmount(displayNum, 1, language)} ${displayCurrency}`\n }\n\n const formatGracePeriod = (seconds: number): string => {\n const days = Math.round(seconds / 86400)\n return `${days} Days`\n }\n\n return (\n \n setExpanded(!expanded)}\n aria-expanded={expanded}\n >\n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultLoans/index.tsx",
"content": "import { useContext, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useQuery, useQueries } from 'react-query'\nimport SocketContext from '../../shared/SocketContext'\nimport { getAccountObjects } from '../../../rippled/lib/rippled'\nimport { useAnalytics } from '../../shared/analytics'\nimport { Loader } from '../../shared/components/Loader'\nimport { BrokerTabs } from './BrokerTabs'\nimport { BrokerDetails } from './BrokerDetails'\nimport './styles.scss'\n\ninterface LoanBrokerData {\n index: string\n LedgerEntryType: string\n Account: string\n Owner: string\n VaultID: string\n Data?: string\n ManagementFeeRate?: number\n CoverAvailable?: string\n CoverRateMinimum?: number\n CoverRateLiquidation?: number\n DebtTotal?: string\n DebtMaximum?: string\n OwnerCount?: number\n}\n\ninterface AssetInfo {\n currency: string\n issuer?: string\n mpt_issuance_id?: string\n}\n\ninterface Props {\n vaultId: string\n vaultPseudoAccount: string\n displayCurrency: string\n asset?: AssetInfo\n mptTicker?: string\n}\n\nexport const VaultLoans = ({\n vaultId,\n vaultPseudoAccount,\n displayCurrency,\n asset,\n mptTicker,\n}: Props) => {\n const { t } = useTranslation()\n const { trackException } = useAnalytics()\n const rippledSocket = useContext(SocketContext)\n const [selectedBrokerIndex, setSelectedBrokerIndex] = useState(0)\n\n const { data: loanBrokers, isFetching: loading } = useQuery<\n LoanBrokerData[] | undefined\n >(\n ['getVaultLoanBrokers', vaultPseudoAccount],\n async () => {\n const allBrokers: LoanBrokerData[] = []\n let marker: string | undefined\n\n do {\n // eslint-disable-next-line no-await-in-loop\n const resp = await getAccountObjects(\n rippledSocket,\n vaultPseudoAccount,\n 'loan_broker',\n marker,\n )\n\n if (!resp?.account_objects) {\n break\n }\n\n const vaultBrokers = resp.account_objects.filter(\n (obj: LoanBrokerData) => obj.VaultID === vaultId,\n )\n allBrokers.push(...vaultBrokers)\n marker = resp.marker\n } while (marker)\n\n return allBrokers\n },\n {\n enabled: !!vaultPseudoAccount,\n onError: (e: any) => {\n trackException(\n `Error fetching Loan Brokers for account ${vaultPseudoAccount} --- ${JSON.stringify(e)}`,\n )\n },\n },\n )\n\n // Fetch loans for each broker - must be called before any early returns\n // This data is shared with BrokerDetails to avoid duplicate API calls\n // Paginates through all results using marker\n const brokerLoansQueries = useQueries(\n (loanBrokers ?? []).map((broker) => ({\n queryKey: ['getBrokerLoans', broker.Account, broker.index],\n queryFn: async () => {\n const allLoans: any[] = []\n let marker: string | undefined\n\n do {\n // eslint-disable-next-line no-await-in-loop\n const resp = await getAccountObjects(\n rippledSocket,\n broker.Account,\n 'loan',\n marker,\n )\n\n if (!resp?.account_objects) {\n break\n }\n\n const brokerLoans = resp.account_objects.filter(\n (obj: any) => obj.LoanBrokerID === broker.index,\n )\n allLoans.push(...brokerLoans)\n marker = resp.marker\n } while (marker)\n\n return { brokerId: broker.index, loans: allLoans }\n },\n enabled: !!broker.Account && !!broker.index,\n })),\n )\n\n // Build maps of broker ID to loans and loan counts\n const brokerLoansMap: Record\n
\n \n
\n \n {isPrincipalLoading\n ? '--'\n : formatAmount(originalPrincipal ?? loan.PrincipalOutstanding ?? 0)}\n
\n \n {formatRate(loan.InterestRate)}\n
\n \n {formatAmount(loan.TotalValueOutstanding ?? 0)}\n
\n \n \n {t(status)}\n
\n \n\n {expanded && (\n \n
\n )}\n \n
\n \n {t('next_due_date')}\n \n {formatRippleDate(loan.NextPaymentDueDate, language)}\n \n
\n \n {t('origination_date')}\n \n {formatRippleDate(loan.StartDate, language)}\n \n
\n \n {t('frequency')}\n \n {formatPaymentInterval(loan.PaymentInterval)}\n \n
\n \n {t('installments')}\n {loan.PaymentRemaining}\n
\n \n {t('grace_period')}\n \n {formatGracePeriod(loan.GracePeriod)}\n \n
\n \n
\n \n {t('loan_origination_fee')}\n \n {formatFee(loan.LoanOriginationFee)}\n \n
\n \n {t('loan_service_fee')}\n \n {formatFee(loan.LoanServiceFee)}\n \n
\n \n {t('late_interest_rate')}\n \n {formatRate(loan.LateInterestRate)}\n \n
\n \n {t('late_payment_fee')}\n \n {formatFee(loan.LatePaymentFee)}\n \n
\n \n {t('prepayment_fee')}\n \n {formatFee(loan.OverpaymentFee)}\n \n
\n \n
\n \n {t('full_payment_fee')}\n \n {formatFee(loan.ClosePaymentFee)}\n \n
\n \n
\n )\n }\n\n if (!loanBrokers || loanBrokers.length === 0) {\n return (\n {t('loans')}
\n \n\n
\n )\n }\n\n loanBrokers.sort(\n (a: LoanBrokerData, b: LoanBrokerData) =>\n loanCountMap[b.index] - loanCountMap[a.index],\n )\n\n const selectedBroker = loanBrokers[selectedBrokerIndex]\n\n return (\n {t('loans')}
\n \n\n {t('no_loan_brokers_message')}\n
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultLoans/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n\n.vault-loans-section {\n width: 100%;\n padding: 0 24px;\n margin-top: 48px;\n\n @include for-size(desktop-up) {\n padding: 0 64px;\n }\n\n .vault-loans-title {\n margin: 0 0 16px;\n color: $white;\n font-size: 24px;\n @include bold;\n }\n\n .vault-loans-divider {\n margin-bottom: 24px;\n background: $black-70;\n }\n}\n\n.broker-tabs {\n display: flex;\n flex-wrap: wrap;\n margin-bottom: 24px;\n gap: 12px;\n\n .broker-tab {\n padding: 10px 20px;\n border: 1px solid $black-60;\n border-radius: 24px;\n background: transparent;\n color: $white;\n cursor: pointer;\n font-size: 14px;\n transition:\n background-color 0.2s,\n border-color 0.2s;\n\n &:hover {\n border-color: $black-40;\n }\n\n &.selected {\n border-color: $green;\n background: $green;\n color: $black;\n @include bold;\n }\n }\n}\n\n.broker-details-card {\n padding: 24px;\n border-radius: 8px;\n background: $black-80;\n\n .broker-header {\n margin-bottom: 24px;\n\n .broker-label {\n display: block;\n margin-bottom: 4px;\n color: $black-40;\n font-size: 12px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .broker-name {\n margin: 0;\n color: $white;\n font-size: 20px;\n @include bold;\n }\n }\n\n .broker-metrics {\n display: grid;\n gap: 24px;\n grid-template-columns: repeat(2, 1fr);\n\n @include for-size(desktop-up) {\n grid-template-columns: repeat(4, 1fr);\n }\n\n .metric {\n .metric-label {\n display: block;\n margin-bottom: 8px;\n color: $black-40;\n font-size: 12px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .metric-value {\n color: $white;\n font-size: 16px;\n }\n }\n }\n\n .broker-top-row {\n display: grid;\n padding-bottom: 24px;\n border-bottom: 1px solid $black-70;\n margin-bottom: 24px;\n gap: 24px;\n grid-template-columns: 1fr;\n\n @include for-size(desktop-up) {\n grid-template-columns: repeat(4, 1fr);\n }\n\n .broker-id-section {\n @include for-size(desktop-up) {\n grid-column: span 2;\n }\n\n .broker-id-label {\n display: block;\n margin-bottom: 8px;\n color: $black-40;\n font-size: 12px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .broker-id-value {\n display: flex;\n align-items: center;\n color: $white;\n font-size: 16px;\n gap: 8px;\n word-break: break-all;\n }\n }\n\n .broker-debt-section {\n display: contents;\n\n .debt-metric {\n .metric-label {\n display: block;\n margin-bottom: 8px;\n color: $black-40;\n font-size: 12px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .metric-value {\n color: $white;\n font-size: 16px;\n }\n }\n }\n }\n\n // Default loan warning banner\n .broker-default-banner {\n display: flex;\n align-items: center;\n padding: 16px 20px;\n border-radius: 8px;\n margin-top: 24px;\n background: rgb(139 69 19 / 60%);\n gap: 12px;\n\n .warning-icon {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: #ffd700;\n }\n\n span {\n color: $white;\n font-size: 14px;\n }\n }\n}\n\n// Broker Loans Table Styles\n.broker-loans-table {\n padding-top: 24px;\n border-top: 1px solid $black-70;\n margin-top: 32px;\n overflow-x: auto;\n}\n\n// Loans Filter Bar\n.loans-filter-bar {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-bottom: 16px;\n gap: 12px;\n\n .filter-buttons {\n display: flex;\n gap: 8px;\n\n .filter-btn {\n padding: 6px 16px;\n border: 1px solid $black-60;\n border-radius: 16px;\n background: transparent;\n color: $white;\n cursor: pointer;\n font-size: 13px;\n transition:\n background-color 0.2s,\n border-color 0.2s;\n\n &:hover {\n border-color: $black-40;\n }\n\n &.active {\n border-color: $green;\n background: $green;\n color: $black;\n @include bold;\n }\n }\n\n .filter-indicator {\n display: flex;\n align-items: center;\n\n .filter-icon {\n width: 16px;\n height: 16px;\n fill: $black-40;\n }\n }\n }\n}\n\n.broker-loans-loading,\n.broker-loans-empty,\n.no-loan-brokers-message {\n padding: 32px;\n color: $black-40;\n text-align: center;\n}\n\n.loans-table-header {\n display: grid;\n min-width: 750px;\n padding: 16px 8px;\n border-bottom: 1px solid $black-70;\n gap: 16px;\n grid-template-columns: 1.5fr 1.2fr 1.5fr 1fr 1.5fr 0.8fr;\n\n .header-cell {\n color: $black-40;\n font-size: 14px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n}\n\n.loans-table-body {\n .loan-row {\n border-bottom: 1px solid $black-70;\n\n &:last-child {\n border-bottom: none;\n }\n\n &.expanded {\n background: rgba($black-70, 0.3);\n }\n }\n}\n\n.loan-row-main {\n display: grid;\n width: 100%;\n min-width: 750px;\n padding: 16px 8px;\n border: none;\n background: transparent;\n cursor: pointer;\n gap: 16px;\n grid-template-columns: 1.5fr 1.2fr 1.5fr 1fr 1.5fr 0.8fr;\n text-align: left;\n transition: background-color 0.2s;\n\n &:hover {\n background: rgba($black-70, 0.5);\n }\n\n .loan-cell {\n display: flex;\n align-items: center;\n color: $white;\n font-size: 14px;\n\n &.loan-id {\n gap: 8px;\n\n .expand-icon {\n width: 12px;\n height: 12px;\n fill: $black-40;\n transition: transform 0.2s;\n\n &.rotated {\n transform: rotate(180deg);\n }\n }\n\n .loan-id-text {\n color: $white;\n }\n }\n\n &.borrower {\n .account {\n color: $green;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n &.status {\n gap: 8px;\n\n .status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n &.status-current {\n color: $green;\n\n .status-dot {\n background: $green;\n }\n }\n\n &.status-default {\n color: #ff6b6b;\n\n .status-dot {\n background: #ff6b6b;\n }\n }\n\n &.status-impaired {\n color: #ffa500;\n\n .status-dot {\n background: #ffa500;\n }\n }\n\n &.status-paid-off {\n color: $black-40;\n\n .status-dot {\n background: $black-40;\n }\n }\n }\n }\n}\n\n.loan-row-details {\n padding: 16px 32px 24px;\n background: rgba($black-70, 0.5);\n\n .details-row {\n display: grid;\n margin-bottom: 16px;\n gap: 16px 24px;\n grid-template-columns: repeat(2, 1fr);\n\n @include for-size(desktop-up) {\n grid-template-columns: repeat(5, 1fr);\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .detail-item {\n .detail-label {\n display: block;\n margin-bottom: 4px;\n color: $black-40;\n font-size: 11px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .detail-value {\n color: $white;\n font-size: 14px;\n }\n }\n}\n\n// Pagination Styles\n.loans-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px 0;\n gap: 4px;\n\n .pagination-btn {\n min-width: 32px;\n height: 32px;\n padding: 0 8px;\n border: 1px solid $black-60;\n border-radius: 4px;\n background: transparent;\n color: $white;\n cursor: pointer;\n font-size: 14px;\n transition:\n background-color 0.2s,\n border-color 0.2s;\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &:hover:not(:disabled) {\n border-color: $black-40;\n background: $black-70;\n }\n\n &.active {\n border-color: $green;\n background: $green;\n color: $black;\n @include bold;\n }\n\n &.prev,\n &.next,\n &.last {\n font-weight: bold;\n }\n }\n\n .pagination-ellipsis {\n padding: 0 8px;\n color: $black-40;\n }\n}\n"
},
{
"path": "src/containers/Vault/VaultLoans/test/BrokerLoansTable.test.tsx",
"content": "/**\n * BrokerLoansTable Component Unit Tests\n *\n * This test suite validates the BrokerLoansTable component which displays\n * a filterable, paginated table of loans for a loan broker.\n *\n * Key concepts tested:\n * - Empty state when no loans exist\n * - Filter functionality (All Loans, Default, Impaired)\n * - Table header rendering\n * - Pagination controls and navigation\n * - Filter + pagination interaction (page reset on filter change)\n * - Loan row rendering\n */\n\nimport { render, screen, fireEvent, waitFor } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport { QueryClientProvider, QueryClient } from 'react-query'\nimport i18n from '../../../../i18n/testConfigEnglish'\nimport SocketContext from '../../../shared/SocketContext'\nimport { BrokerLoansTable } from '../BrokerLoansTable'\nimport { LoanData } from '../LoanRow'\nimport { getLedgerEntry } from '../../../../rippled/lib/rippled'\nimport { LSF_LOAN_DEFAULT, LSF_LOAN_IMPAIRED } from '../utils'\nimport { isCurrencyExoticSymbol } from '../../../shared/utils'\nimport Mock = jest.Mock\n\njest.mock('../../../../rippled/lib/rippled', () => ({\n getLedgerEntry: jest.fn(),\n}))\n\njest.mock('../../../shared/hooks/useTokenToUSDRate', () => ({\n useTokenToUSDRate: () => ({ rate: 1.5, isAvailable: true, isLoading: false }),\n}))\n\nconst mockedGetLedgerEntry = getLedgerEntry as Mock\nconst mockSocket = {} as any\n\n// Default test props\nconst defaultDisplayCurrency = 'XRP'\nconst defaultAsset = { currency: 'XRP' }\n\n/**\n * Creates a fresh QueryClient for each test\n */\nconst createTestQueryClient = () =>\n new QueryClient({\n defaultOptions: {\n queries: {\n retry: false,\n staleTime: 0,\n cacheTime: 0,\n },\n },\n })\n\n/**\n * TestWrapper Component\n *\n * BrokerLoansTable needs:\n * - I18nextProvider: For translated text (filter buttons, headers, empty message)\n * - Router: For Account links in LoanRow\n * - QueryClientProvider: For useTokenToUSDRate hook in LoanRow\n */\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => {\n const queryClient = createTestQueryClient()\n return (\n {t('loans')}
\n \n\n fetchNextPage()}\n hasAdditionalResults={hasNextPage}\n hasHashColumn\n />\n
\n )\n}\n"
},
{
"path": "src/containers/Vault/VaultTransactions/styles.scss",
"content": "@use '../../shared/css/variables' as *;\n\n.vault-transactions-section {\n width: 100%;\n padding: 0 24px;\n margin-top: 48px;\n\n @include for-size(desktop-up) {\n padding: 0 64px;\n }\n\n .vault-transactions-title {\n margin: 0 0 16px;\n color: $white;\n font-size: 24px;\n @include bold;\n }\n\n .vault-transactions-divider {\n background: $black-70;\n }\n\n .transaction-table {\n overflow-x: auto;\n }\n}\n"
},
{
"path": "src/containers/Vault/VaultTransactions/test/VaultTransactions.test.tsx",
"content": "/**\n * VaultTransactions Component Unit Tests\n *\n * This test suite validates the VaultTransactions component which displays\n * a paginated list of transactions for a vault's pseudo account.\n *\n * Key concepts tested:\n * - Basic rendering (section title, table headers)\n * - Loading state with Loader component\n * - Empty state when no transactions exist\n * - Transaction list display with proper columns\n * - Error handling and error message display\n * - Pagination via \"Load More\" button\n * - Infinite query behavior for fetching transaction pages\n */\n\nimport { render, screen, waitFor, fireEvent } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport { QueryClientProvider, QueryClient } from 'react-query'\nimport i18n from '../../../../i18n/testConfigEnglish'\nimport SocketContext from '../../../shared/SocketContext'\nimport { VaultTransactions } from '../index'\nimport { getAccountTransactions } from '../../../../rippled'\nimport Mock = jest.Mock\n\n// Mock the rippled library to control API responses\njest.mock('../../../../rippled', () => ({\n getAccountTransactions: jest.fn(),\n}))\n\n// Mock the analytics hook (used by LoadMoreButton and VaultTransactions)\nconst mockTrackException = jest.fn()\nconst mockTrack = jest.fn()\njest.mock('../../../shared/analytics', () => ({\n useAnalytics: () => ({\n trackException: mockTrackException,\n track: mockTrack,\n }),\n}))\n\nconst mockedGetAccountTransactions = getAccountTransactions as Mock\n\n// Mock socket client - represents the WebSocket connection to rippled\nconst mockSocket = {} as any\n\n/**\n * Creates a fresh QueryClient for each test\n *\n * We disable retries and set stale time to 0 to make tests predictable.\n * Each test gets its own QueryClient to prevent state leakage between tests.\n */\nconst createTestQueryClient = () =>\n new QueryClient({\n defaultOptions: {\n queries: {\n retry: false,\n staleTime: 0,\n cacheTime: 0,\n },\n },\n })\n\n/**\n * TestWrapper Component\n *\n * Provides all necessary context providers for the VaultTransactions component:\n * - I18nextProvider: Internationalization for translated text\n * - Router: React Router for link components (transaction links)\n * - SocketContext: WebSocket connection for rippled queries\n * - QueryClientProvider: React Query for data fetching/caching\n */\nconst createTestWrapper =\n (queryClient: QueryClient) =>\n ({ children }: { children: React.ReactNode }) => (\n {t('transactions')}
\n \n\n
\n)\n\nexport const Vault = () => {\n const { t } = useTranslation()\n const { trackScreenLoaded, trackException } = useAnalytics()\n const { id: vaultId = '' } = useParams<{ id: string }>()\n const [error, setError] = useState\n
\n )\n }\n\n if (error) {\n return \n setDisplayCurrency(val || nativeCurrency)}\n usdDisabled={!usdAvailable}\n usdLoading={usdLoading}\n />\n
\n \n
\n \n {parseVaultName(vaultData.Data) || t('single_asset_vault')}\n
\n\n {t('vault_id')}:\n
\n \n
\n ),\n}))\n\n// Mock useTokenToUSDRate hook\njest.mock('../../shared/hooks/useTokenToUSDRate', () => ({\n useTokenToUSDRate: () => ({ rate: 2.0, isAvailable: true, isLoading: false }),\n}))\n\n// Mock child components to avoid testing their internals\njest.mock('../VaultHeader', () => ({\n VaultHeader: ({ vaultId }: { vaultId: string }) => (\n {title}
\n {hints?.map((hint) => (\n {hint}
\n ))}\n VaultHeader: {vaultId}
\n ),\n}))\n\njest.mock('../VaultLoans', () => ({\n VaultLoans: ({ vaultId, vaultPseudoAccount, asset }: any) => {\n // Mock mirrors VaultLoans currency derivation logic\n const NON_STANDARD_CODE_LENGTH = 40\n const LP_TOKEN_IDENTIFIER = '03'\n const hexToString = (hex: string) => {\n let s = ''\n for (let i = 0; i < hex.length; i += 2) {\n const code = parseInt(hex.substring(i, i + 2), 16)\n if (!isNaN(code) && code !== 0) s += String.fromCharCode(code)\n }\n return s\n }\n let currency = ''\n if (asset?.currency) {\n if (\n asset.currency.length === NON_STANDARD_CODE_LENGTH &&\n asset.currency.substring(0, 2) !== LP_TOKEN_IDENTIFIER\n ) {\n currency = hexToString(asset.currency)\n } else {\n currency = asset.currency\n }\n } else if (asset?.mpt_issuance_id) {\n currency = 'MPT'\n }\n return (\n \n VaultLoans: {vaultId} | {vaultPseudoAccount} | {currency}\n
\n )\n },\n}))\n\njest.mock('../VaultTransactions', () => ({\n VaultTransactions: ({ accountId }: { accountId: string }) => (\n VaultTransactions: {accountId}
\n ),\n}))\n\njest.mock('../VaultDepositors', () => ({\n VaultDepositors: ({ shareMptId }: { shareMptId: string }) => (\n VaultDepositors: {shareMptId}
\n ),\n}))\n\nconst mockedGetVault = getVault as Mock\nconst mockSocket = {\n getState: jest.fn().mockReturnValue('connected'),\n} as any\n\nconst createTestQueryClient = () =>\n new QueryClient({\n defaultOptions: {\n queries: {\n retry: false,\n staleTime: 0,\n cacheTime: 0,\n },\n },\n })\n\n/**\n * TestWrapper with route parameter support\n *\n * Uses MemoryRouter to simulate URL with vault ID parameter.\n * HelmetProvider is needed for the Helmet component.\n */\nconst createTestWrapper = (queryClient: QueryClient, vaultId: string = '') => {\n const initialEntries = vaultId ? [`/vault/${vaultId}`] : ['/vault/']\n\n return ({ children }: { children: React.ReactNode }) => (\n \n
\n )\n}\n"
},
{
"path": "src/containers/Vaults/api.ts",
"content": "import axios from 'axios'\nimport type {\n VaultData,\n VaultsMetrics,\n VaultsListResponse,\n AssetPricesResponse,\n} from './types'\n\n// Maps frontend sort field names to API sort_by param values\nconst SORT_FIELD_MAP: Record\n \n \n
\n
\n | # | \n{t('vaults_table_vault_id')} | \n{t('name')} | \n{t('vaults_table_asset')} | \n{t('vaults_table_website')} | \n
|---|---|---|---|---|
| \n {t('vaults_no_results')}\n | \n
\n
\n )\n }\n\n return (\n {t('vaults')}
\n \n
\n )\n}\n"
},
{
"path": "src/containers/Vaults/test/api/vaults.test.ts",
"content": "import axios from 'axios'\nimport {\n fetchVaultsList,\n fetchVaultsAggregateStats,\n fetchVaultAssetPrices,\n} from '../../api'\n\njest.mock('axios')\n\ndescribe('Vaults API', () => {\n const mockAxios = axios as jest.Mocked{t('vaults')}
\n {metrics && (\n \n
\n )}\n \n
\n \n {t('vaults_tvl')}\n {renderTextTooltip('vaults_tvl')}\n
\n \n {parseCurrencyAmount(metrics.tvl_total * xrpToUSDRate)}\n
\n \n
\n \n {t('vaults_outstanding_loans')}\n {renderTextTooltip('vaults_outstanding_loans')}\n
\n \n {parseCurrencyAmount(metrics.debt_total * xrpToUSDRate)}\n
\n \n
\n \n {t('vaults_loans_originated')}\n {renderTextTooltip('vaults_loans_originated')}\n
\n \n {parseCurrencyAmount(metrics.loans_originated * xrpToUSDRate)}\n
\n \n
\n \n {t('vaults_avg_interest_rate')}\n {renderTextTooltip('vaults_avg_interest_rate')}\n
\n {metrics.avg_interest_rate.toFixed(2)}%
\n \n
\n \n {t('vaults_num_vaults')}\n {renderTextTooltip('vaults_num_vaults')}\n
\n {metrics.active_vaults.toLocaleString()}
\n \n
\n \n {t('vaults_utilization_ratio')}\n {renderTextTooltip('vaults_utilization_ratio')}\n
\n \n {(metrics.utilization_ratio * 100).toFixed(1)}%\n
\n \n
\n \n \n {filterCategories.map((cat) => (\n handleFilterClick(cat.key)}\n type=\"button\"\n >\n
\n {cat.label}
\n \n ))}\n \n refetchVaults()}\n title={t('refresh_data')}\n >\n ↻\n \n
\n \n \n setSearchQuery(e.target.value)}\n />\n {searchQuery && (\n setSearchQuery('')}\n >\n ✕\n \n )}\n
\n \n {tableLoading && (\n
\n \n
\n )}\n \n \n {/* eslint-disable-next-line jsx-a11y/anchor-has-content,jsx-a11y/control-has-associated-label */}\n \n XRPL Meta\n \n \n
\n \n \n {leftLabel}\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n \n {rightLabel}\n \n
\n )\n}\n"
},
{
"path": "src/containers/shared/components/CurrencySwitch/index.ts",
"content": "export { CurrencySwitch } from './CurrencySwitch'\n"
},
{
"path": "src/containers/shared/components/CurrencySwitch/styles.scss",
"content": "@use '../../css/variables' as *;\n\n.currency-switch {\n display: flex;\n align-items: center;\n gap: 8px;\n\n @include for-size(tablet-portrait-up) {\n gap: 12px;\n }\n\n .currency-label {\n color: $black-40;\n font-size: 14px;\n @include medium;\n\n @include for-size(tablet-portrait-up) {\n font-size: 16px;\n }\n\n &.active {\n color: $white;\n @include bold;\n }\n }\n\n .toggle-switch {\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n cursor: pointer;\n\n @include for-size(desktop-up) {\n width: 40px;\n height: 24px;\n }\n\n input {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n }\n\n .toggle-slider {\n position: absolute;\n border-radius: 24px;\n background-color: $blue;\n inset: 0;\n transition: background-color 0.2s;\n\n &::before {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background-color: $white;\n content: '';\n transition: transform 0.2s;\n\n @include for-size(desktop-up) {\n width: 18px;\n height: 18px;\n }\n }\n }\n\n input:checked + .toggle-slider::before {\n transform: translateX(16px);\n }\n }\n}\n"
},
{
"path": "src/containers/shared/components/CurrencySwitch/test/CurrencySwitch.test.tsx",
"content": "import { render, screen } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\nimport { CurrencySwitch } from '../CurrencySwitch'\n\ndescribe('CurrencySwitch', () => {\n it('renders both labels', () => {\n render(\n \n {isLoading &&
\n )\n}\n"
},
{
"path": "src/containers/shared/components/DexTradeTable/formatDexTrade.ts",
"content": "import { DexTradeFormatted } from './DexTradeTable'\n\n/** Raw DEX trade as returned by LOS /dex-trades API */\nexport interface LOSDexTradeRaw {\n tx_hash: string\n ledger_index: number\n timestamp: number\n from: string\n to: string\n type?: string\n subtype?: string\n amount_in: { currency: string; issuer?: string; value: string }\n amount_out: { currency: string; issuer?: string; value: string }\n}\n\n/** Transform a raw LOS dex trade into the format consumed by DexTradeTable. */\nexport const formatDexTrade = (trade: LOSDexTradeRaw): DexTradeFormatted => ({\n hash: trade.tx_hash,\n ledger: trade.ledger_index,\n timestamp: trade.timestamp,\n from: trade.from,\n to: trade.to,\n type: trade.type,\n subtype: trade.subtype,\n amount_in: {\n currency: trade.amount_in.currency,\n issuer: trade.amount_in.issuer,\n amount: Number(trade.amount_in.value),\n },\n amount_out: {\n currency: trade.amount_out.currency,\n issuer: trade.amount_out.issuer,\n amount: Number(trade.amount_out.value),\n },\n rate:\n trade.amount_in && Number(trade.amount_in.value) !== 0\n ? Number(trade.amount_out.value) / Number(trade.amount_in.value)\n : null,\n})\n"
},
{
"path": "src/containers/shared/components/DexTradeTable/styles.scss",
"content": "@use '../../css/variables' as *;\n@use '../../css/table';\n@use '../../css/data-tables-notice';\n\n// =============================================================================\n// DEX TRADE TABLE - Component-specific styles\n// =============================================================================\n\n.text-truncate {\n @extend %truncate;\n}\n\n// Add spacing between action and timestamp columns\n.tx-action {\n padding-right: 16px;\n\n @include for-size(phone-only) {\n padding-right: 12px;\n }\n}\n\n// Scoped styles for dex trade table to prevent conflicts with other tables\n.tokens-table {\n // Custom tooltip styling for dex trade table\n .tooltip.tooltip-text {\n z-index: 9999;\n max-width: calc(100vw - 32px);\n margin: 0 16px;\n }\n\n table.basic {\n // Fix column widths for dex trade table to prevent wrapping and ensure consistent spacing\n .tx-hash {\n width: 100px;\n min-width: 100px;\n }\n\n th:nth-child(2),\n .tx-ledger {\n width: 80px;\n min-width: 80px;\n padding: 15px 5px;\n\n @include for-size(desktop-up) {\n padding: 15px 5px !important;\n }\n }\n\n .tx-timestamp {\n width: 200px;\n min-width: 200px;\n padding: 15px 5px;\n\n @include for-size(tablet-portrait-up) {\n padding: 15px 5px 15px 0px;\n }\n }\n\n .tx-type {\n width: 100px;\n min-width: 100px;\n }\n\n .tx-from,\n .tx-to {\n width: 140px;\n min-width: 140px;\n }\n\n .tx-amount-in,\n .tx-amount-out {\n width: 140px;\n min-width: 140px;\n }\n\n .tx-amount-rate {\n width: 165px;\n min-width: 165px;\n }\n }\n}\n"
},
{
"path": "src/containers/shared/components/DexTradeTable/test/DexTradeTable.test.tsx",
"content": "import { render, screen, fireEvent } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport i18n from '../../../../../i18n/testConfigEnglish'\nimport { DexTradeTable, DexTradeFormatted } from '../DexTradeTable'\n\n// Amount must be mocked — it uses useQuery(), SocketContext, and useAnalytics()\njest.mock('../../Amount', () => ({\n Amount: ({ value }: any) => \n \n ↻\n \n
\n {t('data_available_from_notice')}
\n \n \n \n \n {t('tx_hash')} \n {t('ledger')} \n \n \n {t('timestamp')}\n {sortField === 'timestamp' && (\n {t('token_page.dex_type')} \n )}\n {t('from')} \n {t('to')} \n \n \n {t('amount_in')}\n {renderTextTooltip(t('token_page.dex_amount_in_tooltip'))}\n \n \n \n \n {t('amount_out')}\n {renderTextTooltip(\n t('token_page.dex_amount_out_tooltip'),\n )}\n \n \n \n \n {t('rate')}\n {renderTextTooltip(t('token_page.dex_rate_tooltip'))}\n \n \n \n \n \n {transactions.map((tx, idx) => renderTransaction(tx, idx))}\n \n \n
\n\n {(hasMore || hasPrevPage) && (\n {value.amount}
,\n}))\n\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n {title}
{' '}\n \n \n \n \n
,\n )\n const dropdown = container.querySelector('.dropdown')\n expect(dropdown).not.toHaveClass('dropdown-expanded')\n await userEvent.click(screen.getByRole('button', { name: /woo/i }))\n expect(dropdown).toHaveClass('dropdown-expanded')\n await userEvent.click(screen.getByText('Menu Contents'))\n expect(dropdown).toHaveClass('dropdown-expanded')\n await userEvent.click(screen.getByRole('button', { name: /outside/i }))\n expect(dropdown).not.toHaveClass('dropdown-expanded')\n })\n\n it('adds aria roles', async () => {\n const { container } = render(Menu Contents
\n \n
\n)\n"
},
{
"path": "src/containers/shared/components/EmptyStateMessage/tests/index.test.tsx",
"content": "import { render } from '@testing-library/react'\nimport { EmptyStateMessage } from '../index'\n\ndescribe('EmptyStateMessage', () => {\n it('renders correctly with message', () => {\n const testMessage = 'No data available'\n const { container } = render({message}
\n \n
\n )\n}\n"
},
{
"path": "src/containers/shared/components/HoldersTable/styles.scss",
"content": "@use '../../css/variables' as *;\n@use '../../css/table';\n\n// Fix column widths for holders table\n.holder-rank {\n width: 60px;\n min-width: 60px;\n}\n\n.tx-hash {\n width: 140px;\n min-width: 140px;\n}\n\n.tx-ledger {\n width: 120px;\n min-width: 120px;\n}\n\n.tx-percent-supply {\n width: 110px;\n min-width: 110px;\n}\n\n.tx-value {\n width: 120px;\n min-width: 120px;\n}\n"
},
{
"path": "src/containers/shared/components/HoldersTable/test/HoldersTable.test.tsx",
"content": "import { render, screen, fireEvent } from '@testing-library/react'\nimport { I18nextProvider } from 'react-i18next'\nimport { BrowserRouter as Router } from 'react-router'\nimport i18n from '../../../../../i18n/testConfigEnglish'\nimport { HoldersTable, XRPLHolder } from '../HoldersTable'\n\nconst TestWrapper = ({ children }: { children: React.ReactNode }) => (\n \n \n \n
\n
\n {!isHoldersDataLoading && totalHolders > pageSize && (\n | {t('token_page.holders_rank')} | \n{t('account')} | \n\n {t('token_page.holders_num_tokens')}\n | \n\n {t('token_page.holders_percent_supply')}\n | \n{t('token_page.holders_usd_value')} | \n
|---|---|---|---|---|
| \n \n \n | \n
\n \n
\n )}\n \n 
\n
\n )\n}\n"
},
{
"path": "src/containers/shared/components/MPTokenLink.tsx",
"content": "import { RouteLink } from '../routing'\nimport { MPT_ROUTE } from '../../App/routes'\n\nexport interface MPTokenLinkProps {\n tokenID: string\n}\n\nexport const MPTokenLink = ({ tokenID }: MPTokenLinkProps) => (\n \n {message}\n {action}\n
\n ) : null\n}\n"
},
{
"path": "src/containers/shared/components/Notification/styles.scss",
"content": "@use '../../css/variables' as *;\n\n.notification {\n border: 1px solid;\n border-radius: 4px;\n margin: 12px 0;\n background: $blue;\n color: $white;\n font-size: 14px;\n line-height: 22px;\n text-align: center;\n @include bold;\n\n span {\n padding: 0 22px;\n }\n\n &.primary-theme {\n color: $white;\n\n &.default {\n border-color: $blue;\n background: $blue;\n }\n\n &.success {\n border-color: $green;\n background: $green;\n }\n\n &.warning {\n border-color: $orange;\n background: $orange;\n }\n\n &.danger {\n border-color: $red;\n background: $red-dark;\n }\n\n &.dark {\n border-color: $black-100;\n background: $black-100;\n }\n\n &.dark50 {\n border-color: $black-50;\n background: $black-50;\n }\n\n &.light {\n border-color: $white;\n background: $white;\n color: $black-100;\n }\n }\n}\n"
},
{
"path": "src/containers/shared/components/Notification/tests/index.test.tsx",
"content": "import { render } from '@testing-library/react'\nimport { Notification } from '../index'\n\n/* eslint-disable react/jsx-props-no-spreading */\nconst VALID_USAGES = [\n 'default',\n 'success',\n 'warning',\n 'danger',\n 'dark',\n 'light',\n 'dark50',\n]\nconst notificationLevels = ['primary', 'secondary', 'ghost']\nconst message = 'A catchy message'\nconst renderComponent = (props) => render(\n {tableStructure(paginatedData)}\n {pagination}\n
\n )\n}\n"
},
{
"path": "src/containers/shared/components/PaginatedTable/styles.scss",
"content": "@use '../../css/variables' as *;\n\n.table-pagination {\n position: relative;\n z-index: 5;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 12px 0 0;\n gap: 3px;\n}\n\n/* Page numbers + chevrons */\n.table-pg-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: $black-50;\n cursor: pointer;\n font-size: 14px;\n}\n\n.table-pg-btn:hover {\n background: rgb(255 255 255 / 3%);\n color: $black-0;\n}\n\n.table-pg-btn.is-active {\n background: rgb(22 163 74 / 6%);\n color: $green-30;\n}\n\n/* Larger green chevrons for first/prev/next/last */\n.table-pg-btn[aria-label='First page'],\n.table-pg-btn[aria-label='Previous page'],\n.table-pg-btn[aria-label='Next page'],\n.table-pg-btn[aria-label='Last page'] {\n padding: 0 5px;\n color: $green-30;\n font-size: 25px;\n}\n\n/* Disabled state */\n.table-pg-btn:disabled {\n background: transparent;\n color: $black-50;\n cursor: not-allowed;\n opacity: 0.35;\n}\n\n/* Ellipsis */\n.table-pg-ellipsis {\n padding: 0 6px;\n color: $black-50;\n font-size: 15px;\n}\n"
},
{
"path": "src/containers/shared/components/PaginatedTable/test/PaginatedTable.test.tsx",
"content": "import { render, screen, fireEvent } from '@testing-library/react'\nimport { PaginatedTable } from '../index'\n\ndescribe('PaginatedTable', () => {\n const mockTableStructure = (data: any[]) => (\n | {item.name} | \n
\n {desktopFormat}\n {mobileFormat}\n
\n )\n}\n"
},
{
"path": "src/containers/shared/components/ResponsiveTimestamp/index.ts",
"content": "export { ResponsiveTimestamp } from './ResponsiveTimestamp'\n"
},
{
"path": "src/containers/shared/components/ResponsiveTimestamp/styles.scss",
"content": "@use '../../css/variables' as *;\n\n.responsive-timestamp {\n .desktop-timestamp {\n display: inline;\n\n @include for-size(phone-only) {\n display: none;\n }\n }\n\n .mobile-timestamp {\n display: none;\n\n @include for-size(phone-only) {\n display: inline;\n }\n }\n}\n"
},
{
"path": "src/containers/shared/components/Sequence.tsx",
"content": "import { useTranslation } from 'react-i18next'\nimport { FC } from 'react'\nimport { ACCOUNT_ZERO } from '../transactionUtils'\n\ninterface SequenceProps {\n addContextHelp?: boolean\n sequence?: number\n ticketSequence?: number\n account?: string\n isHook?: boolean\n}\n\nexport const Sequence: FC\n \n {entry.name}: {formatTooltipValue(entry.value ?? 0)}\n \n ))}\n
\n )\n }\n return null\n }\n\n const chartData = data\n\n const leftAxis: AxisConfig = {\n dataKey: 'tvl',\n label: 'TVL',\n color: TVL_COLOR,\n formatter: (value: number) => formatCurrencyTick(value, displayCurrency),\n show: showTVL,\n }\n\n const rightAxis: AxisConfig = {\n dataKey: 'volume',\n label: 'Volume',\n color: VOLUME_COLOR,\n formatter: (value: number) => formatCurrencyTick(value, displayCurrency),\n show: showVolume,\n }\n\n return (\n {formattedDate}
\n {payload.map((entry) => (\n\n
\n \n )\n}\n"
},
{
"path": "src/containers/shared/components/TVLVolumeChart/index.ts",
"content": "export { TVLVolumeChart } from './TVLVolumeChart'\n"
},
{
"path": "src/containers/shared/components/TVLVolumeChart/styles.scss",
"content": "@use '../../css/variables' as *;\n\n$tvl-color: #32e685;\n$volume-color: #7919ff;\n\n.tvl-volume-section {\n margin-bottom: 50px;\n\n .chart-section-title {\n padding-bottom: 0;\n border-bottom: none;\n margin: 0 0 16px;\n color: $white;\n font-size: 16px;\n @include bold;\n\n @include for-size(tablet-portrait-up) {\n margin: 0 0 20px;\n font-size: 18px;\n }\n\n @include for-size(desktop-up) {\n font-size: 20px;\n }\n }\n\n // ── Controls row: toggle + checkboxes ──\n .controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-bottom: 12px;\n gap: 16px;\n\n @include for-size(tablet-portrait-up) {\n margin-bottom: 16px;\n gap: 24px;\n }\n\n @include for-size(desktop-up) {\n gap: 42px;\n }\n }\n\n .filter-checkbox {\n display: flex;\n align-items: center;\n color: $white;\n cursor: pointer;\n font-size: 14px;\n gap: 8px;\n @include medium;\n\n @include for-size(tablet-portrait-up) {\n font-size: 16px;\n gap: 12px;\n }\n\n input[type='checkbox'] {\n display: none;\n }\n\n .checkbox-custom {\n position: relative;\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid $green-60;\n border-radius: 4px;\n background-color: transparent;\n transition: all 0.2s;\n\n @include for-size(desktop-up) {\n width: 22px;\n height: 22px;\n }\n\n &::after {\n position: absolute;\n display: none;\n width: 5px;\n height: 10px;\n border: solid $black-100;\n border-width: 0 2px 2px 0;\n margin-top: -2px;\n content: '';\n transform: rotate(45deg);\n }\n }\n\n &:hover .checkbox-custom {\n border-color: $green;\n }\n\n input[type='checkbox']:checked + .checkbox-custom {\n border-color: $blue;\n background-color: $blue;\n\n &::after {\n display: block;\n }\n }\n }\n}\n\n.tvl-volume-chart-container {\n padding: 16px 12px;\n border: 1px solid $black-60;\n border-radius: $border-radius;\n background-color: $black-80;\n\n @include for-size(desktop-up) {\n padding: 32px;\n }\n\n .chart-header {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n\n @include for-size(desktop-up) {\n margin-bottom: 24px;\n }\n }\n\n .time-filters {\n display: flex;\n gap: 8px;\n\n @include for-size(tablet-portrait-up) {\n gap: 12px;\n }\n\n @include for-size(desktop-up) {\n gap: 16px;\n }\n\n .time-filter {\n display: flex;\n width: 40px;\n align-items: center;\n justify-content: center;\n padding: 6px;\n border: 1px solid $black-50;\n border-radius: $border-radius;\n background-color: $black;\n color: $white;\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s;\n @include regular;\n\n @include for-size(tablet-portrait-up) {\n width: 50px;\n padding: 8px;\n font-size: 14px;\n }\n\n &:hover {\n border-color: $black-40;\n background-color: $black-80;\n }\n\n &.active {\n border-color: $blue;\n background-color: $blue;\n color: $white;\n @include bold;\n }\n }\n }\n\n .chart-tooltip {\n padding: 10px 14px;\n border: 1px solid $black-60;\n border-radius: $border-radius;\n background: $black-80;\n\n .tooltip-label {\n margin: 0 0 6px;\n color: $black-40;\n font-size: 12px;\n }\n\n .tooltip-value {\n margin: 2px 0;\n font-size: 13px;\n @include semibold;\n }\n }\n\n .chart-legend {\n display: flex;\n justify-content: center;\n margin-top: 12px;\n gap: 24px;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n color: $white;\n font-size: 11px;\n gap: 6px;\n\n @include for-size(tablet-portrait-up) {\n font-size: 13px;\n gap: 8px;\n }\n }\n\n .legend-color {\n width: 12px;\n height: 12px;\n flex-shrink: 0;\n border-radius: 3px;\n\n @include for-size(tablet-portrait-up) {\n width: 14px;\n height: 14px;\n }\n\n &.tvl-color {\n background: $tvl-color;\n }\n\n &.volume-color {\n background: $volume-color;\n }\n }\n}\n"
},
{
"path": "src/containers/shared/components/TVLVolumeChart/test/TVLVolumeChart.test.tsx",
"content": "import { render, screen } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\nimport { I18nextProvider } from 'react-i18next'\nimport i18n from '../../../../../i18n/testConfig'\nimport { TVLVolumeChart } from '../TVLVolumeChart'\nimport { TooltipProvider } from '../../Tooltip'\n\n// ResizeObserver is not available in jsdom (required by recharts ResponsiveContainer)\nfunction MockResizeObserver() {\n return { observe: jest.fn(), unobserve: jest.fn(), disconnect: jest.fn() }\n}\nbeforeAll(() => {\n global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver\n})\n\nconst mockData = [\n { date: '2026-03-25', tvl: 7000000, volume: 700 },\n { date: '2026-03-26', tvl: 7100000, volume: 800 },\n { date: '2026-03-27', tvl: 7200000, volume: 550 },\n]\n\ninterface RenderProps {\n data?: { date: string; tvl: number; volume: number }[]\n isLoading?: boolean\n displayCurrency?: 'usd' | 'xrp'\n setDisplayCurrency?: (currency: 'usd' | 'xrp') => void\n onTimeRangeChange?: (range: string) => void\n}\n\nconst renderComponent = ({\n data = mockData,\n isLoading = false,\n displayCurrency = 'usd',\n setDisplayCurrency = jest.fn(),\n onTimeRangeChange = jest.fn(),\n}: RenderProps = {}) =>\n render(\n {t('tvl_and_volume')}
\n\n {/* Controls row: toggle + checkboxes */}\n\n \n setDisplayCurrency(value === 'USD' ? 'usd' : 'xrp')\n }\n />\n\n \n \n
\n\n \n formatDateTick(value, timeRange)}\n leftAxis={leftAxis}\n rightAxis={rightAxis}\n tooltipContent={renderTooltip}\n margin={chartMargin}\n tickFontSize={chartTickFontSize}\n />\n )}\n\n
\n \n
\n\n {isLoading ? (\n \n {TIME_RANGES.map((range) => (\n handleTimeRangeChange(range)}\n type=\"button\"\n >\n {range}\n \n ))}\n
\n \n {\n const rect = e.currentTarget.getBoundingClientRect()\n showTooltip('text', e, t('tvl_tooltip' as any), {\n x: rect.left + rect.width / 2,\n y: rect.top - 60,\n })\n }}\n onFocus={() => {}}\n onMouseLeave={() => hideTooltip()}\n >\n \n {t('tvl')}\n
\n \n \n {t('volume')}\n
\n {items}
\n }\n\n // Otherwise, use state-based tabs with onTabChange callback\n const items = normalizedTabs.map((tab) => {\n const className = selected === tab.id ? 'tab selected' : 'tab'\n const title = t(tab.labelKey as any)\n const handleClick = () => {\n onTabChange?.(tab.id)\n tab.onTabClick?.()\n }\n return (\n {items}
\n}\n"
},
{
"path": "src/containers/shared/components/TokenSearchResults/TokenSearchResults.tsx",
"content": "import { useContext } from 'react'\nimport './styles.scss'\n\nimport { useTranslation } from 'react-i18next'\nimport axios from 'axios'\nimport { useQuery } from 'react-query'\nimport { useAnalytics } from '../../analytics'\nimport { TokenSearchRow } from './TokenSearchRow'\nimport SocketContext from '../../SocketContext'\nimport Log from '../../log'\nimport { getAccountLines } from '../../../../rippled/lib/rippled'\nimport {\n FETCH_INTERVAL_XRP_USD_ORACLE_MILLIS,\n ORACLE_ACCOUNT,\n} from '../../utils'\nimport { LOSToken } from '../../losTypes'\n\ninterface SearchResultsProps {\n currentSearchValue: string\n setCurrentSearchInput: (string) => void\n}\n\nconst SearchResults = ({\n currentSearchValue,\n setCurrentSearchInput,\n}: SearchResultsProps): JSX.Element | null => {\n const analytics = useAnalytics()\n const { t } = useTranslation()\n const rippledSocket = useContext(SocketContext)\n\n const { data: XRPUSDPrice = 0.0 } = useQuery(\n ['fetchXRPToUSDRate'],\n () => fetchXRPToUSDRate(),\n {\n refetchInterval: FETCH_INTERVAL_XRP_USD_ORACLE_MILLIS,\n onError: (error) => {\n Log.error(error)\n return 0.0\n },\n },\n )\n\n const { data: tokens = [] } = useQuery\n
\n ) : null\n}\n\nexport default SearchResults\n"
},
{
"path": "src/containers/shared/components/TokenSearchResults/TokenSearchRow.tsx",
"content": "import { Link } from 'react-router'\nimport { useTranslation } from 'react-i18next'\nimport { FC } from 'react'\nimport { Amount } from '../Amount'\nimport { localizeNumber } from '../../utils'\nimport Currency from '../Currency'\nimport DomainLink from '../DomainLink'\nimport { LOSToken } from '../../losTypes'\n\nconst parsePrice = (dollarPrice: string, xrpPrice: number): number => {\n const parsedDollar = Number(dollarPrice)\n return Number((parsedDollar * xrpPrice).toFixed(6))\n}\n\nconst DEFAULT_VALUE = '--'\n\nconst TokenLogo: FC<{ token: LOSToken }> = ({ token }) =>\n token && token.icon ? (\n \n ) : (\n \n )\n\nconst TokenName: FC<{ token: LOSToken }> = ({ token }) =>\n token && token.name ? (\n \n {t('tokens')} ({tokens.length})\n
\n\n {tokens.map((token) => (\n \n ({token.name.trim().toUpperCase().replace('(', '').replace(')', '')})\n
\n ) : null\n\nconst IssuerAddress: FC<{ token: LOSToken; onClick: any }> = ({\n token,\n onClick,\n}) =>\n token && token.issuer_account ? (\n \n {token.issuer_name && `${token.issuer_name} (`}\n
\n {token.issuer_account}
\n {token.issuer_name && )
}\n \n ) : null\n\ninterface SearchResultRowProps {\n token: LOSToken\n onClick: () => void\n xrpPrice: number\n}\n\nexport const TokenSearchRow = ({\n token,\n onClick,\n xrpPrice,\n}: SearchResultRowProps): JSX.Element => {\n const { t } = useTranslation()\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n {token.price ? (\n
\n {DEFAULT_VALUE}
\n )}\n \n {t('holders_count', {\n holders: localizeNumber(token.holders),\n })}\n
\n \n {t('trustlines', {\n trustlines: localizeNumber(token.trustlines),\n })}\n
\n \n
\n {t('issuer')}:
\n \n {token.issuer_domain && (\n <>\n
\n \n )\n}\n"
},
{
"path": "src/containers/shared/components/TokenSearchResults/styles.scss",
"content": "@use '../../css/variables' as *;\n\n.search-results-menu {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 400px;\n border: 1px solid $black-80;\n border-radius: 8px;\n border-top: 0px;\n margin-top: 6px;\n background-color: $black-100;\n box-shadow: 2px 2px 15px 0px rgb(131 131 134 / 30%);\n overflow-wrap: anywhere;\n overflow-y: scroll;\n scrollbar-color: $black-50 transparent;\n scrollbar-width: thin;\n\n @media (width < 900px) {\n max-width: calc(100% - 32px);\n }\n}\n\n.search-results-header {\n padding: 0.5rem 0rem 0.5rem 1rem;\n background-color: $black-80;\n font-size: 14px;\n font-weight: 500;\n}\n\n.result-row-icon {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 16px;\n}\n\n.no-logo {\n border-radius: 50%;\n background-color: $black-50;\n}\n\n.result-currency {\n flex-shrink: 0;\n padding-top: 2px;\n padding-right: 0px;\n padding-bottom: 2px;\n white-space: nowrap;\n}\n\n.result-token-name {\n padding-top: 2px;\n padding-bottom: 2px;\n margin-left: 3px;\n}\n\n.result-logo {\n padding-right: 14px;\n padding-left: 1rem;\n}\n\n.search-result-row {\n position: relative;\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding-top: 13px;\n padding-bottom: 13px;\n color: $black-0;\n font-size: 14px;\n font-weight: 500;\n\n &:hover {\n background-color: $black-70;\n color: $black-0;\n cursor: pointer;\n }\n}\n\n.result-name-line {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-bottom: 0.5rem;\n white-space: nowrap;\n}\n\n.result-issuer-line {\n display: flex;\n overflow: hidden;\n padding: 0 1rem;\n margin-bottom: 0.5rem;\n color: $black-50;\n}\n\n.result-website-line {\n display: flex;\n flex-direction: row;\n padding: 0 1rem;\n color: $black-50;\n}\n\n.metric-chip {\n padding: 2px 12px;\n border: 1px solid $black-70;\n border-radius: 100px;\n margin-right: 8px;\n margin-left: 8px;\n background-color: $black-100;\n font-size: 12px;\n font-weight: 600;\n\n &:hover {\n background-color: $black-100;\n cursor: pointer;\n }\n}\n\n.issuer-link {\n display: inline-flex !important;\n overflow: hidden;\n margin-left: 0.25rem;\n color: $black-50;\n\n &:hover {\n background: transparent;\n color: $blue-purple-30;\n }\n}\n\n.issuer-address {\n @extend %truncate;\n}\n\n.issuer-name,\n.issuer-title {\n flex-shrink: 0;\n}\n\n.result-domain-link {\n margin-left: 0.25rem;\n}\n"
},
{
"path": "src/containers/shared/components/TokenSearchResults/test/TokenSearchResults.test.js",
"content": "import { render, cleanup, waitFor } from '@testing-library/react'\nimport moxios from 'moxios'\nimport i18n from '../../../../../i18n/testConfig'\nimport testTokens from './mock_data/tokens.json'\nimport SocketContext from '../../../SocketContext'\nimport SearchResults from '../TokenSearchResults'\nimport MockWsClient from '../../../../test/mockWsClient'\nimport { QuickHarness, flushPromises } from '../../../../test/utils'\n\nconst testQuery = 'test'\n\ndescribe('Testing tokens search', () => {\n let client\n\n const renderSearchResults = () => {\n const searchURL = `/api/v1/tokens/search/${testQuery}`\n moxios.stubRequest(searchURL, {\n status: 200,\n response: testTokens,\n })\n return render(\n {t('website')}:
\n \n
\n \n )}\n tokens (1)
`,\n )\n expect(searchMenu.querySelector('.currency').outerHTML).toBe(\n `SOLO`,\n )\n expect(searchMenu.querySelector('.issuer-name').outerHTML).toBe(\n `Sologenic (
`,\n )\n expect(searchMenu.querySelector('.issuer-address').outerHTML).toBe(\n `rsoLo2S1kiGeCcn6hCUXVrCpGMWLrRrLZz
`,\n )\n expect(\n searchMenu\n .querySelector('.search-result-row')\n .querySelectorAll('.metric-chip').length,\n ).toEqual(3)\n expect(searchMenu.querySelector('.domain').outerHTML).toBe(\n `sologenic.com`,\n )\n })\n})\n"
},
{
"path": "src/containers/shared/components/TokenSearchResults/test/mock_data/tokens.json",
"content": "{\n \"tokens\": [\n {\n \"price_change\": -3.31881203079154,\n \"issuer_name\": \"Sologenic\",\n \"currency\": \"534F4C4F00000000000000000000000000000000\",\n \"daily_trades\": \"549\",\n \"icon\": \"https://s1.xrplmeta.org/icon/C40439709A.png\",\n \"ttl\": 1755388960,\n \"social_links\": [],\n \"name\": \"SOLO\",\n \"tvl_xrp\": 603524.60505,\n \"issuer_account\": \"rsoLo2S1kiGeCcn6hCUXVrCpGMWLrRrLZz\",\n \"market_cap\": \"44282163.354157\",\n \"holders\": 218547,\n \"circ_supply\": \"398974338.612327\",\n \"issuer_domain\": \"sologenic.com\",\n \"daily_volume\": \"35991.7343289996\",\n \"supply\": \"398974338.612327\",\n \"trustlines\": 283772,\n \"trust_level\": 3,\n \"price\": \"0.110990003788651\"\n }\n ]\n}\n"
},
{
"path": "src/containers/shared/components/TokenTableRow.tsx",
"content": "export interface TokenTableRowProps {\n label: string\n value: any\n}\n\nexport const TokenTableRow = (props: TokenTableRowProps) => {\n const { label, value } = props\n return (\n {`${short}...`}
\n })\n\n const renderValidatorTooltip = () => {\n const { v = {}, pubkey, time } = data\n const key = v.master_key || pubkey\n\n return (\n <>\n {v.domain}
\n {key}
\n {localizeDate(time, language, DATE_OPTIONS)}
\n {v.unl && (\n \n {v.unl}\n 
\n
\n )}\n \n )\n }\n\n const renderTxTooltip = () => {\n const { type, result, account } = data\n return (\n <>\n \n
\n {account}
\n \n )\n }\n\n const renderMissingValidators = () => (\n <>\n {t('missing')}:
\n {data.missing.map((d) => (\n \n {d.domain || d.master_key}\n
\n ))}\n \n )\n\n const renderNFTId = () => {data.tokenId}
\n\n const renderMPTId = () => {data.tokenId}
\n\n const renderText = () => {data}
\n\n const { x, y, mode } = tooltip\n const style: CSSProperties = { top: y + PADDING_Y, left: x }\n const modeMap = {\n validator: renderValidatorTooltip,\n tx: renderTxTooltip,\n nUnl: renderNegativeUnlTooltip,\n missing: renderMissingValidators,\n nftId: renderNFTId,\n mptId: renderMPTId,\n text: renderText,\n }\n\n return modeMap[mode] ? (\n