25d17f5e92
BuiltInWallet.signMessage read `recovery` from libauth's recoverable signature, but libauth v3 names it `recoveryId`. The flag byte came out as 0, so verifiers recovered the right key only when the true recovery id happened to be 1. Signed DNS manifests and Studio uploads failed with "signature does not match current on-chain NFT owner" and a different derived address each attempt. Read the right field, fail loudly if it is missing, rebuild the browser bundle and move every importer to the new bundle URL. Also lands the registrar's signRecordsManifest that the bundle already shipped.
311 lines
15 KiB
JavaScript
311 lines
15 KiB
JavaScript
// Sirius Studio — a site builder for BCNR names.
|
||
//
|
||
// GrapesJS (BSD-3, vendored under ./vendor/grapesjs/) edits the page. On
|
||
// Publish the exported HTML+CSS becomes index.html in the name's own folder
|
||
// on Sia — bns/<name>/ — uploaded through the gateway's /api/site route,
|
||
// every request signed with the wallet key that holds the name's NFT. The
|
||
// editor's project data is saved next to it (_studio.json) so the site can
|
||
// be reopened and edited later. If the name's on-chain s3 record does not
|
||
// point at that folder yet, Publish also sends one UPD that sets it.
|
||
//
|
||
// The gateway never holds a key: it verifies each upload's signature
|
||
// against the current NFT owner and refuses writes outside bns/<name>/.
|
||
|
||
import * as BNS from "https://silentmode.st/js/bns-register.js?v=20260917sig";
|
||
|
||
const API = "https://silentmode.st";
|
||
const $ = (id) => document.getElementById(id);
|
||
const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
|
||
const name = (new URLSearchParams(location.search).get("name") || "").toLowerCase().trim();
|
||
const folder = name ? `bns/${name}/` : null;
|
||
const readUrl = (path) => `${API}/api/site/${encodeURIComponent(name)}/${path}`;
|
||
const siteUrl = () => `${API}/bns/${encodeURIComponent(name)}/`;
|
||
|
||
let wallet = null;
|
||
let entry = null; // { records, category, ... } from /api/name
|
||
let editor = null;
|
||
let dirty = false;
|
||
|
||
function status(text, cls = "") { const el = $("status"); el.textContent = text; el.className = "st " + cls; }
|
||
|
||
// ---------- session ----------
|
||
async function restoreWallet() {
|
||
if (window.siriusWallet) return window.siriusWallet;
|
||
const S = window.siriusSession;
|
||
if (!S?.restore) return null;
|
||
try {
|
||
const s = await S.restore();
|
||
if (!s?.mnemonic) return null;
|
||
return await BNS.BuiltInWallet.fromMnemonic(s.mnemonic, BNS.CHIPNET_PREFIX, s.accountPath || undefined);
|
||
} catch { return null; }
|
||
}
|
||
|
||
// ---------- signed uploads ----------
|
||
const hex = (buf) => [...new Uint8Array(buf)].map((b) => b.toString(16).padStart(2, "0")).join("");
|
||
async function signedHeaders(path, bodyBytes) {
|
||
const ts = String(Date.now());
|
||
const bodyHash = hex(await crypto.subtle.digest("SHA-256", bodyBytes));
|
||
const msg = `BNS-SITE1\n${name}\n${path}\n${bodyHash}\n${ts}`;
|
||
const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(msg)));
|
||
const sig = wallet.signMessage(digest);
|
||
return { "x-bns-ts": ts, "x-bns-sig": btoa(String.fromCharCode(...sig)) };
|
||
}
|
||
async function putFile(path, body, contentType) {
|
||
const bytes = body instanceof Uint8Array ? body : new Uint8Array(await new Blob([body]).arrayBuffer());
|
||
const headers = { "content-type": contentType, ...(await signedHeaders(path, bytes)) };
|
||
const r = await fetch(readUrl(path), { method: "PUT", headers, body: bytes });
|
||
const j = await r.json().catch(() => ({}));
|
||
if (!r.ok) throw new Error(`${path}: ${j.error || r.status}`);
|
||
return j;
|
||
}
|
||
async function listFiles() {
|
||
const r = await fetch(`${API}/api/site/${encodeURIComponent(name)}`, { cache: "no-store" });
|
||
if (!r.ok) return [];
|
||
const j = await r.json().catch(() => ({}));
|
||
return j.files || [];
|
||
}
|
||
|
||
// ---------- templates ----------
|
||
const TEMPLATES = {
|
||
blank: { html: `<section style="padding:60px 20px;text-align:center"><h1>${esc(name)}</h1><p>Start building.</p></section>`, css: `body{font-family:system-ui,sans-serif;margin:0;color:#111}` },
|
||
landing: {
|
||
html: `
|
||
<header class="hero">
|
||
<h1>Hello from ${esc(name)}</h1>
|
||
<p>A name on the Bitcoin Cash chain, a site on Sia. No host, no renewal, no permission.</p>
|
||
<a class="cta" href="#more">Learn more</a>
|
||
</header>
|
||
<section id="more" class="features">
|
||
<div class="f"><h3>Yours</h3><p>The certificate sits in your wallet. Nobody can take it back.</p></div>
|
||
<div class="f"><h3>Fast</h3><p>Served from Sia through any BCNR resolver or the public gateway.</p></div>
|
||
<div class="f"><h3>Simple</h3><p>Edit this page in Sirius Studio and publish in one click.</p></div>
|
||
</section>
|
||
<footer class="foot">© ${new Date().getFullYear()} ${esc(name)} · built with Sirius Studio</footer>`,
|
||
css: `
|
||
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#12161f;background:#fff}
|
||
.hero{padding:96px 24px 72px;text-align:center;background:linear-gradient(180deg,#0b0e14,#141a24);color:#f1f4fa}
|
||
.hero h1{font-size:44px;margin:0 0 12px;letter-spacing:-.01em}
|
||
.hero p{font-size:18px;color:#b8c2d4;max-width:560px;margin:0 auto 26px}
|
||
.cta{display:inline-block;background:#d6ff3d;color:#0b0e14;font-weight:700;padding:12px 22px;border-radius:10px;text-decoration:none}
|
||
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:960px;margin:0 auto;padding:56px 24px}
|
||
.f{background:#f5f7fb;border-radius:14px;padding:22px}
|
||
.f h3{margin:0 0 8px}
|
||
.f p{margin:0;color:#4a5568}
|
||
.foot{text-align:center;padding:28px;color:#6a7488;font-size:13px;border-top:1px solid #e6e9f0}`,
|
||
},
|
||
profile: {
|
||
html: `
|
||
<main class="card">
|
||
<div class="avatar">★</div>
|
||
<h1>${esc(name)}</h1>
|
||
<p class="bio">One line about you. Edit me.</p>
|
||
<a class="link" href="https://">Website</a>
|
||
<a class="link" href="https://">Nostr</a>
|
||
<a class="link" href="https://">Bitcoin Cash tips</a>
|
||
<a class="link" href="mailto:">Email</a>
|
||
</main>`,
|
||
css: `
|
||
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 0,#1a2233,#050810);font-family:system-ui,sans-serif;color:#f1f4fa}
|
||
.card{width:min(420px,92vw);text-align:center;padding:36px 24px}
|
||
.avatar{width:88px;height:88px;border-radius:50%;background:#d6ff3d;color:#0b0e14;font-size:40px;line-height:88px;margin:0 auto 14px}
|
||
h1{margin:0 0 6px;font-size:26px}
|
||
.bio{color:#b8c2d4;margin:0 0 22px}
|
||
.link{display:block;background:#141a24;border:1px solid rgba(255,255,255,.1);color:#f1f4fa;text-decoration:none;padding:14px;border-radius:12px;margin:10px 0;font-weight:600}
|
||
.link:hover{border-color:#d6ff3d}`,
|
||
},
|
||
business: {
|
||
html: `
|
||
<nav class="nav"><b>${esc(name)}</b><span><a href="#about">About</a><a href="#services">Services</a><a href="#contact">Contact</a></span></nav>
|
||
<header class="top"><h1>We are open</h1><p>Say what you do in one sentence.</p></header>
|
||
<section id="about" class="sec"><h2>About</h2><p>Two or three sentences about the business, the people and the place.</p></section>
|
||
<section id="services" class="sec alt"><h2>Services</h2>
|
||
<ul class="grid"><li><b>Service one</b><span>Short description.</span></li><li><b>Service two</b><span>Short description.</span></li><li><b>Service three</b><span>Short description.</span></li></ul></section>
|
||
<section id="contact" class="sec"><h2>Contact</h2><p>Street 1, City · Mon–Fri 9–18 · <a href="mailto:">hello@example</a></p></section>
|
||
<footer class="foot">© ${new Date().getFullYear()} ${esc(name)}</footer>`,
|
||
css: `
|
||
body{margin:0;font-family:Georgia,serif;color:#2b1d12;background:#fff8f0}
|
||
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid #eadfd0;font-family:system-ui,sans-serif}
|
||
.nav a{margin-left:18px;color:#7a3b00;text-decoration:none}
|
||
.top{text-align:center;padding:80px 24px;background:#7a3b00;color:#fff4e6}
|
||
.top h1{font-size:42px;margin:0 0 10px}
|
||
.sec{max-width:820px;margin:0 auto;padding:48px 24px}
|
||
.sec.alt{max-width:none;background:#fff1e0}
|
||
.sec.alt h2,.sec.alt ul{max-width:820px;margin-left:auto;margin-right:auto}
|
||
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
|
||
.grid li{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
|
||
.grid b{display:block;margin-bottom:6px}
|
||
.foot{text-align:center;padding:24px;color:#8a6d55;font-size:13px}`,
|
||
},
|
||
};
|
||
|
||
// ---------- editor ----------
|
||
function plugin(nameOrObj) {
|
||
const p = window[nameOrObj];
|
||
return p && (p.default || p);
|
||
}
|
||
function initEditor() {
|
||
const plugins = [];
|
||
const pluginsOpts = {};
|
||
const basic = plugin("grapesjs-blocks-basic"); if (basic) { plugins.push(basic); pluginsOpts[basic] = { flexGrid: true }; }
|
||
const preset = plugin("grapesjs-preset-webpage"); if (preset) { plugins.push(preset); pluginsOpts[preset] = { modalImportTitle: "Import HTML", blocks: [] }; }
|
||
editor = grapesjs.init({
|
||
container: "#gjs",
|
||
height: "100%",
|
||
fromElement: false,
|
||
storageManager: false,
|
||
plugins,
|
||
pluginsOpts,
|
||
canvas: { styles: [] },
|
||
assetManager: {
|
||
upload: false,
|
||
uploadFile: async (e) => {
|
||
const files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
|
||
for (const f of files) await uploadAsset(f);
|
||
},
|
||
},
|
||
});
|
||
editor.on("update", () => { dirty = true; $("btn-draft").disabled = false; });
|
||
// Ctrl/Cmd+S saves a draft.
|
||
document.addEventListener("keydown", (e) => { if ((e.ctrlKey || e.metaKey) && e.key === "s") { e.preventDefault(); saveDraft(); } });
|
||
window.addEventListener("beforeunload", (e) => { if (dirty) { e.preventDefault(); e.returnValue = ""; } });
|
||
}
|
||
function loadTemplate(key) {
|
||
const t = TEMPLATES[key] || TEMPLATES.blank;
|
||
editor.setComponents(t.html);
|
||
editor.setStyle(t.css);
|
||
dirty = true; $("btn-draft").disabled = false;
|
||
}
|
||
async function uploadAsset(file) {
|
||
const safe = file.name.toLowerCase().replace(/[^a-z0-9._-]/g, "-").replace(/-+/g, "-");
|
||
const path = `assets/${Date.now().toString(36)}-${safe}`;
|
||
status(`Uploading ${file.name}…`, "busy");
|
||
try {
|
||
const bytes = new Uint8Array(await file.arrayBuffer());
|
||
await putFile(path, bytes, file.type || "application/octet-stream");
|
||
editor.AssetManager.add({ src: readUrl(path), name: file.name, type: "image" });
|
||
status(`Uploaded ${file.name}`, "ok");
|
||
} catch (e) { status("Upload failed: " + (e.message || e), "err"); }
|
||
}
|
||
|
||
// Exported page: inline CSS, asset URLs rewritten to be relative to the
|
||
// site folder so the page works from Sia, any resolver and the gateway.
|
||
function exportHtml() {
|
||
const html = editor.getHtml();
|
||
const css = editor.getCss();
|
||
const rel = (s) => s.split(readUrl("")).join("");
|
||
return `<!doctype html>
|
||
<html lang="${esc(document.documentElement.lang || "en")}">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>${esc(name)}</title>
|
||
<meta name="generator" content="Sirius Studio">
|
||
<style>
|
||
${rel(css)}
|
||
</style>
|
||
</head>
|
||
${rel(html)}
|
||
</html>
|
||
`;
|
||
}
|
||
|
||
// ---------- draft / publish ----------
|
||
function pushStep(t) { const d = document.createElement("div"); d.textContent = t; $("pub-steps").appendChild(d); $("pub-steps").scrollTop = 1e6; }
|
||
async function saveDraft() {
|
||
if (!editor || !wallet) return;
|
||
status("Saving draft…", "busy");
|
||
try {
|
||
const data = JSON.stringify({ v: 1, name, saved_at: new Date().toISOString(), project: editor.getProjectData() });
|
||
await putFile("_studio.json", data, "application/json");
|
||
dirty = false; $("btn-draft").disabled = true;
|
||
status("Draft saved on Sia", "ok");
|
||
} catch (e) { status("Draft not saved: " + (e.message || e), "err"); }
|
||
}
|
||
async function publish() {
|
||
if (!editor || !wallet) return;
|
||
$("pub-name").textContent = name; $("pub-steps").innerHTML = ""; $("pub-view").hidden = true; $("pub").hidden = false;
|
||
$("btn-publish").disabled = true;
|
||
try {
|
||
const html = exportHtml();
|
||
pushStep(`exported page · ${html.length.toLocaleString()} bytes`);
|
||
const res = await putFile("index.html", html, "text/html; charset=utf-8");
|
||
pushStep(`uploaded index.html → ${res.sia_key}`);
|
||
const data = JSON.stringify({ v: 1, name, saved_at: new Date().toISOString(), project: editor.getProjectData() });
|
||
await putFile("_studio.json", data, "application/json");
|
||
pushStep("saved editor project (_studio.json)");
|
||
dirty = false; $("btn-draft").disabled = true;
|
||
// Point the name at the folder if it does not already.
|
||
const rec = entry?.records || {};
|
||
if (rec.s3 !== folder) {
|
||
pushStep(`name points at ${rec.s3 ? `"${rec.s3}"` : "nothing"} — setting s3 = ${folder} on chain`);
|
||
const next = { ...rec, s3: folder };
|
||
delete next.h; // inline HTML would shadow the Sia site
|
||
let el = null;
|
||
try {
|
||
el = await BNS.connect();
|
||
const r = await BNS.setRecordsWithBuiltInWallet(el, { wallet, name, records: next, onProgress: (s) => pushStep(String(s)) });
|
||
pushStep(`broadcast ${r.txid || r.txId || ""}`);
|
||
entry = { ...(entry || {}), records: next };
|
||
} finally { try { el?.close?.(); } catch {} }
|
||
pushStep("resolvers switch to the new site within a block");
|
||
} else {
|
||
pushStep("name already points at this folder — live now");
|
||
}
|
||
$("pub-view").href = siteUrl(); $("pub-view").hidden = false;
|
||
$("btn-view").href = siteUrl(); $("btn-view").hidden = false;
|
||
status("Published", "ok");
|
||
} catch (e) {
|
||
pushStep("error: " + (e.message || e));
|
||
status("Publish failed", "err");
|
||
} finally { $("btn-publish").disabled = false; }
|
||
}
|
||
|
||
// ---------- boot ----------
|
||
(async function boot() {
|
||
if (!name) { location.replace("./portal.html#studio"); return; }
|
||
$("site-name").innerHTML = `${esc(name.split(".")[0])}.<span class="tld">${esc(name.split(".").slice(1).join("."))}</span>`;
|
||
$("picker-name").textContent = name;
|
||
document.title = `${name} — Sirius Studio`;
|
||
wallet = await restoreWallet();
|
||
if (!wallet) { $("gate-link").href = `./portal.html?next=${encodeURIComponent(location.pathname + location.search)}`; $("gate").hidden = false; status("Not signed in", "err"); return; }
|
||
status("Loading name…");
|
||
try { const r = await fetch(`${API}/api/name/${encodeURIComponent(name)}`, { cache: "no-store" }); entry = r.ok ? await r.json() : null; } catch { entry = null; }
|
||
initEditor();
|
||
$("btn-publish").disabled = false;
|
||
if (entry?.records?.s3 === folder) { $("btn-view").href = siteUrl(); $("btn-view").hidden = false; }
|
||
// Existing project?
|
||
const files = await listFiles();
|
||
const hasProject = files.some((f) => f.path === "_studio.json");
|
||
if (hasProject) {
|
||
try {
|
||
const j = await (await fetch(readUrl("_studio.json"), { cache: "no-store" })).json();
|
||
if (j?.project) { editor.loadProjectData(j.project); dirty = false; status(`Loaded draft from ${j.saved_at ? new Date(j.saved_at).toLocaleString() : "Sia"}`, "ok"); }
|
||
} catch (e) { status("Could not load the saved project: " + (e.message || e), "err"); $("picker").hidden = false; }
|
||
} else if (files.some((f) => f.path === "index.html")) {
|
||
// A site exists but was not made here — import its HTML as a starting point.
|
||
try {
|
||
const html = await (await fetch(readUrl("index.html"), { cache: "no-store" })).text();
|
||
editor.setComponents(html); status("Imported existing index.html", "ok");
|
||
} catch { $("picker").hidden = false; }
|
||
} else {
|
||
$("picker").hidden = false; status("New site");
|
||
}
|
||
})();
|
||
|
||
$("picker").addEventListener("click", (e) => {
|
||
const b = e.target.closest("[data-tpl]"); if (!b) return;
|
||
loadTemplate(b.dataset.tpl); $("picker").hidden = true; status("Template loaded — edit, then Publish");
|
||
});
|
||
$("tpl-select").addEventListener("change", (e) => {
|
||
const v = e.target.value; e.target.value = "";
|
||
if (!v) return;
|
||
if (!confirm("Replace the current page with this template?")) return;
|
||
loadTemplate(v);
|
||
});
|
||
$("btn-preview").addEventListener("click", () => {
|
||
const w = window.open("", "_blank"); if (!w) return;
|
||
w.document.open(); w.document.write(exportHtml()); w.document.close();
|
||
});
|
||
$("btn-draft").addEventListener("click", saveDraft);
|
||
$("btn-publish").addEventListener("click", publish);
|
||
$("pub-close").addEventListener("click", () => { $("pub").hidden = true; });
|