Conversation
Implements the Vaults ranking page matching the Figma design (Vault Rankings v2). Includes metrics cards with tooltips, filter bar, search bar, sortable table, pagination, and responsive styling. API calls use placeholders with mock data. Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Fixed tooltip icon sizing in metric cards (flex-shrink: 0, 16x16px) - Search bar focus: purple border on wrapper, removed inner focus ring - Table: percentage-based column widths with min-width for mobile scroll - Vault ID: responsive short/long display based on viewport - Sort headers: always show caret, white text for active sort column
achowdhry-ripple
force-pushed
the
vault-rankings-page-v2
branch
from
0768749 to
56bea69
Compare
|
Can you provide some screenshots? |
| FEATURE_VAULTS_PAGE && | ||
| process.env.VITE_ENVIRONMENT === 'mainnet' && { |
There was a problem hiding this comment.
Do you mean to set FEATURE_VAULTS_PAGE to false? If it's true, we will show the Vault Ranking page for mainnet after we deploy this change to prod.
There was a problem hiding this comment.
It is set to that during development right now so I can see it. I'll change it to false once I make any code changes based on your review, so that I can confirm it works before feature flagging it
There was a problem hiding this comment.
toggled it, should be false now. will keep true on local to test
There was a problem hiding this comment.
Thank you for raising this -- The fundamental truth of vault information comes from Clio/rippled ledger data, and the data this UI sources comes from LOS (https://los.prod.ripplex.io/). the data and any discrepancies will be auditable from there. I hope this clarifies your question!
added |
3 participants
High Level Overview of Change
Summary
sorting (TVL, outstanding loans, utilization ratio, interest rate), asset type
filtering (All/XRP/Stablecoins), and text search across vault names, accounts,
assets, and websites
(owner, asset, TVL, max supply, withdrawal policy, credentials, website),
transaction history, loan broker tabs with per-broker loan tables, and
depositor/shareholder breakdown with share value calculations
Loans Originated, Avg. Interest Rate, # of Vaults, and Utilization Ratio — all
converted from XRP to USD using the live oracle rate
assets (refreshed every 5 minutes), enabling accurate USD conversion for all vault
assets — not just XRP-denominated ones
VaultCreate, VaultDeposit, VaultWithdraw, VaultSet, VaultDelete, and VaultClawback
transaction types
metrics, filters, table headers/rows, search, empty state, disclaimer), API layer
(field mapping, sort/filter/search param handling, asset prices endpoint), vault
detail page, vault header, loans, depositors, currency toggle, transactions, and
utilities
Test plan
vaults
in both directions
transactions, loans, and depositors tabs
tests pass
Context of Change
Type of Change
Codebase Modernization
Before / After
Test Plan