mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-19 01:41:01 +01:00
Code Issues 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'] = {
txid: trackTxid,
position: tx.position,
accelerated: tx.acceleration || undefined,
};
}
} else {

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

@ -47,7 +47,7 @@
</div>
</ng-template>
</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>
</ng-container>

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

@ -169,4 +169,34 @@
transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
border-radius: 2px;
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 {
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
@Input() containerWidth: number = null;
@Input() count: number = null;
@Input() spotlight: number = 0;
@ -252,7 +253,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
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)));
while (blocks.length < blocksAmount) {
blocks.push({
@ -272,7 +273,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
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;
if (this.count) {
blocksAmount = 8;

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

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