Adding fee estimation component to front page

fixes #98

frontend/src/app/app.module.ts

@@ -40,6 +40,7 @@ import { StatusViewComponent } from './components/status-view/status-view.compon
 import { MinerComponent } from './components/miner/miner.component';
 import { SharedModule } from './shared/shared.module';
 import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 
 @NgModule({
   declarations: [
@@ -70,6 +71,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
     AssetsComponent,
     MinerComponent,
     StatusViewComponent,
+    FeesBoxComponent,
   ],
   imports: [
     BrowserModule,

frontend/src/app/components/fees-box/fees-box.component.html

@@ -0,0 +1,19 @@
+<table class="table mx-auto text-center" style="width: 500px">
+  <tr>
+    <td style="border-top: 0px; width: 33%;">1 hour</td>
+    <td style="border-top: 0px; width: 33%;">30 minutes</td>
+    <td style="border-top: 0px; width: 33%;">Next block</td>
+  </tr>
+  <tr *ngIf="(feeEstimations$ | async) as feeEstimations; else loadingFees">
+    <td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>
+    <td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
+    <td>{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
+  </tr>
+  <ng-template #loadingFees>
+    <tr>
+      <td><span class="skeleton-loader"></span></td>
+      <td><span class="skeleton-loader"></span></td>
+      <td><span class="skeleton-loader"></span></td>
+    </tr>
+  </ng-template>
+</table>

frontend/src/app/components/fees-box/fees-box.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+interface FeeEstimations {
+  fastestFee: number;
+  halfHourFee: number;
+  hourFee: number;
+}
+
+@Component({
+  selector: 'app-fees-box',
+  templateUrl: './fees-box.component.html',
+  styleUrls: ['./fees-box.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeesBoxComponent implements OnInit {
+  feeEstimations$: Observable<FeeEstimations>;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit(): void {
+    this.feeEstimations$ = this.stateService.mempoolBlocks$
+      .pipe(
+        map((pBlocks) => {
+          let firstMedianFee = Math.ceil(pBlocks[0].medianFee);
+
+          if (pBlocks.length === 1 && pBlocks[0].blockVSize <= 500000) {
+            firstMedianFee = 1;
+          }
+
+          const secondMedianFee = pBlocks[1] ? Math.ceil(pBlocks[1].medianFee) : firstMedianFee;
+          const thirdMedianFee = pBlocks[2] ? Math.ceil(pBlocks[2].medianFee) : secondMedianFee;
+
+          return {
+            'fastestFee': firstMedianFee,
+            'halfHourFee': secondMedianFee,
+            'hourFee': thirdMedianFee,
+          };
+        })
+      );
+  }
+
+}

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

@@ -1,5 +1,6 @@
-<div class="container-xl">
+<app-fees-box class="d-block mb-4"></app-fees-box>
 
+<div class="container-xl">
 <hr>
 
 <table class="table table-borderless" [alwaysCallback]="true" [fromRoot]="true" [infiniteScrollContainer]="'body'" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">