GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6453 from mempool/knorrium/fix_fee_bars

Browse source 
Improve accelerator checkout fee bars
This commit is contained in:
nymkappa 2026-04-07 15:17:34 +09:00 • committed by GitHub
commit 8045bdb447
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 23 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
View file

@ -149,6 +149,10 @@
flex-direction: row;
align-items: stretch;
margin-top: 1em;
@media (min-width: 768px) {
min-height: 350px;
}
}
.payment-area {

16
frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss
View file

@ -1,5 +1,6 @@
.fee-graph {
height: 100%;
min-height: 300px;
min-width: 120px;
width: 120px;
margin-left: 4em;
@ -16,7 +17,7 @@
bottom: 0;
left: 0;
right: 0;
min-height: 30px;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
@ -33,9 +34,11 @@
}
.fee {
font-size: 0.9em;
font-size: 0.75em;
opacity: 0;
pointer-events: none;
position: absolute;
top: 20px;
}
.spacer {
@ -45,6 +48,7 @@
pointer-events: none;
}
.line {
position: absolute;
right: 0;
@ -77,13 +81,10 @@
.fill {
background: var(--green);
}
.line {
.fee-rate {
top: 0;
}
.line .fee-rate {
top: 0;
}
.fee {
position: absolute;
opacity: 1;
z-index: 11;
}
@ -94,7 +95,6 @@
background: var(--tertiary);
}
.fee {
position: absolute;
opacity: 1;
z-index: 11;
}

14
frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.ts
View file

@ -70,11 +70,11 @@ export class AccelerateFeeGraphComponent implements OnInit, AfterViewInit, OnCha
const numBars = hasNextBlockRate ? 4 : 3;
const maxRate = Math.max(...this.maxRateOptions.map(option => option.rate));
const baseRate = this.estimate.txSummary.effectiveFee / this.estimate.txSummary.effectiveVsize;
let baseHeight = Math.max(this.height - (numBars * 30), this.height * (baseRate / maxRate));
let baseHeight = Math.max(this.height - (numBars * 50), this.height * (baseRate / maxRate));
const bars: GraphBar[] = [];
let lastHeight = 0;
if (hasNextBlockRate) {
lastHeight = Math.max(lastHeight + 30, (this.height * ((this.estimate.targetFeeRate - baseRate) / maxRate)));
lastHeight = Math.max(lastHeight + 50, (this.height * ((this.estimate.targetFeeRate - baseRate) / maxRate)));
bars.push({
rate: this.estimate.targetFeeRate,
height: lastHeight,
@ -84,7 +84,7 @@ export class AccelerateFeeGraphComponent implements OnInit, AfterViewInit, OnCha
});
}
this.maxRateOptions.forEach((option, index) => {
lastHeight = Math.max(lastHeight + 30, (this.height * ((option.rate - baseRate) / maxRate)));
lastHeight = Math.max(lastHeight + 50, (this.height * ((option.rate - baseRate) / maxRate)));
bars.push({
rate: option.rate,
height: lastHeight,
@ -98,6 +98,14 @@ export class AccelerateFeeGraphComponent implements OnInit, AfterViewInit, OnCha
bars.reverse();
const minBaseHeight = 50;
if (this.height - lastHeight < minBaseHeight) {
const scale = (this.height - minBaseHeight) / lastHeight;
lastHeight = this.height - minBaseHeight;
for (const bar of bars) {
bar.height = Math.round(bar.height * scale);
}
}
baseHeight = this.height - lastHeight;
for (const bar of bars) {