diff --git a/docs/BillingHistoryPreview.md b/docs/BillingHistoryPreview.md
index 96f47f7..b86853d 100644
--- a/docs/BillingHistoryPreview.md
+++ b/docs/BillingHistoryPreview.md
@@ -141,14 +141,14 @@ const data: PreviewCardData = {
 
 ## API — BillingHistory page
 
-`BillingHistory` is a default-exported React component at `src/pages/BillingHistory.tsx`. It requires no props — all data comes from the internal `MOCK_TRANSACTIONS` constant.
+`BillingHistory` is a default-exported React component at `src/pages/BillingHistory.tsx`. It requires no props. Deposit rows come from the vault contract's `deposit` events for the connected wallet, read with Soroban RPC `getEvents` (`src/services/vaultEvents.ts`, via `src/hooks/useDepositHistory.ts`). Each row shows the real transaction hash. The page shows loading, no-wallet, error with Retry, and empty states, and a note when history falls outside the RPC retention window. Older deposits load with **Load older deposits**.
 
 ### Exports
 
 | Name | Kind | Description |
 |------|------|-------------|
 | `BillingHistory` | named + default export | Page component |
-| `MOCK_TRANSACTIONS` | named export | Array of `BillingTransaction` for use in tests and Storybook |
+| `MOCK_TRANSACTIONS` | fixture (`src/data/billingFixtures.ts`) | Demo and test rows, not used by the page |
 | `BillingTransaction` | type | Shape of a single transaction record |
 | `TxType` | type | `'Deposit' \| 'API Call' \| 'Refund' \| 'Settlement' \| 'Fee'` |
 | `TxDirection` | type | `'credit' \| 'debit'` |
diff --git a/src/data/billingFixtures.ts b/src/data/billingFixtures.ts
new file mode 100644
index 0000000..335aec7
--- /dev/null
+++ b/src/data/billingFixtures.ts
@@ -0,0 +1,105 @@
+/**
+ * Demo and test fixtures for the Billing History page. Not used by the
+ * production page, which reads deposits from vault events. Hashes are
+ * 64-character hex, derived from each row's id.
+ */
+import type { BillingTransaction } from '../pages/BillingHistory';
+
+export const MOCK_TRANSACTIONS: BillingTransaction[] = [
+  {
+    id: 'tx-001',
+    description: 'USDC vault deposit',
+    type: 'Deposit',
+    direction: 'credit',
+    amount: 100.00,
+    status: 'success',
+    timestamp: '2026-07-25T14:32:00Z',
+    txHash: 'cb23007c9881e61d89fc4ce18aafd4b6347d159d500bf848a36c4fda7a03fa41',
+    network: 'Stellar Testnet',
+    confirmations: 120,
+  },
+  {
+    id: 'tx-002',
+    description: 'WeatherSim API · 3 calls',
+    type: 'API Call',
+    direction: 'debit',
+    amount: 0.24,
+    status: 'success',
+    timestamp: '2026-07-25T15:10:22Z',
+    txHash: 'e11acea283811fac885409d80da17754501fccdd85a3de55b1bbbb8e9e6e55fb',
+    network: 'Stellar Testnet',
+    confirmations: 98,
+  },
+  {
+    id: 'tx-003',
+    description: 'Stellar settlement · Epoch 1047',
+    type: 'Settlement',
+    direction: 'credit',
+    amount: 12.80,
+    status: 'success',
+    timestamp: '2026-07-26T00:00:00Z',
+    txHash: '65c17fb5c236df1ce3793ebe1316e8195cc7844a30e1c8b65ebcc4b526c5bb14',
+    network: 'Stellar Testnet',
+    confirmations: 60,
+  },
+  {
+    id: 'tx-004',
+    description: 'Refund · CreditScore API',
+    type: 'Refund',
+    direction: 'credit',
+    amount: 0.05,
+    status: 'success',
+    timestamp: '2026-07-26T09:17:44Z',
+    txHash: '5e9e2b34ce4c6598b3a52c3f7848a9a00110f0fd49cb4d79e569dd02618a2224',
+    network: 'Stellar Testnet',
+    confirmations: 45,
+  },
+  {
+    id: 'tx-005',
+    description: 'Network fee · tx D6I2…',
+    type: 'Fee',
+    direction: 'debit',
+    amount: 0.001,
+    status: 'success',
+    timestamp: '2026-07-26T09:17:44Z',
+    txHash: 'e6df263d1f2dcbcdfc1b188f64326a342e14839f937cbb019f3980dd391b1bee',
+    network: 'Stellar Testnet',
+    confirmations: 45,
+  },
+  {
+    id: 'tx-006',
+    description: 'USDC vault deposit',
+    type: 'Deposit',
+    direction: 'credit',
+    amount: 50.00,
+    status: 'pending',
+    timestamp: '2026-07-27T11:04:00Z',
+    txHash: '3ed78887c6352d23346167a4f0e74cad6dd2e8b85d7cfed5b58b87017b990871',
+    network: 'Stellar Testnet',
+    confirmations: 2,
+  },
+  {
+    id: 'tx-007',
+    description: 'ChainRisk API · 1 call',
+    type: 'API Call',
+    direction: 'debit',
+    amount: 0.08,
+    status: 'error',
+    timestamp: '2026-07-27T13:22:10Z',
+    txHash: '5b9add6af41c5b2e0de227650bbdebb1cd669937f95402b3729e0456f928afb7',
+    network: 'Stellar Testnet',
+    confirmations: 0,
+  },
+  {
+    id: 'tx-008',
+    description: 'MarketFeed API · 10 calls',
+    type: 'API Call',
+    direction: 'debit',
+    amount: 0.80,
+    status: 'success',
+    timestamp: '2026-07-28T08:55:33Z',
+    txHash: '3eb279b05065c07591de370b50368c7f7d808790161c2ac62f1bcef3b9d27fb5',
+    network: 'Stellar Testnet',
+    confirmations: 88,
+  },
+];
diff --git a/src/hooks/useDepositHistory.ts b/src/hooks/useDepositHistory.ts
new file mode 100644
index 0000000..9a041be
--- /dev/null
+++ b/src/hooks/useDepositHistory.ts
@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useState } from "react";
+import { useWalletStore } from "../state/walletStore";
+import { fetchDepositEvents } from "../services/vaultEvents";
+import type { BillingTransaction } from "../pages/BillingHistory";
+
+export type DepositHistoryStatus = "no-wallet" | "loading" | "error" | "empty" | "ready";
+
+export type DepositHistory = {
+  status: DepositHistoryStatus;
+  transactions: BillingTransaction[];
+  retentionTruncated: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadingMore: boolean;
+  loadMoreError: string | null;
+  retry: () => void;
+  loadOlder: () => void;
+};
+
+type Loaded = {
+  address: string;
+  transactions: BillingTransaction[];
+  nextCursor: string | null;
+  retentionTruncated: boolean;
+  error: string | null;
+};
+
+const GENERIC_ERROR = "Could not load deposit history. Try again.";
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error && error.message ? error.message : GENERIC_ERROR;
+}
+
+function mergeById(existing: BillingTransaction[], incoming: BillingTransaction[]): BillingTransaction[] {
+  const seen = new Set(existing.map((tx) => tx.id));
+  return [...existing, ...incoming.filter((tx) => !seen.has(tx.id))];
+}
+
+/**
+ * Deposit history for the connected wallet, read from the vault's deposit
+ * events. Results are tagged with the address they were fetched for, so a
+ * response that arrives after the wallet changed is discarded and never
+ * mixes rows from two addresses.
+ */
+export function useDepositHistory(): DepositHistory {
+  const { address } = useWalletStore();
+  const [loaded, setLoaded] = useState<Loaded | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!address) return;
+    const controller = new AbortController();
+    setLoaded(null);
+    setLoadingMore(false);
+    setLoadMoreError(null);
+    fetchDepositEvents({ address, signal: controller.signal })
+      .then((page) => {
+        if (controller.signal.aborted) return;
+        setLoaded({
+          address,
+          transactions: page.transactions,
+          nextCursor: page.nextCursor,
+          retentionTruncated: page.retentionTruncated,
+          error: null,
+        });
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return;
+        setLoaded({ address, transactions: [], nextCursor: null, retentionTruncated: false, error: errorMessage(error) });
+      });
+    return () => controller.abort();
+  }, [address, reloadKey]);
+
+  const current = loaded && loaded.address === address ? loaded : null;
+
+  const loadOlder = useCallback(() => {
+    if (!address || !current?.nextCursor || loadingMore) return;
+    const cursor = current.nextCursor;
+    setLoadingMore(true);
+    setLoadMoreError(null);
+    fetchDepositEvents({ address, cursor })
+      .then((page) => {
+        setLoaded((prev) => {
+          if (!prev || prev.address !== address) return prev;
+          return {
+            ...prev,
+            transactions: mergeById(prev.transactions, page.transactions),
+            nextCursor: page.nextCursor,
+            retentionTruncated: prev.retentionTruncated || page.retentionTruncated,
+          };
+        });
+      })
+      .catch((error: unknown) => {
+        setLoadMoreError(errorMessage(error));
+      })
+      .finally(() => {
+        setLoadingMore(false);
+      });
+  }, [address, current, loadingMore]);
+
+  const retry = useCallback(() => setReloadKey((key) => key + 1), []);
+
+  let status: DepositHistoryStatus;
+  if (!address) status = "no-wallet";
+  else if (!current) status = "loading";
+  else if (current.error) status = "error";
+  else if (current.transactions.length === 0) status = "empty";
+  else status = "ready";
+
+  return {
+    status,
+    transactions: current?.transactions ?? [],
+    retentionTruncated: current?.retentionTruncated ?? false,
+    error: current?.error ?? null,
+    hasMore: current?.nextCursor != null,
+    loadingMore,
+    loadMoreError,
+    retry,
+    loadOlder,
+  };
+}
diff --git a/src/pages/BillingHistory.test.tsx b/src/pages/BillingHistory.test.tsx
index ce93b44..9ca97a9 100644
--- a/src/pages/BillingHistory.test.tsx
+++ b/src/pages/BillingHistory.test.tsx
@@ -20,7 +20,26 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import { AccountProvider } from '../hooks/useAccountContext';
 import { addAccount, switchAccount, _reset } from '../state/accountStore';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import { BillingHistory, MOCK_TRANSACTIONS } from './BillingHistory';
+import { BillingHistory } from './BillingHistory';
+import { MOCK_TRANSACTIONS } from '../data/billingFixtures';
+import { fetchDepositEvents } from '../services/vaultEvents';
+
+const walletState = vi.hoisted(() => ({
+  address: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF' as string | null,
+}));
+
+// Deposit history comes from vault events; the page is tested against the
+// fixture rows, served as if the connected wallet had made those deposits.
+vi.mock('../services/vaultEvents', async () => {
+  const { MOCK_TRANSACTIONS: rows } = await import('../data/billingFixtures');
+  return {
+    fetchDepositEvents: vi.fn(async () => ({ transactions: rows, nextCursor: null, retentionTruncated: false })),
+  };
+});
+vi.mock('../state/walletStore', async (importOriginal) => ({
+  ...await importOriginal<typeof import('../state/walletStore')>(),
+  useWalletStore: () => ({ address: walletState.address, status: 'connected', networkPassphrase: null, isNetworkMismatch: false }),
+}));
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -28,12 +47,15 @@ import { BillingHistory, MOCK_TRANSACTIONS } from './BillingHistory';
  * Render BillingHistory inside a MemoryRouter.
  * Pass `initialEntries` to pre-seed URL search params, e.g. `['?sort=date&dir=asc']`.
  */
-function renderBH(initialEntries: string[] = ['/']) {
-  return render(
+async function renderBH(initialEntries: string[] = ['/']) {
+  const result = render(
     <MemoryRouter initialEntries={initialEntries}>
       <BillingHistory />
     </MemoryRouter>,
   );
+  // Rows arrive from the deposit history fetch; wait until loading finishes.
+  await waitFor(() => expect(screen.queryByText(/Loading deposit history/)).toBeNull());
+  return result;
 }
 
 /** Get the row element for a given transaction id. */
@@ -51,20 +73,20 @@ function getTriggerInRow(row: HTMLElement) {
 describe('BillingHistory — page structure', () => {
   afterEach(() => { cleanup(); _reset(); });
 
-  it('renders the page heading', () => {
-    renderBH();
+  it('renders the page heading', async () => {
+    await renderBH();
     expect(
       screen.getByRole('heading', { name: /billing history/i, level: 1 }),
     ).toBeTruthy();
   });
 
-  it('renders all mock transactions by default', () => {
-    renderBH();
+  it('renders all mock transactions by default', async () => {
+    await renderBH();
     expect(screen.getByText(`${MOCK_TRANSACTIONS.length} transactions`)).toBeTruthy();
   });
 
-  it('renders a table with an accessible aria-label', () => {
-    renderBH();
+  it('renders a table with an accessible aria-label', async () => {
+    await renderBH();
     expect(
       screen.getByRole('table', { name: /billing transaction history/i }),
     ).toBeTruthy();
@@ -88,8 +110,8 @@ describe('BillingHistory — page structure', () => {
     expect(screen.getByText('Jul 25, 10:32 AM')).toBeTruthy();
   });
 
-  it('renders column headers with scope="col"', () => {
-    renderBH();
+  it('renders column headers with scope="col"', async () => {
+    await renderBH();
     const headerCells = screen
       .getAllByRole('columnheader')
       .filter((th) => th.getAttribute('scope') === 'col');
@@ -97,27 +119,27 @@ describe('BillingHistory — page structure', () => {
     expect(headerCells.length).toBeGreaterThanOrEqual(6);
   });
 
-  it('renders a status live region for filter announcements', () => {
-    renderBH();
+  it('renders a status live region for filter announcements', async () => {
+    await renderBH();
     const liveRegion = document.querySelector('[role="status"][aria-live="polite"]');
     expect(liveRegion).toBeTruthy();
   });
 
-  it('renders a keyboard tip containing "Esc"', () => {
-    renderBH();
+  it('renders a keyboard tip containing "Esc"', async () => {
+    await renderBH();
     // The bottom keyboard tip paragraph
     expect(screen.getAllByText(/Esc/i).length).toBeGreaterThan(0);
   });
 
-  it('renders StatusBadge for each transaction', () => {
-    renderBH();
+  it('renders StatusBadge for each transaction', async () => {
+    await renderBH();
     // StatusBadge uses role="img"; there should be at least one per row.
     const badges = screen.getAllByRole('img');
     expect(badges.length).toBeGreaterThanOrEqual(MOCK_TRANSACTIONS.length);
   });
 
-  it('shows the net balance summary line', () => {
-    renderBH();
+  it('shows the net balance summary line', async () => {
+    await renderBH();
     // Net: label should be visible
     expect(screen.getByText('Net:')).toBeTruthy();
   });
@@ -128,8 +150,8 @@ describe('BillingHistory — page structure', () => {
 describe('BillingHistory — PreviewCard hover/focus integration', () => {
   afterEach(cleanup);
 
-  it('each transaction row has a PreviewCard trigger button', () => {
-    renderBH();
+  it('each transaction row has a PreviewCard trigger button', async () => {
+    await renderBH();
     // Each row must have exactly one trigger per PreviewCard
     MOCK_TRANSACTIONS.forEach((tx) => {
       const row = getRow(tx.id);
@@ -137,8 +159,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     });
   });
 
-  it('hovering a row description opens the preview tooltip', () => {
-    renderBH();
+  it('hovering a row description opens the preview tooltip', async () => {
+    await renderBH();
     const row = getRow(MOCK_TRANSACTIONS[0].id);
     const wrapper = row.querySelector('.preview-card__wrapper') as HTMLElement;
 
@@ -150,8 +172,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     expect(screen.queryByRole('tooltip')).toBeNull();
   });
 
-  it('focusing a row trigger opens the preview tooltip', () => {
-    renderBH();
+  it('focusing a row trigger opens the preview tooltip', async () => {
+    await renderBH();
     const row = getRow(MOCK_TRANSACTIONS[0].id);
     const trigger = getTriggerInRow(row);
 
@@ -159,8 +181,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     expect(screen.getByRole('tooltip')).toBeTruthy();
   });
 
-  it('preview panel shows the transaction description', () => {
-    renderBH();
+  it('preview panel shows the transaction description', async () => {
+    await renderBH();
     const tx = MOCK_TRANSACTIONS[0]; // "USDC vault deposit"
     const row = getRow(tx.id);
     const trigger = getTriggerInRow(row);
@@ -169,8 +191,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(tx.description);
   });
 
-  it('preview panel shows the tx hash (truncated)', () => {
-    renderBH();
+  it('preview panel shows the tx hash (truncated)', async () => {
+    await renderBH();
     const tx = MOCK_TRANSACTIONS[0];
     const row = getRow(tx.id);
     const trigger = getTriggerInRow(row);
@@ -181,32 +203,32 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     expect(panel).toHaveTextContent(tx.txHash.slice(0, 8));
   });
 
-  it('preview panel shows network name', () => {
-    renderBH();
+  it('preview panel shows network name', async () => {
+    await renderBH();
     const tx = MOCK_TRANSACTIONS[0];
     const row = getRow(tx.id);
     fireEvent.focus(getTriggerInRow(row));
-    expect(screen.getByRole('tooltip')).toHaveTextContent('Stellar Mainnet');
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Stellar Testnet');
   });
 
-  it('preview panel shows confirmation count', () => {
-    renderBH();
+  it('preview panel shows confirmation count', async () => {
+    await renderBH();
     const tx = MOCK_TRANSACTIONS[0]; // 120 confirmations
     const row = getRow(tx.id);
     fireEvent.focus(getTriggerInRow(row));
     expect(screen.getByRole('tooltip')).toHaveTextContent('120');
   });
 
-  it('preview panel shows formatted USDC amount', () => {
-    renderBH();
+  it('preview panel shows formatted USDC amount', async () => {
+    await renderBH();
     const tx = MOCK_TRANSACTIONS[0]; // 100.00 USDC
     const row = getRow(tx.id);
     fireEvent.focus(getTriggerInRow(row));
     expect(screen.getByRole('tooltip')).toHaveTextContent('100.00 USDC');
   });
 
-  it('Escape closes the preview and removes aria-describedby', () => {
-    renderBH();
+  it('Escape closes the preview and removes aria-describedby', async () => {
+    await renderBH();
     const row = getRow(MOCK_TRANSACTIONS[0].id);
     const trigger = getTriggerInRow(row);
 
@@ -218,8 +240,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     expect(trigger.getAttribute('aria-describedby')).toBeNull();
   });
 
-  it('trigger aria-label includes the transaction description', () => {
-    renderBH();
+  it('trigger aria-label includes the transaction description', async () => {
+    await renderBH();
     const tx = MOCK_TRANSACTIONS[0];
     const row = getRow(tx.id);
     const trigger = getTriggerInRow(row);
@@ -229,8 +251,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
     );
   });
 
-  it('panel has pointer-events: none to avoid mouse trapping', () => {
-    renderBH();
+  it('panel has pointer-events: none to avoid mouse trapping', async () => {
+    await renderBH();
     const row = getRow(MOCK_TRANSACTIONS[0].id);
     fireEvent.focus(getTriggerInRow(row));
     expect(screen.getByRole('tooltip').style.pointerEvents).toBe('none');
@@ -242,8 +264,8 @@ describe('BillingHistory — PreviewCard hover/focus integration', () => {
 describe('BillingHistory — filters', () => {
   afterEach(cleanup);
 
-  it('filter by type "Deposit" shows only deposit rows', () => {
-    renderBH();
+  it('filter by type "Deposit" shows only deposit rows', async () => {
+    await renderBH();
     const typeSelect = screen.getByRole('combobox', { name: /filter by transaction type/i });
 
     fireEvent.change(typeSelect, { target: { value: 'Deposit' } });
@@ -258,8 +280,8 @@ describe('BillingHistory — filters', () => {
     });
   });
 
-  it('filter by status "pending" shows only pending rows', () => {
-    renderBH();
+  it('filter by status "pending" shows only pending rows', async () => {
+    await renderBH();
     const statusSelect = screen.getByRole('combobox', { name: /filter by transaction status/i });
 
     fireEvent.change(statusSelect, { target: { value: 'pending' } });
@@ -268,8 +290,8 @@ describe('BillingHistory — filters', () => {
     expect(screen.getByText(`${pendingCount} transaction${pendingCount !== 1 ? 's' : ''}`)).toBeTruthy();
   });
 
-  it('filter by direction "credit" shows only credit rows', () => {
-    renderBH();
+  it('filter by direction "credit" shows only credit rows', async () => {
+    await renderBH();
     const dirSelect = screen.getByRole('combobox', { name: /filter by transaction direction/i });
 
     fireEvent.change(dirSelect, { target: { value: 'credit' } });
@@ -283,8 +305,8 @@ describe('BillingHistory — filters', () => {
     });
   });
 
-  it('search by description filters rows', () => {
-    renderBH();
+  it('search by description filters rows', async () => {
+    await renderBH();
     const searchInput = screen.getByRole('searchbox', { name: /search transactions/i });
 
     fireEvent.change(searchInput, { target: { value: 'WeatherSim' } });
@@ -295,8 +317,8 @@ describe('BillingHistory — filters', () => {
     expect(screen.getByText(`${matchCount} transaction${matchCount !== 1 ? 's' : ''}`)).toBeTruthy();
   });
 
-  it('search by tx hash filters rows', () => {
-    renderBH();
+  it('search by tx hash filters rows', async () => {
+    await renderBH();
     const searchInput = screen.getByRole('searchbox', { name: /search transactions/i });
     // Use the first 8 chars of the first tx hash
     const hashPrefix = MOCK_TRANSACTIONS[0].txHash.slice(0, 8).toLowerCase();
@@ -306,8 +328,8 @@ describe('BillingHistory — filters', () => {
     expect(screen.queryByRole('table')).toBeTruthy();
   });
 
-  it('shows empty state when no transactions match', () => {
-    renderBH();
+  it('shows empty state when no transactions match', async () => {
+    await renderBH();
     const searchInput = screen.getByRole('searchbox', { name: /search transactions/i });
 
     fireEvent.change(searchInput, { target: { value: 'ZZZNOMATCH999' } });
@@ -318,8 +340,8 @@ describe('BillingHistory — filters', () => {
     expect(screen.queryByRole('table')).toBeNull();
   });
 
-  it('net balance is positive when only credits are shown', () => {
-    renderBH();
+  it('net balance is positive when only credits are shown', async () => {
+    await renderBH();
     const dirSelect = screen.getByRole('combobox', { name: /filter by transaction direction/i });
     fireEvent.change(dirSelect, { target: { value: 'credit' } });
 
@@ -330,8 +352,8 @@ describe('BillingHistory — filters', () => {
     expect(pageText).toContain('+');
   });
 
-  it('live region contains filter summary after type filter change', () => {
-    renderBH();
+  it('live region contains filter summary after type filter change', async () => {
+    await renderBH();
     const typeSelect = screen.getByRole('combobox', { name: /filter by transaction type/i });
     fireEvent.change(typeSelect, { target: { value: 'Fee' } });
 
@@ -339,8 +361,8 @@ describe('BillingHistory — filters', () => {
     expect(liveRegion.textContent).toContain('Fee');
   });
 
-  it('live region reads "Showing all transactions" when no filters active', () => {
-    renderBH();
+  it('live region reads "Showing all transactions" when no filters active', async () => {
+    await renderBH();
     const liveRegion = document.querySelector('[role="status"][aria-live="polite"]') as HTMLElement;
     expect(liveRegion.textContent).toMatch(/showing all transactions/i);
   });
@@ -351,8 +373,8 @@ describe('BillingHistory — filters', () => {
 describe('BillingHistory — table row content', () => {
   afterEach(cleanup);
 
-  it('shows truncated tx hash in the Tx Hash column', () => {
-    renderBH();
+  it('shows truncated tx hash in the Tx Hash column', async () => {
+    await renderBH();
     // First transaction: A3F9B2C1... → "A3F9B2…F0A1" (6+…+4)
     const hashCode = screen.getAllByTitle(MOCK_TRANSACTIONS[0].txHash)[0];
     expect(hashCode).toBeTruthy();
@@ -362,14 +384,14 @@ describe('BillingHistory — table row content', () => {
     );
   });
 
-  it('amount cell has tabular-nums class for alignment', () => {
-    renderBH();
+  it('amount cell has tabular-nums class for alignment', async () => {
+    await renderBH();
     const cells = document.querySelectorAll('td.tabular-nums');
     expect(cells.length).toBeGreaterThan(0);
   });
 
-  it('date cells render <time> elements with dateTime attributes', () => {
-    renderBH();
+  it('date cells render <time> elements with dateTime attributes', async () => {
+    await renderBH();
     const timeTags = document.querySelectorAll('td time');
     // At least one per row
     expect(timeTags.length).toBeGreaterThanOrEqual(MOCK_TRANSACTIONS.length);
@@ -396,13 +418,13 @@ describe('BillingHistory — column sorting', () => {
 
   // ── Date header ────────────────────────────────────────────────────────────
 
-  it('Date header is a button', () => {
-    renderBH();
+  it('Date header is a button', async () => {
+    await renderBH();
     expect(screen.getByRole('button', { name: /date/i })).toBeTruthy();
   });
 
-  it('clicking Date header once sorts ascending by date', () => {
-    renderBH();
+  it('clicking Date header once sorts ascending by date', async () => {
+    await renderBH();
     fireEvent.click(screen.getByRole('button', { name: /date/i }));
 
     const ids = visibleRowIds();
@@ -414,8 +436,8 @@ describe('BillingHistory — column sorting', () => {
     expect(ids).toEqual(expected);
   });
 
-  it('clicking Date header twice sorts descending by date', () => {
-    renderBH();
+  it('clicking Date header twice sorts descending by date', async () => {
+    await renderBH();
     const btn = screen.getByRole('button', { name: /date/i });
     fireEvent.click(btn);
     fireEvent.click(btn);
@@ -428,8 +450,8 @@ describe('BillingHistory — column sorting', () => {
     expect(ids).toEqual(expected);
   });
 
-  it('Date <th> has aria-sort="ascending" after one click', () => {
-    renderBH();
+  it('Date <th> has aria-sort="ascending" after one click', async () => {
+    await renderBH();
     fireEvent.click(screen.getByRole('button', { name: /date/i }));
 
     const dateTh = screen
@@ -438,8 +460,8 @@ describe('BillingHistory — column sorting', () => {
     expect(dateTh?.getAttribute('aria-sort')).toBe('ascending');
   });
 
-  it('Date <th> has aria-sort="descending" after two clicks', () => {
-    renderBH();
+  it('Date <th> has aria-sort="descending" after two clicks', async () => {
+    await renderBH();
     const btn = screen.getByRole('button', { name: /date/i });
     fireEvent.click(btn);
     fireEvent.click(btn);
@@ -450,8 +472,8 @@ describe('BillingHistory — column sorting', () => {
     expect(dateTh?.getAttribute('aria-sort')).toBe('descending');
   });
 
-  it('Amount <th> has aria-sort="none" when date is the active sort', () => {
-    renderBH();
+  it('Amount <th> has aria-sort="none" when date is the active sort', async () => {
+    await renderBH();
     fireEvent.click(screen.getByRole('button', { name: /date/i }));
 
     const amountTh = screen
@@ -462,13 +484,13 @@ describe('BillingHistory — column sorting', () => {
 
   // ── Amount header ──────────────────────────────────────────────────────────
 
-  it('Amount header is a button', () => {
-    renderBH();
+  it('Amount header is a button', async () => {
+    await renderBH();
     expect(screen.getByRole('button', { name: /amount/i })).toBeTruthy();
   });
 
-  it('clicking Amount header once sorts ascending by amount', () => {
-    renderBH();
+  it('clicking Amount header once sorts ascending by amount', async () => {
+    await renderBH();
     fireEvent.click(screen.getByRole('button', { name: /amount/i }));
 
     const ids = visibleRowIds();
@@ -479,8 +501,8 @@ describe('BillingHistory — column sorting', () => {
     expect(ids).toEqual(expected);
   });
 
-  it('clicking Amount header twice sorts descending by amount', () => {
-    renderBH();
+  it('clicking Amount header twice sorts descending by amount', async () => {
+    await renderBH();
     const btn = screen.getByRole('button', { name: /amount/i });
     fireEvent.click(btn);
     fireEvent.click(btn);
@@ -493,8 +515,8 @@ describe('BillingHistory — column sorting', () => {
     expect(ids).toEqual(expected);
   });
 
-  it('Amount <th> has aria-sort="ascending" after one click', () => {
-    renderBH();
+  it('Amount <th> has aria-sort="ascending" after one click', async () => {
+    await renderBH();
     fireEvent.click(screen.getByRole('button', { name: /amount/i }));
 
     const amountTh = screen
@@ -503,8 +525,8 @@ describe('BillingHistory — column sorting', () => {
     expect(amountTh?.getAttribute('aria-sort')).toBe('ascending');
   });
 
-  it('switching from Date sort to Amount sort resets direction to ascending', () => {
-    renderBH();
+  it('switching from Date sort to Amount sort resets direction to ascending', async () => {
+    await renderBH();
     // First click date → asc date
     const dateBtn = screen.getByRole('button', { name: /date/i });
     fireEvent.click(dateBtn);
@@ -521,8 +543,8 @@ describe('BillingHistory — column sorting', () => {
 
   // ── Composition with filters ───────────────────────────────────────────────
 
-  it('sort composes with type filter: Deposit rows sorted by amount asc', () => {
-    renderBH();
+  it('sort composes with type filter: Deposit rows sorted by amount asc', async () => {
+    await renderBH();
     const typeSelect = screen.getByRole('combobox', { name: /filter by transaction type/i });
     fireEvent.change(typeSelect, { target: { value: 'Deposit' } });
     fireEvent.click(screen.getByRole('button', { name: /amount/i }));
@@ -532,8 +554,8 @@ describe('BillingHistory — column sorting', () => {
     expect(visibleRowIds()).toEqual(expectedIds);
   });
 
-  it('sort composes with status filter: success rows sorted by date desc', () => {
-    renderBH();
+  it('sort composes with status filter: success rows sorted by date desc', async () => {
+    await renderBH();
     const statusSelect = screen.getByRole('combobox', { name: /filter by transaction status/i });
     fireEvent.change(statusSelect, { target: { value: 'success' } });
     const dateBtn = screen.getByRole('button', { name: /date/i });
@@ -549,8 +571,8 @@ describe('BillingHistory — column sorting', () => {
 
   // ── URL persistence ────────────────────────────────────────────────────────
 
-  it('pre-seeded ?sort=date&dir=asc renders in ascending date order', () => {
-    renderBH(['/?sort=date&dir=asc']);
+  it('pre-seeded ?sort=date&dir=asc renders in ascending date order', async () => {
+    await renderBH(['/?sort=date&dir=asc']);
 
     const expected = [...MOCK_TRANSACTIONS]
       .sort((a, b) => a.timestamp.localeCompare(b.timestamp))
@@ -558,8 +580,8 @@ describe('BillingHistory — column sorting', () => {
     expect(visibleRowIds()).toEqual(expected);
   });
 
-  it('pre-seeded ?sort=date&dir=desc renders in descending date order', () => {
-    renderBH(['/?sort=date&dir=desc']);
+  it('pre-seeded ?sort=date&dir=desc renders in descending date order', async () => {
+    await renderBH(['/?sort=date&dir=desc']);
 
     const expected = [...MOCK_TRANSACTIONS]
       .sort((a, b) => b.timestamp.localeCompare(a.timestamp))
@@ -567,8 +589,8 @@ describe('BillingHistory — column sorting', () => {
     expect(visibleRowIds()).toEqual(expected);
   });
 
-  it('pre-seeded ?sort=amount&dir=asc renders in ascending amount order', () => {
-    renderBH(['/?sort=amount&dir=asc']);
+  it('pre-seeded ?sort=amount&dir=asc renders in ascending amount order', async () => {
+    await renderBH(['/?sort=amount&dir=asc']);
 
     const expected = [...MOCK_TRANSACTIONS]
       .sort((a, b) => a.amount - b.amount)
@@ -576,8 +598,8 @@ describe('BillingHistory — column sorting', () => {
     expect(visibleRowIds()).toEqual(expected);
   });
 
-  it('pre-seeded ?sort=amount&dir=desc renders in descending amount order', () => {
-    renderBH(['/?sort=amount&dir=desc']);
+  it('pre-seeded ?sort=amount&dir=desc renders in descending amount order', async () => {
+    await renderBH(['/?sort=amount&dir=desc']);
 
     const expected = [...MOCK_TRANSACTIONS]
       .sort((a, b) => b.amount - a.amount)
@@ -585,22 +607,22 @@ describe('BillingHistory — column sorting', () => {
     expect(visibleRowIds()).toEqual(expected);
   });
 
-  it('invalid sort param is silently ignored (declaration order preserved)', () => {
-    renderBH(['/?sort=INVALID&dir=INVALID']);
+  it('invalid sort param is silently ignored (declaration order preserved)', async () => {
+    await renderBH(['/?sort=INVALID&dir=INVALID']);
     const expected = MOCK_TRANSACTIONS.map((tx) => tx.id);
     expect(visibleRowIds()).toEqual(expected);
   });
 
-  it('pre-seeded ?sort=date&dir=asc sets correct aria-sort on Date header', () => {
-    renderBH(['/?sort=date&dir=asc']);
+  it('pre-seeded ?sort=date&dir=asc sets correct aria-sort on Date header', async () => {
+    await renderBH(['/?sort=date&dir=asc']);
     const dateTh = screen
       .getAllByRole('columnheader')
       .find((th) => th.textContent?.includes('Date'));
     expect(dateTh?.getAttribute('aria-sort')).toBe('ascending');
   });
 
-  it('pre-seeded ?sort=amount&dir=desc sets correct aria-sort on Amount header', () => {
-    renderBH(['/?sort=amount&dir=desc']);
+  it('pre-seeded ?sort=amount&dir=desc sets correct aria-sort on Amount header', async () => {
+    await renderBH(['/?sort=amount&dir=desc']);
     const amountTh = screen
       .getAllByRole('columnheader')
       .find((th) => th.textContent?.includes('Amount'));
@@ -634,16 +656,16 @@ describe('BillingHistory — responsive layout', () => {
     window.matchMedia = originalMatchMedia;
   });
 
-  it('mobile: renders a card list and no table', () => {
+  it('mobile: renders a card list and no table', async () => {
     setViewport('mobile');
-    renderBH();
+    await renderBH();
     expect(screen.getByRole('list', { name: /billing transactions/i })).toBeTruthy();
     expect(screen.queryByRole('table')).toBeNull();
   });
 
-  it('desktop: renders the table and no card list', () => {
+  it('desktop: renders the table and no card list', async () => {
     setViewport('desktop');
-    renderBH();
+    await renderBH();
     expect(screen.getByRole('table')).toBeTruthy();
     expect(screen.queryByRole('list', { name: /billing transactions/i })).toBeNull();
   });
@@ -656,15 +678,15 @@ describe('BillingHistory — mobile cards', () => {
     return within(screen.getByRole('list', { name: /billing transactions/i })).getAllByRole('listitem');
   }
 
-  it('renders one card per transaction', () => {
+  it('renders one card per transaction', async () => {
     setViewport('mobile');
-    renderBH();
+    await renderBH();
     expect(getCards()).toHaveLength(MOCK_TRANSACTIONS.length);
   });
 
-  it('each card has a heading and a signed amount', () => {
+  it('each card has a heading and a signed amount', async () => {
     setViewport('mobile');
-    renderBH();
+    await renderBH();
     const [credit, debit] = getCards();
     expect(within(credit).getByRole('heading', { name: MOCK_TRANSACTIONS[0].description })).toBeTruthy();
     expect(within(credit).getByText(/^\+/)).toBeTruthy();
@@ -677,9 +699,9 @@ describe('BillingHistory — mobile cards', () => {
 const sheetTx = MOCK_TRANSACTIONS[0];
 
 /** Render the mobile layout, focus and tap the first card's Details button. */
-function openSheet() {
+async function openSheet() {
   setViewport('mobile');
-  renderBH();
+  await renderBH();
   const card = screen.getByTestId(`bh-card-${sheetTx.id}`);
   const trigger = within(card).getByRole('button', { name: /^details/i });
   trigger.focus();
@@ -694,8 +716,8 @@ describe('BillingHistory — details sheet', () => {
     window.matchMedia = originalMatchMedia;
   });
 
-  it('Details opens a dialog with hash, network and confirmations', () => {
-    const { dialog } = openSheet();
+  it('Details opens a dialog with hash, network and confirmations', async () => {
+    const { dialog } = await openSheet();
     expect(dialog).toBeTruthy();
     expect(within(dialog).getByText(sheetTx.txHash)).toBeTruthy();
     expect(within(dialog).getByText(sheetTx.network)).toBeTruthy();
@@ -703,7 +725,7 @@ describe('BillingHistory — details sheet', () => {
   });
 
   it('Escape closes the sheet and returns focus to the Details button', async () => {
-    const { trigger, dialog } = openSheet();
+    const { trigger, dialog } = await openSheet();
     expect(dialog).toBeTruthy();
     fireEvent.keyDown(document, { key: 'Escape' });
     expect(screen.queryByRole('dialog')).toBeNull();
@@ -719,8 +741,8 @@ describe('BillingHistory — details sheet actions', () => {
     Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
   });
 
-  it('the close button closes the sheet', () => {
-    const { dialog } = openSheet();
+  it('the close button closes the sheet', async () => {
+    const { dialog } = await openSheet();
     expect(dialog).toBeTruthy();
     fireEvent.click(within(dialog).getByRole('button', { name: /^close/i }));
     expect(screen.queryByRole('dialog')).toBeNull();
@@ -729,7 +751,7 @@ describe('BillingHistory — details sheet actions', () => {
   it('Copy puts the full hash on the clipboard', async () => {
     const writeText = vi.fn().mockResolvedValue(undefined);
     Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
-    const { dialog } = openSheet();
+    const { dialog } = await openSheet();
     expect(dialog).toBeTruthy();
     fireEvent.click(within(dialog).getByRole('button', { name: /copy/i }));
     await waitFor(() => expect(writeText).toHaveBeenCalledWith(sheetTx.txHash));
@@ -753,15 +775,15 @@ const cardIds = () =>
 describe('BillingHistory — mobile sort select', () => {
   afterEach(() => { cleanup(); _reset(); window.matchMedia = originalMatchMedia; });
 
-  it('mobile: shows one sort select', () => {
+  it('mobile: shows one sort select', async () => {
     setViewport('mobile');
-    renderBH();
+    await renderBH();
     expect(sortSelect()).toBeTruthy();
   });
 
-  it('desktop: has no sort select (the headers sort instead)', () => {
+  it('desktop: has no sort select (the headers sort instead)', async () => {
     setViewport('desktop');
-    renderBH();
+    await renderBH();
     expect(sortSelect()).toBeNull();
   });
 });
@@ -769,7 +791,7 @@ describe('BillingHistory — mobile sort select', () => {
 describe('BillingHistory — mobile sort behaviour', () => {
   afterEach(() => { cleanup(); _reset(); window.matchMedia = originalMatchMedia; });
 
-  it('choosing an option reorders the cards and writes sort/dir to the URL', () => {
+  it('choosing an option reorders the cards and writes sort/dir to the URL', async () => {
     setViewport('mobile');
     render(
       <MemoryRouter initialEntries={['/']}>
@@ -777,6 +799,7 @@ describe('BillingHistory — mobile sort behaviour', () => {
         <LocationProbe />
       </MemoryRouter>,
     );
+    await waitFor(() => expect(screen.queryByText(/Loading deposit history/)).toBeNull());
     fireEvent.change(sortSelect() as HTMLSelectElement, { target: { value: 'amount:desc' } });
     const expected = [...MOCK_TRANSACTIONS]
       .sort((a, b) => b.amount - a.amount)
@@ -787,9 +810,9 @@ describe('BillingHistory — mobile sort behaviour', () => {
     expect(params.get('dir')).toBe('desc');
   });
 
-  it('the select reflects a pre-seeded URL sort', () => {
+  it('the select reflects a pre-seeded URL sort', async () => {
     setViewport('mobile');
-    renderBH(['/?sort=date&dir=asc']);
+    await renderBH(['/?sort=date&dir=asc']);
     expect((sortSelect() as HTMLSelectElement).value).toBe('date:asc');
   });
 });
@@ -797,9 +820,9 @@ describe('BillingHistory — mobile sort behaviour', () => {
 describe('BillingHistory — filters on mobile', () => {
   afterEach(() => { cleanup(); _reset(); window.matchMedia = originalMatchMedia; });
 
-  function filteredCount(mode: 'mobile' | 'desktop') {
+  async function filteredCount(mode: 'mobile' | 'desktop') {
     setViewport(mode);
-    const view = renderBH();
+    const view = await renderBH();
     fireEvent.change(screen.getByRole('combobox', { name: /filter by transaction type/i }), {
       target: { value: 'Deposit' },
     });
@@ -811,9 +834,9 @@ describe('BillingHistory — filters on mobile', () => {
     return count;
   }
 
-  it('the same filter shows the same number of transactions as on desktop', () => {
-    const mobile = filteredCount('mobile');
-    const desktop = filteredCount('desktop');
+  it('the same filter shows the same number of transactions as on desktop', async () => {
+    const mobile = await filteredCount('mobile');
+    const desktop = await filteredCount('desktop');
     expect(mobile).toBe(desktop);
     expect(mobile).toBe(MOCK_TRANSACTIONS.filter((t) => t.type === 'Deposit').length);
   });
@@ -822,23 +845,67 @@ describe('BillingHistory — filters on mobile', () => {
 describe('BillingHistory — touch-friendly wording', () => {
   afterEach(() => { cleanup(); _reset(); window.matchMedia = originalMatchMedia; });
 
-  it('mobile: tells users to tap Details instead of hovering', () => {
+  it('mobile: tells users to tap Details instead of hovering', async () => {
     setViewport('mobile');
-    renderBH();
+    await renderBH();
     expect(screen.getByText(/tap details/i)).toBeTruthy();
     expect(screen.queryByText(/hover/i)).toBeNull();
   });
 
-  it('mobile: hides the keyboard tip', () => {
+  it('mobile: hides the keyboard tip', async () => {
     setViewport('mobile');
-    renderBH();
+    await renderBH();
     expect(screen.queryByText(/keyboard tip/i)).toBeNull();
   });
 
-  it('desktop: keeps the hover wording and the keyboard tip', () => {
+  it('desktop: keeps the hover wording and the keyboard tip', async () => {
     setViewport('desktop');
-    renderBH();
+    await renderBH();
     expect(screen.getByText(/hover or focus any transaction row/i)).toBeTruthy();
     expect(screen.getByText(/keyboard tip/i)).toBeTruthy();
   });
 });
+
+describe('BillingHistory — deposit history states', () => {
+  afterEach(() => { cleanup(); _reset(); walletState.address = 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF'; });
+
+  it('asks for a wallet and does not fetch when none is connected', async () => {
+    walletState.address = null;
+    vi.mocked(fetchDepositEvents).mockClear();
+    renderBH();
+    expect(screen.getByText(/Connect Freighter/)).toBeTruthy();
+    expect(fetchDepositEvents).not.toHaveBeenCalled();
+  });
+
+  it('shows an alert with Retry on failure, and Retry refetches', async () => {
+    vi.mocked(fetchDepositEvents).mockRejectedValueOnce(new Error('rpc down'));
+    await renderBH();
+    expect(screen.getByRole('alert').textContent).toContain('rpc down');
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    await waitFor(() => expect(screen.getByTestId(`bh-row-${MOCK_TRANSACTIONS[0].id}`)).toBeTruthy());
+  });
+
+  it('says so when the wallet has no deposits', async () => {
+    vi.mocked(fetchDepositEvents).mockResolvedValueOnce({ transactions: [], nextCursor: null, retentionTruncated: false });
+    await renderBH();
+    expect(screen.getByText(/No deposits yet for this wallet/)).toBeTruthy();
+  });
+
+  it('explains when history falls outside the RPC retention window', async () => {
+    vi.mocked(fetchDepositEvents).mockResolvedValueOnce({ transactions: MOCK_TRANSACTIONS, nextCursor: null, retentionTruncated: true });
+    await renderBH();
+    expect(screen.getByRole('note').textContent).toContain('outside the RPC retention window');
+  });
+
+  it('Load older appends the next page without duplicate rows', async () => {
+    const [first, second, third] = MOCK_TRANSACTIONS;
+    vi.mocked(fetchDepositEvents)
+      .mockResolvedValueOnce({ transactions: [first, second], nextCursor: 'page-2', retentionTruncated: false })
+      .mockResolvedValueOnce({ transactions: [second, third], nextCursor: null, retentionTruncated: false });
+    await renderBH();
+    fireEvent.click(screen.getByRole('button', { name: 'Load older deposits' }));
+    await waitFor(() => expect(screen.getByTestId(`bh-row-${third.id}`)).toBeTruthy());
+    expect(screen.getAllByTestId(/^bh-row-/)).toHaveLength(3);
+    expect(fetchDepositEvents).toHaveBeenLastCalledWith(expect.objectContaining({ cursor: 'page-2' }));
+  });
+});
diff --git a/src/pages/BillingHistory.tsx b/src/pages/BillingHistory.tsx
index 48a6471..0e15490 100644
--- a/src/pages/BillingHistory.tsx
+++ b/src/pages/BillingHistory.tsx
@@ -34,6 +34,7 @@ import { useMediaQuery } from '../hooks/useMediaQuery';
 import BottomSheet from '../components/BottomSheet';
 import { TransactionDetails } from '../components/TransactionDetails';
 import BillingSortSelect from '../components/BillingSortSelect';
+import { useDepositHistory, type DepositHistory } from '../hooks/useDepositHistory';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -60,107 +61,6 @@ export interface BillingTransaction {
   confirmations: number;
 }
 
-// ── Mock data ─────────────────────────────────────────────────────────────────
-// Realistic-looking mock transactions for the GrantFox FWC26 prototype.
-
-export const MOCK_TRANSACTIONS: BillingTransaction[] = [
-  {
-    id: 'tx-001',
-    description: 'USDC vault deposit',
-    type: 'Deposit',
-    direction: 'credit',
-    amount: 100.00,
-    status: 'success',
-    timestamp: '2026-07-25T14:32:00Z',
-    txHash: 'A3F9B2C1D4E5F6A7B8C9D0E1F2A3B4C5D6E7F8A9B0C1D2E3F4A5B6C7D8E9F0A1',
-    network: 'Stellar Mainnet',
-    confirmations: 120,
-  },
-  {
-    id: 'tx-002',
-    description: 'WeatherSim API · 3 calls',
-    type: 'API Call',
-    direction: 'debit',
-    amount: 0.24,
-    status: 'success',
-    timestamp: '2026-07-25T15:10:22Z',
-    txHash: 'B4G0C3D2E5F6A8B9C0D1E2F3A4B5C6D7E8F9A0B1C2D3E4F5A6B7C8D9E0F1A2B3',
-    network: 'Stellar Mainnet',
-    confirmations: 98,
-  },
-  {
-    id: 'tx-003',
-    description: 'Stellar settlement · Epoch 1047',
-    type: 'Settlement',
-    direction: 'credit',
-    amount: 12.80,
-    status: 'success',
-    timestamp: '2026-07-26T00:00:00Z',
-    txHash: 'C5H1D4E3F6A9B0C1D2E3F4A5B6C7D8E9F0A1B2C3D4E5F6A7B8C9D0E1F2A3B4C5',
-    network: 'Stellar Mainnet',
-    confirmations: 60,
-  },
-  {
-    id: 'tx-004',
-    description: 'Refund · CreditScore API',
-    type: 'Refund',
-    direction: 'credit',
-    amount: 0.05,
-    status: 'success',
-    timestamp: '2026-07-26T09:17:44Z',
-    txHash: 'D6I2E5F4A7B0C1D2E3F4A5B6C7D8E9F0A1B2C3D4E5F6A7B8C9D0E1F2A3B4C5D6',
-    network: 'Stellar Mainnet',
-    confirmations: 45,
-  },
-  {
-    id: 'tx-005',
-    description: 'Network fee · tx D6I2…',
-    type: 'Fee',
-    direction: 'debit',
-    amount: 0.001,
-    status: 'success',
-    timestamp: '2026-07-26T09:17:44Z',
-    txHash: 'E7J3F6A5B8C1D2E3F4A5B6C7D8E9F0A1B2C3D4E5F6A7B8C9D0E1F2A3B4C5D6E7',
-    network: 'Stellar Mainnet',
-    confirmations: 45,
-  },
-  {
-    id: 'tx-006',
-    description: 'USDC vault deposit',
-    type: 'Deposit',
-    direction: 'credit',
-    amount: 50.00,
-    status: 'pending',
-    timestamp: '2026-07-27T11:04:00Z',
-    txHash: 'F8K4A7B6C9D2E3F4A5B6C7D8E9F0A1B2C3D4E5F6A7B8C9D0E1F2A3B4C5D6E7F8',
-    network: 'Stellar Mainnet',
-    confirmations: 2,
-  },
-  {
-    id: 'tx-007',
-    description: 'ChainRisk API · 1 call',
-    type: 'API Call',
-    direction: 'debit',
-    amount: 0.08,
-    status: 'error',
-    timestamp: '2026-07-27T13:22:10Z',
-    txHash: 'G9L5B8C7D0E3F4A5B6C7D8E9F0A1B2C3D4E5F6A7B8C9D0E1F2A3B4C5D6E7F8A9',
-    network: 'Stellar Mainnet',
-    confirmations: 0,
-  },
-  {
-    id: 'tx-008',
-    description: 'MarketFeed API · 10 calls',
-    type: 'API Call',
-    direction: 'debit',
-    amount: 0.80,
-    status: 'success',
-    timestamp: '2026-07-28T08:55:33Z',
-    txHash: 'H0M6C9D8E1F4A5B6C7D8E9F0A1B2C3D4E5F6A7B8C9D0E1F2A3B4C5D6E7F8A9B0',
-    network: 'Stellar Mainnet',
-    confirmations: 88,
-  },
-];
 
 // ── Filter & sort helpers ─────────────────────────────────────────────────────
 
@@ -223,6 +123,7 @@ function txToPreviewData(tx: BillingTransaction): PreviewCardData {
 
 export function BillingHistory() {
   const { timezone } = useAccountContext();
+  const history = useDepositHistory();
   const isMobile = useMediaQuery(MOBILE_QUERY);
   const [selectedTx, setSelectedTx] = useState<BillingTransaction | null>(null);
   const detailsTriggerRef = useRef<HTMLElement | null>(null);
@@ -286,7 +187,7 @@ export function BillingHistory() {
 
   // ── Derived filtered/sorted list ──────────────────────────────────────────
   const filteredTxs = useMemo(() => {
-    const filtered = MOCK_TRANSACTIONS.filter((tx) => {
+    const filtered = history.transactions.filter((tx) => {
       if (typeFilter !== 'All' && tx.type !== typeFilter) return false;
       if (statusFilter !== 'All' && tx.status !== statusFilter) return false;
       if (directionFilter !== 'All' && tx.direction !== directionFilter) return false;
@@ -313,7 +214,7 @@ export function BillingHistory() {
       }
       return sortDirection === 'asc' ? cmp : -cmp;
     });
-  }, [typeFilter, statusFilter, directionFilter, searchQuery, sortColumn, sortDirection]);
+  }, [history.transactions, typeFilter, statusFilter, directionFilter, searchQuery, sortColumn, sortDirection]);
 
   // ── Totals ─────────────────────────────────────────────────────────────────
   const netBalance = useMemo(() => {
@@ -444,8 +345,32 @@ export function BillingHistory() {
         </span>
       </div>
 
+      {history.status === 'ready' && history.retentionTruncated && (
+        <p className="bh-empty" role="note">
+          Older history is outside the RPC retention window and cannot be shown.
+        </p>
+      )}
+
+      {history.status === 'ready' && history.hasMore && (
+        <div className="bh-load-older">
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={history.loadOlder}
+            disabled={history.loadingMore}
+          >
+            {history.loadingMore ? 'Loading older deposits…' : 'Load older deposits'}
+          </button>
+          {history.loadMoreError && (
+            <p role="alert" className="bh-empty">{history.loadMoreError}</p>
+          )}
+        </div>
+      )}
+
       {/* ── Transaction table ─────────────────────────────────────────────── */}
-      {filteredTxs.length === 0 ? (
+      {history.status !== 'ready' ? (
+        <DepositHistoryState history={history} />
+      ) : filteredTxs.length === 0 ? (
         <div role="status" className="bh-empty">
           No transactions match the current filters.
         </div>
@@ -610,4 +535,36 @@ export function BillingHistory() {
   );
 }
 
+function DepositHistoryState({ history }: { history: DepositHistory }) {
+  if (history.status === 'no-wallet') {
+    return (
+      <div role="status" className="bh-empty">
+        Connect Freighter from the top bar to see your on-chain deposit history.
+      </div>
+    );
+  }
+  if (history.status === 'loading') {
+    return (
+      <div role="status" aria-busy="true" className="bh-empty">
+        Loading deposit history…
+      </div>
+    );
+  }
+  if (history.status === 'error') {
+    return (
+      <div role="alert" className="bh-empty">
+        <p>{history.error}</p>
+        <button type="button" className="secondary-button" onClick={history.retry}>
+          Retry
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div role="status" className="bh-empty">
+      No deposits yet for this wallet on this network.
+    </div>
+  );
+}
+
 export default BillingHistory;
diff --git a/src/services/vaultEvents.test.ts b/src/services/vaultEvents.test.ts
new file mode 100644
index 0000000..fa0dd42
--- /dev/null
+++ b/src/services/vaultEvents.test.ts
@@ -0,0 +1,143 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Address, nativeToScVal, xdr } from "@stellar/stellar-sdk";
+
+const mocks = vi.hoisted(() => ({
+  getHealth: vi.fn(),
+  getEvents: vi.fn(),
+}));
+
+vi.mock("../config/constants", async (importOriginal) => ({
+  ...await importOriginal<typeof import("../config/constants")>(),
+  STELLAR_NETWORK_LABEL: "Stellar Testnet",
+  STELLAR_RPC_URL: "https://soroban-testnet.stellar.org",
+  STELLAR_VAULT_CONTRACT_ID: "CBJZLUKQBWDMZPKNJAVONZ7GCCWADSETRXWOPN5Z3XWAUNI4F2R7XDYQ",
+}));
+
+vi.mock("@stellar/stellar-sdk", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@stellar/stellar-sdk")>();
+  return {
+    ...actual,
+    rpc: {
+      ...actual.rpc,
+      Server: class {
+        getHealth = mocks.getHealth;
+        getEvents = mocks.getEvents;
+      },
+    },
+  };
+});
+
+import { DEPOSIT_PAGE_SIZE, fetchDepositEvents } from "./vaultEvents";
+import { SIMULATION_SOURCE_ACCOUNT as WALLET } from "./vaultReads";
+import { STELLAR_VAULT_CONTRACT_ID } from "../config/constants";
+
+const TX_HASH = "a".repeat(64);
+
+function depositEvent(id: string, ledger: number, stroops: bigint, overrides: Record<string, unknown> = {}) {
+  return {
+    id,
+    type: "contract",
+    ledger,
+    ledgerClosedAt: "2026-10-20T10:00:00Z",
+    transactionIndex: 1,
+    operationIndex: 0,
+    inSuccessfulContractCall: true,
+    txHash: TX_HASH,
+    topic: [],
+    value: xdr.ScVal.scvVec([
+      nativeToScVal(stroops, { type: "i128" }),
+      nativeToScVal(0n, { type: "i128" }),
+    ]),
+    ...overrides,
+  };
+}
+
+describe("fetchDepositEvents", () => {
+  beforeEach(() => {
+    mocks.getHealth.mockReset().mockResolvedValue({ latestLedger: 500_000, oldestLedger: 450_000 });
+    mocks.getEvents.mockReset().mockResolvedValue({ events: [], latestLedger: 500_000, oldestLedger: 450_000, cursor: "" });
+  });
+
+  it("maps deposit events to billing rows with exact amounts and confirmations", async () => {
+    mocks.getEvents.mockResolvedValueOnce({
+      events: [depositEvent("evt-1", 499_990, 100_000_000n)],
+      latestLedger: 500_000,
+      oldestLedger: 450_000,
+      cursor: "c",
+    });
+    const page = await fetchDepositEvents({ address: WALLET });
+    expect(page.transactions).toEqual([{
+      id: "evt-1",
+      description: "USDC vault deposit",
+      type: "Deposit",
+      direction: "credit",
+      amount: 10,
+      status: "success",
+      timestamp: "2026-10-20T10:00:00Z",
+      txHash: TX_HASH,
+      network: "Stellar Testnet",
+      confirmations: 10,
+    }]);
+  });
+
+  it("filters to the vault contract, the deposit topic and the connected address", async () => {
+    await fetchDepositEvents({ address: WALLET });
+    const request = mocks.getEvents.mock.calls[0][0];
+    const [filter] = request.filters;
+    expect(filter.type).toBe("contract");
+    expect(filter.contractIds).toEqual([STELLAR_VAULT_CONTRACT_ID]);
+    expect(filter.topics[0][0]).toBe(xdr.ScVal.scvSymbol("deposit").toXDR("base64"));
+    expect(filter.topics[0][2]).toBe(new Address(WALLET).toScVal().toXDR("base64"));
+    expect(request.limit).toBe(DEPOSIT_PAGE_SIZE);
+  });
+
+  it("starts at the RPC's oldest ledger and flags history that falls outside retention", async () => {
+    mocks.getHealth.mockResolvedValueOnce({ latestLedger: 500_000, oldestLedger: 300_000 });
+    const page = await fetchDepositEvents({ address: WALLET });
+    expect(mocks.getEvents.mock.calls[0][0].startLedger).toBe(500_000 - 120_960);
+    expect(page.retentionTruncated).toBe(false);
+
+    mocks.getHealth.mockResolvedValueOnce({ latestLedger: 500_000, oldestLedger: 450_000 });
+    const truncated = await fetchDepositEvents({ address: WALLET });
+    expect(truncated.retentionTruncated).toBe(true);
+  });
+
+  it("returns a cursor only when the page is full, and continues with it", async () => {
+    const full = Array.from({ length: DEPOSIT_PAGE_SIZE }, (_, i) => depositEvent(`evt-${i}`, 499_000 + i, 1_000_000n));
+    mocks.getEvents.mockResolvedValueOnce({ events: full, latestLedger: 500_000, oldestLedger: 450_000, cursor: "next" });
+    const first = await fetchDepositEvents({ address: WALLET });
+    expect(first.nextCursor).toBe("next");
+
+    mocks.getEvents.mockResolvedValueOnce({ events: [], latestLedger: 500_000, oldestLedger: 450_000, cursor: "" });
+    const second = await fetchDepositEvents({ address: WALLET, cursor: first.nextCursor });
+    expect(second.nextCursor).toBeNull();
+    expect(mocks.getEvents.mock.calls[1][0]).toEqual(expect.objectContaining({ cursor: "next" }));
+  });
+
+  it("skips failed calls and events whose data is not an amount", async () => {
+    mocks.getEvents.mockResolvedValueOnce({
+      events: [
+        depositEvent("failed", 499_999, 1n, { inSuccessfulContractCall: false }),
+        depositEvent("odd", 499_999, 1n, { value: xdr.ScVal.scvString("not an amount") }),
+        depositEvent("ok", 499_999, 5_000_000n),
+      ],
+      latestLedger: 500_000,
+      oldestLedger: 450_000,
+      cursor: "",
+    });
+    const page = await fetchDepositEvents({ address: WALLET });
+    expect(page.transactions.map((tx) => tx.id)).toEqual(["ok"]);
+  });
+
+  it("rejects a non-account address before calling RPC", async () => {
+    await expect(fetchDepositEvents({ address: STELLAR_VAULT_CONTRACT_ID })).rejects.toThrow(/valid Stellar account/);
+    expect(mocks.getEvents).not.toHaveBeenCalled();
+  });
+
+  it("reports RPC failures with a user-facing message and no raw detail", async () => {
+    mocks.getEvents.mockRejectedValueOnce(new Error("HostError: secret detail"));
+    await expect(fetchDepositEvents({ address: WALLET })).rejects.toThrow("Could not load deposit history from Stellar RPC. Try again.");
+  });
+});
diff --git a/src/services/vaultEvents.ts b/src/services/vaultEvents.ts
new file mode 100644
index 0000000..42d4837
--- /dev/null
+++ b/src/services/vaultEvents.ts
@@ -0,0 +1,144 @@
+import {
+  Address,
+  StrKey,
+  rpc,
+  scValToNative,
+  xdr,
+} from "@stellar/stellar-sdk";
+import {
+  STELLAR_NETWORK_LABEL,
+  STELLAR_RPC_URL,
+  STELLAR_USDC_DECIMALS,
+  STELLAR_VAULT_CONTRACT_ID,
+} from "../config/constants";
+import type { BillingTransaction } from "../pages/BillingHistory";
+
+/**
+ * Reads a wallet's vault deposit history from the vault's `deposit` events.
+ *
+ * The vault emits `(Symbol("deposit"), version, caller)` as topics and
+ * `(amount, new_balance)` as data. Events are read with Soroban RPC
+ * `getEvents`, filtered to the connected address. Nothing is signed, and
+ * nothing is written to the ledger.
+ */
+
+const RPC_TIMEOUT_MS = 8_000;
+/** About seven days of ledgers at 5 seconds each, the usual RPC retention. */
+const LOOKBACK_LEDGERS = 120_960;
+export const DEPOSIT_PAGE_SIZE = 25;
+
+export type DepositHistoryPage = {
+  transactions: BillingTransaction[];
+  /** Cursor for the next page, or null when the page was the last one. */
+  nextCursor: string | null;
+  /** True when the requested history starts before the RPC retention window. */
+  retentionTruncated: boolean;
+};
+
+export class DepositHistoryError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "DepositHistoryError";
+  }
+}
+
+let rpcServer: rpc.Server | null = null;
+
+function getServer(): rpc.Server {
+  if (!STELLAR_RPC_URL) {
+    throw new DepositHistoryError("Stellar RPC is not configured for this network.");
+  }
+  if (!rpcServer) {
+    rpcServer = new rpc.Server(STELLAR_RPC_URL, { timeout: RPC_TIMEOUT_MS });
+  }
+  return rpcServer;
+}
+
+/** Decode the `(amount, new_balance)` data of a deposit event, or null if it has another shape. */
+function decodeDepositAmount(value: xdr.ScVal): bigint | null {
+  const native = scValToNative(value);
+  if (!Array.isArray(native) || typeof native[0] !== "bigint") return null;
+  return native[0];
+}
+
+function formatStroopsAsUsdc(stroops: bigint): number {
+  // USDC has 7 decimals; the page works in JS numbers, so amounts above
+  // Number.MAX_SAFE_INTEGER stroops would lose precision here.
+  return Number(stroops) / 10 ** STELLAR_USDC_DECIMALS;
+}
+
+/**
+ * Fetch one page of deposit events for `address`, newest first.
+ *
+ * @param cursor Pass the `nextCursor` from the previous page to continue.
+ * @param signal Aborts the request when the page or wallet changes.
+ */
+export async function fetchDepositEvents(args: {
+  address: string;
+  cursor?: string | null;
+  signal?: AbortSignal;
+}): Promise<DepositHistoryPage> {
+  const { address, cursor, signal } = args;
+  if (!STELLAR_VAULT_CONTRACT_ID || !StrKey.isValidContract(STELLAR_VAULT_CONTRACT_ID)) {
+    throw new DepositHistoryError("The Callora vault contract is not configured for this network.");
+  }
+  if (!StrKey.isValidEd25519PublicKey(address)) {
+    throw new DepositHistoryError("A valid Stellar account address is required to load deposits.");
+  }
+
+  const server = getServer();
+  const topics = [[
+    xdr.ScVal.scvSymbol("deposit").toXDR("base64"),
+    "*",
+    new Address(address).toScVal().toXDR("base64"),
+  ]];
+  const filters = [{ type: "contract" as const, contractIds: [STELLAR_VAULT_CONTRACT_ID], topics }];
+
+  let retentionTruncated = false;
+  let request: Parameters<rpc.Server["getEvents"]>[0];
+  try {
+    if (cursor) {
+      request = { filters, limit: DEPOSIT_PAGE_SIZE, cursor };
+    } else {
+      const health = await server.getHealth();
+      const earliestWanted = health.latestLedger - LOOKBACK_LEDGERS;
+      retentionTruncated = earliestWanted < health.oldestLedger;
+      request = {
+        filters,
+        limit: DEPOSIT_PAGE_SIZE,
+        startLedger: Math.max(health.oldestLedger, earliestWanted),
+      };
+    }
+    const response = await server.getEvents(request);
+    if (signal?.aborted) throw new DepositHistoryError("Request cancelled.");
+
+    const latestLedger = response.latestLedger;
+    const transactions: BillingTransaction[] = [];
+    for (const event of response.events) {
+      if (!event.inSuccessfulContractCall) continue;
+      const stroops = decodeDepositAmount(event.value);
+      if (stroops === null) continue;
+      transactions.push({
+        id: event.id,
+        description: "USDC vault deposit",
+        type: "Deposit",
+        direction: "credit",
+        amount: formatStroopsAsUsdc(stroops),
+        status: "success",
+        timestamp: event.ledgerClosedAt,
+        txHash: event.txHash,
+        network: STELLAR_NETWORK_LABEL,
+        confirmations: Math.max(0, latestLedger - event.ledger),
+      });
+    }
+
+    return {
+      transactions,
+      nextCursor: response.events.length >= DEPOSIT_PAGE_SIZE ? response.cursor : null,
+      retentionTruncated,
+    };
+  } catch (error) {
+    if (error instanceof DepositHistoryError) throw error;
+    throw new DepositHistoryError("Could not load deposit history from Stellar RPC. Try again.");
+  }
+}