Added pending block component. - #648
Conversation
3ec7468 to
f980da7
Compare
f980da7 to
f4a0a26
Compare
|
|
||
| const ExpandedBlockDetails = ({ block }) => { | ||
| const weightPercentage = getBlockPercentageUsed(block.weight); | ||
| const sizePercentage = (block.size / maxBlockWeight) * 100; |
There was a problem hiding this comment.
block.size is bytes, maxBlockWeight is weight units (4,000,000 WU). These aren't the same scale.
Post-SegWit there's no fixed byte-size cap to compare against anyway (size for a max-weight block ranges ~1–4MB depending on witness ratio), so this isn't just a wrong-constant — the metric itself needs a decision.
| import { summarizeBlockTemplate } from "../lib/block-template"; | ||
| import { formatSat, formatVMB } from "./util"; | ||
|
|
||
| const BLOCK_TARGET_SECONDS = (process.env.IS_ELEMENTS ? 1 : 10) * 60; |
There was a problem hiding this comment.
We already have it in const.js
export const targetBlockIntervalSeconds = configuredTargetBlockIntervalSeconds > 0
? configuredTargetBlockIntervalSeconds
: process.env.IS_ELEMENTS ? 60 : 600
| : valueFallback, | ||
| bucket | ||
| ? formatFeeCost(bucket.averageFee, bitcoinPrice, costFallback) | ||
| : valueFallback, |
There was a problem hiding this comment.
valueFallback -> costFallback ?
| blockTemplate && feeEst && bitcoinMarketChart ? "N/A" : "-"; | ||
| const totalFeesUsdFallback = | ||
| blockTemplate && bitcoinMarketChart ? "N/A" : "-"; | ||
| const metrics = summarizeBlockTemplate(blockTemplate, feeEst); |
There was a problem hiding this comment.
summarizeBlockTemplate recomputes on every render, not just when data changes.
It's called unconditionally on every invocation of PendingBlockDetailsCard, which re-renders on every state$, not only when blockTemplate itself updates. Per the polling schedule, mempool/recent refreshes every 5s while block-template refreshes every 30s, so this multi-pass computation over potentially thousands of mempool transactions reruns ~6x more often than the underlying data actually changes.
| const panelTooltip = (text) => ({ | ||
| iconSrc: `${staticRoot}img/icons/tooltip.svg`, | ||
| text, | ||
| }); |
There was a problem hiding this comment.
The same as existed detailTooltip
const detailTooltip = (text) => ({
iconSrc: `${staticRoot}img/icons/tooltip.svg`,
text,
});
| const bar = ({ | ||
| className, | ||
| title, | ||
| headerValue, | ||
| fillPercentage, | ||
| barFillClass, | ||
| footer, | ||
| }) => ( |
There was a problem hiding this comment.
Almost the same as existed detailBar
| const formatCount = (value, fallback = "N/A") => | ||
| Number.isFinite(value) ? value.toLocaleString() : fallback; | ||
|
|
||
| const formatBitcoin = (sats, fallback = "N/A") => |
| @@ -0,0 +1,1044 @@ | |||
| const MAX_BLOCK_WEIGHT = 4_000_000; | |||
There was a problem hiding this comment.
Can we use maxBlockWeight from const?
|
How to test with a working endpoint /block-template? |
3 participants
To run locally, npm install and use the following snippets: