machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more block info, reduce font size

Browse Source
This commit is contained in:
Mononaut 2023-10-01 17:59:55 +01:00
parent d69cdacd5e
commit 642be969a3
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/eight-blocks/eight-blocks.component.html
View File

@ -16,10 +16,12 @@
></app-block-overview-graph>
<div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
<h1>{{ blockInfo[i].height }}</h1>
<p class="hash">{{ blockInfo[i].hash }}</p>
<h2>{{ blockInfo[i].time }}</h2>
<h2>{{ blockInfo[i].count }}</h2>
<h2>{{ blockInfo[i].size }}</h2>
<p class="hash">{{ blockInfo[i].id.slice(0, 32) }}<br>{{ blockInfo[i].id.slice(32) }}</p>
<h2>{{ blockInfo[i].timeString }}</h2>
<h2>{{ blockInfo[i].tx_count }} transactions</h2>
<h2>{{ blockInfo[i].extras.medianFee | feeRounding }} sat/vB</h2>
<h2>{{ blockInfo[i].size | bytes: 2 : 'B' : 'MB' : true }}</h2>
<h2>Mined by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
</div>
</div>
</div>

35
frontend/src/app/components/eight-blocks/eight-blocks.component.scss
View File

@ -21,30 +21,37 @@
.info {
position: absolute;
left: 10%;
top: 10%;
right: 10%;
bottom: 10%;
height: 80%;
width: 80%;
overflow: hidden;
font-size: calc(var(--block-width) * 0.04);
left: 5%;
top: 5%;
right: 5%;
bottom: 5%;
height: 90%;
width: 90%;
font-size: calc(var(--block-width) * 0.03);
text-shadow: 0 0 calc(var(--block-width) * 0.05) black;
h1 {
font-size: 4em;
margin-bottom: 0.1em;
font-size: 3em;
line-height: 1;
margin-bottom: calc(var(--block-width) * 0.03);
}
h2 {
font-size: 2.5em;
margin-bottom: 0.1em;
font-size: 1.5em;
line-height: 1;
margin-bottom: calc(var(--block-width) * 0.03);
}
.hash {
font-family: monospace;
word-wrap: break-word;
font-size: 1em;
margin-bottom: 0.1em;
font-size: 1.2em;
line-height: 1;
margin-bottom: calc(var(--block-width) * 0.03);
}
}
}
.block-container {
overflow: hidden;
}
}

13
frontend/src/app/components/eight-blocks/eight-blocks.component.ts
View File

@ -26,6 +26,10 @@ function bestFitResolution(min, max, n): number {
return best;
}
interface BlockInfo extends BlockExtended {
timeString: string;
}
@Component({
selector: 'app-eight-blocks',
templateUrl: './eight-blocks.component.html',
@ -70,7 +74,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
testShiftTimeout: number;
showInfo: boolean = true;
blockInfo: { [key: string]: string}[] = [];
blockInfo: BlockInfo[] = [];
wrapperStyle = {
'--block-width': '1080px',
@ -213,11 +217,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
setTimeout(() => {
this.blockInfo = blocks.map(block => {
return {
height: `${block.height}`,
hash: block.id,
time: (new Date(block.timestamp * 1000)).toLocaleTimeString(),
count: `${block.tx_count} txs`,
size: `${this.bytesPipe.transform(block.size, 2, 'B', 'MB', true)}`,
...block,
timeString: (new Date(block.timestamp * 1000)).toLocaleTimeString(),
};
});
this.showInfo = true;