Bisq module separation.

Transaction view.
Block view.
Blocks list.

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -1,5 +1,30 @@
 <div class="container-xl">
-  <h2 style="float: left;">Blocks</h2>
+  <h2 style="float: left;">BSQ Blocks</h2>
   <br>
 
+  <div class="clearfix"></div>
+
+  <table class="table table-borderless table-striped">
+    <thead>
+      <th>Hash</th>
+      <th>Total Sent (BSQ)</th>
+      <th>Transactions</th>
+      <th>Height</th>
+      <th>Time</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let block of blocks; trackBy: trackByFn">
+        <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}" [state]="{ data: { block: block } }">{{ block.hash | shortenString : 13 }}</a></td>
+        <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
+        <td>{{ block.txs.length }}</td>
+        <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+        <td>{{ block.time | date:'yyyy-MM-dd HH:mm' }}</td>
+      </tr> 
+    </tbody>
+  </table>
+
+  <br>
+
+  <ngb-pagination [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
+
 </div>

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { BisqApiService } from '../bisq-api.service';
+import { switchMap } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
 
 @Component({
   selector: 'app-bisq-blocks',
@@ -6,10 +10,47 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./bisq-blocks.component.scss']
 })
 export class BisqBlocksComponent implements OnInit {
+  blocks: BisqBlock[];
+  totalCount: number;
+  page = 1;
+  itemsPerPage: number;
+  contentSpace = window.innerHeight - (165 + 75);
+  fiveItemsPxSize = 250;
 
-  constructor() { }
+  pageSubject$ = new Subject<number>();
+
+  constructor(
+    private bisqApiService: BisqApiService,
+  ) { }
 
   ngOnInit(): void {
+    this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
+
+    this.pageSubject$
+      .pipe(
+        switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * 10, this.itemsPerPage))
+      )
+      .subscribe((response) => {
+        this.blocks = response.body;
+        this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
+      }, (error) => {
+        console.log(error);
+      });
+
+    this.pageSubject$.next(1);
   }
 
+  calculateTotalOutput(block: BisqBlock): number {
+    return block.txs.reduce((a: number, tx: BisqTransaction) =>
+      a + tx.outputs.reduce((acc: number, output: BisqOutput) => acc + output.bsqAmount, 0), 0
+    );
+  }
+
+  trackByFn(index: number) {
+    return index;
+  }
+
+  pageChange(page: number) {
+    this.pageSubject$.next(page);
+  }
 }