mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-07-27 18:58:10 -07:00
website_next: part 3
This commit is contained in:
nym21
@@ -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"),
|
||||
]),
|
||||
];
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user