mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 06:47:52 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1790 from mempool/nymkappa/feature/fee-redesign-2

Browse source 
Updated new fee widget design
This commit is contained in:
wiz 2022-06-03 01:23:58 +09:00 • committed by GitHub
commit 18c1be0bd0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/app/components/fees-box/fees-box.component.html
View file

@ -1,22 +1,22 @@
<div class="fee-estimation-wrapper" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees"> <div class="fee-estimation-wrapper" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
<div class="fee-progress-bar" [style.background]="gradient"> <div class="d-flex">
<span class="fee-label" i18n="fees-box.minimum">Minimum</span> <div class="fee-progress-bar" [style.background]="noPriority">
<span class="fee-label" i18n="fees-box.economy">Economy</span> <span class="fee-label" i18n="fees-box.no-priority">No Priority</span>
<span class="fee-label" i18n="fees-box.low">Low</span> </div>
<span class="fee-label" i18n="fees-box.medium">Medium</span> <div class="band-separator fill"></div>
<span class="fee-label" i18n="fees-box.high">High</span> <div class="fee-progress-bar priority" [style.background]="gradient">
<span class="fee-label prority" i18n="fees-box.low-priority">Low Priority</span>
<span class="fee-label prority" i18n="fees-box.medium-priority">Medium Priority</span>
<span class="fee-label prority" i18n="fees-box.high-priority">High Priority</span>
</div>
</div> </div>
<div class="fee-estimation-container"> <div class="fee-estimation-container">
<div class="item">
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
<div class="fee-text">{{ recommendedFees.minimumFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.minimumFee * 140" ></app-fiat></span>
</div>
</div>
<div class="item"> <div class="item">
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"> <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
<div class="fee-text">{{ recommendedFees.economyFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.economyFee * 140" ></app-fiat></span> <div class="fee-text">{{ recommendedFees.economyFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.economyFee * 140" ></app-fiat></span>
</div> </div>
</div> </div>
<div class="band-separator"></div>
<div class="item"> <div class="item">
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"> <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
<div class="fee-text">{{ recommendedFees.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.hourFee * 140" ></app-fiat></span> <div class="fee-text">{{ recommendedFees.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.hourFee * 140" ></app-fiat></span>
@ -36,12 +36,16 @@
</div> </div>
<ng-template #loadingFees> <ng-template #loadingFees>
<div class="fee-progress-bar" [style.background]="gradient"> <div class="d-flex">
<span class="fee-label" i18n="fees-box.minimum">Minimum</span> <div class="fee-progress-bar" [style.background]="noPriority">
<span class="fee-label" i18n="fees-box.economy">Economy</span> <span class="fee-label" i18n="fees-box.no-priority">No Priority</span>
<span class="fee-label" i18n="fees-box.low">Low</span> </div>
<span class="fee-label" i18n="fees-box.medium">Medium</span> <div class="band-separator fill"></div>
<span class="fee-label" i18n="fees-box.high">High</span> <div class="fee-progress-bar priority" [style.background]="gradient">
<span class="fee-label prority" i18n="fees-box.low-priority">Low Priority</span>
<span class="fee-label prority" i18n="fees-box.medium-priority">Medium Priority</span>
<span class="fee-label prority" i18n="fees-box.high-priority">High Priority</span>
</div>
</div> </div>
<div class="fee-estimation-container loading-container"> <div class="fee-estimation-container loading-container">
<div class="item"> <div class="item">
@ -50,12 +54,7 @@
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</div> </div>
<div class="item"> <div class="band-separator"></div>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item"> <div class="item">
<div class="card-text"> <div class="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>

53
frontend/src/app/components/fees-box/fees-box.component.scss
View file

@ -31,11 +31,6 @@
display: none display: none
} }
} }
&:nth-child(2) {
@media (767px < width < 992px), (width < 576px) {
display: none
}
}
margin: 0 auto 0px; margin: 0 auto 0px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -78,29 +73,51 @@
} }
.fee-progress-bar { .fee-progress-bar {
width: 100%; width: 25%;
height: 22px; height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
border-radius: 0px 10px 10px 0px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
transition: background-color 1s; transition: background-color 1s;
} &.priority {
@media (767px < width < 992px), (width < 576px) {
.fee-label { width: 100%;
font-size: 14px; }
width: 20%; width: 75%;
@media (767px < width < 992px), (width < 576px) { border-radius: 0px 10px 10px 0px;
width: 33%;
} }
&:first-child { &:first-child {
@media (767px < width < 992px), (width < 576px) { @media (767px < width < 992px), (width < 576px) {
display: none display: none
} }
} }
&:nth-child(2) { }
@media (767px < width < 992px), (width < 576px) {
display: none .band-separator {
} width: 5%;
@media (767px < width < 992px), (width < 576px) {
display: none
}
&.fill {
height: 22px;
background: repeating-linear-gradient(
90deg,
rgb(45, 51, 72),
rgb(45, 51, 72) 2px,
rgb(29, 31, 49) 2px,
rgb(29, 31, 49) 4px
);
}
}
.fee-label {
padding-top: 2px;
font-size: 12px;
width: 100%;
@media (767px < width < 992px), (width < 576px) {
width: 33%;
}
&.prority {
width: 33%;
} }
} }

2
frontend/src/app/components/fees-box/fees-box.component.ts
View file

@ -15,6 +15,7 @@ export class FeesBoxComponent implements OnInit {
isLoadingWebSocket$: Observable<boolean>; isLoadingWebSocket$: Observable<boolean>;
recommendedFees$: Observable<Recommendedfees>; recommendedFees$: Observable<Recommendedfees>;
gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
noPriority = '#2e324e';
constructor( constructor(
private stateService: StateService private stateService: StateService
@ -34,6 +35,7 @@ export class FeesBoxComponent implements OnInit {
const endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); const endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`; this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
this.noPriority = startColor;
} }
) )
); );