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

Add simplified tracker blockchain component

Browse Source
This commit is contained in:
Mononaut 2024-04-13 08:04:58 +00:00
parent 786ec7fff1
commit 61a308cbc6
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
5 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@ -124,13 +124,13 @@
#arrow-up { #arrow-up {
position: relative; position: relative;
left: 30px; left: calc(var(--block-size) * 0.6);
top: 140px; top: calc(var(--block-size) * 1.12);
width: 0; width: 0;
height: 0; height: 0;
border-left: 35px solid transparent; border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: 35px solid transparent; border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: 35px solid #FFF; border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
} }
.flashing { .flashing {

2
frontend/src/app/components/clockchain/clockchain.component.ts
View File

@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
export class ClockchainComponent implements OnInit, OnChanges, OnDestroy { export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
@Input() width: number = 300; @Input() width: number = 300;
@Input() height: number = 60; @Input() height: number = 60;
@Input() mode: 'mempool' | 'mined'; @Input() mode: 'mempool' | 'mined' | 'none';
@Input() index: number = 0; @Input() index: number = 0;
mempoolBlocks: number = 3; mempoolBlocks: number = 3;

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

@ -51,7 +51,7 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div> <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
</div> </div>
</ng-container> </ng-container>

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

@ -113,13 +113,13 @@
#arrow-up { #arrow-up {
position: relative; position: relative;
right: 75px; right: calc(var(--block-size) * 0.6);
top: 140px; top: calc(var(--block-size) * 1.12);
width: 0; width: 0;
height: 0; height: 0;
border-left: 35px solid transparent; border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: 35px solid transparent; border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: 35px solid #FFF; border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
} }
.blockLink { .blockLink {

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

@ -70,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
tabHidden = false; tabHidden = false;
feeRounding = '1.0-0'; feeRounding = '1.0-0';
maxArrowPosition = 0;
rightPosition = 0; rightPosition = 0;
transition = 'background 2s, right 2s, transform 1s'; transition = 'background 2s, right 2s, transform 1s';
@ -326,6 +327,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (blocks.length) { if (blocks.length) {
blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize; blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
} }
if (this.count) {
this.maxArrowPosition = (Math.min(blocks.length, this.count) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
} else {
this.maxArrowPosition = (Math.min(blocks.length, blocksAmount) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
}
return blocks; return blocks;
} }
@ -386,7 +392,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} else if (this.markIndex > -1) { } else if (this.markIndex > -1) {
clearTimeout(this.resetTransitionTimeout); clearTimeout(this.resetTransitionTimeout);
this.transition = 'inherit'; this.transition = 'inherit';
this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth; this.rightPosition = Math.min(this.maxArrowPosition, this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth);
this.arrowVisible = true; this.arrowVisible = true;
this.resetTransitionTimeout = window.setTimeout(() => { this.resetTransitionTimeout = window.setTimeout(() => {
@ -436,6 +442,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
} }
this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
} }
mountEmptyBlocks() { mountEmptyBlocks() {