Renaming minimum fee to rejecting.

Adding progressbar to mempool size.
refs #171

frontend/src/app/components/address/address.component.html

@@ -70,7 +70,7 @@
 
         <ng-container *ngIf="addressLoadingStatus$ | async as addressLoadingStatus">
           <br>
-          <div  class="progress position-relative progress-dark">
+          <div class="progress progress-dark">
             <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
           </div>
         </ng-container>

frontend/src/app/components/block/block.component.html

@@ -115,7 +115,7 @@
 
         <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus">
           <br>
-          <div class="progress position-relative progress-dark">
+          <div class="progress progress-dark">
             <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
           </div>
         </ng-container>

frontend/src/app/components/latest-blocks/latest-blocks.component.html

@@ -19,7 +19,7 @@
         <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
         <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
         <td>
-          <div class="progress position-relative">
+          <div class="progress">
             <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
             <div class="progress-text">{{ block.size | bytes: 2 }}</div>
           </div>
@@ -36,7 +36,7 @@
       <ng-container *ngIf="(blocksLoadingStatus$ | async) as blocksLoadingStatus">
       <tr>
         <td colspan="5">
-          <div class="progress position-relative progress-dark">
+          <div class="progress progress-dark">
             <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': blocksLoadingStatus + '%' }"></div>
           </div>
         </td>

frontend/src/app/components/mempool-block/mempool-block.component.html

@@ -31,7 +31,7 @@
             <tr>
               <td i18n="mempool-block.size">Size</td>
               <td>
-                <div class="progress position-relative">
+                <div class="progress">
                   <div class="progress-bar progress-mempool {{ (network$ | async) }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
                   <div class="progress-text">{{ mempoolBlock.blockSize | bytes: 2 }}</div>
                 </div>

frontend/src/app/dashboard/dashboard.component.html

@@ -86,7 +86,7 @@
                   <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
                   <td class="d-none d-lg-table-cell">{{ block.tx_count | number }}</td>
                   <td>
-                    <div class="progress position-relative">
+                    <div class="progress">
                       <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
                       <div class="progress-text">{{ block.size | bytes: 2 }}</div>
                     </div>
@@ -162,21 +162,22 @@
 <ng-template #mempoolTable let-mempoolInfoData>
   <table style="width: 100%;">
     <tr>
-      <td class="d-none d-md-block">
+      <td style="width: 33%;">
-        <h5 class="card-title" i18n="dashboard.minimumfee|Minimum fee title">Minimum fee</h5>
+        <h5 class="card-title" i18n="dashboard.rejecting|Minimum mempool fee">Rejecting</h5>
         <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
-          {{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container> (<app-fiat [value]="mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
+          &lt; {{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </p>
       </td>
-      <td>
+      <td style="width: 33%;">
         <h5 class="card-title" i18n="dashboard.mempool-size|Mempool size">Mempool size</h5>
-        <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loadingsmall">
+        <div class="card-text" *ngIf="mempoolInfoData.value; else loadingsmall">
-          {{ mempoolBlocksData.size | bytes }} (<ng-container *ngTemplateOutlet="mempoolBlocksData.blocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: mempoolBlocksData.blocks }"></ng-container>)
+          <div class="progress sub-text" style="max-width: 250px;">
-            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
+            <div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }"></div>
-            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
+            <div class="progress-text">{{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}</div>
-        </p>
+          </div>
+        </div>  
       </td>
-      <td>
+      <td class="d-none d-md-table-cell" style="width: 33%;">
         <h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
         <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
           {{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
@@ -194,7 +195,8 @@
     </span>
     <ng-template #inSync>
       <div class="progress sub-text" style="max-width: 250px;">
-        <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+        <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}"></div>
+        <div class="progress-text">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
       </div>
     </ng-template>
   </ng-template>
@@ -205,9 +207,10 @@
     <div class="card-body more-padding">
       <h5 class="card-title" i18n="dashboard.difficulty-adjustment">Difficulty adjustment</h5>
       <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
-        <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
+        <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"></div>
         <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
         <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
+        <div class="progress-text"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
       </div>
     </div>
   </div>

frontend/src/app/dashboard/dashboard.component.ts

@@ -102,11 +102,20 @@ export class DashboardComponent implements OnInit {
           progressClass = 'bg-warning';
         }
 
+        let mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100)
+        let mempoolSizeProgress = 'bg-danger';
+        if (mempoolSizePercentage <= 50) {
+          mempoolSizeProgress = 'bg-success';
+        } else if (mempoolSizePercentage <= 75) {
+          mempoolSizeProgress = 'bg-warning';
+        }
+
         return {
           memPoolInfo: mempoolInfo,
           vBytesPerSecond: vbytesPerSecond,
           progressWidth: percent + '%',
           progressClass: progressClass,
+          mempoolSizeProgress: mempoolSizeProgress,
         };
       })
     );

frontend/src/app/interfaces/websocket.interface.ts

@@ -35,8 +35,13 @@ export interface MempoolBlock {
 }
 
 export interface MempoolInfo {
-  size: number;
+  loaded: boolean;                 //  (boolean) True if the mempool is fully loaded
-  bytes: number;
+  size: number;                    //  (numeric) Current tx count
+  bytes: number;                   //  (numeric) Sum of all virtual transaction sizes as defined in BIP 141.
+  usage: number;                   //  (numeric) Total memory usage for the mempool
+  maxmempool: number;              //  (numeric) Maximum memory usage for the mempool
+  mempoolminfee: number;           //  (numeric) Minimum fee rate in BTC/kB for tx to be accepted.
+  minrelaytxfee: number;           //  (numeric) Current minimum relay fee for transactions
 }
 
 export interface TransactionStripped {

frontend/src/styles.scss

@@ -402,9 +402,13 @@ h1, h2, h3 {
   font-size: 14px;
 }
 
+.progress {
+  position: relative;
+}
+
 .progress-text {
   position: absolute;
-  top: 8px;
+  top: 8.5px;
   width: 100%;
   text-align: center;
 }