mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-07-15 13:08:12 -07:00
website_next: part 3
This commit is contained in:
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user