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

responsive clock, fix blockchain

Browse Source
This commit is contained in:
Mononaut
2023-04-19 03:34:13 +09:00
parent b125ded0f2
commit b79dd13e55
21 changed files with 412 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@@ -1,12 +1,12 @@
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.tiny]="tiny">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.minimal]="minimal">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'" *ngIf="(difficultyAdjustments$ | async) as da;">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.last-block]="tiny && i >= count - 1" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
<div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
<a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
<div class="block-body">
<ng-container *ngIf="!tiny">
<ng-container *ngIf="!minimal">
<div [attr.data-cy]="'mempool-block-' + i + '-fees'" class="fees">
~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
@@ -73,10 +73,10 @@
</ng-container>
<ng-template #loadingBlocks>
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
<div class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
</ng-template>
</div>
</div>

25
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@@ -1,6 +1,6 @@
.bitcoin-block {
width: 125px;
height: 125px;
width: var(--block-size);
height: var(--block-size);
transition: background 2s, right 2s, transform 1s, opacity 1s;
}
@@ -14,6 +14,7 @@
top: 0px;
right: 0px;
left: 0px;
--block-size: 125px;
}
.flashing {
@@ -66,11 +67,11 @@
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
width: var(--block-size);
height: calc(0.192 * var(--block-size));
position:absolute;
top: -24px;
left: -20px;
top: calc(-0.192 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
@@ -79,11 +80,11 @@
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
width: calc(0.16 * var(--block-size));
height: var(--block-size);
position: absolute;
top: -12px;
left: -20px;
top: calc(-0.096 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #191c27;
z-index: -1;
@@ -100,7 +101,7 @@
background-color: #2d2825;
}
.mempool-block.last-block {
.mempool-block.hide-block {
opacity: 0;
}
@@ -145,7 +146,7 @@
.bitcoin-block::before {
transform: skewY(-50deg);
left: 125px;
left: var(--block-size);
}
.block-body {
transform: scaleX(-1);

44
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs';
import { MempoolBlock } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service';
@@ -23,8 +23,9 @@ import { animate, style, transition, trigger } from '@angular/animations';
])],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MempoolBlocksComponent implements OnInit, OnDestroy {
@Input() tiny: boolean = false;
export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
@Input() count: number = null;
specialBlocks = specialBlocks;
@@ -51,8 +52,9 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
timeLtr: boolean;
animateEntry: boolean = false;
blockWidth = 125;
blockPadding = 30;
blockOffset: number = 155;
blockPadding: number = 30;
containerOffset: number = 40;
arrowVisible = false;
tabHidden = false;
feeRounding = '1.0-0';
@@ -221,6 +223,14 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
});
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.blockWidth && this.blockWidth) {
this.blockPadding = 0.24 * this.blockWidth;
this.containerOffset = 0.32 * this.blockWidth;
this.blockOffset = this.blockWidth + this.blockPadding;
}
}
ngOnDestroy() {
this.markBlocksSubscription.unsubscribe();
this.blockSubscription.unsubscribe();
@@ -243,20 +253,22 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
let blocksAmount;
if (this.count) {
blocksAmount = this.count;
blocksAmount = 8;
} else {
blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
}
while (blocks.length > blocksAmount) {
const block = blocks.pop();
const lastBlock = blocks[blocks.length - 1];
lastBlock.blockSize += block.blockSize;
lastBlock.blockVSize += block.blockVSize;
lastBlock.nTx += block.nTx;
lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
lastBlock.feeRange.sort((a, b) => a - b);
lastBlock.medianFee = this.median(lastBlock.feeRange);
lastBlock.totalFees += block.totalFees;
if (!this.count) {
const lastBlock = blocks[blocks.length - 1];
lastBlock.blockSize += block.blockSize;
lastBlock.blockVSize += block.blockVSize;
lastBlock.nTx += block.nTx;
lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
lastBlock.feeRange.sort((a, b) => a - b);
lastBlock.medianFee = this.median(lastBlock.feeRange);
lastBlock.totalFees += block.totalFees;
}
}
if (blocks.length) {
blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
@@ -302,14 +314,14 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
});
return {
'right': 40 + index * 155 + 'px',
'right': this.containerOffset + index * this.blockOffset + 'px',
'background': backgroundGradients.join(',') + ')'
};
}
getStyleForMempoolEmptyBlock(index: number) {
return {
'right': 40 + index * 155 + 'px',
'right': this.containerOffset + index * this.blockOffset + 'px',
'background': '#554b45',
};
}