found blocks services and tables

src/app/components/splash/splash.component.html

@@ -18,7 +18,7 @@
                     <br>
                     <div class="info">
 
-                        <code>stratum+tcp://public-pool-web.airdns.org:21496</code>
+                        <code>stratum+tcp://public-pool.airdns.org:21496</code>
                         <br>
                         <code>username: &lt;your BTC address&gt;.&lt;worker name&gt;, password: x</code>
                         <br>
@@ -53,5 +53,30 @@
             </div>
 
         </div>
+
+        <div class="col-12" *ngIf="blockData$ | async as blockData">
+            <div class="card">
+                <h4 style="text-align: center;"> Found Blocks</h4>
+                <p-table [value]="blockData">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Height</th>
+                            <th>Address</th>
+                            <th>Worker</th>
+                            <th>Session</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-block>
+                        <tr>
+                            <td>{{ block.height }}</td>
+                            <td>{{ block.minerAddress }}</td>
+                            <td>{{ block.worker }}</td>
+                            <td>{{ block.sessionId }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
+            </div>
+        </div>
     </div>
 </div>

src/app/components/splash/splash.component.scss

@@ -11,6 +11,6 @@
 }
 
 .card {
-    max-width: 1000px;
+    max-width: 1024px;
     margin: 0 auto;
 }

src/app/components/splash/splash.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { map, Observable } from 'rxjs';
+import { map, Observable, shareReplay } from 'rxjs';
 
 import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { AppService } from '../../services/app.service';
@@ -16,14 +16,16 @@ export class SplashComponent {
   public address: FormControl;
 
   public chartData$: Observable<any>;
+  public blockData$: Observable<any>;
 
   public chartOptions: any;
 
   constructor(private appService: AppService) {
-    this.chartData$ = this.appService.getInfo().pipe(
-      map((info: any) => {
 
-        console.log(info)
+    const info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+    this.blockData$ = info$.pipe(map(info => info.blockData));
+    this.chartData$ = info$.pipe(
+      map((info: any) => {
         return {
           labels: info.chartData.map((d: any) => d.label),
           datasets: [

src/app/services/app.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
 
 import { environment } from '../../environments/environment';
 
@@ -13,6 +14,6 @@ export class AppService {
     ) { }
 
     public getInfo() {
-        return this.httpClient.get(`${environment.API_URL}/api/info`);
+        return this.httpClient.get(`${environment.API_URL}/api/info`) as Observable<any>;
     }
 }