Day 18/100 — Wiring BrowseMe’s frontend to the Midnight stack
Today was about turning BrowseMe’s Midnight integration from scaffolding into something that actually connects a wallet, submits a transaction, and shows real state on screen.
Settled on a four-layer frontend architecture: React UI → Contract API class → Providers → Wallet + Indexer + Proof server. The Contract API class is a thin wrapper (deploy, join, submitTx, state) around the compiled contract that hides the Midnight.js SDK plumbing from the rest of the app’s components. The wallet bridge turns an already-connected DApp connector session into a clean interface the React layer can consume, and hooks/context subscribe components to that state.
One gotcha worth flagging for anyone hitting it later: your app’s keys/ and zkir/ need to be served as static files — usually copied into public/ at dev/build time. Skip that step and proof generation fails silently, or with a 404 on fetch, and neither error points you at the actual cause.
Also fixed a transaction history upsert error that had been nagging from earlier in the week — turned out to be a matter of wiring InMemoryTransactionHistory from wallet-sdk-abstractions properly into the wallet init config, and worked on wallet address encoding so the deploy wallet and browser wallet decode to the same address.
With that in place, built out the actual BrowseMe home page — “Own the deal. Keep the details private.” — positioning it as matching businesses with investors without exposing financials, identity, or negotiation details on the public ledger. Added a Connect Wallet card that hooks into the Midnight wallet and displays the connected address.
For test funding, clicked Connect Wallet on the home page to generate a real browser-wallet address, then used the local-dev CLI’s option [2], Fund accounts by public key (NIGHT transfer only), sending 50,000 NIGHT to that exact address. Transfer confirmed and showed up correctly in the explorer as unshielded NIGHT (Received/Self). Worth noting for anyone using this path: DUST is not registered automatically here — that’s a step the recipient has to do themselves, unlike the config-file funding option which registers it for you.
Tested the whole flow end to end: the same address connected via the home page’s Connect Wallet card is the one funded through the CLI and confirmed in the explorer — NIGHT received, DUST generating once registered.
Also spent some time in the Aliit builders hangout today, talking through the 100 Days challenge, a docs issue/PR I opened, and the lack of Midnight events on the African continent — moderated by Alex.
The bigger lesson from today: the silent-failure modes (missing static assets, unregistered DUST) are the ones that cost the most debugging time, because nothing actually errors — the app just quietly doesn’t work. Adding a loud startup check for the keys/zkir path next, and documenting the DUST registration gap clearly for anyone else funding test wallets this way.