midnight-lace-react-sample-app
A sample dApp frontend for connecting to the Midnight Network (PreProd).
Use Lace Wallet to connect your wallet, view your shielded address, and check your balance.
Screenshots
Features
| Feature |
Description |
| Lace Wallet Connection |
Detects and connects to window.midnight.mnLace via 100ms polling |
| Version Validation |
Verifies that the Connector API version is >=1.0.0
|
| Network Detection |
Automatically tries networks in order: PreProd / mainnet / undeployed / preview |
| Address Display |
Shows the shielded address in a copyable format |
| Balance Display |
Shows Shielded / Unshielded / Dust balances in tDUST units |
| Language Toggle |
Instantly switch between Japanese and English via the top-right button (persisted in localStorage) |
Tech Stack
| Category |
Library / Tool |
| Framework |
React 19 + TypeScript |
| Build |
Vite 8 |
| Styling |
Tailwind CSS v4 (@tailwindcss/vite) |
| UI Components |
shadcn/ui (Button, Badge, Card) + Lucide React |
| Internationalization |
i18next 26 + react-i18next 17 |
| Wallet Integration |
@midnight-ntwrk/dapp-connector-api |
| Async Processing |
RxJS 7 |
| Package Manager |
Bun |
| Formatter |