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 083bfdba06
commit ba54bc9d15
6 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,7 +49,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;
}
}

1
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;
@Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;

4
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -488,8 +488,8 @@
</td>
</tr>
<tr *ngIf="cpfpInfo && hasEffectiveFeeRate">
<td *ngIf="cpfpInfo.acceleration" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Accelerated fee rate</td>
<td *ngIf="!cpfpInfo.acceleration" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td *ngIf="tx.acceleration" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
<td *ngIf="!tx.acceleration" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td>
<div class="effective-fee-container">
<app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>