lnd: Bump fee

src/app/lnd/peers-channels/channels/bump-fee-modal/bump-fee.component.html

@@ -15,19 +15,21 @@
           <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
             <div fxFlex="100" class="alert alert-info">
               <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
-              <span fxLayout="column" fxFlex="100">Bumping fee on pending open channels is an advanced feature, attempt it only if you are familiar with the functionality of Bitcoin transactions.
-                <div>Before attempting fee bump ensure the following:</div>
-                <div class="pl-1">1: Use a Bitcoin block explorer to ensure that channel opening transaction is not confirmed.</div>
-                <div class="pl-1">2: The channel opening transaction must have a sizable change output, which can be spent further. The fee cannot be bumped without the change output.</div>
-                <div class="pl-1">3: Find the index value of the change output via a block explorer.</div>
-                <div class="pl-1">4: Enter the index value of the change output in the form below and the desired fee rate.</div>
-                <div class="pl-1">5: Upon successful fee bump, use your block explorer to track the child transaction in the mempool, which should be linked with the change output transaction.</div>
+              <span fxLayout="column" fxFlex="100">
+                <div>Fee rates recommended by mempool.space (sat/vByte):</div>
+                <div>- High: {{recommendedFee.fastestFee || 'Unknown'}}</div>
+                <div>- Medium: {{recommendedFee.halfHourFee || 'Unknown'}}</div>
+                <div>- Low: {{recommendedFee.hourFee || 'Unknown'}}</div>
               </span>
             </div>
+            <div *ngIf="flgShowDustWarning" fxFlex="100" class="alert alert-warn">
+              <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
+              <span>Change output balance <strong>{{dustOutputValue | number}}</strong> (Sats) may be insufficient for fee bumping, depending on the prevailing fee rates.</span>
+            </div>
             <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
               <mat-form-field fxLayout="column" fxFlex.gt-sm="32" fxLayoutAlign="start end">
                 <mat-label>Index for Change Output</mat-label>
-                <input #outputIdx="ngModel" matInput type="number" tabindex="1" required name="outputIdx" [step]="1" [min]="0" [(ngModel)]="outputIndex">
+                <input #outputIdx="ngModel" autoFocus matInput type="number" tabindex="1" required name="outputIdx" [step]="1" [min]="0" [(ngModel)]="outputIndex">
                 <mat-error *ngIf="outputIdx.errors?.required">Index for change output is required.</mat-error>
                 <mat-error *ngIf="outputIdx.errors?.pendingChannelOutputIndex">Invalid index value.</mat-error>
               </mat-form-field>
@@ -38,16 +40,15 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <mat-form-field *ngIf="selTransType === '1'" fxFlex.gt-sm="32" fxLayoutAlign="start end">
+              <mat-form-field *ngIf="selTransType === '1'" fxLayout="column" fxFlex.gt-sm="32" fxLayoutAlign="start end">
                 <mat-label>Number of Blocks</mat-label>
                 <input #blcks="ngModel" matInput type="number" name="blocks" required
                   tabindex="3" [step]="1" [min]="0" [(ngModel)]="blocks">
                 <mat-error *ngIf="!blocks">Number of blocks is required.</mat-error>
               </mat-form-field>
-              <mat-form-field *ngIf="selTransType === '2'" fxFlex.gt-sm="32" fxLayoutAlign="start end">
+              <mat-form-field *ngIf="selTransType === '2'" fxLayout="column" fxFlex.gt-sm="32" fxLayoutAlign="start end">
                 <mat-label>Fees (Sats/vByte)</mat-label>
-                <input #fee="ngModel" matInput
-                  type="number" name="fees" required tabindex="4" [step]="1" [min]="0" [(ngModel)]="fees">
+                <input #fee="ngModel" matInput type="number" name="fees" required tabindex="4" [step]="1" [min]="0" [(ngModel)]="fees">
                 <mat-error *ngIf="!fees">Fees is required.</mat-error>
               </mat-form-field>
             </div>

src/app/lnd/peers-channels/channels/bump-fee-modal/bump-fee.component.ts

@@ -2,10 +2,11 @@ import { Component, OnInit, OnDestroy, ViewChild, Inject } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { Subject } from 'rxjs';
+import { Subject, forkJoin } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { faCopy, faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
+import { RecommendedFeeRates, BlockExplorerTransaction } from '../../../../shared/models/rtlModels';
 import { PendingOpenChannel } from '../../../../shared/models/lndModels';
 import { PendingOpenChannelInformation } from '../../../../shared/models/alertData';
 import { TRANS_TYPES } from '../../../../shared/services/consts-enums-functions';
@@ -35,6 +36,9 @@ export class BumpFeeComponent implements OnInit, OnDestroy {
   public faInfoCircle = faInfoCircle;
   public faExclamationTriangle = faExclamationTriangle;
   public bumpFeeError = '';
+  public flgShowDustWarning = false;
+  public dustOutputValue = 0;
+  public recommendedFee = { fastestFee: 0, halfHourFee: 0, hourFee: 0 };
   private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
 
   constructor(public dialogRef: MatDialogRef<BumpFeeComponent>, @Inject(MAT_DIALOG_DATA) public data: PendingOpenChannelInformation, private logger: LoggerService, private dataService: DataService, private snackBar: MatSnackBar) { }
@@ -45,8 +49,25 @@ export class BumpFeeComponent implements OnInit, OnDestroy {
     const channelPointArr = this.bumpFeeChannel.channel?.channel_point?.split(':') || [];
     if (this.bumpFeeChannel && this.bumpFeeChannel.channel) {
       this.bumpFeeChannel.channel.txid_str = channelPointArr[0] || (this.bumpFeeChannel.channel && this.bumpFeeChannel.channel.channel_point ? this.bumpFeeChannel.channel.channel_point : '');
-      this.bumpFeeChannel.channel.output_index = +channelPointArr[1] || null;
+      this.bumpFeeChannel.channel.output_index = channelPointArr[1] && channelPointArr[1] !== '' ? +channelPointArr[1] : null;
+      this.outputIndex = this.bumpFeeChannel.channel && this.bumpFeeChannel.channel.output_index !== null && this.bumpFeeChannel.channel.output_index === 0 ? 1 : 0;
     }
+    this.dataService.getRecommendedFeeRates().pipe(takeUntil(this.unSubs[0])).subscribe({
+      next: (rfRes: RecommendedFeeRates) => {
+        this.recommendedFee = rfRes;
+      }, error: (err) => {
+        this.logger.error(err);
+      }
+    });
+    this.dataService.getBlockExplorerTransaction(this.bumpFeeChannel?.channel?.channel_point).
+      pipe(takeUntil(this.unSubs[1])).subscribe({
+        next: (txRes: BlockExplorerTransaction) => {
+          this.dustOutputValue = txRes.vout[this.outputIndex].value;
+          this.flgShowDustWarning = this.dustOutputValue < 1000;
+        }, error: (err) => {
+          this.logger.error(err);
+        }
+      });
   }
 
   onBumpFee(): boolean | void {