Fee box fixes.

This commit is contained in:
softsimon 2020-07-30 13:13:22 +07:00
parent bc92fb669b
commit 67dbea3faf
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 16 additions and 14 deletions

View File

@ -1,18 +1,15 @@
<div class="text-center" class="blockchain-wrapper"> <div class="text-center" class="blockchain-wrapper">
<div class="position-container"> <div class="position-container" [hidden]="isLoading">
<span>
<span [hidden]="isLoading">
<app-mempool-blocks></app-mempool-blocks> <app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks> <app-blockchain-blocks></app-blockchain-blocks>
<div id="divider"></div> <div id="divider"></div>
</span> </span>
<ng-template [ngIf]="isLoading">
<div class="loading-block">
<h3>Waiting for blocks...</h3>
<div class="spinner-border text-light mt-2"></div>
</div>
</ng-template>
</div> </div>
</div> <div *ngIf="isLoading" class="position-container loading">
<div class="loading-block">
<h3>Waiting for blocks...</h3>
<div class="spinner-border text-light mt-2"></div>
</div>
</div>
</div>

View File

@ -28,7 +28,10 @@
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.position-container { .position-container {
left: 97%; left: 95%;
}
.position-container.loading {
left: 50%;
} }
} }

View File

@ -4,7 +4,7 @@
<td class="border-top-0">30 minutes</td> <td class="border-top-0">30 minutes</td>
<td class="border-top-0">Next block</td> <td class="border-top-0">Next block</td>
</tr> </tr>
<tr *ngIf="(feeEstimations$ | async) as feeEstimations; else loadingFees"> <tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
<td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td> <td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
<td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td> <td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
<td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td> <td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>

View File

@ -17,12 +17,14 @@ interface FeeEstimations {
}) })
export class FeesBoxComponent implements OnInit { export class FeesBoxComponent implements OnInit {
feeEstimations$: Observable<FeeEstimations>; feeEstimations$: Observable<FeeEstimations>;
isLoadingWebSocket$: Observable<boolean>;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
this.feeEstimations$ = this.stateService.mempoolBlocks$ this.feeEstimations$ = this.stateService.mempoolBlocks$
.pipe( .pipe(
filter((blocks) => !!blocks.length), filter((blocks) => !!blocks.length),