From b79377d5a1f3b336462e3ee8d70ff5271d8c02bb Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 3 May 2023 10:30:45 -0600
Subject: [PATCH] Use new mempool position data for transaction ETA

---
 .../transaction/transaction.component.html           |  8 ++++----
 .../components/transaction/transaction.component.ts  | 12 +++++-------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 09efaee1c..0b5e12001 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -100,19 +100,19 @@
                 <tr *ngIf="!replaced && !isCached">
                   <td class="td-width" i18n="transaction.eta|Transaction ETA">ETA</td>
                   <td>
-                    <ng-template [ngIf]="txInBlockIndex === undefined" [ngIfElse]="estimationTmpl">
+                    <ng-template [ngIf]="this.mempoolPosition?.block == null" [ngIfElse]="estimationTmpl">
                       <span class="skeleton-loader"></span>
                     </ng-template>
                     <ng-template #estimationTmpl>
-                      <ng-template [ngIf]="txInBlockIndex >= 7" [ngIfElse]="belowBlockLimit">
+                      <ng-template [ngIf]="this.mempoolPosition.block >= 7" [ngIfElse]="belowBlockLimit">
                         <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
                       </ng-template>
                       <ng-template #belowBlockLimit>
                         <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeEstimateDefault">
-                          <app-time kind="until" [time]="(60 * 1000 * txInBlockIndex) + now" [fastRender]="false" [fixedRender]="true"></app-time>
+                          <app-time kind="until" [time]="(60 * 1000 * this.mempoolPosition.block) + now" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
                         </ng-template>
                         <ng-template #timeEstimateDefault>
-                          <app-time kind="until" *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
+                          <app-time kind="until" *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * this.mempoolPosition.block) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
                         </ng-template>
                       </ng-template>
                     </ng-template>
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 11c3b8063..bf1e0f144 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -173,12 +173,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
         this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
 
-        if (!this.tx?.status?.confirmed) {
-          this.stateService.markBlock$.next({
-            txFeePerVSize: this.tx.effectiveFeePerVsize,
-            mempoolPosition: this.mempoolPosition,
-          });
-        }
         this.cpfpInfo = cpfpInfo;
       });
 
@@ -241,6 +235,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           this.stateService.markBlock$.next({
             mempoolPosition: this.mempoolPosition
           });
+          this.txInBlockIndex = this.mempoolPosition.block;
         }
       } else {
         this.mempoolPosition = null;
@@ -430,7 +425,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     });
 
     this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe((mempoolBlocks) => {
-      if (!this.tx) {
+      if (!this.tx || this.mempoolPosition) {
         return;
       }
 
@@ -506,6 +501,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.rbfInfo = null;
     this.rbfReplaces = [];
     this.showCpfpDetails = false;
+    this.txInBlockIndex = null;
+    this.mempoolPosition = null;
     document.body.scrollTo(0, 0);
     this.leaveTransaction();
   }
@@ -587,6 +584,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.urlFragmentSubscription.unsubscribe();
     this.mempoolBlocksSubscription.unsubscribe();
     this.mempoolPositionSubscription.unsubscribe();
+    this.mempoolBlocksSubscription.unsubscribe();
     this.leaveTransaction();
   }
 }