WIP: Bisq DAO support. Transactions list and details.

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

@@ -0,0 +1,32 @@
+<div class="container-xl">
+  <h2 style="float: left;">Latest BSQ Transactions</h2>
+  <br>
+
+  <div class="clearfix"></div>
+
+  <table class="table table-borderless table-striped">
+    <thead>
+      <th>Transaction</th>
+      <th>Type</th>
+      <th>Total Sent (BSQ)</th>
+      <th>Outputs</th>
+      <th>Block Height</th>
+      <th>Block Time</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let tx of transactions">
+        <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ bsqTx: tx }">{{ tx.id | shortenString : 16 }}</a></td>
+        <td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
+        <td>{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}</td>
+        <td>{{ tx.outputs.length }}</td>
+        <td><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
+        <td>{{ tx.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-transactions/bisq-transactions.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { BisqTransaction, BisqOutput } from '../../interfaces/bisq.interfaces';
+import { Subject } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+
+@Component({
+  selector: 'app-bisq-transactions',
+  templateUrl: './bisq-transactions.component.html',
+  styleUrls: ['./bisq-transactions.component.scss']
+})
+export class BisqTransactionsComponent implements OnInit {
+  transactions: BisqTransaction[];
+  totalCount: number;
+  page = 1;
+  itemsPerPage: number;
+  contentSpace = window.innerHeight - (200 + 200);
+  fiveItemsPxSize = 250;
+
+  pageSubject$ = new Subject<number>();
+
+  constructor(
+    private apiService: ApiService,
+  ) { }
+
+  ngOnInit(): void {
+    this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
+
+    this.pageSubject$
+      .pipe(
+        switchMap((page) => this.apiService.listBisqTransactions$((page - 1) * 10, this.itemsPerPage))
+      )
+      .subscribe((response) => {
+        this.transactions = response.body;
+        this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
+      }, (error) => {
+        console.log(error);
+      });
+
+    this.pageSubject$.next(1);
+  }
+
+  pageChange(page: number) {
+    this.pageSubject$.next(page);
+  }
+
+  calculateTotalOutput(outputs: BisqOutput[]): number {
+    return outputs.reduce((acc: number, output: BisqOutput) => acc + output.bsqAmount, 0);
+  }
+}

frontend/src/app/bisq/bisq.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BisqRoutingModule } from './bisq.routing.module';
+import { SharedModule } from '../shared/shared.module';
+import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+
+@NgModule({
+  declarations: [
+    BisqTransactionsComponent,
+  ],
+  imports: [
+    CommonModule,
+    BisqRoutingModule,
+    SharedModule,
+    NgbPaginationModule,
+  ],
+})
+export class BisqModule { }

frontend/src/app/bisq/bisq.routing.module.ts

@@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { StartComponent } from '../components/start/start.component';
+import { TransactionComponent } from '../components/transaction/transaction.component';
+import { BlockComponent } from '../components/block/block.component';
+import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
+import { AboutComponent } from '../components/about/about.component';
+import { AddressComponent } from '../components/address/address.component';
+import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
+import { StatisticsComponent } from '../components/statistics/statistics.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: StartComponent,
+    children: [
+      {
+        path: '',
+        component: BisqTransactionsComponent
+      },
+      {
+        path: 'tx/:id',
+        component: TransactionComponent
+      },
+      {
+        path: 'block/:id',
+        component: BlockComponent
+      },
+      {
+        path: 'mempool-block/:id',
+        component: MempoolBlockComponent
+      },
+    ],
+  },
+  {
+    path: 'graphs',
+    component: StatisticsComponent,
+  },
+  {
+    path: 'about',
+    component: AboutComponent,
+  },
+  {
+    path: 'address/:id',
+    children: [],
+    component: AddressComponent
+  },
+  {
+    path: '**',
+    redirectTo: ''
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BisqRoutingModule { }