Skip to content

feat: Add Lightning tab to web clients#148

Merged
macterra merged 10 commits intomainfrom
147-lightning-web-client
Mar 2, 2026
Merged

feat: Add Lightning tab to web clients#148
macterra merged 10 commits intomainfrom
147-lightning-web-client

Conversation

@macterra
Copy link
Collaborator

@macterra macterra commented Mar 2, 2026

Closes #147

Summary

  • Adds Lightning tab to react-wallet and chrome-extension, visible only when connected to a Drawbridge gatekeeper
  • Detects Drawbridge support at startup by probing POST /api/v1/lightning/balance (404 = plain Gatekeeper, anything else = Drawbridge)
  • Switches GatekeeperClient to DrawbridgeClient (backwards-compatible drop-in) in both WalletProviders
  • Lightning tab has three sub-tabs: Wallet (balance/setup), Receive (create invoice + QR code), Send (decode + pay)
  • Tab and mobile "More" menu entry only appear when hasLightning is true

Test plan

  • Connect to Drawbridge backend → Lightning tab appears in sidebar and More menu
  • Connect to plain Gatekeeper backend → Lightning tab hidden
  • Wallet sub-tab: identity without Lightning shows "Set Up Lightning" button; clicking it calls addLightning() and refreshes balance
  • Wallet sub-tab: configured identity shows balance in sats
  • Receive sub-tab: enter amount + optional memo → "Create Invoice" → BOLT11 displayed with copy button and QR code
  • Send sub-tab: paste BOLT11 → "Decode" shows invoice details → "Pay" sends payment
  • npm run build in both apps passes with no TypeScript errors

🤖 Generated with Claude Code

macterra and others added 9 commits March 2, 2026 12:01
Show Lightning tab (Wallet/Receive/Send sub-tabs) in react-wallet and
chrome-extension when connected to a Drawbridge gatekeeper. Detection
uses a fetch probe against /api/v1/lightning/balance — 404 means
standard Gatekeeper, anything else means Drawbridge is available.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Same Drawbridge detection + Lightning tab (Wallet/Receive/Send) as the
other web clients, applied to the gatekeeper/client React app.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Drawbridge now serves the gatekeeper React client static files (same
ARCHON_GATEKEEPER_SERVE_CLIENT env var as the gatekeeper service).
This allows the Lightning-enabled web UI to be accessed from the
Drawbridge service endpoint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Include the gatekeeper React client build in the Drawbridge image so
the web UI is accessible at the Drawbridge service endpoint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the client is served from Drawbridge (port 4230), hardcoding :4224
caused the probe and all API calls to hit the Gatekeeper instead of
Drawbridge, resulting in 404 on the lightning endpoint and no Lightning tab.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…_URL

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
After paying an invoice, auto-call checkLightningPayment to fetch and
display the payment hash and preimage (proof of payment). Also remove
the obsolete missing-memo test since memo is now optional.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Lightning credentials are now keyed by Drawbridge server URL in the
wallet, allowing identities to have separate Lightning wallets on
different servers. Old flat-format wallets are auto-migrated on first
access.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Lightning (LNbits via Drawbridge) support to the web wallet clients, including UI entry points that only appear when connected to a Drawbridge gateway.

Changes:

  • Introduces Lightning UI (Wallet/Receive/Send) in apps/react-wallet, apps/chrome-extension, and the Gatekeeper web client.
  • Updates Keymaster Lightning storage to a per-Drawbridge-URL map with migration from the legacy flat format + expanded tests.
  • Updates Drawbridge and deployment configs (serving the Gatekeeper client, port change, docker/prometheus/env updates) and adds qrcode.react.

Reviewed changes

Copilot reviewed 22 out of 25 changed files in this pull request and generated 9 comments.

Show a summary per file
File Description
tests/keymaster/lightning.test.ts Updates/extends tests for per-URL Lightning config + migration behavior.
services/gatekeeper/client/src/KeymasterUI.js Adds Lightning tab UI (wallet/receive/send) to the Gatekeeper web client.
services/gatekeeper/client/src/App.js Switches to Drawbridge client and adds Drawbridge/Lightning probing + passes hasLightning.
services/gatekeeper/client/package.json Adds qrcode.react.
services/gatekeeper/client/package-lock.json Lockfile updates for qrcode.react + version bump.
services/drawbridge/server/src/drawbridge-api.ts Optionally serves the Gatekeeper web client build from Drawbridge.
services/drawbridge/server/src/config.ts Changes default Drawbridge port.
sample.env Updates/removes env entries; sets new Drawbridge port default.
packages/keymaster/src/keymaster.ts Stores Lightning config per Drawbridge URL + migration from old format.
packages/gatekeeper/src/types.ts Adds url to DrawbridgeInterface.
packages/gatekeeper/src/gatekeeper-client.ts Tracks connected base URL and exposes it via url getter.
observability/prometheus/prometheus.yml Updates Drawbridge scrape target port.
docker-compose.yml Removes ARCHON_SEARCH_URL env entry.
docker-compose.drawbridge.yml Updates Drawbridge port mapping/env to new default.
apps/react-wallet/src/contexts/WalletProvider.tsx Uses Drawbridge client + adds hasLightning probing at startup/settings update.
apps/react-wallet/src/components/LightningTab.tsx New Lightning UI component (wallet/receive/send with QR).
apps/react-wallet/src/BrowserContent.tsx Adds Lightning tab + “More” menu entry gated on hasLightning.
apps/react-wallet/package.json Adds qrcode.react.
apps/react-wallet/package-lock.json Lockfile updates for qrcode.react + version bump.
apps/chrome-extension/src/contexts/WalletProvider.tsx Uses Drawbridge client + adds hasLightning probing.
apps/chrome-extension/src/components/LightningTab.tsx New Lightning UI component (wallet/receive/send with QR).
apps/chrome-extension/src/components/BrowserContent.tsx Adds Lightning tab gated on hasLightning.
apps/chrome-extension/package.json Adds qrcode.react as a runtime dependency.
apps/chrome-extension/package-lock.json Lockfile updates for qrcode.react + version bump.
Dockerfile.drawbridge Builds and bundles the Gatekeeper web client into the Drawbridge image.
Files not reviewed (3)
  • apps/chrome-extension/package-lock.json: Language not supported
  • apps/react-wallet/package-lock.json: Language not supported
  • services/gatekeeper/client/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Normalize Drawbridge URLs via new URL().origin to prevent duplicate
  config entries from trailing slashes or case differences
- Add GET /lightning/supported endpoint to Drawbridge and move probe
  into DrawbridgeClient.isLightningSupported() to avoid noisy LNbits
  errors on startup
- Allow removeLightning to work without a Drawbridge connection by
  falling back to removing all Lightning configs
- Remove duplicate balance fetch from KeymasterUI Lightning tab

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@macterra macterra merged commit 73ed52e into main Mar 2, 2026
13 checks passed
@macterra macterra deleted the 147-lightning-web-client branch March 2, 2026 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Lightning tab to web clients

2 participants