machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaks fee widget

Browse Source
This commit is contained in:
nymkappa 2022-06-01 09:46:52 +02:00
parent 72cc2e4df0
commit cefc927b06
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/components/fees-box/fees-box.component.html
View File

@ -1,3 +1,11 @@
<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'">
<span class="fee-label" i18n="fees-box.minimum">Minimum</span>
<span class="fee-label" i18n="fees-box.economy">Economy</span>
<span class="fee-label" i18n="fees-box.low">Low</span>
<span class="fee-label" i18n="fees-box.medium">Medium</span>
<span class="fee-label" i18n="fees-box.high">High</span>
</div>
<div class="fee-estimation-wrapper"> <div class="fee-estimation-wrapper">
<div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees"> <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
<div class="item"> <div class="item">
@ -28,14 +36,6 @@
</div> </div>
</div> </div>
<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'">
<span class="fee-label">Minimum</span>
<span class="fee-label">Economy</span>
<span class="fee-label">Low</span>
<span class="fee-label">Medium</span>
<span class="fee-label">Priority</span>
</div>
<ng-template #loadingFees> <ng-template #loadingFees>
<div class="fee-estimation-container loading-container"> <div class="fee-estimation-container loading-container">
<div class="item"> <div class="item">

18
frontend/src/app/components/fees-box/fees-box.component.scss
View File

@ -55,18 +55,17 @@
border-bottom: 1px solid #ffffff1c; border-bottom: 1px solid #ffffff1c;
width: fit-content; width: fit-content;
margin: auto; margin: auto;
line-height: 1.45; font-size: 20px;
padding: 0px 2px;
} }
.fiat { .fiat {
display: block; display: block;
font-size: 14px !important; font-size: 13px !important;
} }
} }
} }
.loading-container{ .loading-container{
min-height: 76px; height: 50px;
} }
.card-text { .card-text {
@ -74,8 +73,8 @@
width: 100%; width: 100%;
display: block; display: block;
&:first-child { &:first-child {
max-width: 90px; max-width: 70px;
margin: 15px auto 3px; margin: 10px auto 3px;
} }
&:last-child { &:last-child {
margin: 10px auto 3px; margin: 10px auto 3px;
@ -86,14 +85,15 @@
.fee-progress-bar { .fee-progress-bar {
width: 100%; width: 100%;
height: 20px; height: 22px;
margin-top: 15px; margin-bottom: 8px;
border-radius: 0px 10px 10px 0px; border-radius: 0px 10px 10px 0px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
transition: background-color 1s;
} }
.fee-label { .fee-label {
font-size: 12px; font-size: 14px;
width: 100px; width: 100px;
} }

5
frontend/src/app/components/fees-box/fees-box.component.ts
View File

@ -15,8 +15,8 @@ export class FeesBoxComponent implements OnInit {
isLoadingWebSocket$: Observable<boolean>; isLoadingWebSocket$: Observable<boolean>;
recommendedFees$: Observable<Recommendedfees>; recommendedFees$: Observable<Recommendedfees>;
defaultFee: number; defaultFee: number;
startColor = '#557d00'; startColor = '#2e324e';
endColor = '#557d00'; endColor = '#2e324e';
constructor( constructor(
private stateService: StateService, private stateService: StateService,
@ -29,6 +29,7 @@ export class FeesBoxComponent implements OnInit {
this.recommendedFees$ = this.stateService.recommendedFees$ this.recommendedFees$ = this.stateService.recommendedFees$
.pipe( .pipe(
tap((fees) => { tap((fees) => {
// For quick testing purpose
// fees.fastestFee = 400; // fees.fastestFee = 400;
// fees.halfHourFee = 75; // fees.halfHourFee = 75;
// fees.hourFee = 50; // fees.hourFee = 50;

4
frontend/src/app/dashboard/dashboard.component.html
View File

@ -5,7 +5,7 @@
<div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'"> <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div> <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body less-padding">
<app-fees-box class="d-block"></app-fees-box> <app-fees-box class="d-block"></app-fees-box>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@
<div class="col card-wrapper"> <div class="col card-wrapper">
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div> <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body less-padding">
<app-fees-box class="d-block"></app-fees-box> <app-fees-box class="d-block"></app-fees-box>
</div> </div>
</div> </div>

3
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -269,6 +269,9 @@
justify-content: space-around; justify-content: space-around;
padding: 22px 20px; padding: 22px 20px;
} }
.less-padding {
padding: 20px 20px;
}
} }
.retarget-sign { .retarget-sign {