@@ -53,6 +82,9 @@ export const TransactionTableRow = ({ tx, hasTokensColumn }: Props) => {
+ {hasAmountColumn && (
+
{renderAmount()}
+ )}
diff --git a/src/containers/shared/components/TransactionTable/styles.scss b/src/containers/shared/components/TransactionTable/styles.scss
index d0760178b..6b78f39f7 100644
--- a/src/containers/shared/components/TransactionTable/styles.scss
+++ b/src/containers/shared/components/TransactionTable/styles.scss
@@ -44,6 +44,11 @@
}
}
+ .col-amount {
+ flex: 2;
+ @include medium;
+ }
+
.col-token {
width: 40px;
}
@@ -68,6 +73,12 @@
}
}
+ .col-hash {
+ flex: 2;
+ color: $green;
+ @include medium;
+ }
+
.col-account {
display: none;
flex: 3;
diff --git a/src/containers/shared/hooks/test/useTokenToUSDRate.test.tsx b/src/containers/shared/hooks/test/useTokenToUSDRate.test.tsx
new file mode 100644
index 000000000..3bc80f039
--- /dev/null
+++ b/src/containers/shared/hooks/test/useTokenToUSDRate.test.tsx
@@ -0,0 +1,154 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { useTokenToUSDRate } from '../useTokenToUSDRate'
+import * as useXRPToUSDRateModule from '../useXRPToUSDRate'
+
+jest.mock('../useXRPToUSDRate')
+const mockUseXRPToUSDRate = useXRPToUSDRateModule.useXRPToUSDRate as jest.Mock
+
+// Mock global fetch
+const mockFetch = jest.fn()
+global.fetch = mockFetch
+
+const createWrapper =
+ (
+ queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: 0 } },
+ }),
+ ) =>
+ ({ children }: { children: React.ReactNode }) => (
+
{children}
+ )
+
+describe('useTokenToUSDRate', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ mockUseXRPToUSDRate.mockReturnValue(2.5) // XRP = $2.50
+ process.env.VITE_ENVIRONMENT = 'mainnet'
+ })
+
+ describe('Special Currencies', () => {
+ it('returns XRP/USD rate directly for XRP', () => {
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'XRP' }),
+ {
+ wrapper: createWrapper(),
+ },
+ )
+ expect(result.current).toEqual({
+ rate: 2.5,
+ isAvailable: true,
+ isLoading: false,
+ })
+ })
+
+ it('returns 1:1 rate for RLUSD stablecoin', () => {
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'RLUSD', issuer: 'rSomeIssuer' }),
+ { wrapper: createWrapper() },
+ )
+ expect(result.current).toEqual({
+ rate: 1,
+ isAvailable: true,
+ isLoading: false,
+ })
+ })
+ })
+
+ describe('XRPLMeta API - Positive Cases', () => {
+ it('fetches token price and converts to USD', async () => {
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve({ metrics: { price: 0.5 } }), // 0.5 XRP per token
+ })
+
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'USD', issuer: 'rIssuer123' }),
+ { wrapper: createWrapper() },
+ )
+
+ await waitFor(() => expect(result.current.isLoading).toBe(false))
+ // 0.5 XRP * $2.50/XRP = $1.25
+ expect(result.current).toEqual({
+ rate: 1.25,
+ isAvailable: true,
+ isLoading: false,
+ })
+ expect(mockFetch).toHaveBeenCalledWith(
+ 'https://s1.xrplmeta.org/token/USD%3ArIssuer123',
+ )
+ })
+ })
+
+ describe('XRPLMeta API - Negative Cases', () => {
+ it('returns unavailable when API returns no price', async () => {
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve({ metrics: {} }), // No price field
+ })
+
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'RARE', issuer: 'rIssuer456' }),
+ { wrapper: createWrapper() },
+ )
+
+ await waitFor(() => expect(result.current.isLoading).toBe(false))
+ expect(result.current).toEqual({
+ rate: 0,
+ isAvailable: false,
+ isLoading: false,
+ })
+ })
+
+ it('returns unavailable when API request fails', async () => {
+ mockFetch.mockResolvedValueOnce({
+ ok: false,
+ statusText: 'Not Found',
+ })
+
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'UNKNOWN', issuer: 'rIssuer789' }),
+ { wrapper: createWrapper() },
+ )
+
+ await waitFor(() => expect(result.current.isLoading).toBe(false))
+ expect(result.current).toEqual({
+ rate: 0,
+ isAvailable: false,
+ isLoading: false,
+ })
+ })
+
+ it('returns unavailable for token without issuer', () => {
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'FOO' }), // No issuer
+ { wrapper: createWrapper() },
+ )
+ expect(result.current).toEqual({
+ rate: 0,
+ isAvailable: false,
+ isLoading: false,
+ })
+ expect(mockFetch).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Non-Mainnet Environment', () => {
+ it('returns mock rate for tokens on non-mainnet', () => {
+ process.env.VITE_ENVIRONMENT = 'testnet'
+
+ const { result } = renderHook(
+ () => useTokenToUSDRate({ currency: 'TEST', issuer: 'rTestIssuer' }),
+ { wrapper: createWrapper() },
+ )
+
+ expect(result.current).toEqual({
+ rate: 1.5,
+ isAvailable: true,
+ isLoading: false,
+ })
+ expect(mockFetch).not.toHaveBeenCalled()
+ })
+ })
+})
diff --git a/src/containers/shared/hooks/useTokenToUSDRate.ts b/src/containers/shared/hooks/useTokenToUSDRate.ts
new file mode 100644
index 000000000..077a45269
--- /dev/null
+++ b/src/containers/shared/hooks/useTokenToUSDRate.ts
@@ -0,0 +1,116 @@
+import { useQuery } from 'react-query'
+import { useXRPToUSDRate } from './useXRPToUSDRate'
+import Log from '../log'
+
+const FETCH_INTERVAL_MILLIS = 60 * 1000 // 1 minute
+
+/**
+ * Fetches token price from xrplmeta.org API
+ * The API returns the price of the token in XRP
+ */
+const fetchTokenPriceInXRP = async (
+ currency: string,
+ issuer: string,
+): Promise
=> {
+ const identifier = `${currency}:${issuer}`
+ const response = await fetch(
+ `https://s1.xrplmeta.org/token/${encodeURIComponent(identifier)}`,
+ )
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch token price: ${response.statusText}`)
+ }
+
+ const data = await response.json()
+ return data?.metrics?.price ?? 0
+}
+
+interface TokenInfo {
+ currency: string
+ issuer?: string
+}
+
+interface TokenToUSDRateResult {
+ rate: number
+ isAvailable: boolean
+ isLoading: boolean
+}
+
+/**
+ * Returns the current exchange rate for a token to USD.
+ * First fetches the token price in XRP from xrplmeta.org,
+ * then converts to USD using the XRP to USD rate.
+ *
+ * @param token - The token info containing currency and optional issuer
+ * @returns Object containing the USD rate, availability status, and loading state
+ */
+export function useTokenToUSDRate(
+ token: TokenInfo | undefined,
+): TokenToUSDRateResult {
+ const xrpToUsdRate = useXRPToUSDRate()
+ const isMainnet = process.env.VITE_ENVIRONMENT === 'mainnet'
+
+ const currency = token?.currency
+ const issuer = token?.issuer
+
+ // Only fetch for non-XRP, non-RLUSD tokens with an issuer on mainnet
+ const shouldFetch =
+ isMainnet &&
+ !!currency &&
+ currency !== 'XRP' &&
+ currency !== 'RLUSD' &&
+ !!issuer
+
+ const {
+ data: priceInXRP,
+ isLoading,
+ isFetched,
+ } = useQuery(
+ ['tokenPriceInXRP', currency, issuer],
+ () => fetchTokenPriceInXRP(currency!, issuer!),
+ {
+ enabled: shouldFetch,
+ refetchInterval: FETCH_INTERVAL_MILLIS,
+ staleTime: FETCH_INTERVAL_MILLIS,
+ onError: (error) => Log.error(error),
+ },
+ )
+
+ // XRP: use direct XRP to USD rate
+ if (currency === 'XRP') {
+ return { rate: xrpToUsdRate, isAvailable: true, isLoading: false }
+ }
+
+ // RLUSD: stablecoin pegged 1:1 with USD
+ if (currency === 'RLUSD') {
+ return { rate: 1, isAvailable: true, isLoading: false }
+ }
+
+ // For non-mainnet, return a mock rate for testing
+ if (!isMainnet && currency && issuer) {
+ return { rate: 1.5, isAvailable: true, isLoading: false }
+ }
+
+ // For tokens that need API fetch
+ if (shouldFetch) {
+ // Still loading
+ if (isLoading || !isFetched) {
+ return { rate: 0, isAvailable: false, isLoading: true }
+ }
+
+ // Fetched successfully with a valid price
+ if (priceInXRP && priceInXRP > 0) {
+ return {
+ rate: priceInXRP * xrpToUsdRate,
+ isAvailable: true,
+ isLoading: false,
+ }
+ }
+
+ // Fetched but no price available
+ return { rate: 0, isAvailable: false, isLoading: false }
+ }
+
+ // No conversion available (e.g., token without issuer on mainnet)
+ return { rate: 0, isAvailable: false, isLoading: false }
+}
diff --git a/src/containers/shared/images/copy.svg b/src/containers/shared/images/copy.svg
new file mode 100644
index 000000000..76972914c
--- /dev/null
+++ b/src/containers/shared/images/copy.svg
@@ -0,0 +1 @@
+
diff --git a/src/containers/shared/images/filter.svg b/src/containers/shared/images/filter.svg
new file mode 100644
index 000000000..b176fd5ab
--- /dev/null
+++ b/src/containers/shared/images/filter.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/containers/shared/images/warning.svg b/src/containers/shared/images/warning.svg
new file mode 100644
index 000000000..08e37f282
--- /dev/null
+++ b/src/containers/shared/images/warning.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/containers/shared/test/SocketContext.test.ts b/src/containers/shared/test/SocketContext.test.ts
index 2a67fae26..795b694ad 100644
--- a/src/containers/shared/test/SocketContext.test.ts
+++ b/src/containers/shared/test/SocketContext.test.ts
@@ -22,6 +22,8 @@ describe('getSocket', () => {
process.env.VITE_RIPPLED_HOST = 'somewhere.com'
process.env.VITE_P2P_RIPPLED_HOST = 'cli-somewhere.com'
process.env.VITE_RIPPLED_WS_PORT = '51233'
+ delete process.env.VITE_INSECURE_WS
+ delete process.env.VITE_ENVIRONMENT
})
it('should instantiate with environment variables', () => {
@@ -92,6 +94,8 @@ describe('getSocket', () => {
delete process.env.VITE_RIPPLED_HOST
delete process.env.VITE_P2P_RIPPLED_HOST
process.env.VITE_RIPPLED_WS_PORT = '51233'
+ delete process.env.VITE_INSECURE_WS
+ delete process.env.VITE_ENVIRONMENT
})
it('should use ignore VITE_RIPPLED_WS_PORT when supplied entry point has a port', () => {
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 78de3e8bf..8b4c462ff 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -10,12 +10,12 @@
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.1/8 is considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
- ),
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.1/8 is considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+ ),
)
export default function register() {
diff --git a/src/rippled/lib/rippled.ts b/src/rippled/lib/rippled.ts
index c8881f3c3..f588dc046 100644
--- a/src/rippled/lib/rippled.ts
+++ b/src/rippled/lib/rippled.ts
@@ -866,6 +866,11 @@ const getVault = (rippledSocket, vaultId) =>
throw new Error('invalid ledger index/hash', 400)
}
+ // Handle invalid vault ID format (e.g., non-hex string like "1234")
+ if (resp.error_message?.includes('not hex string')) {
+ throw new Error('Invalid vault ID format', 400)
+ }
+
if (resp.error_message) {
throw new Error(resp.error_message, 500)
}
@@ -899,6 +904,37 @@ const getLoanBroker = (rippledSocket, loanBrokerId) =>
return resp.node
})
+// get account loans
+const getAccountLoans = async (
+ rippledSocket: ExplorerXrplClient,
+ account: string,
+ ledgerIndex: string | number = 'validated',
+): Promise => {
+ const resp = await query(rippledSocket, {
+ command: 'account_objects',
+ account,
+ ledger_index: ledgerIndex,
+ type: 'loan',
+ limit: 400,
+ })
+ if (resp.error === 'actNotFound') {
+ throw new Error('account not found', 404)
+ }
+ if (resp.error === 'invalidParams') {
+ return undefined
+ }
+
+ if (resp.error_message) {
+ throw new Error(resp.error_message, 500)
+ }
+
+ if (!resp.account_objects.length) {
+ return undefined
+ }
+
+ return resp.account_objects
+}
+
export {
getLedger,
getLedgerEntry,
@@ -907,6 +943,7 @@ export {
getAccountEscrows,
getAccountPaychannels,
getAccountBridges,
+ getAccountLoans,
getAccountNFTs,
getAccountObjects,
getNFTsIssuedByAccount,