Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-07-11 19:18:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

website_next: part 3

Browse Source
This commit is contained in:
nym21
2026-07-06 11:15:39 +02:00
parent eee1a10d2a
commit 3f9edb211e
103 changed files with 1829 additions and 2040 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website_next/explore/block/difficulty.js
+13 -8
View File
@@ -1,7 +1,12 @@
/** @typedef {import("../../modules/brk-client/index.js").BlockInfoV1} Block */
import {
DIFFICULTY_EPOCH_BLOCKS,
HALVING_EPOCH_BLOCKS,
formatEpoch,
formatNumber,
getEpochProgress,
} from "./format.js";
const DIFFICULTY_EPOCH_BLOCKS = 2_016;
const HALVING_EPOCH_BLOCKS = 210_000;
/** @typedef {import("../../modules/brk-client/index.js").BlockInfoV1} Block */
/**
* @param {string} label
@@ -27,7 +32,7 @@ function createMetricStat(label, value) {
* @param {string} color
*/
function createEpochProgress(label, height, length, color) {
const progress = (height % length) + 1;
const progress = getEpochProgress(height, length);
const row = document.createElement("div");
const head = document.createElement("div");
const name = document.createElement("span");
@@ -42,11 +47,11 @@ function createEpochProgress(label, height, length, color) {
done.dataset.epochSegment = "done";
remaining.dataset.epochSegment = "remaining";
row.style.setProperty("--epoch-color", color);
done.style.setProperty("--share", `${(progress / length) * 100}%`);
remaining.style.setProperty("--share", `${((length - progress) / length) * 100}%`);
done.style.setProperty("--share", `${progress.ratio * 100}%`);
remaining.style.setProperty("--share", `${(progress.remaining / length) * 100}%`);
name.textContent = label;
value.textContent = `${((progress / length) * 100).toFixed(1)}%`;
value.textContent = formatEpoch(height, length);
head.append(name, value);
bar.append(done, remaining);
row.append(head, bar);
@@ -60,7 +65,7 @@ export function createDifficultyPane(block) {
pane.dataset.metricList = "";
pane.append(
createMetricStat("Difficulty", block.difficulty.toLocaleString()),
createMetricStat("Difficulty", formatNumber(block.difficulty)),
createEpochProgress(
"Difficulty epoch",
block.height,
website_next/explore/block/difficulty/style.css
+85
View File
@@ -0,0 +1,85 @@
#block-details section[data-group="difficulty"] {
--section-color: var(--orange);
[data-metric-list] {
display: grid;
gap: 0.5rem;
min-width: 0;
}
[data-metric-stat] {
display: grid;
grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
color: var(--section-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-strong);
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-epoch] {
display: grid;
gap: 0.25rem;
min-width: 0;
}
[data-epoch-head] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
min-width: 0;
overflow-wrap: anywhere;
color: var(--epoch-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
color: var(--white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-strong);
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-epoch-bar] {
display: flex;
gap: 0.125rem;
height: 0.5rem;
min-width: 0;
}
[data-epoch-segment] {
width: var(--share);
border-radius: 0.125rem;
&[data-epoch-segment="done"] {
background: var(--epoch-color);
}
&[data-epoch-segment="remaining"] {
background: color-mix(in oklch, var(--gray) 35%, transparent);
}
}
}
website_next/explore/block/fee-chart/style.css
+5
View File
@@ -0,0 +1,5 @@
#block-details section[data-group="fees"] {
figure[data-fee-chart] {
--chart-xy-height: 7.5rem;
}
}
website_next/explore/block/format.js
+69
View File
@@ -0,0 +1,69 @@
export const DIFFICULTY_EPOCH_BLOCKS = 2_016;
export const HALVING_EPOCH_BLOCKS = 210_000;
const MAX_BLOCK_WEIGHT = 4_000_000;
/** @param {number} value */
export function formatNumber(value) {
return value.toLocaleString();
}
/** @param {number | undefined} value */
export function formatPoolBlockNumber(value) {
// Temporary compatibility with servers that do not include pool.blockNumber yet.
return `#${formatNumber(value ?? 0)}`;
}
/** @param {number} unixSeconds */
export function formatDateTime(unixSeconds) {
return new Date(unixSeconds * 1_000).toLocaleString(undefined, {
dateStyle: "medium",
timeStyle: "medium",
});
}
/** @param {number} bytes */
export function formatBytes(bytes) {
return bytes >= 1_000_000
? `${(bytes / 1_000_000).toFixed(2)} MB`
: `${formatNumber(bytes)} B`;
}
/** @param {number} weight */
export function formatWeight(weight) {
return weight >= 1_000_000
? `${(weight / 1_000_000).toFixed(2)} MWU`
: `${formatNumber(weight)} WU`;
}
/** @param {number} weight */
export function formatBlockFill(weight) {
return `${((weight / MAX_BLOCK_WEIGHT) * 100).toFixed(1)}%`;
}
/** @param {number} height @param {number} length */
export function getEpochProgress(height, length) {
const blocks = (height % length) + 1;
return /** @type {const} */ ({
number: Math.floor(height / length) + 1,
blocks,
remaining: length - blocks,
ratio: blocks / length,
});
}
/** @param {number} height @param {number} length */
export function formatEpoch(height, length) {
const progress = getEpochProgress(height, length);
return `#${formatNumber(progress.number)} · ${(progress.ratio * 100).toFixed(1)}%`;
}
/** @param {string} raw */
export function getCoinbaseMessage(raw) {
return (raw.match(/[\x20-\x7e]{2,}/g) ?? [])
.map((value) => value.trim())
.filter((value) => /[A-Za-z0-9]/.test(value))
.join(" · ");
}
website_next/explore/block/header.js
+16 -42
View File
@@ -1,29 +1,9 @@
import { createUsdAmount, renderUsdAmount } from "../../usd/index.js";
import { formatDateTime } from "./format.js";
import { createBlockTitle } from "./title.js";
/** @typedef {import("../../modules/brk-client/index.js").BlockInfoV1} Block */
/** @param {number} unixSeconds */
function formatDateTime(unixSeconds) {
return new Date(unixSeconds * 1_000).toLocaleString(undefined, {
dateStyle: "medium",
timeStyle: "medium",
});
}
/** @param {number} height */
function createHeightElement(height) {
const element = document.createElement("span");
const prefix = document.createElement("span");
const value = document.createElement("span");
prefix.dataset.dim = "";
prefix.textContent = `#${"0".repeat(Math.max(0, 7 - String(height).length))}`;
value.textContent = String(height);
element.append(prefix, value);
return element;
}
/** @param {string} hash */
function createHashElement(hash) {
const element = document.createElement("span");
@@ -41,41 +21,35 @@ function createHashElement(hash) {
return element;
}
/** @param {number} height */
function createTitle(height) {
const label = document.createElement("span");
const value = document.createElement("span");
label.dataset.titleLabel = "";
value.dataset.titleHeight = "";
label.textContent = "Block";
value.append(createHeightElement(height));
return [label, value];
}
export function createBlockHeader() {
/** @param {Node[]} [actions] */
export function createBlockHeader(actions = []) {
const element = document.createElement("header");
const titleRow = document.createElement("div");
const main = document.createElement("div");
const title = document.createElement("h1");
const side = document.createElement("div");
const actionList = document.createElement("div");
const date = document.createElement("time");
const meta = document.createElement("div");
const hash = document.createElement("p");
const price = createUsdAmount("output", 0, {
tone: "positive",
});
main.dataset.blockMain = "";
titleRow.dataset.blockTitle = "";
side.dataset.blockSide = "";
actionList.dataset.blockActions = "";
date.dataset.blockDate = "";
meta.dataset.blockMeta = "";
hash.dataset.blockHashLine = "";
titleRow.append(title, date);
meta.append(hash, price);
element.append(titleRow, meta);
actionList.append(...actions);
side.append(date, price, actionList);
main.append(title, hash);
titleRow.append(main, side);
element.append(titleRow);
/** @param {Block} block */
function update(block) {
title.replaceChildren(...createTitle(block.height));
title.replaceChildren(...createBlockTitle(block.height));
date.dateTime = new Date(block.timestamp * 1_000).toISOString();
date.textContent = formatDateTime(block.timestamp);
hash.replaceChildren(createHashElement(block.id));
website_next/explore/block/index.js
+9 -6
View File
@@ -5,10 +5,12 @@ import { createRewardsPane } from "./rewards.js";
import { createTransactionPane } from "./transactions.js";
import { createFeeChart } from "./fee-chart.js";
import { appendPane } from "./pane.js";
import { createBlockReceipt } from "./receipt.js";
export function createBlockDetails() {
const element = document.createElement("section");
const header = createBlockHeader();
const receipt = createBlockReceipt();
const header = createBlockHeader([receipt.button]);
const content = document.createElement("div");
element.id = "block-details";
@@ -21,17 +23,18 @@ export function createBlockDetails() {
element.hidden = false;
header.update(block);
receipt.update(block);
for (const chart of content.querySelectorAll("[data-fee-chart]")) {
chart.dispatchEvent(new Event("chart:destroy"));
}
content.textContent = "";
appendPane(content, "Mining", [createMinerPane(block)]);
appendPane(content, "Difficulty", [createDifficultyPane(block)]);
appendPane(content, "Rewards", [createRewardsPane(extras)]);
appendPane(content, "Block", [createTransactionPane(block)]);
appendPane(content, "Fees", [
appendPane(content, "mining", [createMinerPane(block)]);
appendPane(content, "difficulty", [createDifficultyPane(block)]);
appendPane(content, "rewards", [createRewardsPane(extras)]);
appendPane(content, "block", [createTransactionPane(block)]);
appendPane(content, "fees", [
createFeeChart(extras.feeRange, extras.avgFeeRate),
]);
}
website_next/explore/block/miner.js
+2 -10
View File
@@ -1,15 +1,8 @@
import { createPoolLogo } from "../../pools/index.js";
import { formatPoolBlockNumber, getCoinbaseMessage } from "./format.js";
/** @typedef {import("../../modules/brk-client/index.js").BlockInfoV1} Block */
/** @param {string} raw */
function getCoinbaseMessage(raw) {
return (raw.match(/[\x20-\x7e]{2,}/g) ?? [])
.map((value) => value.trim())
.filter((value) => /[A-Za-z0-9]/.test(value))
.join(" · ");
}
/** @param {string} raw */
function createCoinbaseMessage(raw) {
const message = getCoinbaseMessage(raw);
@@ -45,8 +38,7 @@ export function createMinerPane(block) {
logo.dataset.minerLogo = "";
name.textContent = pool.name;
// TODO: remove fallback after the server includes pool.blockNumber everywhere.
blockNumber.textContent = `#${(pool.blockNumber || 0).toLocaleString()}`;
blockNumber.textContent = formatPoolBlockNumber(pool.blockNumber);
slug.textContent = pool.slug;
title.append(name, blockNumber);
identity.append(title, slug);
website_next/explore/block/miner/style.css
+71
View File
@@ -0,0 +1,71 @@
#block-details section[data-group="mining"] {
--section-color: var(--orange);
[data-miner-pane] {
display: grid;
gap: 1rem;
min-width: 0;
}
[data-miner-head] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
min-width: 0;
}
[data-miner-identity] {
display: grid;
gap: 0.125rem;
min-width: 0;
}
[data-miner-title] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: baseline;
min-width: 0;
> strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-strong);
line-height: var(--line-height-sm);
}
> span {
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
}
[data-miner-slug] {
min-width: 0;
overflow-wrap: anywhere;
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
[data-miner-logo] {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
[data-coinbase-message] {
min-width: 0;
overflow: hidden;
color: var(--white);
font-size: var(--font-size-sm);
font-style: italic;
line-height: var(--line-height-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
}
website_next/explore/block/pane.js
+3 -8
View File
@@ -1,19 +1,14 @@
/** @param {string} title */
function groupName(title) {
return title.toLowerCase().replace(/[^a-z0-9]+/g, "-");
}
/**
* @param {HTMLElement} parent
* @param {string} title
* @param {string} group
* @param {Node[]} children
*/
export function appendPane(parent, title, children) {
export function appendPane(parent, group, children) {
if (!children.length) return;
const section = document.createElement("section");
section.dataset.group = groupName(title);
section.dataset.group = group;
section.append(...children);
parent.append(section);
}
website_next/explore/block/receipt.js
+139
View File
@@ -0,0 +1,139 @@
import { createBrand } from "../../brand/index.js";
import { openDialog } from "../../dialog/index.js";
import { getCoinbaseMessage } from "./format.js";
import { createBlockUrl, getReceiptSections } from "./receipt/data.js";
import { createReceiptQr } from "./receipt/qr.js";
import { createBlockTitle } from "./title.js";
/** @typedef {import("../../modules/brk-client/index.js").BlockInfoV1} Block */
/** @typedef {import("./receipt/data.js").ReceiptRow} ReceiptRow */
/** @typedef {import("./receipt/data.js").ReceiptSection} ReceiptSection */
/** @param {ReceiptRow} data */
function createReceiptRow(data) {
const row = document.createElement("div");
const name = document.createElement("span");
const amount = document.createElement("strong");
row.dataset.receiptRow = data.variant ?? (data.detail ? "amount" : "");
name.textContent = data.label;
amount.textContent = data.value;
if (data.detail) {
const detail = document.createElement("small");
detail.textContent = data.detail;
amount.append(detail);
}
row.append(name, amount);
return row;
}
/** @param {ReceiptSection} data */
function createReceiptSection(data) {
const section = document.createElement("section");
const heading = document.createElement("h3");
section.dataset.receiptSection = "";
heading.textContent = data.title;
section.append(heading, ...data.rows.map(createReceiptRow));
return section;
}
/** @param {string} message */
function createCoinbaseNote(message) {
const note = document.createElement("p");
note.dataset.receiptNote = "";
note.textContent = message;
return note;
}
/** @param {Block} block */
function createReceiptHead(block) {
const head = document.createElement("header");
const title = document.createElement("h2");
head.dataset.receiptHead = "";
title.append(...createBlockTitle(block.height));
head.append(title);
return head;
}
function createReceiptBrand() {
const section = document.createElement("section");
section.dataset.receiptBrand = "";
section.append(createBrand({ tone: "receipt", fill: 1 }));
return section;
}
/** @param {Block} block */
function openReceiptDialog(block) {
const dialog = document.createElement("dialog");
const paper = document.createElement("article");
const controls = document.createElement("footer");
const print = document.createElement("button");
const closeForm = document.createElement("form");
const close = document.createElement("button");
const url = createBlockUrl(block);
const coinbase = getCoinbaseMessage(block.extras.coinbaseSignatureAscii);
dialog.dataset.blockReceipt = "";
dialog.tabIndex = -1;
paper.dataset.receiptPaper = "";
controls.dataset.receiptControls = "";
print.type = "button";
print.dataset.receiptAction = "print";
print.textContent = "Print";
closeForm.method = "dialog";
close.type = "submit";
close.dataset.receiptAction = "close";
close.textContent = "Close";
closeForm.append(close);
controls.append(closeForm, print);
paper.append(
createReceiptHead(block),
...getReceiptSections(block).map(createReceiptSection),
...(coinbase ? [createCoinbaseNote(coinbase)] : []),
createReceiptQr(block, url),
createReceiptBrand(),
);
dialog.append(paper, controls);
print.addEventListener("click", () => {
window.print();
});
openDialog(dialog, document.body);
dialog.focus({ preventScroll: true });
dialog.scrollTop = 0;
}
export function createBlockReceipt() {
const button = document.createElement("button");
/** @type {Block | null} */
let block = null;
button.type = "button";
button.disabled = true;
button.dataset.receiptButton = "";
button.textContent = "Receipt";
button.addEventListener("click", () => {
if (block) openReceiptDialog(block);
});
/** @param {Block} nextBlock */
function update(nextBlock) {
block = nextBlock;
button.disabled = false;
}
return /** @type {const} */ ({
button,
update,
});
}
website_next/explore/block/receipt/data.js
+162
View File
@@ -0,0 +1,162 @@
import { getBtcParts, satsToUsd } from "../../../btc/index.js";
import { getUsdParts } from "../../../usd/index.js";
import { formatFeeRate } from "../../../utils/fee-rate.js";
import {
DIFFICULTY_EPOCH_BLOCKS,
HALVING_EPOCH_BLOCKS,
formatBlockFill,
formatBytes,
formatDateTime,
formatEpoch,
formatNumber,
formatPoolBlockNumber,
formatWeight,
} from "../format.js";
/** @typedef {import("../../../modules/brk-client/index.js").BlockInfoV1} Block */
/**
* @typedef {Object} ReceiptRow
* @property {string} label
* @property {string} value
* @property {string} [detail]
* @property {"total" | "wide"} [variant]
*/
/**
* @typedef {Object} ReceiptSection
* @property {string} title
* @property {ReceiptRow[]} rows
*/
/** @param {number} value */
function formatBtc(value) {
return getBtcParts(value).map(({ text }) => text).join("");
}
/** @param {number} value */
function formatUsd(value) {
return getUsdParts(value).map(({ text }) => text).join("");
}
/**
* @param {number} sats
* @param {number} price
*/
function formatSatsUsd(sats, price) {
return formatUsd(satsToUsd(sats, price));
}
/** @param {Block} block */
export function createBlockUrl(block) {
return new URL(`/block/${block.id}`, window.location.origin).href;
}
/** @param {string} url */
export function formatDisplayUrl(url) {
return url.replace(/^https?:\/\//, "");
}
/**
* @param {string} label
* @param {string} value
* @param {"total" | "wide"} [variant]
* @returns {ReceiptRow}
*/
function createRow(label, value, variant) {
return { label, value, ...(variant ? { variant } : {}) };
}
/**
* @param {string} label
* @param {string} value
* @param {string} detail
* @param {"total"} [variant]
* @returns {ReceiptRow}
*/
function createAmountRow(label, value, detail, variant) {
return { label, value, detail, ...(variant ? { variant } : {}) };
}
/**
* @param {string} title
* @param {ReceiptRow[]} rows
* @returns {ReceiptSection}
*/
function createSection(title, rows) {
return { title, rows };
}
/** @param {Block} block */
export function getReceiptSections(block) {
const { extras } = block;
const subsidy = extras.reward - extras.totalFees;
return [
createSection("Summary", [
createRow("Time", formatDateTime(block.timestamp), "wide"),
createRow("Price", formatUsd(extras.price)),
createRow("Miner", extras.pool.name),
createAmountRow(
"Reward",
formatBtc(extras.reward),
formatSatsUsd(extras.reward, extras.price),
"total",
),
createAmountRow(
"Fees",
formatBtc(extras.totalFees),
formatSatsUsd(extras.totalFees, extras.price),
),
createRow("Tx", formatNumber(block.txCount)),
createRow(
"Size",
`${formatBytes(block.size)} · ${formatBlockFill(block.weight)}`,
),
]),
createSection("Reward split", [
createAmountRow(
"Subsidy",
formatBtc(subsidy),
formatSatsUsd(subsidy, extras.price),
),
createAmountRow(
"Fees",
formatBtc(extras.totalFees),
formatSatsUsd(extras.totalFees, extras.price),
),
]),
createSection("Block", [
createRow("Weight", formatWeight(block.weight)),
createRow("Virtual", `${formatNumber(extras.virtualSize)} vB`),
createRow("Avg tx", formatBytes(extras.avgTxSize)),
createRow("Input", formatNumber(extras.totalInputs)),
createRow("Output", formatNumber(extras.totalOutputs)),
]),
createSection("Fees", [
createRow("Median", `${formatFeeRate(extras.medianFee)} sat/vB`),
createRow("Average", `${formatFeeRate(extras.avgFeeRate)} sat/vB`),
createRow(
"Range",
`${formatFeeRate(extras.feeRange[0])} - ${formatFeeRate(extras.feeRange[6])} sat/vB`,
),
createRow("Avg fee", `${formatNumber(extras.avgFee)} sat`),
createRow("Median fee", `${formatNumber(extras.medianFeeAmt)} sat`),
]),
createSection("Mining", [
createRow("Pool slug", extras.pool.slug),
createRow("Pool block", formatPoolBlockNumber(extras.pool.blockNumber)),
createRow("Difficulty", formatNumber(block.difficulty), "wide"),
createRow(
"Diff epoch",
formatEpoch(block.height, DIFFICULTY_EPOCH_BLOCKS),
),
createRow("Halving", formatEpoch(block.height, HALVING_EPOCH_BLOCKS)),
]),
createSection("Verify", [
createRow("Height", `#${formatNumber(block.height)}`),
createRow("Hash", block.id, "wide"),
createRow("Previous", block.previousblockhash, "wide"),
]),
];
}
website_next/explore/block/receipt/qr.js
+25
View File
@@ -0,0 +1,25 @@
import { createQrDataUrl } from "../../../qr/index.js";
import { formatDisplayUrl } from "./data.js";
/** @typedef {import("../../../modules/brk-client/index.js").BlockInfoV1} Block */
/**
* @param {Block} block
* @param {string} url
*/
export function createReceiptQr(block, url) {
const section = document.createElement("section");
const label = document.createElement("span");
const image = document.createElement("img");
const link = document.createElement("a");
section.dataset.receiptQr = "";
label.textContent = "Scan to verify";
image.alt = `QR code for block ${block.height}`;
image.src = createQrDataUrl(url, { padX: 0, padY: 0, scale: 8 });
link.href = url;
link.textContent = formatDisplayUrl(url);
section.append(label, image, link);
return section;
}
website_next/explore/block/receipt/style.css
+320
View File
@@ -0,0 +1,320 @@
dialog[data-block-receipt] {
--receipt-page-width: 80mm;
--receipt-paper-width: 72mm;
--receipt-top-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 1 1 0 2 1z'/%3E%3C/svg%3E");
--receipt-bottom-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0 2 0 1 1z'/%3E%3C/svg%3E");
--receipt-dialog-padding-block: var(--page-x);
--receipt-tooth-count: 36;
--receipt-tooth-size: 0.16rem;
position: fixed;
inset: 0 0 auto;
width: min(100% - 2rem, 28rem);
max-height: 100dvh;
margin: 0 auto;
border-radius: 0;
overflow-y: auto;
padding-block: var(--receipt-dialog-padding-block);
color: var(--black);
background: transparent;
font-family: var(--font-mono);
overscroll-behavior: contain;
scrollbar-width: none;
:is(
[data-receipt-head] > h2,
[data-receipt-section] > h3,
[data-receipt-row] > span,
[data-receipt-row] > strong,
[data-receipt-row] small,
[data-receipt-note],
[data-receipt-qr] > span,
[data-receipt-qr] > a
) {
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
}
[data-receipt-paper] {
position: relative;
display: grid;
gap: 0.375rem;
width: min(100%, var(--receipt-paper-width));
margin-inline: auto;
padding: calc(var(--receipt-tooth-size) + 0.5rem) 1rem
calc(var(--receipt-tooth-size) + 0.75rem);
border-radius: 0;
background: var(--white);
mask:
var(--receipt-top-teeth) top left / calc(100% / var(--receipt-tooth-count))
var(--receipt-tooth-size) repeat-x,
linear-gradient(#000 0 0) 0 var(--receipt-tooth-size) / 100%
calc(
100% - var(--receipt-tooth-size) - var(--receipt-tooth-size)
)
no-repeat,
var(--receipt-bottom-teeth) bottom left /
calc(100% / var(--receipt-tooth-count)) var(--receipt-tooth-size)
repeat-x;
}
[data-receipt-head] {
--block-title-height-color: color-mix(in oklch, var(--black) 62%, transparent);
--block-title-height-line-height: var(--line-height-base);
--block-title-height-size: var(--font-size-base);
--block-title-label-size: 1.375rem;
display: grid;
gap: 0.3125rem;
align-items: center;
justify-items: center;
margin-block-start: 0.5rem;
text-align: center;
> h2 {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
align-items: baseline;
justify-content: center;
min-width: 0;
color: var(--black);
font-family: var(--font-mono);
font-weight: var(--font-weight-regular);
line-height: 1;
}
}
[data-receipt-section] {
display: grid;
gap: 0.25rem;
min-width: 0;
border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
padding-top: 0.75rem;
> h3 {
color: var(--black);
font-family: var(--font-mono);
font-weight: var(--font-weight-strong);
text-transform: uppercase;
}
}
[data-receipt-row] {
display: grid;
grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
gap: 0.75rem;
align-items: baseline;
min-width: 0;
> span {
color: color-mix(in oklch, var(--black) 58%, transparent);
text-transform: uppercase;
}
> strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--black);
font-weight: var(--font-weight-strong);
text-align: right;
small {
display: block;
color: color-mix(in oklch, var(--black) 52%, transparent);
font-weight: var(--font-weight-regular);
}
}
&[data-receipt-row="wide"] {
grid-template-columns: minmax(0, 1fr);
gap: 0.125rem;
> strong {
word-break: break-all;
text-align: left;
}
}
&[data-receipt-row="amount"],
&[data-receipt-row="total"] {
align-items: start;
> strong {
display: grid;
gap: 0.125rem;
}
}
&[data-receipt-row="total"] {
border-block: 1px dashed
color-mix(in oklch, var(--black) 35%, transparent);
padding-block: 0.375rem;
> span,
> strong {
color: var(--black);
}
}
}
[data-receipt-note] {
overflow: hidden;
color: var(--black);
font-style: italic;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-receipt-brand] {
display: grid;
justify-items: center;
border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
padding-top: 0.5rem;
}
[data-receipt-qr] {
display: grid;
justify-items: center;
gap: 0.5rem;
border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
padding-top: 0.75rem;
text-align: center;
> span {
color: var(--black);
text-transform: uppercase;
}
img {
width: min(100%, 10rem);
aspect-ratio: 1;
image-rendering: pixelated;
}
a {
min-width: 0;
overflow-wrap: anywhere;
color: var(--black);
text-decoration: none;
}
}
[data-receipt-controls] {
position: fixed;
bottom: 0.5rem;
left: 50%;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
justify-content: center;
width: min(100% - 2rem, var(--receipt-paper-width));
transform: translateX(-50%);
form {
display: contents;
}
button {
padding: 0.25rem 0.375rem;
font-size: var(--font-size-xs);
}
[data-receipt-action="close"] {
--button-background: var(--red);
--button-hover-background: var(--black);
--button-color: var(--black);
}
[data-receipt-action="print"] {
--button-background: var(--green);
--button-hover-background: var(--black);
--button-color: var(--black);
}
@media (hover: hover) and (pointer: fine) {
[data-receipt-action="close"]:hover {
color: var(--red);
}
[data-receipt-action="print"]:hover {
color: var(--green);
}
}
[data-receipt-action="close"][data-press] {
color: var(--red);
}
[data-receipt-action="print"][data-press] {
color: var(--green);
}
[data-receipt-action]:active {
color: var(--black);
}
}
}
@media print {
@page {
size: 80mm auto;
margin: 4mm;
}
html,
body {
background: white !important;
}
body > :not(dialog[data-block-receipt]) {
display: none !important;
}
dialog[data-block-receipt] {
position: static;
display: block;
width: var(--receipt-page-width);
max-width: none;
max-height: none;
margin: 0;
overflow: visible;
padding: 0;
color: black;
background: white;
overscroll-behavior: auto;
}
dialog[data-block-receipt]::backdrop {
display: none;
}
dialog[data-block-receipt] [data-receipt-paper] {
width: var(--receipt-paper-width);
padding: calc(var(--receipt-tooth-size) + 0.5rem) 1rem
calc(var(--receipt-tooth-size) + 0.75rem);
border-radius: 0;
color: black;
background: white;
font-size: 8pt;
line-height: 1.25;
}
dialog[data-block-receipt] :is(
[data-receipt-head] > h2,
[data-receipt-row] > span,
[data-receipt-row] > strong,
[data-receipt-row] small,
[data-receipt-section] > h3,
[data-receipt-qr] > span,
[data-receipt-qr] > a
) {
font-size: 8pt;
line-height: 1.25;
}
dialog[data-block-receipt] [data-receipt-controls] {
display: none;
}
}
website_next/explore/block/rewards.js
+2 -10
View File
@@ -1,4 +1,4 @@
import { createBtcAmount, SATS_PER_BTC } from "../../btc/index.js";
import { createBtcAmount, satsToUsd } from "../../btc/index.js";
import {
appendLegendListItem,
createLegendItem,
@@ -23,20 +23,12 @@ function formatShare(sats, total) {
return `${((sats / total) * 100).toFixed(2)}%`;
}
/**
* @param {number} sats
* @param {number} price
*/
function getSatsUsd(sats, price) {
return (sats / SATS_PER_BTC) * price;
}
/**
* @param {number} sats
* @param {number} price
*/
function createSatsUsdAmount(sats, price) {
return createUsdAmount("span", getSatsUsd(sats, price));
return createUsdAmount("span", satsToUsd(sats, price));
}
/**
website_next/explore/block/rewards/style.css
+59
View File
@@ -0,0 +1,59 @@
#block-details section[data-group="rewards"] {
--section-color: var(--orange);
[data-rewards-pane] {
display: grid;
gap: 0.5rem;
min-width: 0;
}
[data-reward-total] {
display: grid;
gap: 0.125rem;
justify-items: start;
min-width: 0;
color: var(--gray);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-align: left;
strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-strong);
line-height: var(--line-height-sm);
}
> span:first-child {
color: var(--section-color);
text-transform: uppercase;
}
}
[data-reward-bar] {
display: flex;
gap: 0.125rem;
height: 0.5rem;
min-width: 0;
}
[data-reward-segment] {
width: var(--share);
border-radius: 0.125rem;
transition: opacity var(--transition-duration) ease;
&[data-reward-segment="subsidy"] {
background: var(--orange);
}
&[data-reward-segment="fees"] {
background: var(--green);
}
&[data-muted] {
opacity: 0.25;
}
}
}
website_next/explore/block/style.css
+57 -333
View File
@@ -19,14 +19,25 @@
}
> header {
--block-title-height-color: var(--gray);
--block-title-height-line-height: var(--line-height-lg);
--block-title-height-size: var(--font-size-lg);
--block-title-label-size: 2.5rem;
display: grid;
padding-bottom: 1.25rem;
:is([data-block-title], [data-block-meta]) {
[data-block-title] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.35rem 1rem;
align-items: baseline;
align-items: start;
min-width: 0;
}
[data-block-main] {
display: grid;
gap: 0.15rem;
min-width: 0;
}
@@ -38,24 +49,10 @@
min-width: 0;
overflow-wrap: anywhere;
font-family: var(--font-mono);
font-weight: 400;
font-weight: var(--font-weight-regular);
line-height: 1;
}
[data-title-label] {
font-family: var(--font-serif);
font-size: 2.5rem;
font-style: italic;
line-height: 0.9;
text-transform: lowercase;
}
[data-title-height] {
color: var(--gray);
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
[data-block-date],
[data-block-hash-line] {
color: var(--gray);
@@ -66,6 +63,32 @@
text-align: right;
}
[data-block-side] {
display: grid;
gap: 0.15rem;
justify-items: end;
min-width: max-content;
}
[data-block-actions] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
min-width: 0;
button {
padding: 0.375rem 0.5rem;
font-size: var(--font-size-xs);
line-height: 1;
}
[data-receipt-button] {
padding: 0.25rem 0.375rem;
}
}
[data-block-hash-line] {
min-width: 0;
overflow: hidden;
@@ -85,325 +108,26 @@
align-content: start;
gap: 0.75rem;
min-width: 0;
}
}
&[data-group="mining"] {
--section-color: var(--orange);
:is(#block-details > header, dialog[data-block-receipt] [data-receipt-head]) {
[data-title-label] {
font-family: var(--font-serif);
font-size: var(--block-title-label-size);
font-style: italic;
line-height: 0.9;
text-transform: lowercase;
}
[data-miner-pane] {
display: grid;
gap: 1rem;
min-width: 0;
}
[data-title-height] {
color: var(--block-title-height-color);
font-size: var(--block-title-height-size);
line-height: var(--block-title-height-line-height);
}
[data-miner-head] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
min-width: 0;
}
[data-miner-identity] {
display: grid;
gap: 0.125rem;
min-width: 0;
}
[data-miner-title] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: baseline;
min-width: 0;
> strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
}
> span {
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
}
[data-miner-slug] {
min-width: 0;
overflow-wrap: anywhere;
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
[data-miner-logo] {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
[data-coinbase-message] {
min-width: 0;
overflow: hidden;
color: var(--white);
font-size: var(--font-size-sm);
font-style: italic;
line-height: var(--line-height-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
}
&[data-group="difficulty"] {
--section-color: var(--orange);
[data-metric-list] {
display: grid;
gap: 0.5rem;
min-width: 0;
}
[data-metric-stat] {
display: grid;
grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
color: var(--section-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-epoch] {
display: grid;
gap: 0.25rem;
min-width: 0;
}
[data-epoch-head] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
min-width: 0;
overflow-wrap: anywhere;
color: var(--epoch-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
color: var(--white);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-epoch-bar] {
display: flex;
gap: 0.125rem;
height: 0.5rem;
min-width: 0;
}
[data-epoch-segment] {
width: var(--share);
border-radius: 0.125rem;
&[data-epoch-segment="done"] {
background: var(--epoch-color);
}
&[data-epoch-segment="remaining"] {
background: color-mix(in oklch, var(--gray) 35%, transparent);
}
}
}
&[data-group="block"] {
--section-color: var(--cyan);
[data-block-box] {
display: grid;
gap: 0.5rem;
min-width: 0;
border: 1px solid
color-mix(in oklch, var(--section-color) 35%, transparent);
border-radius: 0.25rem;
padding: 0.75rem;
&[data-block-box="tx"] {
border-color: color-mix(in oklch, var(--orange) 35%, transparent);
}
&[data-block-box="input"] {
border-color: color-mix(in oklch, var(--yellow) 55%, transparent);
}
&[data-block-box="output"] {
border-color: color-mix(in oklch, var(--red) 55%, transparent);
}
}
[data-inline-row] {
display: grid;
grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
color: var(--section-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
min-width: 0;
color: var(--section-color);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-block-io] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.75rem;
min-width: 0;
[data-block-box] {
align-content: center;
padding: 0.5rem;
}
[data-inline-row] {
grid-template-columns: auto auto;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
}
}
[data-block-box="tx"] > [data-inline-row] {
> span,
strong {
color: var(--orange);
}
}
:is([data-block-box="input"], [data-block-box="output"]) > [data-inline-row] {
> span,
strong {
color: var(--block-box-color);
}
}
[data-block-box="input"] {
--block-box-color: var(--yellow);
}
[data-block-box="output"] {
--block-box-color: var(--red);
}
}
&[data-group="rewards"] {
--section-color: var(--orange);
[data-rewards-pane] {
display: grid;
gap: 0.5rem;
min-width: 0;
}
[data-reward-total] {
display: grid;
gap: 0.125rem;
justify-items: start;
min-width: 0;
color: var(--gray);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-align: left;
strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
}
> span:first-child {
color: var(--section-color);
text-transform: uppercase;
}
}
[data-reward-bar] {
display: flex;
gap: 0.125rem;
height: 0.5rem;
min-width: 0;
}
[data-reward-segment] {
width: var(--share);
border-radius: 0.125rem;
transition: opacity var(--transition-duration) ease;
&[data-reward-segment="subsidy"] {
background: var(--orange);
}
&[data-reward-segment="fees"] {
background: var(--green);
}
&[data-muted] {
opacity: 0.25;
}
}
}
&[data-group="fees"] {
figure[data-fee-chart] {
--chart-xy-height: 7.5rem;
}
}
[data-title-height] [data-dim] {
opacity: 0.5;
}
}
website_next/explore/block/title.js
+27
View File
@@ -0,0 +1,27 @@
/** @param {number} height */
function createBlockHeight(height) {
const element = document.createElement("span");
const prefix = document.createElement("span");
const value = document.createElement("span");
const text = String(height);
prefix.dataset.dim = "";
prefix.textContent = `#${"0".repeat(Math.max(0, 7 - text.length))}`;
value.textContent = text;
element.append(prefix, value);
return element;
}
/** @param {number} height */
export function createBlockTitle(height) {
const label = document.createElement("span");
const value = document.createElement("span");
label.dataset.titleLabel = "";
value.dataset.titleHeight = "";
label.textContent = "Block";
value.append(createBlockHeight(height));
return /** @type {const} */ ([label, value]);
}
website_next/explore/block/transactions.js
+13 -23
View File
@@ -1,24 +1,17 @@
import { formatBlockFill, formatBytes, formatNumber } from "./format.js";
/** @typedef {import("../../modules/brk-client/index.js").BlockInfoV1} Block */
const MAX_BLOCK_WEIGHT = 4_000_000;
/** @param {number} bytes */
function formatBytes(bytes) {
return bytes >= 1_000_000
? `${(bytes / 1_000_000).toFixed(2)} MB`
: `${bytes.toLocaleString()} B`;
}
/**
* @param {string} label
* @param {(string | Node)[]} values
*/
function createInlineRow(label, values) {
function createBlockRow(label, values) {
const row = document.createElement("div");
const name = document.createElement("span");
const data = document.createElement("strong");
row.dataset.inlineRow = "";
row.dataset.blockRow = "";
name.textContent = label;
data.append(...values);
row.append(name, data);
@@ -29,22 +22,17 @@ function createInlineRow(label, values) {
/**
* @param {string} label
* @param {string | Node} value
* @param {string} [type]
* @param {string} type
*/
function createInlineBox(label, value, type = "inline") {
function createBlockBox(label, value, type) {
const box = document.createElement("div");
box.dataset.blockBox = type;
box.append(createInlineRow(label, [value]));
box.append(createBlockRow(label, [value]));
return box;
}
/** @param {Block} block */
function formatBlockFill(block) {
return `${((block.weight / MAX_BLOCK_WEIGHT) * 100).toFixed(1)}%`;
}
/** @param {Block} block */
export function createTransactionPane(block) {
const { extras } = block;
@@ -56,15 +44,17 @@ export function createTransactionPane(block) {
transactions.dataset.blockBox = "tx";
io.dataset.blockIo = "";
io.append(
createInlineBox("Input", extras.totalInputs.toLocaleString(), "input"),
createInlineBox("Output", extras.totalOutputs.toLocaleString(), "output"),
createBlockBox("Input", formatNumber(extras.totalInputs), "input"),
createBlockBox("Output", formatNumber(extras.totalOutputs), "output"),
);
transactions.append(
createInlineRow("Tx", [block.txCount.toLocaleString()]),
createBlockRow("Tx", [formatNumber(block.txCount)]),
io,
);
box.append(
createInlineRow("Block", [`${formatBytes(block.size)} · ${formatBlockFill(block)}`]),
createBlockRow("Block", [
`${formatBytes(block.size)} · ${formatBlockFill(block.weight)}`,
]),
transactions,
);
website_next/explore/block/transactions/style.css
+93
View File
@@ -0,0 +1,93 @@
#block-details section[data-group="block"] {
--section-color: var(--cyan);
[data-block-box] {
display: grid;
gap: 0.5rem;
min-width: 0;
border: 1px solid color-mix(in oklch, var(--section-color) 35%, transparent);
border-radius: 0.25rem;
padding: 0.75rem;
&[data-block-box="tx"] {
border-color: color-mix(in oklch, var(--orange) 35%, transparent);
}
&[data-block-box="input"] {
border-color: color-mix(in oklch, var(--yellow) 55%, transparent);
}
&[data-block-box="output"] {
border-color: color-mix(in oklch, var(--red) 55%, transparent);
}
}
[data-block-row] {
display: grid;
grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
color: var(--section-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
min-width: 0;
color: var(--section-color);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-strong);
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-block-io] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.75rem;
min-width: 0;
[data-block-box] {
align-content: center;
padding: 0.5rem;
}
[data-block-row] {
grid-template-columns: auto auto;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
}
}
[data-block-box="tx"] > [data-block-row] {
> span,
strong {
color: var(--orange);
}
}
:is([data-block-box="input"], [data-block-box="output"]) > [data-block-row] {
> span,
strong {
color: var(--block-box-color);
}
}
[data-block-box="input"] {
--block-box-color: var(--yellow);
}
[data-block-box="output"] {
--block-box-color: var(--red);
}
}
website_next/explore/chain/block-cube.js
+4 -3
View File
@@ -6,6 +6,7 @@ import {
createHeightElement,
dim,
formatHHMM,
formatNumber,
formatShortDate,
} from "./format.js";
@@ -15,7 +16,7 @@ import {
export function createPlaceholderCube() {
const cube = document.createElement("div");
cube.dataset.cube = "";
cube.dataset.cube = "block";
cube.dataset.placeholder = "";
return cube;
@@ -44,7 +45,7 @@ function createConfirmedCube(block, onSelect) {
cube.element.dataset.hash = block.id;
cube.element.dataset.height = String(block.height);
cube.element.dataset.timestamp = String(block.timestamp);
cube.element.title = `Block ${block.height.toLocaleString()}`;
cube.element.title = `Block ${formatNumber(block.height)}`;
onPlainClick(cube.element, () => onSelect(cube.element));
const date = document.createElement("p");
@@ -145,7 +146,7 @@ export function updateProjectedCube(cube, block) {
String(Math.min(1, block.blockVSize / 1_000_000)),
);
cube.parts.txs.nodeValue = block.nTx.toLocaleString();
cube.parts.txs.nodeValue = formatNumber(block.nTx);
cube.parts.txsUnit.nodeValue = block.nTx === 1 ? "tx" : "txs";
cube.parts.median.nodeValue = formatFeeRate(block.medianFee);
cube.parts.rangeLo.nodeValue = formatFeeRate(block.feeRange[0]);
website_next/explore/chain/cube/index.js
+9 -28
View File
@@ -1,3 +1,5 @@
import { CUBE_FACE_SPECS, createCubeFace } from "../../../cube/faces.js";
/**
* @param {number} [fill]
*/
@@ -23,25 +25,16 @@ export function createCubeDiv(fill = 1) {
* @param {number} fill
*/
function populateCube(element, fill) {
const topFace = createFace("face-text", "top");
const rightFace = createFace("face-text", "right");
const leftFace = createFace("face-text", "left");
const topFace = createCubeFace("div", "text", "top");
const rightFace = createCubeFace("div", "text", "right");
const leftFace = createCubeFace("div", "text", "left");
element.dataset.cube = "";
element.dataset.cube = "block";
element.style.setProperty("--fill", String(fill));
element.append(
createFace("glass", "bottom"),
createFace("glass", "rear-right"),
createFace("glass", "rear-left"),
createFace("liquid", "bottom"),
createFace("liquid", "rear-right"),
createFace("liquid", "rear-left"),
createFace("liquid", "right"),
createFace("liquid", "left"),
createFace("liquid", "top"),
createFace("glass", "right"),
createFace("glass", "left"),
createFace("glass", "top"),
...CUBE_FACE_SPECS.map(([role, side]) =>
createCubeFace("div", role, side),
),
rightFace,
leftFace,
topFace,
@@ -49,15 +42,3 @@ function populateCube(element, fill) {
return { topFace, rightFace, leftFace };
}
/**
* @param {string} role
* @param {string} position
*/
function createFace(role, position) {
const element = document.createElement("div");
element.className = `face ${role} ${position}`;
return element;
}
website_next/explore/chain/cube/style.css
+28 -28
View File
@@ -96,11 +96,11 @@
visibility: hidden;
}
&[data-skeleton] .face-text {
&[data-skeleton] [data-role="text"] {
visibility: hidden;
}
.face {
[data-face] {
position: absolute;
top: 0;
left: 0;
@@ -117,7 +117,7 @@
pointer-events: auto;
}
.liquid {
[data-role="liquid"] {
--face-scale-y: calc(var(--iso-scale) * var(--fill));
--face-stack-shift: calc(var(--iso-scale) * (1 - var(--fill)));
@@ -125,14 +125,14 @@
opacity: calc(1 - var(--is-empty));
}
.glass {
[data-role="glass"] {
--face-scale-y: calc(var(--iso-scale) * (1 - var(--fill)));
--face-stack-shift: 0;
background: oklch(from var(--face-color) l c h / var(--cube-empty-alpha));
}
.face-text {
[data-role="text"] {
--face-scale-y: var(--iso-scale);
--face-stack-shift: 0;
@@ -142,21 +142,21 @@
padding: 0.1rem;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: 450;
font-weight: var(--font-weight-strong);
line-height: var(--line-height-base);
text-align: center;
pointer-events: none;
&.top {
&[data-side="top"] {
justify-content: center;
text-transform: uppercase;
}
&.right {
&[data-side="right"] {
justify-content: space-between;
}
&.left {
&[data-side="left"] {
justify-content: center;
}
@@ -165,72 +165,72 @@
}
}
.top,
.bottom {
[data-side="top"],
[data-side="bottom"] {
--face-orient: rotate(30deg) skewX(-30deg);
--face-scale-y: var(--iso-scale);
}
.right,
.rear-left {
[data-side="right"],
[data-side="rear-left"] {
--face-orient: rotate(-30deg) skewX(-30deg);
}
.left,
.rear-right {
[data-side="left"],
[data-side="rear-right"] {
--face-orient: rotate(30deg) skewX(30deg);
}
.top,
.rear-right {
[data-side="top"],
[data-side="rear-right"] {
--face-y: calc(var(--face-stack-shift) - var(--iso-scale));
}
.left,
.rear-left {
[data-side="left"],
[data-side="rear-left"] {
--face-y: var(--face-stack-shift);
}
.right {
[data-side="right"] {
--face-y: calc(var(--face-stack-shift) + var(--iso-scale));
}
.bottom {
[data-side="bottom"] {
--face-y: 0;
}
.top {
[data-side="top"] {
--face-color: var(--face-top);
--face-x: 0;
}
.bottom {
[data-side="bottom"] {
--face-color: var(--face-bottom);
--face-x: 1;
}
.right {
[data-side="right"] {
--face-color: var(--face-right);
--face-x: 1;
}
.left {
[data-side="left"] {
--face-color: var(--face-left);
--face-x: 0;
}
.rear-right {
[data-side="rear-right"] {
--face-color: var(--face-left);
--face-x: 1;
}
.rear-left {
[data-side="rear-left"] {
--face-color: var(--face-top);
--face-scale-x: -1;
--face-x: 1;
}
.liquid.top {
[data-role="liquid"][data-side="top"] {
--face-x: calc(1 - var(--fill));
}
}
website_next/explore/chain/format.js
+5
View File
@@ -37,6 +37,11 @@ export function createHeightElement(height) {
return container;
}
/** @param {number} value */
export function formatNumber(value) {
return value.toLocaleString();
}
/** @param {number} unixSeconds */
export function formatShortDate(unixSeconds) {
const date = new Date(unixSeconds * 1_000);
website_next/explore/chain/index.js
+51 -66
View File
@@ -18,7 +18,7 @@ import {
preserveScrollPosition,
scrollToElement,
} from "./scroll.js";
import { transitionMs } from "./transition.js";
import { createJumpController } from "./jump.js";
const BLOCK_BATCH_SIZE = 15;
const EDGE_LOAD_DISTANCE = 50;
@@ -32,6 +32,16 @@ const TIP_BLOCK_THRESHOLD = 10;
/** @typedef {Awaited<ReturnType<typeof brk.getMempoolBlocks>>[number]} MempoolBlock */
/** @typedef {{ generation: number, startHeight: number, placeholders: HTMLElement[] }} OlderBatch */
/** @param {string | number | null | undefined} hashOrHeight */
function normalizeTarget(hashOrHeight) {
if (hashOrHeight === "tip") return null;
if (typeof hashOrHeight === "string" && /^\d+$/.test(hashOrHeight)) {
return Number(hashOrHeight);
}
return hashOrHeight;
}
/**
* @param {{ onSelect?: (block: Block) => void }} [options]
*/
@@ -42,6 +52,9 @@ export function createChain({ onSelect = () => {} } = {}) {
const tipButton = createEdgeButton("tip", "↑", "←", "Jump to chain tip", () => {
jumpToTip();
});
const jump = createJumpController(element, () => {
if (tipCube) selectCube(tipCube, { scroll: "instant" });
});
element.id = "chain";
setTipVisible(false);
@@ -77,14 +90,19 @@ export function createChain({ onSelect = () => {} } = {}) {
/** @type {number | undefined} */
let pollId;
/** @type {number | undefined} */
let jumpTimeout;
let tipSyncFrame = 0;
let jumping = false;
/** @type {AbortController} */
let controller = new AbortController();
/**
* @param {string} label
* @param {unknown} error
*/
function logChainError(label, error) {
if (!controller.signal.aborted) console.error(label, error);
}
/** @param {string | number | null | undefined} hashOrHeight */
function findCube(hashOrHeight) {
if (hashOrHeight == null) {
@@ -124,41 +142,7 @@ export function createChain({ onSelect = () => {} } = {}) {
}
function jumpToTip() {
if (!tipCube || jumping) return;
jumping = true;
element.dataset.jumping = "";
element.addEventListener("transitionend", finishJumpToTip);
jumpTimeout = window.setTimeout(
finishJumpToTip,
transitionMs(element, "opacity") + 50,
);
}
/** @param {Event} [event] */
function finishJumpToTip(event) {
if (
event instanceof TransitionEvent &&
(event.target !== element || event.propertyName !== "opacity")
) {
return;
}
if (tipCube) selectCube(tipCube, { scroll: "instant" });
cancelJump();
}
function cancelJump() {
if (jumpTimeout !== undefined) {
window.clearTimeout(jumpTimeout);
jumpTimeout = undefined;
}
element.removeEventListener("transitionend", finishJumpToTip);
delete element.dataset.jumping;
jumping = false;
if (tipCube) jump.jump();
}
/**
@@ -182,6 +166,14 @@ export function createChain({ onSelect = () => {} } = {}) {
}
}
function markConfirmedSkeletons() {
for (const cube of blocksElement.children) {
if (!cube.hasAttribute("data-projected")) {
cube.setAttribute("data-skeleton", "");
}
}
}
function isHorizontal() {
return isHorizontalLayout(blocksElement);
}
@@ -342,10 +334,7 @@ export function createChain({ onSelect = () => {} } = {}) {
async function goToCube(hashOrHeight) {
if (!active) return;
if (hashOrHeight === "tip") hashOrHeight = null;
if (typeof hashOrHeight === "string" && /^\d+$/.test(hashOrHeight)) {
hashOrHeight = Number(hashOrHeight);
}
hashOrHeight = normalizeTarget(hashOrHeight);
const existing = findCube(hashOrHeight);
if (existing) {
@@ -353,12 +342,7 @@ export function createChain({ onSelect = () => {} } = {}) {
return;
}
for (const cube of blocksElement.children) {
if (!cube.hasAttribute("data-projected")) {
cube.setAttribute("data-skeleton", "");
}
}
markConfirmedSkeletons();
element.dataset.loading = "";
try {
@@ -367,9 +351,7 @@ export function createChain({ onSelect = () => {} } = {}) {
const cube = findCube(startHash);
if (cube) selectCube(cube, { scroll: "instant" });
} catch (error) {
if (!controller.signal.aborted) {
console.error("explore chain load:", error);
}
logChainError("explore chain load:", error);
} finally {
delete element.dataset.loading;
}
@@ -381,7 +363,7 @@ export function createChain({ onSelect = () => {} } = {}) {
await brk.getMempoolBlocks({ signal: controller.signal }),
);
} catch (error) {
if (!controller.signal.aborted) console.error("explore mempool:", error);
logChainError("explore mempool:", error);
}
}
@@ -394,7 +376,7 @@ export function createChain({ onSelect = () => {} } = {}) {
try {
appendNewerBlocks(await brk.getBlocksV1({ signal: controller.signal }));
} catch (error) {
if (!controller.signal.aborted) console.error("explore chain poll:", error);
logChainError("explore chain poll:", error);
} finally {
polling = false;
}
@@ -454,11 +436,11 @@ export function createChain({ onSelect = () => {} } = {}) {
reserveOlderRunway();
} catch (error) {
if (!controller.signal.aborted) {
for (const placeholder of batch.placeholders) placeholder.remove();
oldestReservedHeight = oldestHeight;
console.error("explore older:", error);
}
if (controller.signal.aborted) return;
for (const placeholder of batch.placeholders) placeholder.remove();
oldestReservedHeight = oldestHeight;
logChainError("explore older:", error);
}
}
@@ -479,7 +461,7 @@ export function createChain({ onSelect = () => {} } = {}) {
await pollProjected();
}
} catch (error) {
if (!controller.signal.aborted) console.error("explore newer:", error);
logChainError("explore newer:", error);
} finally {
loadingNewer = false;
}
@@ -552,6 +534,13 @@ export function createChain({ onSelect = () => {} } = {}) {
});
}
function cancelTipVisibilitySync() {
if (!tipSyncFrame) return;
window.cancelAnimationFrame(tipSyncFrame);
tipSyncFrame = 0;
}
/** @param {boolean} visible */
function setTipVisible(visible) {
tipButton.toggleAttribute("data-visible", visible);
@@ -635,12 +624,8 @@ export function createChain({ onSelect = () => {} } = {}) {
pollId = undefined;
}
if (tipSyncFrame) {
window.cancelAnimationFrame(tipSyncFrame);
tipSyncFrame = 0;
}
cancelJump();
cancelTipVisibilitySync();
jump.cancel();
controller.abort();
}
website_next/explore/chain/jump.js
+52
View File
@@ -0,0 +1,52 @@
import { transitionMs } from "./transition.js";
/**
* @param {HTMLElement} element
* @param {() => void} onJump
*/
export function createJumpController(element, onJump) {
/** @type {number | undefined} */
let timeout;
let jumping = false;
/** @param {Event} [event] */
function finish(event) {
if (
event instanceof TransitionEvent &&
(event.target !== element || event.propertyName !== "opacity")
) {
return;
}
onJump();
cancel();
}
function cancel() {
if (timeout !== undefined) {
window.clearTimeout(timeout);
timeout = undefined;
}
element.removeEventListener("transitionend", finish);
delete element.dataset.jumping;
jumping = false;
}
function jump() {
if (jumping) return;
jumping = true;
element.dataset.jumping = "";
element.addEventListener("transitionend", finish);
timeout = window.setTimeout(
finish,
transitionMs(element, "opacity") + 50,
);
}
return /** @type {const} */ ({
cancel,
jump,
});
}
website_next/explore/chain/style.css
+5 -5
View File
@@ -61,12 +61,12 @@
margin-bottom: var(--block-gap);
}
.face-text [data-cube-height] {
[data-role="text"] [data-cube-height] {
font-size: var(--font-size-sm);
font-weight: normal;
font-weight: var(--font-weight-regular);
}
.face-text [data-cube-fees] {
[data-role="text"] [data-cube-fees] {
display: flex;
flex-direction: column;
align-items: center;
@@ -74,7 +74,7 @@
height: 100%;
}
.face-text [data-cube-pool] {
[data-role="text"] [data-cube-pool] {
display: flex;
align-items: center;
justify-content: center;
@@ -108,7 +108,7 @@
border-radius: 999rem;
padding: 0;
font-size: var(--font-size-base);
font-weight: 500;
font-weight: var(--font-weight-strong);
line-height: 1;
letter-spacing: 0;
opacity: 0;
website_next/explore/index.js
+1 -1
View File
@@ -8,7 +8,7 @@ export function createExplorePage() {
onSelect: blockDetails.update,
});
main.className = "explore";
main.dataset.page = "explore";
main.append(chain.element, blockDetails.element);
const syncChain = () => chain.setActive(!main.hidden && !document.hidden);
website_next/explore/style.css
+2 -2
View File
@@ -1,4 +1,4 @@
main.explore {
main[data-page="explore"] {
--explore-max-width: 80rem;
--explore-gap: 2rem;
--chain-width: calc(4.5rem * sqrt(3));
@@ -14,7 +14,7 @@ main.explore {
}
@media (max-width: 48rem) {
main.explore {
main[data-page="explore"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
gap: 0;