Explorer Lending Protocol Object Page

package.json

@@ -100,7 +100,7 @@
     "ts-jest": "^29.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^4.9.5",
-    "xrpl": "^4.4.0"
+    "xrpl": "^4.5.0"
   },
   "resolutions": {
     "jest-environment-jsdom": "29.3.1",

public/locales/en-US/translations.json

@@ -69,6 +69,7 @@
   "transaction_legend_toggle_show": "Show Legend",
   "transactions.date_header": "Date/time (UTC)",
   "no_transactions_message": "No transactions found.",
+  "get_vault_transactions_failed": "Unable to load vault transactions at this time.",
   "retry_action": "Retry...",
   "uh_oh": "UH-OH!",
   "not_found_default_title": "Page Not Found",
@@ -635,6 +636,7 @@
   "withdrawal_policy": "Withdrawal Policy",
   "account_creates_vault": "<Account/> created a vault for <Asset/>",
   "vault_id": "Vault ID",
+  "yield_pool": "Yield Pool",
   "loan_broker_id": "Loan Broker ID",
   "loan_id": "Loan ID",
   "management_fee_rate": "Management Fee Rate",
@@ -650,6 +652,7 @@
   "loan_service_fee": "Loan Service Fee",
   "late_payment_fee": "Late Payment Fee",
   "close_payment_fee": "Close Payment Fee",
+  "full_payment_fee": "Full Payment Fee",
   "overpayment_fee": "Overpayment Fee",
   "interest_rate": "Interest Rate",
   "late_interest_rate": "Late Interest Rate",
@@ -803,5 +806,50 @@
   "loan_fees_detail": "<LoanOriginationFee/><LoanServiceFee/>",
   "loan_terms_detail": "<PaymentTotal/><PaymentInterval/><GracePeriod/>",
   "no_limit": "No Limit",
-  "first_loss_capital": "first-loss capital"
+  "first_loss_capital": "first-loss capital",
+  "vault": "Vault",
+  "vault_not_found": "Vault not found",
+  "invalid_vault_id": "Invalid vault ID",
+  "check_vault_id": "Please check the vault ID",
+  "get_vault_failed": "Unable to load vault information at this time. Please try again later.",
+  "private_vault": "Private Vault",
+  "perm_domain_id": "Permissioned Domain ID",
+  "total_value_locked": "Total Value Locked (TVL)",
+  "shares": "Shares",
+  "assets_available": "Assets Available",
+  "unrealized_loss": "Unrealized Loss",
+  "other_data": "Other Data",
+  "max_total_supply": "Max Total Supply",
+  "available_to_borrow": "Available to Borrow",
+  "not_available": "Not available",
+  "first_come_first_served": "First Come First Served",
+  "loans": "Loans",
+  "loan_broker": "Loan Broker",
+  "total_debt": "Total Debt",
+  "maximum_debt": "Maximum Debt",
+  "management_fee": "Management Fee",
+  "borrower": "Borrower",
+  "amount_requested": "Amount Requested",
+  "outstanding_balance": "Outstanding Balance",
+  "loan_status_current": "Current",
+  "loan_status_default": "Default",
+  "all_loans": "All Loans",
+  "loan_status_impaired": "Impaired",
+  "loan_status_paid_off": "Paid Off",
+  "next_due_date": "Next Due Date",
+  "origination_date": "Origination Date",
+  "frequency": "Frequency",
+  "installments": "Installments",
+  "prepayment_fee": "Prepayment Fee",
+  "no_loans_message": "No loans found for this broker.",
+  "loan_default_detected": "Loan default detected in this broker.",
+  "no_loan_brokers_message": "No loan brokers have been set up for this vault.",
+  "depositors_fetch_error": "Unable to fetch depositors information from Clio node at this time.",
+  "no_depositors_message": "No depositors found for this vault.",
+  "depositors": "Depositors",
+  "percent_of_supply": "% of Supply",
+  "value": "Value",
+  "currency_toggle_help": "Toggle to view values in XRP or USD",
+  "currency_toggle_loading": "Loading USD conversion rate...",
+  "currency_toggle_unavailable": "USD conversion not available for this token"
 }

src/containers/App/index.tsx

@@ -24,6 +24,7 @@ import {
   AMENDMENTS_ROUTE,
   AMENDMENT_ROUTE,
   MPT_ROUTE,
+  VAULT_ROUTE,
   NODES_ROUTE,
   VALIDATORS_ROUTE,
   UPGRADE_STATUS_ROUTE,
@@ -46,6 +47,7 @@ import { Validators } from '../Network/Validators'
 import { UpgradeStatus } from '../Network/UpgradeStatus'
 import { Tokens } from '../Tokens'
 import { TokenNonMain } from '../TokenNonMain'
+import { Vault } from '../Vault'
 
 export const AppWrapper = () => {
   const mode = process.env.VITE_ENVIRONMENT
@@ -82,6 +84,7 @@ export const AppWrapper = () => {
     [NFT_ROUTE, NFT],
     [AMENDMENT_ROUTE, Amendment],
     [MPT_ROUTE, MPT],
+    [VAULT_ROUTE, Vault],
   ]
 
   const redirect = legacyRedirect(basename, location)

src/containers/App/routes.ts

@@ -78,3 +78,9 @@ export const MPT_ROUTE: RouteDefinition<{
 }> = {
   path: '/mpt/:id',
 }
+
+export const VAULT_ROUTE: RouteDefinition<{
+  id: string
+}> = {
+  path: '/vault/:id',
+}

src/containers/Vault/CurrencyToggle.tsx

@@ -0,0 +1,72 @@
+import { useTranslation } from 'react-i18next'
+import { useTooltip } from '../shared/components/Tooltip'
+import './styles.scss'
+
+export type DisplayCurrency = 'xrp' | 'usd'
+
+interface Props {
+  nativeCurrency: string // e.g., "XRP" or "RLUSD"
+  selected: DisplayCurrency
+  onToggle: (currency: DisplayCurrency) => void
+  usdDisabled?: boolean // Disable USD option when no price is available
+  usdLoading?: boolean // Show loading state while fetching price
+}
+
+export const CurrencyToggle = ({
+  nativeCurrency,
+  selected,
+  onToggle,
+  usdDisabled = false,
+  usdLoading = false,
+}: Props) => {
+  const { t } = useTranslation()
+  const { showTooltip, hideTooltip } = useTooltip()
+
+  const handleUsdClick = () => {
+    if (!usdDisabled && !usdLoading) {
+      onToggle('usd')
+    }
+  }
+
+  const getUsdTooltip = () => {
+    if (usdLoading) return t('currency_toggle_loading')
+    if (usdDisabled) return t('currency_toggle_unavailable')
+    return ''
+  }
+
+  return (
+    <div className="currency-toggle">
+      <button
+        type="button"
+        className={`toggle-option ${selected === 'xrp' ? 'active' : ''}`}
+        onClick={() => onToggle('xrp')}
+      >
+        {nativeCurrency}
+      </button>
+      <span
+        className="toggle-option-wrapper"
+        onMouseEnter={(e) => {
+          const tooltip = getUsdTooltip()
+          if (tooltip) showTooltip('text', e, tooltip)
+        }}
+        onMouseLeave={hideTooltip}
+      >
+        <button
+          type="button"
+          className={`toggle-option ${selected === 'usd' ? 'active' : ''} ${usdDisabled || usdLoading ? 'disabled' : ''}`}
+          onClick={handleUsdClick}
+          disabled={usdDisabled || usdLoading}
+        >
+          {usdLoading ? '...' : 'USD'}
+        </button>
+      </span>
+      <span
+        className="toggle-help"
+        onMouseEnter={(e) => showTooltip('text', e, t('currency_toggle_help'))}
+        onMouseLeave={hideTooltip}
+      >
+        ?
+      </span>
+    </div>
+  )
+}

src/containers/Vault/VaultDepositors/DepositorTable.tsx

@@ -0,0 +1,112 @@
+import { useTranslation } from 'react-i18next'
+import { Account } from '../../shared/components/Account'
+import { useLanguage } from '../../shared/hooks'
+import { useTokenToUSDRate } from '../../shared/hooks/useTokenToUSDRate'
+import { localizeNumber } from '../../shared/utils'
+import { DisplayCurrency } from '../CurrencyToggle'
+import { formatCompactNumber } from '../utils'
+
+interface Holder {
+  account: string
+  mpt_amount: string
+}
+
+interface AssetInfo {
+  currency: string
+  issuer?: string
+  mpt_issuance_id?: string
+}
+
+interface Props {
+  holders: Holder[]
+  totalSupply: string | undefined
+  assetsTotal: string | undefined
+  startRank: number
+  displayCurrency: DisplayCurrency
+  asset?: AssetInfo
+}
+
+export const DepositorTable = ({
+  holders,
+  totalSupply,
+  assetsTotal,
+  startRank,
+  displayCurrency,
+  asset,
+}: Props) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const { rate: tokenToUsdRate } = useTokenToUSDRate(asset)
+
+  const totalSupplyNum = totalSupply ? Number(totalSupply) : 0
+
+  // Get the display currency label
+  const getDisplayCurrencyLabel = (): string =>
+    displayCurrency === 'usd' ? 'USD' : asset?.currency || ''
+
+  // Calculate the value of each holder's share
+  // Value = (holder's tokens / total supply) * total assets in vault
+  const calculateValue = (holderAmount: string): string => {
+    const amount = Number(holderAmount)
+    if (!totalSupplyNum || !assetsTotal) return '-'
+    const assetsTotalNum = Number(assetsTotal)
+    if (Number.isNaN(assetsTotalNum) || assetsTotalNum === 0) return '-'
+
+    // Proportional value: (holder tokens / total supply) * total assets
+    let value = (amount / totalSupplyNum) * assetsTotalNum
+
+    // Convert to USD if needed
+    if (displayCurrency === 'usd') {
+      if (tokenToUsdRate > 0) {
+        value *= tokenToUsdRate
+        return formatCompactNumber(value, language, {
+          prefix: '$',
+          currency: 'USD',
+        })
+      }
+      return '--'
+    }
+
+    return formatCompactNumber(value, language, {
+      currency: getDisplayCurrencyLabel(),
+    })
+  }
+
+  const calculatePercentOfSupply = (holderAmount: string): string => {
+    if (!totalSupplyNum) return '-'
+    const amount = Number(holderAmount)
+    const percent = (amount / totalSupplyNum) * 100
+    return `${localizeNumber(percent, language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`
+  }
+
+  return (
+    <table className="depositor-table">
+      <thead>
+        <tr>
+          <th>{t('rank')}</th>
+          <th>{t('account')}</th>
+          <th>{t('lp_tokens')}</th>
+          <th>{t('percent_of_supply')}</th>
+          <th>{t('value')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {holders.map((holder, index) => (
+          <tr key={holder.account}>
+            <td className="rank-cell">{startRank + index}</td>
+            <td className="account-cell">
+              <Account account={holder.account} />
+            </td>
+            <td className="tokens-cell">
+              {formatCompactNumber(holder.mpt_amount, language)}
+            </td>
+            <td className="percent-cell">
+              {calculatePercentOfSupply(holder.mpt_amount)}
+            </td>
+            <td className="value-cell">{calculateValue(holder.mpt_amount)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}