Get fee estimate implementation

everoddandeven · Oct 8, 2024 · 0d7346f · 0d7346f
1 parent 5705b8e
commit 0d7346f
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 8 deletions.
diff --git a/src/app/core/services/daemon/daemon.service.ts b/src/app/core/services/daemon/daemon.service.ts
@@ -595,8 +595,8 @@ export class DaemonService {
     throw new Error("Daemon not running");
   }
 
-  public async getFeeEstimate(): Promise<FeeEstimate> {
-    const response = await this.callRpc(new GetFeeEstimateRequest());
+  public async getFeeEstimate(graceBlocks: number = 0): Promise<FeeEstimate> {
+    const response = await this.callRpc(new GetFeeEstimateRequest(graceBlocks));
 
     return FeeEstimate.parse(response.result);
   }

diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html
@@ -159,11 +159,53 @@ <h4 class="mb-3">Broadcast a raw transaction to the network</h4>
     <button class="w-100 btn btn-primary btn-lg" type="button" (click)="sendRawTx()">Send Raw Tx</button>
   </div>
 
+  <div class="tab-pane fade" id="pills-get-fee-estimate" role="tabpanel" aria-labelledby="pills-get-fee-estimate-tab" tabindex="0">
+    <h4 class="mb-3">Get an estimation on fees per byte</h4>
+
+    <div *ngIf="getFeeEstimateError != ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
+      <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
+      <div>
+        {{getFeeEstimateError}}
+      </div>
+    </div>
+
+    <div *ngIf="getFeeEstimateSuccess" class="row d-flex justify-content-center">
+      @for(card of feeEstimateCards; track card.header) {
+        <div class="card text-bg-dark m-3 text-center" style="max-width: 18rem;">
+          <div class="card-header">{{card.header}}</div>
+          <div class="card-body">
+            <h5 class="card-title">{{card.content}}</h5>
+          </div>
+        </div>
+      }
+    </div>
+
+    <hr *ngIf="getFeeEstimateSuccess" class="my-4">
+
+    <div class="row g-5 p-2">
+      <div class="col-md-7 col-lg-12">
+        <form class="needs-validation" novalidate="">
+          <div class="row g-3">
+
+            <div class="col-md-4">
+              <label for="grace-blocks" class="form-label">Grace Blocks</label>
+              <input type="number" min="0" class="form-control" id="grace-blocks" placeholder="" [(ngModel)]="graceBlocks" [ngModelOptions]="{standalone: true}">
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <hr class="my-4">
+    <button class="w-100 btn btn-primary btn-lg" type="button" (click)="getFeeEstimate()">Get Fee Estimate</button>
+
+  </div>
+
   <div class="tab-pane fade" id="pills-coinbase-tx-sum" role="tabpanel" aria-labelledby="pills-coinbase-tx-sum-tab" tabindex="0">
     <div class="row g-5 p-2">
         <div class="col-md-7 col-lg-12">
 
-          <div *ngIf="getCoinbaseTxSumError" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
+          <div *ngIf="getCoinbaseTxSumError != ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
             <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
             <div>
               {{getCoinbaseTxSumError}}

diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts
@@ -5,8 +5,7 @@ import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { TxBacklogEntry } from '../../../common/TxBacklogEntry';
 import { SimpleBootstrapCard } from '../../shared/utils';
 import { DaemonDataService } from '../../core/services';
-import { table } from 'console';
-import { SpentKeyImage, UnconfirmedTx } from '../../../common';
+import { FeeEstimate, SpentKeyImage, UnconfirmedTx } from '../../../common';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -28,6 +27,16 @@ export class TransactionsComponent implements AfterViewInit, OnDestroy {
 
   public coinbaseTxSumHeight: number = 0;
   public coinbaseTxSumCount: number = 0;
+  public cards: SimpleBootstrapCard[] = [];
+  public getCoinbaseTxSumSuccess: boolean = false;
+  public getCoinbaseTxSumError: string = '';
+
+  public feeEstimateCards: SimpleBootstrapCard[] = [];
+  public graceBlocks: number = 0;
+  public gettingFeeEstimate: boolean = false;
+  public getFeeEstimateResult?: FeeEstimate;
+  public getFeeEstimateError: string = '';
+  public getFeeEstimateSuccess: boolean = false;
 
   public get modifiedTxIds(): boolean {
     return this.txIdsJsonString != '';
@@ -70,6 +79,7 @@ export class TransactionsComponent implements AfterViewInit, OnDestroy {
       new NavbarLink('pills-tx-pool-tab', '#pills-tx-pool', 'pills-tx-pool', true, 'Pool'),
       new NavbarLink('pills-relay-tx-tab', '#pills-relay-tx', 'pills-relay-tx', false, 'Relay Tx'),
       new NavbarLink('pills-send-raw-tx-tab', '#pills-send-raw-tx', 'pills-send-raw-tx', false, 'Send Raw Tx'),
+      new NavbarLink('pills-get-fee-estimate-tab', '#pills-get-fee-estimate', 'pills-get-fee-estimate', false, 'Get Fee Estimate'),
       new NavbarLink('pills-tx-backlog-tab', '#pills-tx-backlog', 'pills-tx-backlog', false, 'Tx Backlog'),
       new NavbarLink('pills-coinbase-tx-sum-tab', '#pills-coinbase-tx-sum', 'pills-coinbase-tx-sum', false, 'Coinbase Tx Sum'),
       new NavbarLink('pills-flush-tx-pool-tab', '#pills-flush-tx-pool', 'pills-flush-tx-pool', false, 'Flush Tx Pool'),
@@ -199,9 +209,6 @@ export class TransactionsComponent implements AfterViewInit, OnDestroy {
 
   }
 
-  public cards: SimpleBootstrapCard[] = [];
-  public getCoinbaseTxSumSuccess: boolean = false;
-  public getCoinbaseTxSumError: string = '';
 
   public async onGetCoinbaseTxSum(): Promise<void> {
     try {
@@ -262,4 +269,31 @@ export class TransactionsComponent implements AfterViewInit, OnDestroy {
 
     this.sendingRawTx = false;
   }
+
+  public async getFeeEstimate(): Promise<void> {
+    this.gettingFeeEstimate = true;
+
+    try {
+      this.getFeeEstimateResult = await this.daemonService.getFeeEstimate(this.graceBlocks);
+      this.feeEstimateCards = [
+        new SimpleBootstrapCard('Fee Per Byte', `${this.getFeeEstimateResult.fee}`),
+        new SimpleBootstrapCard('Quantization Mask', `${this.getFeeEstimateResult.quantizationMask}`),
+        new SimpleBootstrapCard('Fee (slow)', `${this.getFeeEstimateResult.fees[0]}`),
+        new SimpleBootstrapCard('Fee (normal)', `${this.getFeeEstimateResult.fees[1]}`),
+        new SimpleBootstrapCard('Fee (fast)', `${this.getFeeEstimateResult.fees[2]}`),
+        new SimpleBootstrapCard('Fee (fastest)', `${this.getFeeEstimateResult.fees[3]}`)
+      ];
+      this.getFeeEstimateSuccess = true;
+      this.getFeeEstimateError = ``;
+
+    }
+    catch(error) {
+      console.error(error);
+      this.feeEstimateCards = [];
+      this.getFeeEstimateSuccess = false;
+      this.getFeeEstimateError = `${error}`;
+    }
+
+    this.gettingFeeEstimate = false;
+  }
 }