feat(demo): mempool placeholder page — branded 'Not available in the demo'

The public demo has no synced chain/electrs, so opening Mempool 502'd.
Serve a self-contained branded placeholder from the mock instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago 2026-07-14 10:23:08 -04:00
parent dd31ba48a3
commit 777d54ea94

View File

@ -1250,6 +1250,29 @@ for (const [prefixes, dir] of [
for (const p of prefixes) app.use(p, express.static(path.join(DOCKER_UI, dir)))
}
// Shells that reference /app/<id>/assets/... resolve to the frontend's shared assets.
// Demo placeholder for mempool: the real explorer needs a synced chain +
// electrs, which the public demo doesn't run. Show a branded "not available
// in demo" page instead of a 502. Self-contained (inline styles/logo) so it
// renders identically from the mock origin in dev and in the demo stack.
app.get(/^\/app\/mempool(\/.*)?$/, (_req, res) => {
res.type('html').send(`<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Mempool</title></head>
<body style="margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#11131f;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
<div style="text-align:center;padding:2rem;">
<div style="display:flex;gap:6px;justify-content:center;margin-bottom:1.25rem;">
<div style="width:34px;height:34px;border-radius:7px;background:#9339f4;"></div>
<div style="width:34px;height:34px;border-radius:7px;background:#105fb0;"></div>
<div style="width:34px;height:34px;border-radius:7px;background:#00a0dc;"></div>
<div style="width:34px;height:34px;border-radius:7px;background:#00c896;"></div>
</div>
<div style="font-size:1.6rem;font-weight:700;color:#fff;letter-spacing:.02em;">mempool</div>
<p style="color:rgba(255,255,255,.55);font-size:.95rem;margin-top:.75rem;">Not available in the demo</p>
<p style="color:rgba(255,255,255,.35);font-size:.8rem;max-width:340px;margin:0.5rem auto 0;">
The block explorer runs against your node's own synced chain install Archipelago to explore mempool.space-style data privately.
</p>
</div>
</body></html>`)
})
app.get(/^\/app\/[^/]+\/assets\/(.*)$/, (req, res) => res.redirect(302, '/assets/' + req.params[0]))
// Dummy status for both the electrs-ui shell and the in-app ElectrumX sync screen.