diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.html b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.html new file mode 100644 index 000000000..727f833bc --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.html @@ -0,0 +1,21 @@ +
+
+ +
+
+
+

+ {{ bar.label }} + + + +

+
+ {{ bar.class === 'tx' ? '' : '+' }} {{ bar.fee | number }} sat +
+ +
+
+ +
+
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss new file mode 100644 index 000000000..84d530e34 --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss @@ -0,0 +1,147 @@ +.fee-graph { + height: 100%; + width: 20%; + min-width: 100px; + max-width: 150px; + max-height: 100vh; + margin-left: 4em; + margin-right: 1.5em; + padding-bottom: 63px; + + .column { + width: 100%; + height: 100%; + position: relative; + background: #181b2d; + + .bar { + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + + .fill { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0.75; + pointer-events: none; + } + + .fee { + position: absolute; + opacity: 0; + pointer-events: none; + } + + .line { + position: absolute; + right: 0; + top: 0; + left: -4.5em; + border-top: dashed white 1.5px; + + .fee-rate { + width: 100%; + position: absolute; + left: 0; + right: 0.2em; + font-size: 0.8em; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + margin: 0; + + .label { + margin-right: .2em; + } + + .rate .symbol { + color: white; + } + } + } + + &.tx { + .fill { + background: #105fb0; + } + .line { + .fee-rate { + top: 0; + } + } + .fee { + opacity: 1; + z-index: 11; + } + } + + &.target { + .fill { + background: #3bcc49; + } + .fee { + opacity: 1; + z-index: 11; + } + .line .fee-rate { + bottom: 2px; + } + } + + &.max { + cursor: pointer; + .line .fee-rate { + .label { + opacity: 0; + } + bottom: 2px; + } + &.active, &:hover { + .fill { + background: #653b9c; + } + .line { + .fee-rate .label { + opacity: 1; + } + } + } + } + + &:hover { + .fill { + z-index: 10; + } + .line { + z-index: 11; + } + .fee { + opacity: 1; + z-index: 12; + } + } + } + + &:hover > .bar:not(:hover) { + &.target, &.max { + .fee { + opacity: 0; + } + .line .fee-rate .label { + opacity: 0; + } + } + } + } + + .vsize { + text-align: center; + } +} \ No newline at end of file diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts new file mode 100644 index 000000000..98b47bea0 --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts @@ -0,0 +1,96 @@ +import { Component, OnInit, Input, Output, OnChanges, EventEmitter, HostListener, Inject, LOCALE_ID } from '@angular/core'; +import { StateService } from '../../services/state.service'; +import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface'; +import { Router } from '@angular/router'; +import { ReplaySubject, merge, Subscription, of } from 'rxjs'; +import { tap, switchMap } from 'rxjs/operators'; +import { ApiService } from '../../services/api.service'; +import { AccelerationEstimate, RateOption } from './accelerate-preview.component'; + +interface GraphBar { + rate: number; + style: any; + class: 'tx' | 'target' | 'max'; + label: string; + active?: boolean; + rateIndex?: number; + fee?: number; +} + +@Component({ + selector: 'app-accelerate-fee-graph', + templateUrl: './accelerate-fee-graph.component.html', + styleUrls: ['./accelerate-fee-graph.component.scss'], +}) +export class AccelerateFeeGraphComponent implements OnInit, OnChanges { + @Input() tx: Transaction; + @Input() estimate: AccelerationEstimate; + @Input() maxRateOptions: RateOption[] = []; + @Input() maxRateIndex: number = 0; + @Output() setUserBid = new EventEmitter<{ fee: number, index: number }>(); + + bars: GraphBar[] = []; + tooltipPosition = { x: 0, y: 0 }; + + ngOnInit(): void { + this.initGraph(); + } + + ngOnChanges(): void { + this.initGraph(); + } + + initGraph(): void { + if (!this.tx || !this.estimate) { + return; + } + const maxRate = Math.max(...this.maxRateOptions.map(option => option.rate)); + const baseRate = this.estimate.txSummary.effectiveFee / this.estimate.txSummary.effectiveVsize; + const baseHeight = baseRate / maxRate; + const bars: GraphBar[] = this.maxRateOptions.slice().reverse().map(option => { + return { + rate: option.rate, + style: this.getStyle(option.rate, maxRate, baseHeight), + class: 'max', + label: 'max', + active: option.index === this.maxRateIndex, + rateIndex: option.index, + fee: option.fee, + } + }); + bars.push({ + rate: this.estimate.targetFeeRate, + style: this.getStyle(this.estimate.targetFeeRate, maxRate, baseHeight), + class: 'target', + label: 'expected', + fee: this.estimate.nextBlockFee - this.estimate.txSummary.effectiveFee + }); + bars.push({ + rate: baseRate, + style: this.getStyle(baseRate, maxRate, 0), + class: 'tx', + label: 'paid', + fee: this.estimate.txSummary.effectiveFee, + }); + this.bars = bars; + } + + getStyle(rate, maxRate, base) { + const top = (rate / maxRate); + return { + height: `${(top - base) * 100}%`, + bottom: base ? `${base * 100}%` : '0', + } + } + + onClick(event, bar): void { + if (bar.rateIndex != null) { + this.setUserBid.emit({ fee: bar.fee, index: bar.rateIndex }); + } + } + + @HostListener('pointermove', ['$event']) + onPointerMove(event) { + this.tooltipPosition = { x: event.offsetX, y: event.offsetY }; + } +} diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html index c2bcbb7bf..ad96eb671 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html @@ -20,212 +20,223 @@ - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Next block market price - - {{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB -
- Currently estimated fee to get into next block - - - {{ estimate.nextBlockFee| number }} sats - - -
- Fees paid in-band - - ~{{ (estimate.txSummary.effectiveFee / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB -
- What you already paid when you made the transaction - - - {{ estimate.txSummary.effectiveFee | number }} sats - - -
- Extra fee required - - {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }} sats - -
- Difference between the next block fee and your tx fee -
-
-
+
+ -
How much more are you willing to pay at most to get into the next block?
-
-
- - The maximum extra transaction fee you're willing to pay to get into the next block. If the next block market price becomes too expensive for you, we will automatically cancel your acceleration request. Final charged fee may be smaller based on the fee market. - -
-
-
- - - - + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Next block market price + + {{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB +
+ Currently estimated fee to get into next block + + + {{ estimate.nextBlockFee| number }} sats + + +
+ Fees paid in-band + + ~{{ (estimate.txSummary.effectiveFee / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB +
+ What you already paid when you made the transaction + + + {{ estimate.txSummary.effectiveFee | number }} sats + + +
+ Extra fee required + + {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }} sats + +
+ Difference between the next block fee and your tx fee +
+
+
+ +
How much more are you willing to pay at most to get into the next block?
+
+
+ + The maximum extra transaction fee you're willing to pay to get into the next block. If the next block market price becomes too expensive for you, we will automatically cancel your acceleration request. Final charged fee may be smaller based on the fee market. + +
+
+
+ + + +
-
- -
Acceleration summary
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Your maximum tx fees - - ~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB -
- The maximum extra transaction fee you're willing to pay - - - {{ userBid | number }} sats - - -
- Mempool Accelerator™ fee - - +{{ estimate.mempoolBaseFee + estimate.vsizeFee | number }} sats - -
- mempool.space fee - - - {{ estimate.mempoolBaseFee | number }} sats - - -
- Transaction vsize fee - - - {{ estimate.vsizeFee | number }} sats - - -
- Estimated acceleration cost - - - {{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }} sats - - -
- Cost if your tx is accelerated using {{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB -
- Maximum acceleration cost - - {{ maxCost | number }} sats - - - -
- Cost if your tx is accelerated using ~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB -
- Available balance - - {{ estimate.userBalance | number }} sats - - - -
-
-
- -
-
-
- + +
Acceleration summary
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Your maximum tx fees + + ~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB +
+ The maximum extra transaction fee you're willing to pay + + + {{ userBid | number }} sats + + +
+ Mempool Accelerator™ fee + + +{{ estimate.mempoolBaseFee + estimate.vsizeFee | number }} sats + +
+ mempool.space fee + + + {{ estimate.mempoolBaseFee | number }} sats + + +
+ Transaction vsize fee + + + {{ estimate.vsizeFee | number }} sats + + +
+ Estimated acceleration cost + + + {{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }} sats + + +
+ Cost if your tx is accelerated using {{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB +
+ Maximum acceleration cost + + {{ maxCost | number }} sats + + + +
+ Cost if your tx is accelerated using ~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB +
+ Available balance + + {{ estimate.userBalance | number }} sats + + + +
+ +
+
+
+ +
+
+
+
- -
- \ No newline at end of file + +
\ No newline at end of file diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss index e6c717369..f6e68a77a 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss @@ -24,4 +24,11 @@ & tr { text-wrap: wrap; } +} + +.accelerate-cols { + display: flex; + flex-direction: row; + align-items: stretch; + margin-top: 1em; } \ No newline at end of file diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts index b4c7af704..27074c724 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges } from '@ import { ApiService } from '../../services/api.service'; import { Subscription, catchError, of, tap } from 'rxjs'; import { StorageService } from '../../services/storage.service'; +import { Transaction } from '../../interfaces/electrs.interface'; export type AccelerationEstimate = { txSummary: TxSummary; @@ -20,17 +21,24 @@ export type TxSummary = { ancestorCount: number; // Number of ancestors } +export interface RateOption { + fee: number; + rate: number; + index: number; +} + export const DEFAULT_BID_RATIO = 5; export const MIN_BID_RATIO = 2; export const MAX_BID_RATIO = 20; + @Component({ selector: 'app-accelerate-preview', templateUrl: 'accelerate-preview.component.html', styleUrls: ['accelerate-preview.component.scss'] }) export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges { - @Input() txid: string | undefined; + @Input() tx: Transaction | undefined; @Input() scrollEvent: boolean; math = Math; @@ -47,6 +55,8 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges userBid = 0; selectFeeRateIndex = 2; + maxRateOptions: RateOption[] = []; + constructor( private apiService: ApiService, private storageService: StorageService @@ -65,7 +75,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges } ngOnInit() { - this.estimateSubscription = this.apiService.estimate$(this.txid).pipe( + this.estimateSubscription = this.apiService.estimate$(this.tx.txid).pipe( tap((response) => { if (response.status === 204) { this.estimate = undefined; @@ -88,8 +98,15 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges } // Make min extra fee at least 50% of the current tx fee - this.minExtraCost = Math.max(this.estimate.cost, this.estimate.txSummary.effectiveFee / 2); - this.minExtraCost = Math.round(this.minExtraCost); + this.minExtraCost = Math.round(Math.max(this.estimate.cost, this.estimate.txSummary.effectiveFee / 2)); + + this.maxRateOptions = [2, 5, 10, 20].map((multiplier, index) => { + return { + fee: this.minExtraCost * multiplier, + rate: (this.estimate.txSummary.effectiveFee + (this.minExtraCost * multiplier)) / this.estimate.txSummary.effectiveVsize, + index, + }; + }); this.minBidAllowed = this.minExtraCost * MIN_BID_RATIO; this.maxBidAllowed = this.minExtraCost * MAX_BID_RATIO; @@ -121,10 +138,10 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges /** * User changed his bid */ - setUserBid(multiplier: number, index: number) { + setUserBid({ fee, index }: { fee: number, index: number}) { if (this.estimate) { this.selectFeeRateIndex = index; - this.userBid = Math.max(0, this.minExtraCost * multiplier); + this.userBid = Math.max(0, fee); this.maxCost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee; } } @@ -156,7 +173,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges this.accelerationSubscription.unsubscribe(); } this.accelerationSubscription = this.apiService.accelerate$( - this.txid, + this.tx.txid, this.userBid ).subscribe({ next: () => { diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index ce5d703fb..006870864 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -84,7 +84,7 @@

Accelerate

- +
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index d77eea2cf..f7c253a96 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -94,6 +94,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component'; import { GlobalFooterComponent } from './components/global-footer/global-footer.component'; import { AcceleratePreviewComponent } from '../components/accelerate-preview/accelerate-preview.component'; +import { AccelerateFeeGraphComponent } from '../components/accelerate-preview/accelerate-fee-graph.component'; import { MempoolErrorComponent } from './components/mempool-error/mempool-error.component'; import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.component'; @@ -192,6 +193,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir TestnetAlertComponent, GlobalFooterComponent, AcceleratePreviewComponent, + AccelerateFeeGraphComponent, CalculatorComponent, BitcoinsatoshisPipe, MempoolBlockOverviewComponent, @@ -315,6 +317,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir PreviewTitleComponent, GlobalFooterComponent, AcceleratePreviewComponent, + AccelerateFeeGraphComponent, MempoolErrorComponent, MempoolBlockOverviewComponent,