Don't show ETA on unbroadcasted txs, and placeholder for missing fee

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

@@ -153,7 +153,7 @@
 
 <ng-template #etaRow>
   @if (!isLoadingTx) {
-    @if (!replaced && !isCached) {
+    @if (!replaced && !isCached && !unbroadcasted) {
       <tr>
         <td class="td-width align-items-center align-middle" i18n="transaction.eta|Transaction ETA">ETA</td>
         <td>
@@ -184,7 +184,7 @@
         </td>
       </tr>
     }
-  } @else {
+  } @else if (!unbroadcasted){
     <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
   }
 </ng-template>
@@ -213,11 +213,11 @@
   @if (!isLoadingTx) {
     <tr>
       <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-      <td class="text-wrap">{{ tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span>
+      <td class="text-wrap">{{ (tx.fee | number) ?? '-' }} <span class="symbol" i18n="shared.sats">sats</span>
         @if (isAcceleration && accelerationInfo?.bidBoost ?? tx.feeDelta > 0) {
           <span class="oobFees" i18n-ngbTooltip="Acceleration Fees" ngbTooltip="Acceleration fees paid out-of-band"> +{{ accelerationInfo?.bidBoost ?? tx.feeDelta | number }} </span><span class="symbol" i18n="shared.sats">sats</span>
         }
-        <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee + (isAcceleration ? ((accelerationInfo?.bidBoost ?? tx.feeDelta) || 0) : 0)"></app-fiat></span>
+        <span class="fiat"><app-fiat *ngIf="tx.fee >= 0" [blockConversion]="tx.price" [value]="tx.fee + (isAcceleration ? ((accelerationInfo?.bidBoost ?? tx.feeDelta) || 0) : 0)"></app-fiat></span>
       </td>
     </tr>
   } @else {

frontend/src/app/components/transaction/transaction-details/transaction-details.component.ts

@@ -38,6 +38,7 @@ export class TransactionDetailsComponent implements OnInit {
   @Input() replaced: boolean;
   @Input() isCached: boolean;
   @Input() ETA$: Observable<ETA>;
+  @Input() unbroadcasted: boolean;
 
   @Output() accelerateClicked = new EventEmitter<boolean>();
   @Output() toggleCpfp$ = new EventEmitter<void>();

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

@@ -58,6 +58,7 @@
     }
 
     <app-transaction-details
+      [unbroadcasted]="true"
       [network]="stateService.network"
       [tx]="transaction"
       [isLoadingTx]="false"
@@ -65,9 +66,6 @@
       [isLoadingFirstSeen]="false"
       [featuresEnabled]="true"
       [filters]="filters"
-      [hasEffectiveFeeRate]="false"
-      [cpfpInfo]="null"
-      [ETA$]="ETA$"
       [hasEffectiveFeeRate]="hasEffectiveFeeRate"
       [cpfpInfo]="cpfpInfo"
       [hasCpfp]="hasCpfp"

frontend/src/app/components/transaction/transaction-raw.component.ts

@@ -3,8 +3,7 @@ import { Transaction, Vout } from '@interfaces/electrs.interface';
 import { StateService } from '../../services/state.service';
 import { Filter, toFilters } from '../../shared/filters.utils';
 import { decodeRawTransaction, getTransactionFlags, addInnerScriptsToVin, countSigops } from '../../shared/transaction.utils';
-import { ETA, EtaService } from '../../services/eta.service';
+import { firstValueFrom, Subscription } from 'rxjs';
-import { combineLatest, firstValueFrom, map, Observable, startWith, Subscription } from 'rxjs';
 import { WebsocketService } from '../../services/websocket.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@@ -55,14 +54,12 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
   cpfpInfo: CpfpInfo | null;
   hasCpfp: boolean = false;
   showCpfpDetails = false;
-  ETA$: Observable<ETA | null>;
   mempoolBlocksSubscription: Subscription;
 
   constructor(
     public route: ActivatedRoute,
     public router: Router,
     public stateService: StateService,
-    public etaService: EtaService,
     public electrsApi: ElectrsApiService,
     public websocketService: WebsocketService,
     public formBuilder: UntypedFormBuilder,
@@ -195,24 +192,6 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
     });
     this.setGraphSize();
 
-    this.ETA$ = combineLatest([
-      this.stateService.mempoolBlocks$.pipe(startWith(null)),
-      this.stateService.difficultyAdjustment$.pipe(startWith(null)),
-    ]).pipe(
-      map(([mempoolBlocks, da]) => {
-        return this.etaService.calculateETA(
-          this.stateService.network,
-          this.transaction,
-          mempoolBlocks,
-          null,
-          da,
-          null,
-          null,
-          null
-        );
-      })
-    );
-
     this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe(() => {
       if (this.transaction) {
         this.stateService.markBlock$.next({