mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-29 09:44:26 +01:00
Code Issues Projects Releases Wiki Activity

Moving fee box into a regular box.

Browse Source
This commit is contained in:
softsimon 2020-09-26 23:40:26 +07:00
parent 3dedf1e3e1
commit 21ef5054bf
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 58 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,39 @@
<table class="table mx-auto text-center" style="max-width: 550px"> <table style="width: 100%;">
<tr>
<td class="d-none d-md-table-cell border-top-0">Low priority</td>
<td class="border-top-0">Medium priority</td>
<td class="border-top-0">High priority</td>
</tr>
<tr *ngIf="(isLoadingWebSocket$ | async) === false && (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-block">
<td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td> <h5 class="card-title">Low priority</h5>
<td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td> <p class="card-text">
{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text">
{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text">
{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)
</p>
</td>
</tr> </tr>
<ng-template #loadingFees>
<tr>
<td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</table> </table>
<ng-template #loadingFees>
<tr>
<td class="d-none d-md-block">
<h5 class="card-title">Low priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
</tr>
</ng-template>

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

@ -1,9 +1,3 @@
td { .card-title {
width: 33%; color: #4a68b9;
}
@media (max-width: 767.98px) {
td {
width: 50%;
}
} }

2
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -64,7 +64,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
labelInterpolationFnc: (value: number): any => { labelInterpolationFnc: (value: number): any => {
return this.vbytesPipe.transform(value, 2); return this.vbytesPipe.transform(value, 2);
}, },
offset: showLegend ? 160 : 60, offset: showLegend ? 160 : 80,
}, },
plugins: [ plugins: [
Chartist.plugins.ctTargetLine({ Chartist.plugins.ctTargetLine({

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

@ -1,21 +1,33 @@
<app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2 mb-5"></app-fees-box>
<div class="container-xl"> <div class="container-xl mt-2">
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData"> <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Mempool size</h5> <app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2"></app-fees-box>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5> <table style="width: 100%;">
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">{{ mempoolInfoData.value.memPoolInfo.size | number }}</p> <tr>
<td>
<h5 class="card-title">Mempool size</h5>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">
{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)
</p>
</td>
<td>
<h5 class="card-title">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }}
</p>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
@ -51,7 +63,7 @@
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body pl-0">
<div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats"> <div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
<app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10"></app-mempool-graph> <app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10"></app-mempool-graph>
</div> </div>