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

support for acceleration mempool blocks animation

Browse Source
This commit is contained in:
Mononaut 2023-06-13 13:35:25 -04:00
parent 77b0a8eccc
commit 5682b157c1
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
5 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/api/websocket-handler.ts
View File

@ -145,6 +145,7 @@ class WebsocketHandler {
response['txPosition'] = { response['txPosition'] = {
txid: trackTxid, txid: trackTxid,
position: tx.position, position: tx.position,
accelerated: tx.acceleration || undefined,
}; };
} }
} else { } else {

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

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

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

@ -170,3 +170,33 @@
border-radius: 2px; border-radius: 2px;
z-index: -1; z-index: -1;
} }
.blink{
width:400px;
height:400px;
border-bottom: 35px solid #FFF;
animation: blink 0.2s infinite;
}
@keyframes blink{
0% {
border-bottom: 35px solid green;
}
50% {
border-bottom: 35px solid yellow;
}
100% {
border-bottom: 35px solid orange;
}
}
@-webkit-keyframes blink{
0% {
border-bottom: 35px solid green;
}
50% {
border-bottom: 35px solid yellow;
}
100% {
border-bottom: 35px solid orange;
}
}

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

@ -26,6 +26,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() minimal: boolean = false; @Input() minimal: boolean = false;
@Input() blockWidth: number = 125; @Input() blockWidth: number = 125;
@Input() containerWidth: number = null;
@Input() count: number = null; @Input() count: number = null;
@Input() spotlight: number = 0; @Input() spotlight: number = 0;
@ -252,7 +253,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
reduceEmptyBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] { reduceEmptyBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2; const innerWidth = this.containerWidth || (this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2);
const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding))); const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
while (blocks.length < blocksAmount) { while (blocks.length < blocksAmount) {
blocks.push({ blocks.push({
@ -272,7 +273,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] { reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2; const innerWidth = this.containerWidth || (this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2);
let blocksAmount; let blocksAmount;
if (this.count) { if (this.count) {
blocksAmount = 8; blocksAmount = 8;

1
frontend/src/app/interfaces/node-api.interface.ts
View File

@ -169,6 +169,7 @@ interface RbfTransaction extends TransactionStripped {
export interface MempoolPosition { export interface MempoolPosition {
block: number, block: number,
vsize: number, vsize: number,
accelerated?: boolean
} }
export interface RewardStats { export interface RewardStats {