Refactor. API explanations. UX revamp.

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

@@ -0,0 +1,18 @@
+<footer class="footer">
+  <div class="container">
+    <div class="my-2 my-md-0 mr-md-3">
+      <div *ngIf="memPoolInfo" class="info-block">
+        <span class="unconfirmedTx">Unconfirmed transactions:</span>&nbsp;<b>{{ memPoolInfo?.memPoolInfo?.size | number }}</b>
+        <br />
+        <span class="mempoolSize">Mempool size:</span>&nbsp;<b>{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</b>
+        <br />
+        <span class="txPerSecond">Tx weight per second:</span>&nbsp;
+        
+        <div class="progress">
+          <div class="progress-bar {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</footer>

frontend/src/app/components/footer/footer.component.scss

@@ -0,0 +1,44 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 120px;
+  background-color: #1d1f31;
+}
+
+.footer > .container {
+  margin-top: 25px;
+}
+
+.txPerSecond {
+  color: #4a9ff4;
+}
+
+.mempoolSize {
+  color: #4a68b9;
+}
+
+.unconfirmedTx {
+  color: #f14d80;
+}
+
+.info-block {
+  float: left;
+  width: 350px;
+  line-height: 25px;
+}
+
+.progress {
+  display: inline-flex;
+  width: 160px;
+  background-color: #2d3348;
+  height: 1.1rem;
+}
+
+.progress-bar {
+  padding: 4px;
+}
+
+.bg-warning {
+  background-color: #b58800 !important;
+}

frontend/src/app/components/footer/footer.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { MemPoolState } from 'src/app/interfaces/websocket.interface';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+  memPoolInfo: MemPoolState | undefined;
+  mempoolBlocks = 0;
+  progressWidth = '';
+  progressClass: string;
+  mempoolSize = 0;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.stateService.mempoolStats$
+      .subscribe((mempoolState) => {
+        this.memPoolInfo = mempoolState;
+        this.updateProgress();
+      });
+
+    this.stateService.mempoolBlocks$
+      .subscribe((mempoolBlocks) => {
+        if (!mempoolBlocks.length) { return; }
+        const size = mempoolBlocks.map((m) => m.blockSize).reduce((a, b) => a + b);
+        const vsize = mempoolBlocks.map((m) => m.blockVSize).reduce((a, b) => a + b);
+        this.mempoolSize = size;
+        this.mempoolBlocks = Math.ceil(vsize / 1000000);
+      });
+  }
+
+  updateProgress() {
+    if (!this.memPoolInfo) {
+      return;
+    }
+
+    const vBytesPerSecondLimit = 1667;
+
+    let vBytesPerSecond = this.memPoolInfo.vBytesPerSecond;
+    if (vBytesPerSecond > 1667) {
+      vBytesPerSecond = 1667;
+    }
+
+    const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
+    this.progressWidth = percent + '%';
+
+    if (percent <= 75) {
+      this.progressClass = 'bg-success';
+    } else if (percent <= 99) {
+      this.progressClass = 'bg-warning';
+    } else {
+      this.progressClass = 'bg-danger';
+    }
+  }
+}