sirius-x: price mode is a USD / BCH toggle, not a dropdown

Two choices do not need a select: a segmented control shows both options at
once, the active one is obvious, and the explanation moves to a short hint
beside it. Arrow keys switch it like a radio group.
This commit is contained in:
Local Dev 2026-09-20 20:02:10 +02:00
parent f2c3480d43
commit a2bf7c26d8
9 changed files with 44 additions and 22 deletions

View file

@ -611,7 +611,7 @@
"Sirius.X hosting — free, on Sia storage": "Sirius.X-Hosting — kostenlos, auf Sia-Speicher", "Sirius.X hosting — free, on Sia storage": "Sirius.X-Hosting — kostenlos, auf Sia-Speicher",
"Another Sia folder (advanced)": "Anderer Sia-Ordner (erweitert)", "Another Sia folder (advanced)": "Anderer Sia-Ordner (erweitert)",
"Price is fixed in": "Preis festgelegt in", "Price is fixed in": "Preis festgelegt in",
"US dollars — the BCH amount follows the market": "US-Dollar — der BCH-Betrag folgt dem Markt", "The BCH amount follows the market": "Der BCH-Betrag folgt dem Markt",
"BCH — the dollar value follows the market": "BCH — der Dollarwert folgt dem Markt", "The dollar value follows the market": "Der Dollarwert folgt dem Markt",
"Accept between": "Akzeptiere zwischen" "Accept between": "Akzeptiere zwischen"
} }

View file

@ -611,7 +611,7 @@
"Sirius.X hosting — free, on Sia storage": "Φιλοξενία Sirius.X — δωρεάν, στον αποθηκευτικό χώρο Sia", "Sirius.X hosting — free, on Sia storage": "Φιλοξενία Sirius.X — δωρεάν, στον αποθηκευτικό χώρο Sia",
"Another Sia folder (advanced)": "Άλλος φάκελος Sia (για προχωρημένους)", "Another Sia folder (advanced)": "Άλλος φάκελος Sia (για προχωρημένους)",
"Price is fixed in": "Η τιμή είναι σταθερή σε", "Price is fixed in": "Η τιμή είναι σταθερή σε",
"US dollars — the BCH amount follows the market": "Δολάρια ΗΠΑ — το ποσό σε BCH ακολουθεί την αγορά", "The BCH amount follows the market": "Το ποσό σε BCH ακολουθεί την αγορά",
"BCH — the dollar value follows the market": "BCH — η αξία σε δολάρια ακολουθεί την αγορά", "The dollar value follows the market": "Η αξία σε δολάρια ακολουθεί την αγορά",
"Accept between": "Αποδοχή μεταξύ" "Accept between": "Αποδοχή μεταξύ"
} }

View file

@ -611,7 +611,7 @@
"Sirius.X hosting — free, on Sia storage": "Alojamiento Sirius.X — gratis, en almacenamiento Sia", "Sirius.X hosting — free, on Sia storage": "Alojamiento Sirius.X — gratis, en almacenamiento Sia",
"Another Sia folder (advanced)": "Otra carpeta de Sia (avanzado)", "Another Sia folder (advanced)": "Otra carpeta de Sia (avanzado)",
"Price is fixed in": "El precio se fija en", "Price is fixed in": "El precio se fija en",
"US dollars — the BCH amount follows the market": "Dólares — la cantidad en BCH sigue al mercado", "The BCH amount follows the market": "La cantidad en BCH sigue al mercado",
"BCH — the dollar value follows the market": "BCH — el valor en dólares sigue al mercado", "The dollar value follows the market": "El valor en dólares sigue al mercado",
"Accept between": "Aceptar entre" "Accept between": "Aceptar entre"
} }

View file

@ -611,7 +611,7 @@
"Sirius.X hosting — free, on Sia storage": "Hébergement Sirius.X — gratuit, sur le stockage Sia", "Sirius.X hosting — free, on Sia storage": "Hébergement Sirius.X — gratuit, sur le stockage Sia",
"Another Sia folder (advanced)": "Un autre dossier Sia (avancé)", "Another Sia folder (advanced)": "Un autre dossier Sia (avancé)",
"Price is fixed in": "Le prix est fixé en", "Price is fixed in": "Le prix est fixé en",
"US dollars — the BCH amount follows the market": "Dollars US — le montant en BCH suit le marché", "The BCH amount follows the market": "Le montant en BCH suit le marché",
"BCH — the dollar value follows the market": "BCH — la valeur en dollars suit le marché", "The dollar value follows the market": "La valeur en dollars suit le marché",
"Accept between": "Accepter entre" "Accept between": "Accepter entre"
} }

View file

@ -611,7 +611,7 @@
"Sirius.X hosting — free, on Sia storage": "Alojamento Sirius.X — grátis, no armazenamento Sia", "Sirius.X hosting — free, on Sia storage": "Alojamento Sirius.X — grátis, no armazenamento Sia",
"Another Sia folder (advanced)": "Outra pasta Sia (avançado)", "Another Sia folder (advanced)": "Outra pasta Sia (avançado)",
"Price is fixed in": "O preço é fixado em", "Price is fixed in": "O preço é fixado em",
"US dollars — the BCH amount follows the market": "Dólares — o montante em BCH segue o mercado", "The BCH amount follows the market": "O montante em BCH segue o mercado",
"BCH — the dollar value follows the market": "BCH — o valor em dólares segue o mercado", "The dollar value follows the market": "O valor em dólares segue o mercado",
"Accept between": "Aceitar entre" "Accept between": "Aceitar entre"
} }

View file

@ -611,7 +611,7 @@
"Sirius.X hosting — free, on Sia storage": "Хостинг Sirius.X — бесплатно, в хранилище Sia", "Sirius.X hosting — free, on Sia storage": "Хостинг Sirius.X — бесплатно, в хранилище Sia",
"Another Sia folder (advanced)": "Другая папка Sia (для опытных)", "Another Sia folder (advanced)": "Другая папка Sia (для опытных)",
"Price is fixed in": "Цена зафиксирована в", "Price is fixed in": "Цена зафиксирована в",
"US dollars — the BCH amount follows the market": "Доллары США — сумма в BCH следует за рынком", "The BCH amount follows the market": "Сумма в BCH следует за рынком",
"BCH — the dollar value follows the market": "BCH — долларовая стоимость следует за рынком", "The dollar value follows the market": олларовая стоимость следует за рынком",
"Accept between": "Принимать в диапазоне" "Accept between": "Принимать в диапазоне"
} }

View file

@ -685,7 +685,16 @@ async function signedHeaders(msg) {
// ---------- sell (marketplace listing) ---------- // ---------- sell (marketplace listing) ----------
const RATE = () => window.siriusPricing?.CHIPNET_SATS_PER_USD || 250000; const RATE = () => window.siriusPricing?.CHIPNET_SATS_PER_USD || 250000;
let activeListing = null; let activeListing = null;
function sellMode() { return $("sell-mode").value; } function sellMode() { return $("sell-mode").dataset.value || "usd"; }
function setSellMode(mode) {
$("sell-mode").dataset.value = mode;
for (const b of $("sell-mode").querySelectorAll("button")) {
const on = b.dataset.mode === mode;
b.classList.toggle("active", on); b.setAttribute("aria-checked", on ? "true" : "false");
}
$("sell-mode-hint").textContent = mode === "usd" ? "The BCH amount follows the market" : "The dollar value follows the market";
paintSellMode();
}
function paintSellMode() { function paintSellMode() {
const usd = sellMode() === "usd"; const usd = sellMode() === "usd";
$("sell-usd-terms").classList.toggle("hidden", !usd); $("sell-usd-terms").classList.toggle("hidden", !usd);
@ -699,7 +708,11 @@ function paintBand() {
? `% of today's rate: you will receive between ${fmtBch(Math.round(sats * (1 - band / 100)))} and ${fmtBch(Math.round(sats * (1 + band / 100)))}` ? `% of today's rate: you will receive between ${fmtBch(Math.round(sats * (1 - band / 100)))} and ${fmtBch(Math.round(sats * (1 + band / 100)))}`
: "% of today's BCH rate"; : "% of today's BCH rate";
} }
$("sell-mode").addEventListener("change", paintSellMode); $("sell-mode").addEventListener("click", (e) => { const b = e.target.closest("button[data-mode]"); if (b) setSellMode(b.dataset.mode); });
$("sell-mode").addEventListener("keydown", (e) => {
if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
e.preventDefault(); setSellMode(sellMode() === "usd" ? "bch" : "usd"); $("sell-mode").querySelector("button.active").focus();
});
$("sell-band").addEventListener("input", paintBand); $("sell-band").addEventListener("input", paintBand);
function paintSell() { function paintSell() {
const st = $("sell-status"); const st = $("sell-status");

View file

@ -22,7 +22,7 @@
(function () { (function () {
var STORE = "sirius-lang"; var STORE = "sirius-lang";
var CACHE = "sirius-i18n:"; var CACHE = "sirius-i18n:";
var VERSION = "20260920g"; // bump when dictionaries change var VERSION = "20260920h"; // bump when dictionaries change
var LANGS = { var LANGS = {
en: "English", en: "English",
de: "Deutsch", de: "Deutsch",

View file

@ -223,6 +223,14 @@
.toggle .txt b{display:block;font-weight:600;font-size:14px} .toggle .txt b{display:block;font-weight:600;font-size:14px}
.toggle .txt span{color:var(--mut);font-size:12.5px} .toggle .txt span{color:var(--mut);font-size:12.5px}
.toggle input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:var(--acid);flex:none} .toggle input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:var(--acid);flex:none}
.seg{display:inline-flex;align-items:center;gap:0;flex-wrap:wrap}
.seg button{font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;padding:7px 16px;cursor:pointer;background:rgba(255,255,255,.04);color:var(--mut);border:1px solid var(--line);margin-left:-1px;transition:background .12s,color .12s}
.seg button:first-child{border-radius:8px 0 0 8px;margin-left:0}
.seg button:last-of-type{border-radius:0 8px 8px 0}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--acid);color:#0b0d10;border-color:var(--acid);position:relative;z-index:1}
.seg button:focus-visible{outline:2px solid var(--acid);outline-offset:2px;z-index:2}
.seg .dim{margin-left:12px}
.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--dim);margin-left:8px;vertical-align:middle} .pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--dim);margin-left:8px;vertical-align:middle}
/* modals kept for policy editing */ /* modals kept for policy editing */
@ -259,7 +267,7 @@
.addrow{grid-template-columns:1fr 1fr} .addrow{grid-template-columns:1fr 1fr}
} }
</style> </style>
<script src="./js/i18n.js?v=20260920g"></script> <script src="./js/i18n.js?v=20260920h"></script>
</head> </head>
<body> <body>
@ -360,11 +368,12 @@
<p class="hint">You sign an offer once: "whoever pays me this price gets the certificate". The offer is stored by the gateway and shown on the <a href="./market" target="_blank" rel="noopener">market</a>. A buyer completes it in one transaction — you are paid in the same transaction that moves the name, or not at all. No escrow, nothing to trust.</p> <p class="hint">You sign an offer once: "whoever pays me this price gets the certificate". The offer is stored by the gateway and shown on the <a href="./market" target="_blank" rel="noopener">market</a>. A buyer completes it in one transaction — you are paid in the same transaction that moves the name, or not at all. No escrow, nothing to trust.</p>
<div class="status" id="sell-status">Checking the market…</div> <div class="status" id="sell-status">Checking the market…</div>
<div id="sell-form"> <div id="sell-form">
<label style="margin-top:0">Price is fixed in</label> <label style="margin-top:0" id="sell-mode-label">Price is fixed in</label>
<select id="sell-mode" style="max-width:360px"> <div class="seg" id="sell-mode" role="radiogroup" aria-labelledby="sell-mode-label" data-value="usd">
<option value="usd">US dollars — the BCH amount follows the market</option> <button type="button" role="radio" aria-checked="true" data-mode="usd" class="active">USD</button>
<option value="bch">BCH — the dollar value follows the market</option> <button type="button" role="radio" aria-checked="false" data-mode="bch">BCH</button>
</select> <span class="dim" id="sell-mode-hint">The BCH amount follows the market</span>
</div>
<div class="row" style="align-items:flex-end"> <div class="row" style="align-items:flex-end">
<div><label style="margin-top:0">Price (USD)</label><input type="text" id="sell-usd" placeholder="25" inputmode="decimal" style="max-width:160px"></div> <div><label style="margin-top:0">Price (USD)</label><input type="text" id="sell-usd" placeholder="25" inputmode="decimal" style="max-width:160px"></div>
<div><label style="margin-top:0">Price (BCH)</label><input type="text" id="sell-bch" placeholder="0.0625" inputmode="decimal" style="max-width:200px"></div> <div><label style="margin-top:0">Price (BCH)</label><input type="text" id="sell-bch" placeholder="0.0625" inputmode="decimal" style="max-width:200px"></div>
@ -694,7 +703,7 @@
<script src="./js/session.js?v=20260917dash"></script> <script src="./js/session.js?v=20260917dash"></script>
<script src="./js/pin-escrow.js?v=20260909pin"></script> <script src="./js/pin-escrow.js?v=20260909pin"></script>
<script src="./js/pricing.js?v=20260920bits"></script> <script src="./js/pricing.js?v=20260920bits"></script>
<script type="module" src="./js/dashboard.js?v=20260920usd2"></script> <script type="module" src="./js/dashboard.js?v=20260920usd3"></script>
<script defer src="./js/theme.js?v=20260920compact"></script> <script defer src="./js/theme.js?v=20260920compact"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script> <script defer src="./js/site-footer.js?v=20260917market"></script>
<script type="module" src="./js/register-flow.js?v=20260920usd"></script> <script type="module" src="./js/register-flow.js?v=20260920usd"></script>