global: opreturn part 4

This commit is contained in:
nym21
2026-07-19 09:34:03 +02:00
parent 5161ae2012
commit 0fc61d7932
19 changed files with 510 additions and 108 deletions
+14 -15
View File
@@ -1,5 +1,5 @@
import { createUsdAmount, renderUsdAmount } from "../../../usd/index.js";
import { formatDateTime } from "../format.js";
import { formatDateAndAge } from "../format.js";
import { createBlockTitle } from "../title/index.js";
/** @typedef {import("../../../modules/brk-client/index.js").BlockInfoV1} Block */
@@ -24,38 +24,37 @@ function createHashElement(hash) {
/** @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 hash = document.createElement("p");
const price = createUsdAmount("output", 0, {
size: "title",
tone: "positive",
});
let timestamp = 0;
let dateTimer = 0;
element.dataset.blockHeader = "";
title.dataset.blockTitleText = "";
main.dataset.blockMain = "";
titleRow.dataset.blockTitle = "";
side.dataset.blockSide = "";
actionList.dataset.blockActions = "";
date.dataset.blockDate = "";
hash.dataset.blockHashLine = "";
actionList.append(...actions);
side.append(date, price, actionList);
main.append(title, hash);
titleRow.append(main, side);
element.append(titleRow);
element.append(title, price, hash, actionList, date);
function refreshDate() {
date.textContent = formatDateAndAge(timestamp);
dateTimer = window.setTimeout(refreshDate, 60_000);
}
/** @param {Block} block */
function update(block) {
title.replaceChildren(...createBlockTitle(block.height));
date.dateTime = new Date(block.timestamp * 1_000).toISOString();
date.textContent = formatDateTime(block.timestamp);
timestamp = block.timestamp;
window.clearTimeout(dateTimer);
refreshDate();
hash.replaceChildren(createHashElement(block.id));
renderUsdAmount(price, block.extras.price, {
size: "title",
tone: "positive",
});
}
+16 -26
View File
@@ -5,44 +5,41 @@
--block-title-label-size: 2.5rem;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.15rem 1rem;
align-items: baseline;
padding-bottom: 1.25rem;
[data-dim] {
opacity: 0.5;
}
[data-block-title] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.35rem 1rem;
align-items: start;
> h1 {
min-width: 0;
}
[data-block-main] {
display: grid;
gap: 0.15rem;
min-width: 0;
> output {
justify-self: end;
white-space: nowrap;
}
[data-block-date],
[data-block-hash-line] {
> p,
> time {
color: var(--gray);
}
[data-block-date] {
> p {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
[data-block-side] {
display: grid;
gap: 0.15rem;
justify-items: end;
min-width: max-content;
> time {
white-space: nowrap;
}
[data-block-actions] {
> div {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
@@ -60,11 +57,4 @@
padding: 0.25rem 0.375rem;
}
}
[data-block-hash-line] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}