mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-07-21 16:08:10 -07:00
global: opreturn part 4
This commit is contained in:
@@ -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",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user