A real-time, open-source developer dashboard for the Stellar network — built with Vite + React.
Stellar Dev Dashboard is a browser-based developer tool for exploring and interacting with the Stellar blockchain. You enter any Stellar public key and get a full view of that account — balances, transactions, operations, contracts, network stats, and more. It supports both Mainnet and Testnet, connects to real wallets (Freighter, Ledger), and lets you build, simulate, and sign transactions directly in the UI.
npm install
npm run dev # development server at http://localhost:5173
npm run build # production build → dist/
npm run preview # preview the production buildNode 18+ recommended. No environment variables required — all API calls go directly to public Stellar Horizon and Soroban RPC endpoints.
| Package | Purpose |
|---|---|
| Vite 5 + React 18 | Build tool and UI framework |
| @stellar/stellar-sdk ^12 | Horizon REST client, Soroban RPC, XDR encoding |
| Zustand ^4 | Global state management |
| Recharts ^2 | Charts (ledger close times, network metrics, account activity) |
| date-fns ^3 | Date formatting throughout the UI |
| Lucide React | Icon set |
| TypeScript (dev) | Partial migration — stellar.ts and store.ts are fully typed |
Fonts: Syne (display) and Space Mono (monospace), loaded from Google Fonts.
src/
├── main.jsx # React entry point
├── App.jsx # Root layout, tab routing, theme application
│
├── components/
│ ├── layout/
│ │ └── Sidebar.jsx # Navigation sidebar with tab links and network switcher
│ │
│ ├── dashboard/ # One component per dashboard tab/feature
│ │ ├── ConnectPanel.jsx # Landing screen — enter a public key to start
│ │ ├── Overview.jsx # Account summary + recent txs + network stats
│ │ ├── Account.jsx # Full account detail, balances, flags, signers, offers
│ │ ├── Transactions.jsx # Paginated transaction and operation history
│ │ ├── Contracts.jsx # Soroban contract inspector + invocation UI
│ │ ├── NetworkStats.jsx # Live ledger stats, fee stats, close-time chart
│ │ ├── Faucet.jsx # Testnet Friendbot funding
│ │ ├── Builder.jsx # Simple transaction builder (payment / createAccount)
│ │ ├── TransactionBuilder.jsx # Extended builder with more operation types
│ │ ├── TransactionSigner.jsx # Sign raw XDR with a connected wallet
│ │ ├── WalletConnect.jsx # Connect Freighter or Ledger hardware wallet
│ │ ├── AccountComparison.jsx # Side-by-side comparison of up to 5 accounts
│ │ ├── ComparisonChart.jsx # Bar charts for the comparison view
│ │ ├── PortfolioValue.jsx # USD portfolio value via CoinGecko prices
│ │ ├── PriceTicker.jsx # XLM price bar shown at the top of every page
│ │ ├── DEXExplorer.jsx # SDEX order book viewer + recent trades
│ │ ├── PathExplorer.jsx # Horizon path-payment route finder
│ │ ├── RealTimeLedger.jsx # Live SSE ledger stream with reconnection
│ │ ├── ExplorerEmbed.jsx # Deep-link generator for Stellar Expert / Steexp
│ │ ├── ContractABI.jsx # Contract ABI viewer
│ │ ├── ContractInteraction.jsx # Contract interaction panel
│ │ ├── OrderBookChart.jsx # Order book depth chart
│ │ ├── Card.jsx # Reusable StatCard and Card components
│ │ └── CopyableValue.jsx # Click-to-copy wrapper used throughout the UI
│ │
│ ├── charts/
│ │ ├── NetworkMetricsChart.jsx # Network-level metrics over time
│ │ ├── AccountActivityChart.jsx # Per-account activity chart
│ │ └── BalanceHistoryChart.jsx # Balance history over time
│ │
│ ├── notifications/
│ │ ├── NotificationCenter.jsx # Notification list overlay
│ │ └── NotificationItem.jsx # Individual notification card
│ │
│ ├── accessibility/
│ │ ├── KeyboardNavigation.jsx # Keyboard trap / focus management helper
│ │ └── ScreenReaderAnnouncer.jsx # ARIA live region for screen reader messages
│ │
│ ├── ErrorBoundary.jsx # React error boundary wrapping the whole app
│ └── ErrorFallback.jsx # Fallback UI shown when the boundary catches
│
├── lib/ # Pure logic — no React
│ ├── stellar.ts # All Stellar SDK calls: accounts, txs, ops, contracts,
│ │ # path payments, price feeds, validators, formatters
│ ├── stellar.js # Legacy JS version (being replaced by .ts)
│ ├── store.ts # Zustand store — full typed state shape
│ ├── store.js # Legacy JS version (being replaced by .ts)
│ ├── dex.js # Order book, trades, liquidity pools, spread calc
│ ├── priceFeed.js # CoinGecko price fetching + portfolio value calc
│ ├── streaming.js # StreamManager class — SSE ledger stream with
│ │ # auto-reconnect, pub-sub, exponential backoff
│ ├── transactionBuilder.js # Operation factory + build/simulate/submit helpers
│ ├── externalExplorers.js # URL builders for Stellar Expert and Steexp
│ ├── chartUtils.js # Recharts formatters, shared colors, placeholder data
│ ├── notifications.js # Notification type definitions and ID generator
│ ├── storage.js # IndexedDB persistence helpers
│ ├── errorReporting.js # Error reporting service wrapper
│ ├── contractInvoker.js # Contract invocation helpers
│ └── wallet/
│ ├── freighter.js # Freighter browser extension connector
│ └── ledger.js # Ledger hardware wallet connector (WebUSB/WebHID)
│
├── hooks/
│ ├── useAssetUsdEstimates.js # Fetches XLM + SDEX prices and returns USD estimates
│ │ # per balance entry; used in Overview and Account
│ ├── useNotifications.js # Convenience hook: success/error/info/warning helpers
│ └── usePersistedState.js # useState backed by IndexedDB via storage.js
│
├── utils/
│ ├── accessibility.js # announceToScreenReader + subscribeToAnnouncements
│ ├── errorHandler.js # formatErrorMessage + handleGlobalError
│ └── stateSync.js # Cross-tab state synchronization helpers
│
└── styles/
├── globals.css # CSS custom properties (design tokens), resets,
│ # animations, spinner, theme variants
├── accessibility.css # Focus ring styles, reduced-motion overrides
└── themes.js # THEMES enum, THEME_STORAGE_KEY, getSystemTheme()
The landing screen. Enter any valid Stellar public key (G...) and click Connect. The app validates the key with StrKey.isValidEd25519PublicKey, loads the account from Horizon, then fetches the first 20 transactions and operations in parallel in the background. Pressing Enter also triggers the connect.
Summary dashboard for the connected account. Shows XLM balance with a USD estimate, number of non-native assets, recent transaction count, and the account sequence number. Below that is an asset holdings table with per-asset USD estimates (fetched from SDEX order books). The bottom section shows the 5 most recent transactions and live network stats (latest ledger, base fee, close time).
Deep-dive into the connected account. Sections:
- Identity: public key, account ID, sequence number, creation date (fetched by finding the first
create_accountoperation), XLM balance with USD estimate, subentry count, link to Stellar Expert - Asset Balances: all non-native trustlines with issuer addresses and USD estimates
- Thresholds: low / medium / high signing thresholds
- Flags: auth_required, auth_revocable, auth_immutable, auth_clawback_enabled — shown as TRUE/FALSE badges
- Signers: all signers with their weights
- Open Offers: active SDEX sell offers for the account
Tabbed view switching between Transactions and Operations. Both lists support cursor-based pagination — a "Load More" button appends the next 20 records without replacing existing ones. Transactions show hash (copyable), success/fail indicator, memo, fee in stroops, operation count, and timestamp. Operations show type label (human-readable via OPERATION_LABELS map), from/to addresses, and amount.
Two panels:
Inspect Contract — enter a contract address (C...), fetches the ledger entry via SorobanRpc.Server.getContractData and displays the raw JSON result.
Invoke Contract — build a contract call with:
- Contract ID, function name, source account
- Typed arguments (string, int, address, bool) — each parsed into the correct
ScValtype - Simulate button: calls
server.simulateTransactionand shows return value, cost, events, and footprint (read-only / read-write ledger keys) - Submit button (Testnet only): signs with a secret key, calls
server.prepareTransactionthenserver.sendTransaction, shows hash and status
Mainnet safety mode disables submission but still allows simulation.
Live network data with an SSE stream via streamLedgers. Shows:
- Latest ledger sequence, base fee, close time, successful/failed tx count, operation count
- Fee statistics table: min, mode, median, max, P10, P90 accepted fees
- Ledger close time chart (Recharts LineChart) — plots close interval in seconds for the last 20 ledgers with an average reference line
- Recent ledgers table (last 10)
Calls Friendbot (https://friendbot.stellar.org?addr=<key>) to fund any testnet account with 10,000 XLM. Pre-fills with the connected address. Disabled on Mainnet.
Simple builder for payment and createAccount operations. Supports source account, memo, base fee, and time bounds (min/max Unix timestamps). Simulate button validates operations and returns estimated fee. Export XDR button copies the unsigned transaction XDR to clipboard.
Extended builder with more operation types: payment, createAccount, changeTrust, accountMerge, manageData. Supports text/id/hash/return memo types. Uses transactionBuilder.js which has a full createOperation factory covering manageSellOffer, manageBuyOffer, setOptions, and more.
Paste any unsigned transaction XDR and sign it with the connected wallet. Freighter signs via api.signTransaction. Ledger signing is noted as requiring the device to be connected. The signed XDR is displayed and can be copied.
Connect a real wallet instead of entering a public key manually:
- Freighter: detects
window.freighterApi, callsrequestAccess()thengetAddress() - Ledger: checks WebUSB/WebHID support, dynamically imports
@ledgerhq/hw-transport-webusband@stellar/ledger(optional peer deps), derives the public key from path44'/148'/0'
After connecting, the wallet's public key is set as the connected address and account data is loaded.
Compare up to 5 accounts side by side. Each slot has a public key input. Clicking "Compare All" fetches all accounts and their open offers in parallel. The comparison table shows: status, XLM balance, asset count, active orders, sequence number, subentries. Accounts can be sorted by balance, orders, or assets. Results can be exported as CSV. A ComparisonChart renders bar charts for visual comparison.
Fetches USD prices for all held assets from CoinGecko (mapped via ASSET_ID_MAP in priceFeed.js). Displays total portfolio value and a per-asset breakdown with balance, price, and USD value. 24h price change indicators (↑/↓) are shown per asset.
Persistent bar at the top of every page showing the current XLM/USD price and 24h change, refreshed every 60 seconds from CoinGecko.
Enter a selling asset (native or CODE:ISSUER) and a buying asset. Fetches the SDEX order book and recent trades via Horizon. Displays:
- Spread (absolute and percentage), best bid, best ask
- Aggregated bids and asks tables (top 10 levels with cumulative depth)
- Last 10 recent trades with price, amount, and time
Find cross-asset payment routes via Horizon's /paths/strict-send and /paths/strict-receive endpoints. Select source and destination assets (preset or custom), enter an amount, choose strict-send or strict-receive mode. Results are sorted by best rate and annotated with slippage percentage vs the best path.
Live SSE stream of incoming ledgers using the StreamManager class in streaming.js. Shows connection status (connecting / live / reconnecting / error) with a pulsing indicator. Displays the latest ledger sequence, transaction count, and operation count as summary cards, plus a scrolling feed of all received ledgers. The stream uses exponential backoff (up to 30s, max 10 attempts) on errors.
Generate deep links to external block explorers (Stellar Expert, Steexp) for accounts, transactions, contracts, assets, ledgers, and operations. Also shows quick-link cards to each explorer's homepage for the current network.
A combined view rendering three Recharts-based charts: NetworkMetricsChart, AccountActivityChart, and BalanceHistoryChart.
All global state lives in a single Zustand store (src/lib/store.ts). The store is fully typed with TypeScript interfaces. Key state slices:
| Slice | What it holds |
|---|---|
network |
'mainnet', 'testnet', 'futurenet', 'local', or 'custom' — switching resets account/tx/ops data |
connectedAddress |
The currently viewed public key |
accountData |
Full Horizon.AccountResponse |
transactions / operations |
Arrays with cursor-based pagination state |
networkStats |
Latest ledger + fee stats |
activeTab |
Which dashboard tab is rendered |
contractId / contractData |
Soroban contract inspector state |
faucetLoading / faucetResult |
Faucet request state |
| Comparison slots | Array of { key, data, loading, error } for multi-account view |
| Stream state | streamStatus, streamLedgers for the real-time ledger feed |
| Prices | CoinGecko price map keyed by asset code |
| Notifications | Array of { id, type, title, message } |
| Wallet | walletConnected, walletType, walletPublicKey |
Defined in src/lib/stellar.ts:
| Network | Horizon URL | Soroban RPC URL |
|---|---|---|
| Testnet | https://horizon-testnet.stellar.org |
https://soroban-testnet.stellar.org |
| Mainnet | https://horizon.stellar.org |
https://soroban-rpc.stellar.org |
| Futurenet | https://horizon-futurenet.stellar.org |
https://soroban-futurenet.stellar.org |
| Local | http://localhost:8000 |
http://localhost:8000/soroban/rpc |
| Custom | User defined | User defined |
The network switcher in the sidebar calls setNetwork() which resets all account-specific state.
The project is mid-migration from JavaScript to TypeScript. The Vite config sets .ts to resolve before .js, so imports of stellar and store automatically use the typed versions. tsconfig.json covers src/lib/**/*.ts with strict mode enabled. allowJs: true and checkJs: false let the remaining .jsx components import from the typed lib files without errors.
All design tokens are CSS custom properties defined in globals.css. The app supports dark and light themes via a data-theme attribute on <html>, set reactively from the Zustand theme state. Fonts are Space Mono (monospace, used for addresses, hashes, numbers) and Syne (display, used for headings). All component styles are inline — no CSS modules or Tailwind.
ScreenReaderAnnouncerrenders an ARIA live region; components callannounceToScreenReader()fromutils/accessibility.jsto push messagesKeyboardNavigationhandles focus trapping for modal-like panelsaccessibility.cssprovides focus ring styles andprefers-reduced-motionoverridesErrorBoundarywraps the app and rendersErrorFallbackon uncaught errors
This project is part of the Stellar Wave Program on Drips. Check open issues tagged Stellar Wave to contribute and earn rewards.
- Add pagination to transaction history
- Dark/light theme toggle
- Copy-to-clipboard on addresses
- Ledger close time chart (last 10 ledgers)
- Offer list viewer per account
- Real-time ledger streaming via SSE
- Asset price feed integration
- Multi-account comparison view
- Soroban contract invocation UI
- Full Soroban contract interaction panel (call contract functions)
- Transaction builder / simulator
- Path payment explorer
MIT