support for acceleration mempool blocks animation

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -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>
 

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

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

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -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}`;

frontend/src/app/components/transaction/transaction.component.html

@@ -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>

frontend/src/app/interfaces/node-api.interface.ts

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