support for acceleration mempool blocks animation

backend/src/api/websocket-handler.ts

@@ -173,9 +173,15 @@ class WebsocketHandler {
               }
               const tx = memPool.getMempool()[trackTxid];
               if (tx && tx.position) {
+                const position: { block: number, vsize: number, accelerated?: number } = {
+                  ...tx.position
+                };
+                if (tx.acceleration) {
+                  position.accelerated = tx.acceleration;
+                }
                 response['txPosition'] = JSON.stringify({
                   txid: trackTxid,
-                  position: tx.position,
+                  position
                 });
               }
             } else {
@@ -600,7 +606,10 @@ class WebsocketHandler {
         if (mempoolTx && mempoolTx.position) {
           response['txPosition'] = JSON.stringify({
             txid: trackTxid,
-            position: mempoolTx.position,
+            position: {
+              ...mempoolTx.position,
+              accelerated: mempoolTx.acceleration || undefined,
+            }
           });
         }
       }
@@ -728,15 +737,11 @@ class WebsocketHandler {
     }
 
     if (config.MEMPOOL.ADVANCED_GBT_MEMPOOL) {
-<<<<<<< HEAD
       if (config.MEMPOOL.RUST_GBT) {
         await mempoolBlocks.$rustUpdateBlockTemplates(_memPool, Object.keys(_memPool).length, [], transactions);
       } else {
-        await mempoolBlocks.$makeBlockTemplates(_memPool, true);
+        await mempoolBlocks.$makeBlockTemplates(_memPool, true, config.MEMPOOL_SERVICES.ACCELERATIONS);
       }
-=======
-      await mempoolBlocks.$makeBlockTemplates(_memPool, true, config.MEMPOOL_SERVICES.ACCELERATIONS);
->>>>>>> 77b0a8ecc (Refactor accelerated audits)
     } else {
       mempoolBlocks.updateMempoolBlocks(_memPool, true);
     }
@@ -799,7 +804,10 @@ class WebsocketHandler {
           if (mempoolTx && mempoolTx.position) {
             response['txPosition'] = JSON.stringify({
               txid: trackTxid,
-              position: mempoolTx.position,
+              position: {
+                ...mempoolTx.position,
+                accelerated: mempoolTx.acceleration || undefined,
+              }
             });
           }
         }

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 {