// Reusable name-registration mint flow — the modal + wallet setup + on-chain // mint sequence that used to live inside register.html. Any Sirius.X page can // include this module and call `window.siriusRegisterName(fullName)` to open // the flow for a specific `.`. The landing's search cards call // it directly; a legacy register.html redirect keeps old links working. // // Injects its own modal HTML into and its own CSS into on load // so the host page needs nothing but a single script include. import * as BNS from "https://silentmode.st/js/bns-register.js?v=20260908split"; const $ = (id) => document.getElementById(id); const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&":"&","<":"<",">":">",'"':""","'":"'" }[c])); const sats = (v) => Number(v).toLocaleString("en-US"); // ---------- inject CSS + modal HTML ---------- // The style block is a straight copy of register.html's modal/sheet styling // — kept scoped by prefixing every selector with #sirius-register-modal so it // cannot collide with the host page's own .modal / .sheet classes. (function injectAssets() { if (document.getElementById("sirius-register-flow-css")) return; const css = document.createElement("style"); css.id = "sirius-register-flow-css"; css.textContent = ` #sirius-register-modal{position:fixed;inset:0;background:rgba(6,9,14,.82);backdrop-filter:blur(3px); display:none;align-items:flex-start;justify-content:center;padding:3vh 1rem;overflow-y:auto;z-index:100} #sirius-register-modal.open{display:flex} #sirius-register-modal .sheet{background:var(--panel,#141a24);border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:16px;max-width:620px;width:100%;padding:26px 28px 28px;color:var(--ink,#e7eaf1)} #sirius-register-modal .sheet h3{margin:0 0 .2rem;font-size:1.25rem} #sirius-register-modal .sheet .sub{color:var(--mut,#8b98a9);font-size:14px;margin:0 0 1.2rem} #sirius-register-modal .sheet label{display:block;font-size:13px;color:var(--mut,#8b98a9);margin:14px 0 5px} #sirius-register-modal .sheet input[type=text], #sirius-register-modal .sheet input[type=password], #sirius-register-modal .sheet textarea, #sirius-register-modal .sheet select{ width:100%;padding:11px 13px;border-radius:10px;border:1px solid #ffffff22;background:#0e131b; color:var(--ink,#e7eaf1);font-size:14px;font-family:inherit;outline:none} #sirius-register-modal .sheet textarea{min-height:76px;resize:vertical;font-family:ui-monospace,monospace;font-size:13px} #sirius-register-modal .sheet input:focus, #sirius-register-modal .sheet textarea:focus{border-color:#4b7bec} #sirius-register-modal .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} #sirius-register-modal .row.end{justify-content:flex-end} #sirius-register-modal .x{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--dim,#5e6678);font-size:22px;cursor:pointer} #sirius-register-modal .sheetwrap{position:relative;width:100%;max-width:620px} #sirius-register-modal .phrase{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} #sirius-register-modal .phrase span{background:#0e131b;border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:8px;padding:8px 10px;font-family:ui-monospace,monospace;font-size:13px} #sirius-register-modal .phrase span b{color:var(--dim,#5e6678);font-weight:400;margin-right:6px;font-size:11px} #sirius-register-modal .addr{display:flex;gap:8px;align-items:center;margin-top:8px} #sirius-register-modal .addr code{flex:1;word-break:break-all;background:#0e131b; border:1px solid var(--line,rgba(255,255,255,.09));border-radius:8px;padding:9px 11px; font-family:ui-monospace,monospace;font-size:12.5px} #sirius-register-modal table.price{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px} #sirius-register-modal table.price td{padding:7px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.09));color:var(--mut,#8b98a9)} #sirius-register-modal table.price td:last-child{text-align:right;font-family:ui-monospace,monospace;color:var(--ink,#e7eaf1)} #sirius-register-modal table.price tr.total td{border-bottom:none;color:var(--ink,#e7eaf1);font-weight:600;padding-top:12px} #sirius-register-modal table.price tr.total td:last-child{color:var(--acid,#d6ff3d)} #sirius-register-modal table.price td small{display:block;color:var(--dim,#5e6678);font-size:11.5px} #sirius-register-modal .steps-log{margin-top:14px;font-family:ui-monospace,monospace;font-size:12.5px; color:var(--mut,#8b98a9);background:#0e131b;border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:10px;padding:12px 14px;max-height:180px;overflow-y:auto} #sirius-register-modal .steps-log div::before{content:"› ";color:var(--acid,#d6ff3d)} #sirius-register-modal .err{color:var(--taken,#f6768a);font-size:13.5px;margin-top:12px} #sirius-register-modal .ok{color:var(--ok,#4fd1a5)} #sirius-register-modal .pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px; background:rgba(214,255,61,.13);color:var(--acid,#d6ff3d);margin-left:8px;vertical-align:middle} #sirius-register-modal .pill.soon{background:rgba(255,255,255,.07);color:var(--dim,#5e6678)} #sirius-register-modal .wopt{display:flex;gap:14px;align-items:flex-start;background:var(--panel2,#18202c); border:1px solid var(--line,rgba(255,255,255,.09));border-radius:12px;padding:14px 16px;cursor:pointer; text-align:left;width:100%;color:inherit;font:inherit;margin-top:10px} #sirius-register-modal .wopt:hover{border-color:#4b7bec} #sirius-register-modal .wopt:disabled{opacity:.45;cursor:not-allowed} #sirius-register-modal .wopt .ic{font-size:22px;line-height:1} #sirius-register-modal .wopt b{display:block;font-size:14.5px} #sirius-register-modal .wopt span{color:var(--mut,#8b98a9);font-size:13px} #sirius-register-modal .chk{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--mut,#8b98a9)} #sirius-register-modal .chk input{margin-top:3px} #sirius-register-modal .signin-tabs{ display:flex;gap:2px;margin:-8px -12px 18px;padding:0 4px 0; border-bottom:1px solid var(--line,rgba(255,255,255,.09));overflow-x:auto } #sirius-register-modal .signin-tabs button{ background:none;border:none;color:var(--mut,#8b98a9);font-family:inherit;font-size:12.5px; padding:10px 12px;cursor:pointer;border-bottom:2px solid transparent; white-space:nowrap;letter-spacing:.2px;transition:color .1s,border-color .1s } #sirius-register-modal .signin-tabs button:hover{color:var(--ink,#e7eaf1)} #sirius-register-modal .signin-tabs button.active{ color:var(--acid,#d6ff3d);border-bottom-color:var(--acid,#d6ff3d) } /* Inline-sheet variant: same step content styling as the modal, but rendered as a normal page section (no fixed positioning, no backdrop, no shadow). Portal.html uses this so the tabbed sign-in IS the page. */ .sirius-inline-sheet{ background:var(--panel,#141a24);border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:16px;padding:22px 24px;color:var(--ink,#e7eaf1) } .sirius-inline-sheet h3{margin:0 0 .2rem;font-size:1.15rem} .sirius-inline-sheet .sub{color:var(--mut,#8b98a9);font-size:14px;margin:0 0 1.2rem} .sirius-inline-sheet label{display:block;font-size:13px;color:var(--mut,#8b98a9);margin:14px 0 5px} .sirius-inline-sheet input[type=text], .sirius-inline-sheet input[type=password], .sirius-inline-sheet textarea, .sirius-inline-sheet select{ width:100%;padding:11px 13px;border-radius:10px;border:1px solid #ffffff22;background:#0e131b; color:var(--ink,#e7eaf1);font-size:14px;font-family:inherit;outline:none } .sirius-inline-sheet textarea{min-height:76px;resize:vertical;font-family:ui-monospace,monospace;font-size:13px} .sirius-inline-sheet input:focus,.sirius-inline-sheet textarea:focus{border-color:#4b7bec} .sirius-inline-sheet .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .sirius-inline-sheet .row.end{justify-content:flex-end} .sirius-inline-sheet .phrase{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .sirius-inline-sheet .phrase span{background:#0e131b;border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:8px;padding:8px 10px;font-family:ui-monospace,monospace;font-size:13px} .sirius-inline-sheet .phrase span b{color:var(--dim,#5e6678);font-weight:400;margin-right:6px;font-size:11px} .sirius-inline-sheet .addr{display:flex;gap:8px;align-items:center;margin-top:8px} .sirius-inline-sheet .addr code{flex:1;word-break:break-all;background:#0e131b; border:1px solid var(--line,rgba(255,255,255,.09));border-radius:8px;padding:9px 11px; font-family:ui-monospace,monospace;font-size:12.5px} .sirius-inline-sheet .steps-log{margin-top:14px;font-family:ui-monospace,monospace;font-size:12.5px; color:var(--mut,#8b98a9);background:#0e131b;border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:10px;padding:12px 14px;max-height:180px;overflow-y:auto} .sirius-inline-sheet .steps-log div::before{content:"› ";color:var(--acid,#d6ff3d)} .sirius-inline-sheet .err{color:var(--taken,#f6768a);font-size:13.5px;margin-top:12px} .sirius-inline-sheet .ok{color:var(--ok,#4fd1a5)} .sirius-inline-sheet .note{background:var(--panel2,#18202c);border:1px solid var(--line,rgba(255,255,255,.09)); border-left:3px solid var(--acid,#d6ff3d);border-radius:10px;padding:14px 18px; color:var(--mut,#8b98a9);font-size:14px;margin-top:1.4rem} .sirius-inline-sheet .note.warn{border-left-color:var(--warn,#ffc75f)} .sirius-inline-sheet .note b{color:var(--ink,#e7eaf1)} .sirius-inline-sheet .mono{background:#0e131b;border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px} .sirius-inline-sheet .chk{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--mut,#8b98a9)} .sirius-inline-sheet .chk input{margin-top:3px} .sirius-inline-sheet .signin-tabs{ display:flex;gap:2px;margin:-6px -8px 18px;padding:0 4px; border-bottom:1px solid var(--line,rgba(255,255,255,.09));overflow-x:auto } .sirius-inline-sheet .signin-tabs button{ background:none;border:none;color:var(--mut,#8b98a9);font-family:inherit;font-size:13px; padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent; white-space:nowrap;letter-spacing:.2px;transition:color .1s,border-color .1s } .sirius-inline-sheet .signin-tabs button:hover{color:var(--ink,#e7eaf1)} .sirius-inline-sheet .signin-tabs button.active{ color:var(--acid,#d6ff3d);border-bottom-color:var(--acid,#d6ff3d) } .sirius-inline-sheet .btn{display:inline-block;text-decoration:none;padding:10px 18px;border-radius:10px; background:#4b7bec;color:#fff;font-size:14px;border:none;cursor:pointer;font-family:inherit} .sirius-inline-sheet .btn.ghost{background:transparent;border:1px solid var(--line,rgba(255,255,255,.09));color:var(--ink,#e7eaf1)} .sirius-inline-sheet .btn.acid{background:var(--acid,#d6ff3d);color:#0b0e14;font-weight:600} .sirius-inline-sheet .btn:hover{filter:brightness(1.12)} .sirius-inline-sheet .btn:disabled{opacity:.45;cursor:not-allowed;filter:none} .sirius-inline-sheet .wopt{display:flex;gap:14px;align-items:flex-start;background:var(--panel2,#18202c); border:1px solid var(--line,rgba(255,255,255,.09));border-radius:12px;padding:14px 16px;cursor:pointer; text-align:left;width:100%;color:inherit;font:inherit;margin-top:10px} .sirius-inline-sheet .wopt:hover{border-color:#4b7bec} .sirius-inline-sheet .wopt .ic{font-size:22px;line-height:1} .sirius-inline-sheet .wopt b{display:block;font-size:14.5px} .sirius-inline-sheet .wopt span{color:var(--mut,#8b98a9);font-size:13px} #sirius-register-modal .btn{display:inline-block;text-decoration:none;padding:10px 18px;border-radius:10px; background:#4b7bec;color:#fff;font-size:14px;border:none;cursor:pointer;font-family:inherit} #sirius-register-modal .btn.ghost{background:transparent;border:1px solid var(--line,rgba(255,255,255,.09));color:var(--ink,#e7eaf1)} #sirius-register-modal .btn.acid{background:var(--acid,#d6ff3d);color:#0b0e14;font-weight:600} #sirius-register-modal .btn:hover{filter:brightness(1.12)} #sirius-register-modal .btn:disabled{opacity:.45;cursor:not-allowed;filter:none} #sirius-register-modal .mono{background:#0e131b;border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px} #sirius-register-modal .muted{color:var(--dim,#5e6678);font-size:13px} #sirius-register-modal .note{background:var(--panel,#141a24);border:1px solid var(--line,rgba(255,255,255,.09)); border-left:3px solid var(--acid,#d6ff3d);border-radius:10px;padding:14px 18px; color:var(--mut,#8b98a9);font-size:14px;margin-top:1.4rem} #sirius-register-modal .note b{color:var(--ink,#e7eaf1)} #sirius-register-modal .note.warn{border-left-color:var(--warn,#ffc75f)} `; document.head.appendChild(css); const modal = document.createElement("div"); modal.id = "sirius-register-modal"; modal.innerHTML = `

`; document.body.appendChild(modal); })(); // ---------- flow state ---------- // signInOnly: when true, the flow is used for wallet onboarding from the nav // dropdown — no name to mint, so instead of walking through Fund/Confirm/ // Register we stop at 'wallet is ready', write siriusProfile, and close. // inlineTarget: when set, the flow renders into that page element instead // of the modal sheet (portal.html uses this to embed the tabbed sign-in as // the page's main content). The modal is left closed in inline mode. const state = { name: null, signInOnly: false, inlineTarget: null, wallet: null, session: null, client: null, quote: null, result: null }; const modal = $("sirius-register-modal"); const modalSheet = $("sirius-reg-sheet"); // `sheet` is the element the step functions render into — the modal's sheet // by default, or an inline container when siriusRenderSignInInline() is // active. `let` so it can be reassigned per call. let sheet = modalSheet; function open() { // Inline mode never opens the modal — the sign-in UI lives on the page. if (state.inlineTarget) return; modal.classList.add("open"); } function close() { // In inline mode we can't "close" — leave the content in place. State is // still reset so the next call starts fresh. if (!state.inlineTarget) modal.classList.remove("open"); if (state.client) { try { state.client.close(); } catch {} state.client = null; } // Keep the WC session alive when signing in — later record edits or TLD // mints will need it; only tear it down for the mint flow. if (state.session && !state.signInOnly) { try { state.session.disconnect(); } catch {} state.session = null; } state.signInOnly = false; // Restore the modal sheet as the default render target so subsequent // register/mint flows (which are modal-based) work. if (state.inlineTarget) { state.inlineTarget = null; sheet = modalSheet; } } // Persist wallet identity so profile-menu.js and any other tab see the // signed-in state immediately (same as portal.html's writeProfile). function writeProfile(w) { try { localStorage.setItem("siriusProfile", JSON.stringify({ address: w.address, tokenAddress: w.tokenAddress, source: w.source ?? "seed", signedInAt: Date.now(), })); } catch {} window.dispatchEvent(new Event("siriusProfileChanged")); } // A wallet was just loaded/created/connected. If we are in sign-in-only // mode, mark siriusProfile and close the modal here; otherwise return // false so the caller keeps going to Fund → Confirm → Register. function finishSignIn(w) { writeProfile({ address: w.address, tokenAddress: w.tokenAddress, source: w.source ?? "seed" }); // Expose the live wallet globally so the portal / TLD page can pick it up // without re-prompting for a password. In-memory only — cleared on reload, // sign-out, or navigation away. window.siriusWallet = w; if (state.signInOnly) { render(`

✓ Signed in

You are signed in as ${esc(w.address)}. Names you own will appear in the wallet dropdown; the same wallet signs record edits and new registrations.

`); $("fin").onclick = close; return true; } return false; } $("sirius-reg-close").onclick = close; modal.addEventListener("click", (e) => { if (e.target === modal) close(); }); // Step functions render into `sheet`, which is reassigned per call by // renderSignInInline() when the flow is mounted inline on a host page // (portal.html). Modal by default. Direct write — no separate variable // needed since `sheet` above is the single mutable target. function render(html) { sheet.innerHTML = html; } // Tab bar for sign-in mode — lets the user jump between the four wallet // actions without going back to a wallet-choice screen. Prepended to the // sheet content by each sign-in step. Only shown in signInOnly mode. function renderTabs(active) { if (!state.signInOnly) return ""; const saved = BNS.BuiltInWallet.exists(); // The four tabs are always present so the layout is stable across sessions. // When there is no saved wallet on this device, the Unlock tab still shows // — clicking it lands on a stepUnlock screen that explains why unlock is // not available and offers a shortcut to Create or Import instead. const tabs = [ ["unlock", "🔓 Unlock", saved ? "Wallet stored on this device" : "No saved wallet on this device"], ["new", "🆕 Create", "Sign up · fresh phrase"], ["import", "📥 Import", "Sign in · seed you have"], ["wc", "🔗 WizardConnect", "Cashonize / Paytaca"], ]; return ` `; } // Wire tab clicks — document-level delegation so both the modal sheet and // any inline container hosting the tabs work with one listener. Switching // away from a live WC session tears it down first so we don't leak // connections. Guarded to only match .signin-tabs buttons we render. document.addEventListener("click", async (e) => { const t = e.target.closest(".signin-tabs [data-tab]"); if (!t) return; const which = t.dataset.tab; if (which !== "wc" && state.session) { try { await state.session.disconnect(); } catch {} state.session = null; } if (which === "unlock") stepUnlock(); else if (which === "new") stepCreate(); else if (which === "import") stepImport(); else if (which === "wc") stepExternal(); }); function err(e) { sheet.querySelectorAll(".err").forEach((n) => n.remove()); const box = document.createElement("div"); box.className = "err"; box.textContent = e?.message ?? String(e); sheet.appendChild(box); } async function client() { if (!state.client) state.client = await BNS.connect(); return state.client; } // If the user already unlocked a wallet in this tab (via inline sign-in on // portal.html or a prior mint), the register/TLD mint flow can skip the // wallet-choice step entirely and go straight to Fund / Confirm. That's // what stops the flow from asking for the password a second time on a // TLD buy right after unlocking. function adoptSignedInWallet() { if (window.siriusWallet && !state.wallet) { state.wallet = window.siriusWallet; // WC-signed-in wallets carry a `session`; keep it plumbed for the mint. if (window.siriusWallet.source === "wc" && window.siriusWallet.session) { state.session = window.siriusWallet.session; } return true; } return false; } function startFlow(name) { state.name = name; state.tld = null; state.signInOnly = false; open(); if (adoptSignedInWallet()) stepFund(); else stepWallet(); } // Start a TLD mint. Same wallet-choice + fund flow as a name register, but // the mint step calls registerTldWith(Built|External)Wallet instead of the // name variant, and the "done" screen skips the record editor since a TLD // certificate goes to the operator's token address as-is. function startTldFlow(label, opts = {}) { state.name = `.${label}`; // used for headings only state.tld = { label, serviceFeeSats: BigInt(opts.serviceFeeSats ?? 0n) }; state.signInOnly = false; open(); if (adoptSignedInWallet()) stepFund(); else stepWallet(); } // Sign-in-only entry point for the nav wallet dropdown. mode = 'new' opens // the "create wallet" step directly, 'import' opens "import phrase", 'wc' // starts a WizardConnect session. On success the flow writes siriusProfile // and closes — no name context, no Fund/Confirm. function startSignIn(mode) { state.name = "your wallet"; // header text — used by stepWallet state.tld = null; state.signInOnly = true; open(); // "choose" (default) shows the wallet-choice screen with all four options; // the other modes are still supported as direct-action entry points from // deep-links like portal.html?mode=new — but the nav dropdown funnels to // "choose" so the user always sees the options first. if (mode === "new") stepCreate(); else if (mode === "import") stepImport(); else if (mode === "wc") stepExternal(); else if (mode === "unlock") stepUnlock(); else stepWallet(); } // Sign-in rendered inline on the host page (not in a modal). Pass a target // element and portal-style tabs + form get painted into it. Used by // portal.html so the "sign up / sign in" experience IS the page rather than // an overlay on top of a launcher card. function renderSignInInline(container, mode = "import") { if (!container) return; state.name = "your wallet"; state.tld = null; state.signInOnly = true; state.inlineTarget = container; sheet = container; // Give inline container the same visual bones as the modal sheet so the // step content styling ports 1:1. Kept as a class so host CSS can override. container.classList.add("sirius-inline-sheet"); if (mode === "new") stepCreate(); else if (mode === "import") stepImport(); else if (mode === "wc") stepExternal(); else if (mode === "unlock") stepUnlock(); else stepWallet(); } // Public API window.siriusRegisterName = startFlow; window.siriusRegisterTld = startTldFlow; window.siriusSignInWallet = startSignIn; window.siriusRenderSignInInline = renderSignInInline; // ---------- step 1: wallet choice ---------- function stepWallet() { const saved = BNS.BuiltInWallet.exists(); const kind = state.tld ? "TLD" : "name"; const heading = state.signInOnly ? `Sign in or create a wallet` : `Register ${esc(state.name)}`; const intro = state.signInOnly ? `Pick one. Your keys stay in this browser — nothing is transmitted for sign-in.` : `First, the wallet that will own the ${esc(kind)}. The certificate is minted straight to it — we never hold it.`; render(`

${heading}

${intro}

${saved ? `` : ``}

Everything below runs on chipnet, Bitcoin Cash's test network. The coins are free and worth nothing — this is an alpha, and it is the honest place to try it before real money is involved.

`); if (saved) $("w-unlock").onclick = stepUnlock; $("w-new").onclick = stepCreate; $("w-import").onclick = stepImport; $("w-wiz").onclick = () => stepExternal("wizard"); } // ---------- WizardConnect (external wallet) ---------- async function stepExternal() { const label = "WizardConnect"; render(`${renderTabs("wc")}

Connect with ${esc(label)}

Starting the connection…

`); let session; try { const mod = await import("https://silentmode.st/js/wizardconnect.js"); session = await mod.openWizardSession({ dappName: BNS.REGISTRAR.wizardConnect.dappName, dappIcon: BNS.REGISTRAR.wizardConnect.dappIcon, prefix: BNS.REGISTRAR.addressPrefix, crypto: { pubkeyToAddress: BNS.pubkeyToAddress, pubkeyToLockingBytecode: BNS.pubkeyToLockingBytecode, binToHex: BNS.binToHex, txidOfHex: BNS.txidOfHex, }, }); } catch (e) { render(`

Could not start ${esc(label)}

${esc(e.message)}

`); $("back").onclick = state.signInOnly ? close : stepWallet; return; } const uri = session.qrUri ?? session.uri; render(` ${renderTabs("wc")}

Open your wallet

Scan or paste this into ${esc(label)}-capable wallet, then approve the connection.

${esc(uri)}

Waiting for your wallet… The link stays valid until you close this page.

`); $("copy").onclick = () => navigator.clipboard?.writeText(uri); $("cancel").onclick = async () => { try { await session.disconnect(); } catch {} (state.signInOnly ? close : stepWallet)(); }; try { await session.ready; } catch (e) { err(e); return; } // Sign-in-only path: get the address and persist siriusProfile immediately, // skip the whole "quote registration" branch since there is no name. if (state.signInOnly) { try { const addresses = await session.getAddresses(); if (!addresses?.length) throw new Error("wallet returned no addresses"); state.session = session; // keep alive for record edits etc. finishSignIn({ source: "wc", address: addresses[0], tokenAddress: BNS.toTokenAddress(addresses[0]), watchedAddresses: addresses, }); } catch (e) { err(e); } return; } stepExternalConfirm(session, label); } async function stepExternalConfirm(session, label) { render(`

Connected

Reading your wallet and building the registration…

`); try { const c = await client(); const addresses = await session.getAddresses(); const owner = addresses[0]; const balance = await BNS.getBalance(c, addresses); const genesis = BNS.describeGenesisRequirement(balance.hasGenesisInput); if (balance.sats === 0n) { render(`

That wallet is empty

Fund ${esc(owner)} with chipnet coins and reconnect.

`); $("back").onclick = async () => { try { await session.disconnect(); } catch {} stepWallet(); }; return; } // TLD external path: keep the session, hand off to the TLD confirm/mint // steps which know to call registerTldWithExternalWallet. if (state.tld) { state.session = session; return stepConfirmTld(); } const quote = await BNS.quoteRegistration(c, { name: state.name, ownerAddress: owner, records: {} }); const rows = BNS.priceSummary(quote.costs).map((l) => ` ${esc(l.label)}${l.note ? `${esc(l.note)}` : ""} ${sats(l.sats)} sat`).join(""); render(`

Confirm ${esc(quote.displayName)}

Connected to ${esc(label)}. The certificate is minted to ${esc(owner)} — your wallet, your key.

${rows}

${genesis.ready ? "" : `

Two approvals needed. ${esc(genesis.explanation)}

`}

`); $("back").onclick = async () => { try { await session.disconnect(); } catch {} stepWallet(); }; $("go").onclick = async () => { render(`

Approve in your wallet

${esc(label)} has sent the transaction to your device. Check the details there and approve. Do not close this tab.

`); const log = $("log"); const say = (s) => { const d = document.createElement("div"); d.textContent = s; log.appendChild(d); }; try { const res = await BNS.registerWithExternalWallet(await client(), { session, name: state.name, ownerAddress: owner, records: {}, onProgress: say, }); state.result = res; state.session = session; stepDone(); } catch (e) { err(e); const row = document.createElement("div"); row.className = "row end"; row.innerHTML = ``; sheet.appendChild(row); $("back").onclick = () => stepExternalConfirm(session, label); } }; } catch (e) { err(e); } } // ---------- built-in: create ---------- function stepCreate() { // The Register button flow lands here via stepWallet, so "Back" returns to // the wallet-choice step. The sign-in dropdown calls stepCreate directly // with no chosen name, so "Back" should just close the modal in that case. const goBack = state.signInOnly ? close : stepWallet; render(` ${renderTabs("new")}

Create your wallet

Generated in this browser. The phrase is never sent anywhere — not to us, not to anyone.

Password (encrypts the wallet on this device) Repeat password

There is no reset. The password protects this device; the recovery phrase you will see next is the wallet. Lose both and the name is gone forever — that is what self-custody means.

`); $("back").onclick = goBack; $("next").onclick = async () => { const pw = $("pw").value, pw2 = $("pw2").value; if (pw.length < 8) return err(new Error("password must be at least 8 characters")); if (pw !== pw2) return err(new Error("passwords do not match")); try { const wallet = await BNS.BuiltInWallet.create(); await wallet.save(pw); state.wallet = wallet; stepPhrase(); } catch (e) { err(e); } }; } function stepPhrase() { const words = state.wallet.mnemonic.split(" "); render(`

Write this down. Now.

These 12 words are your wallet. Anyone who has them owns your names; if you lose them, nobody — including us — can recover anything.

${words.map((w,i)=>`${i+1}${esc(w)}`).join("")}

I have written the phrase down somewhere safe and offline. I understand it cannot be reset.

`); $("copy").onclick = () => navigator.clipboard?.writeText(state.wallet.mnemonic); $("ack").onchange = (e) => { $("next").disabled = !e.target.checked; }; $("next").onclick = () => { if (!finishSignIn(state.wallet)) stepFund(); }; } // ---------- built-in: import / unlock ---------- function stepImport() { const goBack = state.signInOnly ? close : stepWallet; render(` ${renderTabs("import")}

Import a recovery phrase

12 words, separated by spaces. It stays in this browser.

Recovery phrase Password to encrypt it on this device

`); $("back").onclick = goBack; $("next").onclick = async () => { try { if ($("pw").value.length < 8) throw new Error("password must be at least 8 characters"); const wallet = await BNS.BuiltInWallet.fromMnemonic($("mn").value); await wallet.save($("pw").value); state.wallet = wallet; if (!finishSignIn(wallet)) stepFund(); } catch (e) { err(e); } }; } function stepUnlock() { const goBack = state.signInOnly ? close : stepWallet; const saved = BNS.BuiltInWallet.exists(); // No saved wallet on this device — show why unlock isn't possible and // route the user to Create/Import via the tab bar (which stays visible). if (!saved) { render(` ${renderTabs("unlock")}

No wallet on this device

Unlock only works after you have created or imported a wallet on this browser. Either Create a fresh one (writes an encrypted copy here you can unlock next time) or Import a recovery phrase you already have.

`); $("go-import").onclick = stepImport; $("go-new").onclick = stepCreate; return; } render(` ${renderTabs("unlock")}

Unlock your wallet

Decrypts the wallet stored in this browser.

Password

`); $("back").onclick = goBack; $("pw").onkeydown = (e) => { if (e.key === "Enter") $("next").click(); }; $("next").onclick = async () => { try { state.wallet = await BNS.BuiltInWallet.load($("pw").value); if (!finishSignIn(state.wallet)) stepFund(); } catch (e) { err(e); } }; } // ---------- fund ---------- let fundTimer = null; async function stepFund() { const w = state.wallet; const faucets = BNS.REGISTRAR.faucets .map((f) => `${esc(f.name)}`).join(" · "); render(`

Fund your wallet

Send test coins to this address. It is yours — derived from your phrase.

${esc(w.address)}

Free chipnet coins: ${faucets}

checking balance…

`); $("copy").onclick = () => navigator.clipboard?.writeText(w.address); $("back").onclick = () => { clearInterval(fundTimer); stepWallet(); }; $("next").onclick = () => { clearInterval(fundTimer); stepConfirm(); }; const poll = async () => { try { const b = await BNS.getBalance(await client(), w.watchedAddresses); const enough = b.sats >= 20000n; $("bal").innerHTML = b.sats > 0n ? `${sats(b.sats)} sat available (${b.coins} coin${b.coins===1?"":"s"})` + (enough ? "" : ` — a little more is needed to cover the registration.`) : `Waiting for coins… this page is watching the chain live.`; $("next").disabled = !enough; } catch (e) { $("bal").textContent = "could not reach the chain: " + e.message; } }; await poll(); clearInterval(fundTimer); fundTimer = setInterval(poll, 6000); } // ---------- confirm ---------- async function stepConfirm() { render(`

Preparing…

Building your registration transaction.

`); try { const c = await client(); // TLD flow skips the name-availability check and the per-name quote — // registerTldWith*Wallet builds the tx internally and checks the on-chain // TLD registry itself. Just show a simple confirm screen with the fee. if (state.tld) return stepConfirmTld(); const avail = await BNS.checkAvailability(c, state.name); if (!avail.available) throw new Error(`"${avail.name}" was just registered by someone else`); const quote = await BNS.quoteRegistration(c, { name: state.name, ownerAddress: state.wallet.address, records: {}, }); state.quote = quote; const rows = BNS.priceSummary(quote.costs).map((l) => ` ${esc(l.label)}${l.note ? `${esc(l.note)}` : ""} ${sats(l.sats)} sat`).join(""); render(`

Confirm ${esc(quote.displayName)}

One transaction. It mints the certificate to your address and pays the fees.

${rows}

The certificate will be minted to ${esc(state.wallet.address)} — your key, your name. You can set where it points immediately afterwards.

`); $("back").onclick = stepFund; $("go").onclick = stepRegister; } catch (e) { render(`

Could not prepare

${esc(e.message)}

`); $("back").onclick = stepFund; } } // ---------- TLD confirm ---------- async function stepConfirmTld() { const feeSats = state.tld.serviceFeeSats; const owner = state.wallet ? state.wallet.address : (state.session ? (await state.session.getAddresses())[0] : "your address"); render(`

Confirm ${esc(state.name)}

One transaction. It mints the TLD certificate to your token address; you become the registry operator for every second-level name under it.

Service fee${feeSats === 0n ? " (none on chipnet)" : ""}	${sats(feeSats)} sat
Beacon dust + chain fee (covered by wallet)	~1,300 sat

Minted to ${esc(owner)}. That wallet becomes the operator for this TLD.

`); $("back").onclick = stepFund; $("go").onclick = stepRegisterTld; } async function stepRegisterTld() { render(`

Registering ${esc(state.name)}

Signing in your browser and broadcasting to the chain. Do not close this tab.

`); const log = $("log"); const say = (s) => { const d = document.createElement("div"); d.textContent = s; log.appendChild(d); log.scrollTop = log.scrollHeight; }; const serviceFee = { address: BNS.REGISTRAR?.serviceFee?.address ?? null, sats: state.tld.serviceFeeSats }; try { const res = state.session ? await BNS.registerTldWithExternalWallet(await client(), { session: state.session, tld: state.tld.label, records: {}, serviceFee, tldListUrl: "https://navigate.st/api/tlds", onProgress: say, }) : await BNS.registerTldWithBuiltInWallet(await client(), { wallet: state.wallet, tld: state.tld.label, records: {}, serviceFee, tldListUrl: "https://navigate.st/api/tlds", onProgress: say, }); state.result = res; stepDoneTld(); } catch (e) { err(e); const row = document.createElement("div"); row.className = "row end"; row.innerHTML = ``; sheet.appendChild(row); $("back").onclick = stepConfirmTld; } } function stepDoneTld() { const r = state.result; render(`

✓ .${esc(r.tld)} is yours

The TLD certificate is on the chain, held by your key. Second-level names under .${esc(r.tld)} now live in your registry.

Transaction	${esc(r.txid.slice(0,20))}…
Certificate ID	${esc(r.category.slice(0,20))}…
Operator	${esc(r.ownerAddress.slice(0,22))}…

`); $("fin").onclick = close; } // ---------- register ---------- async function stepRegister() { render(`

Registering ${esc(state.name)}

Signing in your browser and broadcasting to the chain. Do not close this tab.

`); const log = $("log"); const say = (s) => { const d = document.createElement("div"); d.textContent = s; log.appendChild(d); log.scrollTop = log.scrollHeight; }; const words = { "checking-availability": "checking the name is still free", "loading-coins": "loading your coins", "preparing-wallet": "preparing your wallet (one-off setup transaction)", "prepared": "wallet prepared", "building": "building the registration transaction", "signing": "signing with your key — in this browser", "broadcasting": "broadcasting to the Bitcoin Cash network", "registered": "registered", }; try { const res = await BNS.registerWithBuiltInWallet(await client(), { wallet: state.wallet, name: state.name, records: {}, onProgress: (s) => say(words[s] ?? s), }); state.result = res; stepDone(); } catch (e) { err(e); const row = document.createElement("div"); row.className = "row end"; row.innerHTML = ``; sheet.appendChild(row); $("back").onclick = stepConfirm; } } // ---------- done + point somewhere ---------- function stepDone() { const r = state.result; render(`

✓ ${esc(r.displayName)} is yours

The certificate is on the chain, held by your key. Nobody can take it back.

Transaction	${esc(r.txid.slice(0,20))}…
Certificate ID	${esc(r.category.slice(0,20))}…
Owner	${esc(r.ownerAddress.slice(0,22))}…

Point it somewhere

Optional, and changeable any time — only your key can.

Record type HTML — kept small; it lives inside the transaction

`); const labels = { h: ["HTML — kept small; it lives inside the transaction", "

hello

"], u: ["The https:// address the name should open", "https://example.org"], ip: ["IPv4 address of your server", "203.0.113.9"], tls: ["SHA-256 fingerprint of your TLS certificate (hex)", "a1b2c3…"], }; const budget = () => { const used = new TextEncoder().encode($("val").value).length; const max = 200 - 30 - r.name.length; $("budget").textContent = `${used} / ~${max} bytes used`; $("budget").style.color = used > max ? "var(--taken,#f6768a)" : ""; }; $("kind").onchange = () => { const [l, p] = labels[$("kind").value]; $("vl").textContent = l; $("val").placeholder = p; budget(); }; $("val").oninput = budget; budget(); $("skip").onclick = close; $("set").onclick = async () => { const records = { [$("kind").value]: $("val").value }; const external = !state.wallet && state.session; render(`

Publishing record

This moves the certificate — which is how the chain proves you are the owner.${external ? " Approve it in your wallet." : ""}

`); const log = $("log"); const say = (s) => { const d = document.createElement("div"); d.textContent = s; log.appendChild(d); }; try { const upd = external ? await BNS.setRecordsWithExternalWallet(await client(), { session: state.session, name: r.displayName, records, onProgress: say, }) : await BNS.setRecordsWithBuiltInWallet(await client(), { wallet: state.wallet, name: r.displayName, records, onProgress: say, }); render(`

✓ ${esc(r.displayName)} now points somewhere

Update transaction ${esc(upd.txid.slice(0,20))}… is on the chain. Resolvers pick it up within a block.

Open it with the Silent Mode resolver, or preview it at navigate.st.

`); $("fin").onclick = close; } catch (e) { err(e); const row = document.createElement("div"); row.className = "row end"; row.innerHTML = ``; sheet.appendChild(row); $("back").onclick = stepDone; } }; }