Get fee estimate implementation

This commit is contained in:
everoddandeven 2024-10-08 23:17:26 +02:00
parent 5705b8e91b
commit 0d7346f3e8
3 changed files with 84 additions and 8 deletions

View file

@ -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);
}

View file

@ -159,11 +159,53 @@
<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}}

View file

@ -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;
}
}