diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.html b/frontend/src/app/components/eight-blocks/eight-blocks.component.html
index 6a3bbb7c0..cc4b7a734 100644
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.html
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.html
@@ -16,10 +16,12 @@
>
{{ blockInfo[i].height }}
-
{{ blockInfo[i].hash }}
-
{{ blockInfo[i].time }}
-
{{ blockInfo[i].count }}
-
{{ blockInfo[i].size }}
+
{{ blockInfo[i].id.slice(0, 32) }}
{{ blockInfo[i].id.slice(32) }}
+
{{ blockInfo[i].timeString }}
+
{{ blockInfo[i].tx_count }} transactions
+
{{ blockInfo[i].extras.medianFee | feeRounding }} sat/vB
+
{{ blockInfo[i].size | bytes: 2 : 'B' : 'MB' : true }}
+
Mined by {{ blockInfo[i].extras.pool.name || 'Unknown' }}
diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss
index bee7d7151..8b7825e8b 100644
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
index 0027a3e7f..63be271d3 100644
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
@@ -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;